/* ============================================================
   AperClau · responsive.css  (v4 — anti-desborde + selectores reales)
   El diseño base es desktop-fijo 1440px sin media queries.
   Este archivo lo hace responsive. Debe cargar EL ÚLTIMO.
   ============================================================ */

/* ---------- Base fluida ---------- */
.page{ width:100% !important; max-width:1440px !important; }
html,body{ overflow-x:hidden; }
img,svg{ max-width:100%; height:auto; }
*{ overflow-wrap:break-word; }

/* CLAVE: deja que los hijos de grid/flex se encojan por debajo de su
   contenido (si no, una palabra/botón ancho rompe la maqueta). */
.page *{ min-width:0; }

/* pad-x fluido (afecta a todas las secciones que usan var(--pad-x)) */
@media (max-width:1200px){ :root{ --pad-x:56px; } }
@media (max-width:900px){  :root{ --pad-x:36px; } }
@media (max-width:600px){  :root{ --pad-x:20px; } }

/* ---------- Filas flex que deben envolver ----------
   (flex-wrap sólo envuelve si no caben; inofensivo en grids) */
.zhero .actions,.svchero .actions,[class~="actions"],
.hero .cta-row,.hero .meta,.hero .tel-sub,
.hero .eyebrow-row,.hero .eyebrow-row .zone-list,
.cta .top,.reviews .head,.scenarios .head,.services .head,
.locks .head,.rel-zones .head,.included .head,
.hub-svc .meta,.hub-zone .meta,
.zhero .ey,.svchero .ey,.hub-hero .ey,
.footer .legal,.topbar,.topbar .left,.topbar .right{
  flex-wrap:wrap;
}

/* ---------- Hubs SIEMPRE en 1 columna ----------
   Las tarjetas grandes de servicio/zona se apilan: caben los títulos
   grandes y la flecha CTA sin recortes a cualquier ancho. */
.hub-svc-grid,.hub-zone-grid{ grid-template-columns:1fr !important; }
.hub-svc-grid > a:first-child,
.hub-zone-grid > a:first-child{ grid-column:auto !important; }

/* ---------- Hero de zona SIEMPRE en 1 columna ----------
   El titular gigante necesita el ancho completo; el mapa pasa debajo
   como banda con altura acotada (sin aspect-ratio que lo dispara). */
.zhero .grid{ grid-template-columns:1fr !important; }
.zhero .map{
  aspect-ratio:auto !important;
  height:clamp(260px,38vw,440px) !important;
}

/* ---------- CTA de zona SIEMPRE en 1 columna ----------
   Mismo motivo: el titular enorme necesita el ancho completo. */
.zcta .grid{ grid-template-columns:1fr !important; }

/* ---------- Titulares gigantes que desbordan incluso en desktop ---------- */
.zhero h1{ font-size:clamp(40px,10vw,150px) !important; }
.hub-hero h1{ font-size:clamp(44px,9.5vw,184px) !important; }
.zcta h2{ font-size:clamp(40px,8vw,120px) !important; }

/* ============================================================
   TABLET  ≤ 1200px
   ============================================================ */
@media (max-width:1200px){

  /* Bloques de 2 columnas lado a lado → 1 columna */
  .hero .core,
  .about .row,
  .zones .head,
  .city .head,
  .svchero .core,
  .process .head,
  .work .head,
  .svc-hub-hero .row,
  .precio .head,
  .hub-svc, .hub-svc.feat,
  .hub-zone, .hub-zone.feat{
    grid-template-columns:1fr !important;
    gap:40px !important;
  }

  /* Grids multi-columna → 2 columnas */
  .svc-grid,
  .rev-grid,
  .steps,
  .ficha .row,
  .cases,
  .rel-zones .grid,
  .cta .row,
  .city .cols,
  .footer .row{
    grid-template-columns:1fr 1fr !important;
  }

  /* Grid de 5 columnas → 3 */
  .zone-grid{ grid-template-columns:1fr 1fr 1fr !important; }

  /* Tipografía display gigante → fluida */
  .hero .pre,.hero h1{ font-size:clamp(40px,6vw,72px) !important; }
  .hero .tel-mega,.cta .num .big{ font-size:clamp(72px,15vw,200px) !important; }
  .services .head h2,.zones .head h2,.city h2,
  .scenarios .head h2,.reviews h2,.about h2{ font-size:clamp(48px,8vw,104px) !important; }
  .cta .sub{ font-size:clamp(34px,5vw,56px) !important; }
  .svchero .pre{ font-size:clamp(46px,7vw,150px) !important; }
  .svchero .tel-mega,.zcta .tel{ font-size:clamp(64px,13vw,170px) !important; }
  .process h2,.work h2,.included h2,.locks h2,.rel-zones h2{ font-size:clamp(44px,7vw,96px) !important; }
  .hub-svc h3{ font-size:clamp(44px,7vw,80px) !important; }
  .hub-zone h3{ font-size:clamp(46px,7.5vw,96px) !important; }
  .hub-svc.feat h3,.hub-zone.feat h3{ font-size:clamp(48px,8vw,104px) !important; }
  .ficha .val{ font-size:clamp(48px,8vw,84px) !important; }

  /* Números mega decorativos: se OCULTAN por debajo de 1200px.
     En tarjeta de 1 columna se montan sobre el texto y, al ser del
     mismo color mostaza, se confunden. Son sólo decorativos. */
  .hub-svc .num-mega,.hub-zone .num-mega{ display:none !important; }
}

/* ============================================================
   FILAS-TABLA de 4-5 columnas  ≤ 1000px
   ============================================================ */
@media (max-width:1000px){
  .svc-row{
    grid-template-columns:64px 1fr !important;
    gap:8px 24px !important;
    padding:32px var(--pad-x) !important;
  }
  .svc-row .row-num{ font-size:46px !important; }
  .svc-row .row-title{ font-size:30px !important; }
  .svc-row .row-title,.svc-row .row-desc,
  .svc-row .row-meta,.svc-row .row-arrow{ grid-column:2 !important; max-width:none !important; }

  .inc-row{
    grid-template-columns:48px 1fr !important;
    gap:6px 20px !important;
  }
  .inc-row > *:not(.n){ grid-column:2 !important; max-width:none !important; }

  .lock-row{
    grid-template-columns:48px 1fr !important;
    gap:6px 20px !important;
  }
  .lock-row > *:not(.n){ grid-column:2 !important; max-width:none !important; }

  .precio-row{ grid-template-columns:1fr !important; gap:8px !important; }
}

/* ============================================================
   MÓVIL  ≤ 600px  — todo a 1 columna
   ============================================================ */
@media (max-width:600px){

  .svc-grid,.rev-grid,.scen-grid,
  .steps,.ficha .row,.cases,.rel-zones .grid,
  .cta .row,.city .cols,.zone-grid,
  .about .stats,
  .footer .row{ grid-template-columns:1fr !important; }

  /* Tipografía más contenida */
  .hero .pre,.hero h1,
  .svchero .pre{ font-size:clamp(30px,8vw,56px) !important; }
  .hero .tel-mega,.cta .num .big{ font-size:clamp(54px,16vw,96px) !important; }
  .services .head h2,.zones .head h2,.city h2,
  .scenarios .head h2,.reviews h2,.about h2,
  .process h2,.work h2,.included h2,.locks h2,
  .rel-zones h2,.zcta h2{
    font-size:clamp(32px,8.5vw,52px) !important;
  }
  .cta .sub{ font-size:clamp(28px,7vw,42px) !important; }
  .svchero .tel-mega,.zcta .tel{ font-size:clamp(46px,13vw,82px) !important; }
  .hub-svc h3,.hub-zone h3,
  .hub-svc.feat h3,.hub-zone.feat h3{ font-size:clamp(30px,8.5vw,60px) !important; }
  .svc .n{ font-size:60px !important; }
  .inc-row .name,.lock-row .name{ font-size:clamp(24px,6.5vw,40px) !important; }
  h1,h2,h3{ word-break:break-word; }

  /* Tarjetas hub: menos padding para que el título no rompa */
  .hub-svc,.hub-zone{ padding:40px 22px !important; }

  /* Topbar apilado */
  .topbar{
    gap:12px; height:auto !important;
    padding-top:14px !important; padding-bottom:14px !important;
  }
  .topbar .left,.topbar .right{ gap:10px 16px; }
  .topbar .pill{ display:none; }
  .topbar .nav-sep{ display:none; }

  /* Cabeceras flex (título + texto a la derecha) → apiladas */
  .services .head,.scenarios .head,.reviews .head,
  .locks .head,.rel-zones .head,
  .cta .top,.footer .legal{
    flex-direction:column !important; align-items:flex-start !important; gap:20px !important;
  }

  /* Hero home */
  .hero .core{ gap:32px !important; }
  .hero .meta{ gap:24px 40px !important; }
  .hero .logo-side .logo-img{ width:min(280px,72vw) !important; height:auto !important; }

  /* Eyebrows con varios spans → apilar */
  .hero .eyebrow-row,.svchero .ey,.zhero .ey,.hub-hero .ey,
  .precio .nota{
    flex-direction:column !important; align-items:flex-start !important; gap:6px !important;
  }
  .hero .eyebrow-row .zone-list{ gap:6px 18px !important; }

  /* Acciones (botones) → uno por fila */
  .zhero .actions,.svchero .actions,.hero .cta-row{ gap:12px !important; }

  /* Padding vertical más sano */
  section,.hero,.svchero,.zhero,.hub-hero,.footer{
    padding-top:48px !important; padding-bottom:48px !important;
  }
}

/* ============================================================
   SELLO "DESDE 2020" de la home (.since)
   En el diseño base los textos laterales son ABSOLUTOS y el sello
   mide 560px fijos: al estrechar la ventana los laterales se montan
   sobre el círculo. Por debajo de 1150px se apila todo en columna
   y el sello se vuelve fluido.
   ============================================================ */
@media (max-width:1150px){
  .since{
    display:flex !important;
    flex-direction:column; align-items:center; gap:36px;
  }
  .since .seal-wrap{
    order:-1;                                  /* el sello, primero */
    width:min(520px,80vw) !important;
    height:auto !important;
    aspect-ratio:1 !important;
  }
  .since .center-stack .big{ font-size:clamp(92px,21vw,156px) !important; }
  .since .side{
    position:static !important; transform:none !important;
    width:auto !important; max-width:460px;
    margin:0 !important; text-align:center !important;
  }
  .since .side.l,.since .side.r{ left:auto !important; right:auto !important; }
}

/* ============================================================
   FIX: número decorativo detrás del texto, no encima
   ============================================================ */
.hub-svc,.hub-zone,.svc{ overflow:hidden; }
.hub-svc .num-mega,.hub-zone .num-mega,
.svc-row .row-num,.inc-row .n,.lock-row .n{
  z-index:0 !important;
}
.hub-svc .stack,.hub-zone .stack,
.hub-svc .meta,.hub-zone .meta,
.hub-svc .arrow-cta,.hub-zone .arrow-cta,
.svc-row .row-title,.svc-row .row-desc,.svc-row .row-meta,
.inc-row .name,.inc-row .desc,.inc-row .incl,
.svc .top,.svc h3,.svc p,.svc .more{
  position:relative; z-index:2 !important;
}