/* ═══ /brands — la pagina del anuncio de Meta (23-sep-2026) ═══════════════════════════════════
   Cuelga de `intent.css` (barra, botones, secciones, precios, preguntas, formulario, pie) y solo
   añade lo que esta pagina tiene y las de intencion no: el hero partido con una web en vivo, la
   ruleta de productos (el eco del video "La ruta"), las cuatro obras en ventana de navegador,
   el pago en 3D, la oferta fundacional y el boton fijo del movil.
   Biblia web: solo se anima transform y opacity; los videos no se piden hasta que se ven. */

.btn-small{padding:.55rem 1.05rem;font-size:.88rem}
.bar-links .btn-small{color:#fff}
.small{font-size:.9rem}
.cta-note.small{margin-top:.7rem}

/* ── hero partido: la frase del anuncio a la izquierda, una web de verdad a la derecha ─── */
.hero2{padding:3.6rem 0 1.4rem}
.hero2 .wrap:first-child{display:grid;grid-template-columns:1fr 1.08fr;gap:clamp(2rem,5vw,4.4rem);align-items:center}
.hero2 h1{max-width:13ch}
.hero2 .lede{max-width:44ch}

/* ── la ventana de navegador que enmarca cada obra ─────────────────────────────────────── */
.browser{position:relative;border-radius:14px;overflow:hidden;background:#0B1322;
  border:1px solid rgba(11,19,34,.14);box-shadow:0 30px 70px -30px rgba(11,19,34,.45),0 8px 22px -12px rgba(11,19,34,.25)}
.browser-bar{display:flex;align-items:center;gap:.4rem;height:30px;padding:0 .8rem;background:#F4F7FC;
  border-bottom:1px solid rgba(11,19,34,.08)}
.browser-bar i{width:9px;height:9px;border-radius:50%;background:rgba(11,19,34,.16)}
.browser-bar span{margin-left:.8rem;padding:.12rem .7rem;border-radius:999px;background:#fff;
  font-family:var(--mono);font-size:.7rem;color:var(--ink-soft);border:1px solid rgba(11,19,34,.08)}
.browser-media{position:relative;aspect-ratio:1280/800;background:#0B1322}
.browser-media img,.browser-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.browser-media video{opacity:0;transition:opacity .6s ease}
.browser-media video.on{opacity:1}
.hero2-shot figcaption{display:flex;gap:.6rem;align-items:baseline;padding:.75rem 1rem;background:#fff;
  font-size:.9rem;font-weight:500;color:var(--ink)}
.hero2-shot figcaption span{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}

/* ── la ruleta: "A website for your ___." ──────────────────────────────────────────────── */
.rotor{margin-top:2.6rem;display:flex;flex-wrap:wrap;align-items:baseline;gap:.35em;
  font-family:var(--serif);font-weight:340;letter-spacing:-.015em;font-size:clamp(1.5rem,3vw,2.3rem);color:var(--ink)}
.rotor-win{display:inline-block;height:1.2em;overflow:hidden;vertical-align:bottom}
.rotor-list{display:block;animation:rotor 16s cubic-bezier(.65,0,.35,1) infinite}
.rotor-list b{display:block;height:1.2em;line-height:1.2em;font-weight:340;font-style:italic;color:var(--volt)}
@keyframes rotor{
  0%,11%{transform:translateY(0)}
  14.3%,25.3%{transform:translateY(-1.2em)}
  28.6%,39.6%{transform:translateY(-2.4em)}
  42.9%,53.9%{transform:translateY(-3.6em)}
  57.1%,68.1%{transform:translateY(-4.8em)}
  71.4%,82.4%{transform:translateY(-6em)}
  85.7%,96.7%{transform:translateY(-7.2em)}
  100%{transform:translateY(-8.4em)}
}

/* ── las cuatro obras ──────────────────────────────────────────────────────────────────── */
.work2{display:grid;grid-template-columns:repeat(2,1fr);gap:2.6rem 2rem;margin-top:2.2rem}
.wk .browser{margin-bottom:1.1rem}
.wk-cat{font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--volt);margin-bottom:.35rem}
.wk h3{font-family:var(--serif);font-weight:400;font-size:1.5rem;letter-spacing:-.01em;margin-bottom:.35rem}
.wk p:not(.wk-cat){color:var(--ink-soft);max-width:48ch;margin-bottom:.7rem}

/* ── el pago ───────────────────────────────────────────────────────────────────────────── */
.sells{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.sells .btn{margin-top:1.6rem}
.sells-shots{position:relative;padding-bottom:12%}
.sells-shots img{border-radius:14px;box-shadow:0 30px 70px -30px rgba(11,19,34,.55)}
.shot-a{width:86%}
.shot-b{position:absolute;right:0;bottom:0;width:60%;border:1px solid rgba(255,255,255,.4)}

/* ── precio: el tramo con tienda es el que se destaca ─────────────────────────────────── */
.price{display:flex;flex-direction:column}
.price .btn{margin-top:auto;align-self:flex-start}
.price .incl{margin-bottom:1.8rem}
.price-hi{border-color:rgba(61,77,255,.45);box-shadow:0 20px 50px -18px rgba(61,77,255,.35)}
.founding{display:grid;grid-template-columns:1fr auto;gap:1rem 2rem;align-items:center;margin-top:1.4rem;
  padding:1.6rem 1.8rem;border-radius:20px;background:var(--ink);color:#fff}
.founding-tag{grid-column:1/-1;font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:#AEB8FF}
.founding-copy{color:#D7DEEC;max-width:62ch}
.founding-copy strong{color:#fff;font-weight:600}
.founding .btn{background:#fff;color:var(--ink);border-color:#fff}
#pricing .sec-copy.small{margin-top:1.4rem}

/* ── formulario: el desplegable y el "(opcional)" ─────────────────────────────────────── */
.field select{width:100%;padding:.8rem .95rem;border-radius:12px;font:inherit;font-size:.97rem;
  border:1px solid rgba(11,19,34,.18);background:var(--mist);color:var(--ink)}
.field select:focus{outline:2px solid var(--volt);outline-offset:1px}
.field .opt{font-weight:400;color:var(--ink-soft)}
.form-alt{margin-top:.8rem;font-size:.9rem;color:var(--ink-soft)}
.form-alt a{color:var(--volt)}

/* ── el boton fijo del movil: aparece al dejar atras el hero y se va al llegar al form ── */
.dock{display:none}
@media (max-width:760px){
  .dock{display:block;position:fixed;left:50%;bottom:max(1rem,env(safe-area-inset-bottom));z-index:30;
    transform:translate(-50%,220%);transition:transform .5s cubic-bezier(.16,1,.3,1);
    box-shadow:0 14px 34px rgba(11,19,34,.35);white-space:nowrap}
  .dock.on{transform:translate(-50%,0)}
}

@media (max-width:900px){
  .hero2 .wrap:first-child,.sells{grid-template-columns:1fr}
  .hero2 h1{max-width:none}
  .founding{grid-template-columns:1fr}
  .founding .btn{justify-self:start}
}
@media (max-width:760px){
  .work2{grid-template-columns:1fr}
  .bar-links a:not(.btn){display:none}
  .hero2{padding-top:2.4rem}
}
@media (prefers-reduced-motion:reduce){
  .rotor-list{animation:none}
  .browser-media video{display:none}
  .dock{transition:none}
}

/* ── LEGIBILIDAD, MEDIDA CON APCA (23-sep) ─────────────────────────────────────────────────
   Pasada la puerta de APCA por cuerpo y peso (tools/puerta.py de la escuela, adaptada a esta
   pagina): el gris de intent.css (#3E4B63) da Lc 81-86 sobre el cielo y a 16 px/400 hacen falta
   90; y las etiquetas mono a 12 px no llegan a ningun umbral (regla de Alex: por debajo de 14 px
   no hay tinta que valga). La mono solo trae 400 y 500, asi que las etiquetas van a 14/500 y su
   azul baja a un indigo que da Lc 92 sobre el fondo mas claro. El volt se queda en el titular,
   que a ese tamaño le sobra. */
body.brands{--ink-soft:#27303F;--indigo:#141A6E}
.brands .lede{font-size:clamp(1.0625rem,1.5vw,1.2rem)}
.brands .sec-copy,.brands .wk p:not(.wk-cat),.brands .price p.note,.brands .incl li,
.brands .faq details p,.brands ol.steps p,.brands .founding-copy{font-size:1.0625rem}
.brands .small{font-size:1rem;font-weight:500}
.brands .eyebrow,.brands .rail,.brands .wk-cat,.brands .price-tag,.brands .step-t,.brands .step-n,
.brands .founding-tag,.brands .hero2-shot figcaption span{font-size:.875rem;font-weight:500}
.brands .eyebrow,.brands .rail .idx,.brands .wk-cat,.brands .step-n,.brands .price-mo,
.brands .open-live,.brands .form-alt a{color:var(--indigo)}
.brands .rail,.brands .price-tag,.brands .step-t,.brands .hero2-shot figcaption span{color:#1A2335}
.brands .rotor-list b{color:var(--indigo)}
.brands .rotor{font-size:clamp(1.75rem,3vw,2.3rem)}
.brands .cta-note{font-size:.9375rem;font-weight:500}
.brands .bar-links{font-size:.95rem;font-weight:500}
.brands .open-live{font-size:.95rem;font-weight:500;border-bottom-color:rgba(20,26,110,.35)}
.brands .field label{font-size:.9375rem}
.brands .field .opt{font-weight:500}
.brands .form-alt,.brands .form-status{font-size:.9375rem;font-weight:500}
.brands footer{font-size:.95rem;font-weight:500}
.brands .foot-legal{font-size:.875rem;font-weight:500}
.brands .founding-copy{color:#E6EBF5}
.brands .founding-tag{color:#fff}
.brands .hero2-shot figcaption{font-size:.9375rem}
.browser-bar span{width:40%;height:14px;padding:0}
/* la etiqueta de categoria caia dentro de la sombra de la ventana (Lc 77 medido): mas aire
   debajo y una sombra que no llega hasta el texto */
.brands .browser{box-shadow:0 24px 48px -30px rgba(11,19,34,.5),0 6px 16px -10px rgba(11,19,34,.22)}
.brands .wk .browser{margin-bottom:2rem}