/* Fondo del hero redefinido aca, como en Google Ads y Meta Ads: misma familia, distinta
temperatura. Esta tira a verde agua (la IA) sobre la lavanda del sitio. */
.hga{position:relative;overflow:hidden;padding:52px 0 64px;
background:linear-gradient(180deg,rgba(231,246,242,.6),transparent 62%),
radial-gradient(720px 440px at 94% 6%, rgba(16,163,127,.13), transparent 60%),
radial-gradient(620px 460px at -4% 92%, rgba(150,126,255,.14), transparent 58%)}
/* Va dentro de un min-width por la trampa del par.16.2: sin eso pisaba al breakpoint heredado. */
@media(min-width:961px){ .hga-grid{grid-template-columns:1.3fr .7fr} }
/* ===== MOCKUP DE CONVERSACION (visual del hero) =====
Una pregunta, la respuesta y el anuncio patrocinado debajo. Es lo que vende la pagina: el
lugar exacto donde aparece el anuncio. Sin logo de OpenAI y con un anunciante ficticio. */
.gptm{position:relative;max-width:400px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);overflow:hidden}
.gptm-body{padding:20px 18px 14px;display:grid;gap:14px}
.gptm-q{justify-self:end;max-width:84%;margin:0;background:var(--bg-soft);color:var(--ink);font-size:.88rem;line-height:1.45;padding:10px 14px;border-radius:16px 16px 4px 16px}
.gptm-a p{margin:0;color:var(--ink-soft);font-size:.88rem;line-height:1.6}
.gptm-ad{border:1px solid var(--line);border-radius:14px;padding:11px 13px 12px;background:#FCFCFF}
.gptm-tag{display:block;font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.gptm-ad-in{display:flex;gap:11px;align-items:flex-start}
.gptm-fav{flex:0 0 34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--coral),var(--violet))}
.gptm-ad-in b{display:block;font-size:.9rem;font-weight:800;color:var(--ink);line-height:1.3}
.gptm-ad-in span{display:block;margin-top:2px;font-size:.8rem;color:var(--ink-soft);line-height:1.45}
.gptm-ad-in em{display:block;margin-top:4px;font-style:normal;font-size:.74rem;font-weight:700;color:var(--muted)}
/* Logo de ChatGPT arriba a la izquierda del mockup. La pregunta se angosta a 74% para que no
lo pise en mobile. Sin la barra de "Pregunta lo que quieras": el cuerpo cierra con el anuncio. */
.gptm-body{position:relative;padding-bottom:20px}
.gptm-logo{position:absolute;top:20px;left:18px;width:34px;height:34px;border-radius:10px;background:#fff;border:1px solid var(--line)}
.gptm-q{max-width:74%}
/* Kicker del H1: el logo de ChatGPT reemplaza al guion coral del resto de las landings. */
.hga h1::before{content:none}
.hga-ico{width:26px;height:26px;flex:none;margin:0 -4px 0 -3px}
.gptm-cue{display:flex;align-items:flex-start;justify-content:center;gap:6px;margin:-4px 0 -6px}
.gptm-flecha{flex:none;width:34px;height:25px;color:var(--coral);margin-top:4px}
.gptm-nota{font-family:'Caveat',cursive;font-size:1.3rem;font-weight:700;color:var(--coral);transform:rotate(-4deg);line-height:1;white-space:nowrap}
@media(max-width:560px){.gptm-nota{font-size:1.1rem}.gptm-flecha{width:28px;height:21px}}
/* ===== TABLA COMPARATIVA (Google Ads / Meta Ads / ChatGPT Ads) =====
La columna de ChatGPT es la protagonista (pedido de Gaston, 23/10/2026): encabezado lleno en
violeta, celdas en lavanda con tinta fuerte, un marco violeta que la recorre de arriba abajo
y un poco mas de ancho. Google y Meta quedan en gris, como referencia. */
.cmp3-wrap{max-width:var(--maxw);margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden}
.cmp3{width:100%;border-collapse:collapse;font-size:.94rem;table-layout:fixed}
.cmp3 th,.cmp3 td{padding:15px 18px;text-align:left;vertical-align:top;border-top:1px solid var(--line);line-height:1.5}
.cmp3 thead th,.cmp3 thead td{border-top:0;background:#FCFCFF;font-size:.8rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);vertical-align:middle}
.cmp3 thead td{width:18%}
.cmp3 thead th{width:24%}
.cmp3 tbody th{font-weight:800;color:var(--ink)}
.cmp3 td{color:var(--muted)}
.cmp3 thead th.on{width:34%;background:var(--violet);color:#fff;font-size:.88rem;box-shadow:inset 2px 0 0 var(--violet),inset -2px 0 0 var(--violet)}
.cmp3-pill{display:inline-block;margin-left:9px;padding:3px 9px;border-radius:100px;background:#fff;color:var(--violet);font-size:.64rem;letter-spacing:.06em;vertical-align:1px}
.cmp3 td.on{color:var(--ink);font-weight:700;background:#EEF0FF;border-top-color:#D9DDFB;box-shadow:inset 2px 0 0 var(--violet),inset -2px 0 0 var(--violet)}
.cmp3 tbody tr:last-child td.on{box-shadow:inset 2px 0 0 var(--violet),inset -2px 0 0 var(--violet),inset 0 -2px 0 var(--violet)}
@media(max-width:760px){
.cmp3{table-layout:auto}
.cmp3,.cmp3 tbody,.cmp3 tr,.cmp3 th,.cmp3 td{display:block;width:100%}
.cmp3 thead{display:none}
.cmp3 tbody tr{padding:6px 0 12px;border-top:1px solid var(--line)}
.cmp3 tbody tr:first-child{border-top:0}
.cmp3 tbody th{width:auto;border-top:0;padding:14px 18px 6px}
.cmp3 td{border-top:0;padding:5px 18px;display:grid;grid-template-columns:104px 1fr;gap:10px}
.cmp3 td::before{content:attr(data-p);font-size:.72rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);padding-top:2px}
.cmp3 td.on,.cmp3 tbody tr:last-child td.on{margin:4px 12px 0;width:auto;padding:9px 10px;border-radius:10px;box-shadow:inset 3px 0 0 var(--violet)}
.cmp3 td.on::before{color:var(--violet)}
}
/* ===== COMO TRABAJAMOS: cinco pasos =====
La linea punteada de .flow esta calibrada para tres nodos; con cinco va desde el centro del
primero hasta el centro del ultimo (gap de 20px: cuatro huecos = 80px). */
.flow-5{grid-template-columns:repeat(5,1fr);gap:20px}
.flow-5::before{left:23px;right:calc((100% - 80px) / 5 - 23px)}
@media(max-width:1050px){.flow-5{grid-template-columns:1fr 1fr;gap:26px}.flow-5::before{display:none}}
@media(max-width:700px){.flow-5{grid-template-columns:1fr}}
/* ===== POR QUE CAISSA: cuatro tarjetas en 2x2 ===== */
.wedo-2{grid-template-columns:1fr 1fr}
@media(max-width:900px){.wedo-2{grid-template-columns:1fr}}
.neg-note{max-width:var(--maxw);margin:26px auto 0;color:var(--ink-soft);font-size:.96rem}
/* ===== RESULTADOS: tres casos de Google Ads y Meta Ads, con enlace a cada caso ===== */
.res3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:var(--maxw);margin:0 auto}
.res3-c{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 26px 22px;box-shadow:var(--shadow-sm);text-decoration:none;transition:transform .15s ease,box-shadow .15s ease}
.res3-c:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.res3-m{font-size:2.1rem;font-weight:800;color:var(--coral);letter-spacing:-.03em;line-height:1}
.res3-l{margin-top:8px;font-size:.9rem;color:var(--ink-soft);line-height:1.5}
.res3-w{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.res3-w b{display:block;color:var(--ink);font-size:.96rem}
.res3-w span{display:block;color:var(--muted);font-size:.84rem}
.res3-a{margin-top:auto;padding-top:16px;display:inline-flex;align-items:center;gap:6px;font-size:.88rem;font-weight:800;color:var(--violet)}
.res3-a svg{width:16px;height:16px}
@media(max-width:900px){.res3{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.res3-c{transition:none}.res3-c:hover{transform:none}}
/* ===== PANEL ANIMADO DE CAMPAÑA (seccion "¿Que es ChatGPT Ads?") =====
Claro, como los paneles en vivo de Google Ads y Meta Ads. Solo se animan width/height,
opacity y transform. */
.adsp{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);padding:18px 18px 14px;max-width:520px;margin:0 auto}
.adsp-h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid var(--line)}
.adsp-live{display:inline-flex;align-items:center;gap:7px;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#0B7F58}
.adsp-live i{width:8px;height:8px;border-radius:50%;background:#10A37F;box-shadow:0 0 0 0 rgba(16,163,127,.5);animation:adsp-pulso 1.8s ease-out infinite}
@keyframes adsp-pulso{0%{box-shadow:0 0 0 0 rgba(16,163,127,.45)}70%,100%{box-shadow:0 0 0 7px rgba(16,163,127,0)}}
.adsp-name{font-size:.78rem;font-weight:700;color:var(--muted)}
.adsp-k{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}
.adsp-k div{background:var(--bg-soft);border-radius:12px;padding:10px 11px}
.adsp-k span{display:block;font-size:.66rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.adsp-k b{display:block;margin-top:4px;font-size:1.08rem;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;transition:color .4s ease}
.adsp-k div.on{background:#E9F7F2}
.adsp-k div.on b{color:#0B7F58}
.adsp-k b.sube{color:var(--violet)}
.adsp-k div.on b.sube{color:#10A37F}
.adsp-g{margin-top:14px}
.adsp-gt{display:block;font-size:.7rem;font-weight:700;color:var(--muted);margin-bottom:8px}
.adsp-bars{display:flex;align-items:flex-end;gap:6px;height:78px;padding:0 2px;border-bottom:1px solid var(--line)}
.adsp-bars i{flex:1;border-radius:5px 5px 0 0;background:linear-gradient(180deg,#9AA6FF,var(--violet));opacity:.85;transition:height .6s ease}
.adsp-bars i:last-child{background:linear-gradient(180deg,#5FD6B4,#10A37F);opacity:1}
.adsp-log{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:7px;min-height:118px}
.adsp-log li{display:flex;gap:10px;align-items:baseline;font-size:.8rem;line-height:1.4;color:var(--ink-soft);padding:8px 10px;border-radius:10px;background:#FCFCFF;border:1px solid var(--line)}
.adsp-log li.nuevo{animation:adsp-entra .45s ease both}
@keyframes adsp-entra{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.adsp-log time{flex:none;font-size:.72rem;font-weight:800;color:var(--muted);font-variant-numeric:tabular-nums}
.adsp-cap{margin:10px 0 0;text-align:center;color:var(--muted);font-size:.74rem}
@media(max-width:560px){.adsp{padding:14px 13px 12px}.adsp-k{grid-template-columns:1fr 1fr}.adsp-log li{font-size:.76rem}}
@media(prefers-reduced-motion:reduce){.adsp-live i,.adsp-log li.nuevo{animation:none}.adsp-bars i{transition:none}}
@media (max-width:820px){
section{padding:52px 0}
.compare-sec,.audit,.results,.answer,.live,.services{padding:58px 0}
.proof,.rev2{padding:56px 0}
.method{padding:56px 0 60px}
.section-head{margin-bottom:30px}
.team-grid,.audit-panel,.answer-grid,.live-grid{gap:30px}
.steps{gap:26px}
}
@media (max-width:560px){
/* Ritmo de seccion */
section{padding:44px 0}
.compare-sec,.audit,.results,.answer,.live,.services{padding:48px 0}
.proof,.rev2{padding:46px 0}
.method{padding:46px 0 50px}
.final{padding:40px 0}
.rel{padding:40px 0}
.section-head{margin-bottom:24px}
.wrap{padding:0 20px}
/* Tarjetas de la home: menos marco, mismo contenido */
.rescard{padding:20px 20px}
.rescards{gap:12px}
.feat-review{padding:22px 20px;gap:16px}
.fit-card{padding:22px 20px}
.fit-cols{gap:14px}
.why-picky{padding:20px 22px}
.expect .card{padding:20px 22px}
.commit{padding:20px 22px}
.rcard{padding:20px 22px}
.r2card{padding:20px 22px}
.pf3-chat{padding:22px 20px}
.final-panel{padding:32px 20px}
.screenmock .scr{padding:16px}
/* Tarjetas compartidas por las landings */
.svc-card,.ind,.tst,.pcard,.cons,.faqo,.wedo-c,.pp-b,.cta-ga{padding:20px 20px}
.price-note{padding:18px 20px}
/* Titulares un escalon mas chicos: a 375px un H2 de 32,8px se come tres renglones.
Valores planos, no clamp: con vw el titulo crecia justo por debajo del breakpoint. */
:root{--h2:1.86rem;--h2-sub:1.62rem}
.rescard h3{font-size:1.22rem}
.m4-verb{font-size:1.3rem}
/* Tabla comparativa apilada: 6 filas x 237px eran 1.448px de alto para 74 palabras.
Se afina el aire de cada celda y la barra de titulo; el contenido no cambia. */
.compare{gap:11px}
.crow > div{padding:11px 16px}
.c-label{font-size:1rem;padding-top:10px;padding-bottom:10px}
.c-before::before,.c-after::before{margin-bottom:3px}
/* Enlaces del footer: 24px de alto no es un objetivo tactil. Con el padding quedan en 44. */
.foot-col a{padding:10px 0;margin-bottom:0}
.foot-legal a,.foot-copy a{display:inline-block;padding:4px 0}
}
/* =====================================================================
BLINDAJE (lo agrega el generador, no viene del HTML original)
Los badges del footer y estos logos se dimensionaban SOLO con el
atributo height del HTML. Cualquier hoja que declare img{height:auto}
lo anula y los manda al tamano natural: los badges pasan de 80px de
alto a 1727px. El tema ya saca el CSS de bloques de WordPress, que es
quien traia esa regla, pero declararlo aca cuesta 400 bytes y deja de
depender de eso. Tambien evita salto de layout (CLS) mientras cargan.
===================================================================== */
.foot-badges img{width:auto;height:38px;display:block}
.foot-badges img[src*="badge-premier"],
.foot-badges img[src*="badge-gptw"],
.foot-badges img[src*="badge-ecommerce"]{height:50px}
/* El panel del desplegable, un poco mas cerca del nav (venia con 9px de aire).
El ::before es un puente invisible que cubre ese hueco: sin el, al bajar el
mouse del boton al panel se dispara mouseleave y el menu se cierra en la cara
del usuario. Los dos numeros TIENEN que ser iguales. */
.nav-menu{top:calc(100% + 4px)}
.nav-menu::before{top:-4px;height:4px}
/* Los titulos de columna del footer dejaron de ser headings: son rotulos, no
estructura del documento (auditoria SEO del blog). Como no heredan el
font-weight:800 ni el line-height de h1,h2,h3,h4, van explicitos. Se ven igual
que con .foot-col h2 / .foot-col h3, que es lo que declara base.css. */
.foot-col .foot-col-t{color:var(--ink);font-size:1rem;font-weight:800;line-height:1.12;margin:0 0 15px}
/* Rotulo de "Enlaces destacados", la ultima fila del footer. Va en
y no en
por el mismo motivo que los titulos de columna: es una etiqueta, no una seccion
del documento. Copia lo que base.css le da a .foot-feat h3. */
.foot-feat .foot-feat-t{color:var(--ink);font-size:.76rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin:0}