/**
 * Estilos CSS para Colegio Sagrada Familia
 * Archivo consolidado de estilos extraídos de las páginas PHP
 * 
 * AUTOR:        Juan M. Ercoli
 * REV:          2025-11-20
 */

/* ==================== Variables de color — Colegio Sagrada Familia (paleta tierra) ==================== */
/* Valores alineados con tailwind.config.mjs (paleta csf) para uso en reglas que no son Tailwind. */
:root {
  /* Semánticas: títulos y texto */
  --csf-heading: #4a3b32;
  --csf-body: #6d5444;
  --csf-text: #4a4a4a;
  --csf-text-muted: #6b6b6b;

  /* Paleta: acento principal y variantes */
  --csf-primary: #c58c6b;
  --csf-primary-light: #d4a574;
  --csf-highlight: #d9a86c;

  /* Neutros y atmósfera (solo marrones / tierra) */
  --csf-neutral: #e8dcc7;
  --csf-muted: #9c8b7a;
  --csf-soft: #e2d5c4;
}

/* Header Colegio: fondo glass definido en input.css (.header-bg-glass-csf) */

/* ==================== Header Logo ==================== */
.csf-logo {
  display: block;
  transform: scale(1.15);
  transform-origin: left center;
}

@media (min-width: 768px) {
  .csf-logo {
    transform: scale(1.2);
  }
}

/* ==================== Tipografía ==================== */
.hero-organic {
  font-family: "Times New Roman", Times, serif;
}

.hero-organic h1 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 900;
  color: var(--csf-heading);
  line-height: 1.15;
}

.hero-organic p {
  font-family: "Times New Roman", Times, serif;
  font-weight: 600;
  color: var(--csf-body);
  line-height: 1.7;
}

/* ==================== Textura de Fondo Sutil ==================== */
/* ==================== Textura de Fondo Sutil ==================== */
.hero-organic {
  background-color: transparent; /* Let wrapper background show */
  position: relative;
  overflow: hidden;
  height: calc(100vh - 112px);
  max-height: calc(100vh - 112px);
}

/* Asegurar que el Swiper llene todo el contenedor */
.csfHeroSwiper {
  height: 100%;
  min-height: 100%;
}

.csfHeroSwiper .swiper-wrapper,
.csfHeroSwiper .swiper-slide {
  height: 100%;
}

/* Gradiente de transición inferior del Hero hacia la siguiente sección.
   Ajuste sutil para mantener el look original sin corte brusco. */
.hero-organic::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 32px;
  pointer-events: none;
  z-index: 8;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255, 255, 255, 0.35) 55%,
    rgba(255, 255, 255, 0.75) 85%,
    #ffffff 100%
  );
}

/* ==================== MOBILE HERO RESPONSIVE ==================== */
/* ==================== MOBILE HERO RESPONSIVE ==================== */
@media (max-width: 1024px) {
  /* 1. FORZAR LA SECCIÓN PADRE A ALTURA COMPLETA (restando header) */
  .hero-organic {
    height: calc(100vh - 112px) !important;
    min-height: calc(100vh - 112px) !important;
    max-height: calc(100vh - 112px) !important;
    height: calc(100dvh - 112px) !important;
    min-height: calc(100dvh - 112px) !important;
    max-height: calc(100dvh - 112px) !important;
    height: calc(100svh - 112px) !important;
    min-height: calc(100svh - 112px) !important;
    max-height: calc(100svh - 112px) !important;
    padding: 0 !important;
    margin-top: 0 !important;
    box-sizing: border-box;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;

    /* Imagen de fondo del CSF como backdrop en mobile */
    background-image: url('../../images/colegio-sagrada-familia/bg-colegio-sagrada-familia3.webp') !important;
    background-size: cover !important;
    background-position: left center !important;
  }

  /* Ensure Swiper container fills height */
  .hero-organic .csfHeroSwiper {
    height: 100% !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  /* 2. EL SLIDE CONTENEDOR */
  .hero-organic .swiper-slide {
    height: 100% !important;
    display: flex !important;
  }

  .hero-organic .hero-slide {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 0 !important;
    background: transparent !important;
    height: 100% !important;
    width: 100% !important;
    min-height: unset !important;
    min-width: unset !important;
    padding: 0 !important;
    position: relative;
  }

  /* 3. FRAME DECORATIVO: se oculta en mobile */
  .hero-organic .hero-layer-frame {
    display: none !important;
  }

  .hero-organic .hero-frame-img {
    display: none !important;
  }

  /* 4. IMAGEN DEL NIÑO: ancho completo, altura fija, fade solo abajo */
  .hero-organic .hero-layer-kid {
    position: relative !important;
    top: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 38vh !important;
    max-height: none !important;
    flex: 0 0 auto;
    margin: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    order: 1;
    z-index: 1;
    filter: none;
    border-radius: 0;
    overflow: hidden;
    clip-path: none !important;

    /* Fade solo abajo */
    -webkit-mask-image: linear-gradient(
      to bottom,
      black 0%,
      black 70%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to bottom,
      black 0%,
      black 70%,
      transparent 100%
    );
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
  }

  .hero-organic .hero-kid-img {
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    object-position: center 30% !important;
  }

  /* 5. CONTENIDO: texto y botón, debajo de la imagen */
  .hero-organic .hero-layer-content {
    position: relative !important;
    order: 2;
    width: 100% !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center;
    z-index: 10;
    padding: 3vh 1.5rem 4vh !important; /* Cloned exactly from IHC logic */
    margin: 0 !important;
    background: transparent !important;
    margin-top: -10vh !important; /* Cloned exactly from IHC logic */
  }

  .hero-organic .hero-content-inner {
    width: 100%;
    max-width: 90%;
    padding: 0 !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: transparent !important;
  }

  /* Tipografía - título */
  .hero-organic .hero-title {
    font-family: "Playfair Display", serif;
    font-size: clamp(1.85rem, 5vw, 2.8rem) !important;
    line-height: 1.15;
    margin-bottom: 1.5vh !important;
    color: var(--csf-heading) !important;
    text-shadow: none !important;
  }

  @media (max-width: 380px) {
    .hero-organic .hero-title {
      font-size: 1.25rem !important;
    }
  }

  .hero-organic .hero-title span {
    display: block;
  }

  /* Tipografía - párrafo */
  .hero-organic .hero-text {
    font-family: inherit;
    font-size: clamp(0.85rem, 2.2vw, 1.05rem) !important; /* Miniaturized natively to fit the 100vh box dynamically like IHC does with less text */
    line-height: 1.4;
    color: var(--csf-body) !important;
    margin-bottom: 2vh !important;
    max-width: 95%;
    margin-left: auto;
    margin-right: auto;
    text-shadow: none !important;
  }

  @media (min-width: 450px) {
    .hero-organic .hero-text {
      font-size: clamp(1.05rem, 2.2vh, 1.4rem) !important;
      line-height: 1.55;
      max-width: 90%;
    }
  }

  /* Botón CTA */
  .hero-organic .hero-btn {
    padding: 0.9rem 2.5rem !important;
    font-size: 0.9rem !important;
    margin-bottom: 2vh !important;
    font-weight: 700 !important;
  }
}

/* ==================== Mobile intermedio (600px - 767px) ==================== */
@media (min-width: 600px) and (max-width: 767px) {
  .hero-organic .hero-layer-kid { height: 40vh !important; }
  .hero-organic .hero-layer-content { padding: 2.4vh 1.75rem 2.8vh !important; margin-top: -7vh !important; }
  .hero-organic .hero-content-inner { max-width: 86% !important; }
  .hero-organic .hero-title { font-size: clamp(2.5rem, 4.5vw, 3.2rem) !important; line-height: 1.14 !important; margin-bottom: 1.6vh !important; }
  .hero-organic .hero-text { font-size: clamp(1.05rem, 2vw, 1.25rem) !important; line-height: 1.5 !important; max-width: 88% !important; margin-bottom: 1.8vh !important; }
  .hero-organic .hero-btn { font-size: 0.9rem !important; padding: 0.8rem 2.3rem !important; }
}

/* ==================== Tablet (768px - 1024px) ==================== */
@media (min-width: 768px) and (max-width: 1024px) {
  .hero-organic .hero-layer-kid { height: 44vh !important; }
  .hero-organic .hero-layer-content { padding: 2.2vh 2.2rem 2.6vh !important; margin-top: -6vh !important; }
  .hero-organic .hero-content-inner { max-width: 86% !important; }
  .hero-organic .hero-title { font-size: clamp(3rem, 5.5vw, 4rem) !important; line-height: 1.12 !important; margin-bottom: 1.5vh !important; }
  .hero-organic .hero-text { font-size: clamp(1.15rem, 2.2vw, 1.45rem) !important; line-height: 1.52 !important; max-width: 82% !important; margin-bottom: 1.7vh !important; }
  .hero-organic .hero-btn { font-size: 0.93rem !important; padding: 0.82rem 2.4rem !important; }
}

/* ==================== iPhone SE y pantallas muy pequeñas ==================== */
@media (max-width: 400px) {
  .hero-organic .hero-slide { padding: 0 !important; gap: 0 !important; }
  .hero-organic .hero-layer-kid { height: 45vh !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; left: 0 !important; right: 0 !important; }
  .hero-organic .hero-title { font-size: clamp(1.8rem, 4vh, 2.5rem) !important; margin-bottom: 3vh !important; }
  .hero-organic .hero-text { font-size: clamp(1rem, 2vh, 1.1rem) !important; line-height: 1.35; margin-bottom: 3vh !important; max-width: 95%; }
  .hero-organic .hero-btn { padding: 0.7rem 2rem !important; font-size: 0.85rem !important; margin-bottom: 5px !important; }
}

/* ==================== Tablet taller (768px - 1024px, min-height 700px) ==================== */
@media (min-width: 768px) and (max-width: 1024px) and (min-height: 700px) {
  .hero-organic .hero-layer-kid { height: 48vh !important; }
  .hero-organic .hero-slide { gap: 1vh !important; }
}

/* ==================== SECCIÓN PROPUESTA ==================== */
.propuesta-organic {
  background-color: transparent;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  position: relative;
  overflow: hidden;
  /* Padding handled by Tailwind classes in PHP */
}

/* Tab Button Styles */
.tab-btn {
  position: relative;
  border: none;
  cursor: pointer;
  outline: none;
  /* Other styles handled by Tailwind classes */
}

/* Removed .tab-btn.active::after to fix height issue */

/* Animation for Fade In */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fadeIn {
  animation: fadeIn 0.5s ease-in-out forwards;
}

/* CSS Grid Tabs Stability */
.tabs-grid-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

.tab-pane {
  grid-row: 1;
  grid-column: 1;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.4s ease, transform 0.4s ease;
  transform: translateY(10px);
  height: 0;
  overflow: hidden;
}

.tab-pane.active {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transform: translateY(0);
  height: auto;
  overflow: visible;
}

.propuesta-educativa-main {
  min-height: 800px; /* Base height to keep background stable */
  display: flex;
  flex-direction: column;
}

.subject-badge {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  border-radius: 9999px;
  background-color: #f9f7f2;
  border: 1px solid #efebe9;
  color: #6d4c41;
  transition: all 0.3s ease;
  cursor: default;
}

.subject-badge .subject-icon,
.subject-badge svg {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  color: #c58c6b;
}

.subject-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(139, 110, 91, 0.15);
  border-color: #c9b8a8;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .tab-btn {
    font-size: 1rem;
    padding: 0.75rem 1.5rem;
  }
}

/* ==================== SECCIÓN CUOTAS ==================== */
.cuotas-organic {
  background-color: transparent;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  position: relative;
  overflow: hidden;
  padding: 4rem 1.5rem;
}

.cuotas-organic::after {
  display: none !important;
}

@media (min-width: 768px) {
  .cuotas-organic {
    padding: 5rem 2rem;
  }
}

@media (min-width: 1024px) {
  .cuotas-organic {
    padding: 6rem 3rem;
  }
}

.cuotas-container {
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: 10;
}

.cuotas-header {
  text-align: center;
  margin-bottom: 3rem;
  position: relative;
  z-index: 10;
}

.cuotas-subtitle {
  font-family: "Lato", sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--csf-primary);
  margin-bottom: 1rem;
  display: block;
}

.cuotas-title {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--csf-text);
  margin-bottom: 1rem;
  line-height: 1.2;
  position: relative;
}

@media (min-width: 768px) {
  .cuotas-title {
    font-size: 3rem;
  }
}

@media (min-width: 1024px) {
  .cuotas-title {
    font-size: 3.5rem;
  }
}

.cuotas-title::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--csf-soft),
    var(--csf-highlight)
  );
  border-radius: 10px;
  opacity: 0.7;
}

.cuotas-intro {
  font-family: "Lato", sans-serif;
  font-size: 1.125rem;
  color: var(--csf-text-muted);
  max-width: 700px;
  margin: 2rem auto 0;
  line-height: 1.7;
}

.cuotas-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  margin-top: 3rem;
}

@media (min-width: 1024px) {
  .cuotas-grid {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }
}

.cuotas-card {
  position: relative;
  z-index: 5;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

@media (min-width: 768px) {
  .cuotas-card {
    padding: 2.5rem;
  }
}

.cuotas-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

.cuotas-card-header {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 2px solid var(--csf-primary);
  opacity: 0.3;
}

.cuotas-card-title {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--csf-text);
  margin-bottom: 0.5rem;
  position: relative;
  display: inline-block;
}

@media (min-width: 768px) {
  .cuotas-card-title {
    font-size: 2rem;
  }
}

.cuotas-card-subtitle {
  font-family: "Lato", sans-serif;
  font-size: 0.9375rem;
  color: var(--csf-text);
  line-height: 1.5;
  font-weight: 400;
}

.vencimientos-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.vencimiento-item {
  background: linear-gradient(
    135deg,
    rgba(197, 140, 107, 0.08) 0%,
    rgba(232, 220, 199, 0.08) 100%
  );
  border: 2px solid var(--csf-primary);
  border-left: 5px solid var(--csf-primary);
  border-radius: 12px;
  padding: 1.25rem;
  transition: all 0.3s ease;
}

.vencimiento-item:hover {
  background: linear-gradient(
    135deg,
    rgba(197, 140, 107, 0.12) 0%,
    rgba(232, 220, 199, 0.12) 100%
  );
  transform: translateX(5px);
}

.vencimiento-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.vencimiento-nombre {
  font-family: "Lato", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--csf-text);
}

@media (min-width: 768px) {
  .vencimiento-nombre {
    font-size: 1.125rem;
  }
}

.vencimiento-precio {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--csf-primary);
}

@media (min-width: 768px) {
  .vencimiento-precio {
    font-size: 1.5rem;
  }
}

.vencimiento-descripcion {
  font-family: "Lato", sans-serif;
  font-size: 0.875rem;
  color: var(--csf-text-muted);
  line-height: 1.5;
}

.cuotas-nota {
  background: rgba(168, 181, 160, 0.1);
  border-left: 4px solid var(--csf-muted);
  border-radius: 8px;
  padding: 1rem;
  margin-top: 1.5rem;
}

.cuotas-nota p {
  font-family: "Lato", sans-serif;
  font-size: 0.875rem;
  color: var(--csf-text-muted);
  line-height: 1.6;
  margin: 0;
}

.cuotas-nota strong {
  color: var(--csf-text);
  font-weight: 600;
}

.materiales-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 2px solid var(--csf-neutral);
}

.material-tab {
  font-family: "Lato", sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--csf-text-muted);
  background: transparent;
  border: none;
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  border-bottom: 3px solid transparent;
  position: relative;
  bottom: -2px;
}

.material-tab:hover {
  color: var(--csf-text);
  background: rgba(168, 181, 160, 0.05);
}

.material-tab.active {
  color: var(--csf-primary);
  border-bottom-color: var(--csf-primary);
  background: rgba(197, 140, 107, 0.05);
}

.materiales-content {
  position: relative;
  min-height: 280px;
}

.material-panel {
  display: none;
  animation: fadeIn 0.3s ease;
}

.material-panel.active {
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.material-nivel-items {
  list-style: none;
  padding: 0;
  margin: 0;
}

.material-nivel-items li {
  font-family: "Lato", sans-serif;
  font-size: 0.9375rem;
  color: var(--csf-text-muted);
  margin-bottom: 0.75rem;
  padding-left: 1.5rem;
  position: relative;
  line-height: 1.6;
}

.material-nivel-items li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--csf-primary);
  font-weight: 600;
  font-size: 1.125rem;
}

.cuotas-btn-wrapper {
  text-align: center;
  margin-top: 2rem;
}

.cuotas-btn {
  display: inline-block;
  padding: 0.875rem 2rem;
  background: linear-gradient(
    135deg,
    var(--csf-primary) 0%,
    var(--csf-primary-light) 100%
  );
  color: white;
  text-decoration: none;
  font-family: "Lato", sans-serif;
  font-weight: 600;
  font-size: 0.9375rem;
  border-radius: 50px;
  box-shadow: 0 6px 20px rgba(197, 140, 107, 0.25);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
}

.cuotas-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  transition: left 0.5s;
}

.cuotas-btn:hover {
  transform: translateY(-3px) scale(1.05);
  background: linear-gradient(
    135deg,
    var(--csf-primary-light) 0%,
    var(--csf-highlight) 100%
  );
  box-shadow: 0 10px 30px rgba(197, 140, 107, 0.5);
  color: #ffffff;
}

.cuotas-btn:hover::before {
  left: 100%;
}

/* ==================== MATERIALS + UNIFORMES ==================== */
.csf-materials-block {
  display: grid;
  gap: 1rem;
}

.csf-materials-intro {
  margin: 0;
  color: var(--csf-text-muted);
  font-family: "Lato", sans-serif;
  font-size: 0.95rem;
  line-height: 1.7;
}

.csf-materials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem;
}

.csf-material-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.9rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(139, 105, 20, 0.18);
  background: linear-gradient(135deg, #fffdf8 0%, #f3ead9 100%);
  color: var(--csf-heading) !important;
  text-decoration: none !important;
  font-family: "Lato", sans-serif;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 10px 22px rgba(94, 73, 42, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.csf-material-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(139, 105, 20, 0.32);
  box-shadow: 0 14px 28px rgba(94, 73, 42, 0.12);
}

.csf-materials-empty {
  margin: 0;
  padding: 0.95rem 1rem;
  border-radius: 14px;
  background: rgba(245, 239, 227, 0.8);
  color: var(--csf-text-muted);
  font-family: "Lato", sans-serif;
}

.csf-uniformes-section {
  margin-top: 2rem;
}

.csf-uniformes-card {
  padding: clamp(1.5rem, 2vw, 2rem);
  border: 1px solid rgba(139, 105, 20, 0.16);
  border-radius: 28px;
  background: linear-gradient(180deg, #fff 0%, #f7f1e5 100%);
  box-shadow: 0 18px 36px rgba(94, 73, 42, 0.08);
}

.csf-uniformes-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.csf-section-kicker {
  margin: 0 0 0.25rem;
  font-family: "Lato", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--csf-primary);
  font-weight: 700;
}

.csf-uniformes-header h3 {
  margin: 0;
  font-family: "Playfair Display", serif;
  font-size: clamp(1.5rem, 2vw, 2.1rem);
  color: var(--csf-heading);
}

.csf-uniformes-intro {
  margin: 0;
  max-width: 36rem;
  color: var(--csf-text-muted);
  font-family: "Lato", sans-serif;
  font-size: 0.95rem;
  line-height: 1.7;
}

.csf-uniformes-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

@media (max-width: 900px) {
  .csf-uniformes-header,
  .csf-uniformes-grid {
    grid-template-columns: 1fr;
    display: grid;
  }
}

.csf-uniformes-column {
  padding: 1rem;
  border: 1px solid rgba(226, 217, 200, 0.8);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.86);
}

.csf-uniformes-column-featured {
  background: linear-gradient(180deg, #fff8ea 0%, #f4e2b9 100%);
}

.csf-uniformes-column-head {
  margin-bottom: 0.85rem;
  font-family: "Lato", sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--csf-primary);
}

.csf-uniformes-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
}

.csf-uniformes-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1rem;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(226, 217, 200, 0.9);
}

.csf-uniformes-item-name {
  color: var(--csf-heading);
  font-family: "Lato", sans-serif;
  font-weight: 600;
}

.csf-uniformes-item-price {
  color: var(--csf-primary);
  font-family: "Lato", sans-serif;
  font-weight: 800;
  white-space: nowrap;
}

.csf-uniformes-column-empty,
.csf-uniformes-empty {
  margin: 0;
  color: var(--csf-text-muted);
  font-family: "Lato", sans-serif;
}

.faq-section {
  margin-top: 4rem;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

@media (min-width: 768px) {
  .faq-section {
    padding: 2.5rem;
  }
}

.faq-title {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--csf-text);
  margin-bottom: 2rem;
  text-align: center;
}

@media (min-width: 768px) {
  .faq-title {
    font-size: 2rem;
  }
}

.faq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .faq-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}

.faq-item details {
  background: rgba(232, 220, 199, 0.15);
  border: 1px solid var(--csf-neutral);
  border-radius: 12px;
  padding: 1.25rem;
  transition: all 0.3s ease;
}

.faq-item details:hover {
  background: rgba(232, 220, 199, 0.25);
}

.faq-item details summary {
  font-family: "Lato", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--csf-text);
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-left: 1.5rem;
}

.faq-item details summary::before {
  content: "▶";
  position: absolute;
  left: 0;
  color: var(--csf-primary);
  transition: transform 0.3s ease;
  font-size: 0.75rem;
}

.faq-item details[open] summary::before {
  transform: rotate(90deg);
}

.faq-item details p {
  font-family: "Lato", sans-serif;
  font-size: 0.9375rem;
  color: var(--csf-text-muted);
  line-height: 1.6;
  margin: 1rem 0 0 1.5rem;
}

.cta {
  margin-top: 3rem;
  text-align: center;
  background: linear-gradient(
    135deg,
    rgba(197, 140, 107, 0.1) 0%,
    rgba(168, 181, 160, 0.1) 100%
  );
  border-radius: 20px;
  padding: 2rem;
}

@media (min-width: 768px) {
  .cta {
    padding: 2.5rem;
  }
}

.cta-text {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--csf-text);
  margin-bottom: 1.5rem;
  line-height: 1.4;
}

@media (min-width: 768px) {
  .cta-text {
    font-size: 1.5rem;
  }
}

.watercolor-cuotas-1,
.watercolor-cuotas-2,
.watercolor-cuotas-3 {
  position: absolute;
  opacity: 0.25;
  z-index: 1;
  animation: float 8s ease-in-out infinite;
}

.watercolor-cuotas-1 {
  top: 10%;
  left: 5%;
  width: 320px;
  height: 320px;
  background: radial-gradient(
    circle,
    var(--csf-soft) 0%,
    transparent 70%
  );
  border-radius: 50% 40% 60% 50%;
  filter: blur(40px);
}

.watercolor-cuotas-2 {
  bottom: 15%;
  right: 8%;
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, var(--csf-muted) 0%, transparent 70%);
  border-radius: 60% 50% 40% 60%;
  filter: blur(35px);
  animation-duration: 10s;
  animation-direction: reverse;
}

.watercolor-cuotas-3 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, var(--csf-highlight) 0%, transparent 70%);
  border-radius: 40% 60% 50% 40%;
  filter: blur(45px);
  animation-duration: 12s;
  opacity: 0.18;
}

.cuotas-decoration {
  position: absolute;
  z-index: 2;
  opacity: 0.5;
  animation: gentleBounce 4s ease-in-out infinite;
  display: none;
}

@media (min-width: 768px) {
  .cuotas-decoration {
    display: block;
  }
}

.cuotas-decoration svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ==================== SECCIÓN JORNADA ==================== */
.timeline-item {
  animation: fadeInUp 0.6s ease-out both;
}

@media (max-width: 768px) {
  .timeline-item {
    padding-left: 0;
  }
}

/* ==================== Hero Redesign (Sagrada Familia) - Final Frame Strategy ==================== */
.hero-slide {
  position: relative;
  height: 100%;
  max-height: 100vh;
  /* Removido min-height para respetar 100vh del contenedor */
  overflow: hidden;
  background-color: transparent;
}

/* Layer 1: The Kid (Bottom) */
.hero-layer-kid {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  /* Full width to avoid cutting the image */
  height: 100%;
  z-index: 1;
}

.hero-kid-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  animation: zoomSlide 8s ease-in-out infinite;
}

/* Layer 2: The Frame (Overlay) */
.hero-layer-frame {
  position: absolute;
  top: -10px;
  left: -10px;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  z-index: 2;
  pointer-events: none;
  /* Curva arqueada: frame a la izquierda, curva hacia la derecha revelando imagen */
  /* El path dibuja el frame ocupando la izquierda con un borde curvo convexo hacia la derecha */
  clip-path: url(#heroMaskPath);
}

.hero-frame-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: blur(2.5px);
  -webkit-filter: blur(2.5px);
  -webkit-mask-image: linear-gradient(
    to right,
    black 0%,
    black 40%,
    rgba(0, 0, 0, 0.5) 65%,
    rgba(0, 0, 0, 0.15) 85%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    black 0%,
    black 40%,
    rgba(0, 0, 0, 0.5) 65%,
    rgba(0, 0, 0, 0.15) 85%,
    transparent 100%
  );
}

/* Layer 3: Content (Top) */

.hero-layer-content {
  position: relative;
  z-index: 10;
  /* Above decor which is z-index 5 */
  width: 100%;
  max-width: 1920px;
  /* Unlocked max-width to use full screen */
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  /* Vertical center */
  padding-left: 6%;
  /* Dynamic left margin */
  padding-right: 2rem;
}

.hero-content-inner {
  width: 45%;
  /* Restrict width to avoid overlapping the image area too much */
  padding-top: 0;
  padding: 1.25rem;
}

/* Typography */
.hero-title {
  font-family: "Playfair Display", serif;
  font-size: clamp(3.5rem, 5.5vw, 6rem);
  /* Fully responsive */
  line-height: 1.15;
  color: var(--csf-heading);
  font-weight: 400;
  font-style: italic;
  margin-bottom: 1.5rem;
  /* Override global animation that hides title */
  opacity: 1 !important;
  animation: slideInDown 0.8s ease-out forwards;
  animation-play-state: running;
}

.hero-title span {
  display: block;
}

/* Increased specificity to ensure override */
.hero-organic .hero-content-inner .hero-text {
  font-family: "Times New Roman", Times, serif;
  font-size: clamp(1.1rem, 1.35vw, 1.32rem);
  line-height: 1.55;
  color: var(--csf-text-muted); /* Usar variable definida */
  margin-bottom: 1.75rem;
  max-width: 540px;
  font-weight: 400 !important;
  opacity: 0;
  animation: slideInUp 0.8s ease-out 0.2s forwards;
  animation-play-state: running;
}

.hero-organic .hero-content-inner .hero-text strong {
  font-weight: 700 !important;
  color: var(--csf-heading) !important; /* Force dark bold */
}



/* Button */
.hero-btn {
  display: inline-block;
  background-color: #8b6e5b;
  color: #fff;
  padding: 1rem 2.5rem;
  /* Responsive padding */
  border-radius: 50px;
  font-family: "Times New Roman", Times, serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.9rem;
  /* Responsive font */
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(139, 110, 91, 0.3);
  text-decoration: none;
  pointer-events: auto;
  /* Re-enable clicks */
}

.hero-btn:hover {
  background-color: #6d5444;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(139, 110, 91, 0.4);
  color: #fff;
}

/* Glassmorphism Card for Sections */
.glass-card-organic {
  background-color: rgba(255, 255, 255, 0.45) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 8px 32px 0 rgba(139, 110, 91, 0.1) !important;
  transition: all 0.4s ease;
}

/* Section Background Fade - Gradual mask for organic section blending */
.section-bg-fade {
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.4) 5%,
    black 15%,
    black 75%,
    rgba(0, 0, 0, 0.4) 90%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.4) 5%,
    black 15%,
    black 75%,
    rgba(0, 0, 0, 0.4) 90%,
    transparent 100%
  );
}

/* Variant: only fade the bottom edge (for last sections where top should be sharp) */
.section-bg-fade-bottom {
  -webkit-mask-image: linear-gradient(
    to bottom,
    black 0%,
    black 75%,
    rgba(0, 0, 0, 0.4) 90%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    black 0%,
    black 75%,
    rgba(0, 0, 0, 0.4) 90%,
    transparent 100%
  );
}

/* Make Separators almost invisible to avoid "marked lines" */
.section-separator div {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(109, 84, 68, 0.05),
    transparent
  ) !important;
  height: 2px !important;
}

/* Section Overlap REVERTED - User preferred no layout changes */
#propuesta-educativa,
#cuotas-materiales {
  margin-top: 0 !important;
  padding-top: 4rem !important; /* Original padding */
}
@media (min-width: 768px) {
  #propuesta-educativa,
  #cuotas-materiales {
    padding-top: 5rem !important;
  }
}
@media (min-width: 1024px) {
  #propuesta-educativa,
  #cuotas-materiales {
    padding-top: 6rem !important;
  }
}

/* Decorative Elements removed */

/* Hero Overlay - Desktop only - Applies cream tint to the frame area */
@media (min-width: 1025px) {
  .hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 6; /* Above decorations (5) and frame (2), below content (10) */
    pointer-events: none;
    background: rgba(242, 229, 213, 0.25); /* Semi-transparent cream overlay */
    width: 100%;
    height: 100%;
    /* Usa el mismo clip-path que el frame */
    clip-path: url(#heroMaskPath);
  }
}

/* ==================== Animations matching Front Page ==================== */
@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.swiper-slide-active .hero-title,
.swiper-slide-active .hero-text {
  animation-play-state: running;
}

/* ==================== SECCIÓN CONTACTO & FOOTER OVERRIDES ==================== */
/* Fondo y colores de texto: Tailwind en template (bg-csf-header-bg, text-csf-*) */

#contacto .contact-card {
  border: 1px solid rgba(197, 140, 107, 0.2) !important;
  background: rgba(255, 255, 255, 0.9) !important;
  border-radius: 0.75rem;
  padding: 1rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  transition: all 300ms ease;
}

#contacto .contact-card:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Helper para acordeones cerrados en mobile */
@media(max-width: 767px) {
  .unified-accordion-toggle.accordion-closed {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  .unified-accordion-toggle i {
    color: var(--csf-primary) !important;
  }
}

/* ==================== ACCORDION ANIMATION ==================== */
@media(max-width: 767px) {
  .accordion-content {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    visibility: hidden;
  }
  .accordion-content.is-open {
    grid-template-rows: 1fr;
    opacity: 1;
    margin-top: 1rem;
    visibility: visible;
  }
  .accordion-inner {
    overflow: hidden;
    padding-bottom: 0.5rem;
  }
}
@media(min-width: 768px) {
  .accordion-content {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* ==================== UNIFIED ACCORDION TOGGLE ==================== */
.unified-accordion-toggle {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 1.5rem;
  margin-bottom: 0.9rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px dashed rgba(197, 140, 107, 0.45) !important;
  background: transparent !important;
  color: var(--csf-primary) !important;
  font-family: "Lato", sans-serif !important;
  font-weight: 800 !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  cursor: pointer;
  transition: opacity 0.3s ease;
}
.unified-accordion-toggle:hover {
  opacity: 0.7;
}
@media(min-width: 768px) {
  .unified-accordion-toggle.mobile-only {
    display: none !important;
  }
}

#contacto .contact-form-card {
  background: linear-gradient(135deg, var(--csf-heading) 0%, #6d5444 100%) !important;
  border-color: var(--csf-primary-light) !important;
}

/* Fix text alignment for form inputs */
#contacto .contact-form-card input,
#contacto .contact-form-card textarea,
#contacto .contact-form-card select {
  text-align: left !important;
}

#contacto .paragraph-divider {
  background: linear-gradient(
    to right,
    transparent,
    var(--csf-primary),
    transparent
  ) !important;
}

/* Footer Overrides - Specific to the main footer of the page */
footer.bg-gradient-to-b {
  background: linear-gradient(
    to bottom,
    var(--csf-heading) 0%,
    #6d5444 85%,
    #8b6e5b 100%
  ) !important;
}

/* Fix for nested footer within blockquote */
blockquote footer {
  background: transparent !important;
  color: var(--csf-highlight) !important;
  padding: 0 !important;
  margin-top: 0.5rem !important;
}

footer .text-global-accent {
  color: var(--csf-highlight) !important;
}

footer .border-global-accent {
  border-color: var(--csf-highlight) !important;
}

/* Scroll to Top - CSF Aesthetic */
/* Scroll-to-top: colores en Tailwind (footer args scroll_btn_classes) */

/* ==================== NEWS CARD ENTRY ANIMATION ==================== */
/* @keyframes definido en style.css — disponible globalmente */

/* ====== RESTORED MISSING HEADER & BUTTON STYLES ====== */
.header-bg-glass-csf {
  background-color: rgba(249, 245, 242, 0.85) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.csf-btn-primary {
  background-color: var(--csf-primary, #c58c6b) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 0.75rem !important;
  padding: 0.75rem 2rem !important;
  font-family: "Times New Roman", Times, serif !important;
  font-weight: bold !important;
  transition: all 0.3s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

.csf-btn-primary:hover {
  background-color: var(--csf-highlight, #d9a86c) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(197, 140, 107, 0.3) !important;
  color: #ffffff !important;
}

.text-csf-heading {
  color: #4a3b32 !important;
}

/* ==================== SHORT SCREEN FIXES (iPhone SE / Landscape) ==================== */
@media (max-width: 1024px) and (max-height: 680px) {
  .hero-organic .hero-layer-kid {
    height: 28vh !important;
  }
  .hero-organic .hero-layer-content {
    margin-top: -12vh !important;
    padding-top: 1.5vh !important;
    padding-bottom: 12vh !important; /* Restore the protective bottom padding */
  }
  .hero-organic .hero-title {
    font-size: clamp(1.4rem, 4.5vh, 2.2rem) !important;
    margin-bottom: 2vh !important;
  }
  .hero-organic .hero-text {
    font-size: clamp(0.85rem, 2vh, 1rem) !important;
    line-height: 1.3 !important;
    margin-bottom: 2vh !important;
  }
  .hero-organic .hero-btn {
    padding: 0.7rem 2rem !important;
    font-size: 0.85rem !important;
    margin-bottom: 5px !important;
  }
}