/* responsive.css — Ajustes tipográficos y de layout por viewport
   Breakpoints del proyecto:
     · Móvil          ≤600px
     · iPad portrait  744px–900px + orientation:portrait  ← zona iPad exclusiva
     · Tablet/laptop  601–900px, 901–1200px
     · iPad intermedio 901–1100px  ← iPad Pro 12.9" portrait + iPad landscape
     · Desktop ancho  ≥1281px
   Depende de: variables.css → base.css → layout.css → components.css → pages.css
   ─────────────────────────────────────────────────────────────────────────────
   NOTA: Las secciones hero y navegación tienen sus propios media queries en
   components.css y pages.css. Este archivo gestiona: tipografía global fluida,
   overrides de spacing y la zona de optimización iPad (744–900px).
   ─────────────────────────────────────────────────────────────────────────────
*/


/* ─── Tipografía fluida global — sin saltos bruscos entre breakpoints ────────
   Los límites están calibrados para coincidir con los valores anteriores:
   · h1: 30px en 375px → 48px en 1440px
   · h2: 24px en 375px → 36px en 1440px
   · h3: 20px en 375px → 30px en 1440px
   Componentes con estilos propios (.hero-title, .document-page-title, etc.)
   sobreescriben estos valores sin conflicto.
   ─────────────────────────────────────────────────────────────────────────── */
h1 { font-size: clamp(1.875rem, 4vw + 0.5rem, 3rem); }
h2 { font-size: clamp(1.5rem,   3vw + 0.5rem, 2.25rem); }
h3 { font-size: clamp(1.25rem,  2vw + 0.5rem, 1.875rem); }


/* ─── Tablet (≥601px) ─────────────────────────────────────────────────────── */
@media (min-width: 601px) {
  :root {
    --container-padding: var(--space-xl);   /* 32px — más aire en tablet */
  }
}


/* ─── Laptop (≥901px) ─────────────────────────────────────────────────────── */
@media (min-width: 901px) {
  :root {
    --container-padding: var(--space-2xl);   /* 48px — layout completo */
  }
}


/* ─── Desktop ancho (≥1281px) ─────────────────────────────────────────────── */
@media (min-width: 1281px) {
  .grid-products {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
}


/* ─── Móvil (≤600px) ────────────────────────────────────────────────────────*/
@media (max-width: 600px) {
  .section    { padding-block: var(--space-2xl); }   /* 48px */
  .section-lg { padding-block: var(--space-3xl); }   /* 64px */
}


/* ─── Ultra-mobile (≤400px) — iPhone SE y pantallas muy pequeñas ─────────── */
@media (max-width: 400px) {
  :root {
    --container-padding: var(--space-md);   /* 16px — máximo aprovechamiento */
  }

  .hero-actions { flex-direction: column; align-items: stretch; }
}


/* ─── Landscape en móvil/tablet ─────────────────────────────────────────────
   Evita que el hero quede cortado al rotar el dispositivo y que el header
   ocupe demasiada altura en orientación apaisada.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) and (orientation: landscape) {
  .hero,
  .home-hero { min-height: 100svh; }

  .hero-inner { padding-block: var(--space-xl); }

  .site-header-inner { height: 48px; }
}


/* ─── iPad Portrait — optimización específica (744px–900px, solo portrait) ────
   Cubre: iPad mini 6ª gen (744px), iPad 10ª gen (820px), iPad Air 5ª (820px),
   iPad Pro 11" portrait (834px) — SOLO en orientación vertical.

   IMPORTANTE: se requiere (orientation: portrait) porque iPhones modernos en
   landscape alcanzan 844–852px CSS y caerían en este rango sin esa condición.
   Todos los iPads en landscape miden ≥1024px, por lo que ya reciben tratamiento
   desktop y NO son afectados por este bloque.

   Problema raíz: el breakpoint ≤900px colapsa componentes a single-column
   "móvil". En portrait, estos iPads tienen entre 744 y 834px CSS de ancho —
   suficiente para layouts de 2 columnas. Los profesionales de la salud usan
   mucho el iPad para leer fichas técnicas con 14 secciones.
   ─────────────────────────────────────────────────────────────────────────── */
@media (min-width: 744px) and (max-width: 900px) and (orientation: portrait) {

  /* ══ 1. FICHAS TÉCNICAS — sidebar izquierdo sticky ════════════════════════
     .document-content colapsa a 1fr en ≤900px; se restaura con 200px aside.
     A 820px: 820 - 64px padding = 756px total → 200px + 16px gap + 540px main.
     540px de contenido principal es óptimo para lectura de fichas técnicas.
     ═══════════════════════════════════════════════════════════════════════════ */
  .document-content {
    grid-template-columns: 200px 1fr;
    gap: var(--space-lg);
  }

  .document-content-aside {
    position: sticky;
    top: calc(64px + var(--space-lg));
  }

  /* Imagen del producto en cabecera — mayor que en móvil (90px → 130px) */
  .document-page-meta img {
    max-height: 130px !important;
    box-shadow: var(--shadow-sm) !important;
  }

  /* ══ 2. PÁGINAS DE PRODUCTO — aside TOC sticky ════════════════════════════ */
  .product-body {
    grid-template-columns: 1fr 260px;
    gap: var(--space-xl);
  }

  .product-aside {
    position: sticky;
    top: calc(64px + var(--space-lg));
  }

  /* Hero del producto — restaurar 2 columnas (colapsa a 1fr en ≤900px) */
  .product-hero-inner {
    grid-template-columns: 1fr 1fr;
  }

  .product-hero-media {
    order: 0;        /* anula el order:-1 que el breakpoint móvil asigna */
    max-height: none;
  }

  .product-image {
    max-height: 360px;
  }

  /* ══ 3. HERO GENÉRICO (páginas no-home) ═══════════════════════════════════ */
  .hero-inner {
    grid-template-columns: 3fr 2fr;
  }

  .hero-media {
    display: flex;   /* oculto en ≤900px — se muestra en iPad portrait */
  }

  /* ══ 4. HOME HERO — 2 columnas asimétricas ════════════════════════════════
     En ≤900px el hero es single-column. En iPad portrait hay espacio para
     mostrar la portada del PDF junto al texto del hero.
     ═══════════════════════════════════════════════════════════════════════════ */
  .home-hero-content {
    grid-template-columns: 3fr 2fr;
  }

  /* ══ 5. GRIDS Y LAYOUTS DE HOME ══════════════════════════════════════════ */

  /* Índice 18 capítulos — restaurar 2 columnas */
  .grid-index {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Sección "Tecnología, Ciencia y Transparencia" — restaurar 2 columnas */
  .home-featured-sections-inner {
    grid-template-columns: 1fr 1fr;
  }

  /* FAQ — restaurar layout 2 columnas (texto + acordeón) */
  .home-faq-inner {
    grid-template-columns: 1fr 1.5fr;
  }

  /* ══ 6. CTA DE DESCARGA — restaurar imagen lateral ═══════════════════════
     En ≤900px la imagen se oculta y el CTA queda centrado single-column.
     En iPad portrait hay espacio para mostrar la portada animada del PDF.
     ═══════════════════════════════════════════════════════════════════════════ */
  .cta-download {
    grid-template-columns: 1fr auto;
    text-align: left;
    padding: var(--space-2xl) var(--space-xl);
  }

  .cta-actions {
    justify-content: flex-start;
  }

  .cta-text {
    margin-inline: 0;
  }

  .cta-media {
    display: flex;
  }

  .cta-media img {
    max-height: 200px;
  }
}


/* ─── iPad Pro 12.9" portrait + iPad Air/mini landscape (901px–1100px) ────────
   El mega menú ya recibe tratamiento drawer (≤1100px) desde components.css.
   Solo ajuste fino de la imagen CTA en este rango intermedio.
   ─────────────────────────────────────────────────────────────────────────── */
@media (min-width: 901px) and (max-width: 1100px) {

  /* CTA media — imagen ligeramente reducida para no desbalancear el layout */
  .cta-media img {
    max-height: 240px;
  }
}


/* ─── Print ───────────────────────────────────────────────────────────────── */
@media print {
  #site-header,
  #site-footer,
  .btn,
  .search-bar {
    display: none;
  }

  body {
    font-size: 12pt;
    color: #000;
  }
}