/* ============================================================
   PowerGrade V1 — Landing
   ============================================================ */

/* ------------------------------------------------------------
   Tipografias alojadas en este mismo sitio (no se pide nada a
   Google). Reglas copiadas tal cual de la hoja oficial de Google
   Fonts, solo con la ruta cambiada: mismo peso, mismo estilo,
   mismo unicode-range, mismo font-display. Subconjuntos latin y
   latin-ext (los que usa el texto en espanol).
   Playfair Display, Inter e IBM Plex Mono: licencia SIL OFL 1.1.
   ------------------------------------------------------------ */

@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url('../fonts/inter-var-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url('../fonts/inter-var-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/inter-var-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/inter-var-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../fonts/inter-var-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../fonts/inter-var-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face{
  font-family:'Playfair Display';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/playfair-display-var-italic-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face{
  font-family:'Playfair Display';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/playfair-display-var-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face{
  font-family:'Playfair Display';
  font-style:italic;
  font-weight:500;
  font-display:swap;
  src:url('../fonts/playfair-display-var-italic-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face{
  font-family:'Playfair Display';
  font-style:italic;
  font-weight:500;
  font-display:swap;
  src:url('../fonts/playfair-display-var-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face{
  font-family:'Playfair Display';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/playfair-display-var-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face{
  font-family:'Playfair Display';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/playfair-display-var-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face{
  font-family:'Playfair Display';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../fonts/playfair-display-var-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face{
  font-family:'Playfair Display';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../fonts/playfair-display-var-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --bg:          #0c0d0e;
  --panel:       #141617;
  --panel-alt:   #1b1e1f;
  --text:        #edeae4;
  --text-dim:    rgba(237,234,228,.66);
  --text-faint:  rgba(237,234,228,.55);
  --teal:        #3fa7a0;
  --amber:       #e8823c;
  --line:        rgba(237,234,228,.11);
  --line-soft:   rgba(237,234,228,.06);

  --serif: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --maxw: 1180px;
  --pad:  clamp(1.25rem, 5vw, 3.5rem);

  /* Margen lateral util. En un movil con muesca (iPhone en
     horizontal, sobre todo) env() devuelve los pixeles que la
     pantalla se come por el notch o las esquinas redondeadas; en
     cualquier otra pantalla vale 0 y el margen queda exactamente
     igual que antes. */
  --pad-l: calc(var(--pad) + env(safe-area-inset-left, 0px));
  --pad-r: calc(var(--pad) + env(safe-area-inset-right, 0px));

  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  /* El fondo ya no es un negro plano: lleva un frio muy tenue
     arriba y un calido abajo, los dos colores de la paleta, para
     que la pagina tenga profundidad sin robarle contraste al
     texto. La malla de puntos que reacciona al cursor va aparte,
     en .dots. */
  background:
    radial-gradient(118% 78% at 50% -8%, rgba(63,167,160,.07), transparent 62%),
    radial-gradient(108% 72% at 50% 108%, rgba(232,130,60,.05), transparent 62%),
    var(--bg);
  background-attachment:fixed;
  color:var(--text);
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(.95rem, .55vw + .82rem, 1.05rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }

::selection{ background:rgba(63,167,160,.35); color:var(--text); }

/* ---------- Atmosfera --------------------------------------- */

.grain{
  position:fixed; inset:0; z-index:60;
  pointer-events:none;
  opacity:.05;
  mix-blend-mode:overlay;
}
.grain svg{ width:100%; height:100%; }

/* ---------- Malla de puntos del fondo ----------------------
   Una rejilla de puntos muy tenues, del color de la paleta, que
   se ondula alrededor del cursor como el agua. Va por DEBAJO del
   contenido (z-index 1 contra el 10 de main), asi que nunca pasa
   por encima de un boton ni lava una fotografia, y no captura
   ningun evento. Todo el dibujo lo hace initDots() en main.js. */
.dots{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
  pointer-events:none;
  opacity:0;
  transition:opacity 1.2s var(--ease);
}
.dots.is-on{ opacity:1; }

@media (prefers-reduced-motion:reduce){
  .dots{ transition:none; }
}

.vignette{
  position:fixed; inset:0; z-index:55;
  pointer-events:none;
  background:radial-gradient(120% 85% at 50% 42%, transparent 45%, rgba(0,0,0,.18) 76%, rgba(0,0,0,.48) 100%);
}

/* Aviso para navegadores sin JavaScript. Va en la hoja de estilos y no
   como atributo style= para poder prohibir los estilos en linea por CSP. */
.noscript-msg{
  padding:6rem 1.5rem;
  text-align:center;
  font-family:var(--mono);
  font-size:.8rem;
  color:var(--text);
}

/* ---------- Topbar ------------------------------------------ */

.skip-link{
  position:fixed; z-index:100;
  left:calc(1rem + env(safe-area-inset-left, 0px));
  top:calc(1rem + env(safe-area-inset-top, 0px));
  background:var(--panel-alt); color:var(--text);
  padding:.75rem 1rem; font-family:var(--mono); font-size:.75rem;
  border:1px solid var(--line);
  transform:translateY(-250%);
  transition:transform .2s var(--ease);
}
.skip-link:focus{ transform:none; }
@media (prefers-reduced-motion:reduce){
  .skip-link{ transition:none; }
}

/* Difuminado bajo la barra. Va aparte del <header> porque este usa
   mix-blend-mode y cualquier hijo suyo se mezclaria tambien. */
.topbar-scrim{
  position:fixed;
  top:0; left:0; right:0;
  /* Un poco mas alta que antes: el degradado necesita recorrido para
     apagarse sin que se vea el corte. */
  height:clamp(94px,13vh,142px);
  z-index:69;
  pointer-events:none;
  /* Placa mas densa y desenfoque mas marcado, para que se note que la
     barra flota por encima de la pagina y no forma parte de ella. El
     saturate evita que lo que pasa por debajo se vuelva gris: las fotos
     conservan su color, solo se difuminan. */
  background:linear-gradient(180deg,
    rgba(12,13,14,.96) 0%,
    rgba(12,13,14,.9) 42%,
    rgba(12,13,14,.58) 72%,
    rgba(12,13,14,0) 100%);
  -webkit-backdrop-filter:blur(24px) saturate(115%);
  backdrop-filter:blur(24px) saturate(115%);
  /* El desenfoque tambien se desvanece hacia abajo: sin esto se veria
     una linea recta donde termina el cristal. */
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 58%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 58%,transparent 100%);
  transition:transform .38s var(--ease), opacity .38s var(--ease);
}

/* Al bajar, la barra y su difuminado se retiran; al subir vuelven. */
.topbar-scrim.is-hidden,
.topbar.is-hidden{
  transform:translateY(-105%);
  opacity:0;
}
.topbar.is-hidden .tab{ pointer-events:none; }

/* La barra usa mix-blend-mode: difference para seguir siendo legible sobre
   cualquier imagen que pase por debajo. Si en algún navegador viejo diera
   problemas de repintado, basta con poner --topbar-blend: normal. */
.topbar{
  --topbar-blend:difference;
  position:fixed; top:0; left:0; right:0; z-index:70;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
  padding:clamp(.85rem,2vw,1.35rem) var(--pad-r) clamp(.85rem,2vw,1.35rem) var(--pad-l);
  font-family:var(--mono);
  font-size:clamp(.58rem,1.6vw,.68rem);
  letter-spacing:.2em;
  color:var(--text);
  mix-blend-mode:var(--topbar-blend);
  pointer-events:none;
  transition:transform .38s var(--ease), opacity .38s var(--ease);
}
.topbar__meta{ display:inline-flex; align-items:center; gap:.55rem; }

/* Pestañas: la barra entera tiene pointer-events:none para no estorbar,
   asi que hay que devolverselos solo a los botones. */
.topbar__tabs{
  display:flex;
  align-items:center;
  gap:clamp(.9rem,2.5vw,1.6rem);
  pointer-events:auto;
  margin-inline:auto;
}
.tab{
  appearance:none;
  background:none;
  border:0;
  padding:.6rem .15rem;
  font-family:var(--mono);
  font-size:inherit;
  letter-spacing:inherit;
  color:inherit;
  opacity:.5;
  cursor:pointer;
  border-bottom:1px solid transparent;
  transition:opacity .3s var(--ease), border-color .3s var(--ease);
}
.tab:hover{ opacity:.8; }
.tab.is-active{
  opacity:1;
  border-bottom-color:currentColor;
}
.tab:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:4px;
}
@media (prefers-reduced-motion:reduce){
  .tab{ transition:none; }
}


/* Cambio de idioma. Vive en la barra superior, que tiene
   pointer-events:none, asi que hay que devolverselos. Sigue el
   mismo idioma visual que las pestañas y las etiquetas mono. */
.lang-toggle{
  appearance:none;
  position:relative;
  pointer-events:auto;
  cursor:pointer;
  font-family:var(--mono);
  font-size:inherit;
  letter-spacing:.16em;
  line-height:1;
  color:inherit;
  background:none;
  border:1px solid currentColor;
  border-radius:2px;
  padding:.34rem .48rem .3rem;
  opacity:.5;
  transition:opacity .3s var(--ease), border-color .3s var(--ease);
}
/* El recuadro visible es pequeño a proposito, pero un dedo necesita
   44px para acertar. Este pseudo-elemento es invisible y solo amplia
   la zona sensible al toque: el boton se ve exactamente igual. */
.lang-toggle::before{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:44px; height:44px;
  transform:translate(-50%,-50%);
}
.lang-toggle:hover{ opacity:1; }
.lang-toggle:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:4px;
  opacity:1;
}
@media (prefers-reduced-motion:reduce){
  .lang-toggle{ transition:none; }
}

.rec-dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--amber);
  animation:blink 1.8s steps(1,end) infinite;
}
@keyframes blink{ 0%,55%{opacity:1} 56%,100%{opacity:.15} }

.timecode{ font-variant-numeric:tabular-nums; letter-spacing:.14em; }

/* ---------- Layout base ------------------------------------- */

main{ position:relative; z-index:10; }

/* Cambio de pestaña: disolvencia corta, como un fundido de montaje.
   La vista que sale baja un pelo y se apaga; la que entra sube y aparece. */
.view{
  transition:opacity .34s var(--ease), transform .34s var(--ease);
}
.view.is-leaving{
  opacity:0;
  transform:translateY(10px);
  pointer-events:none;
}
.view.is-entering{
  opacity:0;
  transform:translateY(14px);
  transition:none;
}
@media (prefers-reduced-motion:reduce){
  .view,
  .view.is-leaving,
  .view.is-entering{
    transition:none;
    opacity:1;
    transform:none;
  }
}

.hero,
.gallery,
.about,
.luts,
.gear,
.final{
  max-width:var(--maxw);
  margin-inline:auto;
  padding-left:var(--pad-l);
  padding-right:var(--pad-r);
}

.section-head{ margin-bottom:clamp(2.5rem,5vw,4rem); max-width:44ch; }

.section-title{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.9rem, 4.4vw, 3.2rem);
  line-height:1.12;
  letter-spacing:-.015em;
  margin:0 0 .8rem;
}
.section-sub{
  margin:0;
  color:var(--text-dim);
  font-size:clamp(.88rem,2.4vw,1rem);
  max-width:42ch;
}

/* ---------- Hero -------------------------------------------- */

.hero{
  padding-top:clamp(7.5rem, 17vh, 11rem);
  padding-bottom:clamp(4rem, 9vh, 7rem);
}

.eyebrow{
  display:flex; align-items:center; gap:.9rem;
  margin:0 0 clamp(1.4rem,3vw,2.2rem);
  font-family:var(--mono);
  font-size:clamp(.6rem,1.8vw,.7rem);
  letter-spacing:.34em;
  color:var(--text-faint);
}
.eyebrow__line{
  display:block; width:clamp(28px,7vw,64px); height:1px;
  background:linear-gradient(90deg, transparent, var(--amber));
  flex:none;
}

.hero__title,
.luts__title,
.gear__title{
  margin:0;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(3.1rem, 13vw, 8.4rem);
  line-height:.94;
  letter-spacing:-.028em;
}
.hero__word,
.luts__word,
.gear__word{ display:block; }
.hero__title em,
.luts__title em,
.gear__title em{
  font-style:italic;
  background:linear-gradient(104deg, var(--amber) 12%, var(--teal) 88%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero__version,
/* El titulo de Equipo es una frase larga, no dos palabras: mismo
   tratamiento pero un cuerpo algo menor para que respire. */
.gear__title{
  font-size:clamp(2.4rem, 7.4vw, 5rem);
  max-width:16ch;
}

.luts__version{
  display:block;
  font-size:.30em;
  letter-spacing:.12em;
  color:var(--text-faint);
  margin-top:.35em;
}

.hero__tagline,
.luts__tagline,
.gear__tagline{
  margin:clamp(1.6rem,3.6vw,2.4rem) 0 0;
  max-width:46ch;
  font-size:clamp(1rem, 2.6vw, 1.2rem);
  line-height:1.6;
  color:var(--text-dim);
}

.hero__compare{ margin-top:clamp(3rem,7vw,5.5rem); }

/* ---------- CTA --------------------------------------------- */

.cta{ margin-top:clamp(2rem,4vw,2.8rem); }

/* Distintivo de oferta. Reutiliza el lenguaje de los badges de los
   comparadores y el punto ambar parpadeante del indicador rec. */
.cta__badge{
  display:flex;
  width:fit-content;
  align-items:center;
  gap:.55rem;
  margin:0 0 .95rem;
  padding:.36rem .72rem;
  font-family:var(--mono);
  font-size:clamp(.56rem,1.7vw,.66rem);
  letter-spacing:.2em;
  color:var(--amber);
  background:linear-gradient(180deg, rgba(232,130,60,.11), rgba(232,130,60,.035));
  border:1px solid rgba(232,130,60,.34);
  border-radius:2px;
}
.cta__badge-dot{
  flex:none;
  width:5px; height:5px;
  border-radius:50%;
  background:var(--amber);
  box-shadow:0 0 9px rgba(232,130,60,.85);
  animation:offerPulse 2.4s ease-in-out infinite;
}
@keyframes offerPulse{
  0%,100%{ opacity:1; transform:scale(1); }
  50%    { opacity:.3; transform:scale(.7); }
}


.btn-buy{
  appearance:none;
  position:relative;
  overflow:hidden;
  display:inline-flex; align-items:center; gap:.85rem;
  padding:clamp(.85rem,2vw,1.05rem) clamp(1.4rem,4vw,2.1rem);
  background:linear-gradient(180deg, rgba(237,234,228,.05), rgba(237,234,228,.02));
  border:1px solid rgba(237,234,228,.22);
  border-radius:2px;
  color:var(--text);
  font-family:var(--sans);
  font-weight:400;
  font-size:clamp(.85rem,2.4vw,.98rem);
  letter-spacing:.03em;
  cursor:pointer;
  transition:border-color .35s var(--ease), background .35s var(--ease), transform .35s var(--ease);
}
.btn-buy__label{ white-space:nowrap; }

/* Precio en pesos: mono, ambar y separado por una linea fina. */
.btn-buy__price{
  font-family:var(--mono);
  font-size:.84em;
  letter-spacing:.04em;
  color:var(--amber);
  padding-left:.8rem;
  border-left:1px solid rgba(237,234,228,.2);
  white-space:nowrap;
}
.btn-buy__price:empty{ display:none; }

.btn-buy::after{
  content:"";
  width:18px; height:1px;
  background:currentColor;
  opacity:.5;
  transition:width .35s var(--ease), opacity .35s var(--ease);
}
.btn-buy:hover{
  border-color:rgba(63,167,160,.7);
  background:linear-gradient(180deg, rgba(63,167,160,.14), rgba(232,130,60,.06));
  transform:translateY(-1px);
}
.btn-buy:hover::after{ width:26px; opacity:1; }
.btn-buy:active{ transform:translateY(0); }
.btn-buy:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:4px;
}
/* Al pulsar, un destello teal/ambar cruza el boton antes de saltar a Stripe. */
.btn-buy::before{
  content:"";
  position:absolute;
  top:0; bottom:0; left:-45%;
  width:38%;
  transform:skewX(-18deg);
  background:linear-gradient(100deg, transparent, rgba(63,167,160,.35) 38%, rgba(232,130,60,.5) 62%, transparent);
  opacity:0;
  pointer-events:none;
}
.btn-buy.is-activating{
  border-color:rgba(232,130,60,.8);
  background:linear-gradient(180deg, rgba(232,130,60,.16), rgba(63,167,160,.07));
  transform:scale(.985);
}
.btn-buy.is-activating::before{ animation:btnSweep .5s var(--ease) forwards; }
@keyframes btnSweep{
  0%  { left:-45%; opacity:0; }
  18% { opacity:1; }
  100%{ left:112%; opacity:0; }
}

/* --- Boton principal de compra --------------------------------
   Los dos botones grandes (hero y CTA final) comparten este
   tratamiento: mas cuerpo, luz calida entrando por un lado y
   fria por el otro, y un punto ambar como el del indicador rec.
   Los botones pequeños de las LUTs se quedan con el estilo sobrio. */
.btn-buy[data-buy-main]{
  padding:clamp(1rem,2.4vw,1.25rem) clamp(1.6rem,4.5vw,2.4rem);
  border-color:rgba(237,234,228,.3);
  background:
    linear-gradient(180deg, rgba(237,234,228,.09), rgba(237,234,228,.02)),
    radial-gradient(130% 200% at 0% 50%, rgba(232,130,60,.16), transparent 62%),
    radial-gradient(130% 200% at 100% 50%, rgba(63,167,160,.16), transparent 62%);
  box-shadow:
    inset 0 1px 0 rgba(237,234,228,.10),
    0 14px 34px -18px rgba(0,0,0,.95);
}
.btn-buy[data-buy-main]:hover{
  border-color:rgba(232,130,60,.62);
  background:
    linear-gradient(180deg, rgba(237,234,228,.13), rgba(237,234,228,.03)),
    radial-gradient(130% 200% at 0% 50%, rgba(232,130,60,.26), transparent 62%),
    radial-gradient(130% 200% at 100% 50%, rgba(63,167,160,.24), transparent 62%);
  box-shadow:
    inset 0 1px 0 rgba(237,234,228,.16),
    0 16px 40px -16px rgba(232,130,60,.35);
}

.btn-buy__dot{
  flex:none;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--amber);
  box-shadow:0 0 10px rgba(232,130,60,.85);
  transition:transform .35s var(--ease);
}
.btn-buy[data-buy-main]:hover .btn-buy__dot{ transform:scale(1.25); }

/* El hero no tiene el resplandor que envuelve al CTA final, asi que
   el boton se lo lleva puesto: mismo peso visual en las dos pantallas.

   La caja tiene que ser MUCHO mas grande que el degradado que lleva
   dentro. Si la elipse llega al borde de la caja, el navegador la
   corta en seco y se ve el rectangulo. Con estas medidas el color se
   apaga del todo antes de llegar al borde, igual que en .final. */
.hero .cta{ position:relative; }
.hero .cta::before{
  content:"";
  position:absolute;
  /* La caja se ancla al borde izquierdo del bloque, no a todo su
     ancho: asi el centro del resplandor cae siempre sobre el boton
     y no se corre a la derecha en pantallas anchas. */
  top:-190px; bottom:-190px;
  /* La caja mide 900px y su centro cae en left + 450. Para que ese
     centro coincida con el del boton, el desplazamiento es
     450 menos la mitad del ancho del boton: en movil el boton mide
     unos 300px (450-150 = 300) y en escritorio unos 434 (450-217). */
  left:-300px; width:900px;
  background:radial-gradient(38% 42% at 50% 50%, rgba(63,167,160,.14), transparent 70%);
  pointer-events:none;
  z-index:-1;
}

@media (min-width:701px){
  .hero .cta::before{ left:-233px; }
}
/* En movil una caja de 900px se saldria por la derecha y alargaria la
   pagina a lo ancho. Se ajusta al ancho de la pantalla: el degradado
   queda cortado justo en los bordes, donde no hay nada con que
   compararlo y no se nota. */
@media (max-width:700px){
  .hero .cta::before{ left:calc(-1 * var(--pad)); width:100vw; }
}

@media (prefers-reduced-motion:reduce){
  .btn-buy__dot{ transition:none; }
  .btn-buy[data-buy-main]:hover .btn-buy__dot{ transform:none; }
}

.btn-buy.is-pending{ animation:nudge .5s var(--ease); }
@keyframes nudge{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-3px)} 75%{transform:translateX(3px)} }

.cta__note{
  margin:.9rem 0 0;
  font-family:var(--mono);
  font-size:clamp(.6rem,1.8vw,.7rem);
  letter-spacing:.16em;
  color:var(--text-faint);
  transition:color .35s var(--ease);
}
.cta__note.is-lit{ color:var(--amber); }

/* ---------- Comparador -------------------------------------- */

.compare-card{ display:block; margin:0; }

/* El comparador es la prueba de que el producto funciona, asi que se
   despega del fondo con una sombra proyectada en vez de quedar pegado
   a plano. Nada de transform al pasar por encima: aqui se arrastra,
   y un desplazamiento pelearia con el gesto. */
.compare{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  background:var(--panel);
  border:1px solid var(--line-soft);
  border-radius:3px;
  box-shadow:0 26px 60px -34px rgba(0,0,0,.95);
  cursor:ew-resize;
  touch-action:none;
  -webkit-user-select:none;
  user-select:none;
  transition:border-color .35s var(--ease), box-shadow .35s var(--ease);
  --pos:50%;
}
.compare:hover{
  border-color:rgba(63,167,160,.3);
  box-shadow:0 30px 68px -32px rgba(0,0,0,1);
}
.compare:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:4px;
}
.compare img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  -webkit-user-drag:none;
  pointer-events:none;
}
.compare__after{
  position:absolute; inset:0;
  clip-path:inset(0 0 0 var(--pos));
  will-change:clip-path;
}

.compare__line{
  position:absolute; top:0; bottom:0;
  left:var(--pos);
  width:1px;
  margin-left:-.5px;
  background:rgba(237,234,228,.85);
  box-shadow:0 0 14px rgba(0,0,0,.65);
  pointer-events:none;
}
.compare__knob{
  position:absolute; top:50%; left:var(--pos);
  transform:translate(-50%,-50%);
  width:clamp(36px,8vw,46px); height:clamp(36px,8vw,46px);
  border-radius:50%;
  display:grid; place-items:center;
  background:rgba(12,13,14,.5);
  border:1px solid rgba(237,234,228,.62);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  box-shadow:0 2px 18px rgba(0,0,0,.5);
  pointer-events:none;
}
.compare__knob svg{ width:52%; height:52%; opacity:.9; }

.badge{
  position:absolute; top:.7rem;
  padding:.34rem .6rem;
  font-family:var(--mono);
  font-size:clamp(.58rem,1.5vw,.62rem);
  letter-spacing:.16em;
  background:rgba(12,13,14,.52);
  border:1px solid var(--line);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  color:var(--text-dim);
  pointer-events:none;
}
.badge--before{ left:.7rem; }
.badge--after{ right:.7rem; color:var(--teal); border-color:rgba(63,167,160,.32); }

.compare-caption{
  display:block;
  margin:.95rem auto 0;
  text-align:center;
  font-family:var(--mono);
  font-size:clamp(.64rem,1.7vw,.7rem);
  letter-spacing:.14em;
  color:var(--text-faint);
}

.compare.is-missing::after{
  content:attr(data-missing);
  position:absolute; inset:0;
  display:grid; place-items:center;
  padding:1.5rem;
  text-align:center;
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.1em;
  line-height:1.9;
  white-space:pre-line;
  color:var(--text-faint);
  background:repeating-linear-gradient(135deg, var(--panel) 0 12px, var(--panel-alt) 12px 24px);
}

.hero__compare .compare-caption{ margin-top:1.15rem; }

/* ---------- Galeria ----------------------------------------- */

.gallery{ padding-block:clamp(4rem,10vh,8rem); }

.gallery__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(2rem,4.5vw,3.4rem);
}
@media (max-width:860px){
  .gallery__grid{ grid-template-columns:1fr; }
}

/* ---------- Que estas comprando ----------------------------- */

.about{
  padding-block:clamp(4rem,10vh,8rem);
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(2.5rem,6vw,5rem);
  align-items:center;
  border-top:1px solid var(--line-soft);
}
@media (max-width:860px){
  .about{ grid-template-columns:1fr; }
}

.about__list{
  list-style:none;
  margin:0 0 clamp(2.4rem,5vw,3.4rem);
  padding:0;
}
.about__list li{
  position:relative;
  padding-left:1.7rem;
  margin-bottom:1.15rem;
  color:var(--text-dim);
  max-width:48ch;
}
.about__list li::before{
  content:"";
  position:absolute; left:0; top:.72em;
  width:9px; height:1px;
  background:var(--amber);
}
.about__list li:nth-child(even)::before{ background:var(--teal); }

.facts{
  display:flex;
  flex-wrap:wrap;
  gap:clamp(1.5rem,4vw,3rem);
}
/* Los datos se leen como la ficha tecnica de una camara: cada cifra
   colgando de su propio filo, ambar y teal alternos igual que los
   guiones de la lista de arriba. */
.fact{
  min-width:6.5rem;
  padding-top:.85rem;
  border-top:1px solid rgba(232,130,60,.34);
}
.fact:nth-child(even){ border-top-color:rgba(63,167,160,.34); }
.fact__value{
  display:block;
  font-family:var(--serif);
  font-size:clamp(1.8rem,4.8vw,2.6rem);
  line-height:1;
  color:var(--text);
}
.fact__label{
  display:block;
  margin-top:.5rem;
  font-family:var(--mono);
  font-size:clamp(.55rem,1.6vw,.66rem);
  letter-spacing:.16em;
  color:var(--text-faint);
}

.about__scope{ justify-self:center; width:100%; max-width:360px; }
.scope{ position:relative; width:100%; aspect-ratio:1; }
.scope svg{ width:100%; height:100%; }
.scope__caption{
  margin:1rem 0 0;
  text-align:center;
  font-family:var(--mono);
  font-size:clamp(.55rem,1.6vw,.64rem);
  letter-spacing:.14em;
  color:var(--text-faint);
}

/* ---------- Las 7 LUTs -------------------------------------- */

/* La cabecera de esta pestaña usa el mismo tratamiento que el hero:
   serif grande, la palabra clave en cursiva con el degradado ambar/teal
   y el numero debajo, en pequeño. Solo cambia la escala, algo menor
   porque el titulo es mas corto. */
.luts__title{
  font-size:clamp(2.9rem, 11.5vw, 7.2rem);
}
.luts__head,
.gear__head{ margin-bottom:clamp(3rem,6vw,4.5rem); }
.luts__tagline,
.gear__tagline{ max-width:44ch; }


/* Al ser la primera seccion de su pestaña, necesita despejar la barra fija. */
#view-luts .luts,
#view-equipo .gear{
  padding-top:clamp(7rem,16vh,10rem);
  border-top:0;
}


.luts,
.gear{
  padding-block:clamp(4rem,10vh,8rem);
  border-top:1px solid var(--line-soft);
}

/* ---------- Dos nodos en DaVinci Resolve --------------------
   El gancho de la pestaña: la captura del arbol de nodos, con
   el mismo encuadre ancho de un plano de cine. Marco fino,
   marcas de esquina como las guias de un visor y una leyenda
   numerada que sigue el orden de los nodos. */

.node-demo{
  margin:0 0 clamp(3.5rem,7vw,5.5rem);
}

.node-demo__frame{
  position:relative;
  /* El marco se queda mas estrecho que la seccion, asi que sin el
     margen automatico se pegaba a la izquierda y dejaba un hueco de
     148px a la derecha. Ahora va centrado, y un poco mas ancho: 1000px
     es practicamente el tamaño nativo de la captura (978px), asi que
     gana presencia sin que el texto de los nodos se ablande.
     Por debajo de 1000px de ancho el limite no llega a aplicarse y en
     movil todo se queda exactamente igual que antes. */
  max-width:1000px;
  margin-inline:auto;
  border:1px solid var(--line);
  border-radius:3px;
  background:var(--panel);
  overflow:hidden;
  box-shadow:0 24px 60px -34px rgba(0,0,0,.95);
}

/* Filo de luz ambar arriba: el mismo acento que la eyebrow. */
.node-demo__frame::before{
  content:'';
  position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--amber), transparent);
  opacity:.5;
  z-index:2;
}

.node-demo__frame img{
  display:block;
  width:100%;
  height:auto;
}

.node-demo__mark{
  position:absolute;
  width:14px; height:14px;
  border:1px solid rgba(237,234,228,.3);
  z-index:2;
  pointer-events:none;
}
.node-demo__mark--tl{ top:10px;    left:10px;  border-right:0; border-bottom:0; }
.node-demo__mark--tr{ top:10px;    right:10px; border-left:0;  border-bottom:0; }
.node-demo__mark--bl{ bottom:10px; left:10px;  border-right:0; border-top:0; }
.node-demo__mark--br{ bottom:10px; right:10px; border-left:0;  border-top:0; }

/* La leyenda se centra en el ancho completo de la seccion, no bajo
   el marco de la captura: por eso el limite de 920px vive en la
   linea de los pasos y no en el pie entero. */
.node-demo__caption{
  margin:clamp(1rem,2.4vw,1.35rem) 0 0;
}

.node-demo__steps{
  /* Misma anchura y mismo centrado que el marco: los numeros siguen
     arrancando justo bajo su borde izquierdo. */
  max-width:1000px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.55rem .9rem;
  /* El auto de los lados va aqui y no arriba: un margin:0 posterior
     lo habria borrado. */
  margin:0 auto;
  font-family:var(--mono);
  font-size:clamp(.58rem,1.6vw,.66rem);
  letter-spacing:.2em;
  color:var(--text-faint);
}
.node-demo__step{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
}
.node-demo__num{
  padding:.16rem .42rem;
  border:1px solid rgba(232,130,60,.4);
  border-radius:2px;
  letter-spacing:.1em;
  color:var(--amber);
}
/* El segundo paso es el LUT: cambia al otro extremo de la paleta. */
.node-demo__step ~ .node-demo__step .node-demo__num{
  border-color:rgba(63,167,160,.4);
  color:var(--teal);
}
.node-demo__link{
  display:block;
  width:clamp(20px,4vw,42px);
  height:1px;
  background:linear-gradient(90deg, var(--amber), var(--teal));
  opacity:.55;
  flex:none;
}

/* La leyenda va sobre una placa centrada, como el rotulo de un
   plano: el fondo se enciende en el centro y se disuelve hacia
   los lados, con el filamento ambar arriba y una insinuacion de
   teal abajo. La mascara vive en un pseudoelemento para que se
   difumine el fondo, nunca el texto. */
.node-demo__legend{
  position:relative;
  isolation:isolate;
  max-width:62ch;
  margin:clamp(1.1rem,2.6vw,1.5rem) auto 0;
  padding:clamp(1rem,2.6vw,1.4rem) clamp(1.3rem,3.4vw,2.2rem);
  text-align:center;
  text-wrap:balance;
  font-size:clamp(.84rem,2vw,.94rem);
  line-height:1.7;
  color:var(--text-dim);
}
.node-demo__legend::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:4px;
  background:
    radial-gradient(88% 130% at 50% -12%, rgba(232,130,60,.10), transparent 62%),
    radial-gradient(88% 130% at 50% 112%, rgba(63,167,160,.08), transparent 62%),
    linear-gradient(180deg, rgba(27,30,31,.96), rgba(20,22,23,.7));
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 13%, #000 87%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 13%, #000 87%, transparent);
}
.node-demo__legend::after{
  content:'';
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:min(240px,62%);
  height:1px;
  background:linear-gradient(90deg, transparent, var(--amber), transparent);
  opacity:.45;
}
.node-demo__accent{
  font-weight:500;
  color:var(--text);
}

.node-demo__note{
  margin:.9rem 0 0;
  max-width:52ch;
  font-size:clamp(.92rem,2.3vw,1.02rem);
  line-height:1.6;
  color:var(--text-dim);
}

.luts__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  /* Menos hueco que antes porque ahora cada tarjeta trae el suyo
     propio por dentro: la separacion que se ve entre una muestra y
     la siguiente acaba siendo la misma de siempre. */
  gap:clamp(1.2rem,2.4vw,1.8rem);
  align-items:stretch;
}
@media (max-width:900px){
  .luts__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:600px){
  .luts__grid{ grid-template-columns:1fr; }
}

/* Si la ultima fila se queda con una sola tarjeta, se centra en vez
   de quedar descolgada a la izquierda. */
.luts__grid > :last-child:nth-child(3n+1){ grid-column:2; }
@media (max-width:900px){
  .luts__grid > :last-child:nth-child(3n+1){ grid-column:auto; }
}

/* Cada LUT es un producto, asi que la tarjeta se comporta como tal:
   una placa con su filo de un pixel, la muestra dentro y el boton
   siempre abajo del todo. Antes eran tres piezas sueltas sobre el
   fondo y la rejilla se leia como una galeria, no como una tienda.
   El tratamiento es el mismo de las tarjetas de equipo, para que las
   dos pestañas hablen el mismo idioma. */
.lut-card{
  display:flex;
  flex-direction:column;
  gap:1rem;
  height:100%;
  padding:clamp(.75rem,1.8vw,1rem);
  border:1px solid var(--line-soft);
  border-radius:4px;
  background:linear-gradient(180deg, rgba(237,234,228,.035), rgba(237,234,228,.008));
}
/* .reveal redefine la transicion entera, asi que los colores del hover
   se declaran aqui con mas peso o cambiarian de golpe. */
.lut-card.reveal{
  transition:opacity .85s var(--ease), transform .85s var(--ease),
             border-color .35s var(--ease), background .35s var(--ease),
             box-shadow .35s var(--ease);
}
.lut-card:hover{
  border-color:rgba(63,167,160,.34);
  background:linear-gradient(180deg, rgba(63,167,160,.055), rgba(232,130,60,.018));
  box-shadow:0 22px 48px -30px rgba(0,0,0,.95);
}

.lut-card__thumb{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:3px;
  background:var(--panel);
  border:1px solid var(--line-soft);
  transition:border-color .35s var(--ease);
}
.lut-card:hover .lut-card__thumb{ border-color:rgba(63,167,160,.28); }
.lut-card__thumb img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  /* El mismo acercamiento minimo que la foto de equipo al pasar por
     encima: suficiente para que la tarjeta responda, no tanto como
     para que la muestra de color se recorte de forma apreciable. */
  transition:transform .55s var(--ease);
}
.lut-card:hover .lut-card__thumb img{ transform:scale(1.03); }
.lut-card__thumb.is-pending::after{
  content:attr(data-pending);
  position:absolute; inset:0;
  display:grid; place-items:center;
  padding:1rem;
  text-align:center;
  font-family:var(--mono);
  font-size:clamp(.55rem,1.5vw,.62rem);
  letter-spacing:.18em;
  color:var(--text-faint);
  background:repeating-linear-gradient(135deg, var(--panel) 0 12px, var(--panel-alt) 12px 24px);
}

/* El cuerpo ocupa lo que sobra y el boton se pega abajo: asi todos
   los botones de una fila quedan a la misma altura aunque un nombre
   ocupe dos lineas. Comprar deja de ser una busqueda. */
.lut-card__body{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.45rem;
  flex:1;
  padding-inline:.2rem;
}
.lut-card__body .btn-buy{ margin-top:auto; }
/* Nombre y, si toca, la etiqueta de oferta a su lado. */
.lut-card__head{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.5rem .7rem;
}
/* La etiqueta de oferta pasa a estar rellena, como el distintivo del
   hero: en una rejilla de siete tarjetas un contorno fino se pierde,
   y la oferta es justo lo que tiene que saltar a la vista. Mismo
   ambar y mismo degradado que ya usa .cta__badge. */
.lut-card__tag{
  font-family:var(--mono);
  font-size:clamp(.5rem,1.4vw,.57rem);
  letter-spacing:.2em;
  line-height:1;
  color:var(--amber);
  padding:.34rem .5rem .3rem;
  background:linear-gradient(180deg, rgba(232,130,60,.16), rgba(232,130,60,.05));
  border:1px solid rgba(232,130,60,.42);
  border-radius:2px;
  white-space:nowrap;
}
.lut-card__name{
  margin:0;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.15rem,2.4vw,1.4rem);
  line-height:1.2;
  letter-spacing:-.01em;
}
.lut-card__note{ margin-top:.6rem; }

/* El boton de cada LUT ocupa el ancho de la tarjeta y reparte lo que
   lleva dentro: la accion a la izquierda, el precio a la derecha. Es
   la fila que mira quien esta comparando siete LUTs, y de paso el
   objetivo tactil pasa a ser toda la anchura de la tarjeta.

   El cuerpo es el mismo de los botones grandes de PowerGrade: la placa
   clara arriba, el ambar entrando por la izquierda y el teal por la
   derecha, el filo de luz por dentro y la sombra que lo despega. Antes
   eran casi transparentes y sobre la placa de la tarjeta se confundian
   con el fondo. Solo cambia el color: el tamaño, el reparto y lo que
   hace el boton se quedan igual. */
.btn-buy--sm{
  width:100%;
  justify-content:space-between;
  padding:.72rem 1rem;
  font-size:clamp(.78rem,2vw,.86rem);
  gap:.65rem;
  border-color:rgba(237,234,228,.3);
  background:
    linear-gradient(180deg, rgba(237,234,228,.09), rgba(237,234,228,.02)),
    radial-gradient(130% 200% at 0% 50%, rgba(232,130,60,.16), transparent 62%),
    radial-gradient(130% 200% at 100% 50%, rgba(63,167,160,.16), transparent 62%);
  box-shadow:
    inset 0 1px 0 rgba(237,234,228,.10),
    0 12px 28px -16px rgba(0,0,0,.95);
}
/* Va despues de .btn-buy:hover a proposito: las dos reglas pesan lo
   mismo, asi que manda la que se declara mas abajo. */
.btn-buy--sm:hover{
  border-color:rgba(232,130,60,.62);
  background:
    linear-gradient(180deg, rgba(237,234,228,.13), rgba(237,234,228,.03)),
    radial-gradient(130% 200% at 0% 50%, rgba(232,130,60,.26), transparent 62%),
    radial-gradient(130% 200% at 100% 50%, rgba(63,167,160,.24), transparent 62%);
  box-shadow:
    inset 0 1px 0 rgba(237,234,228,.16),
    0 14px 34px -14px rgba(232,130,60,.35);
}
.btn-buy--sm .btn-buy__label{ margin-right:auto; }
.btn-buy--sm .btn-buy__price{
  padding-left:.7rem;
  font-size:.9em;
}
.btn-buy--sm::after{ width:14px; }
.btn-buy--sm:hover::after{ width:20px; }

/* ---------- Equipo de grabacion -----------------------------
   Misma rejilla que las LUTs. La foto va recortada contra el
   fondo (fondo transparente), asi que se coloca centrada dentro
   de un panel oscuro con aire alrededor, y no recortada a lo
   ancho como las muestras de color. La tarjeta entera es el
   enlace. */

.gear__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.8rem,3.5vw,2.8rem);
}
@media (max-width:900px){
  .gear__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:600px){
  .gear__grid{ grid-template-columns:1fr; }
}
/* Si la ultima fila se queda con una sola tarjeta, se centra. */
.gear__grid > :last-child:nth-child(3n+1){ grid-column:2; }
@media (max-width:900px){
  .gear__grid > :last-child:nth-child(3n+1){ grid-column:auto; }
}

.gear-card{
  display:flex;
  flex-direction:column;
  gap:.9rem;
  text-decoration:none;
  color:inherit;
}

.gear-card__thumb{
  position:relative;
  aspect-ratio:4/3;
  /* Caja flexible centrada: la foto se limita con max-width y
     max-height, que en un contenedor flex si se resuelven
     contra la caja interior. Asi entra entera y centrada sea
     ancha (la Sony) o alta (el DJI). */
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(1.4rem,4vw,2.4rem);
  overflow:hidden;
  border:1px solid var(--line-soft);
  border-radius:3px;
  background:
    radial-gradient(72% 62% at 50% 38%, rgba(63,167,160,.08), transparent 70%),
    linear-gradient(180deg, var(--panel-alt), var(--panel));
  transition:border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.gear-card__thumb img{
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  filter:drop-shadow(0 16px 26px rgba(0,0,0,.6));
  transition:transform .45s var(--ease);
}

.gear-card:hover .gear-card__thumb,
.gear-card:focus-visible .gear-card__thumb{
  border-color:rgba(63,167,160,.5);
  transform:translateY(-2px);
  box-shadow:0 18px 40px -22px rgba(0,0,0,.9);
}
.gear-card:hover .gear-card__thumb img{ transform:scale(1.03); }
.gear-card:focus-visible{ outline:none; }
.gear-card:focus-visible .gear-card__thumb{
  outline:2px solid var(--teal);
  outline-offset:4px;
}

.gear-card__foot{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:.8rem;
}
.gear-card__name{
  margin:0;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.15rem,2.4vw,1.4rem);
  line-height:1.2;
  letter-spacing:-.01em;
}
.gear-card__hint{
  font-family:var(--mono);
  font-size:clamp(.5rem,1.4vw,.58rem);
  letter-spacing:.2em;
  color:var(--text-faint);
  white-space:nowrap;
  transition:color .3s var(--ease);
}
.gear-card__hint::after{
  /* La flecha se dibuja con bordes en vez de con un caracter:
     asi no depende de que la tipografia monoespaciada tenga
     ese glifo (no lo tiene, y salia un cuadrito). */
  content:"";
  display:inline-block;
  width:5px;
  height:5px;
  margin-left:.5rem;
  border-top:1px solid currentColor;
  border-right:1px solid currentColor;
  transform:rotate(-45deg) translateY(1px);
}
.gear-card:hover .gear-card__hint{ color:var(--amber); }

@media (prefers-reduced-motion:reduce){
  .gear-card__thumb,
  .gear-card__thumb img{ transition:none; }
  .gear-card:hover .gear-card__thumb,
  .gear-card:hover .gear-card__thumb img{ transform:none; }
}

/* ---------- CTA final --------------------------------------- */

.final{
  position:relative;
  padding-block:clamp(5rem,13vh,9rem);
  text-align:center;
  border-top:1px solid var(--line-soft);
}
.final::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(60% 70% at 50% 50%, rgba(63,167,160,.10), transparent 70%);
  pointer-events:none;
}
.final > *{ position:relative; }

.final__title{
  margin:0;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2rem,6.5vw,3.8rem);
  line-height:1.1;
  letter-spacing:-.02em;
}
.final__title em{ font-style:italic; }

.final .cta{ display:flex; flex-direction:column; align-items:center; }

.final__sub{
  margin:1.6rem auto 0;
  max-width:38ch;
  color:var(--text-dim);
  font-size:clamp(.88rem,2.4vw,1rem);
}

/* ---------- Volver arriba ----------------------------------- */
/* Mismo lenguaje que el tirador de los comparadores: circulo, vidrio
   esmerilado y filo de un pixel. */
.to-top{
  position:fixed;
  right:calc(clamp(1rem,3vw,2.2rem) + env(safe-area-inset-right, 0px));
  bottom:calc(clamp(1rem,3vw,2.2rem) + env(safe-area-inset-bottom, 0px));
  z-index:75;
  width:clamp(42px,9vw,46px);
  height:clamp(42px,9vw,46px);
  display:grid;
  place-items:center;
  padding:0;
  border-radius:50%;
  background:rgba(12,13,14,.55);
  border:1px solid rgba(237,234,228,.35);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  box-shadow:0 2px 18px rgba(0,0,0,.5);
  color:var(--text);
  cursor:pointer;
  opacity:0;
  transform:translateY(10px) scale(.92);
  pointer-events:none;
  transition:opacity .35s var(--ease), transform .35s var(--ease),
             border-color .35s var(--ease), background .35s var(--ease);
}
.to-top.is-visible{
  opacity:1;
  transform:none;
  pointer-events:auto;
}
.to-top:hover{
  border-color:rgba(232,130,60,.75);
  background:rgba(232,130,60,.16);
}
.to-top:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:4px;
}
.to-top svg{ width:46%; height:46%; }

@media (prefers-reduced-motion:reduce){
  .topbar, .topbar-scrim, .to-top{ transition:none; }
}

/* ---------- Footer ------------------------------------------ */

.footer{
  position:relative; z-index:10;
  max-width:var(--maxw);
  margin-inline:auto;
  /* El margen inferior tambien reserva la franja del indicador de
     inicio en los iPhone sin boton. */
  padding:clamp(2rem,5vw,3rem) var(--pad-r) calc(clamp(3rem,6vw,4rem) + env(safe-area-inset-bottom, 0px)) var(--pad-l);
  display:flex;
  flex-wrap:wrap;
  gap:.6rem 1.5rem;
  align-items:baseline;
  justify-content:space-between;
  border-top:1px solid var(--line-soft);
}
.footer__brand{
  font-family:var(--serif);
  font-size:1.1rem;
  letter-spacing:.01em;
}
.footer__desc{
  font-family:var(--mono);
  font-size:clamp(.55rem,1.6vw,.66rem);
  letter-spacing:.14em;
  color:var(--text-faint);
}

/* ---------- Pagina 404 --------------------------------------- */
/* Vive en 404.html. Es la misma paleta y la misma tipografia que el
   resto, pero sin nada de JavaScript: una direccion equivocada tiene
   que responder aunque el resto del sitio no llegue a arrancar. */

.notfound{
  position:relative; z-index:10;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-left:var(--pad-l);
  padding-right:var(--pad-r);
  padding-top:clamp(7rem,22vh,12rem);
  padding-bottom:clamp(4rem,12vh,8rem);
}

.notfound__title{
  margin:0 0 clamp(1.4rem,3vw,2rem);
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.4rem,8vw,4.6rem);
  line-height:1.02;
  letter-spacing:-.015em;
}
.notfound__title em{
  font-style:italic;
  color:var(--teal);
}

.notfound__text{
  margin:0 0 1rem;
  max-width:46ch;
  font-size:clamp(.95rem,2.2vw,1.06rem);
  line-height:1.62;
  color:var(--text-dim);
}

.notfound__link{
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  margin-top:clamp(1.6rem,4vw,2.4rem);
  padding:.9rem 1.5rem;
  font-family:var(--mono);
  font-size:clamp(.66rem,1.8vw,.74rem);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text);
  text-decoration:none;
  border:1px solid var(--line);
  border-radius:2px;
  background:linear-gradient(180deg, rgba(237,234,228,.05), rgba(237,234,228,.015));
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.notfound__link:hover{
  border-color:rgba(63,167,160,.5);
  background:linear-gradient(180deg, rgba(63,167,160,.1), rgba(63,167,160,.03));
}
.notfound__link:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:4px;
}
@media (prefers-reduced-motion:reduce){
  .notfound__link{ transition:none; }
}

/* ---------- Scroll reveal ----------------------------------- */

.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .85s var(--ease), transform .85s var(--ease);
}
.reveal.is-visible{ opacity:1; transform:none; }

.gallery__grid .reveal:nth-child(2){ transition-delay:.08s; }
.gallery__grid .reveal:nth-child(3){ transition-delay:.16s; }
.gallery__grid .reveal:nth-child(4){ transition-delay:.24s; }

/* ---------- Legibilidad en telefono -------------------------- */
/* En pantalla grande estos rotulos se leen bien pequeños, pero a
   un palmo de la cara se pelean. Solo por debajo de 700px suben
   un punto: ni el diseño ni la maquetacion cambian, la letra es
   la misma y el color tambien. */

@media (max-width:700px){
  .cta__badge{ font-size:.64rem; }
  .cta__note{ font-size:.68rem; }
  .compare-caption{ font-size:.7rem; }
  .footer__desc{ font-size:.64rem; }
  .gear-card__hint{ font-size:.62rem; }
}

/* ---------- Pantallas muy estrechas (360px) ------------------ */

@media (max-width:400px){
  :root{ --pad:1.1rem; }
  .eyebrow{ letter-spacing:.24em; gap:.6rem; }
  .topbar{ letter-spacing:.14em; }
  .badge{ letter-spacing:.1em; padding:.28rem .45rem; }
  .facts{ gap:1.25rem 1.75rem; }
  /* La leyenda tiene que caber en una sola línea también a 360px:
     sube de tamaño, pero suelta el espaciado entre letras para
     ocupar lo mismo de ancho. */
  .compare-caption{ font-size:.66rem; letter-spacing:0; }
  /* Con tan poco ancho, las pestañas y el timecode mandan sobre la marca:
     el nombre ya esta en el titulo del hero. */
  .topbar__meta{ gap:.4rem; }
  .lang-toggle{ padding:.3rem .38rem .26rem; letter-spacing:.1em; }
  .topbar__brand{ display:none; }
  .topbar__tabs{ margin-inline:0 auto; }
  .btn-buy{ padding-inline:1.1rem; gap:.6rem; }
  .btn-buy__price{ padding-left:.6rem; }
  /* El boton principal lleva mas aire; en pantallas estrechas hay que
     devolverselo o se sale del ancho disponible. */
  .node-demo__mark{ width:10px; height:10px; }
  .node-demo__mark--tl,.node-demo__mark--tr{ top:7px; }
  .node-demo__mark--bl,.node-demo__mark--br{ bottom:7px; }
  .node-demo__mark--tl,.node-demo__mark--bl{ left:7px; }
  .node-demo__mark--tr,.node-demo__mark--br{ right:7px; }
  .node-demo__steps{ letter-spacing:.14em; }
  .btn-buy[data-buy-main]{ padding-inline:.95rem; gap:.5rem; }
  .btn-buy[data-buy-main] .btn-buy__price{ padding-left:.5rem; }
  .btn-buy[data-buy-main]::after{ display:none; }
  /* En pantallas altas y estrechas la viñeta cae sobre el texto: la suavizamos */
  .vignette{ opacity:.55; }
}

/* ---------- Movimiento reducido ------------------------------ */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .rec-dot{ animation:none; }
  .btn-buy, .btn-buy::after, .cta__note{ transition:none; }
  .btn-buy:hover{ transform:none; }
  .btn-buy.is-pending{ animation:none; }
  .btn-buy.is-activating{ transform:none; }
  .btn-buy.is-activating::before{ animation:none; opacity:0; }
  .cta__badge-dot{ animation:none; }
  /* Las tarjetas de LUT y el comparador siguen respondiendo al cursor
     (color y sombra), pero sin que nada se mueva ni se acerque. */
  .lut-card, .lut-card.reveal, .lut-card__thumb, .lut-card__thumb img, .compare{ transition:none; }
  .lut-card:hover .lut-card__thumb img{ transform:none; }
}