/* Fuentes propias (Montserrat e Inter, OFL), servidas desde el sitio */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500 800;font-display:swap;src:url(/assets/fonts/montserrat-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500 800;font-display:swap;src:url(/assets/fonts/montserrat-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Montserrat Fallback";src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("Helvetica");ascent-override:85.79%;descent-override:22.25%;line-gap-override:0%;size-adjust:112.83%}
@font-face{font-family:"Inter Fallback";src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("Helvetica");ascent-override:90.44%;descent-override:22.52%;line-gap-override:0%;size-adjust:107.12%}
/* AR Marketing Digital · sitio 2026
   Oscuro, amarillo de marca, Montserrat para títulos e Inter para leer. */
:root{
  --bg:#0b0b0c; --bg2:#111113; --surface:#16161a; --surface2:#1d1d22; --line:#2a2a30;
  --ink:#f4f2ee; --muted:#a8a49c; --soft:#d9d5cc;
  --accent:#ffc72c; --accent-ink:#141210; --pink:#f2295b; --ok:#4fd1a5;
  --display:"Montserrat", "Montserrat Fallback", Arial, sans-serif;
  --body:"Inter", "Inter Fallback", Arial, sans-serif;
  --r:14px; --wrap:1180px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.65 var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-underline-offset:3px}
a:hover{color:#ffd866}
h1,h2,h3,h4{font-family:var(--display);line-height:1.12;margin:0 0 .5em;letter-spacing:-.015em;text-wrap:balance}
h1{font-size:clamp(2.3rem,5.6vw,4.3rem);font-weight:800}
h2{font-size:clamp(1.75rem,3.4vw,2.7rem);font-weight:800}
h3{font-size:1.2rem;font-weight:700}
p{margin:0 0 1em}
ul{margin:0 0 1em;padding-left:1.2em}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:20px}
.narrow{max-width:820px}
.muted{color:var(--muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:var(--accent-ink);padding:8px 14px;border-radius:8px;z-index:100}
.skip:focus{left:12px}
.eyebrow{font:700 .78rem/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 14px}
.hl{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 .98rem/1 var(--display);padding:16px 24px;border-radius:999px;text-decoration:none;border:1.5px solid transparent;transition:transform .15s ease, background .15s ease;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:#ffd451;color:var(--accent-ink)}
.btn-ghost{border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--soft);color:var(--ink)}
.btn-sm{padding:11px 18px;font-size:.88rem}

/* cabecera */
.top{position:sticky;top:0;z-index:50;background:rgba(11,11,12,.86);backdrop-filter:saturate(140%) blur(12px);-webkit-backdrop-filter:saturate(140%) blur(12px);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;justify-content:space-between;height:70px;gap:16px}
.logo img,.pie-logo{filter:invert(1);width:156px;height:auto}
.menu{display:flex;align-items:center;gap:28px}
.menu ul{display:flex;gap:26px;list-style:none;margin:0;padding:0;align-items:center}
.menu a:not(.btn),.sub-toggle{color:var(--soft);text-decoration:none;font:600 .93rem var(--display);background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:6px 0}
.menu a:not(.btn):hover,.sub-toggle:hover,.menu a[aria-current]{color:var(--ink)}
.has-sub{position:relative}
.sub{position:absolute;top:calc(100% + 12px);left:-18px;min-width:270px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px;list-style:none;display:none !important;flex-direction:column;gap:2px !important;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.sub a{display:block !important;padding:10px 12px !important;border-radius:8px}
.sub a:hover{background:var(--surface2)}
.has-sub:hover .sub,.has-sub.open .sub{display:flex !important}
.has-sub::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px}
.menu-toggle{display:none;background:none;border:0;width:44px;height:44px;cursor:pointer;position:relative}
.menu-toggle span:not(.sr){position:absolute;left:11px;right:11px;height:2px;background:var(--ink);transition:transform .2s}
.menu-toggle span:nth-child(1){top:17px}.menu-toggle span:nth-child(2){top:25px}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(4px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}

.migas{display:flex;gap:8px;font-size:.84rem;color:var(--muted);padding-top:22px;flex-wrap:wrap}
.migas a{color:var(--muted);text-decoration:none}.migas a:hover{color:var(--ink)}

/* secciones */
.sec{padding:clamp(64px,9vw,112px) 0}
.sec.tight{padding-top:24px}
.sec-alt{background:var(--bg2);border-block:1px solid var(--line)}
.sec-head{max-width:760px;margin-bottom:44px}
.sec-head p{color:var(--soft);font-size:1.08rem}
.lead{font-size:clamp(1.08rem,1.6vw,1.25rem);color:var(--soft);max-width:680px}

/* hero */
.hero{padding:clamp(48px,8vw,96px) 0 clamp(56px,8vw,96px);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:-30% -10% auto auto;width:720px;height:720px;background:radial-gradient(closest-side,rgba(255,199,44,.16),transparent);pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;position:relative}
.hero h1 .hl{display:inline}
.hero .lead{margin:22px 0 30px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-meta{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:30px;color:var(--muted);font-size:.9rem}
.hero-meta b{color:var(--ink);font-family:var(--display)}

/* embudo visual */
.funnel{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:26px;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.funnel-t{font:700 .78rem var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:18px;display:flex;justify-content:space-between}
.f-row{display:grid;grid-template-columns:118px 1fr;align-items:center;gap:12px;margin-bottom:12px;font-size:.92rem}
.f-row span{color:var(--soft)}
.f-bar{height:38px;border-radius:9px;background:linear-gradient(90deg,var(--accent),#ffdf7a);display:flex;align-items:center;padding-left:12px;color:var(--accent-ink);font:700 .82rem var(--display)}
.f-row:nth-child(3) .f-bar{width:78%;opacity:.92}
.f-row:nth-child(4) .f-bar{width:58%;opacity:.84}
.f-row:nth-child(5) .f-bar{width:40%;opacity:.76}
.f-row:nth-child(6) .f-bar{width:26%;background:var(--ok);opacity:1}
.funnel-foot{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-size:.88rem;color:var(--muted)}
.funnel-foot b{color:var(--ink);font-family:var(--display)}

/* tarjetas y grillas */
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:26px;display:flex;flex-direction:column;gap:6px;min-width:0}
.card p{color:var(--soft);margin:0}
.card h3{margin-bottom:6px}
a.card{text-decoration:none;color:inherit;transition:border-color .15s, transform .15s}
a.card:hover{border-color:var(--accent);transform:translateY(-2px)}
.card .more{margin-top:auto;padding-top:14px;color:var(--accent);font:700 .9rem var(--display)}
.card .ico{width:42px;height:42px;border-radius:11px;background:rgba(255,199,44,.12);color:var(--accent);display:grid;place-items:center;margin-bottom:10px;font:800 1rem var(--display)}
.pain{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.pain li{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--pink);border-radius:10px;padding:18px 20px;color:var(--soft)}
.pain li b{color:var(--ink)}

/* pasos */
.steps{counter-reset:s;display:grid;gap:14px;list-style:none;padding:0;margin:0}
.steps li{counter-increment:s;display:grid;grid-template-columns:56px 1fr;gap:18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.steps li::before{content:counter(s,decimal-leading-zero);font:800 1.5rem/1 var(--display);color:var(--accent)}
.steps h3{margin:0 0 4px}
.steps p{margin:0;color:var(--soft)}

/* medición */
.metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.metrics div{background:var(--surface);padding:22px 18px}
.metrics b{display:block;font:800 1.05rem var(--display);margin-bottom:6px}
.metrics span{color:var(--muted);font-size:.9rem}

/* testimonios */
.quote{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:26px;display:flex;flex-direction:column;gap:16px;margin:0}
.quote blockquote{margin:0;font:500 1.08rem/1.55 var(--body);color:var(--ink)}
.quote figcaption{color:var(--muted);font-size:.9rem;margin-top:auto}
.quote figcaption b{color:var(--ink);display:block;font-family:var(--display)}

/* tabla */
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}
table{border-collapse:collapse;width:100%;min-width:620px;font-size:.95rem}
th,td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{font:700 .8rem var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--surface2)}
td{background:var(--surface);color:var(--soft)}
tr:last-child td{border-bottom:0}
td b{color:var(--ink)}

/* prosa */
.prose{max-width:760px}
.prose p,.prose li{color:var(--soft)}
.prose h2{margin-top:1.6em}
.prose h3{margin-top:1.4em}
.check{list-style:none;padding:0;display:grid;gap:10px}
.check li{position:relative;padding-left:30px;color:var(--soft)}
.check li::before{content:"";position:absolute;left:2px;top:.45em;width:14px;height:8px;border-left:2.5px solid var(--accent);border-bottom:2.5px solid var(--accent);transform:rotate(-45deg)}
.note{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:10px;padding:18px 20px;color:var(--soft)}

/* faq */
.faq-list{display:grid;gap:10px}
.faq-item{background:var(--surface);border:1px solid var(--line);border-radius:12px}
.faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 22px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary h3{margin:0;font-size:1.04rem;font-weight:700}
.faq-icon{flex:none;width:22px;height:22px;position:relative}
.faq-icon::before,.faq-icon::after{content:"";position:absolute;left:4px;right:4px;top:10px;height:2px;background:var(--accent);transition:transform .2s}
.faq-icon::after{transform:rotate(90deg)}
.faq-item[open] .faq-icon::after{transform:rotate(0)}
.faq-a{padding:0 22px 20px;color:var(--soft)}
.faq-a p{margin:0}

/* cta final */
.cta-box{background:linear-gradient(135deg,#1c1a12,#141416 60%);border:1px solid #3a3420;border-radius:22px;padding:clamp(28px,5vw,56px);display:grid;grid-template-columns:1.4fr 1fr;gap:32px;align-items:center}
.cta-box p{color:var(--soft);margin:0}
.cta-actions{display:flex;flex-direction:column;gap:12px}

/* pie */
.pie{border-top:1px solid var(--line);padding:56px 0 28px;color:var(--muted);font-size:.93rem}
.pie-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.2fr;gap:28px}
.pie-logo{margin-bottom:16px}
.pie ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.pie a{color:var(--soft);text-decoration:none}.pie a:hover{color:var(--ink)}
.pie-t{font:700 .78rem var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.pie-base{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--line);margin-top:40px;padding-top:20px;font-size:.84rem;flex-wrap:wrap}

.wa-float{position:fixed;right:18px;bottom:18px;width:56px;height:56px;border-radius:50%;background:#25d366;color:#fff;display:grid;place-items:center;box-shadow:0 10px 26px rgba(0,0,0,.4);z-index:40}
.wa-float:hover{color:#fff;transform:scale(1.05)}

/* responsive */
@media (max-width:980px){
  .hero-grid,.cta-box{grid-template-columns:1fr}
  .g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pie-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .menu-toggle{display:block}
  .menu{position:fixed;inset:70px 0 auto 0;background:var(--bg);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:18px;padding:20px;display:none;max-height:calc(100vh - 70px);overflow:auto}
  .menu.open{display:flex}
  .menu ul{flex-direction:column;align-items:stretch;gap:4px}
  .menu a:not(.btn),.sub-toggle{padding:12px 0;font-size:1.05rem;width:100%;justify-content:space-between}
  .sub{position:static;display:flex !important;box-shadow:none;border:0;background:none;padding:0 0 0 14px;min-width:0}
  .has-sub::after{display:none}
  .sub-toggle svg{display:none}
}
@media (max-width:620px){
  body{font-size:16px}
  .g2,.g3,.g4,.metrics{grid-template-columns:1fr}
  .pie-grid{grid-template-columns:1fr}
  .steps li{grid-template-columns:1fr;gap:8px}
  .f-row{grid-template-columns:92px 1fr}
  .hero-actions .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important;scroll-behavior:auto !important}}

/* artículos */
.art-head{padding:clamp(40px,6vw,72px) 0 8px}
.art-head h1{font-size:clamp(2rem,4.4vw,3.2rem)}
.art-meta{color:var(--muted);font-size:.9rem;margin-top:10px}
.art{max-width:760px}
.art img{border-radius:12px;margin:8px 0 22px;border:1px solid var(--line)}
.art p,.art li{color:var(--soft)}
.art h2{font-size:clamp(1.4rem,2.6vw,1.9rem);margin-top:1.6em}
.art h3{margin-top:1.4em}
.art blockquote{border-left:3px solid var(--accent);margin:1.2em 0;padding:4px 0 4px 18px;color:var(--ink)}
.art-cta{margin-top:40px}
.blog-list{display:grid;gap:18px;grid-template-columns:repeat(3,minmax(0,1fr))}
.blog-card img{border-radius:10px;aspect-ratio:16/9;object-fit:cover;width:100%;margin-bottom:12px}
@media (max-width:980px){.blog-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.blog-list{grid-template-columns:1fr}}

/* video de testimonio (carga al hacer clic) */
.yt{position:relative;display:block;width:100%;aspect-ratio:16/9;border:0;padding:0;border-radius:12px;overflow:hidden;cursor:pointer;background:#000;margin:4px 0 6px}
.yt img{width:100%;height:100%;object-fit:cover;opacity:.85;transition:opacity .2s}
.yt:hover img{opacity:1}
.yt-play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:var(--accent);box-shadow:0 8px 24px rgba(0,0,0,.45)}
.yt-play::after{content:"";position:absolute;left:26px;top:20px;border-left:18px solid var(--accent-ink);border-top:12px solid transparent;border-bottom:12px solid transparent}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.metrics.m4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){.metrics.m4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.metrics.m4{grid-template-columns:1fr}}

/* equipo */
.equipo{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.persona{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.persona img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:top;background:#f4f4f2}
.persona figcaption{padding:14px 16px}
.persona b{display:block;font:700 1.05rem var(--display)}
.persona span{color:var(--muted);font-size:.9rem}
@media (max-width:980px){.equipo{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fundador-foto{border-radius:var(--r);border:1px solid var(--line);background:#f4f4f2;max-width:340px;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:top}

/* calculadora */
.calc{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:start}
.calc-form{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:26px;display:grid;gap:18px}
.calc-form label{display:grid;gap:8px;font:600 .95rem var(--display);color:var(--ink)}
.calc-form input{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:13px 14px;color:var(--ink);font:500 1.05rem var(--body);width:100%}
.calc-form input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.calc-form small{font:400 .84rem var(--body);color:var(--muted)}
.calc-out{background:linear-gradient(135deg,#1c1a12,#141416 60%);border:1px solid #3a3420;border-radius:var(--r);padding:26px;display:grid;gap:18px;position:sticky;top:90px}
.calc-big{display:grid;gap:4px}
.calc-big span{color:var(--soft);font-size:.95rem}
.calc-big b{font:800 clamp(2rem,4vw,2.8rem)/1.1 var(--display);color:var(--accent)}
.calc-rows{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.calc-rows div{display:flex;justify-content:space-between;gap:12px;background:var(--surface);padding:12px 14px;font-size:.92rem}
.calc-rows span{color:var(--soft)} .calc-rows b{font-family:var(--display);white-space:nowrap}
.calc-note{font-size:.82rem;margin:0}
@media (max-width:860px){.calc{grid-template-columns:1fr}.calc-out{position:static}}

/* QA 7 nov 2026 */
.blog-card h2{font-size:1.2rem;font-weight:700;margin-bottom:6px}
.f-bar{white-space:nowrap;overflow:hidden;min-width:fit-content;padding-right:10px}
@media (max-width:620px){
  .f-row{grid-template-columns:104px 1fr;font-size:.82rem}
  .f-bar{font-size:.72rem;height:34px;padding-left:8px}
  .pie{padding-bottom:96px}
  .tbl{border:0;background:none;overflow:visible}
  .tbl table{min-width:0}
  .tbl thead{display:none}
  .tbl tr{display:block;background:var(--surface);border:1px solid var(--line);border-radius:12px;margin-bottom:12px;overflow:hidden}
  .tbl td{display:grid;grid-template-columns:42% 1fr;gap:10px;border-bottom:1px solid var(--line);background:none}
  .tbl td::before{content:attr(data-label);font:700 .72rem var(--display);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
  .tbl td:first-child{display:block;background:var(--surface2)}
  .tbl td:first-child::before{content:none}
  .tbl tr td:last-child{border-bottom:0}
}

/* Fase 1 de diseño (7 nov 2026): referencias Apple, Jeton y Redsun */
h1{font-weight:700;letter-spacing:-.028em}
h2{font-weight:700;letter-spacing:-.022em}
.top{background:rgba(11,11,12,.72)}

/* encabezado centrado con el panel de Informes AR */
.hero-c{padding:clamp(56px,8vw,104px) 0 0;overflow:hidden}
.hero-c::before{display:none}
.hero-txt{text-align:center;max-width:1000px;margin:0 auto}
.hero-c h1{font-size:clamp(2.3rem,5.4vw,4.4rem);line-height:1.06}
.hero-c .lead{margin:22px auto 30px}
.hero-c .hero-actions,.hero-c .hero-meta{justify-content:center}
.panel-demo{position:relative;margin:clamp(48px,7vw,80px) auto 0;max-width:1060px}
.panel-demo::before{content:"";position:absolute;left:50%;top:-230px;width:min(1400px,150vw);height:520px;transform:translateX(-50%);background:radial-gradient(ellipse 40% 34% at 50% 50%,rgba(255,199,44,.34),rgba(255,150,20,.12) 48%,transparent 72%);pointer-events:none;z-index:0}
.panel-demo::after{content:"";position:absolute;left:8%;right:8%;top:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,214,102,.9),transparent);z-index:2}
.pd{position:relative;z-index:1;background:linear-gradient(180deg,#17171b,#111114);border:1px solid #34343c;border-radius:22px 22px 0 0;border-bottom:0;box-shadow:0 -24px 90px rgba(255,190,40,.20);overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent);mask-image:linear-gradient(180deg,#000 72%,transparent)}
.pd-bar{display:flex;align-items:center;gap:14px;padding:14px 20px;border-bottom:1px solid var(--line);font-size:.82rem;color:var(--muted);white-space:nowrap;overflow:hidden}
.pd-bar b{font:700 .9rem var(--display);color:var(--ink);margin-right:8px}
.pd-dots{display:flex;gap:6px}.pd-dots i{width:10px;height:10px;border-radius:50%;background:#2e2e35}
.pd-tab{padding:6px 12px;border-radius:999px}.pd-tab.on{background:var(--surface2);color:var(--ink)}
.pd-tag{margin-left:auto;font:700 .68rem var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);border:1px solid rgba(255,199,44,.35);border-radius:999px;padding:5px 10px}
.pd-body{padding:22px 22px 40px;display:grid;gap:12px;text-align:left}
.pd-head{display:flex;align-items:baseline;gap:12px}.pd-head b{font:700 1.35rem var(--display)}.pd-head span{color:var(--muted);font-size:.85rem}
.pd-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.pd-kpis div,.pd-mini div,.pd-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 18px;min-width:0}
.pd-kpis span,.pd-mini span{display:block;color:var(--muted);font-size:.8rem}
.pd-kpis b{display:block;font:600 clamp(1.4rem,3.2vw,2.3rem)/1.1 var(--body);letter-spacing:-.02em;margin-top:6px;font-variant-numeric:tabular-nums}
.pd-kpis em{font-style:normal;font-size:.78rem;font-weight:600;color:var(--ok)}
.pd-mini{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.pd-mini div{padding:12px 16px}.pd-mini b{font:600 1.15rem var(--body);font-variant-numeric:tabular-nums}
.pd-cols{display:grid;grid-template-columns:1.1fr .9fr;gap:12px}
.pd-t{display:block;font-size:.8rem;color:var(--muted);margin-bottom:12px}
.pd-f{display:grid;grid-template-columns:86px 1fr 36px;align-items:center;gap:10px;font-size:.8rem;color:var(--soft);margin-bottom:8px}
.pd-f i{display:block;height:12px;border-radius:6px;background:linear-gradient(90deg,var(--accent),#ffdf7a)}.pd-f i.ok{background:var(--ok)}
.pd-f b{text-align:right;font-variant-numeric:tabular-nums}
.pd-bars{height:96px;display:flex;align-items:flex-end;gap:10px;border-bottom:1px solid var(--line)}
.pd-bars i{flex:1;border-radius:6px 6px 0 0;background:#3a3a42}.pd-bars i.now{background:var(--accent)}
.pd-x{display:flex;gap:10px;margin-top:6px}.pd-x span{flex:1;text-align:center;font-size:.7rem;color:var(--muted)}
.panel-demo figcaption{position:relative;z-index:2;text-align:center;color:var(--muted);font-size:.86rem;margin:-26px 0 0;padding-bottom:28px}
.panel-demo figcaption b{color:var(--soft)}

/* franja de logos */
.logos{padding:30px 0 34px;border-block:1px solid var(--line);background:var(--bg2)}
.logos p{text-align:center;color:var(--muted);font-size:.86rem;margin:0 0 20px}
.logos ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:22px 52px}
.logos img{height:40px;width:auto;opacity:.62;transition:opacity .2s}
.logos li:hover img{opacity:1}
@media (min-width:981px){.logos ul{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));justify-items:center;gap:30px 40px}.logos img{height:38px}}

/* servicios en cuadrícula bento */
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}
.bento .card{grid-column:span 2;padding:24px;gap:6px;overflow:hidden}
.bento .b-wide{grid-column:span 4}
.bento .b-full{grid-column:span 6}
.b-full-in{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center}
.viz{background:var(--bg2);border:1px solid var(--line);border-radius:12px;margin-bottom:16px;padding:14px;min-height:112px;display:flex;font-size:.78rem;color:var(--soft)}
.v-stages{align-items:center;gap:8px;flex-wrap:wrap}
.v-stages span{border:1px solid var(--line);border-radius:999px;padding:7px 12px;color:var(--muted);position:relative}
.v-stages span.on{border-color:rgba(255,199,44,.5);color:var(--ink);background:rgba(255,199,44,.08)}
.v-stages span.on::before{content:"✓ ";color:var(--accent)}
.v-ads{flex-direction:column;justify-content:space-between;gap:10px}
.v-spark{display:flex;align-items:flex-end;gap:6px;height:62px}.v-spark i{flex:1;background:linear-gradient(180deg,var(--accent),rgba(255,199,44,.25));border-radius:4px 4px 0 0}
.v-ads span{color:var(--muted)}
.v-kanban{gap:8px}.v-kanban div{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.v-kanban span{color:var(--muted);font-size:.72rem;margin-bottom:2px}
.v-kanban i{display:block;height:16px;border-radius:5px;background:var(--surface2);border:1px solid var(--line)}.v-kanban i.ok{background:rgba(79,209,165,.25);border-color:rgba(79,209,165,.5)}
.v-chat{flex-direction:column;gap:6px;justify-content:center}
.v-chat span{max-width:88%;padding:6px 10px;border-radius:10px;line-height:1.3}
.v-chat .in{background:var(--surface2);align-self:flex-start;border-bottom-left-radius:3px}
.v-chat .out{background:#1f3b2f;color:#d6f5e6;align-self:flex-end;border-bottom-right-radius:3px}
.v-chat .out.ok{background:rgba(255,199,44,.15);color:var(--ink)}
.v-page{flex-direction:column;gap:7px;align-items:center;justify-content:center}
.v-page .t{display:block;width:70%;height:8px;border-radius:4px;background:#3a3a42}.v-page .t.s{width:46%;background:#2c2c33}
.v-vid{width:62%;height:38px;border-radius:7px;background:#232329;display:grid;place-items:center}
.v-vid b{width:0;height:0;border-left:10px solid var(--accent);border-top:7px solid transparent;border-bottom:7px solid transparent}
.v-page .bt{display:block;width:34%;height:12px;border-radius:999px;background:var(--accent)}
.v-reels{min-height:0;margin:0;gap:10px;padding:10px;background:none;border:0}
.v-reels span{width:78px;height:112px;border-radius:10px;border:1px solid var(--line);background:linear-gradient(180deg,#232329,#16161a);display:flex;align-items:flex-end;justify-content:center;padding-bottom:10px;color:var(--soft);font-size:.74rem}
.v-reels span:nth-child(2){border-color:rgba(255,199,44,.45)}

@media (max-width:980px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bento .card,.bento .b-wide{grid-column:span 1}
  .bento .b-full{grid-column:span 2}
  .pd-mini{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .hero-c{text-align:left}
  .hero-txt{text-align:left}
  .hero-c .hero-actions,.hero-c .hero-meta{justify-content:flex-start}
  .pd-bar .pd-tab,.pd-dots{display:none}
  .pd-mini div:nth-child(n+3){display:none}
  .pd-body{padding:14px 12px 34px;gap:10px}
  .pd-kpis{gap:8px}.pd-kpis div{padding:12px 10px}
  .pd-kpis span{font-size:.7rem}.pd-kpis b{font-size:1.15rem}
  .pd-cols{grid-template-columns:1fr}.pd-chart{display:none}
  .logos ul{gap:18px 30px}.logos img{height:30px}
  .bento{grid-template-columns:1fr}
  .bento .card,.bento .b-wide,.bento .b-full{grid-column:span 1}
  .b-full-in{grid-template-columns:1fr}
  .v-reels{justify-content:flex-start;padding:0}
}

/* Fase 2 de diseño (7 nov 2026) */
/* franja clara */
.sec-light{background:#f4f2ee;color:#141210;border:0}
.sec-light .eyebrow{color:#8a6200}
.sec-light h2,.sec-light h3{color:#141210}
.sec-light .sec-head p{color:#4a463f}
.sec-light .quote{background:#fff;border-color:#e3ddd1;box-shadow:0 1px 2px rgba(20,18,16,.04),0 14px 34px rgba(20,18,16,.07)}
.sec-light .quote blockquote{color:#141210}
.sec-light .quote figcaption{color:#5c574e}.sec-light .quote figcaption b{color:#141210}
.sec-light a:not(.btn){color:#141210;text-decoration:underline;text-decoration-color:#c99a00;text-decoration-thickness:2px}
.sec-light a:not(.btn):hover{color:#000}
.sec-light :focus-visible{outline-color:#141210}

/* línea de pasos */
.steps li{position:relative;background:none;border:0;border-radius:0;padding:0 0 30px;grid-template-columns:52px 1fr;gap:20px}
.steps li::before{width:48px;height:48px;border-radius:50%;border:1.5px solid rgba(255,199,44,.55);background:var(--bg2);display:grid;place-items:center;font:700 .95rem/1 var(--display);color:var(--accent);position:relative;z-index:1}
.steps li:first-child::before{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.steps li::after{content:"";position:absolute;left:24px;top:54px;bottom:6px;width:1.5px;background:linear-gradient(180deg,rgba(255,199,44,.45),var(--line))}
.steps li:last-child{padding-bottom:0}.steps li:last-child::after{display:none}
.steps h3{padding-top:10px}
@media (min-width:981px){
  .steps-h{grid-template-columns:repeat(5,minmax(0,1fr));gap:0}
  .steps-h li{grid-template-columns:1fr;gap:18px;padding:0 22px 0 0;align-content:start}
  .steps-h li::after{left:60px;right:10px;top:24px;bottom:auto;width:auto;height:1.5px;background:linear-gradient(90deg,rgba(255,199,44,.45),var(--line))}
  .steps-h h3{padding-top:0}
}
@media (max-width:620px){.steps li{grid-template-columns:48px 1fr;gap:16px}}

/* cierre con chat de WhatsApp */
.cta-box{position:relative;overflow:hidden;grid-template-columns:1.25fr .75fr;gap:40px}
.cta-box::before{content:"";position:absolute;right:-120px;top:50%;width:520px;height:520px;transform:translateY(-50%);background:radial-gradient(closest-side,rgba(255,199,44,.18),transparent);pointer-events:none}
.cta-box>*{position:relative}
.cta-box .cta-actions{flex-direction:row;flex-wrap:wrap;margin-top:26px}
@media (max-width:980px){.cta-box{grid-template-columns:1fr}.wa-card{max-width:420px}}
@media (max-width:620px){.cta-box .cta-actions .btn{width:100%}}

/* aparición suave al hacer scroll (solo con JavaScript y si la persona no pidió menos movimiento) */
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease var(--d,0ms),transform .7s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
.rv.rv-in{opacity:1;transform:none}

/* Storytelling (7 nov 2026): puentes entre secciones y chat de WhatsApp del cierre */
.puente{font:700 clamp(1.15rem,2vw,1.4rem)/1.3 var(--display);color:var(--accent);margin:40px 0 0;letter-spacing:-.01em}
.wa-card{background:#0f1714;border:1px solid #1f3b2f;border-radius:18px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.wa-h{display:flex;align-items:center;gap:12px;padding:14px 16px;background:#13241d;border-bottom:1px solid #1f3b2f}
.wa-av{width:38px;height:38px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font:800 .82rem var(--display)}
.wa-h b{display:block;font:700 .95rem var(--display)}.wa-h div span{font-size:.78rem;color:#8fbfa8}
.wa-body{padding:16px;display:grid;gap:10px}
.wa-body p{margin:0;max-width:88%;padding:9px 12px;border-radius:12px;font-size:.88rem;line-height:1.45}
.wa-out{justify-self:end;background:#1f5c45;color:#e9f7ef;border-bottom-right-radius:4px}
.wa-in{justify-self:start;background:#1d1d22;color:var(--soft);border-bottom-left-radius:4px}
.wa-note{margin:0;padding:0 16px 14px;font-size:.78rem;color:#8fbfa8}

/* casos contados (antes, qué hicimos, después) */
.beats{display:grid;gap:10px;margin:2px 0 4px}
.beats div{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:baseline}
.beats dt{font:700 .7rem var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.beats dd{margin:0;color:var(--soft);font-size:.95rem;line-height:1.55}
.caso blockquote{border-top:1px solid var(--line);padding-top:14px}
@media (max-width:620px){.beats div{grid-template-columns:1fr;gap:2px}}

/* último caso (impar): a todo el ancho, video a la izquierda */
.caso-ancho{grid-column:1/-1}
@media (min-width:981px){
  .caso-ancho{display:grid;grid-template-columns:1fr 1fr;column-gap:40px;row-gap:14px;align-items:start}
  .caso-ancho>.eyebrow,.caso-ancho>h2{grid-column:1/-1}
  .caso-ancho .yt{grid-column:1;grid-row:3/6;margin:0}
  .caso-ancho .beats{grid-column:2;grid-row:3}
  .caso-ancho blockquote{grid-column:2;grid-row:4}
  .caso-ancho figcaption{grid-column:2;grid-row:5}
}

/* herramientas propias */
.tools .card{gap:8px}
.tools .viz{min-height:176px;flex-direction:column;gap:10px;justify-content:space-between}
.tool-dec{margin-top:auto !important;padding-top:10px;border-top:1px solid var(--line);font-size:.92rem}
.tool-dec b{color:var(--accent);font-family:var(--display)}
.tools-note{font-size:.84rem;margin:14px 0 0}
.v-inf{color:var(--accent)}
.vi-top{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.vi-top span{color:var(--muted);font-size:.74rem;width:100%}
.vi-top b{font:600 1.3rem var(--body);color:var(--ink);font-variant-numeric:tabular-nums}
.vi-top em{font-style:normal;font-size:.75rem;font-weight:600;color:var(--ok)}
.v-inf svg{width:100%;height:48px}
.va-q span{display:block;font-size:.76rem;color:var(--soft);margin-bottom:6px}
.va-q i,.va-s i{display:inline-block;font-style:normal;font-size:.72rem;border:1px solid var(--line);border-radius:999px;padding:4px 9px;margin:0 4px 4px 0;color:var(--muted)}
.va-q i.on,.va-s i.on{border-color:var(--accent);color:var(--accent-ink);background:var(--accent);font-weight:700}
.va-s i{border-radius:7px}
.va-ok{font-size:.72rem;color:#bff0dd;background:rgba(79,209,165,.12);border:1px solid rgba(79,209,165,.35);border-radius:8px;padding:6px 9px}
.v-ply{color:var(--accent)}
.vp-v{height:54px;border-radius:8px;background:linear-gradient(135deg,#26262d,#1a1a1f);position:relative;display:grid;place-items:center}
.vp-v b{width:0;height:0;border-left:12px solid var(--accent);border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:4px}
.vp-v span{position:absolute;right:8px;bottom:6px;font-size:.66rem;color:var(--muted)}
.v-ply svg{width:100%;height:34px}
.vp-l{display:flex;justify-content:space-between;font-size:.66rem;color:var(--muted)}

/* Trustpilot */
.tp-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:28px}
a.tp,.sec-light a.tp{display:inline-block;padding:10px 16px;border:1px solid var(--line);border-radius:18px;color:var(--ink);text-decoration:none;font-size:.92rem;line-height:1.5}
a.tp:hover{border-color:#00b67a}
.tp-star{display:inline-block;width:20px;height:20px;line-height:20px;text-align:center;background:#00b67a;color:#fff;font-size:.78rem;border-radius:3px;margin-right:8px;vertical-align:-3px}
.tp-sep{opacity:.5;margin:0 6px}
.sec-light a.tp{border-color:#d9d2c4;background:#fff;color:#141210}
/* cifras protagonistas en casos */
.metrics.cifras b{font-size:clamp(1.45rem,2.3vw,1.9rem);color:var(--accent);letter-spacing:-.01em;margin-bottom:8px}

/* casos con cifras */
.casos-cifras{display:grid;gap:22px}
.caso-cifras{display:grid;gap:16px}
.caso-cifras h2{margin:0}
.caso-cifras .metrics{margin:0}
.caso-cifras .more-link{margin:0;font-size:.95rem}
@media (min-width:981px){.caso-cifras .beats{grid-template-columns:repeat(3,1fr);gap:22px}.caso-cifras .beats div{grid-template-columns:1fr;gap:6px}}

/* video de portada */
.hero-video{max-width:1000px}
.hv-frame{position:relative;z-index:1;aspect-ratio:16/9;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.1);background:#0b0b0c url(/assets/img/video-portada.jpg) center/cover;box-shadow:0 30px 90px rgba(0,0,0,.6)}
.hv-frame ar-vsl{display:block;width:100%;height:100%}
.panel-demo.hero-video figcaption{margin:16px 0 0;padding-bottom:clamp(40px,6vw,72px)}

.fundador-foto.foto-oscura{background:#0b0b0c;object-position:center}

.cifras-intro{margin:34px 0 14px;color:var(--soft);font-weight:600}
.caso[id]{scroll-margin-top:96px}
