/* Explicación: Adaptación de los componentes compartidos según el ancho disponible y el zoom del navegador. */
/* Ajustes por ancho disponible en píxeles CSS, incluido el zoom del navegador. */
/* Explicación: Variables de color reutilizadas para mantener una misma paleta. */
:root {
  --content-width: 1060px;
  --page-gutter: clamp(24px, 4vw, 80px);
}

.section-inner, .closing-card, .footer-inner { max-width: var(--content-width); }
.module-card, .hero-content, .country-heading > div { min-width: 0; }
.module-card, .country-card, .footer-nav { overflow-wrap: anywhere; }
.account-dialog { max-height: calc(100svh - 40px); overflow-y: auto; }

/* Tablet pequeña y móviles en horizontal. */
/* Explicación: Ajusta distribución y tamaños para esta condición de pantalla. */
@media (min-width: 600px) {
  .header-inner { padding-inline: var(--page-gutter); }
  /* Explicación: Portada de inicio con fondo degradado y altura adaptada a la pantalla. */
.hero { padding-inline: var(--page-gutter); }
  .about, .community, .closing, /* Explicación: Estilos del pie y sus enlaces de navegación. */
.site-footer { padding-inline: var(--page-gutter); }
  /* Explicación: Distribución de las tarjetas que presentan los módulos. */
.feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-content { width: 100%; }
  .preview-badge { max-width: 420px; margin-inline: auto; }
  .hero-actions { max-width: 420px; margin-inline: auto; }
}

/* Tablet: lectura cómoda y controles táctiles. */
/* Explicación: Ajusta distribución y tamaños para esta condición de pantalla. */
@media (min-width: 768px) {
  .account-button { width: 44px; height: 44px; }
  .hero-content { max-width: 680px; }
  h1 { font-size: clamp(48px, 6vw, 60px); }
  .about h2 { font-size: 38px; }
  .about-description { font-size: 17px; }
  .module-card { padding: 28px; }
  .module-card h3 { font-size: 22px; }
  .module-card > p:not(.module-label) { font-size: 16px; }
  .module-link { font-size: 14px; }
  .community-heading > p:last-child { font-size: 18px; }
  .country-heading h3 { font-size: 24px; }
  .country-heading p { font-size: 13px; }
  .country-description { font-size: 16px; }
  .country-photo figcaption { font-size: 14px; }
  .closing-card p { max-width: 480px; font-size: 18px; }
  /* Explicación: Estilos del pie y sus enlaces de navegación. */
.site-footer { font-size: 14px; }
  .footer-countries, .footer-bottom { font-size: 12px; }
}

/* Computadora: acciones en una fila y cuatro módulos. */
/* Explicación: Ajusta distribución y tamaños para esta condición de pantalla. */
@media (min-width: 1024px) {
  /* Explicación: Variables de color reutilizadas para mantener una misma paleta. */
:root { --content-width: 1200px; }
  .header-inner { max-width: calc(var(--content-width) + 2 * var(--page-gutter)); }
  .hero-content { max-width: 820px; }
  h1 { font-size: clamp(60px, 5vw, 76px); }
  .hero-description { max-width: 640px; margin: 24px auto 40px; font-size: 22px; }
  .hero-actions { max-width: 640px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .about, .community { padding-block: 88px; }
  .about-description { max-width: 720px; }
  /* Explicación: Distribución de las tarjetas que presentan los módulos. */
.feature-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
  .module-card { padding: 24px; }
  /* Explicación: Galería de países; el script del carrusel amplía estos estilos. */
.country-grid { padding: 32px; gap: 32px; }
  .country-photo { aspect-ratio: 1.8; }
  .closing-card { padding-block: 56px; }
  .closing-card h2 br { display: none; }
  .closing-card h2 { max-width: 720px; margin-inline: auto; }
  .footer-inner { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
  .footer-nav { justify-content: flex-end; margin: 0; }
  .footer-bottom { grid-column: 1 / -1; }
}

/* Monitores grandes: amplitud limitada para evitar líneas demasiado largas. */
/* Explicación: Ajusta distribución y tamaños para esta condición de pantalla. */
@media (min-width: 1440px) {
  /* Explicación: Variables de color reutilizadas para mantener una misma paleta. */
:root { --content-width: 1320px; }
  /* Explicación: Distribución de las tarjetas que presentan los módulos. */
.feature-grid { gap: 24px; }
  .module-card { padding: 30px; }
  .about, .community { padding-block: 104px; }
  .closing { padding-block: 64px; }
  .community-heading { max-width: 680px; margin-bottom: 48px; }
  .community-heading h2, .about h2 { font-size: 44px; }
  .closing-card h2 { font-size: 46px; }
}

/* Full HD, QHD y 4K: tamaños fluidos con límites de lectura. */
/* Explicación: Ajusta distribución y tamaños para esta condición de pantalla. */
@media (min-width: 1920px) {
  /* Explicación: Variables de color reutilizadas para mantener una misma paleta. */
:root {
    --content-width: clamp(1440px, 62.5vw, 2200px);
    --page-gutter: clamp(64px, 4vw, 160px);
    --large-body: clamp(18px, .73vw, 28px);
    --large-small: clamp(14px, .55vw, 21px);
    --large-space: clamp(32px, 1.25vw, 48px);
  }
  .header-inner { min-height: clamp(100px, 3.65vw, 140px); padding-block: 24px; }
  .brand { font-size: clamp(28px, 1.05vw, 40px); gap: 14px; }
  .brand-mark { width: clamp(40px, 1.57vw, 60px); height: clamp(40px, 1.57vw, 60px); }
  .brand-mark svg { width: 60%; height: 60%; }
  .account-button { width: clamp(48px, 1.67vw, 64px); height: clamp(48px, 1.67vw, 64px); }
  .account-button svg { width: 50%; height: 50%; }
  /* Explicación: Portada de inicio con fondo degradado y altura adaptada a la pantalla. */
.hero { min-height: calc(100svh - clamp(100px, 3.65vw, 140px)); padding-block: clamp(100px, 6vw, 220px); }
  .hero-content { max-width: clamp(900px, 36vw, 1380px); }
  h1 { font-size: clamp(80px, 3.13vw, 120px); }
  .preview-badge { max-width: clamp(480px, 19vw, 730px); min-height: 52px; padding: 12px 24px; margin-bottom: 32px; font-size: var(--large-small); }
  .hero-description { max-width: 32ch; margin-block: 32px 48px; font-size: clamp(24px, .94vw, 36px); }
  .hero-actions { max-width: clamp(720px, 28vw, 1080px); gap: 24px; }
  .button { min-height: clamp(56px, 2.1vw, 80px); padding: 16px 24px; font-size: var(--large-body); }
  .button-primary svg { width: 1em; height: 1em; }
  .about, .community { padding-block: clamp(112px, 4.5vw, 172px); }
  .about h2, .community-heading h2, .closing-card h2 { font-size: clamp(48px, 1.88vw, 72px); }
  .about .eyebrow, .community-badge { font-size: var(--large-small); }
  .about-description { max-width: 65ch; font-size: var(--large-body); }
  /* Explicación: Distribución de las tarjetas que presentan los módulos. */
.feature-grid { gap: var(--large-space); margin-top: 56px; }
  .module-card { padding: var(--large-space); }
  .module-icon { width: clamp(48px, 1.88vw, 72px); height: clamp(48px, 1.88vw, 72px); margin-bottom: 24px; }
  .module-icon svg { width: 50%; height: 50%; }
  .module-card .module-label { font-size: var(--large-small); }
  .module-card h3, .country-heading h3 { font-size: clamp(26px, 1vw, 38px); }
  .module-card > p:not(.module-label), .country-description { font-size: var(--large-body); }
  .module-link { min-height: 56px; font-size: var(--large-small); }
  .community-heading { max-width: 40ch; font-size: var(--large-body); }
  .community-heading > p:last-child, .closing-card p { font-size: var(--large-body); }
  /* Explicación: Galería de países; el script del carrusel amplía estos estilos. */
.country-grid { padding: var(--large-space); gap: var(--large-space); }
  .country-card { padding: var(--large-space); }
  .country-heading { gap: 20px; margin-bottom: 24px; }
  .country-code { font-size: clamp(24px, .84vw, 32px); }
  .country-heading p, .country-photo figcaption, .photo-credits { font-size: var(--large-small); }
  .country-photo figcaption { padding: 36px 16px 16px; }
  .closing { padding-block: clamp(72px, 3vw, 112px); }
  .closing-card { padding: clamp(64px, 3vw, 112px); }
  .closing-card h2 { max-width: 24ch; }
  .closing-card p { max-width: 40ch; }
  .closing-card .button { max-width: clamp(420px, 17vw, 650px); }
  /* Explicación: Estilos del pie y sus enlaces de navegación. */
.site-footer { padding-block: 56px; font-size: var(--large-body); }
  .footer-brand { font-size: clamp(28px, 1vw, 38px); }
  .footer-brand .brand-mark { width: 40px; height: 40px; }
  .footer-countries, .footer-bottom { font-size: var(--large-small); }
  .footer-nav { column-gap: var(--large-space); }
  .account-dialog { max-width: clamp(480px, 19vw, 730px); padding: 48px; font-size: var(--large-body); }
  .account-dialog h2 { font-size: clamp(32px, 1.25vw, 48px); }
}

/* Pantallas horizontales bajas: el contenido determina la altura. */
/* Explicación: Ajusta distribución y tamaños para esta condición de pantalla. */
@media (min-width: 600px) and (max-height: 600px) {
  /* Explicación: Portada de inicio con fondo degradado y altura adaptada a la pantalla. */
.hero { min-height: auto; padding-block: 64px; }
}