/* Retrahtos · sitio.css · un solo archivo, cinco capas. Contrato: tema/CONTRATO_CONSTRUCCION.md · design-system/retrahtos/{estilos,MASTER,movimiento}.md */
@layer tokens, base, componentes, pestañas, utilidades;

/* ============================================================ tokens */
@layer tokens {
  @font-face{font-family:"Big Shoulders Display";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/big-shoulders-display.woff2") format("woff2")}
  @font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/instrument-sans.woff2") format("woff2")}
  @font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/ibm-plex-mono.woff2") format("woff2")}

  :root{
    color-scheme:dark;
    /* tokens reales del sitio (medidos; no se cambian sin otra fotografía) */
    --canvas:#060403;--panel:#12100c;--panel-2:#171410;--line:#241f18;
    --text-primary:#eadcba;--text-secondary:#a89372;--text-dim:#8a7d6c;
    --accent:#ff0710;--gold:#ff0710;--gold-hot:#ff4a3d;--dato:#00a62c;--ink-on-accent:#140303;
    --r:2px;--gutter:clamp(20px,5vw,72px);
    --ease-out:cubic-bezier(.16,1,.3,1);--ease-io:cubic-bezier(.65,0,.35,1);
    --display:"Big Shoulders Display",Impact,"Arial Narrow",sans-serif;
    --body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
    --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
    /* alias semánticos (estilos.md §2) */
    --background:var(--canvas);--foreground:var(--text-primary);--card:var(--panel);--card-hi:var(--panel-2);
    --border:var(--line);--input:var(--line);--muted-foreground:var(--text-secondary);--dim-foreground:var(--text-dim);
    --primary:var(--accent);--primary-hover:var(--gold-hot);--primary-foreground:var(--ink-on-accent);
    --success:var(--dato);--destructive:var(--accent);--ring:var(--accent);--radius:var(--r);
    --space-1:8px;--space-2:16px;--space-3:24px;--space-4:40px;--space-5:64px;--space-6:96px;
    --control:44px;--nav-h:72px;
    /* movimiento (movimiento.md §2) */
    --dur-1:150ms;--dur-2:300ms;--dur-3:600ms;
    --ease-in:cubic-bezier(.7,0,.84,0);
    --ease-spring:linear(0,.006,.025 2.8%,.101 6.1%,.539 18.9%,.721 25.3%,.849 31.5%,.937 38.1%,.968 41.8%,.99 45.5%,1.004 49.2%,1.009 53%,1.006 57.7%,1.001 63%,.999 70.2%,1);
    --salto:12px;
    /* héroe */
    --tshadow:0 1px 2px rgba(6,4,3,.95),0 3px 12px rgba(6,4,3,.78),0 10px 44px rgba(6,4,3,.8);
  }
}

/* ============================================================ base */
@layer base {
  *,*::before,*::after{box-sizing:border-box}
  html{overflow-x:hidden;overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:var(--nav-h);-webkit-text-size-adjust:100%;background:var(--background)}
  body{margin:0;overflow-x:hidden;overflow-x:clip;background:var(--background);color:var(--foreground);font-family:var(--body);font-size:17px;line-height:1.6;font-weight:400;-webkit-font-smoothing:antialiased}
  img,video,svg{max-width:100%;height:auto;display:block}
  h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1;margin:0;text-wrap:balance;letter-spacing:.005em;text-transform:uppercase}
  h1{font-size:clamp(2.6rem,5.2vw,5.6rem)}
  h2{font-size:clamp(2rem,3.6vw,3.8rem)}
  h3{font-size:clamp(1.35rem,2vw,1.9rem)}
  h4{font-family:var(--body);font-weight:600;font-size:1.05rem;margin:0}
  p{margin:0 0 var(--space-2)}
  a{color:var(--primary);text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px}
  a:hover{color:var(--primary-hover)}
  a,button,[role="button"],summary,label{touch-action:manipulation}
  a,button,[role="button"],summary{cursor:pointer}
  :focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:var(--radius)}
  :focus:not(:focus-visible){outline:none}
  ::selection{background:var(--primary);color:var(--primary-foreground)}
  .skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--card);color:var(--foreground);padding:10px 14px;border:1px solid var(--primary)}
  .skip:focus{left:8px}
  main{display:block}
  table{border-collapse:collapse;width:100%}
  fieldset{border:0;margin:0;padding:0;min-width:0}
  legend{padding:0}
  strong{font-weight:600;color:var(--foreground)}
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  }
}

/* ============================================================ componentes */
@layer componentes {
  .wrap{width:min(100% - 2*var(--gutter),1240px);margin-inline:auto}
  .wrap-texto{width:min(100% - 2*var(--gutter),760px)}

  /* --- nav --- */
  .cabecera{position:relative;z-index:50}
  .nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:var(--space-2);min-height:var(--nav-h);padding:0 var(--gutter);background:linear-gradient(to bottom,rgba(6,4,3,.92),rgba(6,4,3,.6) 70%,rgba(6,4,3,0));backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
  .marca{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:var(--foreground);font-family:var(--display);font-weight:700;font-size:1.35rem;letter-spacing:.06em;min-height:var(--control)}
  .marca-rubi{width:8px;height:8px;background:var(--primary);display:inline-block;margin-top:4px}
  .nav-lista{list-style:none;margin:0 0 0 auto;padding:0;display:flex;align-items:center;gap:4px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;max-width:100%}
  .nav-lista::-webkit-scrollbar{display:none}
  .nav-lista li{flex:0 0 auto;scroll-snap-align:start}
  .nav a[data-tab]{position:relative;display:inline-flex;align-items:center;min-height:var(--control);padding:0 12px;color:var(--muted-foreground);text-decoration:none;font-size:15px;font-weight:600;white-space:nowrap;transition:color var(--dur-1) var(--ease-out)}
  .nav a[data-tab]::after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:2px;background:var(--primary);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-2) var(--ease-out)}
  .nav a[data-tab]:hover{color:var(--foreground)}
  .nav a[aria-current="page"]{color:var(--foreground)}
  .nav a[aria-current="page"]::after{transform:scaleX(1)}
  .nav a.acceso{margin-left:var(--space-2);border:1px solid var(--border);border-radius:var(--radius);padding:0 14px;color:var(--foreground)}
  .nav a.acceso:hover{border-color:var(--primary)}
  @media (max-width:720px){
    .nav{padding:0 var(--space-2);gap:8px}
    .marca{font-size:1.15rem}
    .nav a[data-tab]{padding:0 9px;font-size:14px}
    .nav a.acceso{margin-left:4px;padding:0 10px}
  }

  /* --- botones --- */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--control);padding:0 20px;border-radius:var(--radius);border:1px solid var(--primary);background:var(--primary);color:var(--primary-foreground);font-family:var(--body);font-weight:600;font-size:15px;line-height:1;text-decoration:none;text-shadow:none;transition:background var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out)}
  .btn:hover{background:var(--primary-hover);border-color:var(--primary-hover);color:var(--primary-foreground)}
  .btn:active{transform:scale(.985)}
  .btn.line{background:transparent;color:var(--foreground)}
  .btn.line:hover{background:rgba(255,7,16,.08);color:var(--foreground)}
  .btn.ghost{background:transparent;border-color:transparent;color:var(--foreground);text-decoration:underline;text-decoration-color:var(--primary);text-underline-offset:.2em;padding-inline:0}
  .btn.ghost:hover{color:var(--foreground);background:transparent}
  .btn.small{min-height:36px;padding:0 14px;font-size:14px}
  .btn[disabled],.btn[aria-busy="true"]{opacity:.5;cursor:progress;pointer-events:none}
  .btn[aria-busy="true"]::before{content:"";width:12px;height:12px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:rh-gira 1s linear infinite}
  @keyframes rh-gira{to{transform:rotate(360deg)}}
  @media (max-width:720px){.btn.small{min-height:var(--control)}.f .btn{width:100%}}

  /* --- texto de apoyo --- */
  .eyebrow,.kicker{font-family:var(--mono);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-foreground);margin:0 0 14px;font-weight:600}
  .kicker.verde{color:var(--success)}
  .lede{font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:var(--muted-foreground);max-width:54ch}
  .nota{font-size:14px;color:var(--muted-foreground);max-width:58ch}
  .fuente{font-family:var(--mono);font-size:13px;letter-spacing:.02em;color:var(--dim-foreground);margin-top:var(--space-2)}
  .cred-num{font-family:var(--display);font-weight:700;font-size:clamp(2.4rem,5vw,5rem);line-height:1;color:var(--success);font-variant-numeric:tabular-nums}
  .cred-num small{display:block;font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:var(--muted-foreground);margin-top:6px;text-transform:none;font-weight:400}

  /* --- tarjetas y planes --- */
  .card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-3)}
  .card.hi{background:var(--card-hi);border-color:var(--primary)}
  .plans{display:grid;gap:var(--space-2);grid-template-columns:1fr;align-items:stretch}
  .plan{display:flex;flex-direction:column;gap:14px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-3)}
  .plan.hi{background:var(--card-hi);border-color:var(--primary)}
  .plan h3{font-size:clamp(1.6rem,2.4vw,2.2rem)}
  .plan .price{font-family:var(--display);font-weight:700;font-size:clamp(2rem,3vw,2.8rem);line-height:1;font-variant-numeric:tabular-nums}
  .plan .price small{font-family:var(--mono);font-size:13px;color:var(--muted-foreground);font-weight:400;letter-spacing:.02em}
  .plan .condiciones{font-size:15px;color:var(--muted-foreground)}
  .plan ul{margin:0;padding-left:18px;color:var(--foreground);font-size:15px;line-height:1.5}
  .plan li{margin:0 0 6px}
  .plan .btn{margin-top:auto;align-self:flex-start}
  @media (min-width:1024px){.plans{grid-template-columns:repeat(3,1fr);gap:var(--space-3)}}

  /* --- cifras --- */
  .tiles{display:grid;gap:var(--space-2);grid-template-columns:1fr}
  .tile{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-2) var(--space-3);margin:0}
  .tile dt,.tile .etiqueta{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-foreground)}
  .tile dd,.tile .cifra{margin:6px 0 0;font-family:var(--display);font-weight:700;font-size:clamp(1.9rem,3vw,2.8rem);line-height:1;color:var(--success);font-variant-numeric:tabular-nums}
  .tile .atrib{display:block;font-size:14px;color:var(--muted-foreground);margin-top:8px;font-family:var(--body)}
  @media (min-width:721px){.tiles{grid-template-columns:repeat(2,1fr)}}
  @media (min-width:1024px){.tiles.tres{grid-template-columns:repeat(3,1fr)}.tiles.cuatro{grid-template-columns:repeat(4,1fr)}}

  /* --- motivos --- */
  .motivos{display:grid;gap:var(--space-2);grid-template-columns:1fr}
  .motivo{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-3);display:flex;flex-direction:column;gap:10px}
  .motivo .cifra{font-family:var(--display);font-weight:700;font-size:clamp(2.2rem,3.6vw,3.4rem);line-height:1;color:var(--success);font-variant-numeric:tabular-nums}
  .motivo p{margin:0;font-size:15px}
  @media (min-width:1024px){.motivos{grid-template-columns:repeat(3,1fr)}}

  /* --- chips (radios grandes) --- */
  .chips{display:flex;flex-wrap:wrap;gap:var(--space-1)}
  .chip{position:relative}
  .chip input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .chip label{display:inline-flex;align-items:center;min-height:48px;padding:0 16px;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);color:var(--muted-foreground);font-size:15px;font-weight:600;cursor:pointer;transition:border-color var(--dur-2) var(--ease-spring),color var(--dur-1) var(--ease-out),transform var(--dur-2) var(--ease-spring)}
  .chip input:checked+label{border-color:var(--primary);color:var(--foreground);transform:scale(1.02)}
  .chip input:focus-visible+label{outline:2px solid var(--ring);outline-offset:2px}
  .chip label small{font-family:var(--mono);font-size:12px;color:var(--dim-foreground);margin-left:8px}

  /* --- formulario --- */
  .f{display:flex;flex-direction:column;gap:6px;margin:0 0 14px}
  .f label{font-size:15px;font-weight:600;color:var(--foreground)}
  .f label .req{color:var(--primary);margin-left:2px}
  .f input,.f textarea,.f select{width:100%;min-height:var(--control);border:1px solid var(--input);background:var(--card);color:var(--foreground);padding:10px 14px;font:inherit;font-size:16px;border-radius:var(--radius);transition:border-color var(--dur-1) var(--ease-out)}
  .f textarea{resize:vertical;min-height:110px}
  .f input:hover,.f textarea:hover{border-color:var(--dim-foreground)}
  .f input[aria-invalid="true"],.f textarea[aria-invalid="true"],.f select[aria-invalid="true"]{border-color:var(--destructive)}
  .f .ayuda{font-size:14px;color:var(--muted-foreground);margin:0}
  .f .error{font-size:14px;color:var(--destructive);margin:0;min-height:0}
  .f .error:empty{display:none}
  .form-legend{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-foreground);margin:var(--space-3) 0 var(--space-2);display:block}
  .obligatorio{font-size:14px;color:var(--dim-foreground)}
  .form-acciones{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:var(--space-3)}
  @media (max-width:720px){.f input,.f textarea,.f select{min-height:48px}.form-acciones .btn{width:100%}}

  /* --- aviso --- */
  .aviso{display:flex;gap:14px;align-items:flex-start;background:var(--card);border:1px solid var(--border);border-left:2px solid var(--success);border-radius:var(--radius);padding:var(--space-2) var(--space-3);margin:0 0 var(--space-3);transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}
  .aviso.error{border-left-color:var(--destructive)}
  .aviso p{margin:0 0 10px}
  .aviso p:last-child{margin:0}
  .aviso-icono{flex:0 0 18px;width:18px;height:18px;border-radius:50%;background:var(--success);margin-top:4px}
  .aviso.error .aviso-icono{background:var(--destructive)}
  .aviso-nota{font-size:14px;color:var(--muted-foreground);margin:6px 0 0}
  @starting-style{.aviso{opacity:0;transform:translateY(8px)}}

  /* --- progreso --- */
  .progreso{height:6px;background:var(--border);border-radius:3px;overflow:hidden;margin:10px 0}
  .progreso span{display:block;height:100%;background:var(--success);inline-size:0;transition:inline-size var(--dur-2) var(--ease-out)}

  /* --- tablas --- */
  .scroll-x{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;border:1px solid var(--border);border-radius:var(--radius);background:var(--card)}
  .tabla{font-variant-numeric:tabular-nums;font-size:15px}
  .tabla caption{caption-side:top;text-align:left;padding:14px 18px 6px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--muted-foreground)}
  .tabla th,.tabla td{padding:12px 18px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
  .tabla th{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-foreground);font-weight:600;white-space:nowrap}
  .tabla td.num,.tabla th.num{text-align:right;white-space:nowrap}
  .tabla td.gana{color:var(--success);font-weight:600}
  .tabla tbody tr:last-child td{border-bottom:0}
  .estado-punto{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--muted-foreground);margin-right:8px;vertical-align:middle}
  .estado-punto.pagada{background:var(--success)}
  .estado-punto.pendiente{background:var(--muted-foreground)}

  /* --- faq --- */
  .faq{border-top:1px solid var(--border)}
  .faq:last-of-type{border-bottom:1px solid var(--border)}
  .faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);min-height:var(--control);padding:14px 0;font-weight:600;color:var(--foreground);cursor:pointer}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"";flex:0 0 10px;width:10px;height:10px;border-right:2px solid var(--primary);border-bottom:2px solid var(--primary);transform:rotate(45deg);transition:transform var(--dur-1) var(--ease-out);margin-right:4px}
  .faq[open] summary::after{transform:rotate(-135deg)}
  .faq .faq-cuerpo{padding:0 0 18px;color:var(--muted-foreground);max-width:50ch}

  /* --- figuras --- */
  .fig{margin:0;position:relative;background:var(--card);border-radius:var(--radius);overflow:hidden}
  .fig img{width:100%;height:100%;object-fit:cover}
  .fig figcaption{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--muted-foreground);padding:10px 0 0}
  .fig.glow{box-shadow:0 0 60px rgba(255,7,16,.12)}
  .galeria{display:grid;gap:var(--space-2);grid-template-columns:repeat(2,1fr)}
  .galeria .fig{aspect-ratio:2/3}
  @media (min-width:721px){.galeria{grid-template-columns:repeat(3,1fr)}}
  .tira{display:flex;gap:var(--space-2);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding-bottom:6px;scrollbar-width:thin}
  .tira .fig{flex:0 0 min(70vw,420px);aspect-ratio:3/2;scroll-snap-align:start}

  /* --- revelado --- */
  .rv .part{opacity:0;transform:translateY(var(--salto));transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out);transition-delay:calc(var(--i,0) * 90ms)}
  .rv.in .part{opacity:1;transform:none}
  .rv.in.listo .part{transition-delay:0s!important}

  /* --- héroe (25-oct-2026: una pantalla, imagen fija de Nano Banana con la sombra de la copa sobre la zona del texto; sin scrub ni vídeo) --- */
  .hero{position:relative;height:100vh;height:100svh;min-height:560px;margin:0;overflow:hidden;background:var(--background)}
  .hero-fondo,.hero-fondo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
  .hero-velo{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(6,4,3,.72),rgba(6,4,3,.28) 48%,rgba(6,4,3,0) 72%)}
  .hero-texto{position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(28px,7vh,72px);max-width:640px;text-shadow:var(--tshadow)}
  .hero-texto h1{max-width:14ch;margin:0}
  .hero-texto .eyebrow{margin-bottom:10px;color:var(--foreground)}
  .hero-texto .sub{margin-top:14px;max-width:44ch;color:var(--foreground);font-size:clamp(.95rem,1.15vw,1.1rem);line-height:1.5}
  .hero-texto .precios{margin-top:14px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-primary)}
  .hero-texto .prueba{margin-top:10px;max-width:56ch;font-size:14px;line-height:1.45;color:var(--muted-foreground)}
  .hero-texto .prueba strong{color:var(--success);font-weight:700}
  .hero-texto .row{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;align-items:center}
  .hero-texto .btn{text-shadow:none}
  .hero-texto .wa{margin:4px 0 0;font-size:14px}
  .hero-texto .wa a{display:inline-block;padding:12px 0}
  .hero-texto .wa a{color:var(--foreground);text-decoration:underline;text-underline-offset:3px}
  @media (max-height:640px){.hero-texto .prueba{display:none}}

  /* --- atmósferas (dos búferes fijos detrás del contenido) --- */
  .atm{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
  .atm-buf{position:absolute;inset:0;opacity:0;transition:opacity .9s var(--ease-out)}
  .atm-buf.activa{opacity:1}
  .atm img,.atm video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
  .atm video{opacity:0;transition:opacity 1.2s var(--ease-out)}
  .atm video.lista{opacity:1}
  .atm::after{content:"";position:absolute;inset:0;background:var(--background);opacity:var(--velo-activo,1);transition:opacity .9s var(--ease-out)}
  .atm.con-placa::after{opacity:var(--velo,.85)}
  .tab{position:relative;z-index:1}

  /* --- consentimiento --- */
  .consent{position:fixed;left:var(--space-2);right:var(--space-2);bottom:calc(var(--space-2) + env(safe-area-inset-bottom));z-index:60;max-width:560px;margin-inline:auto;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-2) var(--space-3);box-shadow:0 10px 40px rgba(6,4,3,.5)}
  .consent p{font-size:14px;color:var(--muted-foreground);margin:0 0 12px}
  .consent-botones{display:flex;gap:10px;flex-wrap:wrap}

  /* --- pie --- */
  .pie{position:relative;z-index:1;border-top:1px solid var(--border);padding:var(--space-5) 0 var(--space-4);background:var(--background)}
  .pie-marca{font-family:var(--mono);font-size:13px;letter-spacing:.08em;color:var(--muted-foreground)}
  .pie-marca .marca-texto{font-family:var(--display);font-size:1.1rem;letter-spacing:.08em;color:var(--foreground);margin-right:8px}
  .pie-enlaces{list-style:none;margin:var(--space-2) 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 22px}
  .pie-enlaces a{color:var(--muted-foreground);font-size:14px;text-decoration:none;display:inline-flex;align-items:center;min-height:var(--control)}
  .pie-enlaces a:hover{color:var(--foreground)}
  .pie-nota{font-size:14px;color:var(--dim-foreground);max-width:49ch}

  /* --- páginas sueltas --- */
  .pagina{padding:calc(var(--nav-h) + var(--space-5)) 0 var(--space-6)}
  .prosa h2{font-size:clamp(1.5rem,2.4vw,2.1rem);margin:var(--space-4) 0 var(--space-2)}
  .prosa p,.prosa li{color:var(--muted-foreground);max-width:68ch}
  .prosa strong{color:var(--foreground)}
  .prosa ul{padding-left:20px}
  .prosa .scroll-x{margin:var(--space-2) 0}
}

/* ============================================================ pestañas */
@layer pestañas {
  .tab{padding:var(--space-6) 0;scroll-margin-top:var(--nav-h)}
  .tab .wrap>.encabezado{max-width:72ch;margin-bottom:var(--space-4)}
  .tab h2+.lede{margin-top:var(--space-2)}
  .bloque{margin:var(--space-5) 0 0}
  .bloque:first-child{margin-top:0}
  .dos{display:grid;gap:var(--space-3);grid-template-columns:1fr;align-items:start}
  .dos>.fig{aspect-ratio:3/2}
  #quien.dos>.fig,#quien-inicio.dos>.fig{aspect-ratio:4/5}
  #quien.dos>.fig img,#quien-inicio.dos>.fig img{object-position:0 0}   /* 27-oct: la foto es 4:5 y en 3:2 el recorte centrado dejaba fuera la cara de Hazeem (izquierda arriba); se muestra entera, anclada arriba a la izquierda */
  @media (min-width:1024px){.dos{grid-template-columns:1.1fr .9fr;gap:var(--space-5)}.dos.inversa{grid-template-columns:.9fr 1.1fr}}
  #quien.dos,#quien-inicio.dos{grid-template-columns:minmax(0,1fr) 140px;gap:var(--space-3)}
  #quien.dos>.fig,#quien-inicio.dos>.fig{width:140px;max-width:140px;justify-self:end}
  @media (min-width:1024px){#quien.dos,#quien-inicio.dos{grid-template-columns:minmax(0,1fr) 200px;gap:var(--space-4)}#quien.dos>.fig,#quien-inicio.dos>.fig{width:200px;max-width:200px}}   /* 27-oct: Hazeem pide la foto pequeña: «todo el mundo ya sabe por qué llegó ahí» */
  .pasos{display:grid;gap:var(--space-2);grid-template-columns:1fr;counter-reset:paso}
  .paso{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-3);counter-increment:paso}
  .paso h3::before{content:counter(paso,decimal-leading-zero) " · ";color:var(--primary);font-family:var(--mono);font-size:.6em;letter-spacing:.1em;vertical-align:middle}
  @media (min-width:1024px){.pasos{grid-template-columns:repeat(3,1fr)}}
  .cta-final{margin-top:var(--space-4);display:flex;flex-wrap:wrap;gap:12px;align-items:center}
  .cita{margin:var(--space-2) 0;padding:0 0 0 var(--space-2);border-left:2px solid var(--primary);color:var(--foreground)}
  .cita p{font-size:clamp(17px,1.4vw,19px);line-height:1.55;margin:0 0 8px}
  .cita .fuente{margin-top:4px}
  .band-cred{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-foreground);margin:14px 0 0}
  .band1 .band-cred{color:var(--text-primary)}
  .riaa{list-style:none;margin:0 0 var(--space-2);padding:0}
  .riaa li{padding:10px 0;border-bottom:1px solid var(--border);font-size:15px}
  .motivos-lista{margin:0 0 var(--space-2);padding-left:0;list-style:none;counter-reset:m;max-width:72ch}
  .motivos-lista li{counter-increment:m;padding:12px 0;border-bottom:1px solid var(--border);font-size:16px;display:flex;gap:14px}
  .motivos-lista li::before{content:counter(m,decimal-leading-zero);font-family:var(--mono);color:var(--primary);letter-spacing:.1em;flex:0 0 2.2em}
  .reproductor video,.reproductor img{width:100%;height:auto;aspect-ratio:1280/694;object-fit:cover;background:var(--card)}
  .lista-top summary{font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-foreground)}
  .lista-top .faq-cuerpo{padding:0;max-width:none}
  .tile dd.rojo{color:var(--foreground)}
  .cuatro-pasos{grid-template-columns:1fr}
  @media (min-width:721px){.cuatro-pasos{grid-template-columns:repeat(2,1fr)}}
  @media (min-width:1024px){.cuatro-pasos{grid-template-columns:repeat(4,1fr)}}
  .plan .kicker{margin-bottom:0}
  .tab .tiles.part{margin-top:var(--space-3)}
  .encabezado .cta-final{margin-top:var(--space-3)}
  #inicio-salidas{padding-top:var(--space-5)}
  #inicio{padding:0}
  #inicio .bajo-heroe{padding:var(--space-5) 0 0}
  #reservar .form-grid{display:grid;gap:var(--space-4);grid-template-columns:1fr}
  @media (min-width:1024px){#reservar .form-grid{grid-template-columns:1.1fr .9fr}}
  #reservar .lateral{position:sticky;top:calc(var(--nav-h) + var(--space-2))}
  .contacto-lista{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:var(--space-2) 0 0;font-size:15px}
  .contacto-lista dt{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-foreground);padding-top:3px}
  .contacto-lista dd{margin:0}
  .cuatro{margin:0 0 var(--space-3);padding-left:0;list-style:none;counter-reset:q}
  .cuatro li{counter-increment:q;padding:10px 0;border-bottom:1px solid var(--border);font-size:15px}
  .cuatro li::before{content:counter(q) "  ";font-family:var(--mono);color:var(--primary);letter-spacing:.1em}
  .lead-form fieldset{margin:0 0 var(--space-2)}
  .lead-form .chips{margin-bottom:10px}

  #proyecto .portal{max-width:760px}
  #proyecto .fases{list-style:none;margin:var(--space-2) 0;padding:0;display:grid;gap:8px}
  #proyecto .fases li{display:flex;gap:12px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--border);font-size:15px}
  #proyecto .fases li .estado{margin-left:auto;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-foreground)}
  #proyecto .fases li.hecha .estado{color:var(--success)}
  #proyecto .fases li.actual{color:var(--foreground);font-weight:600}
}

/* ============================================================ utilidades */
@layer utilidades {
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .tabular{font-variant-numeric:tabular-nums}
  .balance{text-wrap:balance}
  .scroll-x{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .mono{font-family:var(--mono);font-size:13px;letter-spacing:.04em}
  .verde{color:var(--success)}
  .rojo{color:var(--primary)}
  .sin-margen{margin:0}
  @media (max-width:720px){.oculto-movil{display:none!important}}
  @media (min-width:721px){.solo-movil{display:none!important}}
}

/* ============================================================ GATES (idénticas en JS: RH.gates) */
@media (max-width:720px),(orientation:portrait) and (max-width:1024px),(orientation:portrait) and (pointer:coarse),(orientation:landscape) and (pointer:coarse) and (max-height:560px),(prefers-reduced-motion:reduce){
  .hero{min-height:560px}
  .hero-velo{background:linear-gradient(to top,rgba(6,4,3,.92),rgba(6,4,3,.78) 45%,rgba(6,4,3,.62) 68%,rgba(6,4,3,.2))}
  .hero-texto{bottom:24px;max-width:none}
  .hero-texto h1{font-size:clamp(2rem,9.5vw,3.4rem);max-width:12ch}
  .hero-texto .sub{font-size:15px;max-width:40ch}
  .hero-texto .precios{font-size:13px;letter-spacing:.1em}
  .hero-texto .prueba{font-size:14px}
  .hero-texto .row{flex-direction:column;align-items:stretch}
  .hero-texto .btn{width:100%;text-align:center}
  /* 27-oct: el fondo bajo el velo también en móvil (escenas fijas, no vídeo) */
}
@media (prefers-reduced-motion:reduce){
  .rv .part{transition:opacity 1ms;transform:none}
  .nav a[data-tab]::after,.aviso,.chip label,.faq summary::after,.progreso span{transition:none}
  .btn[aria-busy="true"]::before{animation:none}
}

/* ============================================================ añadidos 25-oct-2026 · versión client-friendly (placas 3D, videos, barra móvil) */
@layer componentes {
  /* --- placa de pestaña: escena 3D de Blender, no fotografía --- */
  .placa{margin:0;aspect-ratio:16/9;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--card)}
  .placa picture,.placa img{width:100%;height:100%;object-fit:cover;display:block}
  .placa figcaption{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-foreground);padding:8px 0 0}
  .encabezado.con-placa{display:grid;gap:var(--space-3);grid-template-columns:1fr;align-items:end}
  @media (min-width:1024px){.encabezado.con-placa{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--space-5)}}
  @media (max-width:720px){.encabezado.con-placa{grid-template-columns:1fr}.encabezado.con-placa .placa{order:-1;aspect-ratio:3/2;max-height:220px}}

  /* --- planes: cuatro líneas visibles y el resto plegado --- */
  .plan .para{margin:0;color:var(--muted-foreground);font-size:15px}
  .plan .incluye{margin:0;padding-left:18px;color:var(--foreground);font-size:15px;line-height:1.5}
  .plan .mas{border-top:1px solid var(--border);padding-top:6px}
  .plan .mas summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;min-height:var(--control);font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-foreground)}
  .plan .mas summary::-webkit-details-marker{display:none}
  .plan .mas summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--primary);border-bottom:2px solid var(--primary);transform:rotate(45deg);transition:transform var(--dur-1) var(--ease-out)}
  .plan .mas[open] summary::after{transform:rotate(-135deg)}
  .plan .mas ul{margin:0 0 8px;padding-left:18px;color:var(--muted-foreground);font-size:14px;line-height:1.5}

  /* --- videos publicados --- */
  .videos{list-style:none;margin:var(--space-3) 0 0;padding:0;display:grid;gap:var(--space-2);grid-template-columns:1fr}
  .video a{display:block;height:100%;text-decoration:none;color:var(--foreground);background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:border-color var(--dur-1) var(--ease-out),transform var(--dur-2) var(--ease-out)}
  .video a:hover{border-color:var(--primary);color:var(--foreground)}
  .video-img{position:relative;display:block;aspect-ratio:16/9;background:var(--card-hi);overflow:hidden}
  .video-img picture,.video-img img{width:100%;height:100%;object-fit:cover;display:block}
  .video-img .dur{position:absolute;right:8px;bottom:8px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;background:rgba(6,4,3,.88);color:var(--foreground);padding:3px 7px;border-radius:var(--radius)}
  .video-rol{display:block;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-foreground);padding:12px 14px 0}
  .video-rol.estreno{color:var(--primary)}
  .video-titulo{display:block;font-weight:600;font-size:16px;line-height:1.35;padding:6px 14px 0;text-wrap:balance}
  .video-meta{display:block;font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--muted-foreground);padding:8px 14px 14px}
  .videos{grid-template-columns:repeat(2,1fr);gap:10px}
  @media (max-width:720px){.video-rol{font-size:12px;letter-spacing:.08em;padding:10px 10px 0}.video-titulo{font-size:14px;padding:4px 10px 0}.video-meta{font-size:13px;padding:6px 10px 10px}.video-img .dur{font-size:11px}}
  @media (min-width:721px){.videos{gap:var(--space-2)}}
  @media (min-width:1024px){.videos{grid-template-columns:repeat(3,1fr)}.videos.cuatro{grid-template-columns:repeat(4,1fr)}}

  /* --- muestra destacada: reproductor de YouTube solo al pulsar --- */
  .destacado{display:grid;gap:var(--space-3);grid-template-columns:1fr;align-items:start}
  @media (min-width:1024px){.destacado{grid-template-columns:1.4fr .9fr;gap:var(--space-4)}}
  .lite-yt{position:relative;aspect-ratio:16/9;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
  .lite-yt picture,.lite-yt img,.lite-yt iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;display:block}
  .lite-yt .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:12px;min-height:var(--control);padding:0 18px 0 14px;border:1px solid var(--primary);background:rgba(6,4,3,.9);color:var(--foreground);font:600 15px/1 var(--body);border-radius:var(--radius);cursor:pointer;white-space:nowrap;transition:background var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out)}
  .lite-yt .play:hover{background:var(--primary);color:var(--primary-foreground)}
  .play-ico{width:0;height:0;border-left:14px solid currentColor;border-top:9px solid transparent;border-bottom:9px solid transparent}
  .lite-yt.activo .play,.lite-yt.activo picture{display:none}
  .ficha{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:var(--space-2) 0;font-size:15px}
  .ficha dt{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-foreground);padding-top:3px}
  .ficha dd{margin:0}
  .lista-limpia{list-style:none;margin:0;padding:0}
  .lista-limpia li{padding:10px 0;border-bottom:1px solid var(--border);font-size:15px;color:var(--muted-foreground)}
  .lista-limpia li:last-child{border-bottom:0}
  .faq .pasos{margin-top:var(--space-2)}
  .faq .tiles{margin:var(--space-2) 0}

  /* --- barra de acción fija en móvil --- */
  .accion-movil{display:none}
  @media (max-width:720px){
    .accion-movil{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:55;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(6,4,3,.96);border-top:1px solid var(--border);transition:transform var(--dur-2) var(--ease-out)}
    .accion-movil.oculta{transform:translateY(110%)}
    .accion-movil .btn{flex:1 1 0;padding:0 10px;font-size:14px}
    body{padding-bottom:72px}
    .consent{bottom:calc(84px + env(safe-area-inset-bottom))}
  }
  @media (prefers-reduced-motion:reduce){.accion-movil{transition:none}}
}
@layer pestañas {
  .tab .wrap>.encabezado.con-placa{max-width:none}
  .tab .wrap>.encabezado.con-placa>div{max-width:72ch}
  #trabajo .videos+.cta-final{margin-top:var(--space-3)}
  #quien-inicio{margin-top:var(--space-5)}
}

/* ============================================================ añadido 27-oct-2026 · tablero de vistas en vivo: barras, pocos números, hora de Miami */
@layer componentes {
  .tablero{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:clamp(18px,3vw,32px)}
  .tablero-cabeza{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px;margin-top:14px}
  .tablero .total{font-family:var(--display);font-weight:700;font-size:clamp(2.4rem,6vw,4.4rem);line-height:1;color:var(--success);font-variant-numeric:tabular-nums}
  .tablero .vivo{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-foreground)}
  .tablero .vivo::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--success);animation:rh-pulso 1.6s var(--ease-io) infinite alternate;animation-timing-function:var(--ease-io);--x:0}
  @keyframes rh-pulso{to{opacity:.4}}
  .tablero-grupos{display:grid;gap:22px;margin-top:22px}
  @media (min-width:900px){.tablero-grupos{grid-template-columns:1fr 1fr;gap:32px}}
  .tablero-grupo h4{margin:0 0 10px;font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-foreground);font-weight:400}
  .barras{list-style:none;margin:0;padding:0;display:grid;gap:9px}
  .barras li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:center}
  .barras .t{font-size:14px;color:var(--foreground);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .barras .n{font-family:var(--mono);font-size:12px;color:var(--success);font-variant-numeric:tabular-nums;text-align:right}
  .barras .pista{grid-column:1/-1;height:8px;border-radius:4px;background:rgba(234,220,186,.08);overflow:hidden}
  .barras .barra{display:block;height:100%;width:var(--w,0%);background:var(--success);border-radius:4px;transition:none}
  .tablero .nota{margin:16px 0 0;font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--muted-foreground);line-height:1.5;max-width:70ch}
  @media (prefers-reduced-motion:reduce){.tablero .vivo::before{animation:none}}
}

/* ============================================================ añadidos 27-oct-2026 · jurado J1 */
@layer componentes {
  .cupos{margin:8px 0 0;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--foreground);font-weight:600}   /* rojo = acción; la escasez se dice en hueso */
  .plan .cupos{margin-top:6px}
  .enlace-canal{display:inline-block;margin:0 18px 8px 0;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-foreground);text-decoration:underline;text-underline-offset:4px}
  .enlace-canal:hover{color:var(--foreground)}
  .tablero .total+.etiqueta{display:block;margin-top:6px;max-width:34ch}
  @media (max-width:720px){
    .nav a[data-tab]{padding:0 7px;font-size:13px}
    .marca{font-size:1rem}
    .nav-lista{gap:2px}
    .nav a[data-tab="inicio"]{display:none}   /* el logo ya lleva a #inicio; así «Reservar» entra en 390 px */
    .nav a.acceso{display:none}               /* «Tu proyecto» vive en el pie en móvil */
    .nav-lista{mask-image:linear-gradient(to right,#000 90%,transparent);-webkit-mask-image:linear-gradient(to right,#000 90%,transparent)}
  }
}

/* ============================================================ añadidos 27-oct-2026 · jurados J8 y J12 */
@layer componentes {
  .nav a[data-tab]:focus-visible{outline-offset:-2px}
}

/* ============================================================ añadidos 27-oct-2026 · jurado J9 */
@layer componentes {
  .galeria .fig:nth-child(5) img{object-position:30% 50%}      /* retrato-05: fuente 3:2, la mano alzada entraba cortada */
  .tira .fig{flex:0 0 auto;aspect-ratio:auto;height:min(56vw,340px)}   /* la tira respeta el formato de cada foto; partida-06 es vertical */
  .tira .fig img{height:100%;width:auto;max-width:none}
  @media (max-width:720px){.lite-yt .play{top:62%}}            /* el botón no roza la cara de la miniatura */
}

/* ============================================================ 27-oct-2026 · ajustes móviles SIN capa: deben ganar al bloque GATES de arriba */
@media (max-width:720px),(orientation:portrait) and (max-width:1024px){
  .hero-texto .row{flex-direction:row;gap:8px;align-items:stretch}
  .hero-texto .row .btn{flex:1 1 0;width:auto;min-width:0;padding-inline:10px;font-size:14px;white-space:nowrap}
}

/* ============================================================ 27-oct-2026 · jurado V (lenguaje visual), sin capa para ganar a GATES */
.eyebrow,.plan.hi .kicker,.kicker.verde{color:var(--primary)}
.kicker.verde{color:var(--success)}
.hero-texto .eyebrow{color:var(--foreground)}
.hero-texto .prueba{max-width:48ch}
.placa{overflow:visible}
.placa picture{overflow:hidden;border-radius:var(--radius)}
@media (min-width:1024px){
  .hero-texto .btn{min-height:52px;padding:0 28px;font-size:16px}
  .plans .plan>h3:first-child{margin-top:33px}   /* RITMO lleva kicker; así los tres precios quedan a la misma altura */
}
@media (max-width:720px){
  .tab{padding:var(--space-5) 0}
  #inicio-salidas{padding-top:var(--space-4)}
  .plan .btn{align-self:stretch;text-align:center}
  .encabezado.con-placa .placa{aspect-ratio:auto;height:220px;max-height:none}
  .pie{padding-bottom:calc(var(--space-4) + 72px + env(safe-area-inset-bottom))}
  .nav-lista{mask-image:none;-webkit-mask-image:none}   /* las cuatro pestañas de venta caben en 390 px: sin desvanecido */
}
.tablero .vivo{white-space:nowrap;flex-wrap:nowrap}

/* ============================================================ 27-oct-2026 · tablero como ranking por cliente (Hazeem: «tipo un top chart») */
@layer componentes {
  .tablero .top{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px}
  .tablero .top li{display:grid;grid-template-columns:30px minmax(0,1fr) auto;grid-template-areas:"pos t n" "pos pista pista" "pos meta meta";column-gap:12px;row-gap:5px;align-items:center;padding:10px 0;border-bottom:1px solid var(--border)}
  .tablero .top li:first-child{border-top:1px solid var(--border)}
  .tablero .top .pos{grid-area:pos;font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:var(--muted-foreground);align-self:start;padding-top:3px}
  .tablero .top .t{grid-area:t;font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:.02em;text-transform:uppercase;line-height:1.05}
  .tablero .top li:first-child .t{font-size:26px}
  .tablero .top .n{grid-area:n;font-family:var(--mono);font-size:15px;color:var(--success);font-variant-numeric:tabular-nums}
  .tablero .top .pista{grid-area:pista;display:block;height:8px;background:var(--card);border:1px solid var(--border);border-radius:1px;overflow:hidden}
  .tablero .top .barra{display:block;height:100%;width:var(--w);min-width:2px;background:var(--success)}
  .tablero .top .meta{grid-area:meta;font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--muted-foreground)}
  .tablero-detalle{margin-top:18px}
  .tablero-detalle summary{cursor:pointer;font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-foreground);padding:10px 0;list-style:none}
  .tablero-detalle summary::-webkit-details-marker{display:none}
  .tablero-detalle summary::after{content:"";display:inline-block;width:8px;height:8px;margin-left:10px;border-right:1px solid var(--muted-foreground);border-bottom:1px solid var(--muted-foreground);transform:rotate(45deg) translateY(-3px);transition:transform .2s}
  .tablero-detalle[open] summary::after{transform:rotate(-135deg) translateY(2px)}
  @media (min-width:900px){.tablero .top{grid-template-columns:1fr 1fr;column-gap:40px}}
}

/* ============================================================ 27-oct-2026 · series en marcha (show de Grimal + vlog de Rey) */
@layer componentes {
  .series{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:14px}
  .series li{display:grid;gap:6px;padding:18px 20px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius)}
  .serie-nombre{font-family:var(--display);font-weight:700;font-size:28px;letter-spacing:.01em;line-height:1}
  .serie-de{font-size:15px;color:var(--muted-foreground);max-width:54ch}
  .serie-meta{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--muted-foreground)}
  .series .enlace-canal{margin:6px 0 0;justify-self:start}
  @media (min-width:900px){.series{grid-template-columns:1fr 1fr}}
}

/* ============================================================ 27-oct-2026 · miniaturas en las series (Hazeem: «se ve muy bien en YouTube») */
@layer componentes {
  .serie-tira{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 8px;margin:0 0 12px}
  .serie-tira.una{grid-template-columns:1fr}
  .serie-tira a{display:block;color:var(--foreground);text-decoration:none}
  .serie-tira picture,.serie-tira img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--border);border-radius:2px;background:var(--background)}
  .serie-tira .ep{display:block;margin-top:6px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--muted-foreground);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .serie-tira a:hover .ep{color:var(--foreground)}
  .series li{padding:14px 14px 18px;min-width:0;overflow:hidden}
  .serie-tira a,.serie-tira picture{min-width:0}
  .series li>*{min-width:0}
  @media (min-width:900px){.serie-tira{grid-template-columns:repeat(4,minmax(0,1fr))}.serie-tira.una{grid-template-columns:1fr}.series li{padding:18px 20px}}
}

@layer componentes {
  .tablero-total{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--border);font-size:14px;color:var(--muted-foreground);max-width:70ch}
  .tablero-total strong{font-family:var(--display);font-weight:700;font-size:28px;color:var(--success);margin-right:8px;font-variant-numeric:tabular-nums}
  .tablero .top .meta{white-space:normal;line-height:1.45}
}

/* ============================================================ 28-oct-2026 · revisión en el iPhone de Hazeem (nuevo.retrahtos.com)
   1) La leyenda de la placa («Escena del árbol…») se montaba sobre el eyebrow del título: el <figure> tenía alto fijo (220 px en móvil,
      16/9 en escritorio) con overflow visible, y la leyenda caía fuera de su caja, encima de la fila siguiente. Ahora el borde y la
      proporción van en el <picture> y la leyenda fluye debajo, dentro del figure.
   2) «Headroom» entre pestañas: 64 + 64 px de padding en móvil (128 px de aire entre un bloque y el siguiente). Queda 32 + 32. */
.placa{aspect-ratio:auto;height:auto;max-height:none;border:0;background:transparent;overflow:visible}
.placa picture{display:block;aspect-ratio:16/9;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius);background:var(--card)}
.placa picture img{width:100%;height:100%;object-fit:cover;display:block}
.placa figcaption{display:block;padding:8px 0 0}
@media (max-width:720px){
  .encabezado.con-placa .placa{aspect-ratio:auto;height:auto;max-height:none}
  .encabezado.con-placa .placa picture{aspect-ratio:3/2;max-height:220px}
  .tab{padding:32px 0}
  .tab .wrap>.encabezado{margin-bottom:24px}
}