/* =========================================================================
   jardin.css — Nido-Jardín Los Talentitos
   Concepto: mural de aula. Todo es papel recortado: bordes irregulares por
   clip-path, giro de 1-2°, sombra dura de papel levantado. Ni un radio
   uniforme, ni un degradado. Los cuatro colores del logo con jerarquía.
   ========================================================================= */

.tema-jardin, .tema-portada {
  --papel: #FFFBF2;
  --tinta-j: #23202B;
  --azul-cray: #2A44C4;
  --rojo-cray: #E23B2E;
  --verde-cray: #1E9E4A;
  --amarillo-cray: #F5C518;
  --papel-sombra: rgba(35,32,43,.18);
}

.tema-jardin { font-family: Karla, system-ui, sans-serif; color: var(--tinta-j); background: var(--papel); }

.j-rotulo { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: #6E6A78; margin-bottom: 10px; }
.j-rotulo--claro { color: #C3CCF7; }
.j-rotulo--ocre { color: #6B5A0E; }
.j-h1 { font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-size: clamp(32px, 5vw, 64px); line-height: .95; font-weight: 800; letter-spacing: -.035em; text-wrap: balance; margin-bottom: 24px; }
.j-h2 { font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-size: clamp(26px, 3.6vw, 44px); font-weight: 800; letter-spacing: -.03em; max-width: 20ch; }
.j-h2--claro { color: var(--papel); margin-bottom: 36px; }
.j-lead { font-size: clamp(17px, 2vw, 18.5px); line-height: 1.6; color: #3A3644; max-width: 46ch; margin-bottom: 28px; }
.j-lead--claro { color: var(--papel); margin-bottom: 0; }
.j-parrafo { font-size: 17px; line-height: 1.6; color: #3A3644; max-width: 42ch; margin: 16px 0 22px; }

/* Recorte de papel: el gesto firma de la marca. */
.recorte { display: inline-block; padding: 0 10px; }
.recorte--amarillo { background: var(--amarillo-cray); transform: rotate(-1.5deg); }
.recorte--azul { background: var(--azul-cray); color: var(--papel); transform: rotate(1deg); }

.j-btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px;
  font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 700; font-size: 17px;
  clip-path: polygon(0 7%, 100% 0, 99% 93%, 1% 100%);
}
.j-btn--rojo { background: var(--rojo-cray); color: var(--papel); }
.j-btn--azul { background: var(--azul-cray); color: var(--papel); padding: 10px 18px; }
.j-btn--blanco { background: var(--papel); color: var(--tinta-j); font-weight: 800; font-size: 19px; padding: 18px 28px; }
.j-btn--linea { border: 3px solid var(--tinta-j); clip-path: none; }
.j-btn--linea-claro { border: 3px solid var(--papel); clip-path: none; padding: 18px 28px; }

/* --- Cabecera ----------------------------------------------------------- */
.j-cab {
  position: sticky; top: 0; z-index: 40; display: flex; align-items: center;
  justify-content: space-between; gap: 18px; flex-wrap: wrap;
  padding: 10px var(--aire); background: var(--papel); border-bottom: 3px solid var(--tinta-j);
}
.j-cab__marca { display: flex; align-items: center; gap: 10px; font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 800; font-size: 17px; line-height: 1.1; letter-spacing: -.02em; }
.j-cab__marca img { width: 52px; height: 52px; object-fit: contain; }
.j-cab__marca small { display: block; font-family: var(--mono); font-weight: 400; font-size: 10px; letter-spacing: .14em; color: #6E6A78; }
.j-cab__nav { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; font-size: 15px; font-weight: 700; }

/* --- Hero --------------------------------------------------------------- */
.j-hero { padding: clamp(32px, 5vw, 72px) var(--aire); overflow: hidden; }
.j-hero__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(28px, 4vw, 56px); align-items: center; }
.j-hero__acciones { display: flex; gap: 12px; flex-wrap: wrap; }
.j-hero__foto { position: relative; }
.cinta { position: absolute; top: -12px; left: 50%; width: 92px; height: 26px; margin-left: -46px; background: rgba(245,197,24,.85); transform: rotate(-2deg); }

/* --- Actividades: mural de recortes ------------------------------------- */
.j-actividades {
  padding: clamp(40px, 6vw, 80px) var(--aire); background: var(--azul-cray); color: var(--papel);
  clip-path: polygon(0 14px, 6% 0, 14% 12px, 25% 2px, 38% 14px, 50% 1px, 63% 13px, 76% 2px, 88% 14px, 100% 3px, 100% 100%, 0 100%);
}
.j-actividades__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
.j-tarjeta { padding: 22px 20px 24px; box-shadow: 0 6px 0 rgba(0,0,0,.18); display: flex; flex-direction: column; gap: 10px; min-height: 190px; }
.j-tarjeta span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; }
.j-tarjeta h3 { font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }
.j-tarjeta p { font-size: 15.5px; line-height: 1.5; }
.j-tarjeta--amarillo { background: var(--amarillo-cray); color: var(--tinta-j); transform: rotate(-1.2deg); }
.j-tarjeta--papel { background: var(--papel); color: var(--tinta-j); transform: rotate(.9deg); }
.j-tarjeta--rojo { background: var(--rojo-cray); color: var(--papel); transform: rotate(-.6deg); }
.j-tarjeta--verde { background: var(--verde-cray); color: var(--papel); transform: rotate(1.4deg); }

/* --- Ambientes ---------------------------------------------------------- */
.j-ambientes { padding: clamp(40px, 6vw, 80px) var(--aire); }
.j-ambientes__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: clamp(24px, 4vw, 52px); align-items: start; }
.j-ambientes__lista li { display: grid; grid-template-columns: 14px 1fr; gap: 16px; align-items: baseline; padding: 16px 0; border-bottom: 2px dashed #D6CFC0; }
.j-ambientes__lista h3 { font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 3px; }
.j-ambientes__lista p { font-size: 15.5px; line-height: 1.5; color: #3A3644; }
.j-ambientes__fotos { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 20px; margin-top: clamp(32px, 5vw, 56px); }
.chip { width: 14px; height: 14px; display: block; }
.chip--amarillo { background: var(--amarillo-cray); }
.chip--rojo { background: var(--rojo-cray); }
.chip--verde { background: var(--verde-cray); }
.chip--azul { background: var(--azul-cray); }

/* --- Eventos ------------------------------------------------------------ */
.j-eventos { padding: clamp(40px, 6vw, 80px) var(--aire); background: var(--amarillo-cray); }
.j-eventos .j-rotulo { color: #6B5A0E; }
.j-eventos__cab { display: flex; align-items: end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
.j-eventos__lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 22px; }
.j-evento {
  background: #fff; border: 3px solid var(--tinta-j); padding: 20px 20px 22px;
  box-shadow: 0 7px 0 var(--papel-sombra); display: flex; flex-direction: column; gap: 10px;
}
.j-evento[hidden] { display: none; }
.j-evento[data-i="0"] { transform: rotate(-.8deg); }
.j-evento[data-i="1"] { transform: rotate(1.1deg); }
.j-evento[data-i="2"] { transform: rotate(-.4deg); }
.j-evento__fecha {
  display: inline-flex; align-self: flex-start; gap: 6px; padding: 6px 12px;
  background: var(--azul-cray); color: var(--papel);
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em;
}
.j-evento[data-estado="realizado"] .j-evento__fecha { background: #EFEAE0; color: #6E6A78; }
.j-evento__linea { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.j-evento__linea h3 { font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-size: 23px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.j-evento__meta { font-family: var(--mono); font-size: 11.5px; color: #6E6A78; }
.j-evento__texto { font-size: 16px; line-height: 1.5; color: #3A3644; }

/* Estado vacío: una hoja en blanco pegada al mural. */
.j-vacio {
  border: 3px solid var(--tinta-j); background: #fff; padding: clamp(28px, 5vw, 64px) 28px;
  display: grid; gap: 14px; justify-items: start; transform: rotate(-.6deg);
  box-shadow: 0 7px 0 var(--papel-sombra); margin-top: 22px;
}
.j-vacio[hidden] { display: none; }
.j-vacio__sello { background: var(--verde-cray); color: var(--papel); padding: 6px 12px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; }
.j-vacio__titulo { font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-size: clamp(21px, 3vw, 32px); font-weight: 800; letter-spacing: -.025em; max-width: 22ch; }
.j-vacio__texto { font-size: 17px; line-height: 1.55; color: #3A3644; max-width: 46ch; }

/* --- Visita ------------------------------------------------------------- */
.j-visita { padding: clamp(36px, 5vw, 68px) var(--aire); background: var(--verde-cray); color: var(--papel); }
.j-visita__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; align-items: center; }
.j-visita__acciones { display: flex; gap: 12px; flex-wrap: wrap; }

/* --- Portada: puerta del jardín ----------------------------------------- */
.portada__puerta--jardin { background: var(--papel); color: var(--tinta-j); overflow: hidden; font-family: Karla, system-ui, sans-serif; }
.portada__rasgado {
  position: absolute; inset: 0 auto 0 0; width: 14px; background: var(--azul-cray);
  clip-path: polygon(0 0,100% 0,55% 4%,100% 8%,55% 12%,100% 16%,55% 20%,100% 24%,55% 28%,100% 32%,55% 36%,100% 40%,55% 44%,100% 48%,55% 52%,100% 56%,55% 60%,100% 64%,55% 68%,100% 72%,55% 76%,100% 80%,55% 84%,100% 88%,55% 92%,100% 96%,55% 100%,0 100%);
}
.portada__puerta--jardin .portada__decoracion { color: var(--azul-cray); opacity: .15; }
.portada__puerta--jardin .portada__icono--regla { width: 30%; max-width: 130px; top: 12%; right: 8%; left: auto; transform: rotate(7deg); }
.portada__puerta--jardin .portada__icono--lapiz { width: 8%; max-width: 36px; top: 30%; right: 28%; left: auto; transform: rotate(-16deg); }
.portada__puerta--jardin .portada__icono--cuaderno { width: 18%; max-width: 88px; top: 6%; left: 46%; transform: rotate(-5deg); }
.portada__titulo--jardin { font-family: 'Bricolage Grotesque', system-ui, sans-serif; letter-spacing: -.03em; line-height: .9; }
.portada__bajada--jardin { font-family: Karla, system-ui, sans-serif; color: #3A3644; }
.portada__entrar--jardin { background: var(--rojo-cray); color: var(--papel); font-family: 'Bricolage Grotesque', system-ui, sans-serif; clip-path: polygon(0 6%, 100% 0, 99% 94%, 1% 100%); }

/* El colapso del menú móvil (.j-cab__nav / .c-cab__nav) y el ajuste de
   .c-evento en pantallas angostas viven en base.css: ese archivo carga en
   todas las páginas, y este no (colegio.php no incluye jardin.css). */
@media (max-width: 480px) {
  .portada__cuerpo { flex-direction: column; align-items: center; text-align: center; }
  .portada__texto { align-self: center; }
  .portada__puerta .portada__nino {
    align-self: center; margin: 24px 0 -40px; max-width: 60%; max-height: 34vh;
  }

  /* En una sola columna angosta, las posiciones de escritorio de la regla
     y el lápiz quedan casi encimadas: se reordenan con más separación. */
  .portada__puerta--colegio .portada__icono--cuaderno,
  .portada__puerta--jardin .portada__icono--cuaderno {
    top: 6%; left: 8%; right: auto; width: 20%; max-width: 64px; transform: rotate(-6deg);
  }
  .portada__puerta--colegio .portada__icono--regla,
  .portada__puerta--jardin .portada__icono--regla {
    top: 6%; right: 6%; left: auto; width: 30%; max-width: 104px; transform: rotate(8deg);
  }
  .portada__puerta--colegio .portada__icono--lapiz,
  .portada__puerta--jardin .portada__icono--lapiz {
    top: 32%; right: 12%; left: auto; width: 8%; max-width: 30px; transform: rotate(-14deg);
  }
}

/* --- Formulario del jardín: una hoja pegada sobre el verde --------------- */
.j-form {
  background: var(--papel); color: var(--tinta-j); border: 3px solid var(--tinta-j);
  box-shadow: 0 8px 0 rgba(35,32,43,.25); padding: clamp(20px, 3vw, 28px); transform: rotate(-.7deg);
}
.j-form__rotulo { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; color: #6E6A78; margin-bottom: 6px; }
.j-form__titulo { font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-size: 25px; font-weight: 800; letter-spacing: -.025em; margin-bottom: 6px; }
.j-form__texto { font-size: 15.5px; line-height: 1.5; color: #3A3644; margin-bottom: 18px; }
.j-form__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 16px; }
.j-form__btn {
  margin-top: 18px; cursor: pointer; padding: 15px 26px; background: var(--rojo-cray); color: var(--papel);
  font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 700; font-size: 17px; border: 0;
  clip-path: polygon(0 7%, 100% 0, 99% 93%, 1% 100%);
}
.j-eventos__nota { font-size: 16.5px; line-height: 1.55; color: #3A3644; max-width: 52ch; margin-top: 12px; }
.j-eventos__intro { max-width: 56ch; }
.j-visita__acciones { margin-top: 22px; }

.j-evento__foto { margin-bottom: 4px; }
.j-evento__foto figcaption { font-size: 10px; line-height: 1.4; color: #6E6A78; }
.j-evento__texto-bloque { display: flex; flex-direction: column; gap: 10px; }