/* ============================================================
   Diego Morales · landing
   Montserrat en todo: bold en titulares, normal en el resto.
   Dos acentos heredados: ambar de Albacetea, fucsia de fluentIA.
   Se usan como detalle, nunca como fondo ni como relleno.
   Ver ~/.claude/skills/diego-morales-brand
   ============================================================ */

@font-face{
  font-family:'Montserrat';
  src:url('../assets/fonts/montserrat-latin.woff2') format('woff2-variations');
  font-weight:300 800; font-style:normal; font-display:swap;
}
/* Syne se queda solo para el logotipo de Albacetea: es marca del programa,
   no tipografia de esta pagina */
@font-face{
  font-family:'Syne';
  src:url('../assets/fonts/syne-latin.woff2') format('woff2-variations');
  font-weight:400 800; font-style:normal; font-display:swap;
}

:root{
  --ink:#0A0A0B; --paper:#F5F5F3; --smoke:#8A8A90;
  --paper-rgb:245,245,243;
  /* los dos acentos: ambar del programa, fucsia de la empresa */
  --ambar:#E8A33D; --fucsia:#d4145a;
  /* el fucsia de marca sobre negro se queda en 3,81 y suspende AA.
     Para texto se usa esta version aclarada, que da 5,64 */
  --fucsia-texto:#ef4a84;
  --font-display:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* cuatro tamanos y ya; los minimos estan calculados para 360px */
  --step-display:clamp(2.75rem, 1.30rem + 6.45vw, 7.5rem);
  --step-section:clamp(1.75rem, 1.36rem + 1.74vw, 2.75rem);
  --step-body:clamp(1rem, 0.96rem + 0.19vw, 1.125rem);
  --step-caption:clamp(0.9375rem, 0.92rem + 0.11vw, 1rem);
  /* Montserrat es mas ancha que Syne: necesita algo mas de apretado
     y algo mas de aire entre lineas para que las mayusculas no choquen */
  --display-tracking:-0.022em; --display-leading:0.98;
  --measure:38ch;
  --margen:clamp(20px, 5vw, 72px);
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{background:var(--ink); scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  background:var(--ink); color:var(--paper);
  font-family:var(--font-body); font-size:var(--step-body); font-weight:400; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,video,canvas,iframe{display:block;max-width:100%}
a{color:inherit}
em{font-style:italic}

:focus-visible{outline:2px solid var(--paper); outline-offset:4px; border-radius:2px}
:focus:not(:focus-visible){outline:none}

/* ---------- fondo ---------- */
/* dos halos muy tenues para que el negro no sea plano: ambar arriba a la
   izquierda, fucsia abajo a la derecha. Van detras de todo y no se tocan */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:1; transition:opacity 1.2s ease;
  background:
    radial-gradient(900px 700px at 12% 8%,  rgba(232,163,61,.085), transparent 60%),
    radial-gradient(820px 720px at 88% 92%, rgba(212,20,90,.075), transparent 62%);
}
/* tras los estrenos el canvas baja al 18% y con el se van las estelas: los
   halos suben para que la segunda mitad no vuelva al negro plano */
body.tras-union::before{
  background:
    radial-gradient(1000px 780px at 10% 6%,  rgba(232,163,61,.14), transparent 62%),
    radial-gradient(900px 800px at 90% 94%, rgba(212,20,90,.12), transparent 64%);
}
#fondo{
  position:fixed; inset:0; width:100%; height:100%; z-index:0;
  pointer-events:none; opacity:1; transition:opacity 1.2s ease;
}
body.tras-union #fondo{opacity:.18}
main,footer{position:relative; z-index:1}

/* ---------- cabecera ---------- */
.cabecera{
  position:fixed; top:0; left:0; right:0; z-index:5;
  display:flex; justify-content:space-between; align-items:center;
  padding:22px var(--margen);
  padding-top:max(22px, env(safe-area-inset-top));
  /* blanco sobre negro, y negro cuando pasa por encima de una web clara */
  mix-blend-mode:difference;
}
.cabecera .marca img{height:26px; width:auto}
.cabecera .enlace{font-size:14px}

/* ---------- tipografia ---------- */
.display{
  font-family:var(--font-display); font-weight:700;
  font-size:var(--step-display); line-height:var(--display-leading);
  letter-spacing:var(--display-tracking); max-width:11ch;
}
.seccion{
  font-family:var(--font-display); font-weight:700;
  font-size:var(--step-section); line-height:1.02; letter-spacing:-0.01em;
}
.capitulo{
  font-weight:500; font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--smoke); margin-bottom:1.1rem;
}
.bajada{margin-top:2.4rem; max-width:var(--measure); color:rgba(var(--paper-rgb),.82)}
.texto{max-width:var(--measure); color:rgba(var(--paper-rgb),.82); margin-top:1.4rem}
.enlace{
  display:inline-block; text-decoration:none; font-weight:500;
  border-bottom:1px solid rgba(var(--paper-rgb),.45); padding-bottom:2px;
  transition:border-color .25s;
}
.enlace:hover{border-color:var(--paper)}
.enlace::after{content:" \2192"; font-weight:400}

/* ---------- beats de la historia ---------- */
.beat{
  min-height:100dvh; display:grid; align-items:center;
  padding:18vh var(--margen);
}
.cuadro{width:100%; max-width:1180px; margin:0 auto}
@media(min-width:900px){
  .beat.derecha .cuadro{padding-left:42%}
  .beat.union .cuadro{padding-left:14%}
}
.beat .seccion{max-width:16ch}
.manifiesto span{display:block}
.manifiesto span + span{margin-top:.35em}

/* revelado: aparece al entrar, una sola vez */
.cuadro > *, .creditos > *{
  opacity:0; transform:translateY(16px);
  transition:opacity .8s ease, transform .9s var(--ease);
}
.visto .cuadro > *, .visto .creditos > *{opacity:1; transform:none}
.visto .cuadro > :nth-child(2), .visto .creditos > :nth-child(2){transition-delay:.08s}
.visto .cuadro > :nth-child(3), .visto .creditos > :nth-child(3){transition-delay:.16s}
.visto .cuadro > :nth-child(4), .visto .creditos > :nth-child(4){transition-delay:.24s}
.visto .cuadro > :nth-child(5), .visto .creditos > :nth-child(5){transition-delay:.32s}
.visto .cuadro > :nth-child(6), .visto .creditos > :nth-child(6){transition-delay:.40s}

/* ---------- los estrenos ---------- */
.estrenos{padding:6vh var(--margen) 0}
.estrenos .cabeza{max-width:1180px; margin:0 auto 4vh}
.caso{
  min-height:100dvh; max-width:1180px; margin:0 auto;
  display:grid; gap:clamp(28px, 4vw, 64px); align-content:center;
  padding:10vh 0 6vh;
}
@media(min-width:1000px){
  .caso{grid-template-columns:minmax(0,1.55fr) minmax(280px,.85fr); align-items:center}
  .caso:nth-child(odd){grid-template-columns:minmax(280px,.85fr) minmax(0,1.55fr)}
  .caso:nth-child(odd) .sala{order:2}
  .caso:nth-child(odd) .cartel{transform:rotateY(9deg) rotateX(2deg)}
  .caso:nth-child(odd).centrado .cartel{transform:rotateY(5deg) rotateX(1deg)}
}

/* la sala oscura: el cartel de estreno en perspectiva. La foto del cliente
   y su nombre; al pasar el raton, un zoom leve y el boton; al pulsar, la
   web real. */
.sala{perspective:1600px; perspective-origin:50% 50%}
.cartel{
  position:relative; display:block; width:100%; aspect-ratio:16/10; overflow:hidden;
  background:#000; color:var(--paper); text-decoration:none; border-radius:4px;
  border:1px solid rgba(var(--paper-rgb),.12);
  box-shadow:0 70px 120px -40px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.14);
  transform:rotateY(-9deg) rotateX(2deg); transform-style:preserve-3d;
  transition:transform 1s var(--ease); will-change:transform;
}
.caso.centrado .cartel{transform:rotateY(-5deg) rotateX(1deg)}
.cartel__foto, .cartel__foto img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top;
}
.cartel__foto img{transition:transform 1.4s var(--ease), opacity .7s ease}
.cartel:hover .cartel__foto img{transform:scale(1.04)}
/* el degradado que sostiene el nombre */
.cartel::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:linear-gradient(180deg, rgba(10,10,11,.08) 30%, rgba(10,10,11,.9) 100%);
  transition:opacity .7s;
}
/* el texto, la etiqueta y el boton van por encima del degradado, no debajo */
.cartel__texto, .cartel__abrir{z-index:2}
.cartel__texto{
  position:absolute; left:28px; right:28px; bottom:26px; display:grid; gap:10px;
  transition:opacity .45s ease, transform .7s var(--ease);
}
.cartel__cat{font-weight:500; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:rgba(var(--paper-rgb),.72)}
.cartel__nombre{
  font-family:var(--font-display); font-weight:700; line-height:.95; letter-spacing:-.02em;
  font-size:clamp(2rem, 1.3rem + 3.2vw, 4.6rem); text-shadow:0 8px 34px rgba(0,0,0,.55);
}
.cartel__abrir{
  /* arriba a la derecha: el nombre va abajo a la izquierda y nunca se pisan */
  position:absolute; right:20px; top:18px; padding:13px 16px; border-radius:2px;
  background:var(--paper); color:var(--ink); font-weight:600; font-size:13px;
  opacity:0; transform:translateY(6px); transition:opacity .4s, transform .5s var(--ease);
}
.cartel__abrir::after{content:" \2192"}
.cartel:hover .cartel__abrir, .cartel:focus-visible .cartel__abrir{opacity:1; transform:none}

.creditos .seccion{margin-bottom:.3em}
.creditos .rol{color:rgba(var(--paper-rgb),.85)}
.creditos .ficha{
  font-weight:500; font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--smoke); margin:1.3rem 0 .9rem;
}
.creditos .que{max-width:32ch; color:rgba(var(--paper-rgb),.78); margin-bottom:1.6rem}
.creditos .nota{font-size:13px; color:var(--smoke); margin-top:1.6rem}
.creditos .nota .tocar{display:none}
@media(max-width:999px){
  /* aire arriba: la cabecera es fija y no debe montarse sobre el cartel */
  .caso{padding-top:calc(84px + 4vh); min-height:auto}
  .cartel{
    aspect-ratio:9/16; max-height:70dvh; width:min(100%, 420px); margin:0 auto;
    transform:rotateY(-4deg) rotateX(1deg);
  }
  .caso.centrado .cartel{transform:none}
  .cartel__texto{left:22px; right:22px; bottom:22px}
  .creditos .nota .raton{display:none}
  .creditos .nota .tocar{display:inline}
}

/* ---------- albacetea ---------- */
.albacetea{position:relative; overflow:hidden}
/* foco de sala en ambar: aqui si, es la zona del programa */
.albacetea::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(640px 900px at 72% 28%, rgba(232,163,61,.10), transparent 62%);
}
/* el nombre del programa conserva su Syne original */
.albacetea .lockup .nombre{font-family:'Syne',var(--font-display); font-weight:800; color:var(--ambar)}
.albacetea .enlace{color:var(--ambar); border-bottom-color:rgba(232,163,61,.5)}
.albacetea .enlace:hover{border-bottom-color:var(--ambar)}
.lockup{
  display:flex; align-items:center; gap:.9em; margin-bottom:2.2rem;
  font-family:var(--font-display); font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  font-size:clamp(1rem, .9rem + .7vw, 1.4rem);
}
.lockup .by{font-family:var(--font-body); font-weight:400; letter-spacing:0; text-transform:none; color:var(--smoke); font-size:.8em}
.lockup img{height:2.1em; width:auto}
.albacetea .enlace{margin-top:1.8rem}

/* ---------- quien ---------- */
.quien{padding:16vh var(--margen)}
.cuadro.dos{display:grid; gap:clamp(28px,5vw,80px); align-items:start}
@media(min-width:900px){.cuadro.dos{grid-template-columns:minmax(240px,.7fr) minmax(0,1.3fr)}}
.retrato{
  width:100%; max-width:380px; aspect-ratio:4/5; object-fit:cover; object-position:top;
  filter:grayscale(1) contrast(1.05); border-radius:4px;
  border:1px solid rgba(var(--paper-rgb),.1);
}
.historia .seccion{max-width:14ch}
.cierre{
  margin-top:2.4rem; font-family:var(--font-display); font-weight:700;
  font-size:var(--step-caption); line-height:1.4; letter-spacing:.01em;
}

/* ---------- hablemos ---------- */
.hablemos{min-height:80dvh; display:grid; align-items:center; padding:14vh var(--margen)}
.hablemos .grande{
  display:inline-block; font-family:var(--font-display); font-weight:700;
  font-size:var(--step-display); line-height:var(--display-leading);
  letter-spacing:var(--display-tracking); text-decoration:none; max-width:12ch;
  border-bottom:3px solid transparent; transition:border-color .35s;
}
.hablemos .grande:hover{border-color:var(--paper)}
.hablemos .alt{margin-top:2.4rem; color:var(--smoke)}

/* ---------- pie ---------- */
.pie{
  padding:12vh var(--margen) max(5vh, env(safe-area-inset-bottom));
  border-top:1px solid rgba(var(--paper-rgb),.08);
}
.pie__arriba{
  display:grid; grid-template-columns:1fr; gap:44px 32px;
  max-width:1180px; margin:0 auto;
}
@media(min-width:800px){.pie__arriba{grid-template-columns:1.7fr 1fr 1fr 1fr}}
.pie__marca img{height:44px; width:auto}
.pie__marca p{margin-top:20px; color:var(--smoke); max-width:30ch; font-size:var(--step-caption)}
.pie__col{display:grid; gap:11px; align-content:start; justify-items:start}
.pie__col .capitulo{margin-bottom:4px}
.pie__col a{
  text-decoration:none; color:rgba(var(--paper-rgb),.85); line-height:1.3;
  border-bottom:1px solid transparent; transition:border-color .2s;
}
.pie__col a:hover{border-color:var(--paper)}
.pie__abajo{
  max-width:1180px; margin:8vh auto 0; padding-top:24px;
  border-top:1px solid rgba(var(--paper-rgb),.08);
}
.legal{font-size:12px; color:var(--smoke)}
.capitulos.oculto{opacity:0; pointer-events:none}
.capitulos{transition:opacity .4s}

/* ---------- pagina legal ---------- */
.legal-pag{max-width:70ch; margin:0 auto; padding:calc(96px + 6vh) var(--margen) 12vh}
.legal-pag h1{font-family:var(--font-display); font-weight:700; font-size:var(--step-section); line-height:1.05; margin-bottom:.4em}
.legal-pag h2{font-family:var(--font-display); font-weight:700; font-size:1.35rem; line-height:1.15; margin:3.2rem 0 1rem; scroll-margin-top:110px}
.legal-pag h3{font-weight:600; font-size:var(--step-body); margin:1.6rem 0 .4rem}
.legal-pag p, .legal-pag li{color:rgba(var(--paper-rgb),.82); margin-top:.6rem}
.legal-pag ul{padding-left:1.2em}
.legal-pag .fecha{color:var(--smoke); font-size:var(--step-caption)}

/* ---------- apertura: titular por palabras, CTA, hechos, desliza ---------- */
.beat.abre{position:relative}
.display .palabra{
  display:inline-block; opacity:0; transform:translateY(.4em);
  transition:opacity .7s ease, transform 1s var(--ease);
  transition-delay:calc(var(--i) * 75ms + .15s);
}
.visto .display .palabra{opacity:1; transform:none}
.acciones{display:flex; align-items:center; gap:30px; flex-wrap:wrap; margin-top:2.2rem}
.boton{
  display:inline-block; background:var(--paper); color:var(--ink);
  font-family:inherit; font-weight:600; font-size:15px; letter-spacing:.01em;
  padding:17px 28px; border:0; border-radius:2px; text-decoration:none; cursor:pointer;
  transition:background .2s, transform .12s;
}
.boton:hover{background:#fff}
.boton:active{transform:translateY(1px) scale(.99)}
.boton:disabled{opacity:.5; cursor:default}
.hechos{list-style:none; display:flex; flex-wrap:wrap; gap:10px 0; margin-top:2.8rem; color:var(--smoke); font-size:14px}
.hechos li{display:flex; align-items:center}
.hechos li + li::before{
  content:""; display:inline-block; width:1px; height:12px; margin:0 20px;
  background:rgba(var(--paper-rgb),.25);
}
/* en movil no caben en fila: en columna y sin separadores partidos */
@media(max-width:699px){
  .hechos{flex-direction:column; gap:8px}
  .hechos li + li::before{display:none}
}
.desliza{
  position:absolute; left:50%; bottom:max(26px, env(safe-area-inset-bottom));
  width:1px; height:64px; overflow:hidden; opacity:.55; transition:opacity .5s;
}
.desliza span{
  display:block; width:100%; height:100%;
  background:linear-gradient(180deg, transparent, var(--paper));
  animation:desliza 1.9s var(--ease) infinite;
}
@keyframes desliza{0%{transform:translateY(-100%)} 55%,100%{transform:translateY(100%)}}
.desliza.oculto{opacity:0}

/* ---------- cinta cinetica ---------- */
.cinta{
  overflow:hidden; padding:20px 0; margin:2vh 0 4vh;
  border-top:1px solid rgba(var(--paper-rgb),.08); border-bottom:1px solid rgba(var(--paper-rgb),.08);
}
.cinta__pista{
  display:flex; width:max-content; white-space:nowrap;
  font-family:var(--font-display); font-weight:700; font-size:var(--step-section); letter-spacing:-.01em;
  animation:cinta 42s linear infinite;
}
.cinta__pista span{padding:0 .55em}
.cinta__pista span::after{content:"\00b7"; margin-left:1.1em; color:var(--smoke)}
@keyframes cinta{to{transform:translateX(-50%)}}

/* ---------- contador de capitulo ---------- */
.capitulos{
  position:fixed; left:var(--margen); bottom:max(22px, env(safe-area-inset-bottom)); z-index:4;
  display:flex; align-items:baseline; gap:10px;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--smoke);
  mix-blend-mode:difference;
}
.capitulos .num{font-family:var(--font-display); font-weight:700; font-size:15px; letter-spacing:0; color:var(--paper)}
.capitulos .tot{letter-spacing:.06em}
.capitulos .tot::before{content:"/ "}
.capitulos .nom{margin-left:6px; transition:opacity .2s, transform .2s}
.capitulos.cambia .nom{opacity:0; transform:translateY(4px)}
@media(max-width:699px){.capitulos{display:none}}

/* ---------- linterna ---------- */
.linterna{
  position:fixed; left:0; top:0; width:920px; height:920px; margin:-460px 0 0 -460px;
  border-radius:50%; pointer-events:none; z-index:0; opacity:0; will-change:transform;
  background:radial-gradient(circle, rgba(var(--paper-rgb),.075) 0%, rgba(var(--paper-rgb),.02) 35%, rgba(var(--paper-rgb),0) 62%);
  transition:opacity .9s ease;
}
.linterna.viva{opacity:1}

/* ---------- contacto ---------- */
.contacto{padding:16vh var(--margen) 14vh}
.contacto .cuadro.dos{align-items:start}
@media(min-width:900px){.contacto .cuadro.dos{grid-template-columns:minmax(0,1fr) minmax(320px,.9fr)}}
.charla .seccion{max-width:14ch}
.charla .grande{
  display:inline-block; margin-top:2.4rem;
  font-family:var(--font-display); font-weight:700; font-size:var(--step-section); line-height:1.05;
  text-decoration:none; border-bottom:3px solid transparent; transition:border-color .3s; max-width:14ch;
}
.charla .grande:hover{border-color:var(--paper)}
.formulario{display:grid; gap:26px; position:relative}
.formulario label{
  display:grid; gap:8px; font-weight:500; font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--smoke);
}
.formulario input, .formulario select, .formulario textarea{
  font:inherit; font-size:16px; font-weight:400; color:var(--paper);
  background:transparent; border:0; border-bottom:1px solid rgba(var(--paper-rgb),.28);
  border-radius:0; padding:10px 0; letter-spacing:0; text-transform:none;
  transition:border-color .25s;
}
.formulario textarea{resize:vertical; min-height:96px}
.formulario select{
  appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:28px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' fill='none' stroke='%23F5F5F3' stroke-width='1.5'/></svg>");
  background-repeat:no-repeat; background-position:right 4px center;
}
.formulario select option{color:var(--ink); background:var(--paper)}
.formulario :is(input,select,textarea):focus{border-color:var(--paper)}
.formulario label.falta :is(input,select,textarea){border-color:var(--paper)}
.formulario label.falta::after{content:"Esto hace falta."; font-size:12px; letter-spacing:0; text-transform:none; color:var(--paper)}
/* consentimiento: casilla propia, cuadrada, sin color */
/* con .formulario delante: si no, gana el 11px de ".formulario label" y el
   texto legal queda ilegible en movil */
.formulario .consentimiento{font-size:14px}
.consentimiento{
  display:grid !important; grid-template-columns:20px 1fr; gap:12px; align-items:start;
  font-size:14px; letter-spacing:0 !important; text-transform:none !important;
  color:rgba(var(--paper-rgb),.82); cursor:pointer;
}
.consentimiento input{position:absolute; opacity:0; width:1px; height:1px}
.consentimiento .caja{
  width:20px; height:20px; margin-top:2px; border:1px solid rgba(var(--paper-rgb),.45); border-radius:2px;
  display:grid; place-items:center; transition:border-color .2s, background .2s;
}
.consentimiento .caja::after{
  content:""; width:10px; height:10px; background:var(--paper); border-radius:1px;
  transform:scale(0); transition:transform .18s var(--ease);
}
.consentimiento input:checked + .caja{border-color:var(--paper)}
.consentimiento input:checked + .caja::after{transform:scale(1)}
.consentimiento input:focus-visible + .caja{outline:2px solid var(--paper); outline-offset:3px}
.consentimiento.falta .caja{border-color:var(--paper); box-shadow:0 0 0 1px var(--paper)}
/* la casilla no lleva el aviso generico: el estado ya dice que falta aceptar */
.formulario .consentimiento.falta::after{content:none}
.formulario .capa{font-size:12px; line-height:1.55; color:var(--smoke); margin-top:4px; max-width:60ch}
.formulario .capa b{font-weight:600; color:rgba(var(--paper-rgb),.7)}
.formulario .envio{display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-top:6px}
.formulario .estado{font-size:14px; color:var(--smoke); min-height:1.4em; margin:0}
.miel{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.recibido{font-family:var(--font-display); font-weight:700; font-size:var(--step-section); line-height:1.05}

/* ---------- los dos acentos, como detalle ---------- */
/* el contador de capitulo y la cinta: ambar, el hilo del programa */
.capitulos .num{color:var(--ambar)}
.cinta__pista span::after{color:var(--ambar)}
/* el boton de entrar en la web: fucsia, el hilo de la empresa que las construye */
.cartel__abrir{background:var(--fucsia); color:#fff}
.cartel__abrir:hover{background:#e8256c}
/* el subrayado del titular de contacto y el numero de whatsapp */
.charla .grande:hover{border-color:var(--fucsia)}
.hablemos .grande:hover{border-color:var(--fucsia)}
/* la firma de fluentIA en el pie */
.pie__abajo .marca-fluentia{color:var(--fucsia-texto); font-weight:600}
/* el foco sigue siendo blanco: accesibilidad por encima del adorno */

/* ---------- paquetes ---------- */
.paquetes{padding:14vh var(--margen) 10vh}
.paquetes .cuadro{max-width:1180px}
.paquetes .cabeza{margin-bottom:1.2rem}
.paquetes .entrada{max-width:var(--measure); color:rgba(var(--paper-rgb),.82); margin:1.4rem 0 clamp(36px,5vw,64px)}
.rejilla{display:grid; gap:clamp(20px,2.4vw,28px)}
@media(min-width:900px){.rejilla{grid-template-columns:repeat(3,1fr); align-items:stretch}}
/* las tres tarjetas entran una detras de otra, no como un bloque */
.paquetes .rejilla .paquete{
  opacity:0; transform:translateY(16px);
  transition:opacity .7s ease, transform .8s var(--ease), border-color .3s;
}
.paquetes.visto .rejilla .paquete{opacity:1; transform:none}
.paquetes.visto .rejilla .paquete:hover{transform:translateY(-4px)}
.paquetes.visto .rejilla .paquete:nth-child(2){transition-delay:.1s}
.paquetes.visto .rejilla .paquete:nth-child(3){transition-delay:.2s}
.paquete{
  display:flex; flex-direction:column; padding:clamp(28px,3vw,38px);
  border:1px solid rgba(var(--paper-rgb),.14); border-radius:4px;
  background:rgba(var(--paper-rgb),.02); transition:border-color .3s, transform .4s var(--ease);
}
.paquete:hover{border-color:rgba(var(--paper-rgb),.3); transform:translateY(-4px)}
/* el del medio es el recomendado: se marca con ambar, no con fondo de color */
.paquete.destaca{border-color:rgba(232,163,61,.55)}
.paquete.destaca:hover{border-color:var(--ambar)}
.paquete__sello{
  align-self:flex-start; margin-bottom:1.4rem; padding:6px 12px; border-radius:2px;
  background:var(--ambar); color:var(--ink);
  font-weight:700; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
}
.paquete__nombre{
  font-family:var(--font-display); font-weight:700; line-height:1.1; letter-spacing:-.02em;
  font-size:clamp(1.5rem,1.2rem + 1.1vw,2rem); margin-bottom:.6rem;
}
.paquete__que{color:rgba(var(--paper-rgb),.78); font-size:var(--step-caption); margin-bottom:1.8rem}
.paquete__precio{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
.paquete__cifra{
  font-family:var(--font-display); font-weight:700; letter-spacing:-.03em; line-height:1;
  font-size:clamp(2.6rem,2rem + 2.6vw,3.6rem);
}
.paquete__iva{font-size:var(--step-caption); color:var(--smoke)}
.paquete__mant{
  margin-top:.9rem; padding-top:.9rem; border-top:1px solid rgba(var(--paper-rgb),.1);
  font-size:var(--step-caption); color:rgba(var(--paper-rgb),.82);
}
.paquete__mant b{font-weight:700; color:var(--paper)}
.paquete__perm{display:inline-block; margin-top:4px; font-size:13px; color:var(--smoke)}
.paquete__lista{list-style:none; margin:1.8rem 0 2.4rem; display:grid; gap:11px; font-size:var(--step-caption)}
.paquete__lista li{display:grid; grid-template-columns:18px 1fr; gap:10px; color:rgba(var(--paper-rgb),.82)}
/* la marca de verificado, en ambar; no es un emoji, es un pseudo-elemento */
.paquete__lista li::before{
  content:"\2713"; color:var(--ambar); font-weight:700; line-height:1.5;
}
.paquete .boton{margin-top:auto; text-align:center}
.paquetes .pie-nota{margin-top:clamp(28px,3vw,40px); font-size:var(--step-caption); color:var(--smoke); max-width:60ch}

/* ---------- tactil: zonas de 44px sin mover nada ----------
   Los enlaces de texto miden 22-28px de alto. Un pseudo-elemento invisible
   amplia el area de pulsacion por arriba y por abajo sin cambiar el layout. */
.enlace, .pie__col a{position:relative}
.enlace::before, .pie__col a::before{content:""; position:absolute; left:0; right:0; top:-12px; bottom:-12px}
/* los enlaces dentro de un parrafo no: le robarian el toque a la casilla */
.consentimiento .enlace::before, .capa .enlace::before, .estado .enlace::before{content:none}
.cabecera .marca{display:inline-block; padding:9px; margin:-9px}
@media(hover:none){
  /* en el pie los enlaces van apilados: con 11px de hueco las areas ampliadas
     se pisan y gana el de abajo. A 24px cada uno tiene sus 44px limpios */
  .pie__col{gap:24px}
  /* el enlace grande de WhatsApp solo se subrayaba con :hover, y en tactil no
     hay hover: se le deja un subrayado tenue fijo para que se vea que es un enlace */
  .charla .grande{border-bottom-color:rgba(var(--paper-rgb),.35)}
}

/* ---------- movimiento reducido: primer frame, y ya ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none !important; animation:none !important}
  .cuadro > *, .creditos > *, .display .palabra{opacity:1; transform:none}
  .cartel, .caso.centrado .cartel{transform:none}
  .desliza, .linterna{display:none}
}