/* ==========================================================================
   Media Power — Brand Guidelines 2025
   Paleta: Black 000000 · Night 0C0C0C · Eerie Black 232321 · Davy's gray 4D4D4D
           Silver ADADAD · Timberwolf D6D6D6 · White smoke F5F5F5 · White FFFFFF
           Icterine F2FE54 (color de acento)
   Tipografía: Helvetica Neue (Regular titulares y texto / Bold cifras)
   Recursos: flecha ↗\FE0E · líneas de 1px · vértice de imagen 16 grados
   ========================================================================== */
:root{
  --black:#000000; --night:#0C0C0C; --eerie:#232321; --davy:#4D4D4D;
  --silver:#ADADAD; --timber:#D6D6D6; --smoke:#F5F5F5; --white:#FFFFFF;
  --icterine:#F2FE54;
  --sans:'Helvetica Neue',Helvetica,'Inter',Arial,sans-serif;
  --r:16px;
  --pad:clamp(20px,5vw,64px);
  /* tokens contextuales — se reescriben en secciones claras */
  --bg:var(--night); --text:var(--white); --muted:var(--silver);
  --muted-d:#6E6E6C; --rule:#2B2B29;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{background:var(--night);color:var(--white);font-family:var(--sans);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased}
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--pad)}
h1,h2,h3{font-family:var(--sans);font-weight:400;letter-spacing:-.02em;line-height:1}
h1{font-size:clamp(34px,5.6vw,64px)}
h2{font-size:clamp(27px,3.8vw,44px)}
h3{font-size:clamp(19px,2.1vw,26px);line-height:1.05}
a{color:inherit}
b,strong{font-weight:700}

/* eyebrow con la flecha de marca */
.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:9px}
.eyebrow .tick{color:var(--icterine);font-size:14px;line-height:1}
.pend{background:rgba(242,254,84,.20);box-shadow:0 1px 0 var(--icterine);padding:0 3px}

/* ---- logotipo ---- */
.logo{display:inline-flex;align-items:center;text-decoration:none;line-height:0}
.logo img{height:30px;width:auto;display:block}
footer .logo img{height:26px}

/* ---- topbar ---- */
.topbar{background:var(--black);border-bottom:1px solid var(--rule)}
.topbar .wrap{display:flex;gap:20px;align-items:center;justify-content:space-between;padding-top:16px;padding-bottom:16px;flex-wrap:wrap}
.precal{font-size:12.5px;letter-spacing:.02em;color:var(--silver);text-align:right;max-width:530px;line-height:1.4}

/* ---- hero ---- */
.hero{background:var(--night);padding:clamp(46px,7vw,86px) 0 clamp(50px,7vw,92px);position:relative;overflow:hidden}
.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(880px 420px at 50% -12%,rgba(242,254,84,.09),transparent 70%);pointer-events:none}
.hero .wrap{position:relative}
.hero .eyebrow{display:flex;justify-content:center}
.hero h1{max-width:24ch;margin:20px auto 22px;text-align:center}
.hero .sub .sub-b{display:block;margin-top:16px;color:var(--white)}
.hero .sub{color:var(--timber);font-size:clamp(16px,1.7vw,19px);max-width:64ch;margin:0 auto 34px;text-align:center;line-height:1.45}
.vsl{max-width:900px;margin:0 auto;border:1px solid var(--rule);border-radius:var(--r);background:var(--eerie);aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:24px}
.vsl .play{width:66px;height:66px;border-radius:50%;background:var(--icterine);display:flex;align-items:center;justify-content:center}
.vsl .play span{width:0;height:0;border-left:20px solid var(--black);border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:5px}
.vsl .slotnote{font-size:12.5px;color:var(--muted-d);letter-spacing:.06em;text-transform:uppercase}
.hero .below{text-align:center;margin-top:32px}
.proofline{max-width:60ch;margin:26px auto 0;padding-top:22px;border-top:1px solid var(--rule);color:var(--silver);font-size:15px;line-height:1.5}
.proofline b{color:var(--icterine);font-weight:500}

/* ---- botones ---- */
.btn{display:inline-block;background:var(--icterine);color:var(--black);font-weight:500;font-size:17px;letter-spacing:-.01em;padding:17px 34px;border:1px solid var(--icterine);border-radius:var(--r);text-decoration:none;cursor:pointer;font-family:var(--sans);transition:background .15s,color .15s}
.btn:hover{background:transparent;color:var(--icterine)}
.btn:focus-visible{outline:2px solid var(--white);outline-offset:3px}
.btn-sub{display:block;font-size:12px;letter-spacing:.12em;color:var(--muted-d);margin-top:14px;text-transform:uppercase}

/* ---- secciones ---- */
section{padding:clamp(54px,7vw,98px) 0}
.sec-dark{background:var(--black)}
.sec-light{background:var(--night)}
.sec-tint{--text:var(--night);--muted:var(--davy);--muted-d:#8A8A88;--rule:var(--timber);
  background:var(--smoke);color:var(--night)}
.sec-tint .eyebrow{color:var(--davy)}
.sec-tint .eyebrow .tick{color:var(--night)}
.sec-tint .pend{background:rgba(242,254,84,.6);box-shadow:0 1px 0 var(--davy)}
.sec-head{max-width:680px;margin-bottom:44px}
.sec-head h2{margin-top:16px}
.sec-head:after{content:"";display:block;width:100%;height:1px;background:var(--rule);margin-top:26px}

/* ---- banda de cifras sin marca ---- */
.figures{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;margin-top:24px}
@media(min-width:820px){.figures{grid-template-columns:repeat(4,1fr)}}
.figures div{background:var(--eerie);padding:30px 22px}
.figures b{display:block;font-weight:700;font-size:clamp(30px,4vw,46px);letter-spacing:-.035em;line-height:1;color:var(--icterine)}
.figures span{display:block;margin-top:14px;font-size:12.5px;letter-spacing:.06em;color:var(--silver);line-height:1.45}
.fignote{margin-top:18px;font-size:13px;color:var(--muted-d);max-width:70ch;line-height:1.5}

/* ---- casos de éxito ---- */
.cases{display:grid;gap:20px}
.case{background:var(--eerie);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
.sec-tint .case{background:var(--white)}
.case-body{position:relative;padding:clamp(22px,3vw,34px)}
.case .sector{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:9px}
.case-logo{position:absolute;top:clamp(22px,3vw,34px);right:clamp(22px,3vw,34px);background:#fff;border-radius:14px;padding:18px 22px;display:flex;align-items:center;justify-content:center;width:250px;height:108px}
.case-logo img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.case .sector:before{content:"↗\FE0E";color:var(--icterine);font-size:14px}
.sec-tint .case .sector:before{color:var(--davy)}
.case h3{margin:16px 0 12px}
.case p{color:var(--muted);font-size:15.5px;max-width:62ch;line-height:1.45}

/* ---- bloque de conversión ---- */
.cta-grid{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,52px);align-items:start}
@media(min-width:940px){.cta-grid{grid-template-columns:1.05fr .95fr}}
.cta-list{list-style:none;margin-top:26px}
.cta-list li{position:relative;padding-left:32px;margin-bottom:16px;font-size:16px;color:var(--timber);line-height:1.45}
.cta-list li b{color:var(--white);font-weight:700}
.cta-list li:before{content:"↗\FE0E";position:absolute;left:0;top:0;color:var(--icterine);font-size:15px}
.formcard{--text:var(--night);--muted:var(--davy);--rule:var(--timber);
  background:var(--white);color:var(--night);padding:clamp(22px,3vw,32px);border-radius:var(--r)}
.formcard h3{margin-bottom:8px}
.formcard .fnote{font-size:11.5px;letter-spacing:.12em;color:var(--davy);margin-bottom:22px;text-transform:uppercase}
.pasos{display:flex;gap:8px;margin-bottom:20px}
.pasos .paso{flex:1;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--davy);padding-bottom:9px;border-bottom:2px solid var(--timber);opacity:.55}
.pasos .paso.on{opacity:1;color:var(--night);border-bottom-color:var(--night)}
.field{margin-bottom:14px}
.field textarea{width:100%;padding:13px;border:1px solid var(--timber);border-radius:8px;background:var(--smoke);font-family:var(--sans);font-size:15px;color:var(--night);resize:vertical}
.field textarea:focus{outline:2px solid var(--night);border-color:transparent}
.field.err input,.field.err select,.field.err textarea{border-color:#C0392B;background:#FDF3F2}
.hint{font-size:11.5px;color:var(--davy);margin-top:6px;line-height:1.35}
.hint.aviso{color:#8A6D00}
.field label.mini{display:flex;gap:9px;align-items:center;font-size:12.5px;font-weight:400;color:var(--davy);margin:10px 0 0}
.mini input{accent-color:var(--night)}
.split.tel{grid-template-columns:.85fr 1.15fr}
.formcard .btn-sec{background:transparent;color:var(--night);border-color:var(--timber)}
.formcard .btn-sec:hover{background:var(--smoke);color:var(--night);border-color:var(--davy)}
.formcard .split .btn{font-size:15px;padding:16px 18px}
.formcard .split:has(.btn-sec){grid-template-columns:.62fr 1fr}
.field label{display:block;font-size:12.5px;font-weight:700;margin-bottom:6px}
.field input,.field select{width:100%;padding:13px;border:1px solid var(--timber);border-radius:8px;background:var(--smoke);font-family:var(--sans);font-size:15px;color:var(--night)}
.field input:focus,.field select:focus{outline:2px solid var(--night);outline-offset:0;border-color:transparent}
.split{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.divider{margin:22px 0 16px;padding-top:18px;border-top:1px solid var(--timber);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--davy)}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:var(--davy);margin:18px 0 18px;line-height:1.4}
.consent input{margin-top:3px;accent-color:var(--night)}
.formcard .btn{width:100%;text-align:center;background:var(--night);color:var(--icterine);border-color:var(--night)}
.formcard .btn:hover{background:var(--icterine);color:var(--night);border-color:var(--icterine)}

/* ---- logos ---- */
.logos{display:flex;flex-wrap:wrap;justify-content:center;background:#fff;border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
.logos div{flex:0 0 33.3333%;background:#fff;height:100px;text-align:center;padding:0 16px;display:flex;align-items:center;justify-content:center;box-shadow:inset -1px -1px 0 var(--rule)}
@media(min-width:700px){.logos div{flex-basis:25%}}
@media(min-width:1000px){.logos div{flex-basis:20%}}
.logos img{max-height:52px;max-width:82%;width:auto;object-fit:contain;opacity:.78;transition:opacity .15s}
.logos div:hover img{opacity:1}
.logo-fallback{font-size:11px;color:var(--muted-d);letter-spacing:.14em;line-height:1.3}

/* ---- testimonios ---- */
.quotes{display:grid;gap:20px}
@media(min-width:820px){.quotes{grid-template-columns:repeat(3,1fr)}}
.quote{background:var(--eerie);border:1px solid var(--rule);border-radius:var(--r);padding:28px;display:flex;flex-direction:column}
.quote-video{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:12px;margin:0 0 18px;background:var(--night);box-shadow:0 1px 0 rgba(255,255,255,.04) inset}
.quote-video img{width:100%;height:100%;object-fit:cover;display:block;opacity:.88;transition:opacity .15s}
.quote-video:hover img{opacity:1}
.quote p{font-size:15.5px;flex:1;line-height:1.45;color:var(--timber)}
.quote .who{margin-top:22px;padding-top:18px;border-top:1px solid var(--rule);font-size:13px}
.quote .who b{display:block;font-weight:500;font-size:16px;color:var(--white)}
.quote .who span{color:var(--muted);font-size:12px;letter-spacing:.04em}
a.verif{text-decoration:none}
a.verif:hover{color:var(--icterine)}
.verif{display:inline-flex;align-items:center;gap:7px;margin-top:9px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-d)}
.verif:before{content:"↗\FE0E";color:var(--icterine);font-size:12px}

/* ---- metodología ---- */
.steps{display:grid;gap:2px;background:var(--rule);border:2px solid var(--rule);border-radius:var(--r);overflow:hidden}
@media(min-width:820px){.steps{grid-template-columns:repeat(2,1fr)}}
.step{background:var(--night);padding:clamp(26px,3vw,38px)}
.step .n{font-size:11.5px;letter-spacing:.18em;color:var(--icterine)}
.step .area{float:right;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-d)}
.step h3{color:var(--white);margin:18px 0 12px;max-width:20ch}
.step p{color:var(--silver);font-size:15.5px;line-height:1.45}
.step p b{color:var(--white);font-weight:700}

/* ---- diferenciales ---- */
.dif{display:grid;gap:clamp(28px,4vw,56px)}
@media(min-width:900px){.dif{grid-template-columns:1fr 1fr;align-items:start}}
.dif ul{list-style:none}
.dif li{position:relative;padding-left:32px;margin-bottom:17px;font-size:16.5px;line-height:1.45}
.dif li:before{content:"↗\FE0E";position:absolute;left:0;top:0;color:var(--icterine);font-size:15px}
.dif li b{font-weight:700}
.dif p b{color:var(--text);font-weight:700}
.sec-tint .dif li:before{color:var(--davy)}
.enlace-equipo{display:inline-flex;align-items:center;font-size:15.5px;font-weight:500;color:var(--text);text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:3px;transition:border-color .15s}
.enlace-equipo:hover{border-bottom-color:var(--text)}
.nums{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;margin-top:34px}
.nums div{background:var(--smoke);padding:26px 16px;text-align:center}
.sec-light .nums div,.sec-dark .nums div{background:var(--eerie)}
.nums b{display:block;font-weight:700;font-size:clamp(28px,3.6vw,42px);letter-spacing:-.03em;line-height:1}
.nums span{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:block;margin-top:12px;line-height:1.4}

/* ---- cierre ---- */
.final{--text:var(--black);--muted:rgba(0,0,0,.62);--rule:rgba(0,0,0,.25);
  background:var(--icterine);color:var(--black);text-align:center}
.final .eyebrow{color:rgba(0,0,0,.6);justify-content:center}
.final .eyebrow .tick{color:var(--black)}
.final h2{max-width:22ch;margin:18px auto 18px}
.final p{max-width:56ch;margin:0 auto 32px;font-size:17px;line-height:1.45}
.final .btn{background:var(--black);color:var(--icterine);border-color:var(--black)}
.final .btn:hover{background:transparent;color:var(--black)}
.final .claim{display:block;margin-top:34px;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:rgba(0,0,0,.55)}

footer{background:var(--black);color:var(--muted-d);padding:38px 0;font-size:13px;border-top:1px solid var(--rule)}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
footer a{color:var(--silver);text-decoration:none;margin-right:20px}
footer a:hover{color:var(--icterine)}
footer .claim{color:var(--muted-d);letter-spacing:.14em;text-transform:uppercase;font-size:11px}

/* ---- embudo completo (clínicas) ---- */
.funnel{margin-top:8px}
.frail{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
@media(min-width:900px){.frail{grid-template-columns:repeat(7,1fr)}}
.fstage{background:var(--white);padding:22px 14px;display:flex;flex-direction:column;gap:10px;min-height:122px}
.fstage .fnum{font-size:11px;letter-spacing:.18em;color:#8A8A88}
.fstage b{font-weight:500;font-size:15.5px;line-height:1.15}
.fstage.own{background:var(--night);box-shadow:inset 0 3px 0 var(--icterine)}
.fstage.own b{color:var(--white)}
.fstage.own .fnum{color:var(--icterine)}
.fcaps{display:grid;grid-template-columns:1fr;gap:1px;margin-top:16px}
@media(min-width:900px){.fcaps{grid-template-columns:3fr 4fr;gap:16px}}
.fcaps span{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:block;line-height:1.5}
.fcaps span.b{color:var(--night);font-weight:700}
.fcaps span.b:before{content:"↗\FE0E";display:inline-block;margin-right:9px;color:var(--night)}

/* ---- normativa (clínicas) ---- */
.pol{border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
.polrow{display:grid;grid-template-columns:1fr;border-bottom:1px solid var(--rule)}
@media(min-width:820px){.polrow{grid-template-columns:1.1fr 1.1fr}}
.polrow:last-child{border-bottom:0}
.polrow>div{padding:22px clamp(18px,2.4vw,28px);background:var(--eerie)}
.polrow>div:first-child{border-bottom:1px solid var(--rule)}
@media(min-width:820px){.polrow>div:first-child{border-bottom:0;border-right:1px solid var(--rule)}}
.polrow .tag{font-size:11px;letter-spacing:.16em;text-transform:uppercase;display:flex;align-items:center;gap:8px;margin-bottom:12px;font-weight:700}
.polrow .no .tag{color:var(--silver)}
.polrow .si .tag{color:var(--icterine)}
.polrow p{font-size:15.5px;color:var(--timber);line-height:1.5}
.polrow .rule{display:block;margin-top:10px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-d)}

/* nota interna de maquetación: borrar .buildnote antes de publicar */
.formcard .btn[type="submit"],.formcard .btn[data-ir="2"]{background:var(--night);color:var(--icterine);border-color:var(--night)}
.formcard .btn[type="submit"]:hover,.formcard .btn[data-ir="2"]:hover{background:var(--icterine);color:var(--night);border-color:var(--icterine)}
.formcard .btn[data-ir="1"]{background:#fff;color:var(--davy);border-color:var(--timber)}
.formcard .btn[data-ir="1"]:hover{background:var(--smoke);color:var(--night);border-color:var(--davy)}

.buildnote{background:var(--icterine);color:var(--black);font-size:11.5px;padding:9px var(--pad);letter-spacing:.06em;font-weight:700}
.cta-grid p b{color:var(--white);font-weight:700}

/* Arreglo del conversor: logo de los casos */
.case-logo{position:static;width:auto;max-width:210px;height:84px;margin:14px 0 2px;padding:14px 18px}
@media(min-width:820px){
.case-body{padding-right:calc(250px + 2*clamp(22px,3vw,34px))}
.case-logo{position:absolute;width:250px;max-width:none;height:108px;margin:0;padding:18px 22px}
}