/* Fondo del hero, redefinido acá a propósito: el CSS heredado de la landing de Google no
llegaba a aplicarse, y además conviene que cada landing tenga su matiz. Este tira más a
violeta/rosa (Meta); el de Google Ads tira a azul. Misma familia, distinta temperatura. */
.hga{position:relative;overflow:hidden;padding:52px 0 64px;
background:linear-gradient(180deg,rgba(233,236,254,.55),transparent 62%),
radial-gradient(720px 440px at 94% 6%, rgba(150,126,255,.20), transparent 60%),
radial-gradient(620px 460px at -4% 92%, rgba(255,112,142,.14), transparent 58%)}
/* El claim pasó a "Aumentamos tus ventas / y tu rentabilidad con Meta Ads" (Update 03 de la
SEO). El segundo renglón es más largo que el anterior y con 1.14fr se caía a TRES líneas,
dejando la flecha huérfana. Se ensancha la columna izquierda a 1.26fr: el mockup del feed
tiene max-width 392px y a .74fr queda en 386px, así que no se nota.
REGLA: si volvés a tocar el claim o la tipografía, verificá que siga entrando en DOS líneas
con "ventas" al final de la primera (§11 de CLAUDE.md).
Va dentro de un min-width: sin eso pisaba al @media(max-width:960px) heredado (misma
especificidad, pero este bloque viene después) y el hero quedaba a dos columnas en mobile. */
@media(min-width:961px){ .hga-grid{grid-template-columns:1.26fr .74fr} }
/* ===== MOCKUP DE FEED SOCIAL (visual del hero) =====
Es el visual propio de esta landing: un anuncio patrocinado en el feed, con las pestañas
de Facebook e Instagram. La creatividad es abstracta a propósito: no se usa el anuncio
ni la marca real de ningún cliente. */
.feed{position:relative;max-width:392px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);overflow:hidden}
.feed-tabs{display:flex;border-bottom:1px solid var(--line);background:#FCFCFF}
.feed-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:13px 8px;font-size:.82rem;font-weight:700;color:var(--muted)}
.feed-tab svg{width:16px;height:16px}
.feed-tab.on{color:var(--ink);box-shadow:inset 0 -2.5px 0 var(--violet)}
.feed-post{padding:15px 15px 12px}
.feed-user{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.feed-av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--coral),var(--violet));flex-shrink:0}
.feed-id b{display:block;font-size:.87rem;font-weight:800;color:var(--ink);line-height:1.2}
.feed-id span{font-size:.73rem;color:var(--muted);font-weight:600}
.feed-copy{font-size:.85rem;color:var(--ink-soft);line-height:1.5;margin-bottom:11px}
.feed-creative{position:relative;aspect-ratio:4/3;border-radius:13px;overflow:hidden;
background:linear-gradient(140deg,#FF6252 0%,#F0402F 38%,#4254F5 100%);display:grid;place-items:center}
.feed-creative::after{content:"";position:absolute;inset:0;
background-image:radial-gradient(rgba(255,255,255,.28) 1.5px,transparent 1.5px);background-size:20px 20px;opacity:.55}
.feed-cw{position:relative;z-index:1;text-align:center;color:#fff;padding:0 22px}
.feed-cw b{display:block;font-size:1.32rem;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.feed-cw span{display:inline-block;margin-top:9px;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:rgba(255,255,255,.22);padding:5px 12px;border-radius:100px}
.feed-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding-top:11px;border-top:1px solid var(--line)}
.feed-link{font-size:.78rem;color:var(--muted);font-weight:600}
.feed-btn{font-size:.78rem;font-weight:800;color:#fff;background:var(--violet);padding:8px 15px;border-radius:8px;white-space:nowrap}
.feed-acts{display:flex;gap:16px;margin-top:11px;color:var(--muted)}
.feed-acts svg{width:19px;height:19px}
.feed-cue{position:absolute;right:14px;top:62px;z-index:3;display:flex;align-items:flex-start;gap:7px}
.feed-flecha{flex:none;width:42px;height:31px;color:var(--coral);margin-top:2px}
.feed-nota{font-family:'Caveat',cursive;font-size:1.44rem;font-weight:700;color:var(--coral);transform:rotate(-4deg);line-height:1;white-space:nowrap}
@media(max-width:560px){.feed-cue{right:10px;top:56px;gap:5px}.feed-nota{font-size:1.14rem}.feed-flecha{width:33px;height:24px}}
/* ===== Plataformas: el bloque que absorbe /agencia-facebook-ads/ y /agencia-instagram-ads/ =====
Desde el 12/08/2026 son TRES tarjetas: se sumó WhatsApp, que es la tercera superficie de
Meta y en LATAM el canal de leads con mejor tasa de respuesta. */
.plat{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:var(--maxw);margin:0 auto}
.plat-c{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 30px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.plat-h{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.plat-ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex-shrink:0}
.plat-ic svg{width:24px;height:24px}
.plat-ic.fb{background:#E8F0FE;color:#1877F2}
.plat-ic.ig{background:#FDEDF4;color:#C13584}
.plat-ic.wa{background:#E7F7EF;color:#128C7E}
.plat-c h3{font-size:1.1rem;letter-spacing:-.015em}
.plat-c p{color:var(--ink-soft);font-size:.95rem;line-height:1.62;margin-bottom:14px}
.plat-l{list-style:none;margin:auto 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.plat-l li{display:flex;gap:10px;font-size:.91rem;color:var(--ink-soft);line-height:1.5}
.plat-l li svg{width:17px;height:17px;color:var(--violet);flex-shrink:0;margin-top:3px}
.plat-l li b{color:var(--ink)}
@media(max-width:980px){.plat{grid-template-columns:1fr}}
/* "Cómo gestionamos" pasó de 3 a 4 pasos (Update 03 de la SEO): estrategia, audiencias,
creatividades y medición. La línea punteada de .flow sigue funcionando con 4 nodos. */
.flow-4{grid-template-columns:repeat(4,1fr);gap:22px}
/* La línea punteada de .flow está calibrada con porcentajes para TRES nodos; con cuatro
arrancaba pasado el primer círculo y sobraba a la derecha. Acá se calcula exacto:
el círculo mide 46px (centro a 23px del borde de su columna) y el ancho de columna es
(100% - 3 gaps) / 4. Así la línea va del centro del nodo 1 al centro del nodo 4. */
.flow-4::before{left:23px;right:calc((100% - 66px) / 4 - 23px)}
@media(max-width:1050px){.flow-4{grid-template-columns:1fr 1fr;gap:26px}.flow-4::before{display:none}}
/* Necesario: .flow-4 vive en este bloque, que va DESPUÉS del heredado, así que sin esta
regla el @media(max-width:900px){.flow{grid-template-columns:1fr}} nunca se aplicaba
y en el celular quedaban dos columnas de 150px. */
@media(max-width:700px){.flow-4{grid-template-columns:1fr;gap:26px}}
/* ===== Advantage+ y medición avanzada (reemplazó al viejo embudo de 3 etapas) ===== */
.adv{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:var(--maxw);margin:0 auto}
@media(max-width:900px){.adv{grid-template-columns:1fr}}
/* ===== Formatos de anuncio ===== */
.fmt{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:var(--maxw);margin:26px auto 0}
.fmt-c{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 22px;box-shadow:var(--shadow-sm)}
.fmt-c h4{font-size:.98rem;margin-bottom:7px;letter-spacing:-.01em;color:var(--ink)}
.fmt-c p{color:var(--ink-soft);font-size:.89rem;line-height:1.55}
@media(max-width:900px){.fmt{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.fmt{grid-template-columns:1fr}}
/* ===== Embudo de Meta (3 etapas) ===== */
.fun{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:var(--maxw);margin:0 auto}
.fun-s{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 28px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.fun-s::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px}
.fun-s.e1::before{background:var(--blue)}
.fun-s.e2::before{background:var(--violet)}
.fun-s.e3::before{background:var(--coral)}
.fun-n{font-size:.7rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;display:block}
.fun-s h3{font-size:1.1rem;margin-bottom:9px;letter-spacing:-.015em}
.fun-s p{color:var(--ink-soft);font-size:.94rem;line-height:1.58;margin-bottom:12px}
.fun-tags{display:flex;flex-wrap:wrap;gap:7px}
.fun-tags span{font-size:.74rem;font-weight:700;color:var(--ink-soft);background:var(--bg-soft);border:1px solid var(--line);padding:4px 10px;border-radius:100px}
@media(max-width:900px){.fun{grid-template-columns:1fr}}
/* ===== Meta Business Partner ===== */
.mbp{display:grid;grid-template-columns:.8fr 1.2fr;gap:52px;align-items:center;max-width:var(--maxw);margin:0 auto}
.mbp-badge{background:#fff;border:1px solid var(--good-line);border-radius:20px;padding:30px 26px;box-shadow:var(--shadow);text-align:center}
.mbp-badge img{margin:0 auto 16px;height:64px;width:auto}
.mbp-badge .t{font-size:.98rem;font-weight:800;color:var(--ink);line-height:1.3}
.mbp-badge .s{font-size:.84rem;color:var(--muted);margin-top:6px;line-height:1.45}
.mbp-badge .tag{display:inline-block;margin-top:11px;font-size:.64rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;background:#E9F8F1;color:#0E9F6E;padding:4px 10px;border-radius:100px}
.mbp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px}
.mbp-st{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 16px;box-shadow:var(--shadow-sm)}
.mbp-st b{display:block;font-size:1.42rem;font-weight:800;color:var(--coral);letter-spacing:-.025em;line-height:1}
.mbp-st span{display:block;font-size:.82rem;color:var(--muted);font-weight:600;margin-top:6px;line-height:1.35}
@media(max-width:900px){.mbp{grid-template-columns:1fr;gap:30px}}
@media(max-width:520px){.mbp-stats{grid-template-columns:1fr}}
/* ===== Testimonios destacados (2, formato grande) ===== */
.tst2{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:var(--maxw);margin:0 auto}
.tst2-c{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 32px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.tst2-m{font-size:2.1rem;font-weight:800;color:var(--coral);letter-spacing:-.03em;line-height:1}
.tst2-ml{font-size:.86rem;color:var(--muted);font-weight:600;margin-top:7px}
.tst2-q{font-style:italic;color:var(--ink-soft);font-size:1.04rem;line-height:1.6;margin:18px 0;padding-top:18px;border-top:1px solid var(--line);flex:1}
.tst2-w{display:flex;align-items:center;gap:12px}
.tst2-w b{display:block;color:var(--ink);font-size:.94rem;line-height:1.25}
.tst2-w span{color:var(--muted);font-size:.84rem}
.tst2-logo img{height:24px;width:auto;max-width:100px;object-fit:contain;filter:brightness(0);opacity:.45;margin-left:auto}
@media(max-width:820px){.tst2{grid-template-columns:1fr}}
@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}