/* ==========================================================================
   CENTRO EDUCATIVO LINDA VISTA - DIRECCIÓN DE ARTE EDITORIAL
   Estilo de revista escolar cálida, sobria y humana.
   Cero artificios genéricos ("anti AI-slop"). Cero contenido inventado.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300..700;1,6..72,300..700&family=Public+Sans:ital,wght@0,300..700;1,300..700&family=Sour+Gummy:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  /* Paleta cromática luminosa inspirada en la niñez, naturaleza y expresión */
  --color-forest: #2D7D46;         /* Verde prado fresco y vivo (no oscuro ni apagado) */
  --color-forest-dark: #1E6336;    /* Verde hoja con excelente contraste y nitidez */
  --color-forest-soft: #48A66C;    /* Menta / salvia claro */
  --color-forest-surface: #EAF7EE; /* Superficie verde pastel luminosa */
  
  --color-plum: #8A3B8E;           /* Violeta orquídea vivo y radiante (no apagado) */
  --color-plum-dark: #6D2472;      /* Violeta profundo para texto y contraste */
  --color-plum-soft: #B85BA6;      /* Lila-magenta cálido de la muestra */
  --color-plum-surface: #F9EFF9;   /* Fondo tenue lila luminoso */
  
  --color-seafoam: #4EBAA2;        /* Menta marina / turquesa suave de la muestra */
  --color-seafoam-soft: #E6F7F3;
  --color-sky-soft: #6BA4D9;       /* Azul cielo suave de la muestra */
  
  --color-ochre: #C07A18;          /* Dorado cálido luminoso */
  --color-ochre-light: #D99532;    /* Ocre suave */
  --color-ochre-surface: #FFF9ED;  /* Papel ocre tenue y luminoso */
  
  /* Papel y Tinta (Neutros editoriales de alto contraste) */
  --color-paper: #FAF8F5;          /* Fondo papel crema cálido */
  --color-paper-card: #FFFFFF;     /* Blanco limpio para superficies */
  --color-paper-warm: #F3EEE5;     /* Papel marfil para bandas de contraste */
  --color-paper-contrast: #EAE3D6; /* Papel envejecido sutil */
  
  --color-ink: #181B18;            /* Tinta carbón para texto principal */
  --color-ink-muted: #4F554E;      /* Tinta secundaria sobria */
  --color-ink-light: #788076;      /* Tinta tenue para metadatos */
  
  /* Líneas finas divisorias */
  --color-line: #E3DCD1;           /* Línea sutil */
  --color-line-dark: #CDC3B3;      /* Línea media */
  
  /* Marcadores para datos pendientes (diseño honesto y no intrusivo) */
  --color-pending-bg: #F5EFE6;
  --color-pending-border: #D3C5B1;
  --color-pending-text: #6A5B46;

  /* ==========================================================================
     PALETA CROMÁTICA VIVA INFANTIL (Inspirada en el arte y materiales preescolares)
     ========================================================================== */
  --color-maternal: #F59E0B;        /* Amarillo miel / sol */
  --color-maternal-soft: #FEF9C3;   /* Superficie maternal suave */
  --color-maternal-border: #FDE047;
  --color-maternal-badge: #854D0E;

  --color-prekinder: #0284C7;       /* Azul cian cielo vivo */
  --color-prekinder-soft: #E0F2FE;  /* Superficie pre-kínder suave */
  --color-prekinder-border: #BAE6FD;
  --color-prekinder-badge: #0369A1;

  --color-kinder: #EA580C;          /* Mandarina / naranja vivo */
  --color-kinder-soft: #FFEDD5;     /* Superficie kínder suave */
  --color-kinder-border: #FED7AA;
  --color-kinder-badge: #C2410C;

  --color-terapia: #7E22CE;         /* Orquídea / violeta vivo */
  --color-terapia-soft: #F3E8FF;    /* Superficie fonoaudiología suave */
  --color-terapia-border: #E9D5FF;
  --color-terapia-badge: #6B21A8;

  --color-naturaleza: #16A34A;      /* Verde prado fresco */
  --color-naturaleza-soft: #DCFCE7; /* Superficie naturaleza */
  --color-naturaleza-border: #BBF7D0;
  --color-naturaleza-badge: #15803D;

  --color-coral: #E11D48;           /* Coral / sandía vivo */
  --color-coral-soft: #FFE4E6;
  --color-coral-border: #FECDD3;

  /* Tipografías */
  --font-serif: 'Newsreader', Georgia, serif;
  --font-sans: 'Public Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-gummy: 'Sour Gummy', -apple-system, BlinkMacSystemFont, "Segoe UI", cursive, sans-serif;
  
  /* Espaciados y Contenedor */
  --container-max: 1240px;
  --container-narrow: 840px;
  --transition-smooth: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Reset y Base */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  background-color: var(--color-paper);
  color: var(--color-ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  width: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  line-height: 1.65;
  background-color: var(--color-paper);
  color: var(--color-ink);
  overflow-x: hidden;
  width: 100%;
}

img, picture, video, canvas {
  max-width: 100%;
  height: auto;
}

/* Tipografía Editorial */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.15;
  color: var(--color-ink);
  letter-spacing: -0.015em;
}

h1 {
  font-size: clamp(2.4rem, 5vw, 4.2rem);
}

h2 {
  font-size: clamp(1.9rem, 3.8vw, 3rem);
}

h3 {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
}

p {
  margin-bottom: 1.25rem;
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition-smooth);
}

/* Contenedores */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 2rem;
  padding-right: 2rem;
}

.container-narrow {
  max-width: var(--container-narrow);
}

/* ==========================================================================
   MARCADORES VISIBLES PARA DATOS PENDIENTES (Regla de Oro: Cero Contenido Inventado)
   ========================================================================== */
.pending-data-inline {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.85em;
  font-weight: 500;
  color: var(--color-pending-text);
  background-color: var(--color-pending-bg);
  border: 1px dashed var(--color-pending-border);
  padding: 0.15rem 0.55rem;
  border-radius: 3px;
  line-height: 1.3;
}

.pending-data-box {
  background-color: var(--color-pending-bg);
  border: 1px dashed var(--color-pending-border);
  padding: 1.25rem 1.5rem;
  border-radius: 4px;
  margin: 1.5rem 0;
  font-size: 0.95rem;
  color: var(--color-pending-text);
}

.pending-data-box strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.1rem;
  margin-bottom: 0.35rem;
  color: var(--color-ink);
}

/* ==========================================================================
   PLACEHOLDERS HONESTOS PARA FOTOGRAFÍAS REALES
   Cero stock con niños posando. Cero IA.
   ========================================================================== */
.photo-placeholder {
  background-color: var(--color-paper-contrast);
  border: 1px solid var(--color-line-dark);
  border-radius: 20px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  overflow: hidden;
  box-sizing: border-box;
  box-shadow: 0 10px 26px rgba(24, 27, 24, 0.05);
}

.photo-placeholder.aspect-16-9 {
  aspect-ratio: 16 / 9;
}

.photo-placeholder.aspect-4-3 {
  aspect-ratio: 4 / 3;
}

.photo-placeholder.aspect-3-2 {
  aspect-ratio: 3 / 2;
}

.photo-placeholder.aspect-1-1 {
  aspect-ratio: 1 / 1;
}

.photo-placeholder-tag {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-forest);
  background: rgba(255, 255, 255, 0.92);
  padding: 0.4rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--color-line);
  margin-bottom: 0.75rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.photo-placeholder-desc {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--color-ink-muted);
  max-width: 85%;
  line-height: 1.4;
}

/* ==========================================================================
   BARRA UTILITARIA SUPERIOR (Discreta, delgada)
   ========================================================================== */
.utility-bar {
  background-color: var(--color-paper-warm);
  border-bottom: 1px solid var(--color-line);
  font-size: 0.82rem;
  color: var(--color-ink-muted);
  padding: 0.45rem 0;
}

.utility-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.utility-items-left {
  display: flex;
  align-items: center;
  gap: 1.8rem;
  flex-wrap: wrap;
}

.utility-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-ink-muted);
}

.utility-link:hover {
  color: var(--color-forest);
}

/* ==========================================================================
   HEADER PRINCIPAL STICKY (Blanco/crema, tipografía sobria)
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background-color: rgba(250, 248, 245, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-line);
  transition: var(--transition-smooth);
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
  gap: 1rem;
}

.brand-anchor {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-shrink: 0;
}

.brand-emblem {
  width: 50px;
  height: 50px;
  border-radius: 4px;
  object-fit: cover;
  border: 1px solid var(--color-line);
  background-color: #fff;
  flex-shrink: 0;
}

.brand-text-block {
  display: flex;
  flex-direction: column;
}

.brand-title {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--color-forest-dark);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.brand-subtitle {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-ochre);
  margin-top: 3px;
}

/* Navegación Principal */
.primary-nav {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.nav-links-list {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
}

.nav-item {
  position: relative;
}

.nav-anchor {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.5rem 0.65rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--color-ink);
  border-radius: 4px;
  transition: var(--transition-smooth);
  white-space: nowrap;
}

.nav-anchor:hover, .nav-anchor.active {
  color: var(--color-forest);
  background-color: var(--color-paper-warm);
}

.header-cta-wrapper {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* Menú Desplegable Compacto */
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  background-color: var(--color-paper-card);
  border: 1px solid var(--color-line);
  border-radius: 4px;
  box-shadow: 0 10px 25px -5px rgba(24, 27, 24, 0.08);
  padding: 0.5rem 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: all 0.2s ease-in-out;
  z-index: 1000;
}

.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-anchor {
  display: block;
  padding: 0.6rem 1.25rem;
  font-size: 0.88rem;
  color: var(--color-ink);
  border-left: 2px solid transparent;
}

.dropdown-anchor:hover {
  background-color: var(--color-paper-warm);
  color: var(--color-forest);
  border-left-color: var(--color-forest);
}

/* ==========================================================================
   BOTONES VERDES CON FORMA DE MANCHA DE PINTURA (Sin glow ni sombra verde)
   Todos los botones verdes editoriales usan la silueta orgánica de mancha
   de pintura fresca y limpia, sin resplandores artificiales.
   ========================================================================== */
.btn-editorial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 1.15rem 2.6rem;
  min-height: 56px;
  font-family: var(--font-gummy), var(--font-sans);
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  background-color: transparent;
  background-image: url('../assets/splash-boton-verde.svg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  border: none;
  border-radius: 0;
  color: #FFFFFF !important;
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  text-decoration: none;
  line-height: 1.2;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
}

.btn-editorial:hover {
  transform: translateY(-3px) scale(1.04) rotate(-0.6deg);
  color: #FFFFFF !important;
  box-shadow: none !important;
  filter: none !important;
}

.btn-editorial:active {
  transform: translateY(1px) scale(0.97);
}

.site-header .btn-editorial {
  padding: 0.95rem 2.25rem !important;
  min-height: 50px;
  font-size: 0.95rem;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.btn-editorial-outline {
  background-image: none !important;
  background-color: transparent !important;
  color: var(--color-forest) !important;
  border: 1px solid var(--color-forest) !important;
  border-radius: 999px !important;
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  padding: 0.75rem 1.6rem !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  white-space: normal;
}

.btn-editorial-outline:hover {
  background-color: var(--color-forest-surface) !important;
  color: var(--color-forest-dark) !important;
  border-color: var(--color-forest) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
  filter: none !important;
  transform: translateY(-2px) !important;
}

.btn-editorial-plum {
  background-image: none !important;
  background-color: var(--color-plum) !important;
  border: 1px solid var(--color-plum) !important;
  border-radius: 999px !important;
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  color: #fff !important;
  padding: 0.75rem 1.6rem !important;
  box-shadow: 0 4px 14px rgba(138, 59, 142, 0.25) !important;
  filter: none !important;
}

.btn-editorial-plum:hover {
  background-color: var(--color-plum-dark) !important;
  border-color: var(--color-plum-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(138, 59, 142, 0.35) !important;
}

.btn-splash {
  background-image: url('../assets/splash-boton-verde.svg') !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
}

/* Botón Hamburguesa */
.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
  color: var(--color-ink);
}

/* ==========================================================================
   SECCIÓN 1: APERTURA CINEMATOGRÁFICA - "UN DÍA EN LINDA VISTA"
   ========================================================================== */
.cinematic-hero {
  padding: 5rem 0 5.5rem;
  position: relative;
  border-bottom: none;
}

.hero-editorial-header {
  text-align: center;
  max-width: 860px;
  margin: 0 auto 3.5rem;
}

.eyebrow-tag {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-ochre);
  margin-bottom: 1rem;
}

.hero-main-title {
  margin-bottom: 1.25rem;
}

.hero-editorial-lead {
  font-size: 1.2rem;
  color: var(--color-ink-muted);
  line-height: 1.6;
}

/* Escenario de Fotos de la Apertura */
.cinematic-stage {
  display: grid;
  grid-template-columns: 1fr 2.2fr 1fr;
  align-items: center;
  gap: 2rem;
  margin-bottom: 3.5rem;
}

.stage-photo-side {
  position: relative;
}

.stage-photo-side .photo-placeholder {
  border-radius: 20px;
  box-shadow: 0 10px 26px rgba(24, 27, 24, 0.06);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.stage-photo-side:hover .photo-placeholder {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(24, 27, 24, 0.1);
}

.stage-photo-center {
  position: relative;
}

.stage-photo-center .photo-placeholder {
  border-radius: 24px;
  box-shadow: 0 14px 34px rgba(24, 27, 24, 0.08);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.stage-photo-center:hover .photo-placeholder {
  transform: translateY(-4px);
  box-shadow: 0 22px 45px rgba(24, 27, 24, 0.12);
}

.stage-caption {
  font-size: 0.8rem;
  font-style: italic;
  font-family: var(--font-serif);
  color: var(--color-ink-light);
  margin-top: 0.6rem;
  display: block;
}

/* Escenas Cambiantes de la Jornada */
.day-scenes-timeline {
  background-color: var(--color-paper-warm);
  border: 1px solid var(--color-line);
  border-radius: 24px;
  padding: 2.25rem 3rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2.5rem;
  box-shadow: 0 10px 28px rgba(24, 27, 24, 0.05);
}

.scene-counter {
  font-family: var(--font-serif);
  font-size: 2.2rem;
  font-weight: 300;
  color: var(--color-forest);
  border-right: 1px solid var(--color-line-dark);
  padding-right: 2.5rem;
  line-height: 1;
}

.scene-content h4 {
  font-size: 1.6rem;
  color: var(--color-forest-dark);
  margin-bottom: 0.35rem;
}

.scene-content p {
  color: var(--color-ink-muted);
  font-size: 1.05rem;
  margin: 0;
}

.scene-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.scene-actions button.btn-editorial,
button#prevSceneBtn,
button#nextSceneBtn {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  max-width: 48px !important;
  max-height: 48px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  aspect-ratio: 1 / 1 !important;
  flex: 0 0 48px !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  font-size: 1.25rem !important;
}

/* ==========================================================================
   SECCIÓN 2: PROGRAMAS POR NIVEL (Composiciones Divididas 42% / 58%)
   Nunca tarjetas genéricas.
   ========================================================================== */
.programs-editorial-section {
  padding: 6.5rem 0;
  border-bottom: 1px solid var(--color-line);
}

.section-head-editorial {
  margin-bottom: 4.5rem;
}

.section-head-editorial h2 {
  margin-bottom: 0.75rem;
}

.section-head-editorial p {
  font-size: 1.15rem;
  color: var(--color-ink-muted);
  max-width: 680px;
}

.program-split-item {
  display: grid;
  grid-template-columns: 42% 58%;
  gap: 4rem;
  align-items: center;
  padding: 4.5rem 0;
  border-bottom: 1px solid var(--color-line);
}

.program-split-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.program-split-item.invert-order {
  grid-template-columns: 58% 42%;
}

.program-split-item.invert-order .program-text-col {
  order: 2;
}

.program-split-item.invert-order .program-visual-col {
  order: 1;
}

/* Columna visual con manchas orgánicas de colores detrás de la foto */
.program-visual-col {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.program-visual-col .photo-placeholder {
  position: relative;
  z-index: 2;
  width: 100%;
  border-radius: 18px;
  background-color: #FFFFFF;
  border: 1px solid var(--color-line);
  box-shadow: 0 16px 36px rgba(24, 27, 24, 0.08);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.program-split-item:hover .program-visual-col .photo-placeholder {
  transform: translateY(-4px);
  box-shadow: 0 22px 45px rgba(24, 27, 24, 0.12);
}

/* Manchas orgánicas de pintura detrás de las fotos cuadras ennumeradas */
.splash-backdrop {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 125%;
  height: 125%;
  z-index: 1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
  opacity: 0.95;
}

/* Alternancia izquierda / derecha */
.splash-backdrop.splash-right {
  transform: translate(-45%, -50%) scale(1.15) rotate(-3deg);
}

.splash-backdrop.splash-left {
  transform: translate(-55%, -50%) scale(1.15) rotate(4deg);
}

.program-split-item:hover .splash-backdrop.splash-right {
  transform: translate(-43%, -50%) scale(1.24) rotate(-1deg);
}

.program-split-item:hover .splash-backdrop.splash-left {
  transform: translate(-57%, -50%) scale(1.24) rotate(6deg);
}

/* Colores de manchas vinculados a los SVGs vectoriales */
.splash-maternal {
  background-image: url('../assets/splash-amarillo.svg');
}

.splash-prekinder {
  background-image: url('../assets/splash-cian.svg');
}

.splash-kinder {
  background-image: url('../assets/splash-coral.svg');
}

.splash-terapia {
  background-image: url('../assets/splash-morado.svg');
}

.splash-verde {
  background-image: url('../assets/splash-verde.svg');
}

/* ==========================================================================
   MANCHAS DE PINTURA ARTÍSTICAS REPARTIDAS POR LAS SECCIONES
   Siluetas dinámicas de salpicadura estilo témpera/pintura infantil,
   distribuidas de forma asimétrica y orgánica como en un taller de arte.
   ========================================================================== */
.paint-splash-dec {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
  user-select: none;
  transform: rotate(var(--rot, 0deg)) scale(var(--scale, 1));
}

.splash-color-yellow { background-image: url('../assets/splash-amarillo.svg'); }
.splash-color-red    { background-image: url('../assets/splash-rojo.svg'); }
.splash-color-coral  { background-image: url('../assets/splash-coral.svg'); }
.splash-color-green  { background-image: url('../assets/splash-verde.svg'); }
.splash-color-blue   { background-image: url('../assets/splash-azul.svg'); }
.splash-color-purple { background-image: url('../assets/splash-morado.svg'); }

.splash-size-xs { width: 75px; height: 75px; opacity: 0.90; }
.splash-size-sm { width: 130px; height: 130px; opacity: 0.85; }
.splash-size-md { width: 210px; height: 210px; opacity: 0.80; }
.splash-size-lg { width: 300px; height: 300px; opacity: 0.72; }
.splash-size-xl { width: 390px; height: 390px; opacity: 0.62; }

/* Contenedores con z-index seguro para texto y protección contra desborde */
section, .cinematic-hero, .programs-editorial-section, .creative-showcase-section,
.pedagogy-section, .brand-interlude, .facilities-section, .admission-timeline-section,
.school-life-section, .consultation-cta-section, main.container, .subpage-hero-clean,
.subpage-content-wrapper {
  position: relative;
  overflow: hidden;
}

section > .container, main > .container, .cinematic-hero > .container, .container-narrow,
main > *:not(.paint-splash-dec) {
  position: relative;
  z-index: 2;
}

/* Micro-animación suave al pasar el cursor */
section:hover .paint-splash-dec,
main:hover .paint-splash-dec {
  transform: rotate(var(--rot, 0deg)) scale(calc(var(--scale, 1) * 1.05));
}

.program-outline-num {
  font-family: var(--font-gummy);
  font-size: 3.8rem;
  font-weight: 800;
  line-height: 1;
  color: var(--color-line-dark);
  margin-bottom: 0.5rem;
  display: block;
}

.program-age-indicator {
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-ochre);
  margin-bottom: 0.5rem;
  display: block;
}

/* Insignias de Nivel con Colores Vivos Infantiles */
.level-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.38rem 0.95rem;
  border-radius: 999px;
  font-family: var(--font-gummy);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  width: fit-content;
}

.level-pill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.level-pill-maternal {
  background-color: var(--color-maternal-soft);
  color: var(--color-maternal-badge);
  border: 1px solid var(--color-maternal-border);
}
.level-pill-maternal .level-pill-dot { background-color: var(--color-maternal); }

.level-pill-prekinder {
  background-color: var(--color-prekinder-soft);
  color: var(--color-prekinder-badge);
  border: 1px solid var(--color-prekinder-border);
}
.level-pill-prekinder .level-pill-dot { background-color: var(--color-prekinder); }

.level-pill-kinder {
  background-color: var(--color-kinder-soft);
  color: var(--color-kinder-badge);
  border: 1px solid var(--color-kinder-border);
}
.level-pill-kinder .level-pill-dot { background-color: var(--color-kinder); }

.level-pill-terapia {
  background-color: var(--color-terapia-soft);
  color: var(--color-terapia-badge);
  border: 1px solid var(--color-terapia-border);
}
.level-pill-terapia .level-pill-dot { background-color: var(--color-terapia); }

.level-pill-arte {
  background-color: var(--color-coral-soft);
  color: var(--color-coral);
  border: 1px solid var(--color-coral-border);
}
.level-pill-arte .level-pill-dot { background-color: var(--color-coral); }

/* Números con Color de Nivel */
.program-split-item[data-level="maternal"] .program-outline-num {
  color: var(--color-maternal);
  opacity: 0.45;
}
.program-split-item[data-level="prekinder"] .program-outline-num {
  color: var(--color-prekinder);
  opacity: 0.45;
}
.program-split-item[data-level="kinder"] .program-outline-num {
  color: var(--color-kinder);
  opacity: 0.45;
}
.program-split-item[data-level="terapia"] .program-outline-num {
  color: var(--color-terapia);
  opacity: 0.45;
}

.program-item-title {
  font-size: 2.2rem;
  color: var(--color-forest-dark);
  margin-bottom: 1.25rem;
}

.program-item-desc {
  font-size: 1.05rem;
  color: var(--color-ink-muted);
  line-height: 1.65;
  margin-bottom: 1.75rem;
}

.program-read-more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-forest);
  border-bottom: 1px solid var(--color-forest);
  padding-bottom: 2px;
}

.program-read-more:hover {
  color: var(--color-forest-dark);
  border-bottom-color: var(--color-forest-dark);
  gap: 0.65rem;
}

/* ==========================================================================
   CINTA CROMÁTICA VIVA & ONDAS ORGÁNICAS
   ========================================================================== */
.creative-palette-ribbon {
  display: block;
  width: 100%;
  height: 6px;
  background-image: url('../assets/ondas-vivas.svg');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.creative-palette-ribbon .ribbon-stripe {
  display: none;
}

/* Banner de Ondas Orgánicas (100% Vectorial, Cero pixelación, Calidad Retina) */
.wave-accent-divider {
  width: 100%;
  height: 52px;
  background-image: url('../assets/ondas-vivas.svg');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  opacity: 1;
}

/* ==========================================================================
   SECCIÓN DE ESTIMULACIÓN CREATIVA Y MATERIALES VIVOS
   ========================================================================== */
.creative-showcase-section {
  padding: 6rem 0;
  background-color: #FFFFFF;
  border-bottom: 1px solid var(--color-line);
}

.creative-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.75rem;
  margin-top: 3.5rem;
}

.creative-card {
  background-color: var(--color-paper);
  border: 1px solid var(--color-line);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.creative-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 32px rgba(24, 27, 24, 0.07);
}

.creative-card[data-card="arte"]:hover { border-color: var(--color-coral); }
.creative-card[data-card="motricidad"]:hover { border-color: var(--color-kinder); }
.creative-card[data-card="lenguaje"]:hover { border-color: var(--color-terapia); }
.creative-card[data-card="ondas"]:hover { border-color: var(--color-prekinder); }

.creative-card-media {
  width: 100%;
  height: 200px;
  overflow: hidden;
  background-color: #FAF4EB;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.creative-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.creative-card-media img.fit-contain {
  object-fit: contain;
  padding: 1rem;
}

.creative-card:hover .creative-card-media img {
  transform: scale(1.05);
}

.creative-card-body {
  padding: 1.75rem 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.creative-card-body h4 {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  color: var(--color-forest-dark);
  margin-bottom: 0.6rem;
  line-height: 1.25;
}

.creative-card-body p {
  font-size: 0.92rem;
  color: var(--color-ink-muted);
  line-height: 1.55;
  margin: 0;
}

/* ==========================================================================
   SECCIÓN 3: ENFOQUE PEDAGÓGICO
   ========================================================================== */
.pedagogy-section {
  padding: 6.5rem 0;
  background-color: var(--color-paper-warm);
  border-bottom: 1px solid var(--color-line);
}

.pedagogy-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4.5rem;
  align-items: center;
}

.pedagogy-content h2 {
  margin-bottom: 1.5rem;
  color: var(--color-forest-dark);
}

.pedagogy-content p {
  color: var(--color-ink-muted);
  font-size: 1.08rem;
  margin-bottom: 1.5rem;
}

/* ==========================================================================
   SECCIÓN 4: INTERLUDIO EDITORIAL CON COLOR DE MARCA
   ========================================================================== */
.brand-interlude {
  background: linear-gradient(135deg, #1E6336 0%, #2D7D46 45%, #4EBAA2 100%);
  color: #FFFFFF;
  padding: 6.5rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.brand-interlude::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(circle at 15% 25%, rgba(255,255,255,0.14) 0%, transparent 40%),
                    radial-gradient(circle at 85% 75%, rgba(78, 186, 162, 0.3) 0%, transparent 50%);
  pointer-events: none;
}

.interlude-content {
  position: relative;
  z-index: 1;
  max-width: 820px;
  margin: 0 auto;
}

.interlude-quote {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 3.2vw, 2.7rem);
  font-style: italic;
  line-height: 1.35;
  margin-bottom: 2rem;
  color: #FAF8F5;
}

.interlude-source {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-ochre-light);
  display: block;
  margin-bottom: 2.5rem;
}

/* ==========================================================================
   SECCIÓN 5: INSTALACIONES CON SELECTOR ELEGANTE
   ========================================================================== */
.facilities-section {
  padding: 6.5rem 0;
  border-bottom: 1px solid var(--color-line);
}

.spaces-selector-bar {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--color-line);
  padding-bottom: 1rem;
  flex-wrap: wrap;
}

.space-tab-btn {
  background: none;
  border: 1px solid transparent;
  padding: 0.6rem 1.25rem;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--color-ink-muted);
  border-radius: 3px;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.space-tab-btn:hover {
  color: var(--color-forest);
  background-color: var(--color-paper-warm);
}

.space-tab-btn.active {
  color: var(--color-forest-dark);
  background-color: var(--color-paper-warm);
  border-color: var(--color-line-dark);
  font-weight: 600;
}

.space-display-frame {
  margin-bottom: 1.5rem;
}

.space-caption-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1rem;
  border-top: 1px solid var(--color-line);
  font-size: 0.9rem;
  color: var(--color-ink-muted);
}

/* ==========================================================================
   SECCIÓN 6: ADMISIÓN EN PASOS
   ========================================================================== */
.admission-timeline-section {
  padding: 6.5rem 0;
  border-bottom: 1px solid var(--color-line);
  background-color: var(--color-paper);
}

.steps-timeline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  margin-top: 3.5rem;
  position: relative;
}

.timeline-step {
  border-top: 2px solid var(--color-forest);
  padding-top: 1.5rem;
}

.step-digit {
  font-family: var(--font-gummy);
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--color-forest);
  line-height: 1;
  display: block;
  margin-bottom: 0.5rem;
}

.step-title {
  font-size: 1.3rem;
  color: var(--color-ink);
  margin-bottom: 0.75rem;
}

.step-text {
  font-size: 0.95rem;
  color: var(--color-ink-muted);
  line-height: 1.6;
}

/* ==========================================================================
   SECCIÓN 7: VIDA ESCOLAR & REDES
   ========================================================================== */
.school-life-section {
  padding: 6.5rem 0;
  border-bottom: 1px solid var(--color-line);
  background-color: var(--color-paper-warm);
}

.social-preview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}

.social-card-editorial {
  background-color: var(--color-paper-card);
  border: 1px solid var(--color-line);
  border-radius: 20px;
  padding: 2.5rem;
  box-shadow: 0 10px 28px rgba(24, 27, 24, 0.05);
}

.social-card-editorial h3 {
  font-size: 1.6rem;
  color: var(--color-forest-dark);
  margin-bottom: 0.6rem;
}

.social-card-editorial p {
  color: var(--color-ink-muted);
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
}

/* ==========================================================================
   SECCIÓN 8: CONSULTA FINAL
   ========================================================================== */
.consultation-cta-section {
  background: linear-gradient(135deg, #6D2472 0%, #8A3B8E 50%, #B85BA6 100%);
  color: #FFFFFF !important;
  padding: 6.5rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.consultation-cta-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(circle at 80% 20%, rgba(255,255,255,0.18) 0%, transparent 45%),
                    radial-gradient(circle at 20% 80%, rgba(254, 215, 170, 0.22) 0%, transparent 50%);
  pointer-events: none;
}

.consultation-content,
.consultation-cta-wrapper {
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}

.consultation-cta-section h2,
.consultation-cta-section h3,
.consultation-cta-section .cta-text-content h2,
.consultation-cta-section .consultation-content h2 {
  color: #FFFFFF !important;
  font-family: var(--font-serif);
  font-size: 2.35rem;
  font-weight: 400;
  line-height: 1.25;
  margin-bottom: 1.15rem;
}

.consultation-cta-section p,
.consultation-cta-section .cta-text-content p,
.consultation-cta-section .consultation-content p {
  color: #FDF4FD !important;
  font-size: 1.15rem;
  line-height: 1.6;
  margin-bottom: 2.25rem;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

.consultation-cta-section .eyebrow-tag,
.consultation-cta-section .cta-text-content .eyebrow-tag {
  color: #FFFFFF !important;
  background: rgba(255, 255, 255, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.8rem;
  padding: 0.35rem 0.95rem;
  border-radius: 999px;
  display: inline-block;
  margin-bottom: 1.1rem;
}

.consultation-cta-section .cta-action-content {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1.5rem;
}

.consultation-cta-section .cta-action-content > div {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  justify-content: center !important;
  align-items: center;
}

.btn-consultation {
  background-color: transparent !important;
  background-image: url('../assets/splash-boton-verde.svg') !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 100% 100% !important;
  color: #FFFFFF !important;
  font-family: var(--font-gummy), var(--font-sans);
  font-weight: 800;
  font-size: 1.08rem;
  letter-spacing: 0.02em;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
  padding: 1.45rem 3.4rem !important;
  min-height: 74px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-consultation:hover {
  background-color: transparent !important;
  border-color: transparent !important;
  color: #FFFFFF !important;
  transform: translateY(-3px) scale(1.05) rotate(-0.5deg) !important;
  box-shadow: none !important;
  filter: none !important;
}

/* ==========================================================================
   FOOTER INSTITUCIONAL
   ========================================================================== */
.site-footer {
  background-color: var(--color-paper);
  border-top: 1px solid var(--color-line);
  padding: 5rem 0 2.5rem;
  font-size: 0.92rem;
  color: var(--color-ink-muted);
}

.footer-top-grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1.4fr;
  gap: 3.5rem;
  padding-bottom: 3.5rem;
  border-bottom: 1px solid var(--color-line);
}

.footer-brand h4 {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  color: var(--color-forest-dark);
  margin-bottom: 0.5rem;
}

.footer-col-title {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-ink);
  margin-bottom: 1.25rem;
}

.footer-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.footer-list a:hover {
  color: var(--color-forest);
  text-decoration: underline;
}

.footer-bottom-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 2rem;
  font-size: 0.82rem;
  color: var(--color-ink-light);
  flex-wrap: wrap;
  gap: 1rem;
}

/* ==========================================================================
   BOTÓN FLOTANTE DE WHATSAPP CON FORMA DE MANCHA DE PINTURA VERDE
   ========================================================================== */
.floating-whatsapp-splash {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.14));
}

.floating-whatsapp-splash .splash-svg-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.floating-whatsapp-splash .whatsapp-icon-white {
  position: relative;
  z-index: 2;
  width: 36px;
  height: 36px;
  fill: #FFFFFF;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.25));
  transition: transform 0.3s ease;
}

.floating-whatsapp-splash:hover {
  transform: translateY(-8px) scale(1.14);
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.18));
}

.floating-whatsapp-splash:hover .splash-svg-bg {
  transform: rotate(14deg) scale(1.06);
}

.floating-whatsapp-splash:hover .whatsapp-icon-white {
  transform: scale(1.12);
}

.floating-whatsapp-splash:active {
  transform: translateY(-2px) scale(0.96);
}

/* ==========================================================================
   MANCHA VERDE ANIMADA: "MATRÍCULA ABIERTA"
   Brinca continuamente y se infla y desinfla como un globo elástico.
   ========================================================================== */
.matricula-splash-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.matricula-splash-badge {
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: center;
  padding: 0.95rem 2.4rem;
  text-decoration: none;
  cursor: pointer;
  transform-origin: center bottom;
  animation: splash-inflate-bounce 2.8s ease-in-out infinite;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.1));
  transition: filter 0.3s ease;
}

.matricula-splash-badge .badge-splash-bg {
  position: absolute;
  top: -18%;
  left: -12%;
  width: 124%;
  height: 136%;
  z-index: 1;
  pointer-events: none;
  animation: splash-bg-breathe 2.8s ease-in-out infinite;
  transform-origin: center center;
}

.matricula-splash-badge .badge-splash-text {
  position: relative;
  z-index: 2;
  font-family: var(--font-gummy);
  font-size: 1.14rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.matricula-splash-badge .badge-sparkle {
  font-size: 0.9rem;
  color: #FEF08A; /* Amarillo chispa */
  animation: pulse-sparkle 1.8s infinite ease-in-out;
}

@keyframes pulse-sparkle {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.35) rotate(15deg); opacity: 1; }
}

/* Animación continua: Brinca hacia arriba y se infla y desinfla */
@keyframes splash-inflate-bounce {
  0%, 100% {
    transform: translateY(0) scale(1, 1);
  }
  20% {
    /* Agacharse un poco antes del salto */
    transform: translateY(3px) scale(1.05, 0.93);
  }
  45% {
    /* Salto al punto más alto mientras se INFLA */
    transform: translateY(-16px) scale(1.15, 1.12);
  }
  65% {
    /* Descendiendo */
    transform: translateY(-6px) scale(1.08, 1.05);
  }
  80% {
    /* Aterrizaje con desinflado elástico */
    transform: translateY(2px) scale(0.96, 1.03);
  }
}

/* Respiración complementaria de la silueta de la mancha */
@keyframes splash-bg-breathe {
  0%, 100% {
    transform: scale(1) rotate(0deg);
  }
  45% {
    transform: scale(1.08) rotate(3deg);
  }
  80% {
    transform: scale(0.97) rotate(-1deg);
  }
}

/* Interacción hover/touch acelerada y reactiva */
.matricula-splash-badge:hover,
.matricula-splash-badge:focus-visible {
  animation-duration: 1.2s; /* Brinco más rápido y enérgico */
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.15));
}

.matricula-splash-badge:active {
  transform: translateY(-2px) scale(0.95);
}

/* ==========================================================================
   PÁGINA DE CONTACTO Y FORMULARIO RESPONSIVE
   ========================================================================== */
.contact-page-layout {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 3.5rem;
  align-items: start;
}

.contact-form-panel {
  background-color: var(--color-paper-card);
  border: 1px solid var(--color-line);
  border-radius: 16px;
  padding: 2.5rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.contact-info-panel {
  display: flex;
  flex-direction: column;
}

.contact-info-card {
  background-color: var(--color-paper-warm);
  border: 1px solid var(--color-line);
  border-radius: 16px;
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.contact-map-frame {
  border: 1px solid var(--color-line);
  border-radius: 16px;
  overflow: hidden;
  height: 280px;
}

/* Galería de instalaciones responsive */
.facilities-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem;
  margin-top: 3rem;
}

/* Tarjeta destacada de programa con icono/onda */
.program-feature-card {
  background-color: var(--color-paper-card);
  border: 1px solid var(--color-line);
  border-left-width: 4px;
  border-radius: 14px;
  padding: 1.5rem;
  margin-bottom: 2.5rem;
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 1.5rem;
  align-items: center;
}

/* Grilla interna de campos de formulario */
.editorial-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.form-field.full-width {
  grid-column: span 2;
}

.form-label-editorial {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-ink);
}

.form-input-editorial {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: var(--font-sans);
  font-size: 1rem;
  border: 1px solid var(--color-line-dark);
  background-color: var(--color-paper-card);
  border-radius: 3px;
  color: var(--color-ink);
  transition: var(--transition-smooth);
}

.form-input-editorial:focus {
  outline: none;
  border-color: var(--color-forest);
  box-shadow: 0 0 0 2px rgba(26, 62, 29, 0.12);
}

/* ==========================================================================
   BOTÓN CTA DEL MENÚ MÓVIL (Oculto 100% en pantallas de escritorio)
   ========================================================================== */
.mobile-menu-cta {
  display: none !important;
}

/* ==========================================================================
   CONFIGURACIÓN DE SUBPÁGINAS EDITORIALES (Misma arquitectura de INICIO)
   ========================================================================== */
.subpage-hero-clean {
  padding: 5rem 0 3.5rem;
  background-color: var(--color-paper);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--color-line);
}

.subpage-content-section {
  padding: 5rem 0;
  position: relative;
  overflow: hidden;
}

.subpage-content-section.section-warm {
  background-color: var(--color-paper-warm);
}

.subpage-content-section.section-surface {
  background-color: var(--color-forest-surface);
}

.subpage-split-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center;
}

.subpage-split-2col.align-start {
  align-items: start;
}

.editorial-card-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem;
}

.editorial-card-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.25rem;
}

.editorial-card-item {
  background-color: var(--color-paper-card);
  border: 1px solid var(--color-line);
  border-radius: 16px;
  padding: 2.25rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.editorial-card-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06);
}

/* ==========================================================================
   ACCESIBILIDAD Y REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Enfoque accesible */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--color-forest);
  outline-offset: 3px;
}

/* ==========================================================================
   RESPONSIVE DESIGN (Tablets y Móviles: Full Responsive 320px - 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
  .cinematic-stage {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .stage-photo-side {
    display: none;
  }
  .program-split-item, .program-split-item.invert-order {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .pedagogy-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .footer-top-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }
  .creative-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

@media (max-width: 1180px) and (min-width: 769px) {
  .header-inner {
    gap: 0.6rem;
  }
  .brand-anchor {
    gap: 0.65rem;
  }
  .brand-title {
    font-size: 1.15rem;
  }
  .brand-emblem {
    width: 44px;
    height: 44px;
  }
  .nav-anchor {
    padding: 0.45rem 0.5rem;
    font-size: 0.83rem;
    gap: 0.2rem;
  }
  .site-header .btn-editorial:not(.btn-editorial-outline),
  .btn-splash {
    padding: 0.82rem 1.65rem !important;
    font-size: 0.88rem;
    min-height: 46px;
  }
}

@media (max-width: 768px) {
  /* Contenedores y espaciados generales */
  .container {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  
  /* Ajuste de ritmo vertical entre secciones */
  .cinematic-hero {
    padding: 3.5rem 0 4rem;
  }
  .programs-editorial-section,
  .creative-showcase-section,
  .pedagogy-section,
  .facilities-section,
  .admission-timeline-section,
  .school-life-section,
  .consultation-cta-section {
    padding: 3.75rem 0;
  }
  .section-head-editorial {
    margin-bottom: 2.5rem;
  }
  main.container {
    padding-top: 2.5rem !important;
    padding-bottom: 3.5rem !important;
  }

  /* Barra de utilidades oculta en móvil para simplificar */
  .utility-bar {
    display: none;
  }

  /* Header móvil sólido para evitar trampas de containing block con position:fixed */
  .site-header {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-color: #FAF8F5 !important;
    position: sticky;
    top: 0;
    z-index: 9999;
  }

  /* Header móvil compacto */
  .header-inner {
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
    gap: 0.75rem;
  }
  .brand-emblem {
    width: 42px;
    height: 42px;
  }
  .brand-title {
    font-size: 1.12rem;
  }
  .brand-subtitle {
    font-size: 0.65rem;
  }
  .mobile-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    border-radius: 8px;
    background: var(--color-paper-warm);
    border: 1px solid var(--color-line);
    color: var(--color-ink);
    cursor: pointer;
  }

  /* Drawer de navegación móvil A PANTALLA COMPLETA con todas las páginas visibles */
  .primary-nav {
    position: fixed !important;
    top: 60px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    height: calc(100vh - 60px) !important;
    height: calc(100dvh - 60px) !important;
    max-height: calc(100dvh - 60px) !important;
    background-color: #FAF8F5 !important;
    padding: 1.25rem 1.25rem 4rem !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 9998;
    display: block !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  }
  .primary-nav.open {
    transform: translateX(0) !important;
  }
  .nav-links-list {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.55rem !important;
    width: 100% !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .nav-item {
    width: 100% !important;
    display: block !important;
  }
  .nav-anchor {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: var(--color-ink) !important;
    padding: 0.85rem 1rem !important;
    border-radius: 10px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background-color: #FFFFFF !important;
    border: 1px solid var(--color-line) !important;
    min-height: 48px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  }
  .nav-anchor.active {
    color: var(--color-forest) !important;
    background-color: var(--color-forest-surface) !important;
    border-color: rgba(26, 62, 29, 0.25) !important;
  }
  .nav-dropdown {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    box-shadow: none !important;
    background-color: #F5EFE6 !important;
    border: 1px solid rgba(226, 219, 208, 0.8) !important;
    border-radius: 10px !important;
    padding: 0.4rem 0.5rem !important;
    margin: 0.4rem 0 0.5rem 0.5rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.25rem !important;
  }
  .dropdown-anchor {
    padding: 0.65rem 0.85rem !important;
    font-size: 0.95rem !important;
    color: var(--color-ink) !important;
    border-radius: 6px !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    border-left: none !important;
  }
  .dropdown-anchor:hover, .dropdown-anchor:active {
    background-color: var(--color-forest-surface) !important;
    color: var(--color-forest) !important;
  }

  /* Botón de matrícula destacado al final del menú móvil */
  .mobile-menu-cta {
    display: block !important;
    margin-top: 1.75rem !important;
    padding-top: 1.5rem !important;
    border-top: 2px solid var(--color-line) !important;
    width: 100% !important;
  }
  .mobile-menu-cta .btn-editorial {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    min-height: 54px !important;
    font-size: 1rem !important;
    display: inline-flex !important;
  }

  /* Escenas de la jornada */
  .day-scenes-timeline {
    grid-template-columns: 1fr;
    padding: 1.5rem 1.25rem;
    gap: 1.5rem;
  }
  .scene-counter {
    border-right: none;
    border-bottom: 1px solid var(--color-line-dark);
    padding-right: 0;
    padding-bottom: 0.75rem;
    font-size: 1.8rem;
  }
  .scene-actions {
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  .scene-actions .btn-editorial-plum {
    flex: 1 1 100%;
    text-align: center;
    justify-content: center;
  }

  /* Grillas de contenido adaptadas a móvil */
  .contact-page-layout {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }
  .contact-form-panel {
    padding: 1.85rem 1.35rem;
    border-radius: 14px;
  }
  .contact-info-card {
    padding: 1.75rem 1.35rem;
    border-radius: 14px;
  }
  .facilities-gallery-grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
    margin-top: 2rem;
  }
  .program-feature-card {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding: 1.25rem 1.15rem;
  }
  .program-split-item {
    padding: 2.75rem 0;
    gap: 1.75rem;
  }
  .steps-timeline {
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 2rem;
  }
  .social-preview-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .subpage-hero-clean {
    padding: 3.25rem 0 2.25rem;
  }
  .subpage-content-section {
    padding: 3.25rem 0;
  }
  .subpage-split-2col {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .editorial-card-grid-2 {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  .editorial-card-grid-3 {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  .editorial-card-item {
    padding: 1.65rem 1.35rem;
  }
  .footer-top-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .editorial-form-grid {
    grid-template-columns: 1fr;
  }
  .form-field.full-width {
    grid-column: span 1;
  }
  .creative-cards-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  /* Placeholders fotográficos con padding móvil */
  .photo-placeholder {
    padding: 1.35rem 1rem;
    border-radius: 16px;
  }
  .photo-placeholder-desc {
    font-size: 0.88rem;
    max-width: 95%;
  }

  /* Barra de créditos en instalaciones */
  .space-caption-box {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  /* Barra divisora de ondas proporcional */
  .wave-accent-divider {
    height: 40px;
  }

  /* Botones adaptados para toque táctil sin desborde */
  .btn-editorial {
    padding: 1rem 2rem;
    min-height: 52px;
    font-size: 0.96rem;
    max-width: 100%;
    box-sizing: border-box;
    text-align: center;
  }
  .btn-consultation {
    padding: 1.25rem 2.2rem !important;
    min-height: 64px !important;
    font-size: 1rem !important;
    max-width: 100% !important;
  }
  .site-header .btn-editorial:not(.btn-editorial-outline),
  .btn-splash {
    padding: 0.7rem 1.4rem !important;
    font-size: 0.85rem;
    min-height: 42px;
  }

  /* Escala proporcional de manchas de pintura decorativas para móviles */
  .splash-size-xl { width: 210px; height: 210px; opacity: 0.38; }
  .splash-size-lg { width: 160px; height: 160px; opacity: 0.44; }
  .splash-size-md { width: 120px; height: 120px; opacity: 0.50; }
  .splash-size-sm { width: 80px; height: 80px; opacity: 0.55; }
  .splash-size-xs { width: 50px; height: 50px; opacity: 0.60; }

  /* Pie de página centrado en móvil */
  .footer-bottom-bar {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
  }
}

@media (max-width: 580px) {
  .brand-text-block {
    max-width: 180px;
  }
  .brand-title {
    font-size: 1.02rem;
    line-height: 1.15;
  }
  .brand-subtitle {
    display: none; /* Mantiene la fila del encabezado impecable y sin saltos */
  }
  .header-cta-wrapper {
    display: none; /* Acceso directo y visible dentro del menú hamburguesa */
  }
}

@media (max-width: 480px) {
  /* Teléfonos compactos */
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .cinematic-hero {
    padding: 2.75rem 0 3.25rem;
  }
  .programs-editorial-section,
  .creative-showcase-section,
  .pedagogy-section,
  .facilities-section,
  .admission-timeline-section,
  .school-life-section,
  .consultation-cta-section {
    padding: 3rem 0;
  }

  /* Tipografías fluidas proporcionadas */
  h1 { font-size: clamp(1.75rem, 7vw, 2.4rem); }
  h2 { font-size: clamp(1.4rem, 6vw, 2rem); }
  h3 { font-size: clamp(1.2rem, 5vw, 1.6rem); }

  /* Contacto y tarjetas compactas */
  .contact-form-panel {
    padding: 1.35rem 1rem;
  }
  .contact-info-card {
    padding: 1.35rem 1rem;
  }
  .contact-map-frame {
    height: 230px;
  }

  /* Botones a ancho completo en teléfonos */
  .btn-editorial {
    width: 100%;
    padding: 0.95rem 1.4rem;
    min-height: 50px;
    font-size: 0.92rem;
    justify-content: center;
  }
  .btn-consultation {
    width: 100% !important;
    padding: 1.1rem 1.4rem !important;
    min-height: 60px !important;
    font-size: 0.94rem !important;
    justify-content: center;
  }

  /* Badge de matrícula en Hero */
  .matricula-splash-badge {
    padding: 0.75rem 1.6rem;
  }
  .matricula-splash-badge .badge-splash-text {
    font-size: 0.98rem;
    gap: 0.35rem;
  }

  /* Botón flotante de WhatsApp cómodo para pantallas pequeñas */
  .floating-whatsapp-splash {
    bottom: 16px;
    right: 16px;
    width: 58px;
    height: 58px;
  }
  .floating-whatsapp-splash .whatsapp-icon-white {
    width: 28px;
    height: 28px;
  }
}

@media (max-width: 360px) {
  /* Dispositivos muy estrechos (iPhone SE 1ra gen, Galaxy Fold frontal) */
  .brand-text-block {
    max-width: 140px;
  }
  .brand-title {
    font-size: 0.92rem;
  }
  .brand-emblem {
    width: 36px;
    height: 36px;
  }
  .matricula-splash-badge {
    padding: 0.65rem 1.2rem;
  }
  .matricula-splash-badge .badge-splash-text {
    font-size: 0.88rem;
  }
}

/* ==========================================================================
   REDES SOCIALES DEL FOOTER (Color morado exacto de muestra #542240)
   ========================================================================== */
.footer-social-strip {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background-color: var(--color-plum);
  color: #FAF8F5;
  border: 1px solid var(--color-plum);
  transition: var(--transition-smooth);
}

.footer-social-link:hover {
  background-color: transparent;
  color: var(--color-plum);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(138, 59, 142, 0.3);
}

.footer-social-link svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* ==========================================================================
   ACENTOS LÚDICOS SOUR GUMMY (Equilibrio 90% Editorial / 10% Infantil)
   ========================================================================== */

/* 1. Palabra clave en contraste lúdico dentro de encabezados */
.gummy-accent {
  font-family: var(--font-gummy);
  font-weight: 800;
  display: inline-block;
  letter-spacing: -0.01em;
  transform: rotate(-1.5deg);
  transition: transform 0.25s ease;
}

.gummy-accent:hover {
  transform: rotate(1deg) scale(1.04);
}

.gummy-accent-green {
  color: #16A34A;
}

.gummy-accent-purple {
  color: #8A3B8E;
}

.gummy-accent-yellow {
  color: #D97706;
}

.gummy-accent-coral {
  color: #EA580C;
}

/* 2. Notas de las Docentes (Micro-post-its sutiles) */
.teacher-note-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background-color: #FEF3C7;
  color: #92400E;
  border: 1.5px dashed #F59E0B;
  border-radius: 999px;
  padding: 0.4rem 1.05rem;
  font-family: var(--font-gummy);
  font-size: 0.92rem;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.12);
  transform: rotate(-1.5deg);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  margin-top: 0.5rem;
  margin-bottom: 1.25rem;
  width: fit-content;
}

.teacher-note-pill:hover {
  transform: rotate(0deg) scale(1.02);
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.18);
}

.teacher-note-purple {
  background-color: #F3E8FF;
  color: #6B21A8;
  border-color: #A855F7;
  box-shadow: 0 4px 14px rgba(168, 85, 247, 0.12);
  transform: rotate(1.5deg);
}

.teacher-note-green {
  background-color: #DCFCE7;
  color: #14532D;
  border-color: #22C55E;
  box-shadow: 0 4px 14px rgba(34, 197, 94, 0.12);
  transform: rotate(-1.5deg);
}

.teacher-note-coral {
  background-color: #FFEDD5;
  color: #9A3412;
  border-color: #FB923C;
  box-shadow: 0 4px 14px rgba(251, 146, 60, 0.12);
  transform: rotate(1deg);
}

/* 4. Sellos e insignias tipo sticker de cuaderno */
.kinder-sticker-stamp {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 2px dashed #16A34A;
  border-radius: 50%;
  width: 96px;
  height: 96px;
  background: #FFFFFF;
  color: #14532D;
  font-family: var(--font-gummy);
  font-size: 0.78rem;
  line-height: 1.15;
  padding: 0.5rem;
  box-shadow: 0 8px 22px rgba(22, 163, 74, 0.16);
  transform: rotate(6deg);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  position: absolute;
  z-index: 10;
}

.kinder-sticker-stamp:hover {
  transform: rotate(0deg) scale(1.08);
  box-shadow: 0 12px 28px rgba(22, 163, 74, 0.22);
}

.kinder-sticker-stamp strong {
  font-size: 1.05rem;
  color: #16A34A;
  display: block;
}