/* =========================================================
   SISTEMA RESPONSIVE EDOS - 3 Breakpoints + Tipografía Fluida
   ========================================================= */

/* ========== VARIABLES CSS + BREAKPOINTS ========== */
:root {
  /* ===== Breakpoints (3 tipos de resoluciones) ===== */
  --bp-mobile: 576px;   /* Móvil: 0-576px */
  --bp-tablet: 992px;   /* Tablet: 577px-992px */
  /* Desktop: 993px+ */

  /* ===== Tipografía Base Responsive (clamp) ===== */
  /* Escala fluida: min -> preferido -> max */
  --font-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);          /* 16px → 18px */
  --font-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);          /* 14px → 16px */
  --font-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);        /* 12px → 14px */

  /* Títulos escalables */
  --font-h1: clamp(1.75rem, 1.5rem + 1.25vw, 2.5rem);          /* 28px → 40px */
  --font-h2: clamp(1.5rem, 1.3rem + 1vw, 2rem);                /* 24px → 32px */
  --font-h3: clamp(1.25rem, 1.1rem + 0.75vw, 1.625rem);        /* 20px → 26px */
  --font-h4: clamp(1.125rem, 1rem + 0.625vw, 1.375rem);        /* 18px → 22px */

  /* ===== Espaciado Responsive ===== */
  --space-xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.5rem);         /* 4px → 8px */
  --space-sm: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);          /* 8px → 12px */
  --space-md: clamp(0.75rem, 0.6rem + 0.75vw, 1.25rem);        /* 12px → 20px */
  --space-lg: clamp(1rem, 0.8rem + 1vw, 1.75rem);              /* 16px → 28px */
  --space-xl: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);           /* 24px → 40px */
  --space-2xl: clamp(2rem, 1.5rem + 2.5vw, 4rem);              /* 32px → 64px */

  /* ===== Ancho de Contenedores ===== */
  --container-sm: min(100%, 540px);
  --container-md: min(100%, 720px);
  --container-lg: min(100%, 960px);
  --container-xl: min(100%, 1140px);
  --container-2xl: min(100%, 1320px);

  /* ===== Variables existentes del proyecto ===== */
  --font-ui: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ink: #1d2b3a;
  --brand: #0054a6;
  --accent: #f7a600;
  --surface: #ffffff;
  --radius: 14px;
}

/* ========== RESET TIPOGRÁFICO RESPONSIVE ========== */
html {
  font-size: 100%; /* Base: 16px */
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
}

body {
  font-family: var(--font-ui);
  font-size: var(--font-base);
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* Prevenir scroll horizontal */
}

/* Contenido principal con padding lateral (excepto barras) */
main,
.container,
section:not(.hero-banner) {
  padding-left: clamp(1rem, 2vw, 2rem);
  padding-right: clamp(1rem, 2vw, 2rem);
}

/* ========== TÍTULOS RESPONSIVE ========== */
h1, .h1 {
  font-size: var(--font-h1);
  line-height: 1.2;
  margin: var(--space-lg) 0 var(--space-md);
  font-weight: 800;
  letter-spacing: -0.02em;
}

h2, .h2 {
  font-size: var(--font-h2);
  line-height: 1.3;
  margin: var(--space-lg) 0 var(--space-sm);
  font-weight: 700;
}

h3, .h3 {
  font-size: var(--font-h3);
  line-height: 1.4;
  margin: var(--space-md) 0 var(--space-sm);
  font-weight: 700;
}

h4, .h4 {
  font-size: var(--font-h4);
  line-height: 1.4;
  margin: var(--space-md) 0 var(--space-xs);
  font-weight: 600;
}

p {
  font-size: var(--font-base);
  line-height: 1.7;
  margin: var(--space-sm) 0;
}

/* ========== CONTENEDORES RESPONSIVE ========== */
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}

/* Móvil (0-576px) */
@media (max-width: 576px) {
  .container {
    max-width: 100%;
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
  }
}

/* Tablet (577px-992px) */
@media (min-width: 577px) and (max-width: 992px) {
  .container {
    max-width: var(--container-md);
  }
}

/* Desktop (993px+) */
@media (min-width: 993px) {
  .container {
    max-width: var(--container-xl);
  }
}

/* ========== GRID SYSTEM RESPONSIVE (usando Bootstrap) ========== */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(var(--space-sm) * -1);
  margin-right: calc(var(--space-sm) * -1);
  gap: var(--space-md);
}

.col {
  flex: 1;
  padding-left: var(--space-sm);
  padding-right: var(--space-sm);
}

/* Columnas específicas por breakpoint */
/* Móvil: 1 columna por defecto */
@media (max-width: 576px) {
  .col-mobile-12 { width: 100%; }
  .col-mobile-6 { width: 50%; }

  /* Forzar columnas completas en móvil para contenido */
  .blog .items-row,
  .blog-featured .items-row,
  .mod-articles-category .items-row {
    grid-template-columns: 1fr !important;
  }
}

/* Tablet: 2 columnas */
@media (min-width: 577px) and (max-width: 992px) {
  .col-tablet-12 { width: 100%; }
  .col-tablet-6 { width: 50%; }
  .col-tablet-4 { width: 33.333%; }

  /* 2 columnas en tablet */
  .blog .items-row,
  .blog-featured .items-row,
  .mod-articles-category .items-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Desktop: hasta 3 columnas */
@media (min-width: 993px) {
  .col-desktop-12 { width: 100%; }
  .col-desktop-6 { width: 50%; }
  .col-desktop-4 { width: 33.333%; }
  .col-desktop-3 { width: 25%; }

  /* 2 o 3 columnas en desktop según necesidad */
  .blog .items-row,
  .blog-featured .items-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Opción para 3 columnas si se agrega clase especial */
  .blog.three-columns .items-row,
  .blog-featured.three-columns .items-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* ========== UTILIDADES RESPONSIVE ========== */

/* Espaciado responsive (márgenes y paddings) */
.p-responsive { padding: var(--space-md); }
.px-responsive { padding-left: var(--space-md); padding-right: var(--space-md); }
.py-responsive { padding-top: var(--space-md); padding-bottom: var(--space-md); }
.m-responsive { margin: var(--space-md); }
.mx-responsive { margin-left: var(--space-md); margin-right: var(--space-md); }
.my-responsive { margin-top: var(--space-md); margin-bottom: var(--space-md); }

/* Tamaños de texto responsive */
.text-sm { font-size: var(--font-sm); }
.text-base { font-size: var(--font-base); }
.text-xs { font-size: var(--font-xs); }

/* Visibilidad por breakpoint */
@media (max-width: 576px) {
  .hide-mobile { display: none !important; }
  .show-mobile { display: block !important; }
}

@media (min-width: 577px) and (max-width: 992px) {
  .hide-tablet { display: none !important; }
  .show-tablet { display: block !important; }
}

@media (min-width: 993px) {
  .hide-desktop { display: none !important; }
  .show-desktop { display: block !important; }
}

/* ========== NAVEGACIÓN RESPONSIVE ========== */

/* Logo responsive */
#main-nav .brand-logo {
  height: clamp(40px, 8vw, 56px);
  width: auto;
  object-fit: contain;
}

/* Menú responsive */
#main-nav a,
#main-nav span,
#main-nav strong {
  font-size: var(--font-sm);
  padding: var(--space-sm) var(--space-md);
  white-space: nowrap;
}

/* Móvil (0-576px) */
@media (max-width: 576px) {
  #main-nav .nav-inner {
    padding: var(--space-xs) var(--space-sm);
    margin: var(--space-xs) auto;
  }

  #main-nav a,
  #main-nav span {
    font-size: var(--font-sm);
    padding: var(--space-xs) var(--space-sm);
  }

  /* Menú móvil full width */
  #main-nav .nav-menu.active {
    width: 90vw !important;
    max-width: 320px;
  }
}

/* Tablet (577px-992px) */
@media (min-width: 577px) and (max-width: 992px) {
  #main-nav .nav-inner {
    width: min(94%, 900px);
    padding: var(--space-sm) var(--space-md);
  }

  #main-nav a,
  #main-nav span {
    font-size: var(--font-sm);
    padding: var(--space-sm) var(--space-sm);
  }
}

/* Desktop (993px+) */
@media (min-width: 993px) {
  #main-nav .nav-inner {
    width: min(96%, 1300px);
    padding: var(--space-md) var(--space-lg);
  }

  #main-nav a,
  #main-nav span {
    font-size: var(--font-base);
    padding: var(--space-sm) var(--space-md);
  }
}

/* ========== FOOTER RESPONSIVE ========== */
.edos-footer {
  padding: var(--space-xl) var(--space-md);
  font-size: var(--font-base);
}

.edos-wrap {
  display: grid;
  gap: var(--space-lg);
  max-width: var(--container-xl);
  margin: 0 auto;
}

/* Móvil: 1 columna */
@media (max-width: 576px) {
  .edos-wrap {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .edos-footer__logo {
    max-width: clamp(180px, 50vw, 220px);
  }

  .edos-contact-list,
  .edos-links-list {
    font-size: var(--font-sm);
  }
}

/* Tablet: 2 columnas */
@media (min-width: 577px) and (max-width: 992px) {
  .edos-wrap {
    grid-template-columns: repeat(2, 1fr);
  }

  .edos-left {
    grid-column: 1 / -1; /* Ocupa todo el ancho */
    text-align: center;
  }

  .edos-footer__logo {
    max-width: 240px;
  }
}

/* Desktop: 3 columnas */
@media (min-width: 993px) {
  .edos-wrap {
    grid-template-columns: 1fr 1.5fr 1fr;
  }

  .edos-left {
    text-align: left;
  }

  .edos-footer__logo {
    max-width: 265px;
  }
}

/* ========== TARJETAS Y ARTÍCULOS RESPONSIVE ========== */
.blog .items-leading > div > *,
.blog .items-row > div > *,
.blog-featured .items-row > div > * {
  padding: var(--space-md);
  border-radius: clamp(10px, 2vw, 14px);
}

/* Imágenes responsive */
.item-image img,
.blog img,
article img {
  width: 100%;
  height: auto;
  border-radius: clamp(8px, 1.5vw, 12px);
}

/* Botones responsive */
.readmore a,
.btn,
button {
  font-size: var(--font-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: clamp(8px, 1.5vw, 12px);
}

/* ========== ACCESIBILIDAD RESPONSIVE ========== */
.a11y-btn {
  /* Botón más grande en móvil, ubicado a la izquierda */
  width: 56px;
  height: 56px;
  top: clamp(80px, 12vh, 100px);
  left: 15px;
  right: auto;
  z-index: 9999;
}

.a11y-panel {
  /* Panel a la izquierda */
  width: min(92vw, 360px);
  font-size: var(--font-sm);
  top: clamp(145px, 20vh, 165px);
  left: 15px;
  right: auto;
}

/* Móvil: botón y panel más grandes */
@media (max-width: 576px) {
  .a11y-btn {
    width: 72px;
    height: 72px;
    top: 90px;
    left: 10px;
  }

  .a11y-panel {
    width: min(95vw, 320px);
    font-size: var(--font-sm);
    top: 175px;
    left: 10px;
  }

  .a11y-ctl {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-sm);
    min-height: 44px;
  }
}

/* Tablet: tamaño medio */
@media (min-width: 577px) and (max-width: 992px) {
  .a11y-btn {
    width: 58px;
    height: 58px;
  }
}

/* Desktop: tamaño normal */
@media (min-width: 993px) {
  .a11y-btn {
    width: 52px;
    height: 52px;
  }
}

/* ========== BARRA SUPERIOR GOV.CO RESPONSIVE ========== */
.barra-superior {
  width: 100vw;
  margin: 0;
  padding: 0;
  display: block;
  background: #3366CC;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.barra-superior a {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  line-height: 0;
}

.barra-superior img {
  width: 100%;
  height: auto;
  min-height: clamp(32px, 4vw, 48px);
  max-height: clamp(36px, 5vw, 52px);
  object-fit: cover;
  object-position: center;
  display: block;
  margin: 0;
  padding: 0;
}

.barra-inferior {
  width: 100vw;
  margin: 0;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-sm);
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.barra-inferior img {
  width: 100%;
  height: auto;
  max-height: clamp(32px, 5vw, 48px);
  object-fit: contain;
}

.barra-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* Móvil: apilar elementos */
@media (max-width: 576px) {
  .barra-inner {
    flex-direction: column;
    text-align: center;
    gap: var(--space-xs);
  }

  .barra-left,
  .barra-center,
  .barra-right {
    width: 100%;
  }
}

/* ========== OPTIMIZACIONES DE RENDIMIENTO ========== */

/* Reducir animaciones en móvil */
@media (max-width: 576px) and (prefers-reduced-motion: no-preference) {
  * {
    transition-duration: 0.2s !important;
  }
}

/* Suavizar scroll en todos los dispositivos */
html {
  scroll-behavior: smooth;
}

/* Mejorar toque en móvil */
@media (hover: none) and (pointer: coarse) {
  a, button, .hamburger {
    min-height: 44px;
    min-width: 44px;
  }
}