/* ==========================================================================
   FUNDACIÓN PUNTO 37 — tema de las páginas interiores
   --------------------------------------------------------------------------
   Eventos, Contacto y Documentos legales no tienen mesa de trabajo en el .ai:
   el arte aprobado sólo cubre Inicio y Nosotros. Para no inventar un lenguaje
   nuevo, todo lo de aquí se arma con las MISMAS piezas del arte, ya presentes
   en estilo.css:

     · bandas de color plano con grano y borde de nube (--grano, .nube)
     · máscaras de nube para fotos y chips (--nube-foto, --nube-chip)
     · tarjetas de esquina redonda de 26px con contorno a trazos corrido
       (.marco-punteado)
     · Oliviar Sans para todo y Goodkids sólo en el remate de un titular
     · sombras SÓLIDAS desplazadas, nunca difuminadas

   Es decir: no es un tema nuevo, es el mismo tema extendido. Este archivo se
   carga DESPUÉS de estilo.css y sólo añade componentes.
   ========================================================================== */

/* La barra de redes va en NEGRO en todas las páginas interiores que cargan
   este archivo (Contacto, Dona, Eventos, Legal, Tienda, Voluntarios) —
   pedido explícito de Isaías. Inicio (index.html) NO carga paginas.css, así
   que se queda sola en --rojo-barra, tal como debe. Único lugar donde vive
   esta regla: eventos.css/voluntarios.css/tienda.css antes la repetían cada
   uno por su cuenta — se centraliza aquí para no repetirla. */
.social-top{ background:#000 }

/* --- 1. CABECERA DE PÁGINA INTERIOR --------------------------------------
   Equivale al hero de Inicio pero en una banda baja: mismo fondo de color con
   grano, mismas nubes de esquina y el mismo remate de titular en Goodkids. */
.cabecera-int{
  position:relative; overflow:hidden; color:#fff;
  margin-top:calc(-1 * var(--nav-alto) - 26px);
  padding:calc(var(--nav-alto) + 74px) 0 84px;
}
.cabecera-int::before{
  content:""; position:absolute; inset:0; background-image:var(--grano);
  opacity:.3; mix-blend-mode:overlay; pointer-events:none;
}
.cabecera-int .env{position:relative; z-index:2}
/* La nube de esquina genérica (.nube-esquina .ne-izq de estilo.css) es un
   <svg><use href="#nube-suelta"> — una silueta lisa, sin el trazo de lápiz
   que el resto del sitio ya usa. Inicio y Tienda ya la reemplazan por el
   recorte real del .ai (img/arte/nube-hero.webp, ver hero.css/tienda.css);
   aquí se reusa idéntico patrón para las cuatro páginas interiores
   (Eventos, Contacto, Voluntarios, Legal) en vez de dejar la única nube sin
   trazo del sitio. Sólo la esquina izquierda: la derecha no la pidió nadie
   y estas cabeceras son más bajas que un hero completo, así que una sola
   nube grande ya sostiene la esquina sin necesitar la segunda.

   img/arte/nube-hero.webp traía un tinte rojo/rosado horneado en el
   trazo — invisible sobre la foto del hero de Inicio, pero muy visible
   contra las bandas de color plano de estas cabeceras y, se confirmó
   después, también en Tienda. Verificado contra el .ai real (DISENOWEB_
   TIENDA, DISENOWEB_INICIO): la nube del diseño aprobado es un relleno
   BLANCO SÓLIDO, sin ninguna línea de lápiz visible — lo que se veía como
   "trazo doble" era ese tinte de fondo mal exportado, no un trazo real que
   hubiera que preservar. Se corrigió el archivo original a blanco puro; el
   fix beneficia a Inicio y Tienda automáticamente, sin tocar hero.css ni
   tienda.css. */
.cabecera-int .nube-esquina.ne-izq{
  aspect-ratio:686 / 342;
  background:url('img/arte/nube-hero.webp') left top / 100% 100% no-repeat;
}
.cabecera-int .nube-esquina.ne-izq svg{ display:none }
.ci-azul   {background:var(--azul)}
.ci-morado {background:var(--morado-hondo)}
.ci-verde  {background:var(--verde)}

/* ==========================================================================
   BANNER NUEVO DE CONTACTO (2026-08-19) — pieza aplanada única del cliente
   --------------------------------------------------------------------------
   .ci-verde es exclusivo de contacto.html (verificado, no se reusa en otra
   página), así que estas reglas van scoped a esa clase sin riesgo de tocar
   Nosotros/Donar (.ci-azul/.ci-morado), que conservan su banda de color
   plana de siempre. Mismo patrón que .hero-inicio/.eventos-hero: la foto
   nueva ya trae "Toda ayuda empieza con un mensaje" horneado, así que el
   <h1>/<p> reales (dentro de .env) se ocultan por CSS (.oculto, ya definido
   en estilo.css) en vez de borrarse, y las piezas decorativas viejas
   (garabatos de cuento, sello de marca, festón de nube) se apagan con
   display:none porque la foto ya trae su propio cierre visual. */
.contacto-hero{
  position:relative; overflow:hidden; line-height:0;
  margin-top:calc(-1 * var(--nav-alto));
  background:transparent;
}
@media (min-width:901px){
  .contacto-hero{ margin-top:calc(-1 * var(--nav-alto) - 8.5px); }
}
.cabecera-contacto-img,
.contacto-hero img{
  display:block; width:100%; height:auto;
  position:relative; z-index:1;
}
.cabecera-int h1{font-size:clamp(34px,4.2vw,58px); font-weight:900; max-width:18ch}
.cabecera-int h1 .mano{display:block; font-size:1.9em; margin-top:.02em; color:#fff}
.ci-verde h1 .mano{color:var(--negro)}
.cabecera-int .bajada{
  margin-top:18px; max-width:56ch; font-weight:300; font-size:18px;
}
/* Modificador de una sola página (voluntarios.html): centra el título y la
   bajada dentro de .env, que por defecto sólo limita el ancho pero no
   alinea nada (el texto cae a la izquierda porque ésa es la alineación
   natural del bloque, no una regla puesta a propósito). max-width:56ch de
   .bajada se hereda igual; margin-inline:auto es lo que lo centra como
   bloque una vez que el texto ya no tira hacia la izquierda. */
.ci-centrado .env{text-align:center}
.ci-centrado h1{margin-inline:auto}
.ci-centrado .bajada{margin-inline:auto}
/* Garabatos de cuento del banner: solo se muestran en móvil (ver @media 600).
   Reusan el mismo sheet keyed del hero de Nosotros como textura blanca tenue
   sobre el color de la banda (azul en eventos, verde en contacto), con el
   título siempre por encima. */
.ci-cuento{display:none}
@media (max-width:600px){
  .ci-cuento{
    display:block; position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none;
  }
  .ci-cuento img{
    position:absolute; top:0; left:50%; transform:translateX(-50%);
    width:132%; max-width:none; height:auto;
    opacity:.1;   /* textura muy tenue, sin tapar el título */
  }
  .cabecera-int .env{z-index:2}   /* el título queda sobre los garabatos */
}

/* --- 2. BLOQUE DE SECCIÓN ------------------------------------------------- */
.bloque{padding:80px 0}
.bloque--gris{background:var(--gris-banda); position:relative}
.bloque h2{font-size:clamp(26px,3vw,38px); margin-bottom:10px; text-align:center}
.bloque .intro{max-width:60ch; font-weight:300; margin-bottom:34px; margin-inline:auto; text-align:center}

/* --- 3. TARJETA GENÉRICA -------------------------------------------------
   Mismo radio y mismo peso de las tiles de programas del arte. */
.ficha{
  background:#fff; border-radius:26px; padding:32px 30px;
  box-shadow:0 8px 0 rgba(0,0,0,.10);
  display:grid; gap:10px;
}
.ficha h3{font-size:22px; line-height:1.25}
.ficha p{font-size:16px; font-weight:300; line-height:1.55}

/* --- 4. CALENDARIO DE EVENTOS --------------------------------------------
   El cliente pidió una vista de calendario "amigable" para los próximos
   eventos, con el mismo nivel de terminación que el calendario del panel
   administrativo pero sin requerir autenticación ni permisos de ningún tipo.
   El contenedor principal (#cal-eventos) ya no se oculta cuando no hay fecha
   de "Próximos eventos": por eso ocupa un ancho de componente principal
   (comparar con .form) y, en pantallas anchas, se parte en DOS columnas
   —calendario a la izquierda, detalle del día a la derecha, mismo patrón
   que cualquier app de calendario real— en vez de una sola columna
   angosta rodeada de blanco. */
.cal-eventos{
  /* Sin max-width propio: llena el ancho real de la página (.env, tope
     --ancho:1240px de estilo.css) en vez de imponer un tope menor que
     dejaba espacio vacío a los lados dentro del propio contenedor. */
  margin:0 auto 40px;
  background:#fff; border-radius:32px; padding:40px 44px 46px;
  box-shadow:none;
}
.cal-eventos-layout{display:grid; grid-template-columns:1.15fr 1fr; gap:48px; align-items:start}
.cal-eventos-cabecera{display:flex; align-items:center; justify-content:space-between; margin-bottom:26px}
.cal-eventos-cabecera b{font-size:26px; text-transform:capitalize}
.cal-eventos-nav{
  width:44px; height:44px; border-radius:50%; border:2px solid var(--negro);
  display:grid; place-items:center; font-size:20px; font-weight:900; line-height:1;
  background:#fff; color:var(--negro); transition:background .2s ease, transform .15s ease;
}
.cal-eventos-nav:hover{background:var(--gris-banda); transform:translateY(-1px)}
.cal-eventos-semana{display:grid; grid-template-columns:repeat(7,1fr); margin-bottom:10px}
.cal-eventos-semana span{
  text-align:center; font-size:13px; font-weight:900; text-transform:uppercase; color:#999;
}
.cal-eventos-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:8px}
.cal-eventos-dia{
  aspect-ratio:1; border-radius:14px; border:2px solid transparent;
  display:grid; place-content:center; font-size:17px; font-weight:700; color:var(--negro);
}
button.cal-eventos-dia{cursor:pointer; font-family:inherit; transition:transform .15s ease, background .15s ease}
button.cal-eventos-dia:hover{border-color:var(--negro); transform:translateY(-2px)}
.cal-eventos-dia--hoy{border-color:var(--negro)}
/* Mismo rojo que usaba .chip-fecha en el diseño anterior: es el color que el
   sitio ya asocia con "aquí hay algo que ver". */
.cal-eventos-dia--evento{background:var(--rojo); color:#fff; font-weight:900}
.cal-eventos-dia--evento:hover{background:#E33500; border-color:transparent}
/* El día que se está mostrando ahora mismo en el panel de al lado, además
   de rojo (tiene evento) lleva un anillo morado — necesario porque puede
   haber varios días rojos en el mismo mes y hay que distinguir cuál está
   abierto. */
.cal-eventos-dia--activo{outline:3px solid var(--morado-hondo); outline-offset:2px}

/* Panel de detalle: lo que hay el día seleccionado. Arranca mostrando el
   próximo evento por defecto (lo decide eventos-calendario.js), así que el
   visitante ve algo útil sin tener que hacer clic primero. En pantallas
   anchas es la columna derecha (borde punteado vertical); en angostas cae
   debajo del calendario (el media query lo convierte a horizontal). */
.cal-eventos-detalle{
  min-height:340px; padding-left:40px; border-left:2px dashed #E5E5E5;
  display:flex; flex-direction:column; gap:14px;
}
.cal-eventos-detalle .etiqueta{
  display:block; font-size:13px; font-weight:900; text-transform:uppercase;
  letter-spacing:.08em; color:#999; margin-bottom:2px;
}
/* Mismo aviso honesto que antes vivía en .pendiente aparte: ahora vive
   DENTRO del calendario (que ya nunca se oculta), como el estado por
   defecto del panel de detalle mientras no haya un evento que mostrar. */
.cal-eventos-detalle .vacio{font-size:15px; font-weight:300; line-height:1.65; color:#555; margin:0}
.cal-eventos-detalle .vacio b{font-weight:900; color:#B8860B}
.cal-eventos-detalle .vacio a{color:var(--azul); font-weight:700}

.cal-evento{
  display:flex; gap:18px; align-items:flex-start;
  background:#FAFAFA; border-radius:22px; padding:20px 22px;
}
.cal-evento + .cal-evento{margin-top:14px}
.cal-evento .foto{
  flex:none; width:80px; height:80px; border-radius:16px; overflow:hidden; background:var(--azul);
}
.cal-evento .foto img{width:100%; height:100%; object-fit:cover}
.cal-evento .cuerpo{display:grid; gap:6px; min-width:0}
.cal-evento h3{font-size:19px; line-height:1.2}
.cal-evento .lugar{font-size:13px; font-weight:900; letter-spacing:.04em; text-transform:uppercase; color:var(--morado-hondo)}

/* Responsive del calendario: a <=900px colapsa a una columna (layout vertical) */
@media (max-width:900px){
  .cal-eventos{max-width:640px; padding:34px 32px 36px}
  .cal-eventos-layout{grid-template-columns:1fr; gap:0}
  .cal-eventos-detalle{
    border-left:0; border-top:2px dashed #E5E5E5;
    padding-left:0; padding-top:28px; margin-top:28px; min-height:0;
  }
}
@media (max-width:600px){
  .cal-eventos{padding:24px 18px 26px}
  .cal-eventos-cabecera b{font-size:18px}
  .cal-eventos-dia{font-size:13px}
}

/* --- 5. FORMULARIOS ------------------------------------------------------
   Campos con el mismo radio y la misma sombra sólida que el resto de la
   marca. El contenedor .form se centra solo en la columna. */
.form{
  display:grid; gap:22px; max-width:720px; margin:0 auto;
  background:#fff; border-radius:26px; padding:40px 38px;
  box-shadow:0 8px 32px rgba(0,0,0,.06);
}
.form .par{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.campo{display:grid; gap:8px}
.campo label{font-size:14px; font-weight:900; letter-spacing:.03em; color:var(--negro, #141414)}
.campo input,.campo textarea,.campo select{
  font:inherit; font-size:16px; font-weight:300;
  border:2px solid #E2E2E2; border-radius:14px;
  padding:14px 18px; background:#FAFAFA; color:var(--negro);
  width:100%; min-width:0;
  transition:border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.campo input:hover,.campo textarea:hover,.campo select:hover{
  border-color:#ccc; background:#fff;
}
.campo textarea{min-height:140px; resize:vertical}
.campo input:focus,.campo textarea:focus,.campo select:focus{
  outline:none; border-color:var(--azul); background:#fff;
  box-shadow:0 0 0 4px rgba(0,172,249,.15), 0 2px 8px rgba(0,172,249,.08);
}
.campo .ayuda{font-size:13px; font-weight:300; color:#888}
.consentimiento{
  display:flex; gap:12px; align-items:flex-start; font-size:14px; font-weight:300;
  padding:16px 18px; background:#F8F6FF; border-radius:14px;
}
.consentimiento input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--morado-hondo)}

/* --- 6. DATOS DE CONTACTO ------------------------------------------------- */
.contacto-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:start}
.contacto-grid .botones .btn,
.btn-wa-verde{
  background:#25D366;
  color:#fff !important;
  border:none;
  border-radius:100px;
  padding:14px 28px;
  font-weight:900;
  display:inline-flex;
  align-items:center;
  gap:10px;
  box-shadow:0 6px 0 #1b9c4b;
  transition:background .2s ease, transform .15s ease, box-shadow .15s ease;
}
.contacto-grid .botones .btn svg,
.btn-wa-verde svg{
  width:20px; height:20px; fill:#fff !important; flex:none;
}
.contacto-grid .botones .btn:hover,
.btn-wa-verde:hover{
  background:#20ba5a;
  transform:translateY(-2px);
  box-shadow:0 8px 0 #1b9c4b;
}
.sedes{display:grid; gap:18px}
.sede-ficha{
  border-radius:22px; padding:22px 24px; color:#fff;
  display:grid; gap:4px;
}
.sede-ficha b{font-size:18px; font-weight:900; letter-spacing:.04em; order:1}
.sede-ficha .etiqueta{
  font-size:12px; font-weight:900; letter-spacing:.1em; text-transform:uppercase;
  opacity:.9; order:2;
}
.sede-ficha span:not(.etiqueta){
  font-size:15px; font-weight:300; order:3;
}
.s-principal{background:var(--verde); color:var(--negro)}
.s-principal b{color:var(--negro)}
.s-acopio{background:#DE0000; color:#fff}
.s-acopio2{background:#EEA900; color:var(--negro)}
.s-acopio2 b{color:var(--negro)}
.lista-contacto{list-style:none; margin:26px 0 0; padding:0; display:grid; gap:14px}
.lista-contacto li{display:flex; gap:12px; align-items:center; font-size:17px}
.lista-contacto svg{width:22px;height:22px;fill:var(--rojo);flex:none}

/* --- 7. DOCUMENTOS LEGALES ----------------------------------------------- */
.tabla-legal{
  width:100%; border-collapse:collapse; background:#fff;
  border-radius:22px; overflow:hidden; box-shadow:0 8px 0 rgba(0,0,0,.10);
}
.tabla-legal th,.tabla-legal td{
  text-align:left; padding:16px 22px; font-size:16px;
  border-bottom:1px solid #EDEDED; vertical-align:top;
}
.tabla-legal tr:last-child th,.tabla-legal tr:last-child td{border-bottom:0}
.tabla-legal th{font-weight:900; width:38%; white-space:nowrap}
.tabla-legal td{font-weight:300}
.tabla-legal caption{text-align:left; font-size:14px; font-weight:300; padding-bottom:12px; color:#4a4a4a}

.rejilla-docs{display:grid; grid-template-columns:repeat(2,1fr); gap:26px}
.doc{
  display:flex; gap:16px; align-items:flex-start;
  background:#fff; border-radius:22px; padding:24px 26px;
  box-shadow:0 8px 0 rgba(0,0,0,.10);
}
.doc .marca-doc{
  flex:none; width:46px;height:46px; border-radius:14px;
  display:grid;place-items:center; background:var(--azul); color:#fff;
}
.doc .marca-doc svg{width:22px;height:22px;fill:currentColor}
.doc h3{font-size:18px; margin-bottom:5px}
.doc p{font-size:15px; line-height:1.45; font-weight:300; margin:0}

/* En legal.html .doc vive en .rejilla-docs (2 columnas), así que cada uno
   ya queda a la mitad del ancho. En eventos.html "Ver los álbumes de fotos"
   es el ÚNICO .doc de la sección, suelto dentro de .env — sin este tope se
   estira a los 1240px completos del contenedor con el ícono y dos líneas de
   texto pegados a la izquierda y un vacío enorme a la derecha de la propia
   tarjeta. Se le pone un ancho de tarjeta razonable y se centra. */
#archivo .doc{max-width:680px; margin:0 auto}

/* Aviso honesto de "todavía no lo tenemos". Se usa donde el propio cliente
   dijo que el material llega después (las políticas y el certificado de
   existencia), para no fingir enlaces que no llevan a ninguna parte. */
.pendiente{
  border-radius:22px; padding:22px 26px 22px 56px;
  background:linear-gradient(135deg, #FFF9ED, #FFF6E0); border:2px solid #F5D78E;
  font-size:15.5px; font-weight:300; line-height:1.5;
  position:relative;
  box-shadow:0 4px 16px rgba(245,175,55,.08);
  max-width:720px; margin-inline:auto;
}
.pendiente::before{
  content:"⏳"; position:absolute; left:20px; top:22px; font-size:20px;
}
.pendiente b{font-weight:900; color:#B8860B}

/* --- 8. RESPONSIVE ------------------------------------------------------- */
@media (max-width:900px){
  .contacto-grid{grid-template-columns:1fr; gap:40px}
  .rejilla-docs{grid-template-columns:1fr}
  .cabecera-int{padding-bottom:64px}
}
@media (max-width:600px){
  .bloque{padding:58px 0}
  .form .par{grid-template-columns:1fr}
  .tabla-legal th,.tabla-legal td{display:block; width:auto; padding:12px 20px}
  .tabla-legal th{padding-bottom:2px; border-bottom:0}
  .cabecera-int h1{font-size:32px}
}

/* --- 9. AÑADIDO PARA legal.html ------------------------------------------
   Al montar la página de documentos faltaban unas piezas que la hoja no traía.
   Se añaden al final para no tocar nada de lo ya aprobado, y se resuelven con
   los mismos recursos del arte: la etiqueta de estado en el crema del aviso
   .pendiente, sombras sólidas y el ritmo vertical entre tarjetas. Nada de
   lenguaje nuevo. */

/* Aquí vivía .lista-objetivos, la enumeración con el numeral en chip verde.
   Se usaba en una sola parte —los "objetivos" de legal.html— y ese bloque se
   retiró por no estar respaldado por el material del cliente. Sin ningún uso en
   el sitio, la regla se retira también: hoja muerta que nadie puede verificar
   contra el arte. Si el objeto social llega redactado y hay que numerar sus
   objetivos, se recupera de este mismo historial. */

/* Estado del documento. Se ve distinto a un botón A PROPÓSITO: es una
   etiqueta, no un enlace, y nadie debería intentar hacerle clic. */
.doc .estado{
  display:inline-block; margin-top:12px;
  font-size:12px; font-weight:900; letter-spacing:.08em; text-transform:uppercase;
  padding:6px 13px; border-radius:999px;
  background:#FFF6E0; color:var(--negro);
  box-shadow:0 0 0 2px var(--naranja) inset;
}

/* El overflow:hidden que redondea las esquinas de .tabla-legal también recorta
   el <caption>: Chrome lo pinta dentro del área de clip y el arco de la esquina
   (radio 22px) se come el primer glifo, así que "Identificación" se leía
   "dentificación". Con una sangría del tamaño del radio el texto arranca fuera
   del arco y, de paso, queda alineado con el de las celdas (padding 22px). */
.tabla-legal caption{padding-left:24px}

/* Ritmo vertical de la página legal: la .ficha trae margin:0 en sus párrafos,
   así que la separación entre tarjetas y bloques se declara aquí. */
.nota-legal{margin-top:26px; font-weight:300; max-width:60ch}
.bloque .ficha + .ficha{margin-top:26px}
.pendiente + .rejilla-docs{margin-top:30px}
/* El aviso también puede ir seguido de una tarjeta suelta, no sólo de la
   rejilla de documentos: mismo respiro en los dos casos. */
.pendiente + .ficha{margin-top:30px}
.ficha .botones{margin:20px 0 14px}
.ficha .enlace-sub{text-decoration:underline}

/* --- 10. AÑADIDO PARA eventos.html ---------------------------------------
   El ritmo vertical de la página legal apila las .ficha una debajo de otra y
   por eso les pone margen superior. En eventos.html las fichas de las líneas
   de trabajo van dentro de una .rejilla, y ahí ese margen descuadra la fila:
   la primera tarjeta se queda arriba y todas las demás bajan 26px, así que la
   fila queda con los cantos superiores desalineados. Dentro de una rejilla la
   separación ya la pone el gap, de modo que el margen sobra. */
.rejilla .ficha + .ficha{margin-top:0}

/* --- 11. AÑADIDO PARA contacto.html --------------------------------------
   Contacto traía dos separaciones puestas con style="" en el marcado. En una
   hoja donde todo el ritmo vertical vive en el CSS eso es una fuga: se
   declaran aquí, igual que los apartados 9 y 10, y el HTML queda sin estilos
   sueltos. En eventos y legal al aviso .pendiente le sigue una rejilla, que ya
   trae su propio margen; aquí le sigue un formulario y hay que ponérselo. */
.pendiente + .form{margin-top:26px}
.contacto-grid .botones{display:flex; gap:16px; flex-wrap:wrap; margin-top:26px}

/* Contraste sobre el verde de marca. Con texto blanco, #70CC03 se queda en
   2,0:1 —ilegible para cualquiera con la vista cansada y muy por debajo del
   mínimo—; con texto negro sube a 10,3:1. No es un color nuevo ni una
   excepción inventada: es exactamente la decisión que el propio tema ya toma
   en .ci-verde h1 .mano, extendida al resto del bloque. El azul y el morado
   se quedan en blanco, como los tiles del arte. Las nubes de esquina no se
   ven afectadas: .nube-esquina fija su color por su cuenta. */
.ci-verde{color:var(--negro)}
.s-principal{color:var(--negro)}