/* ==========================================================================
   Vital Red — adaptación por tamaño de pantalla
   Puntos de control revisados: 1440 · 1024 · 768 · 430 · 390 · 360
   ========================================================================== */

/* --------------------------------------------------------------------------
   Pantallas grandes: se amplía el respiro lateral
   -------------------------------------------------------------------------- */
@media (min-width: 1500px) {
  :root { --container: 1280px; }
}


/* --------------------------------------------------------------------------
   ≤ 1240px · se compacta la barra superior
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   ≤ 1440px · el menú completo va justo dentro del contenedor
   La marca, los siete enlaces y la llamada a la acción suman unos pocos píxeles
   más que el contenedor entre 1240 y 1440 px; se recorta la separación del menú
   antes de que algo quede apretado contra el borde.
   -------------------------------------------------------------------------- */
@media (max-width: 1440px) {
  .nav { gap: 16px; }
  .nav__link { padding: 9px 9px; }
}


@media (max-width: 1240px) {
  .topbar__link--mail { display: none; }
  .nav { gap: 14px; }
  .nav__link { padding: 9px 8px; font-size: .9rem; }
  /* La bajada completa de la marca necesita espacio; por debajo de este ancho
     se oculta para que el menú no quede apretado. */
  .header .brand__tag { display: none; }
}


/* --------------------------------------------------------------------------
   ≤ 1080px · menú hamburguesa
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .burger { display: inline-flex; }

  .nav {
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    z-index: 70;
    inline-size: min(360px, 90vw);
    block-size: 100dvh;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 20px;
    padding: 26px 22px calc(32px + var(--actionbar-h) + env(safe-area-inset-bottom));
    background: #fff;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: -24px 0 60px -28px rgba(4, 16, 42, .7);
    /* El panel aparece con un desplazamiento vertical mínimo: así nunca
       sobresale del documento ni genera desplazamiento horizontal. */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition: transform .28s var(--ease), opacity .24s var(--ease), visibility 0s linear .28s;
  }
  .nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: transform .28s var(--ease), opacity .2s var(--ease), visibility 0s;
  }

  .nav__list { flex-direction: column; align-items: stretch; gap: 2px; margin-top: 46px; }
  .nav__link {
    padding: 14px 14px;
    border-radius: 12px;
    font-size: 1.02rem;
    font-weight: 500;
    border-bottom: 1px solid var(--line);
  }
  .nav__list li:last-child .nav__link { border-bottom: 0; }
  .nav__cta { width: 100%; min-height: 52px; }
}


/* --------------------------------------------------------------------------
   ≤ 1024px · reacomodo de las rejillas de dos columnas
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {

  /* Bloques que quedan solos en una columna: se les fija una medida cómoda y
     se centran, para que no se estiren de lado a lado de la tableta. */
  .contacto__datos,
  .contacto__form,
  .doc__body,
  .red__body { max-inline-size: 700px; margin-inline: auto; }

  /* Menos ancho disponible: el encuadre se corre para que la persona no
     quede pegada al filo derecho. */
  /* El contenedor de las cifras se vuelve vertical: la panorámica perdería
     los laterales, así que entra la versión 3:4. Un fondo no admite srcset,
     de modo que la selección se hace aquí. */
  .capacidad::before {
    background-image: url("../assets/images/editorial/capacidad-fondo-mobile.webp");
    background-position: center 30%;
  }

  .hero { min-block-size: min(74vh, 640px); }
  .hero__foto--1 img { object-position: 72% 26%; }
  .hero__foto--2 img { object-position: 70% 30%; }
  .hero__foto--3 img { object-position: 72% 24%; }
  .hero__medios::after {
    background: linear-gradient(100deg, #fff 16%, rgba(255, 255, 255, .94) 44%, rgba(255, 255, 255, .6) 62%, rgba(255, 255, 255, 0) 80%);
  }

  .intro__grid { grid-template-columns: 1fr; gap: 8px; }

  /* En una columna el texto va arriba y la fotografía debajo, a ancho completo.
     Igual que en las composiciones a sangre de la izquierda: el relleno lateral
     lo lleva el TEXTO, no la sección, para que la imagen llegue a los bordes. */
  /* Se anula la colocación explícita de columnas: en una sola columna, pedir
     la 2 y la 3 crearía columnas implícitas y volvería a partir la sección. */
  .especialidades { grid-template-columns: 1fr; row-gap: clamp(28px, 4vw, 40px); }
  .especialidades__body { grid-column: auto; padding-inline: var(--gutter); }
  .especialidades__media {
    grid-column: auto;
    min-block-size: 0;
    margin-block: 0 calc(-1 * var(--section-pad));
  }
  .especialidades__media img { block-size: auto; aspect-ratio: 16 / 10; }

  /* En una sola columna el texto va primero y la imagen del documento después. */
  .doc__grid { grid-template-columns: 1fr; gap: 40px; }

  /* Fotografía arriba y contenido debajo en las composiciones partidas.

     En una columna la fotografía sigue yendo de borde a borde: la rejilla de
     escritorio ya renunció al ancho máximo y al relleno del contenedor, así
     que aquí sólo hay que devolverle el relleno AL TEXTO, no a la sección.
     También hay que anular el alto mínimo de escritorio: combinado con el
     `aspect-ratio` de abajo, el navegador deducía el ancho a partir del alto y
     la imagen se iba a 747 px dentro de una pantalla de 390. */
  .proceso__grid,
  .red__grid { grid-template-columns: 1fr; column-gap: 0; }
  .proceso__grid { row-gap: 32px; }
  .red__grid { row-gap: 34px; }
  /* En una columna la fotografía va arriba del texto, así que sólo se come el
     relleno de arriba; abajo tiene que quedar el aire que la separa del texto.
     El ancho máximo de `.red__body` de la tableta se anula: aquí el bloque ya
     lleva su propio relleno y centrarlo lo descuadraba del contenedor. */
  .proceso__media,
  .red__media { min-block-size: 0; margin-block: calc(-1 * var(--section-pad)) 0; }
  .red__body { max-inline-size: none; margin-inline: 0; }
  .proceso__cuerpo,
  .red__body { padding-inline: var(--gutter); padding-block: 0; }
  .proceso__media img,
  .proceso__media picture { block-size: auto; aspect-ratio: 16 / 9; object-position: 50% 30%; }

  .empresas__grid { grid-template-columns: 1fr; }
  .empresas__cta { position: static; }

  /* En una columna el recorte es 16:9 sobre una vertical 4:5, así que se
     conserva todo el ancho y se recorta a lo alto: la posición horizontal deja
     de importar y la vertical baja al 55 % para que entren las cuatro cabezas.
     Con el 42 % de escritorio la pareja sentada quedaba cortada. */
  .red__media img { block-size: auto; aspect-ratio: 16 / 9; object-position: 50% 55%; }

  /* Presencia internacional: el relato arriba y los países debajo, en dos
     columnas para que no queden dos rótulos sueltos ocupando media pantalla. */
  .presencia__grid { grid-template-columns: 1fr; gap: clamp(28px, 4vw, 40px); }
  /* En una sola columna el contenido ocupa todo el ancho, así que entra la
     versión vertical, compuesta por el cliente con el ángulo superior izquierdo
     limpio y el color en el borde derecho y abajo. Un fondo CSS no admite
     `srcset`: el cambio se hace aquí, en el mismo corte en el que la sección
     pasa a una columna.

     El encuadre vertical va al 60 % y no abajo. `cover` recorta distinto según
     la forma de la sección: en celular la sección es alta, escala por altura y
     se ve la imagen entera —la posición vertical no cambia nada—; pero a 1024
     px la sección es ancha y baja, escala por ancho y sólo se ve una franja.
     Anclada abajo ampliaba la banda roja, que inundaba la sección y dejaba
     «Colombia» sobre rojo pleno. Al 60 % esa franja cae sobre la cinta azul y
     el celular no se entera. */
  .presencia::before {
    background-image: url("../assets/images/editorial/presencia-colombia-bandera-mobile.webp");
    background-position: center 60%;
  }
  /* El velo va en diagonal, no en vertical, para acompañar la composición de la
     imagen: baja del ángulo limpio hacia el de color.

     Es mucho más flojo que el que había. El anterior venía de una imagen sin
     color propio y aplastaba esta hasta dejarla irreconocible. Con la vertical
     del cliente el archivo ya trae su propio degradado, así que el velo sólo
     tiene que proteger el renglón del enlace «Consultar alcance» —el texto más
     débil de la sección, y el único que se acerca al límite— y puede soltarse
     por debajo, donde sólo quedan los dos rótulos en negrita, que sobran de
     contraste.

     Medido sobre los píxeles pintados en 320, 390, 834 y 1024 px: el mínimo es
     4.80:1 en el enlace. Si se toca esta curva hay que volver a medirlo. */
  .presencia::after {
    background: linear-gradient(150deg, #fff 14%, rgba(255, 255, 255, .8) 40%, rgba(255, 255, 255, .54) 68%, rgba(255, 255, 255, .16) 100%);
  }
  .presencia__paises { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 40px); }
  .presencia__paises li { border-block-start: 1px solid var(--line); padding-block: clamp(18px, 2.4vw, 24px) 0; }

  /* Mismo criterio que en «Especialidades»: relato arriba con su relleno, y la
     fotografía debajo de borde a borde, comiéndose el relleno inferior de la
     sección. El bloque lateral que agrupaba fotografía y valores desapareció:
     la fotografía es columna propia y los valores bajaron con el relato. */
  .nosotros__grid { grid-template-columns: 1fr; row-gap: clamp(28px, 4vw, 40px); }
  .nosotros__body { grid-column: auto; padding-inline: var(--gutter); padding-block: 0; }
  .nosotros__media {
    grid-column: auto;
    min-block-size: 0;
    margin-block: 0 calc(-1 * var(--section-pad));
  }
  .nosotros__media img { block-size: auto; aspect-ratio: 16 / 10; }

  /* En una columna vuelve el orden natural: cabecera, preguntas y, al final,
     el bloque de ayuda. */
  .faq__grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .faq__head,
  .faq__list,
  .faq__cierre { grid-column: auto; grid-row: auto; }
  .faq__grid { gap: 26px; }

  .contacto__grid { grid-template-columns: 1fr; }

  /* Catálogo: el buscador se pone encima, a lo ancho, y las pestañas debajo.
     A partir de aquí las siete categorías ya no caben en una línea junto al
     buscador; repartidas en dos filas, el subrayado de la activa se separaba
     del filete de la barra y el conjunto se veía desalineado.
     `nowrap` es imprescindible: en columna con `wrap`, la línea toma el ancho
     del elemento más ancho y la tira se salía del documento en vez de
     recortarse. El desplazamiento vive dentro del elemento: no engorda el
     documento ni provoca desplazamiento horizontal de la página. */
  /* En columna se respeta el orden del documento: primero el buscador y las
     pestañas al final, pegadas al filete de la barra, que es donde tiene que
     apoyarse el subrayado de la activa. */
  .catalogo__tools { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0; }
  .buscador { min-inline-size: 0; inline-size: 100%; margin-block: 0 14px; }
  .filtros {
    min-inline-size: 0;
    gap: 0 22px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .filtros::-webkit-scrollbar { display: none; }
  .filtro {
    flex: none;
    scroll-snap-align: start;
    min-block-size: 42px;
    padding: 11px 0 10px;
    font-size: .88rem;
  }

  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; max-inline-size: 560px; }
}


/* --------------------------------------------------------------------------
   ≤ 900px · pasos y galería
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .paso { column-gap: 16px; }

  /* Un testimonio por vista. El renderizador usa el mismo corte (dibuja dos
     por encima de 900 px y uno a partir de aquí), así que la retícula y el
     número de tarjetas nunca se desincronizan. */
  .testimonios__vista { grid-auto-columns: 100%; }
  .testimonio { min-block-size: 260px; }

  /* Tableta: dos columnas de servicios. */
  .salud__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Por debajo de 900 px los dos países vuelven a apilarse: en dos columnas
     estrechas el rótulo se partía. */
  .presencia__paises { grid-template-columns: 1fr; }
  .presencia__paises li:first-child { border-block-start: 0; }
  .pilares { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 24px; }
  .contextos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* En dos columnas la línea va a la izquierda solo en la segunda de cada fila
     y arriba en las de la fila inferior. */
  .contexto + .contexto { box-shadow: none; }
  .contexto:nth-child(even) { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .16); }
  .contexto:nth-child(n + 3) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16); }
  .contexto:nth-child(4) { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .16), inset 0 1px 0 rgba(255, 255, 255, .16); }

  /* Las cifras pasan a dos columnas: los separadores solo entre las de una
     misma fila, y una línea horizontal entre filas. */
  .cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 24px; }
  .cifra:nth-child(odd) { border-inline-start: 0; padding-inline-start: 0; }
  .cifra:nth-child(n + 3) { padding-top: 30px; border-block-start: 1px solid rgba(168, 204, 247, .24); }

}


/* --------------------------------------------------------------------------
   ≤ 768px · experiencia móvil
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --gutter: 18px;
    --header-h: 66px;
    --actionbar-h: 64px;
  }

  .topbar { font-size: .84rem; }
  .topbar__inner { justify-content: center; gap: 4px; min-height: 42px; }
  .topbar__links { gap: 0; }
  .topbar__link--join { display: none; }
  /* Los círculos se aprietan: aquí la barra ya sólo lleva el estado y el
     teléfono, y el objetivo es que los tres quepan en un renglón. */
  .topbar__red { inline-size: 30px; block-size: 30px; }
  .topbar__red .ico { inline-size: 16px; block-size: 16px; }
  .topbar__link span { font-size: .84rem; }
  .topbar__link {
    min-block-size: 42px;
    background: transparent;
    border-color: transparent;
  }

  .brand__mark { inline-size: 46px; }
  .brand__name { font-size: 1rem; letter-spacing: .1em; }
  .brand__tag { display: none; }

  /* El hero ocupa algo menos de alto en celular y el botón va a lo ancho. */

  /* La tarjeta de dirección pasa a colocarse debajo del mapa para no taparlo. */
  .mapa__marco { border-radius: var(--radius) var(--radius) 0 0; }
  .mapa__iframe { block-size: 280px; }
  .mapa__tarjeta {
    position: static;
    max-inline-size: none;
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: none;
    border: 1px solid var(--line);
    border-top: 0;
  }


  .modal { padding: 0; align-items: flex-end; }
  .modal__dialog {
    inline-size: 100%;
    max-block-size: 92dvh;
    border-radius: 22px 22px 0 0;
    animation: modalUp .3s var(--ease);
  }
  .modal__media img { border-radius: 22px 22px 0 0; aspect-ratio: 16 / 9; }


  .campo-fila { grid-template-columns: 1fr; gap: 0; }

  .footer__bottom-inner { padding-inline-end: 0; justify-content: center; text-align: center; }
  .footer__legal { justify-content: center; }

  /* En móvil se sustituye el botón flotante por la barra inferior */
  .fab { display: none; }
  .actionbar {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 90;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--line);
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 24px -14px rgba(4, 16, 42, .4);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .actionbar a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 62px;
    background: #fff;
    font-size: .95rem;
    font-weight: 600;
    color: var(--navy-900);
    --ico: 20px;
  }
  .actionbar a:hover, .actionbar a:active { text-decoration: none; background: var(--gray-050); }
  .actionbar__wa { background: #25D366 !important; color: #06301A !important; }
  .actionbar__wa .ico { fill: currentColor; stroke: none; }
  .actionbar__wa:active { background: #1FBA5A !important; }
}


@keyframes modalUp { from { transform: translateY(30px); opacity: 0; } }


/* --------------------------------------------------------------------------
   ≤ 700px · el hero se apila
   Las fotografías son horizontales (16:9) y llevan a la persona a la derecha.
   Recortarlas a un ancho de celular dejaría medio rostro fuera, así que en vez
   de usarlas como fondo se colocan enteras debajo del texto.
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .hero__flecha { display: none; }
  .hero__puntos {
    position: static;
    /* Sin 'order' irían antes que el texto: son hijos directos del hero y el
       valor por omisión es menor que el del bloque de contenido. */
    order: 1;
    justify-content: flex-start;
    margin-top: 22px;
  }

  .hero {
    display: flex;
    flex-direction: column;
    /* En columna, el 'center' heredado encogería la capa de fotografías a
       cero de ancho: aquí los hijos deben ocupar todo el ancho. */
    align-items: stretch;
    min-block-size: 0;
    padding-block: 34px 0;
  }
  .hero__inner { order: 1; }

  /* Deja de ser capa de fondo: ahora ocupa su propio sitio en el flujo. */
  .hero__medios {
    position: relative;
    inset: auto;
    inline-size: 100%;
    order: 2;
    margin-top: 30px;
    /* La proporción la fija el contenedor para que no salte al cargar. */
    aspect-ratio: 16 / 9;
  }
  .hero__medios::after { display: none; }
  .hero__foto img { object-position: center; }

  .hero__title { font-size: clamp(1.5rem, 6.4vw, 2rem); }
  /* La portada de la marca conserva su ventaja de tamaño también en el móvil,
     pero con una medida que deja el titular en dos líneas y el nombre en una,
     sin partir «VITAL RED». */
  .hero__title--marca { font-size: clamp(1.85rem, 8.2vw, 2.5rem); max-inline-size: 11ch; }
  .hero__marca { letter-spacing: .22em; font-size: .38em; }
  .hero__marca::before { inline-size: 48px; block-size: 2px; }
  .hero__lead { margin-bottom: 24px; }
  .hero__acciones { flex-direction: column; align-items: stretch; }
  .hero__acciones .btn { inline-size: 100%; justify-content: center; }
}


/* --------------------------------------------------------------------------
   ≤ 620px · una sola columna
   -------------------------------------------------------------------------- */
@media (max-width: 620px) {

  .salud__grid { grid-template-columns: 1fr; }
  .pilares { grid-template-columns: 1fr; gap: 20px; }
  .catalogo__grid { grid-template-columns: 1fr; }
  .contextos { grid-template-columns: 1fr; }
  .contexto { aspect-ratio: 16 / 10; }
  .contexto img { object-position: 50% 38%; }
  .contexto + .contexto,
  .contexto:nth-child(even),
  .contexto:nth-child(n + 3),
  .contexto:nth-child(4) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16); }
  .ecards { grid-template-columns: 1fr; }
  .ecards li:nth-child(2) { border-block-start: 1px solid var(--gray-200); padding-block-start: 20px; }

  /* Una cifra por fila, separadas por una línea fina. */
  .cifras { grid-template-columns: 1fr; gap: 24px; }
  .cifra + .cifra {
    border-inline-start: 0;
    padding-inline-start: 0;
    padding-top: 24px;
    border-block-start: 1px solid rgba(168, 204, 247, .24);
  }
  .cifra:nth-child(n + 3) { padding-top: 24px; }


  .especialidades__list { grid-template-columns: 1fr; }
  .modal__incluye { grid-template-columns: 1fr; }

  .contacto__acciones .btn, .form__acciones .btn { flex: 1 1 100%; }

  .footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .footer__brand { max-inline-size: none; }
}


/* --------------------------------------------------------------------------
   ≤ 430px · teléfonos compactos
   -------------------------------------------------------------------------- */
@media (max-width: 430px) {
  :root { --gutter: 16px; }

  .topbar__status { font-size: .8rem; }
  .topbar__link span { font-size: .8rem; }
  .topbar__link { padding-inline: 8px; }
  /* Por debajo de este ancho la barra ya no da más de sí: medido, «Atención
     24/7 en todo México» y el teléfono ocupan el renglón entero, y los dos
     círculos obligaban a un tercer salto. Se retiran aquí y no se pierde el
     acceso: el pie lleva el bloque «Síguenos en redes sociales» con el nombre
     de cada red escrito, que en pantalla pequeña además se identifica mejor
     que un icono suelto. */
  .topbar__redes { display: none; }

  .section__head .btn { inline-size: 100%; }
  .tablet { inline-size: 100%; }
  .doc__caption { font-size: .8rem; padding: 9px 14px; }
}


/* --------------------------------------------------------------------------
   ≤ 360px · teléfonos pequeños
   -------------------------------------------------------------------------- */
@media (max-width: 360px) {
  :root { --gutter: 14px; }
  .brand__mark { inline-size: 40px; }
  .brand__name { font-size: .92rem; }
  .btn { padding: 11px 16px; font-size: .9rem; }
  .btn--lg { padding: 13px 18px; font-size: .95rem; }
  .filtro { font-size: .84rem; }
  .topbar__link span { font-size: .75rem; }
}


/* --------------------------------------------------------------------------
   ≤ 340px · el ancho mínimo que debe verse correcto (320 px)
   -------------------------------------------------------------------------- */
@media (max-width: 340px) {
  :root { --gutter: 12px; }
  .acard__body { padding: 14px 14px 0; }
  .acard__foot { margin-inline: 14px; padding-bottom: 12px; }
  .contacto__form { padding: 20px 16px; }
  .modal__body { padding: 22px 18px 24px; }
  .filtro { font-size: .82rem; gap: 6px; }
}


/* --------------------------------------------------------------------------
   Pantallas anchas y bajas: se evita un hero demasiado alto
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) and (max-height: 760px) {
  .hero { padding-block: 40px 96px; }
}