/* ═══════════════════════════════════════════════════════════════════════════
   BRUTOTECH — hoja de estilos del sitio
   Importado desde Claude Design (BRUTOGYM.dc.html) el 2026-08-05.

   Los valores son los del diseño aprobado. Lo que cambió respecto del
   original es dónde viven: allá estaban repetidos en atributos style= de
   cada elemento, acá están una sola vez. Cambiar el ámbar de la marca era
   editar cuarenta lugares; ahora es editar --acento.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --fondo:          #0a0c10;
  --texto:          #f4f4f5;
  --texto-suave:    #a1a1aa;
  --texto-tenue:    #8b8b95;
  --texto-apagado:  #7d7d87;

  --acento:         #f59e0b;   /* BRUTOGYM, y el acento de la interfaz */
  --acento-claro:   #fbbf24;
  --car:            #4f6ff0;   /* BRUTOCAR */
  --doc:            #2b9972;   /* BRUTODOC */
  --pub:            #a90072;   /* BRUTOPUB */

  --linea:          rgba(255, 255, 255, .10);
  --linea-fuerte:   rgba(255, 255, 255, .28);
  --marco:          rgba(255, 255, 255, .14);

  /* Un solo ritmo vertical para todas las secciones. */
  --aire-seccion:   clamp(72px, 12vh, 160px);
  --aire-lateral:   clamp(20px, 4vw, 56px);

  /* ── La grilla ─────────────────────────────────────────────────────────
     Todo el sitio se apoya en las mismas doce columnas, dentro de un ancho
     máximo. Antes cada sección se estiraba de borde a borde con su propio
     criterio: un rótulo empezaba en un lugar, el titular de abajo en otro,
     y nada alineaba con nada. Un hueco vacío no es un problema — una
     columna que arranca dos centímetros corrida respecto de la de arriba,
     sí. Preferimos huecos alineados antes que relleno desordenado. */
  --ancho-max:      1440px;
  --columnas:       12;
  --calle:          clamp(16px, 1.8vw, 32px);
}

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

html { scroll-behavior: smooth; background: var(--fondo); }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: Archivo, system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow-x: hidden;
}

/* height:auto es obligatorio, no opcional. Las capturas llevan width= y
   height= en el HTML para que el texto no salte mientras cargan; sin esto,
   el navegador respeta ese alto fijo mientras achica el ancho y la imagen
   sale estirada. Una captura deformada hace ver mal al producto. */
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }

a { color: var(--acento); text-decoration: none; }
a:hover { color: var(--acento-claro); }

::selection { background: var(--acento); color: var(--fondo); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--fondo); }
::-webkit-scrollbar-thumb { background: #26282e; }

/* El diseño no define foco visible. Sin esto, quien navega con teclado no
   sabe dónde está parado — y el teclado es la única entrada para parte de
   los visitantes. */
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }

/* ── Barra superior ──────────────────────────────────────────────────── */
.barra {
  position: fixed; inset: 0 0 auto; z-index: 50;
  height: 64px;
  background: rgba(10, 12, 16, .72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}
/* El fondo cruza toda la pantalla; el contenido se alinea con el resto del
   sitio. Antes la marca quedaba pegada al borde y no coincidía con el margen
   de ninguna sección de abajo. */
.barra-interior {
  display: flex; align-items: center; gap: 32px; height: 100%;
}
.barra-marca { margin-right: auto; font-size: 19px; font-weight: 900; letter-spacing: -.02em; color: #fff; }
.barra-menu {
  display: flex; align-items: center; gap: clamp(14px, 2vw, 30px);
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.barra-menu a { color: var(--texto-suave); }
.barra-menu a:hover,
.barra-menu a[aria-current="page"] { color: #fff; }
.barra-cta { color: var(--fondo) !important; background: var(--acento); padding: 9px 16px; font-weight: 800; }
.barra-cta:hover { background: var(--acento-claro); }

/* En pantalla chica los cuatro enlaces no entran: se salían fuera del
   viewport y, como el body oculta el desborde horizontal, quedaban
   invisibles y sin manera de alcanzarlos. Quedan la marca y la acción; los
   productos siguen a un scroll de distancia y están en el pie. */
@media (max-width: 720px) {
  .barra-interior { gap: 12px; }
  .barra-menu a:not(.barra-cta) { display: none; }
  .barra-cta { padding: 8px 13px; font-size: 11px; }
}

/* La marca siempre a dos colores, con el ® en superíndice. */
.reg { font-size: .5em; font-weight: 700; position: relative; top: -.7em; }

/* ── El logotipo de la madre ──────────────────────────────────────────────
   BRUTOTECH lleva adentro los colores de sus cuatro productos, uno por letra:
   ámbar de GYM, verde de DOC, azul de CAR, violeta de PUB. La madre CONTIENE
   a la familia en vez de competir con uno de sus productos —que era lo que
   pasaba cuando TECH y GYM eran los dos el mismo ámbar—.

   Las paradas no están puestas a ojo: son el centro medido de cada letra en
   Archivo 900. Cada una tiene su ancho, así que el centro de la H no cae
   donde caería si fueran todas iguales. Por eso el color pleno queda en el
   medio de la letra y la mezcla pasa por el aire entre letra y letra.

   El color plano va PRIMERO y el degradado adentro de @supports: si un
   navegador no sabe recortar el fondo contra el texto, con `color:transparent`
   el logotipo desaparecería. Así, en el peor caso, se ve el ámbar de siempre. */
/* El degradado se aplica directo (no detrás de @supports): en Chrome y en
   varios móviles `@supports (-webkit-background-clip: text)` da falso-negativo
   y el logotipo se quedaba en el ámbar de reserva. Con -webkit-text-fill-color
   los navegadores webkit/blink muestran el degradado, y los que no lo entienden
   ignoran esa línea y caen a `color: var(--acento)` (ámbar), nunca a texto
   invisible. */
.tech {
  background-image: linear-gradient(90deg,
    var(--acento) 3.8%,  var(--acento) 19.8%,
    var(--doc)   27.4%,  var(--doc)   43.4%,
    var(--car)   51.3%,  var(--car)   68.6%,
    var(--pub)   77.1%,  var(--pub)   95.6%);
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--acento);
  -webkit-text-fill-color: transparent;
}

/* Los nombres de producto son logotipos: nunca se parten en dos lineas,
   en ningun ancho de pantalla. Si no entran, achican. */
.barra-marca, .pie-marca, .logotipo,
.lamina-nombre, .cab-titulo, .ficha-nombre { white-space: nowrap; overflow-wrap: normal; }
/* Alineacion optica: la B en display deja aire propio a la izquierda y el
   logotipo se ve corrido respecto de la chapa y del titular. */
.logotipo, .lamina-nombre, .cab-titulo { margin-left: -.06em; }

/* ── La grilla ───────────────────────────────────────────────────────────
   Dos piezas y nada más:
     .envoltura — centra el contenido y le pone el margen lateral. TODO lo
                  que se ve va adentro de una, incluida la barra y el pie.
     .rejilla   — las doce columnas. Los elementos eligen dónde empiezan y
                  terminan con .c-rotulo, .c-cuerpo, .c-figura, .c-todo.
   Regla de la casa: nada se posiciona "a ojo". Si algo tiene que ir en otro
   lado, se le cambia la clase de columna, no el margen. */
.envoltura {
  width: 100%; max-width: var(--ancho-max);
  margin-inline: auto; padding-inline: var(--aire-lateral);
  /* Los logotipos se miden contra ESTA caja, no contra el viewport. */
  container-type: inline-size;
}

.rejilla {
  display: grid;
  grid-template-columns: repeat(var(--columnas), minmax(0, 1fr));
  gap: var(--calle);
  align-items: start;
}

/* Las tres posiciones que usa el sitio. El rótulo siempre arranca en la
   misma columna, en todas las páginas y en todas las secciones: es lo que
   hace que el ojo reconozca el margen izquierdo al bajar. */
.c-rotulo { grid-column: 1 / -1; }
.c-cuerpo { grid-column: 1 / 10; }
.c-figura { grid-column: 10 / 13; }
.c-ancho  { grid-column: 1 / 13; }
/* Utilidades de grilla que hoy no usa ninguna pagina, pero son parte del
   sistema: .c-ancho y .c-todo existen para que una seccion nueva no tenga
   que inventar su propia columna. Lo mismo con .cab-estado--vivo (el dia
   que un producto pase a disponible), .foto-fondo--hueco (seccion con foto
   todavia sin foto) y .portada-video / .portada-velo (si el video vuelve). */
.c-todo   { grid-column: 1 / 13; }

@media (max-width: 900px) {
  /* Una sola columna: en pantalla angosta, tres columnas de cuatro no son
     una grilla, son texto picado. */
  .c-rotulo, .c-cuerpo, .c-figura, .c-ancho, .c-todo { grid-column: 1 / -1; }
  .rejilla { gap: 22px; }
}

/* Hueco reservado para una imagen que todavía no existe. Se muestra como un
   marco con su proporción, no como un espacio en blanco: así el diseño ya
   está resuelto y meter la imagen no mueve nada de lugar. */
.hueco-imagen {
  position: relative; width: 100%; aspect-ratio: 3 / 4;
  border: 1px dashed var(--linea-fuerte);
  background:
    repeating-linear-gradient(135deg, transparent 0 14px,
                              rgba(255, 255, 255, .022) 14px 28px);
  display: grid; place-items: center; text-align: center;
}
.hueco-imagen span {
  padding: 0 18px; max-width: min(22ch, 100%);
  font-size: 11px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--texto-apagado); line-height: 1.7;
}
.hueco-imagen--ancho { aspect-ratio: 16 / 9; }

/* ── Portada ─────────────────────────────────────────────────────────── */
.portada {
  /* La escena sangra por el borde derecho: el recorte lo hace la portada,
     asi no aparece scroll horizontal en la pagina. */
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  min-height: 100vh;
  padding-block: 120px 72px;      /* el lateral lo pone la envoltura */
}
/* El apilado vive acá ahora: la envoltura solo centra y da el margen. */
.portada-cuerpo { display: flex; flex-direction: column; }
.portada::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(100% 70% at 70% 10%, rgba(245, 158, 11, .18), transparent 62%);
}
.portada > *:not(.portada-video):not(.portada-velo) { position: relative; z-index: 3; }
.portada-cuerpo > * { position: relative; z-index: 3; }

/* ── Video del producto en la portada ────────────────────────────────── */
.portada-video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  pointer-events: none;
}
/* Sin este velo el titular queda ilegible sobre la interfaz del video.
   El degradado deja ver más producto arriba a la derecha, que es donde el
   texto no llega. */
.portada-velo {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(95deg, rgba(10, 12, 16, .96) 34%, rgba(10, 12, 16, .74) 62%, rgba(10, 12, 16, .55) 100%),
    linear-gradient(to top, var(--fondo) 2%, transparent 30%);
}


/* En pantallas chicas el video se ve como una maraña de píxeles y cuesta
   datos móviles: se muestra el poster, que al menos se entiende. */
@media (max-width: 720px) {
  .portada-video { display: none; }
  .portada--video {
    background-image: url("../video/brutogym-poster.png");
    background-size: cover; background-position: left center;
  }
}

.chapa {
  /* Hija directa de un flex column: sin align-self se estira a todo el ancho
     y deja de leerse como una chapa. */
  display: inline-flex; align-self: flex-start; align-items: center; gap: 10px;
  margin-bottom: clamp(24px, 4vh, 44px); padding: 9px 16px;
  background: var(--acento); color: var(--fondo);
  font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}

.logotipo {
  /* Es un h1 en la portada de BRUTOTECH: sin esto el margen por defecto del
     navegador abre medio cuerpo de 190px debajo del nombre. El -.06em de la
     izquierda alinea la B con el texto de abajo: sin él, el margen propio de la
     letra la corre ~10px adentro (Fer, 13/10/2026). */
  margin: 0 0 0 -.06em;
  font-size: clamp(38px, 13cqw, 190px); font-weight: 900;
  line-height: .8; letter-spacing: -.055em; color: #fff;
}
.logotipo .reg { font-size: .14em; top: -2.9em; }

.portada-dos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(24px, 4vw, 64px); align-items: end;
  margin-top: clamp(32px, 6vh, 72px);
}
.portada-dos h1 {
  margin: 0; max-width: min(18ch, 100%);
  font-size: clamp(26px, 3.4vw, 52px); font-weight: 800;
  line-height: 1.1; letter-spacing: -.035em; text-wrap: balance;
}
.portada-dos p {
  margin: 0; max-width: min(42ch, 100%); color: var(--texto-suave);
  font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6; text-wrap: pretty;
}

.botonera { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(32px, 5vh, 56px); }
.boton {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 20px 32px; font-size: 17px; font-weight: 800;
}
.boton-lleno  { background: var(--acento); color: var(--fondo); }
.boton-lleno:hover { background: var(--acento-claro); color: var(--fondo); }
.boton-vacio  { border: 1px solid var(--linea-fuerte); color: #fff; font-weight: 700; }
/* Boton en el color del producto. La letra va oscura, no blanca: sobre el
   verde de BRUTODOC el texto blanco daba 2,54 de contraste cuando el minimo
   legible es 4,5. Con letra oscura los cuatro tonos pasan, y el verde llega
   a 7,72. */
.boton-tono { background: var(--tono, var(--acento)); color: var(--fondo); }
.boton-tono:hover { filter: brightness(1.12); color: var(--fondo); }
.boton-vacio:hover { border-color: #fff; color: #fff; }

.letra-chica { margin-top: 22px; font-size: 13px; color: var(--texto-tenue); }

/* ── Vitrina: los tres productos, uno por vez ────────────────────────── */
/* Sin capturas de BRUTOCAR ni BRUTODOC, lo único que puede sostener la
   identidad es el color y el tamaño de la tipografía. Por eso el nombre
   ocupa media pantalla: es el producto. */
/* A pantalla completa se leía como una portada fija. Dejando ver el borde de
   abajo y el mando, se entiende de un vistazo que hay algo con que
   interactuar y que abajo sigue la página. */
.vitrina {
  /* El alto lo manda la lamina mas alta, con un piso para que en pantallas
     bajas siga leyendose como una pantalla completa. Con alto fijo, el texto
     largo (BRUTOCAR, BRUTOPUB) chocaba contra los controles de abajo. */
  position: relative; min-height: min(78vh, 860px);
  overflow: hidden; background: var(--fondo);
}
.vitrina-pistas { display: flex; align-items: stretch; transition: transform .85s cubic-bezier(.16, .8, .24, 1); }

/* Modo fundido, para quien pidió menos movimiento: las láminas se apilan y
   cambian por opacidad en vez de deslizarse. El carrusel sigue andando. */
/* Las laminas se apilan en la MISMA celda de una rejilla en vez de flotar
   absolutas: asi la mas alta define el alto de la vitrina y ninguna se pasa
   por abajo hasta el mando. */
.vitrina--fundido .vitrina-pistas {
  display: grid; grid-template-areas: "lamina"; grid-template-columns: 100%;
  transform: none !important; transition: none;
}
.vitrina--fundido .lamina {
  grid-area: lamina; position: relative; width: 100%;
  opacity: 0; transition: opacity .5s ease; pointer-events: none;
}
.vitrina--fundido .lamina.visible { opacity: 1; pointer-events: auto; }

.lamina {
  position: relative; flex: 0 0 100%; min-height: min(78vh, 860px);
  display: grid; align-content: start;
  padding-block: clamp(96px, 15vh, 150px) 148px;
}
/* El color del producto tiñe el fondo desde una esquina. */
.lamina::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 80% at 78% 8%, color-mix(in srgb, var(--tono, var(--acento)) 26%, transparent), transparent 60%),
    linear-gradient(160deg, transparent 40%, color-mix(in srgb, var(--tono, var(--acento)) 9%, transparent));
}

/* Resplandor que sigue al mouse. Es lo único de la portada que responde al
   gesto en vez de al scroll: da la sensación de que la pantalla está viva
   sin pedirle nada al visitante. */
.lamina-luz {
  position: absolute; width: 46vmax; height: 46vmax; border-radius: 50%;
  pointer-events: none; opacity: 0; transition: opacity .6s ease;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, color-mix(in srgb, var(--tono) 22%, transparent), transparent 62%);
  filter: blur(24px);
}
.lamina:hover .lamina-luz { opacity: 1; }

.lamina-cuerpo { position: relative; width: 100%; }

.lamina-estado {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 26px;
  padding: 8px 15px; border: 1px solid var(--linea-fuerte);
  font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--texto-suave);
}
.lamina-estado--vivo { background: var(--tono); border-color: var(--tono); color: var(--fondo); }

.lamina-nombre {
  /* Es un h2: sin esto el margen por defecto abre casi un cuerpo entero y el
     bloque de botones termina cayendo sobre la franja del mando. */
  margin: 0;
  margin: 0; overflow-wrap: break-word; font-size: clamp(50px, 13vw, 220px); font-weight: 900;
  line-height: .82; letter-spacing: -.055em; color: #fff;
}
.lamina-nombre span { color: var(--tono); }
.lamina-nombre .reg { font-size: .13em; top: -2.9em; }

.lamina-rubro {
  margin: clamp(20px, 3vh, 34px) 0 0;
  font-size: clamp(15px, 1.5vw, 20px); font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--tono);
}
.lamina-frase {
  margin: 16px 0 0; max-width: min(46ch, 100%); color: var(--texto-suave);
  font-size: clamp(16px, 1.4vw, 20px); line-height: 1.6; text-wrap: pretty;
}
/* La nota aclara el boton, asi que va debajo de el y no al costado. */
.lamina-acciones {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  width: max-content;
  margin-top: clamp(26px, 4vh, 44px);
}
.lamina-nota { font-size: 13px; color: var(--texto-tenue); text-align: center; }

/* Mando: tres barras que se llenan con el tiempo que le queda a la lámina. */
/* Mando y flechas viven juntos, abajo y dentro de la grilla. Antes las
   flechas estaban sueltas en una esquina y el mando pegado a los bordes de
   la pantalla: dos controles del mismo carrusel, en dos criterios distintos. */
.vitrina-pie {
  /* Bien abajo: las barras son el borde del bloque, no parte del texto. */
  position: absolute; left: 0; right: 0; bottom: 26px; z-index: 3;
}
.vitrina-controles { display: flex; align-items: flex-end; gap: clamp(16px, 2vw, 32px); }
.vitrina-mando { display: flex; flex: 1; min-width: 0; gap: 14px; }
.mando-item {
  flex: 1; min-width: 0; padding: 0; border: 0; background: none;
  cursor: pointer; text-align: left; color: var(--texto-tenue);
  font-family: inherit; font-size: 12px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  transition: color .3s;
}
.mando-item:hover { color: #fff; }
.mando-item[aria-current="true"] { color: #fff; }
.mando-barra { display: block; height: 3px; margin-bottom: 12px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.mando-relleno { display: block; height: 100%; width: 0; background: var(--tono, var(--acento)); }
.mando-item[aria-current="true"] .mando-relleno { width: 100%; transition: width linear; }

/* Arriba a la derecha, no a los costados: centradas verticalmente tapaban el
   rótulo del producto en cuanto la vitrina dejó de ocupar toda la pantalla.
   Esa esquina es la única que ninguna lámina usa. */
/* Redondas, translucidas y a los costados del carrusel. El disco es un span:
   el fondo del <button> no se pinta de forma confiable en este entorno. */
.vitrina .vitrina-flecha {
  position: absolute; top: 50%; z-index: 4;
  transform: translateY(-50%);
  cursor: pointer; line-height: 0;
}
.vitrina .vitrina-flecha--izq { left: 12px; }
.vitrina .vitrina-flecha--der { right: 12px; }
/* En Claude Design el disco iba con estilos inline porque las clases de esta
   hoja no llegaban a esos dos nodos. Acá sí llegan, así que el disco se pinta
   una sola vez y el hover es CSS y no un atributo inventado. */
.vitrina .vitrina-flecha {
  appearance: none; background: transparent; border: 0; padding: 0;
}
.vitrina .vitrina-flecha span {
  display: grid; place-items: center; width: 52px; height: 52px;
  border-radius: 50%; background: rgba(10, 12, 16, .28);
  border: 1px solid rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .55);
  font-size: 26px; line-height: 1; backdrop-filter: blur(6px);
  transition: background .2s, border-color .2s, color .2s;
}
.vitrina .vitrina-flecha:hover span {
  background: rgba(10, 12, 16, .86);
  border-color: var(--tono, var(--acento)); color: #fff;
}
.vitrina .vitrina-flecha:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }


@media (max-width: 720px) {
  .vitrina .vitrina-flecha { display: none; }   /* en táctil se pasa arrastrando */
  .vitrina-pie { bottom: 24px; }
  .vitrina-mando { gap: 8px; }
  .mando-item { font-size: 0; }          /* en pantalla chica quedan solo las barras */
  .mando-barra { margin-bottom: 0; }
}

/* ── Fichas de producto ──────────────────────────────────────────────── */
.fichas { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1px; background: var(--linea); border-block: 1px solid var(--linea); }
.fichas { perspective: 1200px; }
.ficha {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: 32px 28px 36px; background: var(--fondo); color: inherit;
  transform-style: preserve-3d;
  transition: background .3s, transform .5s cubic-bezier(.16, .8, .24, 1);
}
/* El brillo sigue al mouse. Sin la inclinación no se nota; con ella, la
   ficha parece tener superficie. */
.ficha::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: 0; transition: opacity .35s;
  background: radial-gradient(340px circle at var(--brillo-x, 50%) var(--brillo-y, 50%),
              color-mix(in srgb, var(--tono) 13%, transparent), transparent 68%);
}
.ficha:hover::before { opacity: 1; }
/* Mientras el mouse la mueve, la vuelta a su sitio no debe arrastrarse. */
.ficha:hover { transition: background .3s, transform .12s linear; }
.ficha::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 3px;
  background: var(--tono); transform: scaleX(0); transform-origin: left;
  transition: transform .45s cubic-bezier(.16, .8, .24, 1);
}
.ficha:hover { background: #101318; color: inherit; }
.ficha:hover::after, .ficha:focus-visible::after { transform: scaleX(1); }
.ficha-estado { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-tenue); }
.ficha--vivo .ficha-estado { color: var(--tono); }
.ficha-nombre { font-size: clamp(28px, 3vw, 42px); font-weight: 900; letter-spacing: -.035em; color: #fff; }
.ficha-nombre span { color: var(--tono); }
.ficha-nombre .reg { font-size: .3em; top: -1.5em; }
.ficha-rubro { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-tenue); }
.ficha-texto { margin: 6px 0 0; color: var(--texto-suave); font-size: 15px; line-height: 1.6; flex: 1; }
.ficha-flecha { margin-top: 18px; font-size: 14px; font-weight: 800; color: var(--tono); }

/* ── Secciones ───────────────────────────────────────────────────────── */
.seccion { border-top: 1px solid var(--linea); padding-block: var(--aire-seccion); }

.rotulo {
  margin-bottom: 20px;
  font-size: 12px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--acento);
}
.titular {
  margin: 0 0 28px; max-width: min(16ch, 100%);
  overflow-wrap: break-word;
  font-size: clamp(30px, 5vw, 80px); font-weight: 900;
  line-height: 1; letter-spacing: -.04em;
}
.bajada {
  margin: 0; max-width: min(60ch, 100%); color: var(--texto-suave);
  font-size: clamp(16px, 1.4vw, 20px); line-height: 1.6; text-wrap: pretty;
}


/* ── Pieles ──────────────────────────────────────────────────────────── */
.pieles-encabezado {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 28px; margin-bottom: clamp(28px, 4vh, 48px);
}
.selector { display: flex; gap: 1px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .16); }
.selector button {
  padding: 14px 26px; border: 0; cursor: pointer;
  background: var(--fondo); color: var(--texto-suave);
  font-family: inherit; font-size: 13px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  transition: background .2s, color .2s;
}
.selector button:hover { color: #fff; }
.selector button[aria-pressed="true"] { background: var(--acento); color: var(--fondo); }

/* ── Módulos ─────────────────────────────────────────────────────────── */
.grilla-modulos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(max(230px, 25% - 1px), 1fr));
  gap: 1px; background: var(--linea); border-block: 1px solid var(--linea);
}
.modulo { background: var(--fondo); padding: 26px 24px 32px; }
/* Tarjetas que giran: las dos caras ocupan la misma celda de la grilla, así la
   tarjeta toma el alto de la cara más larga y nada se corta ni se superpone. */
.modulo[data-gira] { perspective: 900px; cursor: pointer; }
.modulo[data-gira]:focus-visible { outline-offset: -3px; }
.modulo-giro { display: grid; transition: transform .55s cubic-bezier(.2, .7, .2, 1); transform-style: preserve-3d; }
.modulo-cara { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.modulo-dorso { transform: rotateY(180deg); }
.modulo-dorso p { color: var(--texto); }
.modulo-girar { float: right; font-size: 15px; letter-spacing: 0; color: var(--texto-tenue); }
@media (hover: hover) { .modulo[data-gira]:hover .modulo-giro { transform: rotateY(180deg); } }
.modulo[data-gira]:focus-visible .modulo-giro,
.modulo[data-gira].girada .modulo-giro { transform: rotateY(180deg); }
@media (prefers-reduced-motion: reduce) { .modulo-giro { transition: none; } }
.modulo-num { margin-bottom: 14px; font-size: 11px; font-weight: 800; letter-spacing: .16em; color: var(--acento); }
.modulo h3 { margin: 0 0 8px; font-size: 20px; font-weight: 800; }
.modulo p  { margin: 0; color: var(--texto-suave); font-size: 15px; line-height: 1.55; }

/* ── Capturas ────────────────────────────────────────────────────────── */
.captura { margin: 0 0 clamp(40px, 7vh, 90px); }
.captura img { width: 100%; border: 1px solid var(--marco); }
.captura figcaption { margin-top: 14px; display: flex; gap: 16px; flex-wrap: wrap; align-items: baseline; }
.etiqueta { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--acento); }
.captura figcaption span:not(.etiqueta),
.captura figcaption p { margin: 0; color: var(--texto-suave); font-size: 16px; line-height: 1.55; }

/* ── Galería: varias vistas de la misma pantalla, una por vez ────────── */
.galeria { margin: 0; }
.galeria-marco {
  position: relative; width: 100%; aspect-ratio: 1584 / 935;
  border: 1px solid var(--marco); background: #000; overflow: hidden;
}
.galeria-vista {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain;            /* la captura entera, sin recortar ni deformar */
  opacity: 0; transition: opacity .45s ease;
}
.galeria-vista.activa { opacity: 1; }

.galeria-pie {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px;
  margin-top: 16px;
}
.galeria-texto {
  margin: 0; flex: 1 1 320px; min-width: 0;
  color: var(--texto-suave); font-size: 16px; line-height: 1.55; text-wrap: pretty;
}

/* ── Cierre ──────────────────────────────────────────────────────────── */
.cierre {
  background: var(--acento); color: var(--fondo);
  padding: clamp(72px, 14vh, 180px) var(--aire-lateral);
}
.cierre-grilla {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(32px, 5vw, 80px); align-items: start;
}
.cierre h2 {
  margin: 0 0 24px;
  font-size: clamp(36px, 7vw, 120px); font-weight: 900; line-height: .9; letter-spacing: -.045em;
}
.cierre-bajada {
  margin: 0 0 34px; max-width: min(26ch, 100%);
  font-size: clamp(18px, 1.8vw, 24px); line-height: 1.45; font-weight: 600;
}
.boton-oscuro {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 22px 36px; background: var(--fondo); color: var(--acento);
  font-size: 18px; font-weight: 800; cursor: pointer;
}
.boton-oscuro:hover { background: #16181e; color: var(--acento-claro); }
.cierre-version { margin-top: 16px; font-size: 13px; font-weight: 600; opacity: .7; }

.precio-caja { border-top: 2px solid var(--fondo); padding-top: 26px; }
.precio-titulo { margin-bottom: 12px; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; opacity: .65; }
.precio { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.precio-numero {
  font-size: clamp(48px, 7vw, 96px); font-weight: 900;
  letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums;
}
.precio-moneda { font-size: 18px; font-weight: 800; }
.precio-anual { margin-top: 10px; font-size: 16px; font-weight: 600; line-height: 1.45; }
.precio-anual strong { font-weight: 900; }
/* El descuento va pegado al precio anual, como etiqueta: nunca queda suelto en otro renglón. */
.precio-anual-linea { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.precio-ahorro { background: var(--fondo); color: var(--acento); font-size: 12px; font-weight: 900; letter-spacing: .04em; padding: 3px 8px; }
.precio-lista { margin: 24px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 16px; font-weight: 600; }
.precio-lista li { border-top: 1px solid rgba(10, 12, 16, .25); padding-top: 10px; }
.consulta { margin-top: 28px; font-size: 15px; font-weight: 600; }
.consulta a { color: var(--fondo); border-bottom: 2px solid var(--fondo); }
.consulta a:hover { color: var(--fondo); opacity: .75; }

/* ── Pie ─────────────────────────────────────────────────────────────── */
.pie { padding-block: clamp(40px, 7vh, 72px); border-top: 1px solid var(--linea); }
.pie .rejilla { align-items: start; }
.pie-bloque { grid-column: span 3; }
@media (max-width: 900px) { .pie-bloque { grid-column: 1 / -1; } }
.pie-marca { margin-bottom: 10px; font-size: 22px; font-weight: 900; letter-spacing: -.02em; color: #fff; }
.pie-datos { font-size: 13px; color: var(--texto-tenue); line-height: 1.7; }
.pie-columna { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.pie-columna a { color: var(--texto-suave); }
.pie-columna a:hover { color: #fff; }
.pie-titulo { margin-bottom: 4px; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--texto-apagado); }
.pie-legal { font-size: 12px; color: var(--texto-apagado); line-height: 1.7; }

/* ── Movimiento ──────────────────────────────────────────────────────── */
[data-aparece] {
  opacity: 0; transform: translateY(30px);
  transition: opacity .85s cubic-bezier(.16, .8, .24, 1), transform .95s cubic-bezier(.16, .8, .24, 1);
}
[data-aparece].visible { opacity: 1; transform: none; }

/* Quien pidió menos movimiento en su sistema operativo lo pidió en serio:
   para algunas personas el parallax produce mareo real. Se ve todo, quieto. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-aparece] { opacity: 1; transform: none; transition: none; }
  }


/* ── Encabezado de página de producto ────────────────────────────────────
   Tres zonas en una fila, sobre la misma grilla de doce columnas: el nombre
   a la izquierda, la imagen en el medio y la ficha del producto a la
   derecha. Se repite igual en los cuatro productos — lo que cambia es el
   color y el texto, nunca el reparto. */
.cabecera {
  position: relative;
  padding-block: clamp(120px, 18vh, 190px) clamp(64px, 9vh, 110px);
  overflow: hidden;
}
.cabecera::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(90% 70% at 76% 6%, color-mix(in srgb, var(--tono) 22%, transparent), transparent 62%),
    linear-gradient(165deg, transparent 45%, color-mix(in srgb, var(--tono) 8%, transparent));
}
.cabecera > * { position: relative; }

.cab-nombre  { grid-column: 1 / -1; min-width: 0; margin-bottom: clamp(28px, 4vh, 56px); container-type: inline-size; }
.cab-figura  { grid-column: 1 / 8; }
.cab-ficha   { grid-column: 8 / 13; }

@media (max-width: 1100px) {
  .cab-nombre { grid-column: 1 / -1; }
  .cab-figura { grid-column: 1 / 7; }
  .cab-ficha  { grid-column: 7 / 13; }
}
@media (max-width: 900px) {
  .cab-nombre, .cab-figura, .cab-ficha { grid-column: 1 / -1; }
}

.cab-estado {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 22px;
  padding: 8px 15px; border: 1px solid var(--linea-fuerte);
  font-size: 11.5px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: var(--texto-suave);
}
.cab-estado--vivo { background: var(--tono); border-color: var(--tono); color: var(--fondo); }

.cab-titulo {
  margin: 0; font-size: clamp(46px, 13cqw, 240px); font-weight: 900;
  line-height: .84; letter-spacing: -.05em; color: #fff;
}
.cab-titulo span { color: var(--tono); }
.cab-titulo .reg { font-size: .16em; top: -2.6em; }

.cab-rubro {
  margin: clamp(18px, 2.4vh, 28px) 0 0;
  font-size: clamp(14px, 1.3vw, 17px); font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--tono);
}
.cab-frase {
  margin: 14px 0 0; max-width: min(34ch, 100%); color: var(--texto-suave);
  font-size: clamp(15px, 1.25vw, 18px); line-height: 1.6; text-wrap: pretty;
}

/* La ficha de la derecha: es la que carga los datos. */
.ficha-producto { border-top: 2px solid var(--tono); padding-top: 20px; }
.ficha-producto h2 { margin: 0 0 14px; font-size: 21px; font-weight: 800; }
.ficha-datos {
  display: flex; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 16px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--texto-tenue);
}
.ficha-datos span:not(:last-child)::after { content: " |"; margin-left: 10px; color: var(--texto-apagado); }
.ficha-datos span:first-child { color: var(--tono); }
.ficha-producto p { margin: 0 0 20px; font-size: 14.5px; line-height: 1.65; color: var(--texto-suave); }
.ficha-acciones { display: flex; flex-wrap: wrap; gap: 10px; }
.ficha-acciones .boton { padding: 13px 20px; font-size: 14px; }

/* Franja de cierre del encabezado: enlaces a un lado, dato al otro. */
.cab-pie {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; margin-top: clamp(40px, 6vh, 72px);
  padding-top: 20px; border-top: 1px solid var(--linea);
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--texto-tenue);
}
.cab-pie a { color: var(--texto-tenue); }
.cab-pie a:hover { color: var(--tono); }
.cab-pie-enlaces { display: flex; gap: 18px; }

/* ── Lista de funciones ──────────────────────────────────────────────── */
.funciones {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 1px; background: var(--linea); border-block: 1px solid var(--linea);
}
.funcion { background: var(--fondo); padding: 28px 26px 34px; }
.funcion-num { margin-bottom: 14px; font-size: 11px; font-weight: 800; letter-spacing: .16em; color: var(--tono); }
.funcion h3 { margin: 0 0 8px; font-size: 19px; font-weight: 800; }
.funcion p { margin: 0; color: var(--texto-suave); font-size: 14.5px; line-height: 1.6; }



/* ── Muestrario de pieles ─────────────────────────────────────────────
   Una sola captura: la piel elegida en el selector de arriba. Las tres
   quedan apiladas en el mismo lugar y se cruzan por opacidad, asi que el
   bloque no cambia de alto al pasar de una a otra. */
.muestra {
  position: relative; width: 100%; aspect-ratio: 1584 / 935;
  border: 1px solid var(--marco); background: #000; overflow: hidden;
}
.muestra-vista {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity .45s ease;
}
.muestra-vista.visible { opacity: 1; }
.muestra-etiqueta {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  padding: 7px 13px; background: #0a0c10;
  border: 1px solid var(--acento); border-bottom-width: 3px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .8);
  font-size: 11px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: #fff;
}

/* ── Seccion con fotografia de fondo ─────────────────────────────────
   La foto entra por la derecha y se apaga hacia la izquierda, donde va el
   texto: el lado que se refuerza es el del mostrador. */
.seccion--foto { position: relative; overflow: hidden; border-top: 0; }
.seccion--foto > .envoltura { position: relative; z-index: 2; }
.seccion--foto .c-cuerpo { grid-column: 1 / 8; }
@media (max-width: 900px) { .seccion--foto .c-cuerpo { grid-column: 1 / -1; } }

.foto-fondo { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* La foto va suave: es atmosfera, no ilustracion. Funde a negro por los
   cuatro lados, sin borde ni corte visible. */
.seccion--foto .foto-fondo img {
  width: 100%; height: 100%; object-fit: cover; object-position: 82% center;
  opacity: .6; filter: saturate(.9) blur(1px);
  -webkit-mask-image:
    linear-gradient(to right, transparent 4%, rgba(0,0,0,.2) 32%, rgba(0,0,0,.7) 62%, #000 88%),
    linear-gradient(to bottom, transparent 0%, #000 16%, #000 82%, transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 4%, rgba(0,0,0,.2) 32%, rgba(0,0,0,.7) 62%, #000 88%),
    linear-gradient(to bottom, transparent 0%, #000 16%, #000 82%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.foto-fondo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to right, #000 14%, rgba(0,0,0,.55) 46%, transparent 78%);
}
@media (max-width: 900px) {
  .seccion--foto .foto-fondo img { object-position: 88% center; }
  .foto-fondo::after { background: linear-gradient(to bottom, var(--fondo) 22%, color-mix(in srgb, var(--fondo) 78%, transparent) 100%); }
}

/* Hueco a la espera de la fotografia: mismo encuadre y misma degradacion
   que tendra la imagen, para que al reemplazarlo no se mueva nada. */
.foto-fondo--hueco {
  display: grid; place-items: center end; padding-right: 8%;
  background: linear-gradient(to right, transparent 6%, color-mix(in srgb, var(--tono, var(--acento)) 8%, #17181c) 62%, color-mix(in srgb, var(--tono, var(--acento)) 14%, #1c1e23) 100%);
}
.foto-fondo--hueco span {
  font-size: 11px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--texto-apagado);
}

/* ── Bloque tirado a la derecha ───────────────────────────────────────
   Rompe la columna izquierda una vez por pagina para que la lectura no
   baje siempre por el mismo borde. */
.rejilla--derecha > .c-rotulo,
.rejilla--derecha > .c-cuerpo { grid-column: 6 / -1; text-align: right; }
.rejilla--derecha > .c-cuerpo > * { margin-left: auto; }
@media (max-width: 900px) {
  .rejilla--derecha > .c-rotulo,
  .rejilla--derecha > .c-cuerpo { grid-column: 1 / -1; text-align: left; }
}

/* Alturas reservadas: los renglones de cada lamina son distintos, asi que
   se fija el espacio que ocupan y lo de abajo no se corre de una a otra. */
.lamina-estado { min-height: 39px; }
.lamina-nombre {
  /* Es un h2: sin esto el margen por defecto abre casi un cuerpo entero y el
     bloque de botones termina cayendo sobre la franja del mando. */
  margin: 0; min-height: .84em; }
.lamina-rubro  { min-height: 1.4em; }
/* La reserva de renglones solo tiene sentido cuando sobra alto: en pantallas
   bajas empuja los botones contra el mando. */
@media (min-height: 760px) { .lamina-frase { min-height: calc(1.6em * 3); } }

/* En pantalla ancha el texto de la portada no cruza toda la pantalla: la
   escena de la derecha necesita aire. */
@media (min-width: 1101px) {
  .portada-cuerpo > .chapa,
  .portada-cuerpo > .logotipo,
  .portada-cuerpo > p,
  .portada-cuerpo > .portada-dos,
  .portada-cuerpo > .botonera,
  .portada-cuerpo > .letra-chica { position: relative; z-index: 1; max-width: 62%; }
  .portada-cuerpo > .logotipo { max-width: none; }
}

/* Sumario de la portada: la descripcion completa del producto, entre el
   logotipo y el titular. */
.portada-sumario {
  margin: clamp(18px, 2.6vh, 30px) 0 0; max-width: min(78ch, 100%);
  font-size: clamp(15px, 1.15vw, 17px); font-style: italic;
  line-height: 1.6; color: #c7800a; text-wrap: pretty;
}
/* El titular de la seccion de pieles va en caja baja y a dos renglones. */
.titular--pieles { max-width: min(22ch, 100%); text-transform: none; }

/* Fuera de la vista pero presente para buscadores y lectores de pantalla.
   No se usa display:none: eso lo saca tambien del arbol de accesibilidad. */
.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}


/* ── La marca madre (portada) ─────────────────────────────────────────
   El logotipo de BRUTOTECH ocupa la primera pantalla y el carrusel de los
   productos queda debajo. Antes la portada abria directamente con BRUTOGYM
   a pantalla completa y se confundia con su propia pagina: el visitante no
   sabia si estaba viendo la empresa o el producto. */
.marca {
  position: relative; overflow: hidden;
  /* Ocupa la primera pantalla entera: solo el logotipo, sin que se asome la
     tarjeta del primer producto. Lo de abajo se descubre al deslizar. */
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(88px, 12vh, 130px) clamp(76px, 10vh, 120px);
}
.marca-particulas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}
.marca::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(95% 75% at 72% 4%, color-mix(in srgb, var(--acento) 20%, transparent), transparent 62%),
    linear-gradient(168deg, transparent 48%, color-mix(in srgb, var(--acento) 7%, transparent));
}
.marca-cuerpo { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }

/* Indicador "deslizá": tres chevrons que bajan en cascada, abajo y al centro
   del hero. Invita a descubrir los productos sin mostrarlos todavía. */
.marca-scroll {
  position: absolute; left: 50%; bottom: clamp(18px, 3.5vh, 40px);
  transform: translateX(-50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--texto-tenue); text-decoration: none;
  font-size: 11px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase;
  transition: color .25s;
}
.marca-scroll:hover { color: #fff; }
.marca-scroll-flechas { display: grid; width: 24px; height: 30px; }
.marca-scroll-flechas svg {
  grid-area: 1 / 1; width: 24px; height: 24px; opacity: 0;
  animation: marca-baja 1.8s ease-in-out infinite;
}
.marca-scroll-flechas svg:nth-child(2) { animation-delay: .22s; }
.marca-scroll-flechas svg:nth-child(3) { animation-delay: .44s; }
@keyframes marca-baja {
  0%   { opacity: 0; transform: translateY(-7px); }
  45%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(9px); }
}
@media (prefers-reduced-motion: reduce) {
  .marca-scroll-flechas svg { animation: none; opacity: .65; transform: none; }
  .marca-scroll-flechas svg:nth-child(2),
  .marca-scroll-flechas svg:nth-child(3) { display: none; }
}

/* La bajada de marca: una linea, del tamaño de un titular chico. Es lo que
   dice a que se dedica la empresa antes de nombrar un solo producto. */
/* La frase y el sumario van centrados debajo del logotipo, no colgados del
   borde izquierdo: el logo es tan ancho que el texto pegado a la izquierda
   quedaba descolgado del bloque. */
.marca-frase {
  margin: clamp(10px, 1.5vh, 17px) auto 0; max-width: min(28ch, 100%);
  text-align: center;
  font-size: clamp(20px, 2.6vw, 40px); font-weight: 800;
  line-height: 1.08; letter-spacing: -.03em; color: #fff; text-wrap: balance;
}
.marca .portada-sumario {
  margin-inline: auto; text-align: center;
  font-style: normal; color: var(--texto-suave); max-width: min(60ch, 100%);
}

/* Con la marca arriba, el carrusel deja de ser la primera pantalla: se
   acorta para que entre en el mismo golpe de vista que el logotipo.
   El alto lo manda el contenido, no el viewport — pero las laminas heredaban
   height:100% del modo pantalla completa y sin contenedor de referencia se
   colapsaban a cero. */
section.vitrina { height: auto; min-height: clamp(420px, 56vh, 620px); max-height: none; }
section.vitrina .vitrina-pistas { height: auto; align-items: stretch; }
section.vitrina .lamina {
  height: auto; min-height: clamp(420px, 56vh, 620px);
  /* Calle propia a los costados para las flechas: el texto no las cruza. */
  padding-inline: 84px;
  /* Abajo queda libre la franja del mando, con aire propio arriba y abajo. */
  /* Simetrico: el aire libre debajo del texto es igual al de arriba; lo que se
   suma es solo la franja que ocupa el mando (26px de borde + 46px de alto). */
  padding-block: clamp(44px, 6vh, 76px) calc(clamp(44px, 6vh, 76px) + 72px);
}
section.vitrina .lamina-nombre {
  /* Es un h2: sin esto el margen por defecto abre casi un cuerpo entero y el
     bloque de botones termina cayendo sobre la franja del mando. */
  margin: 0; font-size: clamp(30px, 9.6cqw, 128px); }

/* La envoltura ya no vuelve a sumar aire lateral adentro de la lamina: la
   calle de las flechas hace ese trabajo. */
section.vitrina .lamina > .envoltura { padding-inline: 0; }

/* ── Bloque con figura a lo alto ──────────────────────────────────────
   Cuando la seccion lleva foto de fondo, el texto se acota a la mitad
   izquierda y el rotulo deja de ocupar su propia fila suelta. */
.rejilla--con-figura { row-gap: clamp(20px, 3vh, 34px); }
.rejilla--con-figura > .titular { margin-bottom: 0; }

/* ── Pantalla de arranque ─────────────────────────────────────────────
   Ocupa el lugar que tendria una captura, pero muestra el programa
   encendiendose: marca, barra de carga y el estado real del producto. */
.carga {
  position: relative; margin: 0; aspect-ratio: 16 / 9;
  display: grid; align-items: end; container-type: inline-size;
  padding: clamp(20px, 3vw, 38px);
  background:
    radial-gradient(120% 90% at 82% 12%, color-mix(in srgb, var(--tono, var(--acento)) 16%, transparent), transparent 62%),
    #0d0f13;
  border: 1px solid var(--linea-fuerte);
  overflow: hidden;
}
.carga::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.035) 0 1px, transparent 1px 3px);
}
.carga-marco { position: relative; width: 100%; }
.carga-marca {
  font-size: clamp(26px, 12cqw, 62px); font-weight: 900;
  line-height: .9; letter-spacing: -.045em; color: #fff;
  white-space: nowrap; margin-left: -.06em;
}
.carga-marca span { color: var(--tono, var(--acento)); }
.carga-marca .reg { font-size: .22em; top: -1.9em; }
.carga-estado {
  margin-top: clamp(14px, 2.4vw, 26px); min-height: 1.4em;
  font-size: clamp(11px, 2.2cqw, 13px); font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; color: var(--texto-suave);
}
.carga-barra {
  display: block; height: 4px; margin-top: 12px;
  background: rgba(255, 255, 255, .12); overflow: hidden;
}
.carga-barra span {
  display: block; height: 100%; width: 0;
  background: var(--tono, var(--acento)); transition: width .18s linear;
}
.carga-pie {
  display: flex; justify-content: space-between; gap: 16px; margin-top: 10px;
  font-size: 11px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--texto-apagado);
  font-variant-numeric: tabular-nums;
}
.carga[data-listo="true"] .carga-estado { color: var(--tono, var(--acento)); }

/* Misma foto usada dos veces en una pagina: la segunda va espejada para que
   no se lea como repetida. Al voltear el elemento tambien se voltea su
   mascara, asi que el degradado horizontal se declara al reves para que siga
   apagandose del lado del texto. */
.seccion--foto .foto-fondo--espejo img {
  transform: scaleX(-1);
  -webkit-mask-image:
    linear-gradient(to left, transparent 4%, rgba(0,0,0,.2) 32%, rgba(0,0,0,.7) 62%, #000 88%),
    linear-gradient(to bottom, transparent 0%, #000 16%, #000 82%, transparent 100%);
  mask-image:
    linear-gradient(to left, transparent 4%, rgba(0,0,0,.2) 32%, rgba(0,0,0,.7) 62%, #000 88%),
    linear-gradient(to bottom, transparent 0%, #000 16%, #000 82%, transparent 100%);
}


/* ── Producto en desarrollo ───────────────────────────────────────────
   Sin recuadros: el aviso es tipografia y las reglas hacen la separacion,
   igual que en el resto del sitio. La frase es lo primero que se lee. */
.aviso-frase {
  margin: 0; max-width: 22ch;
  font-size: clamp(26px, 3.4vw, 46px); font-weight: 900;
  line-height: 1.06; letter-spacing: -.035em; color: #fff;
  text-wrap: balance;
}
.aviso-frase em { font-style: normal; color: var(--tono, var(--acento)); }
.aviso-texto {
  margin: clamp(18px, 2.4vh, 26px) 0 0; max-width: 54ch;
  font-size: 16px; line-height: 1.7; color: var(--texto-suave);
}

.anotarse {
  margin-top: clamp(30px, 5vh, 52px); max-width: 560px;
  border-top: 2px solid var(--tono, var(--acento)); padding-top: 22px;
}
.anotarse-titulo {
  font-size: 11px; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--texto-suave);
}
.anotarse-forma { display: flex; flex-wrap: wrap; gap: 0; margin-top: 14px; }
.anotarse-campo {
  flex: 1 1 240px; min-width: 0; padding: 16px 2px;
  background: transparent; border: 0;
  border-bottom: 1px solid var(--linea-fuerte);
  color: #fff; font-family: inherit; font-size: 17px;
}
.anotarse-campo::placeholder { color: var(--texto-apagado); }
.anotarse-campo:focus { outline: 0; border-bottom-color: var(--tono, var(--acento)); }
.anotarse-enviar {
  flex: 0 0 auto; padding: 16px 26px; border: 0; cursor: pointer;
  background: var(--tono, var(--acento)); color: #fff;
  font-family: inherit; font-size: 15px; font-weight: 800;
  letter-spacing: .02em;
}
.anotarse-enviar:hover { filter: brightness(1.14); }
.anotarse-legal {
  margin: 14px 0 0; max-width: 52ch;
  font-size: 13px; line-height: 1.65; color: var(--texto-tenue);
}
.anotarse-gracias { margin: 0; font-size: 17px; line-height: 1.6; color: #fff; }
.anotarse-gracias span { display: block; margin-top: 6px; font-size: 14px; color: var(--texto-suave); }