/* =========================================================
   Landing CTV · Asomados
   Identidad según el manual de marca: Syne (títulos) + DM Sans (texto),
   morado #A65BFA, gris #BBC1C8, negro, blanco, amarillo #FAF85A, beige #C7C2B9.
   Contraste: sobre morado, texto normal en negro (5,5:1); el blanco solo en titulares grandes.
   ========================================================= */

/* Fuentes variables servidas desde jsDelivr (Fontsource, versiones fijadas). Si no cargan, se usa la fuente del sistema. */
@font-face{font-family:'Syne';src:url('https://cdn.jsdelivr.net/npm/@fontsource-variable/syne@5.3.0/files/syne-latin-wght-normal.woff2') format('woff2');font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url('https://cdn.jsdelivr.net/npm/@fontsource-variable/dm-sans@5.2.8/files/dm-sans-latin-wght-normal.woff2') format('woff2');font-weight:100 1000;font-style:normal;font-display:swap}

:root{
  --purple:#A65BFA; --grey:#BBC1C8; --black:#000; --white:#fff; --yellow:#FAF85A; --beige:#C7C2B9;
  --ink:var(--black); --paper:var(--white); --muted:#3d3a42; --line:rgba(0,0,0,.18);
  --max:1180px; --radius:999px;
  --f-title:'Syne',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --f-text:'DM Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-text);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--black);outline-offset:3px;box-shadow:0 0 0 6px var(--yellow)}
button,input,select,textarea{font:inherit;color:inherit}
.wrap{width:min(var(--max),calc(100% - 40px));margin-inline:auto}
.skip{position:absolute;left:12px;top:-60px;background:var(--yellow);padding:10px 14px;z-index:100;font-weight:700}
.skip:focus{top:12px}

/* ---------- Botones ---------- */
.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:2px solid var(--black);background:var(--black);color:var(--white);padding:13px 22px;border-radius:var(--radius);text-decoration:none;font-weight:700;cursor:pointer;transition:transform .2s,box-shadow .2s}
.button:hover{transform:translateY(-2px);box-shadow:4px 4px 0 var(--yellow)}
.button.yellow{background:var(--yellow);color:var(--black)}
.button.yellow:hover{box-shadow:4px 4px 0 var(--black)}
.button.ghost{background:transparent;color:var(--black)}
.button.ghost:hover{background:var(--black);color:var(--white);box-shadow:4px 4px 0 var(--white)}
.button[disabled]{opacity:.6;cursor:progress;transform:none;box-shadow:none}
.linklike{background:none;border:0;padding:0;text-decoration:underline;cursor:pointer;font:inherit;color:inherit}

/* ---------- Cabecera ---------- */
.topbar{background:var(--black);color:var(--white);text-align:center;padding:9px 20px;font-size:.88rem;letter-spacing:.02em}
.topbar strong{color:var(--yellow)}
.site-header{position:sticky;top:0;z-index:20;background:var(--purple);border-bottom:2px solid var(--black)}
.nav{height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand img{width:190px;height:auto}
.navlinks{display:flex;gap:28px;align-items:center}
.navlinks a:not(.button){text-decoration:none;font-weight:700;font-size:.95rem}
.navlinks a:not(.button):hover{text-decoration:underline;text-underline-offset:4px}

/* ---------- Titulares ---------- */
h1,h2,h3{font-family:var(--f-title);margin:0;line-height:1.02;letter-spacing:-.02em;font-weight:700}
.eyebrow{display:inline-flex;align-items:center;gap:10px;text-transform:uppercase;font-size:.78rem;font-weight:700;letter-spacing:.14em}
.eyebrow:before{content:'';width:34px;height:3px;background:currentColor}

/* ---------- Hero ---------- */
.hero{overflow:hidden;background:var(--purple);color:var(--black);border-bottom:2px solid var(--black)}
.hero-grid{min-height:640px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:24px;padding:56px 0 48px}
.hero h1{font-size:clamp(3rem,6.6vw,6.4rem);font-weight:800;color:var(--white);max-width:760px;margin:22px 0;text-shadow:3px 3px 0 var(--black)}
.hero h1 .accent{color:var(--yellow)}
.hero p{font-size:1.2rem;max-width:620px;margin:0 0 30px;font-weight:500}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.hero-visual{position:relative;display:flex;align-items:center;justify-content:center;min-height:420px}
.hero-visual img{position:relative;width:100%;max-width:620px;z-index:1}
.circle{position:absolute;border-radius:50%}
.circle.c1{width:62%;aspect-ratio:1;background:var(--yellow);right:4%;top:6%;opacity:.95}
.circle.c2{width:22%;aspect-ratio:1;background:var(--beige);left:2%;bottom:10%}
.screen-note{position:absolute;right:0;bottom:6%;z-index:2;background:var(--white);color:var(--black);padding:14px 16px;border:2px solid var(--black);transform:rotate(-2deg);font-weight:700;max-width:190px;box-shadow:7px 7px 0 var(--black)}

/* ---------- Ticker ---------- */
.ticker{background:var(--yellow);border-bottom:2px solid var(--black);overflow:hidden;white-space:nowrap}
.ticker div{display:inline-block;padding:13px 0;font-family:var(--f-title);font-weight:700;text-transform:uppercase;letter-spacing:.08em;animation:slide 26s linear infinite}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- Secciones ---------- */
.section{padding:96px 0}
.section-head{display:grid;grid-template-columns:.75fr 1.25fr;gap:30px;margin-bottom:52px}
.section-head h2{font-size:clamp(2.3rem,4.6vw,4.4rem)}
.section-head p{font-size:1.15rem;max-width:660px;margin:6px 0 0}

.stats{display:grid;grid-template-columns:repeat(4,1fr);border:2px solid var(--black)}
.stat{padding:30px;border-right:2px solid var(--black);background:var(--white)}
.stat:last-child{border-right:0}
.stat strong{display:block;font-family:var(--f-title);font-weight:800;font-size:clamp(2.4rem,4vw,4.4rem);letter-spacing:-.04em;line-height:.9;color:var(--purple);-webkit-text-stroke:1px var(--black)}
.stat span{display:block;margin-top:15px;font-weight:600}
.source{font-size:.8rem;color:var(--muted);margin-top:16px}

.why{background:var(--black);color:var(--white)}
.why .section-head p{color:var(--grey)}
.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.benefit{min-height:260px;border:1px solid rgba(255,255,255,.3);padding:28px;display:flex;flex-direction:column;justify-content:space-between}
.benefit:nth-child(2){background:var(--purple);color:var(--black);border-color:var(--purple)}
.benefit:nth-child(3){background:var(--yellow);color:var(--black);border-color:var(--yellow)}
.benefit .num{font-family:var(--f-title);font-size:.9rem;font-weight:700}
.benefit h3{font-size:2rem;margin:40px 0 13px}
.benefit p{margin:0}

.platforms{padding-top:84px}
.platform-row{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 55px;padding:0;list-style:none}
.pill{border:2px solid var(--black);border-radius:var(--radius);padding:10px 16px;font-family:var(--f-title);font-weight:600;background:var(--white)}
.objective-shell{display:grid;grid-template-columns:.75fr 1.25fr;border:2px solid var(--black)}
.objective-tabs{background:var(--beige);padding:20px;display:flex;flex-direction:column;gap:10px;border-right:2px solid var(--black)}
.objective-tabs button{text-align:left;border:0;background:transparent;padding:15px;border-radius:10px;font-weight:700;cursor:pointer}
.objective-tabs button:hover{background:rgba(255,255,255,.5)}
.objective-tabs button.active{background:var(--black);color:var(--white)}
.objective-card{padding:42px;min-height:330px;display:flex;flex-direction:column;justify-content:center}
.objective-card .tag{font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;font-weight:700}
.objective-card .tag:before{content:'';display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--purple);margin-right:8px;border:1.5px solid var(--black)}
.objective-card h3{font-size:clamp(2rem,3.6vw,3.4rem);margin:14px 0}
.objective-card p{font-size:1.1rem;max-width:670px}
.formats{display:flex;gap:9px;flex-wrap:wrap;margin-top:12px}
.formats span{background:var(--yellow);border:1.5px solid var(--black);padding:7px 11px;border-radius:5px;font-size:.86rem;font-weight:700}

.process{background:var(--grey)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);border-top:2px solid var(--black);margin:0;padding:0;list-style:none}
.step{padding:28px 24px;border-right:1px solid var(--line)}
.step:last-child{border-right:0}
.step b{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--purple);border:2px solid var(--black);margin-bottom:55px;font-family:var(--f-title)}
.step h3{font-size:1.55rem;margin-bottom:14px}
.step p{margin:0;color:#1e1c22}

.faq{background:var(--white)}
.faq-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:30px}
.faq h2{font-size:clamp(2.3rem,4.6vw,4.4rem)}
.faq-list details{border-top:2px solid var(--black);padding:18px 0}
.faq-list details:last-child{border-bottom:2px solid var(--black)}
.faq-list summary{cursor:pointer;font-family:var(--f-title);font-weight:700;font-size:1.25rem;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:after{content:'+';font-size:1.6rem;line-height:1}
.faq-list details[open] summary:after{content:'–'}
.faq-list p{margin:12px 0 0;max-width:680px}

/* ---------- Contacto ---------- */
.cta{background:var(--yellow);border-top:2px solid var(--black)}
.cta-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:start}
.cta h2{font-size:clamp(3rem,6vw,6rem);margin:18px 0}
.cta-copy p{font-size:1.12rem;max-width:500px}
.direct{display:flex;gap:18px;flex-wrap:wrap;margin-top:28px;font-weight:700}
.direct a{text-decoration-thickness:2px;text-underline-offset:4px}
.contact-card{background:var(--white);border:2px solid var(--black);padding:30px;box-shadow:10px 10px 0 var(--purple)}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field-hint{font-size:.82rem;color:var(--muted);line-height:1.35}
.field.full{grid-column:1/-1}
label{font-size:.85rem;font-weight:700}
input,select,textarea{width:100%;border:1.5px solid var(--black);padding:13px;background:var(--white);border-radius:0}
textarea{min-height:96px;resize:vertical}
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:#b00020;box-shadow:inset 0 0 0 1px #b00020}
.check{flex-direction:row;align-items:flex-start;gap:10px}
.check input{width:20px;height:20px;flex:0 0 20px;margin:1px 0 0;accent-color:var(--purple)}
.check label{font-weight:500;font-size:.88rem;line-height:1.45}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.turnstile{margin-top:14px;min-height:0}
.contact-card .button{width:100%;margin-top:16px}
.form-status{min-height:1.4em;margin:12px 0 0;font-weight:700}
.form-status.error{color:#b00020}
.form-status.ok{color:#0b6b2f}
.form-done{text-align:left}
.form-done h3{font-size:2rem;margin-bottom:10px}
.info-datos{margin-top:16px;font-size:.8rem;color:var(--muted);border-top:1px solid var(--line);padding-top:12px}
.info-datos summary{cursor:pointer;font-weight:700;color:var(--black)}
.info-datos dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:12px 0 0}
.info-datos dt{font-weight:700;color:var(--black)}
.info-datos dd{margin:0}

/* ---------- Pie ---------- */
/* Pie en morado: el imagotipo (somi con contorno negro + wordmark blanco) pierde el contorno sobre negro. Manual: «wordmark blanco sobre morado» */
.site-footer{background:var(--purple);color:var(--black);padding:56px 0 40px;border-top:2px solid var(--black)}
.footer-grid{display:grid;grid-template-columns:1fr auto;align-items:end;gap:40px}
.footer-logo{width:min(400px,100%)}
.footer-meta{text-align:right}
.footer-meta p{margin:4px 0}
.footer-meta a{text-decoration:none}
.legal-links{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:34px;padding-top:20px;border-top:1px solid rgba(0,0,0,.3);font-size:.9rem;font-weight:600}
.lssi{color:var(--black);font-size:.78rem;margin:16px 0 0;max-width:900px}
.site-footer small{display:block;margin-top:12px}

/* ---------- Páginas legales ---------- */
.legal-page{padding:64px 0 96px}
.legal-page h1{font-size:clamp(2.4rem,5vw,4rem);margin-bottom:24px}
.legal-page h2{font-size:1.6rem;margin:40px 0 12px}
.legal-page p,.legal-page li{max-width:780px}
.table-wrap{overflow-x:auto;border:2px solid var(--black);margin:16px 0}
.legal-page table{border-collapse:collapse;width:100%;min-width:640px;font-size:.92rem}
.legal-page th,.legal-page td{padding:10px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.legal-page th{background:var(--beige)}
.back{display:inline-block;margin-bottom:24px;font-weight:700}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .navlinks a:not(.button){display:none}
  .hero-grid,.section-head,.cta-grid,.faq-grid{grid-template-columns:1fr}
  .hero-grid{padding-top:44px;min-height:auto}
  .hero-visual{min-height:380px}
  .stats{grid-template-columns:1fr 1fr}
  .stat:nth-child(2n){border-right:0}
  .stat:nth-child(-n+2){border-bottom:2px solid var(--black)}
  .benefits{grid-template-columns:1fr}
  .objective-shell{grid-template-columns:1fr}
  /* Los tres objetivos tienen que verse enteros: la fila envuelve, no se desplaza en horizontal */
  .objective-tabs{border-right:0;border-bottom:2px solid var(--black);flex-direction:row;flex-wrap:wrap;padding:14px}
  .objective-tabs button{flex:1 1 auto;text-align:center;min-width:max-content}
  .steps{grid-template-columns:1fr 1fr}
  .step:nth-child(2){border-right:0}
  .step:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .step b{margin-bottom:25px}
  .cta-grid{gap:36px}
}
@media(max-width:600px){
  .wrap{width:min(100% - 32px,var(--max))}
  .topbar{font-size:.75rem}
  .nav{height:64px}
  .brand img{width:150px}
  .nav .button{padding:10px 14px;font-size:.9rem}
  .hero h1{font-size:2.9rem;text-shadow:2px 2px 0 var(--black)}
  .hero p{font-size:1.05rem}
  .hero-visual{min-height:300px}
  .screen-note{font-size:.84rem;max-width:160px}
  .stats,.steps{grid-template-columns:1fr}
  .stat,.stat:nth-child(2n){border-right:0;border-bottom:2px solid var(--black)}
  .stat:last-child{border-bottom:0}
  .step{border-right:0;border-bottom:1px solid var(--line)!important}
  .step:last-child{border-bottom:0!important}
  /* En pantalla estrecha «Generar consideración» no cabe en una fila de tres: se apilan */
  .objective-tabs{flex-direction:column;gap:8px}
  .objective-tabs button{width:100%;min-width:0;text-align:left;padding:13px 15px}
  .objective-card{padding:28px 22px}
  .fields{grid-template-columns:1fr}
  .contact-card{padding:22px;box-shadow:6px 6px 0 var(--purple)}
  .footer-grid{grid-template-columns:1fr}
  .footer-meta{text-align:left}
  .info-datos dl{grid-template-columns:1fr}
  .section{padding:72px 0}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ticker div{animation:none}
  .button{transition:none}
}