/*
 * Escuela Infantil NSD — piezas propias.
 *
 * Todo lo común (colores, tipografía, cabecera, tarjetas, bandas, pie,
 * formularios) viene de nsd-base.css, igual que en el colegio y en el
 * campamento. Aquí solo lo que no tienen ellos, siempre con los tokens del
 * sistema.
 */

/* =========================================================
   PALETA PROPIA DE LA ESCUELA INFANTIL
   ---------------------------------------------------------
   Mismos nombres de token que el sistema, otros valores: así
   todos los componentes compartidos (botones, tarjetas, bandas,
   pie) se tiñen solos y no hace falta duplicar una sola regla.
   Ciruela cálida donde el colegio pone verde, ámbar donde pone
   oro, y una crema rosada de fondo. Comprobado a 4.5:1.
   ========================================================= */
:root {
  --brand-900: #3A0F22; --brand-800: #571733; --brand-700: #6E1F42; --brand-600: #8A2049;
  --brand-500: #A8325F; --brand-400: #C24B77; --brand-300: #D97BA0; --brand-200: #EBA8C1;
  --brand-100: #F9D9E4; --brand-50:  #FEF2F6;

  --gold-700: #7A4800; --gold-500: #E09400; --gold-400: #F5B32E; --gold-300: #FFD36E; --gold-100: #FFEFD0;

  /* El «verde» del sistema es el color interactivo: aquí, ciruela */
  --green-900: #4A1028; --green-800: #67183A; --green-700: #8A2049; --green-600: #A8325F;
  --green-500: #C24B77; --green-400: #D97BA0; --green-300: #EBA8C1; --green-200: #F6CEDD;
  --green-100: #FCE4EC; --green-50:  #FEF2F6;

  --yellow-700: #7A4800; --yellow-500: #E09400; --yellow-400: #F5B32E; --yellow-100: #FFF0CF;

  --ink-900: #2A1720; --ink-800: #3A2029; --ink-700: #4A2B34; --ink-600: #5E3B45;
  --ink-500: #6E4A55; --ink-400: #96727D; --ink-300: #B695A0; --ink-200: #D3B7C0;
  --ink-100: #EBD6DC; --ink-50:  #F8EDF1;

  --white: #FDF8F5; --surface: #FDF8F5; --surface-raised: #FFFFFF;
  --surface-sunken: #F7EEE8; --surface-subtle: #F7EEE8;
  --surface-overlay: rgba(253,248,245,.93);
  --border: #EBDCD4; --border-strong: #D8C0B4;

  --oscuro: #3A0F22; --sobre-oscuro: #E8C3D2; --sobre-oscuro-2: #EBD0DB; --sobre-oscuro-3: #F8E7EF;
  --halo-1: rgba(138,32,73,.55); --halo-2: rgba(245,179,46,.14);
  --halo-3: rgba(217,123,160,.22); --halo-4: rgba(245,179,46,.16);
  --acento-velo: rgba(245,179,46,.18); --acento-velo-suave: rgba(245,179,46,.12);
  --foco: rgba(168,50,95,.62);
  --oro-titular: #BE7500;
  --oro-fuerte: #9A5E00;

  --shadow-sm: 0 1px 3px rgba(74,16,40,.07), 0 4px 10px -4px rgba(74,16,40,.07);
  --shadow:    0 2px 6px rgba(74,16,40,.08), 0 12px 28px -8px rgba(74,16,40,.14);
  --shadow-lg: 0 4px 12px rgba(74,16,40,.09), 0 28px 56px -16px rgba(74,16,40,.20);
}

/* El mismo carácter de noche: ciruela muy oscuro en vez de verde */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink-900: #F6ECF0; --ink-800: #E5D5DC; --ink-700: #D2BEC7; --ink-600: #BCA5B0;
    --ink-500: #A68E9A; --ink-400: #8E7682; --ink-300: #75606B; --ink-200: #513F49;
    --ink-100: #35262E; --ink-50: #241820;
    --white: #1A1015; --surface: #1A1015; --surface-raised: #241820;
    --surface-sunken: #1F141A; --surface-subtle: #2B1D25;
    --surface-overlay: rgba(26,16,21,.9);
    --border: #392530; --border-strong: #4C3340;
    --green-900: #F6CEDD; --green-800: #EFB9CE; --green-700: #EBA8C1; --green-600: #E491B1;
    --green-500: #D97BA0; --green-400: #F0B9CE; --green-300: #F6CEDD; --green-200: #48222F;
    --green-100: #33161F; --green-50: #25111A;
    --yellow-700: #F5C977; --yellow-100: #3A2408;
    --sobre-oscuro: #E0BACB; --sobre-oscuro-2: #E6C8D6; --sobre-oscuro-3: #F3DEE8;
    --oro-titular: #FFD36E;
    --oro-fuerte: #FFD36E;
  }
}
:root[data-theme="dark"] {
  --ink-900: #F6ECF0; --ink-800: #E5D5DC; --ink-700: #D2BEC7; --ink-600: #BCA5B0;
  --ink-500: #A68E9A; --ink-400: #8E7682; --ink-300: #75606B; --ink-200: #513F49;
  --ink-100: #35262E; --ink-50: #241820;
  --white: #1A1015; --surface: #1A1015; --surface-raised: #241820;
  --surface-sunken: #1F141A; --surface-subtle: #2B1D25;
  --surface-overlay: rgba(26,16,21,.9);
  --border: #392530; --border-strong: #4C3340;
  --green-900: #F6CEDD; --green-800: #EFB9CE; --green-700: #EBA8C1; --green-600: #E491B1;
  --green-500: #D97BA0; --green-400: #F0B9CE; --green-300: #F6CEDD; --green-200: #48222F;
  --green-100: #33161F; --green-50: #25111A;
  --yellow-700: #F5C977; --yellow-100: #3A2408;
  --sobre-oscuro: #E0BACB; --sobre-oscuro-2: #E6C8D6; --sobre-oscuro-3: #F3DEE8;
  --oro-titular: #FFD36E;
  --oro-fuerte: #FFD36E;
}


/* Ficha de la portada. Sustituye a la foto mientras no haya fotos reales de
   la escuela: una imagen de banco no sería de este centro. */
.ficha { display: grid; place-items: center; }

/* Áreas de aprendizaje */
.areas { align-items: start; }
.areas .btn--link { padding: 0; min-height: 0; font-weight: 700; color: var(--green-700); }
.areas__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.areas__lista li {
  display: grid; grid-template-columns: 52px 1fr; gap: 18px; align-items: start;
  padding: 22px 24px; border-radius: var(--radius-lg);
  background: var(--surface-raised); border: 1px solid var(--ink-100);
}
.areas__n {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: var(--green-100); color: var(--green-700);
  font-family: var(--font-display); font-weight: 900; font-size: 1.4rem;
}
.areas__lista h3 { font-size: 1.15rem; margin-bottom: 4px; }
.areas__lista p { margin: 0; font-size: .94rem; }

/* Bilingüe: tarjetas en dos columnas junto al texto */
.bilingue__lista { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 540px) { .bilingue__lista { grid-template-columns: 1fr 1fr; } .bilingue__lista .service { padding: 16px; } }

/* Tarjeta que lleva a otra web */
.card--enlace { color: inherit; }
.card--enlace:hover { color: inherit; }
.card--enlace h3 { color: var(--ink-900); }

/* Pagos */
.becas { align-items: center; }
.pagos h3 { display: flex; align-items: center; gap: 10px; font-size: 1.2rem; }
.pagos h3 i { color: var(--green-700); }
.pagos li { font-size: .95rem; }

/* Reserva: formulario + columna de contacto */
.inscripcion { display: grid; grid-template-columns: 1.6fr 1fr; gap: 28px; align-items: start; margin-top: 36px; }
.inscripcion .form-card h3 { margin-bottom: 18px; }
.inscripcion__lado { padding: 28px; border-radius: var(--radius-lg); background: var(--surface-sunken); border: 1px solid var(--border); }
.inscripcion__lado h3 { font-size: 1.2rem; margin-bottom: 18px; }
@media (max-width: 900px) { .inscripcion { grid-template-columns: 1fr; } }

/* La tarjeta flotante de abajo va por debajo de la ficha, no encima de sus datos */
.ficha .float-card--1 { bottom: -28px; }

/* Distintivo de la declaración de accesibilidad */
.access-badge {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px;
  padding: 8px 14px; border-radius: 999px; font-weight: 700; font-size: .9rem;
  background: var(--green-100); color: var(--green-900);
}

/* Zona pulsable del enlace de áreas (medía 15 px de alto) */
.areas .btn--link { padding-block: 12px; margin-block: -12px; }

/* Que el formulario y la columna de contacto se estrechen en móviles de 320 px */
.inscripcion > * { min-width: 0; }
@media (max-width: 380px) { .inscripcion .form-card, .inscripcion__lado { padding: 20px 16px; } }


/* Huecos de foto con color: mientras no hay fotografías, cada rincón
   de la escuela tiene su tono, y al pasar de uno a otro se nota. */
.hueco[class*="hueco--color-"] { border-style: solid; border-color: transparent; color: var(--ink-800); }
.hueco[class*="hueco--color-"] strong { color: var(--ink-900); font-size: 1.25rem; }
.hueco[class*="hueco--color-"] span { max-width: 38ch; font-size: .92rem; }
.hueco[class*="hueco--color-"] i { font-size: 2.2rem; }
.hueco.hueco--color-1 { background: linear-gradient(140deg, #FFE3EC, #FFF3F6); }
.hueco.hueco--color-2 { background: linear-gradient(140deg, #FFEBD6, #FFF7EC); }
.hueco.hueco--color-3 { background: linear-gradient(140deg, #DFF3E6, #F1FAF3); }
.hueco.hueco--color-4 { background: linear-gradient(140deg, #E5EAFB, #F3F6FE); }
.hueco.hueco--color-5 { background: linear-gradient(140deg, #FBE7F7, #FDF4FB); }
.hueco.hueco--color-6 { background: linear-gradient(140deg, #E2F1F6, #F2F9FB); }
.hueco.hueco--color-1 i { color: #A8325F; }
.hueco.hueco--color-2 i { color: #A85E00; }
.hueco.hueco--color-3 i { color: #1F7A46; }
.hueco.hueco--color-4 i { color: #3A57A8; }
.hueco.hueco--color-5 i { color: #8E2E8E; }
.hueco.hueco--color-6 i { color: #17697E; }
.rotafotos__nota { margin: 14px 0 0; font-size: .84rem; color: var(--ink-500); text-align: center; }


/* El recuadro de rincones, detrás de la ficha de la portada. La ficha
   lleva su propio velo para que el texto blanco siga leyéndose. */
/* Doble clase a propósito: nsd-apple.css se carga después y su
   .rotafotos lleva position: relative. */
.ficha__fondo.rotafotos {
  position: absolute; inset: 0; z-index: 0; border-radius: var(--radius-xl);
  box-shadow: none; background: var(--brand-800);
}
.ficha__fondo .hueco { height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; align-content: start; padding: 34px 30px 0; justify-items: start; text-align: left; }
.ficha__fondo .hueco::after { display: none; }
.ficha__fondo .hueco i { font-size: 1.5rem; color: rgba(255,255,255,.8); }
.ficha__fondo .hueco strong { font-size: 1rem; color: #fff; }
.ficha__fondo .rotafotos__mandos { display: none; }
/* Detrás de la ficha los tonos van oscuros: así el rincón se ve y el
   texto blanco de encima sigue pasando el 4.5:1. */
.ficha__fondo .hueco.hueco--color-1 { background: linear-gradient(150deg, #5B1030, #8A2049); }
.ficha__fondo .hueco.hueco--color-2 { background: linear-gradient(150deg, #5A3200, #8A5200); }
.ficha__fondo .hueco.hueco--color-3 { background: linear-gradient(150deg, #10402A, #1F7A46); }
.ficha__fondo .hueco.hueco--color-4 { background: linear-gradient(150deg, #1C2A5B, #3A57A8); }
.ficha__fondo .hueco.hueco--color-5 { background: linear-gradient(150deg, #4A1250, #8E2E8E); }
.ficha__fondo .hueco.hueco--color-6 { background: linear-gradient(150deg, #0D3945, #17697E); }

/* =========================================================
   TITULAR DE LA PORTADA
   ---------------------------------------------------------
   El degradado se mantiene en ciruela más de medio recorrido y
   solo se calienta al final, y las letras llevan un filo del
   mismo ciruela: en claro el tramo dorado se quedaba flojo
   sobre la crema.
   ========================================================= */
.hero h1 .text-gradient {
  background-image: linear-gradient(112deg, var(--green-700) 0%, var(--green-700) 52%, var(--oro-fuerte) 100%);
  -webkit-text-stroke: .7px var(--green-700);
  paint-order: stroke fill;
}

/* Procedencia de las fotos de la portada. Debajo de la tarjeta para que
   no la tapen las tarjetas flotantes. */
.hero__credito {
  max-width: 520px; margin: 40px 0 0 auto; padding: 0 2px;
  font-size: .76rem; line-height: 1.55; color: var(--ink-500); text-align: right;
}
@media (max-width: 980px) { .hero__credito { margin: 26px auto 0; text-align: center; } }