/* =========================================================================
   URRETA — Tablet y phablet (480 – 1279px)
   -------------------------------------------------------------------------
   El sitio tiene dos maquetados: el artboard escalado de 1980px, que manda
   de 1280px en adelante, y la columna de `mobile.css`, que manda por debajo.
   Esta hoja es la que hace habitable el tramo intermedio.

   Sin ella habia que elegir entre dos malas opciones: escalar el artboard
   —a 768px de ancho 1rem baja a 6px y el texto es ilegible— o servir el
   maquetado de movil tal cual, con una columna de 30rem estirada a lo ancho
   de la pantalla y renglones de 90 caracteres.

   Lo que hace son tres cosas, en este orden:

     1. Sube la raiz tipografica. La columna de movil esta escrita para
        1rem = 16px a 479px de ancho; aqui la raiz crece con la pantalla
        pero con techo, para que el texto no acabe gigante.
     2. Centra la columna con un ancho maximo (`--mx` deja de ser un margen
        fijo y pasa a ser el hueco que sobra a cada lado).
     3. Devuelve a dos —o tres— columnas las rejillas que en movil van
        apiladas, que es lo que separa de verdad una tablet de un telefono
        grande.

   PHABLET  480 – 767   una columna, mas ancha y con mas aire.
   TABLET   768 – 1279  dos columnas en las rejillas de tarjetas.
   ========================================================================= */

/* ============================= PHABLET ============================== */

@media (min-width: 480px) and (max-width: 767px) {

  /* Arranca donde lo deja el movil (16px a 479) y sube despacio. */
  html { font-size: min(18px, calc(11.3px + 0.98vw)) !important; }

  :root {
    /* El margen deja de ser fijo: es el hueco que sobra al limitar la
       columna a 34rem, con un minimo para que nunca toque el borde.

       Se mide contra `--viewport-w` —el ancho real que publica
       js/scale.js, ya sin la barra de desplazamiento— y no contra un
       porcentaje: un porcentaje se resolveria contra la caja de cada
       elemento que lo use, y dentro de una tarjeta daria otro valor. */
    --mx: max(1.25rem, calc((var(--viewport-w, 100vw) - 34rem) / 2));
  }

  /* Dos por fila en las rejillas de tarjetas que en movil van apiladas:
     a este ancho caben de sobra y la pagina deja de ser interminable. */
  .cont-card,
  .cred,
  .enf,
  .est,
  .si-card,
  .serv {
    break-inside: avoid;
  }
}

/* ============================== TABLET ============================== */

@media (min-width: 768px) and (max-width: 1279px) {

  html { font-size: min(20px, calc(13.6px + 0.83vw)) !important; }

  :root {
    --mx: max(2rem, calc((var(--viewport-w, 100vw) - 46rem) / 2));
  }
}

/* ------- Rejillas de dos columnas, de 768 en adelante --------------- */
/* Van fuera del bloque de arriba para poder apoyarse en el `grid` que ya
   monta `mobile.css`: aqui solo se cambia el numero de columnas. */

@media (min-width: 768px) and (max-width: 1279px) {

  /* Tarjetas de contacto de Siniestros: vuelven a la pareja del diseno. */
  .si-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    margin: 0 var(--mx);
  }
  .si-card { margin-left: 0; margin-right: 0; }
  .si-card--a { margin-top: 0; }

  /* Plataformas del area interna: de dos a cuatro. */
  .ati-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --------- Rejilla de aseguradoras (Siniestros) --------------------
   En movil el logotipo y su boton van uno detras de otro en una sola
   columna. A partir de 480 caben varios por fila: `.si-aseg` —el par
   envuelto— es la celda. La rejilla se monta sobre `.si-guias`, que ya
   lleva el margen de la columna; el titulo y las pestanas ocupan la fila
   entera.
   ------------------------------------------------------------------- */

@media (min-width: 480px) and (max-width: 1279px) {
  .si-guias {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 2rem 1.5rem;
  }
  .si-panel__titulo,
  .si-panel__texto,
  .si-ramos,
  .si-aviso-ramo,
  .si-vermas { grid-column: 1 / -1; }

  .si-aseg {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }
  .si-aseg .si-logo { margin: 0; }
  .si-aseg .si-descarga { margin: 0; }
}

@media (min-width: 900px) and (max-width: 1279px) {
  .si-guias { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* ---------- Pilas de tarjetas: dos por fila en tablet ----------------
   En movil cada una de estas listas es una pila. De 768 en adelante caben
   dos por fila de sobra, y sin ellas la pagina se hace larguisima: la Home
   encadena cuatro pilas seguidas. El titulo de cada seccion ocupa la fila
   entera.

   Se monta sobre el contenedor de seccion que ya existe —el mismo que en
   movil lleva el `padding: 3rem var(--mx)`—, asi que los margenes de la
   columna se respetan solos.
   -------------------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 1279px) {

  .enfoque,
  .continuidad {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 1.5rem;
  }
  .enfoque__titulo,
  .continuidad__titulo-track { grid-column: 1 / -1; }

  /* Las tarjetas ya no necesitan el margen inferior de la pila: lo pone
     el `gap`. */
  .enfoque .enf,
  .continuidad .cont-card { margin-bottom: 0; }

  /* Listado del blog: la entrada destacada sigue ocupando el ancho. Las
     tarjetas cuelgan directamente del ancla del tramo, que en columna esta
     en flujo normal, asi que la rejilla va ahi. */
  .tramo--bl-tarjetas > .tramo__ancla {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    column-gap: 0;
  }
  .bl-card { margin-bottom: 1.25rem; }
  .bl-card--grande { grid-column: 1 / -1; }
}