/* filmmakers.marketing — plano secuencia por el espacio */

@font-face { font-family: "Archivo"; src: url("/fonts/archivo.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Martian Mono"; src: url("/fonts/martian-mono.woff2") format("woff2"); font-weight: 400 600; font-stretch: 75% 112.5%; font-display: swap; }
@font-face { font-family: "Syncopate"; src: url("/fonts/syncopate-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  /* espacio */
  --vacio: #05060a;
  --hoja: #0a0c13;
  --linea: rgba(242, 241, 236, .13);
  --linea-fuerte: rgba(242, 241, 236, .3);
  /* cyan de la marca para la acción; luz de estrellas: B (enlaces y sinapsis), M (REC y errores) */
  --tinta: #f2f1ec;
  --tinta-2: #aeb3c3;
  --tinta-3: #868ca0;
  --tinta-hero: #d6d6dc;
  --placeholder: #7f869a;
  --cian: #00f2ff;
  --cian-claro: #7df8ff;
  --cian-osc: #00191d;
  /* rosa de la sección premium, el mismo del sitio anterior (pedido del usuario) */
  --rosa: #ff007a;
  --rosa-claro: #ff5aa5;
  --rosa-osc: #1c000e;
  --rosa-fondo: #d9006a; /* fondo de renglón encendido: con letra blanca da 5:1 */
  --hielo: #a3bdff;
  --brasa: #ff6f4a;
  --error: #ff9c80;

  --f-texto: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "Martian Mono", ui-monospace, "Cascadia Mono", monospace;
  --f-marca: "Syncopate", "Archivo", sans-serif;

  --g: clamp(16px, 4.2vw, 64px);
  --cab-h: 72px;
  --linea-h: 46px;
  --ancho: 1320px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--cab-h) + 8px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--vacio);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  /* sombra oscura detrás del texto: se lee aunque pase una nebulosa o una estela */
  text-shadow: 0 0 18px rgba(5, 6, 10, .9);
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
::selection { background: var(--cian); color: var(--cian-osc); text-shadow: none; }
input { caret-color: var(--cian); }
html { scrollbar-width: thin; scrollbar-color: #2b3042 var(--vacio); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--vacio); }
::-webkit-scrollbar-thumb { background: #2b3042; border-radius: 10px; border: 2px solid var(--vacio); }
:focus-visible { outline: 2px solid var(--cian); outline-offset: 3px; border-radius: 3px; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.saltar {
  position: fixed; z-index: 100; top: 12px; left: 12px;
  padding: 12px 18px; border-radius: 4px;
  background: var(--cian); color: var(--cian-osc); font-weight: 700; text-decoration: none; text-shadow: none;
  translate: 0 -160%; transition: translate .3s var(--ease);
}
.saltar:focus { translate: 0 0; }

/* ---------- fondo ---------- */
#nebulosa, #espacio {
  position: fixed; inset: 0; z-index: 0;
  width: 100%; height: 100vh; height: 100lvh;
  pointer-events: none;
}
#nebulosa { background: var(--vacio); }
main, .creditos { position: relative; z-index: 1; overflow-x: clip; }
/* grano de película sobre el fondo: le quita el bandeado al degradado de las nebulosas */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  opacity: .05;
}

/* ---------- visor de cámara ---------- */
.visor { position: fixed; inset: 0; z-index: 70; pointer-events: none; overflow: hidden; }
.visor__esq {
  position: absolute; width: 30px; height: 30px;
  border: 0 solid rgba(242, 241, 236, .72);
}
.visor__esq--ai { top: 14px; left: 14px; border-width: 2px 0 0 2px; }
.visor__esq--ad { top: 14px; right: 14px; border-width: 2px 2px 0 0; }
.visor__esq--bi { bottom: 14px; left: 14px; border-width: 0 0 2px 2px; }
.visor__esq--bd { bottom: 14px; right: 14px; border-width: 0 2px 2px 0; }

/* ---------- cabecera ---------- */
.cabecera {
  position: fixed; z-index: 50; inset: 0 0 auto;
  height: var(--cab-h);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-inline: max(var(--g), 30px);
}
.cabecera::before {
  content: ""; position: absolute; z-index: -1; inset: 0 0 -28px; pointer-events: none;
  background: linear-gradient(to bottom, var(--vacio) 0, var(--vacio) calc(100% - 28px), rgba(5, 6, 10, 0) 100%);
}
.marca {
  font-family: var(--f-marca); font-weight: 700;
  font-size: clamp(.72rem, 1.25vw, .92rem); letter-spacing: .06em;
  text-decoration: none; white-space: nowrap;
}
.marca span { color: var(--cian); }
.contador {
  display: inline-grid; place-items: center;
  min-width: 22px; height: 22px; padding: 0 6px; margin-left: 4px; border-radius: 11px;
  background: var(--cian-osc); color: var(--cian);
  font: 600 .7rem/1 var(--f-mono); font-variant-numeric: tabular-nums;
}
.contador[hidden] { display: none; }

/* ---------- botones ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px;
  border: 1px solid transparent; border-radius: 4px;
  font-family: var(--f-texto); font-weight: 650; font-size: 1rem; line-height: 1; font-stretch: 106%;
  letter-spacing: .01em; text-decoration: none; text-shadow: none; white-space: nowrap;
  cursor: pointer;
  transition: background-color .3s, color .3s, border-color .3s;
  --marco: var(--cian);
}
.btn svg { width: 20px; height: 20px; flex: none; transition: translate .4s var(--ease); }
.btn:hover svg { translate: 3px 0; }
/* corchetes de enfoque, como el visor de una cámara */
.btn::before {
  content: ""; position: absolute; inset: -7px; pointer-events: none;
  background:
    linear-gradient(var(--marco), var(--marco)) top left / 10px 1.5px,
    linear-gradient(var(--marco), var(--marco)) top left / 1.5px 10px,
    linear-gradient(var(--marco), var(--marco)) top right / 10px 1.5px,
    linear-gradient(var(--marco), var(--marco)) top right / 1.5px 10px,
    linear-gradient(var(--marco), var(--marco)) bottom left / 10px 1.5px,
    linear-gradient(var(--marco), var(--marco)) bottom left / 1.5px 10px,
    linear-gradient(var(--marco), var(--marco)) bottom right / 10px 1.5px,
    linear-gradient(var(--marco), var(--marco)) bottom right / 1.5px 10px;
  background-repeat: no-repeat;
  opacity: 0; scale: .9;
  transition: opacity .3s, scale .45s var(--ease);
}
.btn:hover::before, .btn:focus-visible::before { opacity: 1; scale: 1; }
.btn:focus-visible { outline: none; }
.btn--cian { background: var(--cian); color: var(--cian-osc); }
.btn--cian:hover { background: var(--cian-claro); }
.btn--linea { border-color: var(--linea-fuerte); color: var(--tinta); --marco: var(--tinta); }
.btn--linea:hover { border-color: var(--tinta); }
.btn--chico { min-height: 42px; padding: 0 16px; font-size: .92rem; }
.btn--bloque { width: 100%; min-height: 58px; font-size: 1.05rem; }

.creditos-txt {
  font-stretch: 62%; font-weight: 600; text-transform: uppercase;
  letter-spacing: .1em; font-size: 1.5rem; color: var(--tinta-2);
}

/* ---------- línea de tiempo (navegación) ---------- */
.linea {
  position: fixed; z-index: 40; left: max(var(--g), 30px); right: max(var(--g), 30px); bottom: 0;
  height: var(--linea-h);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px;
  font: 600 .72rem/1 var(--f-texto); font-stretch: 70%; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinta-2);
}
#esc-num, .linea__tc { font-family: var(--f-mono); font-weight: 500; font-stretch: 87.5%; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.linea::before {
  content: ""; position: absolute; z-index: -1; inset: -30px calc(-1 * max(var(--g), 30px)) 0;
  background: linear-gradient(to top, var(--vacio) 0, var(--vacio) calc(100% - 30px), rgba(5, 6, 10, 0) 100%);
  pointer-events: none;
}
.linea__escena {
  display: flex; align-items: center; gap: 10px; height: 100%; min-width: 0; padding: 0 6px 0 0;
  border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit;
  white-space: nowrap; text-shadow: none; cursor: pointer;
}
.linea__escena svg { width: 14px; height: 14px; flex: none; transition: rotate .3s var(--ease); }
.linea__escena[aria-expanded="true"] svg { rotate: 180deg; }
.linea__escena:hover #esc-nombre { color: var(--cian); }
.linea__escena #esc-nombre { color: var(--tinta); }
/* REC se enciende solo mientras la cámara se mueve (hay scroll) */
.linea__rec { width: 7px; height: 7px; border-radius: 50%; background: var(--brasa); opacity: .3; transition: opacity .25s; }
.grabando .linea__rec { opacity: 1; }
.linea__riel { position: relative; display: flex; height: 100%; }
.linea__riel::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--linea-fuerte); }
.linea__riel li { position: relative; flex: 1 1 0; min-width: 0; }
.linea__riel a {
  position: relative; display: flex; align-items: flex-start; height: 100%;
  padding: 6px 8px 0 9px; text-decoration: none; color: var(--tinta-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .3s;
}
.linea__riel a::before { content: ""; position: absolute; left: 0; top: calc(50% - 6px); width: 1px; height: 12px; background: var(--linea-fuerte); }
.linea__riel a:hover, .linea__riel a.is-actual { color: var(--tinta); }
.linea__riel a.is-actual::before { background: var(--cian); }
.linea__cabezal {
  position: absolute; left: 0; top: calc(50% - 11px); width: 2px; height: 22px; border-radius: 1px;
  background: var(--cian);
  pointer-events: none; will-change: transform;
}
.linea__tc { color: var(--tinta); font-size: .72rem; min-width: 10.5ch; text-align: right; }
/* menú de escenas: se abre con el botón de la escena actual */
.linea.is-abierta .linea__riel {
  position: absolute; left: 0; bottom: calc(100% + 10px); width: min(300px, 100%); height: auto;
  flex-direction: column; padding: 6px;
  background: var(--hoja); border: 1px solid rgba(242, 241, 236, .14); border-radius: 12px;
  box-shadow: 0 24px 60px -16px rgba(0, 0, 0, .85);
}
.linea.is-abierta .linea__riel::before, .linea.is-abierta .linea__riel a::before { display: none; }
.linea.is-abierta .linea__riel li { flex: none; }
.linea.is-abierta .linea__riel a {
  height: 46px; padding: 0 14px; align-items: center; border-radius: 8px;
  font-size: 1rem; font-stretch: 100%; font-weight: 550; letter-spacing: 0; text-transform: none; color: var(--tinta-2);
}
.linea.is-abierta .linea__riel a:hover { background: rgba(242, 241, 236, .06); color: var(--tinta); }
.linea.is-abierta .linea__riel a.is-actual { color: var(--cian); }
.linea.is-abierta .linea__cabezal { opacity: 0; }

/* ---------- escenas ---------- */
.escena {
  padding-block: clamp(110px, 18vh, 210px);
  padding-inline: max(var(--g), calc((100% - var(--ancho)) / 2));
}

.titulo-seccion {
  font-size: clamp(2.3rem, 5.6vw, 4.6rem); font-stretch: 125%; font-weight: 800;
  line-height: .98; letter-spacing: -.03em; text-wrap: balance;
}
.seccion-cab { max-width: 60rem; margin-bottom: clamp(56px, 9vh, 110px); }
.seccion-cab p { margin-top: 22px; max-width: 52ch; font-size: clamp(1.05rem, 1.3vw, 1.2rem); color: var(--tinta-2); }
.seccion-cab strong { color: var(--tinta); font-weight: 650; }

/* apertura: intro con el nombre; al bajar, la cámara entra por el punto y llega la frase */
.escena.intro { position: relative; padding: 0; }
.intro__escenario { position: relative; }
.intro__nombre {
  min-height: 72vh; min-height: 72svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(28px, 6vh, 56px);
  padding: calc(var(--cab-h) + 20px) var(--g) 32px;
}
.intro__frase { padding: 24px max(var(--g), calc((100% - var(--ancho)) / 2)) calc(var(--linea-h) + clamp(24px, 7vh, 100px)); }
.intro__desliza {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  font: 600 .74rem/1 var(--f-texto); font-stretch: 70%; letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-2);
}
.intro__desliza span { position: relative; width: 1px; height: 44px; background: var(--linea-fuerte); overflow: hidden; }
.intro__desliza span::after { content: ""; position: absolute; inset: 0; background: var(--cian); translate: 0 -100%; animation: avanza 2.4s var(--ease) infinite; }
@keyframes avanza { 60%, 100% { translate: 0 100%; } }
.intro__anillo { display: none; }

/* con movimiento: el escenario se queda fijo mientras la cámara entra por el punto */
.intro.pin { height: calc(100vh + 150vh); height: calc(100svh + 150vh); }
.intro.pin .intro__escenario { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.intro.pin .intro__nombre { position: absolute; inset: 0; min-height: 0; padding-bottom: calc(var(--linea-h) + 24px); will-change: transform, opacity; }
.intro.pin .intro__desliza { position: absolute; left: 50%; bottom: calc(var(--linea-h) + 28px); translate: -50% 0; }
.intro.pin .intro__frase { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding-top: calc(var(--cab-h) + 16px); }
.intro.pin [data-pieza] { opacity: 0; }
.intro.pin .intro__anillo {
  display: block; position: absolute; left: var(--px, 50%); top: var(--py, 50%); width: 150vmax; height: 150vmax; translate: -50% -50%;
  border-radius: 50%; pointer-events: none; opacity: 0; scale: 0;
  background: radial-gradient(circle, rgba(0, 242, 255, 0) 64%, rgba(0, 242, 255, .5) 68.5%, rgba(160, 250, 255, .9) 69.5%, rgba(0, 242, 255, .35) 70.5%, rgba(0, 242, 255, 0) 74%);
}

/* el nombre: nace de un punto de luz, dos haces se cruzan y las letras salen del punto */
.nombre {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  font-family: var(--f-marca); font-weight: 700; text-transform: uppercase;
  font-size: clamp(2.1rem, min(6.4vw, 11.5vh), 6.2rem); line-height: 1.06; letter-spacing: .02em;
  text-shadow: none; pointer-events: none;
}
.nombre__l1, .nombre__l2 { position: relative; display: block; white-space: nowrap; }
.nombre__l2 { color: var(--cian); }
.nombre__punto { position: relative; display: inline-block; color: var(--cian); }
.nombre__punto::before {
  content: ""; position: absolute; z-index: -1; left: 50%; bottom: .2em; width: 3.4em; height: 3.4em; translate: -50% 50%;
  border-radius: 50%; background: radial-gradient(circle, rgba(0, 242, 255, .42), rgba(0, 242, 255, .08) 38%, rgba(0, 242, 255, 0) 64%);
  opacity: .5;
}
.nombre__haz {
  position: absolute; z-index: -1; left: -35%; right: -35%; top: 46%; height: 1px;
  background: linear-gradient(90deg, rgba(0, 242, 255, 0), rgba(160, 250, 255, .95) 55%, rgba(0, 242, 255, 0));
  opacity: 0;
}
.nombre__haz--a { rotate: -13deg; }
.nombre__haz--b { rotate: 11deg; }
/* una luz pasa detrás del nombre cada tanto */
.nombre::after {
  content: ""; position: absolute; z-index: -2; top: -15%; bottom: -15%; left: 0; width: 22%;
  background: linear-gradient(90deg, rgba(0, 242, 255, 0), rgba(0, 242, 255, .2), rgba(0, 242, 255, 0));
  filter: blur(8px); opacity: 0;
}
.m .nombre__punto { animation: punto 1s var(--ease) .15s both; }
.m .nombre__punto::before { animation: halo 2.8s ease-out .15s both; }
.m .nombre__haz--a { animation: haz 1.2s var(--ease) .4s both; }
.m .nombre__haz--b { animation: haz 1.2s var(--ease) .55s both; }
.m .nombre__l1 .nombre__txt { display: inline-block; animation: desdePunto 1.15s var(--ease) .85s both; }
.m .nombre__l2 .nombre__txt { display: inline-block; animation: barrido 1.05s var(--ease) 1.3s both; }
.m .nombre::after { animation: barre 8s ease-in-out 3.2s infinite; }
.m .intro__desliza { animation: enfoque 1s var(--ease) 2.3s both; }
@keyframes punto { 0% { opacity: 0; scale: .2; } 55% { opacity: 1; scale: 1.7; } 100% { opacity: 1; scale: 1; } }
@keyframes halo { 0% { opacity: 0; scale: .3; } 22% { opacity: 1; scale: 1.15; } 100% { opacity: .5; scale: 1; } }
@keyframes haz { 0% { opacity: 0; translate: -25% 0; scale: .3 1; } 45% { opacity: 1; } 100% { opacity: 0; translate: 20% 0; scale: 1 1; } }
@keyframes desdePunto { from { clip-path: inset(-20% 0 -20% 100%); filter: blur(8px); translate: .35em 0; } to { clip-path: inset(-20% 0 -20% 0); filter: blur(0); translate: 0 0; } }
@keyframes barrido { from { clip-path: inset(-20% 100% -20% 0); filter: blur(8px); translate: -.35em 0; } to { clip-path: inset(-20% 0 -20% 0); filter: blur(0); translate: 0 0; } }
@keyframes barre { 0% { opacity: 0; translate: -120% 0; } 8% { opacity: 1; } 28% { opacity: 0; translate: 480% 0; } 100% { opacity: 0; translate: 480% 0; } }
/* en la intro, el nombre grande sustituye al de la cabecera */
.marca { transition: opacity .5s var(--ease), translate .5s var(--ease); }
.en-inicio .marca { opacity: 0; translate: 0 -8px; pointer-events: none; }

/* el titular y sus espacios se miden también por la altura: en laptops bajas la frase cabe completa bajo la cabecera */
.hero__titulo {
  font-size: clamp(2.4rem, min(7.6vw, 10.5vh), 6rem); font-stretch: 125%; font-weight: 800;
  line-height: .94; letter-spacing: -.035em;
}
.hero__titulo span { display: block; }
.hero__sub { margin-top: clamp(14px, 3.4vh, 30px); max-width: 44ch; font-size: clamp(1.08rem, 1.45vw, 1.32rem); line-height: 1.5; color: var(--tinta-hero); }
.hero__acciones { display: flex; flex-wrap: wrap; gap: 14px 18px; margin-top: clamp(18px, 4.4vh, 38px); }
.hero__lema { margin-top: clamp(16px, 4.4vh, 44px); }

/* el oficio */
/* dos columnas: la frase a la izquierda y el párrafo a la derecha, alineado con su base.
   La frase se mide también por la altura de la pantalla: en laptops bajas el bloque cabe completo. */
.oficio {
  min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: end; align-content: center;
  column-gap: clamp(40px, 5vw, 96px);
  padding-block: calc(var(--cab-h) + 24px) calc(var(--linea-h) + 24px);
}
.oficio__frase {
  max-width: 21ch;
  font-size: clamp(1.9rem, min(3.6vw, 6.8vh), 3.4rem); font-stretch: 112%; font-weight: 600;
  line-height: 1.08; letter-spacing: -.02em; text-wrap: balance;
}
.oficio__frase .p { display: inline-block; }
.oficio__texto { max-width: 46ch; padding-bottom: .35em; color: var(--tinta-2); font-size: clamp(1.02rem, 1.15vw, 1.12rem); }

/* servicios: la lista de tomas */
.acto + .acto { margin-top: clamp(80px, 13vh, 150px); }
.acto__cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; }
.acto__titulo {
  font-size: clamp(1.75rem, 3.4vw, 2.8rem); font-stretch: 118%; font-weight: 750; line-height: 1.05; letter-spacing: -.02em;
}
.acto__num { font-weight: 400; }
.acto__lema { color: var(--tinta-2); font-size: 1.05rem; }
.tomas { margin-top: 26px; border-top: 1px solid var(--linea); }
.toma {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) auto; align-items: center;
  gap: 12px clamp(18px, 3.2vw, 52px);
  padding: 26px 0;
  border-bottom: 1px solid var(--linea);
}
/* rollover: el renglón se llena de cyan de izquierda a derecha y la letra pasa a oscura */
.toma::before {
  content: ""; position: absolute; inset: 0 calc(-1 * clamp(10px, 1.4vw, 22px)); z-index: -1; border-radius: 6px;
  background: var(--cian); transform: scaleX(0); transform-origin: left center;
  transition: transform .55s var(--ease);
}
.toma__nombre, .toma__desc { transition: color .3s; }
@media (hover: hover) {
  .toma:hover::before { transform: scaleX(1); }
  .toma:hover .toma__nombre, .toma:hover .toma__desc { color: var(--cian-osc); text-shadow: none; }
  .toma:hover .toma__add { border-color: var(--cian-osc); color: var(--cian-osc); text-shadow: none; }
  .toma:hover .toma__add:hover { background: var(--cian-osc); color: var(--cian); }
  .toma:hover .toma__add[aria-pressed="true"] { background: var(--cian-osc); border-color: var(--cian-osc); color: var(--cian); }
}
.toma__nombre {
  font-size: clamp(1.3rem, 2.3vw, 2rem); font-stretch: 115%; font-weight: 650; line-height: 1.12; letter-spacing: -.012em;
  transition: color .3s;
}
.toma__desc { max-width: 50ch; color: var(--tinta-2); font-size: 1rem; line-height: 1.55; }
.toma__add {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 46px; padding: 0 18px 0 14px;
  border: 1px solid var(--linea-fuerte); border-radius: 4px; background: transparent;
  font-weight: 600; font-size: .92rem; letter-spacing: .02em; text-shadow: none; white-space: nowrap;
  cursor: pointer; transition: background-color .25s, color .25s, border-color .25s;
}
.toma__add svg { width: 18px; height: 18px; }
.toma__add:hover { border-color: var(--cian); color: var(--cian); }
.toma__add[aria-pressed="true"] { background: var(--cian); border-color: var(--cian); color: var(--cian-osc); }
.toma.is-elegida .toma__nombre { color: var(--cian); }
/* servicios premium: el rosa de la marca */
.acto__rosa { color: var(--rosa); }
.acto--premium .toma::before { background: var(--rosa-fondo); }
@media (hover: none) {
  .toma.is-centro::before { transform: scaleX(1); }
  .toma.is-centro .toma__nombre, .toma.is-centro .toma__desc { color: var(--cian-osc); text-shadow: none; }
  .toma.is-centro .toma__add { border-color: var(--cian-osc); color: var(--cian-osc); text-shadow: none; }
  .toma.is-centro .toma__add[aria-pressed="true"] { background: var(--cian-osc); border-color: var(--cian-osc); color: var(--cian); }
}
.acto--premium .toma__add:hover { border-color: var(--rosa); color: var(--rosa-claro); }
.acto--premium .toma__add[aria-pressed="true"] { background: var(--rosa); border-color: var(--rosa); color: var(--rosa-osc); }
.acto--premium .toma.is-elegida .toma__nombre { color: var(--rosa-claro); }
.acto--premium .toma__add:focus-visible { outline-color: var(--rosa); }
/* renglón premium encendido (rollover en PC, centro de pantalla en celular): rosa profundo con letra
   blanca, también cuando el servicio ya está agregado (antes quedaba rosa sobre rosa) */
@media (hover: hover) {
  .acto--premium .toma:hover .toma__nombre, .acto--premium .toma:hover .toma__desc { color: #fff; text-shadow: none; }
  .acto--premium .toma:hover .toma__add { border-color: rgba(255, 255, 255, .85); color: #fff; }
  .acto--premium .toma:hover .toma__add:hover, .acto--premium .toma:hover .toma__add[aria-pressed="true"] { background: #fff; border-color: #fff; color: var(--rosa-fondo); }
}
@media (hover: none) {
  .acto--premium .toma.is-centro .toma__nombre, .acto--premium .toma.is-centro .toma__desc { color: #fff; text-shadow: none; }
  .acto--premium .toma.is-centro .toma__add { border-color: rgba(255, 255, 255, .85); color: #fff; }
  .acto--premium .toma.is-centro .toma__add[aria-pressed="true"] { background: #fff; border-color: #fff; color: var(--rosa-fondo); }
}

/* proyectos: la cartelera */
.estrenos { display: grid; gap: clamp(72px, 12vh, 120px); }
.estreno {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: end;
  gap: clamp(24px, 3.6vw, 56px);
}
.estreno__pantalla { position: relative; display: block; border-radius: 8px; }
.estreno__pantalla img {
  width: 100%; height: auto; border-radius: 8px;
  box-shadow:
    0 0 0 1px rgba(242, 241, 236, .1),
    0 60px 120px -40px color-mix(in srgb, var(--luz) 60%, transparent);
  transition: scale .6s var(--ease);
}
.estreno__pantalla::after {
  content: ""; position: absolute; left: 8%; right: 8%; top: 100%; height: 38%;
  background: radial-gradient(ellipse at 50% 0, color-mix(in srgb, var(--luz) 34%, transparent), transparent 70%);
  filter: blur(14px); pointer-events: none;
}
.estreno__pantalla:hover img { scale: 1.015; }
.estreno__ficha h3 { font-size: clamp(1.55rem, 2.6vw, 2.3rem); font-stretch: 115%; font-weight: 750; line-height: 1.05; letter-spacing: -.02em; }
.estreno__ficha p { margin-top: 14px; color: var(--tinta-2); font-size: 1rem; line-height: 1.55; }
.estreno__ficha .estreno__creditos { margin-top: 18px; font-size: 1rem; letter-spacing: .14em; color: var(--tinta); }
.estreno__ir {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 20px;
  color: var(--hielo); font-weight: 600; overflow-wrap: anywhere;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
  transition: color .25s;
}
.estreno__ir svg { width: 18px; height: 18px; flex: none; }
.estreno__ir:hover { color: var(--tinta); }
.cartelera__conteo { display: none; }

/* galería horizontal anclada (PC): la sección se queda fija y, al bajar, los proyectos pasan en fila
   de derecha a izquierda; el del centro queda nítido con su nombre grande, los demás en penumbra */
.cartelera.galeria {
  height: calc(100vh + (var(--n) - 1) * 80vh + 40vh); height: calc(100svh + (var(--n) - 1) * 80vh + 40vh);
  /* de orilla a orilla de la ventana (sin la barra de scroll), aunque la sección tenga márgenes */
  width: calc(100vw - var(--sb, 0px)); margin-left: calc(50% - (100vw - var(--sb, 0px)) / 2);
}
.galeria .cartelera__escenario {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--cab-h) + 8px) 0 calc(var(--linea-h) + 34px);
}
.galeria .estrenos {
  --tarjeta: min(56vw, calc((100vh - 300px) * 1.9), 980px);
  display: flex; align-items: flex-start; gap: 7vw; width: max-content;
  will-change: transform;
}
.galeria .estreno {
  display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 2.6vh, 28px);
  width: var(--tarjeta); flex: none; transform-origin: 50% 40%; will-change: transform, opacity;
}
.galeria .estreno__pantalla { width: 100%; aspect-ratio: 1200 / 630; overflow: hidden; border-radius: 10px; }
.galeria .estreno__pantalla img { width: 100%; height: 100%; object-fit: cover; scale: 1.08; transition: none; }
.galeria .estreno__pantalla::after { display: none; }
.galeria .estreno__pantalla { box-shadow: 0 0 0 1px rgba(242, 241, 236, .1), 0 60px 120px -40px color-mix(in srgb, var(--luz) 60%, transparent); }
.galeria .estreno__ficha { text-align: center; }
.galeria .estreno__ficha h3 { font-size: clamp(1.8rem, min(3.2vw, 6vh), 3.4rem); font-stretch: 125%; font-weight: 800; letter-spacing: -.03em; }
.galeria .estreno__ficha .estreno__creditos { margin-top: clamp(8px, 1.4vh, 14px); }
.galeria .estreno__ficha .estreno__ir { margin-top: clamp(8px, 1.6vh, 16px); }
.galeria .estreno:not(.is-activo) { cursor: pointer; }
/* el nombre del proyecto al frente, enorme y en contorno, detrás de la fila */
.galeria__fondo {
  position: absolute; z-index: -1; left: 0; right: 0; top: 50%; translate: 0 -62%;
  text-align: center; white-space: nowrap; pointer-events: none;
  font-size: 13vw; font-stretch: 125%; font-weight: 800; line-height: 1; letter-spacing: -.04em; text-transform: uppercase;
  color: transparent; -webkit-text-stroke: 1px rgba(242, 241, 236, .1); text-shadow: none;
  transition: opacity .45s var(--ease), translate .6s var(--ease);
}
.galeria__fondo.cambia { opacity: 0; translate: 0 -54%; }
.galeria .cartelera__escenario { isolation: isolate; }
.galeria__avance {
  position: absolute; left: max(var(--g), calc((100% - var(--ancho)) / 2)); right: max(var(--g), calc((100% - var(--ancho)) / 2)); bottom: calc(var(--linea-h) + 18px);
  height: 2px; background: var(--linea);
}
.galeria__avance span { position: absolute; inset: 0; background: var(--cian); transform-origin: left center; transform: scaleX(0); }
.galeria .cartelera__conteo {
  display: block; position: absolute; top: calc(var(--cab-h) + 14px); right: max(var(--g), calc((100% - var(--ancho)) / 2));
  font: 500 .74rem/1 var(--f-mono); letter-spacing: .08em; color: var(--tinta-2); font-variant-numeric: tabular-nums;
}
.galeria .cartelera__conteo #conteo { color: var(--cian); }

/* herramientas */
.herramientas { padding-block: clamp(70px, 12vh, 140px); }
.titulo-chico { text-align: center; font-size: clamp(1.05rem, 1.5vw, 1.3rem); font-weight: 600; color: var(--tinta-2); margin-bottom: 44px; }
.cinta {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.cinta__pista { --hueco: clamp(44px, 6vw, 92px); display: flex; align-items: center; gap: var(--hueco); width: max-content; animation: desfile 52s linear infinite; }
.cinta:hover .cinta__pista { animation-play-state: paused; }
.cinta__pista img { height: clamp(22px, 2.3vw, 30px); width: auto; opacity: .72; transition: opacity .3s; }
.cinta__pista li:hover img { opacity: 1; }
@keyframes desfile { to { translate: calc(-50% - var(--hueco) / 2) 0; } }

/* "¿Quieres aprender?": franja rosa a todo lo ancho con letra negra (la pidió el usuario); "Me interesa"
   agrega la capacitación a la cotización igual que los botones Agregar */
.aprende {
  position: relative; z-index: 1;
  background: var(--rosa); color: #05060a;
  padding: clamp(64px, 11vh, 128px) max(var(--g), calc((100% - var(--ancho)) / 2));
}
.aprende h2, .aprende p { text-shadow: none; }
.aprende__caja { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: end; gap: clamp(28px, 5vw, 88px); }
.aprende__titulo { font-size: clamp(2.8rem, min(7.2vw, 13vh), 7rem); font-stretch: 125%; font-weight: 800; line-height: .92; letter-spacing: -.04em; text-wrap: balance; }
.aprende__texto { font-size: clamp(1.12rem, 1.45vw, 1.4rem); line-height: 1.5; font-weight: 550; max-width: 42ch; }
.aprende__cta { margin-top: clamp(20px, 3.4vh, 34px); min-height: 58px; padding: 0 30px; font-size: 1.05rem; }
.btn--negro { background: #05060a; color: #fff; --marco: #05060a; }
.btn--negro:hover { background: #24252e; }
.btn--negro[aria-pressed="true"] { background: #fff; color: #05060a; }

/* cotizar */
.cotiza { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(44px, 6vw, 100px); align-items: start; }
.cotiza__intro { position: sticky; top: calc(var(--cab-h) + 40px); }
.cotiza__intro p { margin-top: 24px; max-width: 44ch; color: var(--tinta-2); font-size: clamp(1.05rem, 1.3vw, 1.18rem); }
.cotiza__directo { display: grid; gap: 14px; margin-top: 36px; }
.cotiza__directo a { display: inline-flex; align-items: center; gap: 12px; font-weight: 600; text-decoration: none; transition: color .25s; }
.cotiza__directo a:hover { color: var(--cian); }
.cotiza__directo svg { width: 22px; height: 22px; color: var(--cian); }

.hoja {
  --pad: clamp(20px, 3vw, 40px);
  position: relative;
  padding: 0 var(--pad) var(--pad);
  border: 1px solid rgba(242, 241, 236, .12); border-radius: 14px;
  background: rgba(10, 12, 19, .95);
  box-shadow: 0 50px 120px -40px rgba(0, 0, 0, .85);
  overflow: hidden;
  text-shadow: none;
}
.hoja__datos {
  display: grid; grid-template-columns: 1.5fr .6fr 1fr;
  margin: 0 calc(-1 * var(--pad)) 30px;
  border-bottom: 1px solid var(--linea);
  background: rgba(242, 241, 236, .035);
}
.hoja__datos span {
  padding: 18px var(--pad) 16px; border-right: 1px solid var(--linea);
  font-stretch: 75%; font-weight: 650; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .04em;
}
.hoja__datos span:last-child { border-right: 0; }
.hoja__datos small { display: block; margin-bottom: 4px; font: 600 .66rem/1 var(--f-texto); font-stretch: 70%; letter-spacing: .14em; color: var(--tinta-2); }
.hoja__datos b { font-weight: inherit; font-variant-numeric: tabular-nums; }

.campo { margin: 0 0 20px; }
.campo > label, .campo legend {
  display: block; margin-bottom: 8px; padding: 0;
  font-weight: 650; font-size: .8rem; font-stretch: 90%; letter-spacing: .09em; text-transform: uppercase; color: var(--tinta-2);
}
.campo small { margin-left: 6px; font-weight: 400; letter-spacing: .02em; text-transform: none; color: var(--tinta-3); font-size: .82rem; }
.campo input {
  width: 100%; min-height: 54px; padding: 0 16px;
  border: 1px solid rgba(242, 241, 236, .22); border-radius: 8px;
  background: var(--vacio);
  font-size: 1.0625rem;
  transition: border-color .25s, box-shadow .25s;
}
.campo input::placeholder { color: var(--placeholder); }
.campo input:hover { border-color: rgba(242, 241, 236, .38); }
.campo input:focus-visible { outline: none; border-color: var(--cian); box-shadow: 0 0 0 3px rgba(0, 242, 255, .22); }
.campo.is-error input { border-color: var(--error); }
.campo__error { margin-top: 8px; color: var(--error); font-size: .92rem; line-height: 1.4; }
.campo__error:empty { display: none; }
.campo--servicios { border: 0; padding: 0; margin: 0 0 26px; min-width: 0; }
.opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.opciones label { position: relative; display: inline-flex; }
.opciones input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.opciones span {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 14px;
  border: 1px solid rgba(242, 241, 236, .22); border-radius: 4px;
  font-size: .94rem; font-weight: 500;
  transition: background-color .2s, border-color .2s, color .2s;
}
.opciones svg { width: 16px; height: 16px; display: none; }
.opciones label:hover span { border-color: var(--cian); }
.opciones input:checked + span { background: var(--cian); border-color: var(--cian); color: var(--cian-osc); font-weight: 600; }
.opciones .op--premium:hover span { border-color: var(--rosa); }
.opciones .op--premium input:checked + span { background: var(--rosa); border-color: var(--rosa); color: var(--rosa-osc); }
.opciones input:checked + span svg { display: block; }
.opciones input:focus-visible + span { outline: 2px solid var(--cian); outline-offset: 2px; }
.campo--servicios.is-error .opciones span { border-color: rgba(255, 156, 128, .55); }
.hoja__nota { margin-top: 14px; text-align: center; color: var(--tinta-3); font-size: .9rem; }
.hoja__listo {
  margin-top: 14px; padding: 12px 14px; border-radius: 8px; text-align: center;
  background: rgba(0, 242, 255, .08); border: 1px solid rgba(0, 242, 255, .35); color: var(--tinta); font-size: .95rem;
}
.hoja__listo a { color: var(--cian); text-underline-offset: 4px; }

/* créditos finales */
.creditos {
  min-height: 100vh; min-height: 100svh;
  display: grid; align-content: center; text-align: center;
  padding: clamp(120px, 20vh, 220px) var(--g) calc(var(--linea-h) + 70px);
}
.creditos__marca {
  margin: 20px auto 64px;
  font-family: var(--f-marca); font-weight: 700; line-height: 1.05; letter-spacing: .02em;
  font-size: clamp(1.4rem, 4.35vw, 4.7rem); white-space: nowrap;
}
.creditos__marca span { color: var(--cian); }
.creditos__lista { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px clamp(32px, 6vw, 96px); }
.creditos__lista dt { font-stretch: 62%; font-weight: 600; font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--tinta-2); }
.creditos__lista dd { margin-top: 8px; font-weight: 600; font-size: 1.05rem; color: var(--tinta-2); }
.creditos__lista a { color: var(--tinta); text-decoration: none; transition: color .25s; }
.creditos__lista a:hover { color: var(--cian); }
.creditos__legal { margin-top: 72px; color: var(--tinta-2); font-size: .86rem; }

/* barra de la lista */
.lista {
  position: fixed; z-index: 60; left: 50%; bottom: calc(var(--linea-h) + 14px); translate: -50% 0;
  display: flex; align-items: center; gap: 18px;
  padding: 8px 8px 8px 20px; border-radius: 10px;
  background: rgba(12, 14, 22, .95); border: 1px solid rgba(242, 241, 236, .14);
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .8);
  transition: opacity .4s, translate .4s var(--ease), visibility .4s;
}
.lista[hidden] { display: flex; opacity: 0; translate: -50% 30px; pointer-events: none; visibility: hidden; }
.lista__texto { white-space: nowrap; font-size: .98rem; }
.lista__texto strong { color: var(--cian); font: 600 1.05rem/1 var(--f-mono); margin-right: 4px; }

/* WhatsApp flotante */
.flotante {
  position: fixed; z-index: 55; right: max(var(--g), 30px); bottom: calc(var(--linea-h) + 16px);
  display: grid; place-items: center; width: 54px; height: 54px; border-radius: 14px;
  background: var(--cian); color: var(--cian-osc);
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .8);
  transition: opacity .35s, translate .35s var(--ease), background-color .3s;
}
.flotante svg { width: 28px; height: 28px; }
.flotante:hover { background: var(--cian-claro); }
.con-lista .flotante, .con-cotiza .flotante, .en-inicio .flotante, .en-servicios .flotante { opacity: 0; translate: 0 20px; pointer-events: none; }

/* ---------- arranque de las animaciones (solo con .m) ---------- */
.m [data-entra], .m [data-mo] > *, .m .toma, .m .cartelera:not(.galeria) .estreno { opacity: 0; }
/* apertura y visor con CSS: no esperan a que llegue Motion desde el CDN */
.m .entra { animation: enfoque 1.25s var(--ease) var(--d, 0s) both; }
.m .visor__esq { animation: visor 1.3s var(--ease) .1s both; }
.m .visor__esq--ad { animation-delay: .17s; }
.m .visor__esq--bi { animation-delay: .24s; }
.m .visor__esq--bd { animation-delay: .31s; }
@keyframes enfoque { from { opacity: 0; filter: blur(16px); translate: 0 24px; } to { opacity: 1; filter: blur(0); translate: 0 0; } }
@keyframes visor { from { opacity: 0; scale: 1.9; } to { opacity: 1; scale: 1; } }
.m .oficio__frase .p { opacity: .16; filter: blur(9px); }

/* ---------- pantallas ---------- */
@media (max-width: 1100px) {
  .linea__riel a { font-size: 0; padding: 0; }
  .linea__riel a::before { top: calc(50% - 6px); }
}
@media (max-width: 900px) {
  .toma { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nombre add" "desc desc"; padding: 22px 0; }
  .toma__nombre { grid-area: nombre; }
  .toma__desc { grid-area: desc; }
  .toma__add { grid-area: add; }
  .estreno { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .estreno__ficha { max-width: 640px; }
  .cotiza { grid-template-columns: minmax(0, 1fr); }
  .cotiza__intro { position: static; }
  .oficio { grid-template-columns: minmax(0, 1fr); align-items: start; min-height: 0; padding-block: clamp(80px, 12vh, 130px); }
  .oficio__texto { margin-top: clamp(36px, 6vh, 64px); max-width: 56ch; padding-bottom: 0; }
}
@media (max-width: 760px) {
  :root { --cab-h: 62px; --linea-h: 42px; }
  .visor__esq { width: 20px; height: 20px; }
  .visor__esq--ai, .visor__esq--ad { top: 8px; }
  .visor__esq--ai, .visor__esq--bi { left: 8px; }
  .visor__esq--ad, .visor__esq--bd { right: 8px; }
  .visor__esq--bi, .visor__esq--bd { bottom: 8px; }
  .cabecera { padding-inline: 30px 26px; }
  .linea { left: 30px; right: 30px; gap: 12px; }
  .linea__tc { min-width: 7.5ch; }
  .linea__tc { font-size: .66rem; }
  /* celular: menos aire entre secciones (las capturas del usuario mostraban huecos grandes) */
  .escena { padding-block: clamp(60px, 9vh, 88px); }
  .oficio { padding-block: clamp(60px, 9vh, 88px); }
  .herramientas { padding-block: 48px; }
  .seccion-cab { margin-bottom: 36px; }
  .acto + .acto { margin-top: 60px; }
  .estrenos { gap: 56px; }
  .creditos { min-height: 0; padding: 88px var(--g) calc(var(--linea-h) + 56px); }
  .creditos__marca { margin-bottom: 44px; }
  .creditos__legal { margin-top: 48px; }
  .nombre { font-size: min(9.4vw, 2.8rem); }
  .hero__acciones .btn { flex: 1 1 auto; }
  /* textos de lectura un poco más grandes en celular (los pidió el usuario) */
  .oficio__texto, .seccion-cab p { font-size: 1.15rem; }
  /* "Estrategia · Tecnología · Video IA" siempre en una línea: crece con el ancho hasta el 1.5rem de escritorio */
  .hero__lema { white-space: nowrap; font-size: min(1.5rem, 5.4vw); }
  /* logos de herramientas más grandes: se ve uno y medio a la vez; el desfile va más lento para no correr */
  .cinta__pista { --hueco: 56px; animation-duration: 95s; }
  .cinta__pista img { height: 44px; }
  .aprende__caja { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .aprende__titulo { font-size: clamp(2.6rem, 12.5vw, 4.2rem); }
  .aprende__cta { width: 100%; }
  .lista { left: 16px; right: 16px; translate: 0 0; justify-content: space-between; gap: 10px; padding-left: 14px; }
  .lista[hidden] { translate: 0 30px; }
  .lista__texto { white-space: normal; font-size: .9rem; line-height: 1.3; }
  .flotante { width: 50px; height: 50px; right: 20px; }
  .hoja__datos { grid-template-columns: 1.3fr .6fr 1.1fr; }
  .hoja__datos span { padding-inline: 14px; font-size: .95rem; }
  .creditos__marca { white-space: normal; font-size: clamp(1.6rem, 8.6vw, 3rem); }
  .creditos__marca span { display: block; }
}
/* celulares bajos (360×640, 375×667, 320×568) y acostados (844×390): la frase de la intro va fija al fondo de una pantalla del alto
   de la ventana; con el titular de tres líneas no cabía y se salía por arriba, debajo de la cabecera. Aquí todo
   se mide por la altura; los textos y el lema a 1.5rem son los mismos */
@media (max-height: 700px) and (max-width: 760px), (max-height: 500px) {
  .intro.pin .intro__frase { padding-top: calc(var(--cab-h) + 10px); padding-bottom: calc(var(--linea-h) + 22px); }
  .hero__titulo { font-size: clamp(1.8rem, min(10.6vw, 6.6vh), 2.4rem); }
  .hero__sub { margin-top: 2vh; font-size: clamp(.9rem, 2.7vh, 1.05rem); line-height: 1.45; }
  .hero__acciones { gap: 10px; margin-top: 2.6vh; }
  .hero__acciones .btn { min-height: min(46px, 7.4vh); }
  .hero__lema { margin-top: 2.4vh; }
}
/* celulares de 400 px o menos: con el contador el botón de la cabecera se salía por la derecha; la cuenta
   ya la muestran la barra de abajo (desde Servicios) y la hoja de cotización */
@media (max-width: 400px) {
  .cabecera__cta .contador { display: none; }
}
/* celulares angostos (320 px): la marca y el botón de la cabecera no cabían juntos y Cotizar se cortaba a la derecha */
@media (max-width: 359px) {
  .cabecera { gap: 10px; }
  .marca { font-size: .56rem; }
  .cabecera__cta { padding-inline: 12px; }
}
/* acostado y muy bajo (740×360): solo se aprietan los espacios */
@media (max-height: 420px) {
  .intro.pin .intro__frase { padding-bottom: calc(var(--linea-h) + 12px); }
  .hero__sub { margin-top: 1.4vh; }
  .hero__acciones { margin-top: 2vh; }
  .hero__lema { margin-top: 1.6vh; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .cinta { -webkit-mask-image: none; mask-image: none; }
  .cinta__pista { flex-wrap: wrap; justify-content: center; width: auto; gap: 32px 48px; }
  .cinta__pista li[aria-hidden="true"] { display: none; }
}