/* ============================================================
   COLEGIO MARCELINA — RESPONSIVE GLOBAL
   Sistema responsive centralizado v1.0
   Basado en sistema aprobado del proyecto
   ============================================================

   BREAKPOINTS
   ─────────────────────────────────────
   --bp-xl:   1440px  Desktop wide
   --bp-lg:   1024px  Tablet landscape
   --bp-md:    768px  Tablet portrait
   --bp-sm:    480px  Mobile

   CONVENCIÓN mobile-first NO aplica aquí.
   Se usa desktop-first (max-width) para
   consistencia con el sistema actual.
   ============================================================ */


/* ──────────────────────────────────────────
   CONTAINER — Contenedor centrado global
────────────────────────────────────────── */

.container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 72px);
}

.container-sm  { max-width: 640px;  margin-inline: auto; padding-inline: clamp(20px, 5vw, 40px); }
.container-md  { max-width: 768px;  margin-inline: auto; padding-inline: clamp(20px, 5vw, 48px); }
.container-lg  { max-width: 1024px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 56px); }
.container-xl  { max-width: 1280px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 72px); }
.container-full{ max-width: 1440px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 80px); }

/* Prose — ancho máximo para texto legible */
.container-prose {
  max-width: 680px;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 40px);
}


/* ──────────────────────────────────────────
   SECCIONES — Padding vertical fluido
────────────────────────────────────────── */

.sec {
  padding-block: clamp(56px, 7vw, 96px);
  padding-inline: clamp(20px, 5vw, 72px);
}

.sec-sm  { padding-block: clamp(32px, 5vw, 64px);  padding-inline: clamp(20px, 5vw, 72px); }
.sec-lg  { padding-block: clamp(72px, 9vw, 120px); padding-inline: clamp(20px, 5vw, 72px); }
.sec-hero{ padding-block: clamp(56px, 8vw, 96px);  padding-inline: clamp(20px, 5vw, 72px); }


/* ──────────────────────────────────────────
   GRIDS RESPONSIVE — Sistema de columnas
────────────────────────────────────────── */

/* Grid base 2 columnas */
.g2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

/* Grid base 3 columnas */
.g3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Grid base 4 columnas */
.g4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* Grid 2 columnas asimétricas — texto 55% / imagen 45% */
.g2-asymmetric {
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

/* Grid 2 columnas asimétricas invertidas — imagen 45% / texto 55% */
.g2-asymmetric-reverse {
  display: grid;
  grid-template-columns: 45fr 55fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

/* Grid niveles — 4 columnas fijas */
.g-niveles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* Grid países — 4x2 */
.g-paises {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

/* Grid pilares — 2x2 */
.g-pilares {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

/* Grid pasos admisiones — 4 columnas */
.g-pasos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  position: relative;
}

/* Grid footer — 2fr + 3x1fr */
.g-footer {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: clamp(24px, 4vw, 48px);
}

/* Grid instalaciones — asimétrico 3 columnas */
.g-instalaciones {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 200px 180px;
  gap: 10px;
}

/* Grid galería nivel — 3 columnas */
.g-gal-nivel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

/* Grid canales contacto — 4 columnas */
.g-canales {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* Grid post blog — 3 columnas */
.g-blog {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Post destacado blog — 2 columnas */
.g-post-featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 28px;
  overflow: hidden;
}

/* Privacidad — índice sticky + contenido */
.g-privacidad {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}


/* ──────────────────────────────────────────
   MASONRY — Galería vida escolar
────────────────────────────────────────── */

.masonry {
  columns: 3;
  column-gap: 10px;
}

.masonry-item {
  break-inside: avoid;
  margin-bottom: 10px;
}


/* ──────────────────────────────────────────
   FLEX UTILITIES
────────────────────────────────────────── */

.flex          { display: flex; }
.flex-center   { display: flex; align-items: center; justify-content: center; }
.flex-between  { display: flex; align-items: center; justify-content: space-between; }
.flex-start    { display: flex; align-items: flex-start; }
.flex-end-bottom { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 12px; }
.flex-col      { display: flex; flex-direction: column; }
.flex-wrap     { flex-wrap: wrap; }
.gap-sm        { gap: 8px; }
.gap-md        { gap: 12px; }
.gap-lg        { gap: 20px; }
.gap-xl        { gap: 32px; }


/* ──────────────────────────────────────────
   SPACING RESPONSIVE — Utilidades
────────────────────────────────────────── */

.mt-sec  { margin-top:    clamp(40px, 5vw, 72px); }
.mb-sec  { margin-bottom: clamp(40px, 5vw, 72px); }
.mb-hdr  { margin-bottom: clamp(28px, 4vw, 48px); }
.mb-sm   { margin-bottom: 16px; }
.mb-md   { margin-bottom: 24px; }
.mb-lg   { margin-bottom: 40px; }

.p-card-sm { padding: clamp(16px, 2vw, 22px); }
.p-card-md { padding: clamp(20px, 3vw, 28px); }
.p-card-lg { padding: clamp(24px, 3vw, 36px); }


/* ──────────────────────────────────────────
   NAVBAR — Comportamiento responsive
────────────────────────────────────────── */

.nav-links  { display: flex; }
.nav-burger { display: none; }
.nav-mobile { display: none; }

.nav-mobile.open { display: flex; }


/* ──────────────────────────────────────────
   HELPER CLASSES
────────────────────────────────────────── */

.hide-mobile  { }
.hide-tablet  { }
.hide-desktop { display: none; }
.show-mobile  { display: none; }
.show-tablet  { display: none; }


/* ============================================================
   MEDIA QUERIES
   ============================================================ */


/* ──────────────────────────────────────────
   ≤1440px — Desktop wide
   Ajuste fino para pantallas muy grandes
────────────────────────────────────────── */

@media (max-width: 1440px) {
  .container,
  .container-xl {
    padding-inline: clamp(32px, 4vw, 64px);
  }
}


/* ──────────────────────────────────────────
   ≤1024px — Tablet landscape
────────────────────────────────────────── */

@media (max-width: 1024px) {

  /* Containers */
  .container,
  .container-xl {
    padding-inline: clamp(24px, 4vw, 48px);
  }

  /* Grids generales */
  .g4           { grid-template-columns: repeat(2, 1fr); }
  .g-niveles    { grid-template-columns: repeat(2, 1fr); }
  .g-pasos      { grid-template-columns: repeat(2, 1fr); }
  .g-paises     { grid-template-columns: repeat(2, 1fr); }
  .g-canales    { grid-template-columns: repeat(2, 1fr); }
  .g-blog       { grid-template-columns: repeat(2, 1fr); }
  .g-footer     { grid-template-columns: 1fr 1fr; gap: 32px; }

  /* Masonry */
  .masonry      { columns: 2; }

  /* Instalaciones */
  .g-instalaciones {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }

  /* Galería nivel */
  .g-gal-nivel  { grid-template-columns: repeat(2, 1fr); }

  /* Privacidad */
  .g-privacidad { grid-template-columns: 200px 1fr; }

  /* Pasos — ocultar línea decorativa */
  .g-pasos::before { display: none; }

  /* Helpers */
  .hide-tablet  { display: none; }
  .show-tablet  { display: block; }
}


/* ──────────────────────────────────────────
   ≤768px — Tablet portrait / mobile grande
────────────────────────────────────────── */

@media (max-width: 768px) {

  /* Containers */
  .container,
  .container-xl,
  .container-lg {
    padding-inline: clamp(16px, 4vw, 32px);
  }

  /* Secciones */
  .sec,
  .sec-hero { padding-inline: clamp(16px, 4vw, 32px); }

  /* ── NAVBAR ── */
  .nav-links  { display: none; }
  .nav-burger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
    cursor: pointer;
  }
  .nav-mobile {
    position: fixed;
    inset: 0;
    top: 106px;
    background: white;
    z-index: 99;
    padding: 24px;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
  }
  .nav-mobile.open { display: flex; }

  /* ── GRIDS ── */
  .g2,
  .g2-asymmetric,
  .g2-asymmetric-reverse { grid-template-columns: 1fr; }

  .g3           { grid-template-columns: 1fr; }
  .g4           { grid-template-columns: 1fr 1fr; }
  .g-niveles    { grid-template-columns: 1fr 1fr; }
  .g-pasos      { grid-template-columns: 1fr 1fr; }
  .g-paises     { grid-template-columns: 1fr 1fr; }
  .g-canales    { grid-template-columns: 1fr 1fr; }
  .g-blog       { grid-template-columns: 1fr; }
  .g-pilares    { grid-template-columns: 1fr 1fr; }
  .g-footer     { grid-template-columns: 1fr; }
  .g-gal-nivel  { grid-template-columns: 1fr 1fr; }

  /* Instalaciones — stack vertical */
  .g-instalaciones {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  /* Post destacado — stack vertical */
  .g-post-featured { grid-template-columns: 1fr; }

  /* Privacidad — ocultar índice */
  .g-privacidad        { grid-template-columns: 1fr; }
  .priv-index          { display: none; }

  /* Masonry */
  .masonry      { columns: 2; }

  /* Flex utilities */
  .flex-between { flex-wrap: wrap; gap: 12px; }

  /* Urgency bar */
  .urgency-bar  { flex-wrap: wrap; gap: 8px; font-size: 11px; }

  /* Hero buttons — stack en columna */
  .hero-btns    { flex-direction: column; align-items: flex-start; }

  /* Formularios */
  .form-row     { grid-template-columns: 1fr; }

  /* Helpers */
  .hide-mobile  { display: none; }
  .show-mobile  { display: block; }
}


/* ──────────────────────────────────────────
   ≤480px — Mobile
────────────────────────────────────────── */

@media (max-width: 480px) {

  /* Containers */
  .container,
  .container-xl,
  .container-lg,
  .container-md {
    padding-inline: 16px;
  }

  /* Secciones */
  .sec,
  .sec-hero,
  .sec-sm { padding-inline: 16px; }

  /* ── GRIDS ── */
  .g4           { grid-template-columns: 1fr; }
  .g-niveles    { grid-template-columns: 1fr; }
  .g-pasos      { grid-template-columns: 1fr; }
  .g-paises     { grid-template-columns: 1fr; }
  .g-canales    { grid-template-columns: 1fr; }
  .g-pilares    { grid-template-columns: 1fr; }
  .g-gal-nivel  { grid-template-columns: 1fr; }

  /* Masonry */
  .masonry      { columns: 1; }

  /* Flex utilities */
  .flex-end-bottom { flex-direction: column; align-items: flex-start; }

  /* Hero buttons */
  .hero-btns .btn { width: 100%; justify-content: center; }

  /* Filter pills */
  .filter-wrap  { gap: 6px; }

  /* Pasos — ocultar línea decorativa */
  .g-pasos::before { display: none; }
}