:root{
    --ink:#151417;
    --ink-soft:#4b4a4f;
    --paper:#ffffff;
    --paper-soft:#eff1f3;
    --red:#c8352b;
    --red-dark:#9e2820;
    --line:#e4e3e6;
    --muted:#6c6b70;
    --radius-card:14px;
    --header-h:76px;
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    color-scheme: light;
  }
  *{box-sizing:border-box}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:"IBM Plex Sans", "Segoe UI", Arial, sans-serif;
    font-size:16px;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    scroll-behavior:smooth;
  }
  h1,h2,h3{
    font-family:"Archivo","IBM Plex Sans",Arial,sans-serif;
    font-weight:800;
    letter-spacing:-0.01em;
    text-wrap:balance;
    margin:0;
  }
  p{margin:0}
  a{color:inherit}
  img,svg{max-width:100%}
  .wrap{max-width:1180px;margin:0 auto;padding-inline:24px}
  section{scroll-margin-top:var(--header-h)}

  /* ---------- header ---------- */
  header.site{
    position:sticky;top:env(safe-area-inset-top,0px);z-index:40;
    background:rgba(255,255,255,.92);backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
  }
  .header-row{
    height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:24px;
  }
  .logo{display:flex;align-items:center}
  .logo img{height:46px;width:auto;display:block}
  nav.primary{display:flex;align-items:center;gap:32px}
  nav.primary a{
    font-size:15px;font-weight:600;color:var(--ink-soft);text-decoration:none;
    padding-block:6px;border-bottom:2px solid transparent;transition:color 160ms var(--ease-out), border-color 160ms var(--ease-out);
  }
  nav.primary a:hover{color:var(--ink);border-color:var(--red)}
  .header-actions{display:flex;align-items:center;gap:14px}
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    font-family:"IBM Plex Sans",sans-serif;font-weight:700;font-size:15px;
    padding:12px 22px;border-radius:999px;text-decoration:none;cursor:pointer;
    border:1.5px solid transparent;transition:transform 160ms var(--ease-out), background 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
    min-height:44px;white-space:nowrap;
  }
  .btn:active{transform:scale(.97)}
  .btn-red{background:var(--red);color:#fff;box-shadow:0 6px 16px -6px rgba(200,53,43,.55)}
  .btn-red:hover{background:var(--red-dark)}
  .btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
  .btn-ghost:hover{border-color:var(--red);color:var(--red)}
  .btn-ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
  .btn-ghost-light:hover{border-color:#fff}
  .icon-wa{width:17px;height:19px;flex:none}

  .burger{display:none;background:none;border:none;padding:8px;cursor:pointer;min-width:44px;min-height:44px;align-items:center;justify-content:center}
  .burger span,.burger span::before,.burger span::after{
    content:"";display:block;width:22px;height:2px;background:var(--ink);position:relative;transition:transform 200ms var(--ease-out), opacity 200ms var(--ease-out);
  }
  .burger span::before{position:absolute;top:-7px}
  .burger span::after{position:absolute;top:7px}
  .burger[aria-expanded="true"] span{background:transparent}
  .burger[aria-expanded="true"] span::before{transform:translateY(7px) rotate(45deg)}
  .burger[aria-expanded="true"] span::after{transform:translateY(-7px) rotate(-45deg)}

  .mobile-panel{
    display:none;position:fixed;inset:var(--header-h) 0 0 0;background:var(--paper);z-index:39;
    padding:28px 24px;flex-direction:column;gap:4px;overflow-y:auto;
  }
  .mobile-panel.open{display:flex}
  .mobile-panel a{
    font-family:"Archivo",sans-serif;font-weight:700;font-size:22px;color:var(--ink);text-decoration:none;
    padding-block:14px;border-bottom:1px solid var(--line);
  }
  .mobile-panel .btn{margin-top:20px;width:100%}

  /* ---------- hero ---------- */
  .hero{background:var(--ink);color:#fff;position:relative;overflow:hidden}
  .hero::after{
    content:"";position:absolute;inset:0;
    background:
      radial-gradient(560px 420px at 82% 20%, rgba(200,53,43,.22), transparent 70%),
      repeating-linear-gradient(115deg, rgba(255,255,255,.035) 0 1px, transparent 1px 64px);
    pointer-events:none;
  }
  .hero-inner{position:relative;padding-block:38px 32px;display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
  .eyebrow-badge{
    display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;
    background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
    padding:6px 14px;border-radius:999px;margin-bottom:14px;color:#f1d9d7;
  }
  .eyebrow-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--red)}
  .hero h1{font-size:clamp(28px,3.6vw,42px);line-height:1.08;color:#fff}
  .hero h1 em{color:var(--red);font-style:normal}
  .hero p.lead{margin-top:12px;max-width:52ch;font-size:16px;color:rgba(255,255,255,.78)}
  .hero-ctas{display:flex;gap:14px;margin-top:18px;flex-wrap:wrap}
  /* Indicadores del hero (V21): formato compacto número+texto lado a lado, en vez de
     dos bloques grandes con el número arriba dejando espacio vacío debajo. */
  .stat-grid{display:flex;flex-wrap:wrap;gap:10px}
  .stat-card{
    background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:14px;
    padding:10px 14px;display:flex;align-items:center;gap:12px;flex:1 1 200px;
  }
  .stat-num{font-family:"Archivo",sans-serif;font-weight:800;font-size:24px;color:var(--red);line-height:1;flex:none}
  .stat-text{display:flex;flex-direction:column;gap:2px;min-width:0}
  .stat-label{font-size:13px;font-weight:700;letter-spacing:.02em;line-height:1.25}
  .stat-sub{font-size:12px;color:rgba(255,255,255,.62);line-height:1.35}

  .hero .eyebrow-badge{animation:heroUp 560ms var(--ease-out) 0ms 1 forwards}
  .hero h1{animation:heroUp 560ms var(--ease-out) 70ms 1 forwards}
  .hero p.lead{animation:heroUp 560ms var(--ease-out) 140ms 1 forwards}
  .hero .hero-ctas{animation:heroUp 560ms var(--ease-out) 210ms 1 forwards}
  .hero .stat-grid{animation:heroUp 560ms var(--ease-out) 140ms 1 forwards}
  @keyframes heroUp{from{opacity:.001;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

  /* ---------- trust strip ---------- */
  .trust{border-bottom:1px solid var(--line)}
  .trust-row{display:flex;flex-wrap:wrap;gap:28px;padding-block:14px;font-size:14px;font-weight:600;color:var(--ink-soft)}
  .trust-row li{display:flex;align-items:center;gap:8px;list-style:none}
  .trust-row svg{width:16px;height:16px;color:var(--red);flex:none}
  .trust-row ul{display:contents}

  /* ---------- section heading ---------- */
  .section-head{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:end;margin-bottom:36px}
  .section-head h2{font-size:clamp(26px,3vw,36px);line-height:1.12}
  .section-head p{color:var(--muted);font-size:16px}

  section.soluciones{padding-top:36px;padding-bottom:72px}
  .pack-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
  .pack-card{
    border:1px solid var(--line);border-radius:var(--radius-card);background:var(--paper);overflow:hidden;
    display:flex;flex-direction:column;
    transition:border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out), transform 200ms var(--ease-out);
  }
  .pack-card:hover{border-color:var(--red);box-shadow:0 18px 32px -22px rgba(21,20,23,.35);transform:translateY(-3px)}
  /* .pack-media y .pack-thumb son <button> (no <div>): la foto de cada tarjeta también lleva a la
     solución, además del botón "Conocer más" — mismo reset de botón que ya usa .alt-card. */
  .pack-media{
    position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--paper-soft);
    display:block;width:100%;border:none;padding:0;margin:0;font:inherit;cursor:pointer;
  }
  .pack-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 420ms var(--ease-out)}
  .pack-card:hover .pack-media img{transform:scale(1.045)}
  .pack-media:focus-visible,.pack-thumb:focus-visible{outline:2.5px solid var(--red);outline-offset:-2px}
  /* Miniatura horizontal exclusiva de mobile/tablet (V16) — distinta de la foto grande de escritorio.
     Oculta por defecto; solo se muestra dentro de la media query ≤980px, que a su vez oculta .pack-media. */
  .pack-thumb{display:none;width:100%;border:none;padding:0;margin:0;font:inherit;cursor:pointer}
  .pack-thumb img{width:100%;height:100%;object-fit:cover;display:block}
  .pack-badge{
    position:absolute;left:16px;bottom:-16px;width:44px;height:44px;border-radius:12px;
    background:var(--paper);border:1px solid var(--line);box-shadow:0 10px 18px -8px rgba(21,20,23,.3);
    display:flex;align-items:center;justify-content:center;color:var(--red);
  }
  .pack-badge svg{width:22px;height:22px}
  .pack-body{padding:34px 22px 24px;display:flex;flex-direction:column;gap:14px;flex:1}
  .pack-card h3{font-size:18px}
  .pack-card p{color:var(--muted);font-size:14.5px;flex:1}
  .pack-link svg.icon-chev{width:12px;height:12px}

  .pack-actions{display:flex;flex-direction:column;gap:8px;margin-top:auto}
  .pack-actions .btn{width:100%;padding:10px 14px;font-size:13.5px;min-height:40px}
  /* El botón individual de WhatsApp por tarjeta se retiró del diseño en todos los tamaños de
     pantalla (V17); queda solo "Conocer más" en las 4 tarjetas. El nodo se sacó directamente
     del HTML (V18), no solo con CSS, para no dejar marcado muerto en producción. */

  /* ---------- soluciones: estado ampliado (foco en una solución) ---------- */
  .soluciones-focus-view{animation:focusIn 260ms var(--ease-out) 1 both}
  @keyframes focusIn{from{opacity:.001;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
  .focus-back{margin-bottom:22px}
  .focus-back svg{width:14px;height:14px}
  .focus-layout{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,3fr);gap:28px;align-items:start}
  .focus-main{min-width:0}

  /* ---------- pack detail (usado dentro del estado ampliado) ---------- */
  .pack-detail{
    display:none;
    border:1px solid var(--line);border-radius:var(--radius-card);background:var(--paper-soft);
    padding:32px;grid-template-columns:1fr;gap:24px;
  }
  .pack-detail.active{display:grid}
  .pack-detail h4{font-size:19px;margin-bottom:10px}
  .pack-detail .pd-body p{color:var(--ink-soft);font-size:15px;line-height:1.65}
  .pd-media{border-radius:12px;overflow:hidden;aspect-ratio:16/9;margin-bottom:14px;position:relative;background:var(--paper-soft)}
  .pd-media img{width:100%;height:100%;object-fit:cover;display:block}
  /* Carrusel de fotos reales por solución (rota sola cada 2,3s, ver script al final del body):
     las imágenes se apilan con position:absolute dentro de .pd-media (que ya tiene su alto fijo
     por aspect-ratio) y se cruzan con un fundido de opacidad — sin layout shift ni JS de medidas. */
  .pd-media.pd-carousel img{position:absolute;inset:0;opacity:0;transition:opacity 650ms var(--ease-out)}
  .pd-media.pd-carousel img.is-active{opacity:1}
  @media (prefers-reduced-motion:reduce){
    .pd-media.pd-carousel img{transition:none}
  }
  .pack-detail .pd-includes{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:20px}
  .pack-detail .pd-includes h5{font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:12px}
  .pack-detail .pd-includes ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
  .pack-detail .pd-includes li{display:flex;gap:8px;font-size:14px;color:var(--ink-soft);align-items:flex-start}
  .pack-detail .pd-includes li svg{width:15px;height:15px;color:var(--red);flex:none;margin-top:2px}
  .pack-detail .pd-cta{margin-top:16px;width:100%}
  @media (min-width:1280px){
    .pack-detail{grid-template-columns:1.15fr 1fr;padding:36px}
    /* La columna de foto/incluye/CTA pasa a columna flex: cuando el texto de la izquierda es
       más largo que el contenido de la derecha, la grilla ya estira ambas columnas a la misma
       altura (comportamiento por defecto) — antes esa diferencia quedaba como espacio vacío
       debajo de "Podemos combinar"; ahora ese espacio de más lo absorbe la foto (único elemento
       con flex-grow), agrandándola, en vez de quedar en blanco. Además, pedido de agrandarla más
       todavía: la columna de la foto se ensanchó (de 1.3fr/1fr a 1.15fr/1fr) y la relación de
       aspecto pasó de 4:3 a 1:1 (cuadrada), así la foto es bastante más grande en todos los
       paneles, no solo en los que tenían espacio libre de sobra. */
    .pack-detail > div:last-child{display:flex;flex-direction:column}
    .pd-media{aspect-ratio:1/1;flex:1 1 auto}
  }

  /* ---------- alternativas compactas (estado ampliado) ---------- */
  .focus-alts{display:flex;flex-direction:column;gap:10px;position:sticky;top:calc(var(--header-h) + 24px)}
  .alt-card{
    display:flex;align-items:center;gap:12px;width:100%;text-align:left;
    font-family:inherit;cursor:pointer;
    border:1px solid var(--line);border-radius:12px;background:var(--paper);padding:10px;
    transition:border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
  }
  .alt-card:hover{border-color:var(--red);box-shadow:0 10px 20px -14px rgba(21,20,23,.35)}
  .alt-card img{width:52px;height:52px;border-radius:9px;object-fit:cover;flex:none;display:block}
  .alt-card .alt-body{display:flex;flex-direction:column;gap:2px;min-width:0}
  .alt-card h4{font-size:14px;margin:0;color:var(--ink)}
  .alt-card p{font-size:12.5px;color:var(--muted);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .alt-card.is-current{display:none}

  /* ---------- por que ---------- */
  section.porque{background:var(--paper-soft);padding-block:72px}
  .porque-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
  .porque-grid h2{font-size:clamp(26px,3vw,36px);line-height:1.14;max-width:16ch}
  .porque-grid > .porque-copy p{margin-top:18px;color:var(--ink-soft);font-size:16px;max-width:48ch}
  .reason-list{display:flex;flex-direction:column;gap:22px}
  .reason{display:flex;gap:16px}
  .reason .num{
    font-family:"Archivo",sans-serif;font-weight:800;font-size:14px;color:var(--red);
    width:34px;height:34px;border-radius:50%;border:1.5px solid var(--red);
    display:flex;align-items:center;justify-content:center;flex:none;
  }
  .reason h3{font-size:16px;margin-bottom:4px}
  .reason p{color:var(--muted);font-size:14.5px}

  /* ---------- zona de cobertura (V21: mensaje comercial amplio, AMBA/CABA incluida,
     reemplaza las tarjetas por localidad para no comunicar un área de trabajo acotada) ---------- */
  section.cobertura{padding-block:76px;background:var(--paper);text-align:center}
  .cobertura-inner{max-width:640px;margin-inline:auto}
  .cobertura-inner h2{font-size:clamp(26px,3.2vw,36px)}
  .cobertura-inner p{color:var(--muted);font-size:16px;line-height:1.65;margin-top:16px}
  .cobertura-inner .cta-row{display:flex;justify-content:center;margin-top:30px}

  .section-cta{margin-top:28px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
  .section-cta p{color:var(--muted);font-size:14.5px;font-weight:600;margin:0}

  /* ---------- faq ---------- */
  section.faq{padding-block:72px;background:var(--paper-soft)}
  .faq-head{max-width:52ch;margin-bottom:32px}
  .faq-head h2{font-size:clamp(26px,3vw,36px)}
  .faq-list{display:flex;flex-direction:column;gap:12px;max-width:820px}
  .faq-item{border:1px solid var(--line);border-radius:12px;background:var(--paper);overflow:hidden}
  .faq-item summary{
    list-style:none;cursor:pointer;padding:18px 50px 18px 20px;position:relative;
    font-family:"Archivo",sans-serif;font-weight:700;font-size:15.5px;color:var(--ink);
  }
  .faq-item summary::-webkit-details-marker{display:none}
  .faq-item summary::after{
    content:"";position:absolute;right:20px;top:50%;width:11px;height:11px;
    border-right:2px solid var(--red);border-bottom:2px solid var(--red);
    transform:translateY(-65%) rotate(45deg);transition:transform 200ms var(--ease-out);
  }
  .faq-item[open] summary::after{transform:translateY(-35%) rotate(-135deg)}
  .faq-item p{padding:0 20px 20px;color:var(--ink-soft);font-size:14.5px;line-height:1.65}

  /* ---------- proceso ---------- */
  section.proceso{padding-block:72px}
  .proceso-head{max-width:52ch;margin-bottom:40px}
  .proceso-head h2{font-size:clamp(26px,3vw,36px)}
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:step}
  .step{padding:26px 22px;border:1px solid var(--line);border-radius:var(--radius-card);position:relative}
  .step .step-num{font-family:"Archivo",sans-serif;font-weight:800;font-size:15px;color:var(--red);margin-bottom:14px}
  .step h3{font-size:17px;margin-bottom:8px}
  .step p{color:var(--muted);font-size:14.5px}

  /* ---------- prueba social ---------- */
  section.opiniones{background:var(--ink);color:#fff;padding-block:72px}
  .opiniones-inner{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
  .opiniones h2{color:#fff;font-size:clamp(26px,3vw,34px);max-width:15ch}
  .opiniones p.copy{color:rgba(255,255,255,.7);margin-top:16px;max-width:46ch}
  .proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  .proof-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:20px;text-align:center}
  .proof-card .n{font-family:"Archivo",sans-serif;font-weight:800;font-size:26px;color:#fff}
  .proof-card .l{font-size:12.5px;color:rgba(255,255,255,.6);margin-top:4px}

  /* ---------- cierre ---------- */
  section.cierre{padding-block:80px;text-align:center}
  section.cierre h2{font-size:clamp(28px,3.6vw,40px);max-width:22ch;margin-inline:auto}
  .contact-inline{display:flex;flex-direction:column;gap:14px;margin-top:0}
  .contact-item{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;color:var(--ink-soft);flex-wrap:wrap;text-decoration:none}
  .contact-item svg{width:16px;height:16px;color:var(--red)}
  a.contact-item:hover{color:var(--red)}
  .copy-btn{
    border:none;background:var(--paper-soft);border-radius:8px;padding:4px 9px;font-size:12px;font-weight:700;
    cursor:pointer;color:var(--ink-soft);transition:background 160ms;
  }
  .copy-btn:hover{background:var(--line)}
  .copy-btn:active{transform:scale(.96)}

  /* ---------- footer ---------- */
  footer{border-top:1px solid var(--line);padding-block:44px}
  .footer-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:40px}
  .footer-col h4{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
  .footer-col a{display:block;font-size:14.5px;color:var(--ink-soft);text-decoration:none;margin-bottom:10px}
  .footer-col a:hover{color:var(--red)}
  .footer-addr{font-size:14.5px;color:var(--ink-soft);line-height:1.7}
  .social-row{display:flex;gap:10px;margin-top:16px}
  .social-row a{
    width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
    display:flex;align-items:center;justify-content:center;color:var(--ink);margin:0;
    transition:border-color 160ms, color 160ms;
  }
  .social-row a:hover{border-color:var(--red);color:var(--red)}
  .social-row svg{width:17px;height:17px}
  .footer-bottom{margin-top:36px;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:13px;color:var(--muted)}

  /* ---------- servicios y tecnologías ---------- */
  section.tecnologia{padding-block:72px;background:var(--paper-soft)}
  .tec-tabs{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;margin-bottom:28px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .tec-tabs::-webkit-scrollbar{display:none}
  .tec-tab{
    flex:none;display:flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;
    border:1.5px solid var(--line);background:var(--paper);color:var(--ink-soft);font-weight:600;font-size:14px;
    cursor:pointer;transition:border-color 160ms var(--ease-out), color 160ms var(--ease-out), background 160ms var(--ease-out);
    font-family:"IBM Plex Sans",sans-serif;white-space:nowrap;
  }
  .tec-tab svg{width:16px;height:16px;flex:none}
  .tec-tab:hover{border-color:var(--ink)}
  .tec-tab.is-active{background:var(--ink);border-color:var(--ink);color:#fff}
  .tec-tab-chevron{display:none}
  .tec-panels{position:relative}
  .tec-panel{display:none;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-card);padding:32px}
  .tec-panel.is-active{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
  .tec-panel h3{font-size:20px;margin-bottom:10px}
  .tec-panel > div:first-child p{color:var(--ink-soft);font-size:15px;line-height:1.65}
  .tec-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
  .tec-list li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--ink-soft)}
  .tec-list svg{width:16px;height:16px;color:var(--red);flex:none;margin-top:2px}
  .tec-note{margin-top:20px;color:var(--muted);font-size:13.5px;max-width:70ch}

  /* ---------- instalaciones reales ---------- */
  section.instalaciones{padding-block:72px}
  .instalaciones-head{max-width:60ch;margin-bottom:32px}
  .instalaciones-head h2{font-size:clamp(26px,3vw,36px)}
  .instalaciones-head p{color:var(--muted);font-size:15.5px;margin-top:12px}
  .instalaciones-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
  .inst-card{border:1.5px dashed var(--line);border-radius:var(--radius-card);padding:26px 18px;text-align:center;background:var(--paper-soft)}
  .inst-card .ph-icon{
    width:52px;height:52px;border-radius:50%;background:var(--paper);border:1px solid var(--line);
    display:flex;align-items:center;justify-content:center;margin:0 auto 14px;color:var(--muted);
  }
  .inst-card .ph-icon svg{width:22px;height:22px}
  .inst-card h3{font-size:15px;margin-bottom:6px}
  .inst-card p{font-size:12.5px;color:var(--muted);line-height:1.5}
  @media (max-width:980px){.instalaciones-grid{grid-template-columns:1fr 1fr}}
  @media (max-width:720px){.instalaciones-grid{grid-template-columns:1fr}}

  /* ---------- contacto / te llamamos ---------- */
  section.cierre .cierre-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;text-align:left;margin-top:44px}
  /* min-width:0 en los dos hijos del grid: por defecto un item de grid no se achica por debajo
     del ancho mínimo de su contenido (texto sin salto de línea, como el botón largo de WhatsApp
     más abajo), lo que puede forzar a toda la columna -y a .wrap- a desbordar en mobile. */
  .cierre-info-col,.llamamos-card{min-width:0}
  .cierre-info-col{
    border:1px solid var(--line);border-radius:var(--radius-card);background:var(--paper-soft);padding:26px;
    display:flex;flex-direction:column;justify-content:center;
  }
  .cierre-info-col h3{font-size:18px;margin-bottom:6px}
  .cierre-info-col > p{color:var(--muted);font-size:13.5px;margin-bottom:18px}
  .llamamos-card{border:1px solid var(--line);border-radius:var(--radius-card);background:var(--paper-soft);padding:26px}
  .llamamos-card h3{font-size:18px;margin-bottom:6px}
  .llamamos-card > p{color:var(--muted);font-size:13.5px;margin-bottom:18px}
  .field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
  .field label{font-size:12.5px;font-weight:700;color:var(--ink-soft)}
  .field input,.field select,.field textarea{
    font-family:inherit;font-size:14.5px;padding:11px 12px;border-radius:9px;border:1.5px solid var(--line);
    background:var(--paper);color:var(--ink);
  }
  .field textarea{resize:vertical;min-height:64px}
  .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--red)}
  .field-check{display:flex;align-items:flex-start;gap:9px;margin-bottom:16px}
  .field-check input{margin-top:3px;flex:none}
  .field-check label{font-size:12.5px;color:var(--muted);line-height:1.5}
  .llamamos-card .btn{width:100%;justify-content:center;min-width:0}
  /* El texto de este botón es más largo que el resto ("Contactar a un vendedor por WhatsApp");
     a diferencia de .btn (white-space:nowrap), acá dejamos que pueda pasar a dos líneas en mobile
     en vez de forzar un ancho mínimo que desborde la tarjeta. */
  #llamamosWaVendedor{white-space:normal;text-align:center;line-height:1.3}
  .llamamos-fields.is-hidden{display:none}
  .llamamos-hp{position:absolute;left:-10000px;top:-10000px;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .llamamos-fineprint{margin-top:10px;font-size:11.5px;color:var(--muted);line-height:1.5}
  .llamamos-msg{margin-top:12px;font-size:13px;font-weight:600}
  .llamamos-msg:empty{margin-top:0}
  .llamamos-msg.is-error{color:var(--red)}
  /* El mensaje de éxito necesita mucha más presencia visual que un error de validación: es la
     única confirmación que recibe la persona de que su consulta llegó. Tarjeta propia en vez de
     una línea de texto, con el mismo verde que ya usaba .is-ok, dentro de la paleta del sitio
     (mismo radius que .field input, borde discreto en vez de uno saturado). */
  .llamamos-msg.is-ok{
    color:#145c30;
    font-size:21px;
    font-weight:700;
    line-height:1.45;
    padding:16px 18px;
    background:#eaf7ef;
    border:1px solid #bfe3cc;
    border-radius:12px;
  }
  .llamamos-wa-alt{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
  .llamamos-wa-lead{font-size:12.5px;color:var(--muted);margin-bottom:10px}
  .llamamos-card .btn:disabled{opacity:.65;cursor:not-allowed;box-shadow:none}

  /* ---------- mobile sticky wa ---------- */
  .sticky-wa{display:none}

  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    .hero *{animation:none!important;opacity:1!important;transform:none!important}
    .pack-card,.btn,.copy-btn{transition:none!important}
  }

  /* ---------- soluciones + tecnología: rediseño mobile/tablet (V15) ---------- */
  /* No toca nada por encima de 980px: el estado ampliado de escritorio (V14, ya aprobado) queda intacto. */
  .focus-select-mobile{display:none}

  @media (max-width:980px){
    .hero-inner{grid-template-columns:1fr;padding-block:28px 24px;gap:22px}
    /* Indicadores del hero en una sola fila compacta en mobile/tablet, para no apilar
       dos tarjetas altas debajo del texto y alargar el hero (pedido: productos en el primer scroll). */
    .stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
    .stat-card{padding:8px 10px;gap:8px;flex:none}
    .stat-num{font-size:20px}
    .stat-sub{display:none}
    .section-head{margin-bottom:18px}
    .section-head h2{font-size:clamp(23px,3vw,36px)}
    section.soluciones{padding-top:20px}
    /* Bajada larga de Soluciones oculta en mobile/tablet (sigue en el HTML para SEO) para que
       la grilla de productos entre antes en pantalla — pedido: productos en el primer scroll. */
    .section-head > div > p{display:none}
    .porque-grid{grid-template-columns:1fr;gap:32px}
    .opiniones-inner{grid-template-columns:1fr;gap:32px}
    .steps{grid-template-columns:1fr 1fr}
    .footer-grid{grid-template-columns:1fr 1fr}
    section.cierre .cierre-grid{grid-template-columns:1fr;gap:36px}
    .cierre-info-col{order:-1}
    .header-actions .btn-ghost{display:none}
    nav.primary{gap:18px}

    /* Cuadrícula 2x2 con miniatura horizontal — funciona desde 320px (V16) */
    .pack-grid{grid-template-columns:1fr 1fr;gap:12px}
    .pack-card{position:relative}
    .pack-media{display:none}
    .pack-badge{display:none}
    .pack-thumb{display:block;aspect-ratio:2/1;overflow:hidden;background:var(--paper-soft)}
    .pack-body{padding:12px 12px 14px;gap:10px;align-items:stretch;text-align:center}
    .pack-card h3{
      font-size:15.5px;line-height:1.28;min-height:2.56em;
      display:flex;align-items:center;justify-content:center;
    }
    .pack-card p{display:none}
    /* El acceso individual de WhatsApp por tarjeta ya se oculta en el CSS base para todos los
       tamaños (V17); acá solo se adapta el layout de "Conocer más" a fila de ancho completo. */
    .pack-actions{flex-direction:column;gap:0;width:100%}
    .pack-actions .pack-link{width:100%;justify-content:space-between;padding:0 16px;min-height:44px;font-size:13.5px}
    .pack-actions .pack-link .icon-chev{width:11px;height:11px;transform:rotate(-90deg);flex:none}

    /* Estado ampliado: selector compacto de 4 arriba, reemplaza el carrusel de alternativas */
    .focus-alts{display:none}
    .focus-select-mobile{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:18px}
    .focus-select-btn{
      display:flex;align-items:center;gap:8px;padding:11px 12px;border-radius:12px;
      border:1.5px solid var(--line);background:var(--paper);color:var(--ink-soft);font-weight:700;font-size:12.5px;
      cursor:pointer;font-family:"IBM Plex Sans",sans-serif;min-height:44px;text-align:left;
      transition:border-color 160ms var(--ease-out), background 160ms var(--ease-out), color 160ms var(--ease-out);
    }
    .focus-select-btn svg{width:17px;height:17px;flex:none}
    .focus-select-btn.is-active{background:var(--red);border-color:var(--red);color:#fff}
    .focus-layout{grid-template-columns:1fr;gap:0}
    .focus-back{margin-bottom:16px}

    /* Detalle: reordenar para llegar antes al CTA — nombre, bajada corta, foto, tecnología, CTA, info extra */
    .pack-detail{gap:16px}
    .pack-detail .pd-body{display:contents}
    .pack-detail > div:last-child{display:contents}
    .pack-detail .pd-body > span{order:1}
    .pack-detail h4{order:2;font-size:18px;margin-bottom:0}
    .pd-body p:nth-of-type(1){order:3;margin-top:0!important}
    .pd-media{order:4;margin-bottom:0}
    .pd-includes{order:5}
    .pd-cta{order:6;margin-top:0}
    .pd-body p:nth-of-type(2){order:7;margin-top:0!important}
    /* Fix de desborde horizontal (detectado en la V29, corregido acá): con .pd-body/el último div en
       display:contents, el span de categoría, el h4, los párrafos, .pd-media, .pd-includes y .pd-cta
       pasan a ser ítems directos de la grilla de una sola columna de .pack-detail. Por defecto, el
       tamaño mínimo automático de un ítem de grilla/flex puede tomar el ancho de línea completa de su
       texto en vez de permitir el ajuste de línea, empujando la columna (y la página) más ancha que la
       pantalla — pasaba sobre todo con "Consorcios y Edificios" y con los textos largos de "Podemos
       combinar" a 320-360px. min-width:0 le devuelve al ítem la posibilidad de achicarse y ajustar
       línea con normalidad, sin cambiar ningún texto ni ningún tamaño visual aprobado. */
    .pack-detail .pd-body > span,
    .pack-detail .pd-body > p,
    .pack-detail h4,
    .pd-media,
    .pd-includes,
    .pd-cta{min-width:0}
    .pd-includes li{min-width:0}
    .pd-includes li span{min-width:0}

    /* Tecnología por espacio: 5 filas uniformes de ancho completo (V16, reemplaza la grilla 2x2 de V15) */
    .tec-tabs{display:flex;flex-direction:column;gap:8px;overflow-x:visible;padding-bottom:0;margin-bottom:24px}
    .tec-tab{
      width:100%;white-space:normal;text-align:left;justify-content:flex-start;
      padding:13px 16px;font-size:14px;min-height:52px;border-radius:12px;gap:12px;
    }
    .tec-tab svg:first-child{width:19px;height:19px}
    .tec-tab-label{flex:1}
    .tec-tab-chevron{
      display:block;width:16px;height:16px;flex:none;opacity:.45;
      transition:opacity 160ms var(--ease-out), transform 160ms var(--ease-out);
    }
    .tec-tab.is-active{background:var(--red);border-color:var(--red);color:#fff}
    .tec-tab.is-active .tec-tab-chevron{opacity:1;transform:translateX(2px)}
    .tec-panel.is-active{grid-template-columns:1fr;gap:20px}
  }

  @media (max-width:720px){
    .wrap{padding-inline:18px}
    /* Botones del hero más chicos y uno al lado del otro en mobile, en vez de apilados
       (pedido de Seba) — mismo destino y mismo texto, solo más compactos. */
    .hero-ctas{flex-wrap:nowrap;gap:8px}
    .hero-ctas .btn{flex:1;padding:10px 8px;font-size:12.5px;gap:5px;min-width:0}
    .hero-ctas .btn .icon-wa{width:14px;height:16px;flex:none}
    nav.primary{display:none}
    .header-actions .btn-ghost{display:none}
    .header-wa{padding:0;width:44px;height:44px;border-radius:50%;flex:none}
    .header-wa .wa-label{
      position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
      clip:rect(0,0,0,0);white-space:nowrap;border:0;
    }
    .burger{display:flex}
    .section-head{grid-template-columns:1fr;gap:14px}
    .steps{grid-template-columns:1fr}
    .proof-grid{grid-template-columns:1fr}
    .trust-row{gap:16px;font-size:13px}
    .footer-grid{grid-template-columns:1fr;gap:28px}
    section.porque,section.proceso,section.opiniones,section.tecnologia,section.instalaciones{padding-block:52px}
    section.soluciones{padding-top:20px;padding-bottom:52px}
    .instalaciones-grid{gap:12px}
    .pack-detail{padding:22px}
    section.cierre{padding-block:60px}
    .llamamos-msg.is-ok{font-size:17.5px;padding:14px 15px}
    .sticky-wa{
      display:flex;position:fixed;bottom:calc(18px + env(safe-area-inset-bottom,0px));right:18px;z-index:38;
      width:56px;height:56px;border-radius:50%;background:var(--red);color:#fff;align-items:center;justify-content:center;
      box-shadow:0 12px 24px -8px rgba(200,53,43,.6);text-decoration:none;
      transition:opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
    }
    .sticky-wa svg{width:23px;height:26px}
    .sticky-wa:active{transform:scale(.94)}
    .sticky-wa.is-hidden{opacity:0;transform:scale(.8);pointer-events:none}
  }

  /* ---------- WhatsApp en verde (21 oct. 2026) ----------
     Todo enlace cuyo destino es WhatsApp (href a https://wa.me/...) usa el verde de WhatsApp,
     para que se reconozca el canal antes del clic. Se selecciona por DESTINO (atributo href), no
     por clase: así ningún botón que no abra WhatsApp puede quedar verde por error, y cualquier
     CTA de WhatsApp nuevo hereda el estilo solo. El texto va oscuro (--ink) y no blanco: el blanco
     sobre #25D366 da 1,98:1 y no pasa AA; --ink sobre #25D366 da 9,25:1 y sobre el hover 7,49:1.
     No cambia HTML, textos, data-wa-source ni tracking. El submit del formulario ("Quiero que me
     contacten") es un <button> sin href y sigue en rojo. */
  :root{--wa:#25D366;--wa-hover:#1EBE5A;--wa-text-hover:#0B6B33}
  .btn[href^="https://wa.me/"],
  .sticky-wa[href^="https://wa.me/"]{
    background:var(--wa);color:var(--ink);border-color:var(--wa);
    box-shadow:0 6px 16px -6px rgba(37,211,102,.6);
  }
  .btn[href^="https://wa.me/"]:hover,
  .sticky-wa[href^="https://wa.me/"]:hover{
    background:var(--wa-hover);border-color:var(--wa-hover);color:var(--ink);
  }
  .btn[href^="https://wa.me/"]:focus-visible,
  .sticky-wa[href^="https://wa.me/"]:focus-visible,
  a.contact-item[href^="https://wa.me/"]:focus-visible{
    /* anillo doble: se ve tanto sobre fondo claro como sobre el hero oscuro */
    outline:3px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 3px #fff;
  }
  /* Contacto directo: es un ítem de texto, no un botón. El texto verde sobre blanco no pasa AA,
     así que el verde va en el ícono (insignia circular) y el texto mantiene su color. */
  a.contact-item[href^="https://wa.me/"] svg{
    width:26px;height:26px;padding:5px;border-radius:50%;
    background:var(--wa);color:var(--ink);flex:none;
  }
  a.contact-item[href^="https://wa.me/"]:hover{color:var(--wa-text-hover)}

  /* ---------- v4 (21 oct. 2026): H1 con palabras clave ----------
     La línea chica dice qué hace Pautronic y dónde (lo que leen Google y las IA); el eslogan
     sigue siendo el titular grande. Mismo color que el texto secundario del hero. */
  .hero h1 .h1-kicker{
    display:block;margin-bottom:10px;
    font-family:"IBM Plex Sans","Segoe UI",Arial,sans-serif;font-weight:600;
    font-size:clamp(14px,1.35vw,16px);line-height:1.35;letter-spacing:0;
    color:rgba(255,255,255,.78);text-wrap:pretty;
  }