/* ══════════════════════════════════════════════════════════════════
   FLOWENT v2 — RESPONSIVE
   Móvil primero: los archivos anteriores definen el estado móvil.
   Aquí solo se AMPLÍA hacia arriba, más un bloque final de ajustes
   finos hacia abajo para pantallas muy estrechas.
══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   ≥ 560px — móvil grande
══════════════════════════════════════════════════════════════ */
@media (min-width: 560px) {
  .form__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ══════════════════════════════════════════════════════════════
   ≥ 720px — tablet vertical
══════════════════════════════════════════════════════════════ */
@media (min-width: 720px) {
  .case { grid-template-columns: 0.85fr 1fr; }
  .case__media { min-height: 100%; }

  .sectors__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .step { grid-template-columns: 1fr 0.92fr; gap: var(--sp-10); }

  .foot__top { grid-template-columns: 1.15fr 2fr; gap: var(--sp-16); }
}

/* ══════════════════════════════════════════════════════════════
   ≥ 900px — el punto donde entra la navegación de escritorio
══════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
  .impact__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sectors__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .contact__grid { grid-template-columns: 0.9fr 1.1fr; gap: clamp(3rem, 6vw, 6rem); }
}

/* ══════════════════════════════════════════════════════════════
   ≥ 1024px — escritorio
══════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  /* El texto ocupa la mitad izquierda; la red respira en la derecha. */
  .hero__text { max-width: 58%; }
  /* La máscara se desplaza a la derecha para que la red no compita con
     el bloque de texto: el fondo se apaga justo donde se lee.         */
  .hero__net { mask-image: linear-gradient(90deg, transparent 26%, #000 52%, #000 100%); }
}

/* ══════════════════════════════════════════════════════════════
   ≤ 899px — navegación móvil
══════════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
  .nav__menu { display: none; }
  .nav__side > .btn { display: none; }
  .burger { display: flex; }
}

/* ══════════════════════════════════════════════════════════════
   ≤ 899px — SERVICIOS: de horizontal fijado a carrusel vertical
   El scroll horizontal fijado en táctil secuestra el gesto y se
   siente roto. En móvil pasa a una pila normal con snap.
══════════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
  .svc__pin { height: auto; display: block; overflow: visible; }
  .svc__head { padding-block: var(--sp-section) var(--sp-8); }
  .svc__viewport { display: block; }
  .svc__track {
    flex-direction: column;
    padding-inline: var(--sp-gutter);
    transform: none !important;
  }
  .card-svc { width: 100%; }
  .card-svc__no { margin-bottom: var(--sp-6); }
  .svc__prog { display: none; }
  .svc { padding-bottom: var(--sp-section); }
}

/* ══════════════════════════════════════════════════════════════
   ≤ 719px — CASOS: la pila adherente se desactiva
   Apilar tarjetas de pantalla completa en un móvil deja al usuario
   sin salida. Se convierten en tarjetas normales en flujo.
══════════════════════════════════════════════════════════════ */
@media (max-width: 719px) {
  .case {
    position: static;
    min-height: 0;
    transform: none !important;
    box-shadow: var(--shadow-3);
  }
  .case__media { aspect-ratio: 16 / 9; min-height: 0; }
  .case__res { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
  .res__v { font-size: var(--fs-h4); }
}

/* ══════════════════════════════════════════════════════════════
   ≤ 719px — SECTORES: sin hover no hay revelado
   En táctil se muestra la descripción siempre y se apaga el fondo.
══════════════════════════════════════════════════════════════ */
@media (hover: none) {
  .sector__desc { opacity: 1; transform: none; }
  .sectors__bg { display: none; }
  .panel--lit::before, .panel--lit::after { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   ≤ 640px — móvil
══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* Ya no hace falta reservar sitio para la barra: está en el flujo. */
  .hero__title { max-width: 100%; }
  .hero__acts { flex-direction: column; align-items: stretch; }
  .hero__acts .btn { width: 100%; }

  .hero__rail-in { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
  .hero__cue { display: none; }
  /* Rejilla de tres en lugar de flex: apilados ocupaban media pantalla y
     empujaban la llamada a la acción fuera del primer golpe de vista.   */
  .hero__facts {
    width: 100%;
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-3);
  }
  .fact { padding-left: var(--sp-3); }
  .fact__v { font-size: var(--fs-body); }
  .fact__k { font-size: var(--fs-micro); letter-spacing: 0.06em; line-height: 1.35; }

  .svc__head-in { flex-direction: column; align-items: flex-start; }

  .impact__grid { border-radius: var(--r-lg); }

  .stmt__pin { min-height: 78svh; }


  .foot__mark { height: clamp(120px, 34vw, 200px); opacity: 0.4; }
}

/* ══════════════════════════════════════════════════════════════
   ≤ 420px — pantallas muy estrechas
══════════════════════════════════════════════════════════════ */
@media (max-width: 420px) {
  .sectors__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case__res { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case__res > :last-child { grid-column: span 2; }
  .foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__facts { gap: var(--sp-2); }
  .fact__k { letter-spacing: 0.02em; }
}

/* ══════════════════════════════════════════════════════════════
   Pantallas bajas (portátiles 13", móvil apaisado)
   El hero a 100svh con mucho contenido se desborda; se compacta.
══════════════════════════════════════════════════════════════ */
@media (min-width: 900px) and (max-height: 760px) {
  .hero { padding-top: calc(var(--nav-h) + var(--sp-5)); }
  .hero > .shell { padding-block: var(--sp-5); }
  .hero__flag { margin-bottom: var(--sp-5); }
  .hero__sub { margin-bottom: var(--sp-6); }
  .svc__head { padding-block: var(--sp-6) var(--sp-4); }
  .svc__prog { padding-block: var(--sp-4) var(--sp-6); }
}

/* ══════════════════════════════════════════════════════════════
   IMPRESIÓN
══════════════════════════════════════════════════════════════ */
@media print {
  /* El duotono no tiene sentido en papel */
  .case__shot::after, .sectors__shot::after { display: none !important; }
  .case__shot img, .sectors__shot img { filter: grayscale(1) contrast(1.1); }

  .nav, .drawer, .atmos, .cursor, .intro,
  .hero__grid, .hero__halo,
  .hero__cue, .svc__prog, .foot__mark { display: none !important; }

  body { background: #fff; color: #000; }
  :is(h1,h2,h3,h4) { color: #000; }
  .t-accent { color: #000 !important; }
  .case, .card-svc, .form, .panel { break-inside: avoid; border-color: #ccc; }
  .svc__track { flex-direction: column; transform: none !important; }
}