/* V21 · Geometría en 3D y profundidad. Capa sobre v15–v20. Sin librerías externas. */
:root{--v21-ink:#10251f;--v21-mint:#9fd8bd;--v21-rose:#d07a95;--v21-soft:#c9dcd3}

/* Nudo de Lissajous en 3D detrás del hero (sustituye a la curva SVG cuando hay WebGL) */
.v21-knot{position:absolute;z-index:-1;right:-12%;top:50%;width:min(70vw,900px);aspect-ratio:1;transform:translateY(-50%);pointer-events:none;opacity:.6}
.v21-knot-on .m20-curve{display:none}
.m20-motion .v21-knot{animation:v21-fade 1.8s var(--m20-ease) .15s both}
@media(max-width:700px){.v21-knot{right:-40%;top:72%;width:130vw;opacity:.28}}

/* Profundidad en las fotos del hero: la tarjeta de la guitarra flota por delante */
.v21-depth{perspective:1300px}
.v21-depth .m20-hero-media{transform-style:preserve-3d;transition:rotate .7s var(--m20-ease)}
.v21-depth .m20-photo-guitar{translate:0 0 70px}

/* Tarjetas con inclinación 3D y un brillo que sigue al ratón */
.v21-tilt-parent{perspective:1000px}
.v21-tilt{position:relative;transition:rotate .5s var(--m20-ease)}
.v21-tilt::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(380px circle at var(--v21-gx,50%) var(--v21-gy,50%),rgba(159,216,189,.2),transparent 62%);opacity:0;transition:opacity .4s}
.v21-tilt:hover::after{opacity:1}

/* Sección «Geometría en vivo» */
.v21-geo{position:relative;isolation:isolate;overflow:hidden;background:var(--v21-ink);color:#e9f2ed;padding-block:clamp(64px,8vw,112px)}
.v21-geo::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(159,216,189,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(159,216,189,.08) 1px,transparent 1px),linear-gradient(rgba(159,216,189,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(159,216,189,.035) 1px,transparent 1px);
  background-size:80px 80px,80px 80px,16px 16px,16px 16px;
  -webkit-mask-image:radial-gradient(ellipse at 72% 50%,#000 25%,transparent 78%);mask-image:radial-gradient(ellipse at 72% 50%,#000 25%,transparent 78%)}
.v21-geo-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:56px;align-items:center}
.s15 .v21-geo .s15-kicker,.v21-geo .s15-kicker{color:var(--v21-mint)}
.s15 .v21-geo h2,.v21-geo h2{color:#fff;margin-bottom:22px}
.s15 .v21-geo .v21-geo-lead,.v21-geo-lead{color:var(--v21-soft);font-size:17px;line-height:1.7;max-width:46ch}
.v21-geo-picker{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 24px}
.v21-geo-picker button{font:inherit;font-size:13px;font-weight:700;line-height:1.2;padding:10px 15px;border-radius:999px;border:1px solid rgba(159,216,189,.42);background:transparent;color:#e9f2ed;cursor:pointer;transition:background-color .25s,color .25s,border-color .25s}
.v21-geo-picker button:hover{border-color:var(--v21-mint)}
.v21-geo-picker button[aria-pressed="true"]{background:var(--v21-mint);border-color:var(--v21-mint);color:var(--v21-ink)}
.v21-geo-picker button:focus-visible{outline:3px solid #f4c950;outline-offset:2px}
.v21-geo-panel{border-left:2px solid var(--v21-mint);padding:2px 0 2px 18px;margin:0 0 20px}
.s15 .v21-geo .v21-geo-panel h3,.v21-geo-panel h3{font-size:20px;color:#fff;margin:0 0 10px;letter-spacing:-.02em}
.s15 .v21-geo .v21-formula,.v21-formula{font-family:Georgia,'Times New Roman',serif;font-size:16px;line-height:1.8;color:#f4efe6;margin:0 0 10px}
.v21-formula var{font-style:italic}
.s15 .v21-geo .v21-geo-panel p:last-child,.v21-geo-panel p:last-child{color:#bcd2c8;font-size:15px;line-height:1.65;margin:0}
.v21-geo-slider{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--v21-soft);margin:0 0 22px}
.v21-geo-slider input{flex:1;max-width:260px;accent-color:var(--v21-mint)}
.v21-geo-slider output{font:600 12px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;min-width:3ch;color:#fff}
.v21-geo-slider[hidden]{display:none}
.s15 .v21-geo .s15-text-link,.v21-geo .s15-text-link{color:var(--v21-mint)}
.v21-geo-stage{position:relative;margin:0;aspect-ratio:1/1;width:100%;max-width:640px;justify-self:center}
.v21-geo-stage::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background:linear-gradient(var(--v21-mint),var(--v21-mint)) 0 0/18px 1px no-repeat,linear-gradient(var(--v21-mint),var(--v21-mint)) 0 0/1px 18px no-repeat,
  linear-gradient(var(--v21-mint),var(--v21-mint)) 100% 0/18px 1px no-repeat,linear-gradient(var(--v21-mint),var(--v21-mint)) 100% 0/1px 18px no-repeat,
  linear-gradient(var(--v21-mint),var(--v21-mint)) 0 100%/18px 1px no-repeat,linear-gradient(var(--v21-mint),var(--v21-mint)) 0 100%/1px 18px no-repeat,
  linear-gradient(var(--v21-mint),var(--v21-mint)) 100% 100%/18px 1px no-repeat,linear-gradient(var(--v21-mint),var(--v21-mint)) 100% 100%/1px 18px no-repeat}
.v21-geo-canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:pan-y;border-radius:6px}
.v21-geo-canvas.is-grabbing{cursor:grabbing}
.v21-geo-canvas:focus-visible{outline:2px solid var(--v21-mint);outline-offset:4px}
.v21-geo-hud{position:absolute;left:12px;right:12px;bottom:6px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font:600 11px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.06em;text-transform:uppercase;color:rgba(201,220,211,.72);pointer-events:none}

/* Sin JS o sin WebGL: sin lienzo; las cinco superficies quedan como fichas con su fórmula */
.v21-geo-stage,.v21-geo-picker{display:none}
.js .v21-geo:not(.v21-no-webgl) .v21-geo-stage{display:block}
.js .v21-geo:not(.v21-no-webgl) .v21-geo-picker{display:flex}
.js .v21-geo:not(.v21-geo-on):not(.v21-no-webgl) .v21-geo-panel+.v21-geo-panel{display:none}
.v21-geo:not(.v21-geo-on) .v21-geo-slider{display:none}
html:not(.js) .v21-geo-grid,.v21-no-webgl .v21-geo-grid{grid-template-columns:1fr}
html:not(.js) .v21-geo-panels,.v21-no-webgl .v21-geo-panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:8px 32px;margin-top:28px}

@media(max-width:900px){.v21-geo-grid{grid-template-columns:1fr;gap:28px}.v21-geo-stage{max-width:560px}}
@media(max-width:700px){.v21-geo-picker button{font-size:12px;padding:9px 12px}.v21-formula{font-size:15px}}

@keyframes v21-fade{from{opacity:0}}
@media (prefers-reduced-motion:reduce){.v21-tilt,.v21-depth .m20-hero-media{transition:none}}
@media print{.v21-knot,.v21-geo-stage{display:none!important}.v21-geo{background:none;color:#000}}