@font-face{font-family:'Inter';src:url(/assets/fonts/inter-latin-300-normal.woff2) format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url(/assets/fonts/inter-latin-400-normal.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url(/assets/fonts/inter-latin-500-normal.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url(/assets/fonts/inter-latin-600-normal.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url(/assets/fonts/inter-latin-700-normal.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Jost';src:url(/assets/fonts/jost-latin-300-normal.woff2) format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Jost';src:url(/assets/fonts/jost-latin-400-normal.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Jost';src:url(/assets/fonts/jost-latin-500-normal.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
/* ===== monibega.com — identity "LA VARA" =====
   Negro + blanco + un acento fluo (cinta de marcación de escenario).
   Para cambiar el acento, editar solo --accent. */
:root{
  --accent: #FF2E9A;
  --accent-ink: #111;          /* texto sobre fondos claros */
  --serif: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --bar-w: 72px; --bar-h: 6px;
}
::selection{background:var(--accent);color:#111}

/* ---- Títulos: sans bold, mayúsculas, grandes ---- */
.section-title, #hero h1, .vara-title, .contact-head, .work-title, .timeline-role, #beyond-title,
.case-hero h1, .stat-num, .next-title, .video-title{
  font-family: var(--sans) !important; font-weight: 600 !important; text-transform: uppercase;
  letter-spacing: -0.01em; font-style: normal;
}
.section-title{ font-size: clamp(2.2rem, 4.6vw, 3.8rem) !important; line-height: .98 !important; }
.section-title em{ font-style: normal; color: inherit !important; }
#work .section-title em, #contact .section-title em{ color: var(--accent) !important; }
#experience .section-title em, #beyond-title em{ background: var(--accent); color:#111 !important; padding: 0 .12em; font-style: normal; }

/* ---- Firma: LA VARA (barra gruesa sobre los títulos de sección) ---- */
.vara-title::before, #work .section-title::before, .exp-aside::before, #beyond-label::before, .contact-head::before,
.case-body h2::before, .result h2::before, .videos h2::before, .case-label::before{
  content:""; display:block; width: var(--bar-w); height: var(--bar-h); background: var(--accent); margin-bottom: 1.1rem;
}
.contact-head::before{ margin-left:auto; margin-right:auto; }

/* ---- Etiquetas chicas ---- */
.aside-label, #beyond-label{ color: var(--accent-ink) !important; font-weight: 700; letter-spacing: .18em; }
#beyond-label{ font-size: .7rem !important; }

/* ---- Navegación ---- */
.nav-links a{ font-weight: 500; }
.nav-links a:hover, .nav-links a:focus-visible{ color:#111; box-shadow: inset 0 -3px 0 var(--accent); }
#nav-vara{ font-weight: 600; color:#111; }

/* ---- Hero ---- */
#hero h1{ font-size: clamp(3rem, 7.5vw, 6.2rem) !important; line-height: .92; margin-bottom: 1.2rem; }
.hero-positioning{ color: var(--accent) !important; font-weight: 600 !important; font-size: clamp(1rem, 1.6vw, 1.25rem) !important; letter-spacing: .02em !important; text-transform: none; margin-bottom: 0 !important; }
.hero-scroll{ display:inline-block !important; width:fit-content; align-self:flex-start; position:static; margin-top:2.6rem; padding:.55rem .9rem; border:2px solid var(--accent); color: var(--accent) !important; text-decoration: none; font-weight: 600; letter-spacing: .22em; font-size: .75rem !important; opacity: 1 !important; }
.hero-scroll:hover{ background: var(--accent); color:#111 !important; }

/* ---- LA VARA ---- */
#la-vara{ background: var(--white); padding: 7rem 4rem 6rem; }
.vara-head{ margin-bottom: 3.5rem; }
.vara-title{ font-size: clamp(3.4rem, 9vw, 7.5rem); line-height: .9; color:#111; margin: 0; }
.vara-q{ margin-top: 1.2rem; font-size: clamp(1.15rem, 2vw, 1.6rem); font-weight: 500; color:#111; }
.vara-steps{ list-style:none; display:grid; grid-template-columns: repeat(4,1fr); gap: 2.4rem; counter-reset:none; padding:0; margin:0; }
.vara-step{ border-top: 2px solid #111; padding-top: 1.4rem; }
.vara-n{ display:inline-block; background: var(--accent); color:#111; font-weight:600; font-size:.8rem; letter-spacing:.12em; padding:.25rem .5rem; margin-bottom:1.1rem; }
.vara-step-t{ font-family: var(--sans); font-weight: 600; text-transform: uppercase; font-size: clamp(1.3rem, 1.9vw, 1.7rem); line-height: 1.05; letter-spacing: -.01em; color:#111; margin: 0 0 .9rem; }
.vara-step-t mark{ background: none; color:#111; box-shadow: inset 0 -.3em 0 var(--accent); padding: 0 .04em; }
.vara-step-d{ font-size: 1rem; line-height: 1.65; color:#333; }

/* ---- Trabajos ---- */
.work-title{ font-size: clamp(1.25rem, 2vw, 1.7rem) !important; line-height: 1.1 !important; letter-spacing: -.01em; }
.work-number, .work-meta{ color: var(--accent) !important; }
.work-badge{ border-color: var(--accent) !important; color: var(--accent) !important; }
.work-item:hover .work-title{ color: #fff; }
.work-item:hover{ background:#1a1a1a !important; }
.case-link-t, .case-link{ color: var(--accent) !important; border-color: var(--accent) !important; }
.timeline-note .case-link-t, .timeline-note .case-link{ color:#111 !important; border-color:#111 !important; box-shadow: inset 0 -3px 0 var(--accent); }
.click-play .play-btn{ background: var(--accent) !important; }
.click-play .play-btn svg, .click-play .play-btn path{ fill:#111 !important; stroke:#111 !important; }

/* ---- Trayectoria ---- */
.exp-intro{ margin-top: 1.4rem; font-size: 1rem; line-height: 1.7; color:#333; max-width: 300px; }
.timeline-company{ color:#111 !important; font-weight: 700; letter-spacing: .14em; }
.timeline-role{ font-size: 1.15rem !important; letter-spacing: -.005em; }
.timeline-item::before, .timeline-dot{ background: var(--accent) !important; border-color:#111 !important; }

/* ---- Más allá del brief ---- */
#beyond-title{ font-size: clamp(1.8rem, 3vw, 2.4rem) !important; line-height: 1 !important; }

/* ---- Contacto ---- */
#contact{ padding: 6rem 4rem 4.5rem !important; text-align: center; }
.contact-head{ font-size: clamp(2.4rem, 6vw, 4.6rem) !important; line-height: .95 !important; color:#fff !important; margin-bottom: 1.2rem !important; }
.contact-sub{ color: var(--accent) !important; font-size: clamp(1.1rem, 2vw, 1.5rem) !important; font-weight: 600; margin: 0 0 1.6rem !important; }
.contact-calls{ color: rgba(255,255,255,.72) !important; font-size: 1rem !important; line-height: 1.75; max-width: 760px; margin: 0 auto 2.6rem !important; }
.contact-calls .dot{ color: var(--accent); padding: 0 .35rem; font-weight: 800; }
.ct-links a:hover{ color: var(--accent) !important; border-color: var(--accent) !important; }
.lang-suggest a{ color: var(--accent) !important; border-color: var(--accent) !important; }

/* ---- Casos ---- */
.case-label, .case-meta, .video-meta, .decisions li::before{ color: var(--accent) !important; }
.case-body h2, .result h2, .all-work{ color:#111 !important; font-weight:700 !important; }
.videos h2{ color: var(--accent) !important; font-weight: 700 !important; }
.decisions li::before{ background: var(--accent); color:#111 !important; font-weight: 600; padding: .1rem .35rem; letter-spacing: .08em !important; }
.all-work{ border-color:#111 !important; box-shadow: inset 0 -3px 0 var(--accent); }
.next-title:hover, footer a:hover{ color: var(--accent) !important; }
.challenge, .result p{ font-family: var(--sans) !important; font-weight: 500; letter-spacing: -.01em; }
.poster-play{ background: var(--accent) !important; border-color: var(--accent) !important; }
.poster-play::after{ border-color: transparent transparent transparent #111 !important; }

@media (max-width: 900px){
  .vara-steps{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px){
  #la-vara{ padding: 4rem 1.25rem 3.5rem; }
  .vara-steps{ grid-template-columns: 1fr; gap: 1.8rem; }
  .vara-head{ margin-bottom: 2.4rem; }
  #contact{ padding: 4rem 1.25rem 3rem !important; }
  .hero-scroll{ margin-top: 1.6rem; }
  .exp-intro{ max-width: none; }
  :root{ --bar-w: 56px; --bar-h: 5px; }
}

/* ===== HERO "LA VARA" (5 franjas) ===== */
#hero{ display:block !important; position:relative; min-height:100vh !important; height:100vh; padding:0 !important; background:#000 !important; overflow:hidden; }
.hero-panels{ position:absolute; inset:0; display:grid; grid-template-columns:repeat(5,1fr); }
.hp{ position:relative; overflow:hidden; }
.hp picture, .hp img{ display:block; width:100%; height:100%; }
.hp img{ object-fit:cover; object-position:center; }
.hp::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.06); }
#hero::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.2) 8%,rgba(0,0,0,0) 16%,rgba(0,0,0,0) 34%,rgba(0,0,0,.12) 44%,rgba(0,0,0,.32) 54%,rgba(0,0,0,.55) 64%,rgba(0,0,0,.74) 74%,rgba(0,0,0,.88) 86%,rgba(0,0,0,.94) 100%); }
.hero-center{ position:absolute; z-index:2; left:0; right:0; top:50%; transform:translateY(-6%); text-align:center; color:#fff; }
.hero-title{ font-family:'Jost',var(--sans); font-weight:300; font-size:clamp(3rem,9vw,8.4rem); letter-spacing:.14em; padding-left:.14em; line-height:1; text-shadow:0 2px 30px rgba(0,0,0,.35); margin:0; }
.hero-q{ font-family:'Jost',var(--sans); font-weight:300; font-size:clamp(1.05rem,1.8vw,1.55rem); letter-spacing:.04em; margin-top:1.6rem; text-shadow:0 1px 14px rgba(0,0,0,.5); }
.hero-sig{ position:absolute; z-index:2; left:0; right:0; bottom:3.2rem; text-align:center; color:#fff; font-family:'Jost',var(--sans); }
.hero-bar{ display:block; width:44px; height:3px; background:var(--accent); margin:0 auto 1rem; }
#hero .hero-name{ font-family:'Jost',var(--sans) !important; font-weight:500 !important; font-size:1.05rem !important; letter-spacing:.32em !important; padding-left:.32em; text-transform:uppercase; line-height:1.2 !important; margin:0 !important; color:#fff; }
.hero-role{ margin-top:.5rem; font-weight:300; font-size:.8rem; letter-spacing:.28em; text-transform:uppercase; color:rgba(255,255,255,.82); }
.hero-credits{ margin-top:1.3rem; font-weight:400; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.78); padding:0 1.2rem; line-height:2; }
.hero-credits em{ font-style:normal; white-space:nowrap; }
.hero-credits span{ color:var(--accent); padding:0 .6rem; }
.hero-credits .m-only{ display:none; }

/* nav transparente sobre la portada */
.nav-logo{ display:inline-flex; flex-direction:column; align-items:center; font-weight:600 !important; letter-spacing:.24em; }
.nav-bar{ display:block; width:28px; height:3px; background:var(--accent); margin-bottom:5px; }
body.has-hero nav{ transition: background .3s, border-color .3s; }
body.has-hero:not(.scrolled) nav{ background:transparent !important; border-bottom-color:transparent !important; }
body.has-hero:not(.scrolled) nav .nav-logo, body.has-hero:not(.scrolled) .nav-links a, body.has-hero:not(.scrolled) #nav-vara{ color:#fff !important; text-shadow:0 1px 10px rgba(0,0,0,.4); }
body.has-hero:not(.scrolled) .lang-toggle{ border-color:rgba(255,255,255,.5); }
body.has-hero:not(.scrolled) .lang-btn:not(.active){ color:#fff !important; }
body.has-hero:not(.scrolled) .lang-btn.active{ background:#fff; color:#111 !important; }

@media (max-width:700px){
  #hero{ height:100svh; min-height:560px !important; }
  .hero-panels{ grid-template-columns:1fr 1.6fr 1fr; }
  .p-sir, .p-sura{ display:none; }
  .p-mcc img{ object-position:72% center; }
  .hero-center{ transform:translateY(0); }
  .hero-title{ letter-spacing:.1em; }
  .hero-q{ padding:0 1.5rem; }
  .hero-sig{ bottom:2.2rem; }
  .hero-credits{ font-size:.62rem; }
  .hero-credits .d-only{ display:none; } .hero-credits .m-only{ display:inline; }
}
@media (max-width:700px){ #work .work-header{ flex-wrap:wrap; gap:.6rem; } #work .work-count{ margin-left:0 !important; } }

/* ===== Tipografía unificada con la portada (Jost) ===== */
.section-title, .vara-title, .contact-head, .case-hero h1, .stat-num, .challenge, .result p{
  font-family:'Jost', var(--sans) !important; font-weight:300 !important; letter-spacing:.06em !important; }
.work-title, .vara-step-t, .timeline-role, #beyond-title, .next-title, .video-title, .exp-intro{
  font-family:'Jost', var(--sans) !important; font-weight:400 !important; letter-spacing:.04em !important; }
.exp-intro{ text-transform:none; letter-spacing:.01em !important; font-weight:300 !important; font-size:1.05rem; }
.vara-title{ font-size:clamp(3rem,8vw,6.6rem) !important; letter-spacing:.12em !important; }
.section-title{ line-height:1.02 !important; }
.contact-head{ font-size:clamp(2rem,4.5vw,3.4rem) !important; letter-spacing:.16em !important; padding-left:.16em; }
.challenge, .result p{ text-transform:none; letter-spacing:.01em !important; }
.stat-num{ letter-spacing:.02em !important; }
.aside-label, #beyond-label, .case-label, .case-body h2, .result h2, .videos h2, .work-meta, .timeline-company{
  font-family:'Jost', var(--sans) !important; font-weight:500 !important; }
.nav-links a, .nav-logo, .nav-back{ font-family:'Jost', var(--sans) !important; font-weight:500 !important; }
.vara-step-t mark{ box-shadow: inset 0 -.22em 0 var(--accent); }
#beyond-title{ line-height:1.18 !important; }
#beyond-title em{ display:inline-block; line-height:1.1; margin-top:.15em; }
/* contacto discreto */
#contact{ padding: 4rem 4rem 3.2rem !important; }
.contact-head{ font-size: 1.05rem !important; letter-spacing: .34em !important; padding-left:.34em; margin-bottom: 1.6rem !important; font-weight:400 !important; }
.contact-head::before{ width: 40px !important; height: 3px !important; margin-bottom: 1rem !important; }
.timeline-note strong{ font-weight:600; color:#111; }
@media (max-width:768px){ #contact{ padding: 3rem 1.25rem 2.5rem !important; } }
/* portada: más contraste para el texto blanco */
#hero::after{ background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.2) 8%,rgba(0,0,0,0) 16%,rgba(0,0,0,0) 26%,rgba(0,0,0,.2) 36%,rgba(0,0,0,.46) 46%,rgba(0,0,0,.64) 56%,rgba(0,0,0,.78) 68%,rgba(0,0,0,.9) 80%,rgba(0,0,0,.96) 100%) !important; }
.hp::after{ background:rgba(0,0,0,.12) !important; }
.hero-title{ text-shadow:0 2px 40px rgba(0,0,0,.55), 0 1px 4px rgba(0,0,0,.35) !important; }
.hero-q, .hero-role, .hero-credits, #hero .hero-name{ text-shadow:0 1px 12px rgba(0,0,0,.6); }
/* aviso de cookies */
.mb-cookie{position:fixed;z-index:300;left:1rem;bottom:1rem;max-width:380px;background:#111;color:#f2f2f2;border-radius:14px;padding:1rem 1.1rem;box-shadow:0 10px 30px rgba(0,0,0,.25);font-family:'Inter',var(--sans);font-size:.8rem;line-height:1.55}
.mb-cookie p{margin:0 0 .8rem;color:#e6e6e6}
.mb-cookie a{color:#fff;box-shadow:inset 0 -2px 0 var(--accent);text-decoration:none}
.mb-cookie div{display:flex;gap:.5rem;justify-content:flex-end}
.mb-cookie button{font:inherit;font-size:.75rem;letter-spacing:.06em;border-radius:2rem;padding:.45rem 1rem;cursor:pointer;border:1px solid rgba(255,255,255,.35);background:transparent;color:#fff}
.mb-cookie button.ok{background:#fff;color:#111;border-color:#fff}
@media (max-width:600px){.mb-cookie{left:.75rem;right:.75rem;max-width:none}}
footer .foot-priv{color:inherit;text-decoration:none;opacity:.8;margin-left:.8rem}
footer .foot-priv{opacity:1;color:rgba(255,255,255,.75);text-decoration:underline;text-underline-offset:3px}
.priv a,.mb-cookie a{text-decoration:underline;text-underline-offset:3px}
/* ===== LA VARA — diagnóstico ===== */
.vara-cta{margin-top:3rem;display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem}
.vara-cta button{font-family:'Jost',var(--sans);font-weight:500;font-size:.85rem;letter-spacing:.18em;text-transform:uppercase;background:#111;color:#fff;border:0;border-radius:2rem;padding:1rem 1.6rem;cursor:pointer;transition:background .2s,color .2s}
.vara-cta button:hover,.vara-cta button:focus-visible{background:var(--accent);color:#111}
.vara-cta span{font-size:.9rem;color:#555}
html.vt-lock,html.vt-lock body{overflow:hidden}
.vt{position:fixed;inset:0;z-index:500;background:#111;color:#fff;display:flex;flex-direction:column;height:100vh;height:100dvh;font-family:'Inter',var(--sans)}
.vt-top{display:flex;justify-content:space-between;align-items:center;padding:1.1rem 1.25rem;border-bottom:1px solid rgba(255,255,255,.1)}
.vt-brand{font-family:'Jost',var(--sans);font-weight:500;font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.vt-x{background:none;border:0;color:#fff;font-size:2rem;line-height:1;cursor:pointer;width:44px;height:44px}
.vt-body{flex:1;overflow-y:auto;width:100%;max-width:760px;margin:0 auto;padding:2rem 1.25rem 3rem;-webkit-overflow-scrolling:touch}
.vt-steps{list-style:none;display:flex;gap:.4rem;margin:0 0 2.6rem;padding:0}
.vt-steps li{flex:1;font-family:'Jost',var(--sans);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.4);padding-top:.6rem;border-top:3px solid rgba(255,255,255,.15)}
.vt-steps li.done{color:rgba(255,255,255,.7);border-color:rgba(255,46,154,.55)}
.vt-steps li.on{color:#fff;border-color:var(--accent)}
.vt-kicker{font-family:'Jost',var(--sans);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin:0 0 .9rem}
.vt-q,.vt-res{font-family:'Jost',var(--sans);font-weight:300;font-size:clamp(1.7rem,4.5vw,2.8rem);line-height:1.15;margin:0 0 1rem;letter-spacing:.01em}
.vt-res{text-transform:uppercase;letter-spacing:.08em}
.vt-help{color:rgba(255,255,255,.65);font-size:.95rem;margin:-.3rem 0 1.4rem}
.vt-opts{display:flex;flex-direction:column;gap:.7rem;margin-top:1.6rem}
.vt-opt{text-align:left;font:inherit;font-size:1.05rem;line-height:1.4;color:#fff;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:1.05rem 1.2rem;min-height:56px;cursor:pointer;transition:border-color .15s,background .15s}
.vt-opt:hover,.vt-opt:focus-visible{border-color:var(--accent);background:rgba(255,46,154,.08);outline:none}
.vt-opt.sel{border-color:var(--accent)}
.vt-back,.vt-again{margin-top:1.8rem;background:none;border:0;color:rgba(255,255,255,.7);font:inherit;font-size:.85rem;letter-spacing:.06em;cursor:pointer;padding:.6rem 0;min-height:44px}
.vt-lead{font-size:1.15rem;line-height:1.6;color:rgba(255,255,255,.9);margin:0 0 2rem;max-width:620px}
.vt-seen{font-family:'Jost',var(--sans);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.6);margin:0 0 .7rem}
.vt-notes{list-style:none;padding:0;margin:0 0 2rem}
.vt-notes li{position:relative;padding:.75rem 0 .75rem 1.4rem;border-top:1px solid rgba(255,255,255,.12);line-height:1.55;color:rgba(255,255,255,.88)}
.vt-notes li::before{content:"";position:absolute;left:0;top:1.35rem;width:.6rem;height:3px;background:var(--accent)}
.vt-join{font-family:'Jost',var(--sans);font-weight:300;font-size:1.15rem;line-height:1.5;margin:0 0 1.8rem;color:#fff}
.vt-cta{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.6rem}
.vt-send{display:inline-block;background:var(--accent);color:#111;text-decoration:none;font-family:'Jost',var(--sans);font-weight:500;font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;padding:1rem 1.4rem;border-radius:2rem}
.vt-send:hover,.vt-send:focus-visible{background:#fff;outline:none}
.vt-again{margin-top:0}
@media (min-width:900px){.vt-body{padding-top:4rem}}
@media (prefers-reduced-motion:reduce){.vt *{transition:none!important}}
@media (max-width:600px){.vt-send{font-size:.74rem;letter-spacing:.08em;padding:.95rem 1.2rem}}
.vt-send{white-space:nowrap}
/* diagnóstico: extras (fondo negro) */
.vt-prog{display:flex;align-items:flex-start;gap:1rem;margin:0 0 2.6rem}
.vt-prog .vt-steps{flex:1;margin:0}
.vt-count{font-family:'Jost',var(--sans);font-size:.7rem;letter-spacing:.14em;color:rgba(255,255,255,.7);white-space:nowrap;padding-top:.55rem}
.vt-steps li{color:rgba(255,255,255,.62)}
.vt-react{font-family:'Jost',var(--sans);font-weight:400;font-size:1.05rem;color:#fff;margin:-1rem 0 1.6rem;padding:.55rem .9rem;background:rgba(255,255,255,.06);border-left:3px solid var(--accent);display:inline-block;border-radius:0 8px 8px 0;animation:vtIn .35s ease}
@keyframes vtIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.vt-q,.vt-res,.vt-opts{animation:vtIn .3s ease}
.vt-aff{background:rgba(255,255,255,.05);border-radius:14px;padding:1.2rem 1.3rem;margin:0 0 2rem;border:1px solid rgba(255,46,154,.35)}
.vt-aff .vt-seen{margin-bottom:.5rem}
.vt-aff-t{font-family:'Jost',var(--sans);font-weight:300;font-size:1.15rem;line-height:1.55;margin:0;color:#fff}
@media (prefers-reduced-motion:reduce){.vt-react,.vt-q,.vt-res,.vt-opts{animation:none}}
/* diagnóstico: formulario */
.vt-form{display:flex;flex-direction:column;gap:1rem;margin-top:1.4rem}
.vt-field{display:flex;flex-direction:column;gap:.4rem;font-size:.8rem;letter-spacing:.06em;color:rgba(255,255,255,.75)}
.vt-field input,.vt-field textarea{font:inherit;font-size:1rem;letter-spacing:0;color:#fff;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.2);border-radius:10px;padding:.85rem 1rem;min-height:48px}
.vt-field textarea{resize:vertical;min-height:96px}
.vt-field input:focus,.vt-field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,46,154,.2)}
.vt-msg{min-height:1.2em;margin:0;color:#ff8fc6;font-size:.9rem}
.vt-form .vt-cta{margin-top:.6rem}
button.vt-send{border:0;cursor:pointer;font-family:'Jost',var(--sans)}
button.vt-send:disabled{opacity:.6;cursor:wait}
.vt-sent{margin:0 0 1.4rem;padding:.7rem 1rem;border-left:3px solid var(--accent);background:rgba(255,255,255,.06);border-radius:0 8px 8px 0}
.vt-sent.err{border-left-color:#ffb020}
.vt-join{font-size:1.25rem!important;font-weight:400!important}
/* botón diagnóstico (link) */
.vara-cta-btn{display:inline-block;font-family:'Jost',var(--sans);font-weight:500;font-size:.85rem;letter-spacing:.18em;text-transform:uppercase;background:#111;color:#fff;text-decoration:none;border-radius:2rem;padding:1rem 1.6rem;transition:background .2s,color .2s}
.vara-cta-btn:hover,.vara-cta-btn:focus-visible{background:var(--accent);color:#111}
#vt-page.vt{position:fixed;inset:0}
a.vt-brand{text-decoration:none}
a.vt-x{display:flex;align-items:center;justify-content:center;text-decoration:none}
.vara-cta-btn{background:var(--accent);color:#111}
.vara-cta-btn:hover,.vara-cta-btn:focus-visible{background:#111;color:#fff}
.vt-q:focus,.vt-res:focus{outline:none}

@media (max-width:700px){ .hero-role .r-sep{display:none} .hero-role .r2{display:block; margin-top:.35rem; letter-spacing:.16em; font-size:.68rem} }