/* Fondo del hero, redefinido acá (ver nota en la landing de Meta). Tira a verde-azulado:
     cada landing tiene su temperatura y esta es la patagónica. */
  .hga{position:relative;overflow:hidden;padding:52px 0 64px;
    background:linear-gradient(180deg,rgba(233,236,254,.5),transparent 62%),
      radial-gradient(720px 440px at 94% 6%, rgba(84,150,255,.17), transparent 60%),
      radial-gradient(640px 470px at -4% 92%, rgba(120,200,190,.16), transparent 58%)}

  /* ===== NAP en el hero (arriba del pliegue) =====
     Bloque chico y sobrio: tiene que leerse como un dato, no competir con el CTA. */
  .hga-nap{margin:16px 0 0;padding:14px 16px;background:rgba(255,255,255,.72);border:1px solid var(--line);
    border-radius:14px;display:flex;flex-direction:column;gap:7px;font-style:normal;max-width:580px}
  .hga-nap span{display:flex;align-items:flex-start;gap:9px;font-size:.87rem;color:var(--ink-soft);line-height:1.45}
  .hga-nap svg{width:15px;height:15px;color:var(--violet);flex-shrink:0;margin-top:2px}
  .hga-nap a{color:var(--ink);font-weight:800}
  .hga-nap a:hover{color:var(--violet)}

  /* ===== LOCAL PACK MOCK (visual del hero) =====
     Los tres resultados con mapa que Google muestra en búsquedas locales. Es exactamente
     el lugar donde esta página tiene que hacer aparecer al negocio, así que funciona como
     visual y como explicación de qué se está comprando. */
  .lp{position:relative;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);overflow:hidden}
  .lp-q{display:flex;align-items:center;gap:11px;padding:14px 17px;border-bottom:1px solid var(--line);background:#FCFCFF}
  .lp-q .g{width:20px;height:20px;flex-shrink:0}
  .lp-qt{flex:1;display:flex;align-items:center;gap:8px;background:var(--bg-soft);border:1px solid var(--line);border-radius:100px;padding:8px 14px;font-size:.85rem;color:var(--ink-soft);font-weight:600}
  .lp-qt svg{width:14px;height:14px;color:var(--muted);flex-shrink:0}
  /* Mapa esquemático: calles y un pin. No es un mapa real, es una ilustración. */
  .lp-map{position:relative;height:118px;background:#EDF1F7;overflow:hidden}
  .lp-map i{position:absolute;background:#fff}
  .lp-map .h1_{left:0;right:0;top:34px;height:7px}
  .lp-map .h2_{left:0;right:0;top:78px;height:5px}
  .lp-map .v1{top:0;bottom:0;left:28%;width:6px}
  .lp-map .v2{top:0;bottom:0;left:62%;width:9px}
  .lp-map .park{position:absolute;left:66%;top:42px;width:26%;height:30px;background:#DCEBDD;border-radius:4px}
  .lp-pin{position:absolute;left:29%;top:22px;z-index:2;width:26px;height:26px;transform:translate(-50%,-50%);color:var(--coral)}
  .lp-pin svg{width:26px;height:26px;filter:drop-shadow(0 3px 5px rgba(16,20,58,.3))}
  .lp-dot{position:absolute;width:11px;height:11px;border-radius:50%;background:#8E96B8;border:2px solid #fff;z-index:1}
  .lp-list{padding:6px 0 10px}
  .lp-i{display:flex;gap:12px;padding:12px 17px;border-bottom:1px solid var(--bg-soft)}
  .lp-i:last-child{border-bottom:0}
  .lp-i.you{background:#FFF6F4;box-shadow:inset 3px 0 0 var(--coral)}
  .lp-n{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--bg-soft);color:var(--muted);font-size:.72rem;font-weight:800;display:grid;place-items:center;margin-top:2px}
  .lp-i.you .lp-n{background:var(--coral);color:#fff}
  .lp-b b{display:block;font-size:.9rem;font-weight:800;color:var(--ink);line-height:1.25}
  .lp-i.you .lp-b b{color:var(--coral-dk)}
  .lp-stars{display:flex;align-items:center;gap:5px;margin-top:3px;font-size:.76rem;color:var(--muted);font-weight:600}
  .lp-stars .s{color:#F5B301;letter-spacing:.5px}
  .lp-meta{font-size:.74rem;color:var(--muted);margin-top:3px}
  .lp-ghost b{background:#E4E7F2;color:transparent;border-radius:4px;display:block;height:11px;width:62%}
  .lp-ghost .g2{background:#EDEFF6;height:9px;width:44%;border-radius:4px;margin-top:6px}
  .lp-cue{position:absolute;right:14px;top:150px;z-index:3;display:flex;align-items:flex-start;gap:7px}
  .lp-flecha{flex:none;width:42px;height:31px;color:var(--coral);margin-top:2px}
  .lp-nota{font-family:'Caveat',cursive;font-size:1.42rem;font-weight:700;color:var(--coral);transform:rotate(-4deg);line-height:1;white-space:nowrap}
  @media(max-width:560px){.lp-cue{right:10px;top:142px;gap:5px}.lp-nota{font-size:1.12rem}.lp-flecha{width:33px;height:24px}}

  /* ===== OFICINA + NAP =====
     El bloque más importante de la página para SEO local. La dirección tiene que estar en
     texto plano (no dentro de una imagen) y ser IDÉNTICA a la del Perfil de Empresa. */
  .nap{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;max-width:var(--maxw);margin:0 auto;
    background:#fff;border:1px solid var(--line);border-radius:26px;box-shadow:var(--shadow);padding:38px 42px}
  .nap h2{font-size:var(--h2-sub);margin-bottom:16px}
  .nap-rows{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:16px}
  .nap-rows li{display:flex;gap:14px;align-items:flex-start}
  .nap-rows .ic{width:40px;height:40px;border-radius:12px;background:var(--bg-lav);display:grid;place-items:center;color:var(--violet);flex-shrink:0}
  .nap-rows .ic svg{width:19px;height:19px}
  .nap-rows b{display:block;color:var(--ink);font-size:.96rem;margin-bottom:2px}
  .nap-rows span.v{color:var(--ink-soft);font-size:.95rem;line-height:1.5;display:block}
  .nap-rows a{color:var(--violet);font-weight:700;text-decoration:underline;text-underline-offset:3px}
  .nap-cta{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap}
  .nap-visual{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-sm)}
  .nap-visual img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3}
  /* Pie de foto sobre la imagen: da contexto sin robar espacio al bloque. */
  .nap-visual{position:relative}
  .nap-cap{position:absolute;left:0;right:0;bottom:0;padding:26px 16px 12px;font-size:.82rem;font-weight:600;color:#fff;
    background:linear-gradient(0deg,rgba(10,13,42,.82),transparent);line-height:1.35}
  @media(max-width:900px){.nap{grid-template-columns:1fr;gap:30px;padding:30px 24px}}

  /* ===== Mapa con carga diferida (facade) ===== */
  .nap-map{max-width:var(--maxw);margin:18px auto 0}
  .nap-map-btn{width:100%;display:flex;align-items:center;gap:14px;text-align:left;cursor:pointer;
    background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 22px;
    box-shadow:var(--shadow-sm);font-family:inherit;transition:border-color .15s ease,box-shadow .15s ease}
  .nap-map-btn:hover{border-color:var(--violet);box-shadow:var(--shadow)}
  .nap-map-btn .pin{width:40px;height:40px;border-radius:12px;background:var(--bg-lav);display:grid;place-items:center;color:var(--coral);flex-shrink:0}
  .nap-map-btn .pin svg{width:21px;height:21px}
  .nap-map-btn .t b{display:block;font-size:.98rem;color:var(--ink);font-weight:800;line-height:1.25}
  .nap-map-btn .t span{display:block;font-size:.86rem;color:var(--muted);margin-top:3px;line-height:1.4}
  .nap-map iframe{width:100%;height:340px;border:0;display:block;border-radius:var(--radius);box-shadow:var(--shadow-sm)}
  .nap-map-links{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:14px;padding-left:4px}
  .nap-map-links a{font-size:.9rem;font-weight:700;color:var(--violet);text-decoration:underline;text-underline-offset:3px}
  .nap-map-links a:hover{color:var(--coral-dk)}
  @media(max-width:560px){.nap-map iframe{height:260px}.nap-map-btn{padding:16px 16px}}

  /* Botón de llamar en la barra sticky: ocupa lo justo y deja el CTA principal dominante. */
  .sticky-call{flex:0 0 auto !important;gap:7px}
  .sticky-call svg{width:17px;height:17px}
  @media(max-width:380px){.sticky-call{padding:13px 14px}}

  /* ===== COBERTURA ===== */
  .cov{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:var(--maxw);margin:0 auto}
  .cov-c{background:#fff;border:1px solid var(--line);border-radius:14px;padding:17px 19px;box-shadow:var(--shadow-sm)}
  .cov-c b{display:block;color:var(--ink);font-size:.97rem;margin-bottom:4px}
  .cov-c span{color:var(--muted);font-size:.84rem;line-height:1.45;display:block}
  .cov-note{max-width:var(--maxw);margin:22px auto 0;font-size:.95rem;color:var(--ink-soft);text-align:center}
  .cov-note b{color:var(--ink)}
  @media(max-width:900px){.cov{grid-template-columns:1fr 1fr}}
  @media(max-width:480px){.cov{grid-template-columns:1fr}}

  /* ===== H2 de zonas: nombra las cinco localidades, así que va un escalón más chico ===== */
  .head-cov h2{font-size:var(--h2-sub)}

  /* ===== Vaca Muerta / energía ===== */
  .vm{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:start;max-width:var(--maxw);margin:0 auto}
  .vm .prose{max-width:none}
  .vm-list{margin-top:4px}
  @media(max-width:900px){.vm{grid-template-columns:1fr;gap:30px}}

  /* ===== Casos locales: son tres, no cuatro como en la landing de Google ===== */
  .tst-3{grid-template-columns:repeat(3,1fr)}
  .tst-3 .tst-w span{display:block}
  .tst-3 .tst-w span + span{color:var(--muted);font-size:.78rem;margin-top:2px}
  @media(max-width:900px){.tst-3{grid-template-columns:1fr}}

  /* ===== Muro de logos, ahora dentro de la sección de casos ===== */
  .loc-wall{margin-top:52px;padding-top:38px;border-top:1px solid var(--line)}
  .loc-wall h3{text-align:center;font-size:1.02rem;color:var(--muted);font-weight:700;letter-spacing:-.01em;margin-bottom:26px}

  /* ===== Marcas de la región ===== */
  .loc-logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:26px 46px;max-width:900px;margin:0 auto}
  .loc-logos img{height:34px;width:auto;max-width:120px;object-fit:contain;filter:brightness(0);opacity:.4;transition:opacity .2s ease}
  .loc-logos img:hover{opacity:.72}
  @media(max-width:560px){.loc-logos{gap:20px 30px}.loc-logos img{height:26px}}

  /* ===== Prensa local ===== */
  .press{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:var(--maxw);margin:0 auto}
  .press-c{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 26px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
  .press-logo{height:24px;margin-bottom:14px}
  .press-logo img{height:24px;width:auto;filter:brightness(0);opacity:.55}
  .press-logo .txt{font-size:.94rem;font-weight:800;color:var(--ink-soft);letter-spacing:-.01em}
  .press-c p{font-style:italic;color:var(--ink-soft);font-size:.97rem;line-height:1.6;flex:1}
  .press-c a{margin-top:14px;font-size:.85rem;font-weight:700;color:var(--violet);text-decoration:underline;text-underline-offset:3px}
  @media(max-width:900px){.press{grid-template-columns:1fr}}

  /* ===== Bloque de empleo al pie de la FAQ ===== */
  .careers{max-width:var(--maxw);margin:40px auto 0;background:#fff;border:1px solid var(--line);
    border-left:4px solid var(--violet);border-radius:var(--radius);padding:24px 28px;box-shadow:var(--shadow-sm);
    display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
  .careers-t b{display:block;color:var(--ink);font-size:1.02rem;font-weight:800;letter-spacing:-.015em}
  .careers-t span{display:block;color:var(--ink-soft);font-size:.93rem;line-height:1.55;margin-top:5px;max-width:620px}
  @media(max-width:640px){.careers{padding:22px 20px}.careers .btn{width:100%;justify-content:center}}

  /* ===== Servicios locales (enlaces a las otras landings) ===== */
  .lsv{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:var(--maxw);margin:0 auto}
  .lsv-c{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 28px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;transition:transform .15s ease,box-shadow .15s ease}
  .lsv-c:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
  .lsv-c .ic{width:42px;height:42px;border-radius:12px;background:var(--bg-lav);display:grid;place-items:center;color:var(--violet);margin-bottom:15px}
  .lsv-c .ic svg{width:21px;height:21px}
  .lsv-c h3{font-size:1.1rem;margin-bottom:9px;letter-spacing:-.015em}
  .lsv-c p{color:var(--ink-soft);font-size:.95rem;line-height:1.6;margin-bottom:14px}
  .lsv-c a{margin-top:auto;font-size:.88rem;font-weight:700;color:var(--violet);text-decoration:underline;text-underline-offset:3px}
  @media(max-width:900px){.lsv{grid-template-columns:1fr}}
  /* Cuatro servicios (Update 04): 2x2 en vez de una fila de cuatro columnas angostas.
     Los títulos son largos ("Consultoría de negocio y estrategia digital") y en cuatro
     columnas quedaban en tres renglones cada uno. */
  .lsv-4{grid-template-columns:1fr 1fr}
  @media(max-width:900px){.lsv-4{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 <p> 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 <p> y no en <h3>
   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}