/* ==========================================================================
   Ajustes responsive globales
   Se carga con media="(max-width: 991.98px)". Acá va lo transversal;
   los breakpoints de cada componente viven en su propio archivo.
   ========================================================================== */

:root{ --gutter:22px; }

/* -------------------------------------------------------------------------
   Ritmo vertical: 120px asfixia en pantalla chica
   ------------------------------------------------------------------------- */

.zr-section{padding:76px 0;}
.zr-section.tight{padding:56px 0;}
.zr-head{margin-bottom:44px;}

/* -------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------- */

.zr-hero{min-height:auto;}
.zr-hero .zr-wrap{padding-top:132px;padding-bottom:56px;}
.zr-hero-copy{max-width:none;}
.zr-hero h1{margin-top:26px;}
.zr-hero .zr-sub{max-width:none;}

@media(max-width:640px){
  /* Dos botones lado a lado no caben sin cortarse */
  .zr-hero-cta{flex-direction:column;align-items:stretch;}
  .zr-hero-cta .zr-btn{width:100%;}

  .zr-hero-datos{gap:0;margin-top:48px;}
  .zr-hero-dato{
    flex:1 1 100%;padding:18px 0;border-bottom:1px solid var(--hair-oscuro);
    display:flex;align-items:baseline;gap:18px;
  }
  .zr-hero-dato:last-child{border-bottom:0;padding-bottom:0;}
  .zr-hero-dato .n{font-size:1.9rem;}
  .zr-hero-dato .l{margin-top:0;}
}

.zr-page-hero .zr-wrap{padding-top:120px;padding-bottom:56px;}

/* -------------------------------------------------------------------------
   Lista editorial: la grilla de 4 columnas se reordena en dos filas
   ------------------------------------------------------------------------- */

@media(max-width:900px){
  .zr-fila{
    grid-template-columns:auto 1fr auto;
    grid-template-areas:
      "idx titulo flecha"
      ".   texto  texto";
    gap:10px 20px;
    padding:28px 0;
  }
  .zr-fila .idx{grid-area:idx;padding-top:4px;}
  .zr-fila h3{grid-area:titulo;}
  .zr-fila p{grid-area:texto;margin-top:6px;}
  .zr-fila .flecha{grid-area:flecha;width:38px;height:38px;}
  .zr-fila .flecha svg{width:15px;height:15px;}
}

/* -------------------------------------------------------------------------
   Cifras
   ------------------------------------------------------------------------- */

@media(max-width:820px){
  .zr-cifras{grid-template-columns:1fr;}
  .zr-cifra{padding:32px 0;}
  .zr-cifra:last-child{border-bottom:1px solid var(--hair);}
}

/* -------------------------------------------------------------------------
   CTA
   ------------------------------------------------------------------------- */

.zr-cta .zr-wrap{
  padding-top:68px;padding-bottom:68px;
  flex-direction:column;align-items:flex-start;gap:34px;
}

@media(max-width:640px){
  .zr-cta .acciones{width:100%;flex-direction:column;}
  .zr-cta .acciones .zr-btn{width:100%;}
}

/* -------------------------------------------------------------------------
   Paneles y prosa
   ------------------------------------------------------------------------- */

@media(max-width:640px){
  .zr-panel{padding:30px 24px;}
  .zr-prose{font-size:1rem;}
  .zr-prose h2{font-size:1.65rem;}
  .zr-prose h3{font-size:1.3rem;}
  .zr-faq summary{font-size:1.15rem;padding:22px 0;}
}

/* Palabras largas ("reestructuración", "responsabilidad") desbordan en 360px */
h1,h2,h3,h4,p,li,td{overflow-wrap:break-word;}