/* =========================================================================
   colegio.css — Colegio Privado José Tola Pasquel
   Concepto: plano cartesiano habitado. Retícula real de 32 px, contenido
   acotado y la cota roja como único gesto de color caliente.
   ========================================================================= */

.tema-colegio, .tema-portada {
  --azul: #0B4F8A;
  --celeste: #1E9CD7;
  --celeste-papel: #D9EEF9;
  --plomo: #5A6470;
  --plomo-trama: #E4E7EA;
  --rojo-cota: #D5312A;
  --tinta: #101820;
}

.tema-colegio { font-family: Archivo, system-ui, sans-serif; color: var(--tinta); background: #fff; }

.c-rotulo { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: var(--rojo-cota); margin-bottom: 10px; }
.c-rotulo--claro { color: #8FC6E8; }
.c-rotulo--tinta { color: #04283F; }
.c-h1 { font-size: clamp(30px, 4.6vw, 60px); line-height: .98; font-weight: 800; letter-spacing: -.03em; text-wrap: balance; margin-bottom: 22px; }
.c-h2 { font-size: clamp(26px, 3.4vw, 42px); font-weight: 700; letter-spacing: -.025em; max-width: 22ch; }
.c-h2--claro { color: #F2F7FB; margin-bottom: 40px; }
.c-h2--tinta { color: #04283F; margin-bottom: 10px; }
.c-lead { font-family: 'Source Serif 4', Georgia, serif; font-size: clamp(17px, 2vw, 19px); line-height: 1.55; color: #2B3640; max-width: 52ch; }
.c-lead--tinta { color: #04283F; max-width: 46ch; }
.c-parrafo { font-family: 'Source Serif 4', Georgia, serif; font-size: 17px; line-height: 1.6; color: #3B4650; max-width: 40ch; margin-top: 18px; }

/* --- Cabecera ----------------------------------------------------------- */
.c-cab {
  position: sticky; top: 0; z-index: 40; display: flex; align-items: center;
  justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 12px var(--aire); background: #fff; border-bottom: 1px solid #D3DAE0;
}
.c-cab__marca { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 15px; line-height: 1.15; letter-spacing: -.01em; }
.c-cab__marca img { width: 42px; height: 42px; object-fit: contain; }
.c-cab__marca small { display: block; font-family: var(--mono); font-weight: 400; font-size: 10px; letter-spacing: .14em; color: var(--plomo); }
.c-cab__nav { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; font-size: 14.5px; font-weight: 500; }

/* El acceso al seguimiento es el único elemento del menú con peso de bloque. */
.c-seg-btn {
  display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px;
  background: var(--azul); color: #fff; font-weight: 700; border-bottom: 3px solid var(--rojo-cota);
}
.c-seg-btn span { font-family: var(--mono); }

/* --- Hero: el plano ----------------------------------------------------- */
.c-hero {
  padding: clamp(36px, 6vw, 88px) var(--aire) clamp(36px, 5vw, 64px);
  background-color: #fff;
  background-image: linear-gradient(#EDF1F4 1px, transparent 1px), linear-gradient(90deg, #EDF1F4 1px, transparent 1px);
  background-size: 32px 32px;
}
.c-hero__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(24px, 4vw, 56px); align-items: center; }
.c-hero__texto { border-left: 2px solid var(--rojo-cota); padding-left: 20px; }
.c-hero__foto { position: relative; }
.c-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border-top: 1px solid #C7D0D7; margin-top: 26px; }
.c-datos > div { padding: 14px 16px; border-right: 1px solid #C7D0D7; }
.c-datos > div:first-child { padding-left: 0; }
.c-datos > div:last-child { border-right: 0; }
.c-datos dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; color: var(--plomo); }
.c-datos dd { margin-top: 5px; font-weight: 600; font-size: 15px; }

/* --- Niveles ------------------------------------------------------------ */
.c-niveles { padding: clamp(44px, 6vw, 84px) var(--aire); background: var(--azul); color: #F2F7FB; }
.c-niveles__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1px; background: rgba(255,255,255,.24); }
.c-niveles__grid article { background: var(--azul); padding: 28px 26px 30px; }
.c-nivel__icono { width: 34px; height: 34px; margin-bottom: 16px; fill: none; stroke: var(--celeste); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.c-nivel__grados { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: #8FC6E8; margin-bottom: 6px; }
.c-niveles__grid h3 { font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 16px; }
.c-nivel__texto { font-family: 'Source Serif 4', Georgia, serif; font-size: 17px; line-height: 1.55; color: #D6E9F5; margin-bottom: 20px; }
.c-nivel__lista { display: grid; gap: 9px; font-size: 14.5px; }
.c-nivel__lista li { display: flex; gap: 12px; }
.c-nivel__lista span { font-family: var(--mono); color: var(--celeste); }

/* --- Propuesta: enunciados numerados ------------------------------------ */
.c-propuesta { padding: clamp(44px, 6vw, 84px) var(--aire); }
.c-propuesta__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(24px, 4vw, 60px); }
.c-axiomas { border-top: 1px solid #C7D0D7; }
.c-axiomas li { display: grid; grid-template-columns: 64px 1fr; gap: 18px; padding: 22px 0; border-bottom: 1px solid #C7D0D7; }
.c-axiomas > li > span { font-family: var(--mono); font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--rojo-cota); opacity: .28; }
.c-axiomas h3 { font-size: 19px; font-weight: 700; margin-bottom: 6px; }
.c-axiomas p { font-family: 'Source Serif 4', Georgia, serif; font-size: 16.5px; line-height: 1.55; color: #3B4650; }

/* --- Franja del sistema de seguimiento ---------------------------------- */
.c-seguimiento {
  padding: clamp(36px, 5vw, 68px) var(--aire);
  background-color: var(--celeste);
  background-image: linear-gradient(rgba(255,255,255,.22) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.22) 1px, transparent 1px);
  background-size: 32px 32px; color: #04283F;
}
.c-seguimiento__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; align-items: center; }
.c-seg-cta {
  display: inline-flex; align-items: center; gap: 14px; padding: 20px 32px;
  background: #04283F; color: #fff; font-size: clamp(17px, 2.2vw, 20px); font-weight: 700;
  letter-spacing: -.015em; border-bottom: 5px solid var(--rojo-cota);
}
.c-seg-cta span { font-family: var(--mono); }
.c-seg-nota { margin-top: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; }

/* --- Galería ------------------------------------------------------------ */
.c-galeria { padding: clamp(44px, 6vw, 84px) var(--aire); }
.c-galeria .c-h2 { margin-bottom: 32px; }
.c-galeria__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }

/* --- Eventos ------------------------------------------------------------ */
.c-eventos { padding: clamp(44px, 6vw, 84px) var(--aire) clamp(52px, 7vw, 96px); background: #F3F6F8; border-top: 1px solid #C7D0D7; }
.c-eventos__cab { display: flex; align-items: end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
.c-eventos__lista { display: flex; flex-direction: column; gap: 1px; background: #C7D0D7; border: 1px solid #C7D0D7; }
.c-evento { background: #fff; display: grid; grid-template-columns: minmax(96px, 116px) 1fr; }
.c-evento[hidden] { display: none; }
.c-evento__fecha { padding: 22px 16px; background: var(--azul); color: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.c-evento__mes, .c-evento__anio { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: #8FC6E8; }
.c-evento__dia { font-size: 34px; font-weight: 800; line-height: 1; }
.c-evento__cuerpo { padding: 20px 22px; display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; }
.c-evento__texto-bloque { flex: 1 1 260px; display: flex; flex-direction: column; gap: 7px; }
.c-evento__foto { flex: 0 0 auto; width: 264px; max-width: 100%; }
.c-evento__foto figcaption { font-size: 10px; line-height: 1.4; }
.c-evento__linea { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.c-evento__linea h3 { font-size: 19.5px; font-weight: 700; letter-spacing: -.015em; }
.c-evento__meta { font-family: var(--mono); font-size: 11.5px; letter-spacing: .05em; color: var(--plomo); }
.c-evento__texto { font-family: 'Source Serif 4', Georgia, serif; font-size: 16.5px; line-height: 1.5; color: #3B4650; max-width: 68ch; }

/* Estado vacío: un plano sin puntos, no un ícono triste. */
.c-vacio {
  border: 1px solid #C7D0D7; background-color: #fff;
  background-image: linear-gradient(#EDF1F4 1px, transparent 1px), linear-gradient(90deg, #EDF1F4 1px, transparent 1px);
  background-size: 32px 32px; padding: clamp(32px, 6vw, 72px) 28px;
  display: grid; gap: 14px; justify-items: start; margin-top: 22px;
}
.c-vacio[hidden] { display: none; }
.c-vacio__cota { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: var(--rojo-cota); }
.c-vacio__titulo { font-size: clamp(21px, 3vw, 32px); font-weight: 700; letter-spacing: -.02em; max-width: 24ch; }
.c-vacio__texto { font-family: 'Source Serif 4', Georgia, serif; font-size: 17px; line-height: 1.55; color: #3B4650; max-width: 48ch; }

/* --- Portada: puerta del colegio ---------------------------------------- */
body.tema-portada { display: flex; flex-direction: column; min-height: 100vh; }
.portada { flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); grid-template-rows: 1fr; }
.portada__puerta {
  position: relative; z-index: 0; min-height: 78vh; padding: 48px var(--aire) 40px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 36px;
}
.portada__puerta--colegio {
  color: #F2F7FB; background-color: var(--azul);
  background-image: linear-gradient(rgba(255,255,255,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.10) 1px, transparent 1px);
  background-size: 32px 32px; font-family: Archivo, system-ui, sans-serif;
}
.portada__marca { display: flex; align-items: center; gap: 16px; }
.portada__marca img { object-fit: contain; }
.portada__cota { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: #9CCDEA; }
.portada__cota--oscura { color: #6E6A78; }
.portada__rotulo { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: #9CCDEA; margin-bottom: 14px; }
.portada__rotulo--oscuro { color: #6E6A78; }
.portada__titulo { font-size: clamp(36px, 5vw, 66px); line-height: .95; font-weight: 800; letter-spacing: -.025em; margin-bottom: 18px; }
.portada__bajada { font-family: 'Source Serif 4', Georgia, serif; font-size: 18px; line-height: 1.5; color: #D6E9F5; max-width: 32ch; margin-bottom: 28px; }
.portada__entrar { display: inline-flex; align-items: center; gap: 12px; padding: 15px 26px; font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
.portada__entrar--colegio { background: var(--celeste); color: #04283F; }
.portada__cuerpo { flex: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.portada__texto { flex: 1 1 260px; min-width: 0; align-self: flex-start; }
.portada__nino {
  flex: 0 0 auto; align-self: flex-end; margin-bottom: -40px;
  max-width: min(59%, 415px); max-height: 73vh; width: auto; height: auto; object-fit: contain; object-position: bottom;
}
.portada__puerta--colegio .portada__nino { max-width: min(61%, 430px); max-height: 74vh; }

/* Decoración de fondo: útiles escolares dibujados en línea, muy sutiles. */
.portada__decoracion { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.portada__icono { position: absolute; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.portada__puerta--colegio .portada__decoracion { color: #F2F7FB; opacity: .16; }
.portada__puerta--colegio .portada__icono--regla { width: 34%; max-width: 150px; top: 9%; left: 55%; transform: rotate(-9deg); }
.portada__puerta--colegio .portada__icono--lapiz { width: 9%; max-width: 40px; top: 8%; left: 79%; transform: rotate(18deg); }
.portada__puerta--colegio .portada__icono--cuaderno { width: 20%; max-width: 96px; top: 24%; left: 43%; transform: rotate(6deg); }

/* --- Informes: el formulario acotado ------------------------------------ */
.c-informes {
  padding: clamp(44px, 6vw, 84px) var(--aire);
  background-color: #fff;
  background-image: linear-gradient(#EDF1F4 1px, transparent 1px), linear-gradient(90deg, #EDF1F4 1px, transparent 1px);
  background-size: 32px 32px;
}
.c-informes__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(24px, 4vw, 60px); align-items: start; }
.c-informes__texto { border-left: 2px solid var(--rojo-cota); padding-left: 20px; }
.c-informes__datos { font-family: var(--mono); font-size: 12.5px; line-height: 1.9; color: #2B3640; }
.c-form { background: #fff; border: 1px solid #C7D0D7; padding: clamp(20px, 3vw, 30px); }
.c-form__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; margin-bottom: 18px; }
.c-form__pie { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 20px; }
.c-form__pie span { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--plomo); }
.c-form__btn {
  cursor: pointer; padding: 15px 26px; background: var(--azul); color: #fff;
  font-weight: 700; font-size: 16px; border: 0; border-bottom: 3px solid var(--rojo-cota);
}
.c-eventos__nota { font-family: 'Source Serif 4', Georgia, serif; font-size: 16.5px; line-height: 1.5; color: #3B4650; max-width: 54ch; margin-top: 12px; }
.c-eventos__intro { max-width: 60ch; }