/* ==========================================================================
   Abitmedia — Adaptación responsive
   --------------------------------------------------------------------------
   Los breakpoints responden al contenido, no a modelos de dispositivo:
     · 1080px  el menú horizontal deja de caber junto a las acciones
     ·  900px  el layout de contacto ya no admite dos columnas
     ·  760px  se activa la navegación móvil
     ·  480px  se compactan botones e ilustraciones del hero
   Además hay reglas por ALTURA, para pantallas apaisadas o de poca altura.
   ========================================================================== */

/* --- Escritorio amplio: el mensaje manda sobre la ilustración -------------- */
@media (min-width: 1000px) {
  /* El hero ya no tiene segunda columna, pero el texto sigue ocupando sólo la
     mitad izquierda: es donde la ilustración de fondo deja campo limpio. */
  .hero__slide      { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); }
  .page-hero__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
}

/* --- Monitores grandes ---------------------------------------------------- */
@media (min-width: 1600px) {
  :root {
    --container: 1320px;
    --section-y: clamp(4rem, 2rem + 4vw, 7rem);
  }
}

/* --- Laptop angosta: el menú compite con las acciones --------------------- */
@media (max-width: 1080px) {
  .nav__link { padding-inline: .55rem; }
  .header-actions .btn--cta { padding-inline: 1.05rem; }
}

/* El CTA comercial permanece SIEMPRE visible en el header, también en móvil:
   no se esconde dentro del menú hamburguesa. Lo que se reduce es su padding
   horizontal, nunca su texto. */
@media (max-width: 960px) {
  .header-actions .btn--cta { padding-inline: .95rem; }
}
@media (max-width: 560px) {
  .header-actions .btn--cta {
    padding-inline: .8rem;
    font-size: .75rem;
    min-height: 40px;
  }
}
@media (max-width: 400px) {
  /* A este ancho sólo caben los cuatro elementos esenciales:
     logo · CTA · menú. La lupa y el selector de tema pasan al menú
     desplegable, donde siguen estando disponibles. El CTA NO se oculta. */
  .header-actions .icon-btn--search,
  .header-actions .theme-toggle--header { display: none; }
  .header-actions .btn--cta { padding-inline: .7rem; letter-spacing: -.01em; }
  .brand img, .brand svg { block-size: 30px; }
  .header-bar { gap: .35rem; }
}
@media (max-width: 340px) {
  .header-actions .btn--cta { font-size: .7rem; padding-inline: .55rem; }
  .brand img, .brand svg { block-size: 28px; }
}

/* --- Contacto: una sola columna ------------------------------------------ */
@media (max-width: 900px) {
  .contact-layout { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}

/* --- Navegación compacta (tablet y móvil) --------------------------------
   A 768px el menú horizontal ya no cabe junto a las acciones del header:
   por debajo de 900px se pasa al menú desplegable.                          */
@media (max-width: 900px) {
  .nav { display: none; }
  .nav-toggle { display: inline-grid; }

  .header-bar { gap: var(--space-2); }
  .brand { margin-inline-end: auto; }

  /* El usuario y el selector de tema pasan al menú desplegable para dejar
     sitio al CTA, que debe seguir visible. */
  .header-actions .icon-btn--user { display: none; }

  /* Dos columnas por debajo de 900 px dejan el título en una caja tan
     estrecha que se parte en tres líneas. Apilado, recupera las dos. */
  .hero__slide { grid-template-columns: 1fr; }
  .hero__text { max-inline-size: none; }


  .split--reverse > :first-child { order: 0; }

  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

@media (min-width: 901px) {
  /* Fuera del rango compacto el panel nunca debe quedar abierto */
  .mobile-nav { display: none; }
}

/* --- Teléfonos ------------------------------------------------------------ */
@media (max-width: 560px) {
  .solution-nav { display: none; }

  /* La tira de marcas también se reduce: en el teléfono ocupa una franja
     alta y es lo que descuadraba el hero de Pagomedios frente a los demás. */
  .page-hero__strip { margin-block-start: var(--space-4); }
  .page-hero__strip img { inline-size: min(100%, 17rem); }

  .btn-row .btn { flex: 1 1 100%; }
  .btn-row--auto .btn { flex: 0 0 auto; }

  .metric__value { font-size: var(--text-3xl); }

  .search-modal { padding-block-start: var(--space-5); }
  .search-modal__panel { max-block-size: calc(100svh - var(--space-8)); }

  .to-top { inset-block-end: var(--space-4); inset-inline-end: var(--space-4); }

  .app-promo { text-align: start; }
  .store-row .store-badge { flex: 1 1 100%; justify-content: center; }
}

@media (max-width: 400px) {
  :root { --gutter: 1rem; }
  .brand img, .brand svg { block-size: 32px; }
  .logo-carousel__item { inline-size: 8.25rem; block-size: 4.75rem; }
}

/* ==========================================================================
   Adaptación por ALTURA
   Portátiles de 768px de alto, tablets apaisadas y teléfonos en horizontal.
   ========================================================================== */

/* Pantallas de poca altura: se comprime el ritmo vertical */
@media (max-height: 820px) and (min-width: 901px) {
  :root {
    --section-y: clamp(2.5rem, 1.5rem + 3.4vw, 4.25rem);
    --section-y-sm: clamp(2rem, 1.2rem + 2.4vw, 3rem);
  }
  .hero__slide { min-block-size: min(26rem, 74svh); }
}

/* Apaisado con muy poca altura (teléfono horizontal) */
@media (max-height: 560px) and (orientation: landscape) {
  :root {
    --section-y: 2.25rem;
    --section-y-sm: 1.75rem;
    --header-min-h: 60px;
  }
  .hero__slide { min-block-size: 0; padding-block: var(--space-5); }
  .hero__title { font-size: var(--text-3xl); }
  .hero__lead { font-size: var(--text-base); margin-block-end: var(--space-4); }

  /* Las cabeceras de página interior también se comprimen */
  .page-hero__inner { padding-block: var(--space-4) var(--space-5); }
  .page-hero h1 { font-size: var(--text-3xl); }
  .page-hero__lead { font-size: var(--text-base); margin-block-end: var(--space-4); }
  .page-hero__logo { margin-block-end: var(--space-3); }

  .state-page { min-block-size: 0; }
  .mobile-nav { inset-block-start: var(--header-h, 60px); }
  .search-modal { padding-block-start: var(--space-4); }
  /* El marco del formulario NO se recorta aquí: a 32 rem volvía a salir la
     barra de desplazamiento interna. En apaisado se desplaza la página. */
}

/* Pantallas muy altas: se evita que el hero quede desproporcionado */
@media (min-height: 1100px) {
  .hero__slide { min-block-size: min(34rem, 46svh); }
}

/* ==========================================================================
   Entradas gruesas (táctil): áreas de toque y sin dependencia de :hover
   ========================================================================== */
@media (hover: none) {
  .card--hover:hover { transform: none; box-shadow: var(--shadow-xs); }
  .btn:hover { transform: none; }
  .nav__panel { transition: none; }
  /* El carrusel no puede pausarse por hover en táctil: manda el botón */
  .logo-carousel__viewport:hover .logo-carousel__track { animation-play-state: running; }
  .logo-carousel[data-paused="true"] .logo-carousel__track { animation-play-state: paused; }
}

/* ==========================================================================
   Más contraste si el sistema lo pide
   ========================================================================== */
@media (prefers-contrast: more) {
  :root {
    --color-text-muted: #3C4966;
    --color-border: #A9B6D2;
    --color-border-strong: #7D8CAD;
  }
  :root[data-theme="dark"] {
    --color-text-muted: #C6D2EA;
    --color-border: #4A5A82;
    --color-border-strong: #6C7CA6;
  }
  .card, .metric, .channel { border-width: 2px; }
}

/* --- Índice interno de las mini landings ---------------------------------
   Cuando el ancho aprieta, la identidad de la solución conserva el icono y
   oculta sólo el texto: nunca desaparece del todo ni desborda la barra. */
@media (max-width: 820px) {
  .solution-nav__brand-name { display: none; }
  .solution-nav__brand { padding-inline-start: var(--space-3); }
}

/* --------------------------------------------------------------------------
   Pantallas muy estrechas (≤ 480 px)
   --------------------------------------------------------------------------
   Los botones llevan white-space: nowrap para no partirse en dos líneas en
   condiciones normales, pero con etiquetas largas ese ancho mínimo empuja al
   contenedor y provoca desplazamiento horizontal. Aquí se les permite fluir a
   varias líneas: sigue leyéndose bien y el layout deja de desbordar.
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .btn {
    white-space: normal;
    text-wrap: balance;
    min-inline-size: 0;
  }
  .btn--lg { padding-inline: 1.15rem; }

  /* Las direcciones de correo y las URL largas son un único token sin
     espacios: se les permite partir para que nunca desborden su tarjeta. */
  .feature__body,
  .channel__body,
  .footer-contact__item { overflow-wrap: anywhere; }
}