/* Casa de Acogida — v2.
   Escrita de móvil hacia arriba: lo de aquí es lo que ve un teléfono, y las
   media queries solo AÑADEN cuando hay sitio. Al revés acaba siempre igual, con
   el móvil heredando medidas pensadas para una pantalla de portátil. */

:root{
  --sol:#f7b32b; --sol-claro:#fff2d2;
  --coral:#e9644a; --coral-claro:#ffe6e0;
  --hoja:#4f8a4a;  --hoja-claro:#e2f2df;
  --cielo:#3d7ea6; --cielo-claro:#dcecf6;
  --ciruela:#8c5aa8; --ciruela-claro:#f0e6f6;

  --tinta:#2b2a26; --texto:#4a4740; --suave:#7c786e;
  --papel:#fffdf7; --crema:#fdf4e3; --linea:#ece3d2;

  --r:18px;            /* el redondeo manda en todo: es lo que hace que no parezca un formulario */
  --aire:28px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--papel); color:var(--texto);
  font:17px/1.65 Nunito,system-ui,-apple-system,"Segoe UI",sans-serif;
  /* la barra fija de abajo tapa el final de la página si no se le deja hueco */
  padding-bottom:84px; overflow-x:hidden}
h1,h2,h3{font-family:Fredoka,Nunito,system-ui,sans-serif; color:var(--tinta);
  line-height:1.12; margin:0 0 12px; letter-spacing:-.4px; overflow-wrap:break-word}
h1{font-size:clamp(34px,10vw,58px); font-weight:700}
h2{font-size:clamp(23px,6vw,31px); font-weight:600}
h3{font-size:19px; font-weight:600}
p{margin:0 0 14px}
img{max-width:100%; height:auto; display:block}
a{color:var(--cielo)}

.maqueta{background:var(--tinta); color:#fff; font-size:13.5px; line-height:1.5; padding:10px 16px; text-align:center}

/* La tira de arriba: el sitio donde se anuncia lo que haya. Cuando hay un
   evento se pone en el amarillo de la casa, porque entonces no es un aviso de
   fondo sino la razón por la que alguien entra hoy en la web. */
.tira{display:flex; gap:12px; align-items:center; justify-content:center; flex-wrap:wrap;
  background:var(--tinta); color:#fff; text-decoration:none; padding:11px 16px; font-size:14.5px; text-align:center}
.tira__txt{display:flex; flex-direction:column; gap:1px}
.tira__txt b{font-family:Fredoka,sans-serif; font-weight:600; font-size:16px; line-height:1.25}
.tira__txt span{font-size:13.5px; opacity:.82}
.tira__btn{flex:0 0 auto; background:#ffffff1f; border:1.5px solid #ffffff59; border-radius:999px;
  padding:6px 15px; font-weight:700; font-size:14px; white-space:nowrap}
.tira--evento{background:var(--sol); color:#3d2a00}
.tira--evento .tira__btn{background:#3d2a0014; border-color:#3d2a0040}
a.tira:active{filter:brightness(.94)}
.maqueta strong{color:var(--sol)}
.maqueta a{color:var(--sol-claro)}

/* ── cabecera ─────────────────────────────────────────────────────────── */
.cab{padding:16px}
.marca{display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit}
.marca img{width:52px; height:52px; object-fit:contain; flex:0 0 52px}
.marca b{display:block; font-family:Fredoka,sans-serif; font-size:18px; color:var(--tinta); line-height:1.15}
.marca small{display:block; font-size:13px; color:var(--suave); line-height:1.35}

/* el menú se desliza en horizontal: cabe entero y no hace falta desplegable */
.menu{display:flex; gap:8px; overflow-x:auto; padding:2px 16px 14px;
  scrollbar-width:none; -webkit-overflow-scrolling:touch}
.menu::-webkit-scrollbar{display:none}
.men{flex:0 0 auto; padding:9px 15px; border-radius:999px; text-decoration:none;
  font-weight:700; font-size:14.5px; border:2px solid transparent; white-space:nowrap}
.men--sol{background:var(--sol-claro); color:#8a5f00}
.men--coral{background:var(--coral-claro); color:#9c3522}
.men--hoja{background:var(--hoja-claro); color:#2f5c2b}
.men--cielo{background:var(--cielo-claro); color:#265b7a}
.men--ciruela{background:var(--ciruela-claro); color:#5f3576}
.men.on{border-color:currentColor}

main{padding:0 16px; display:flex; flex-direction:column; gap:var(--aire)}

/* ── portada ──────────────────────────────────────────────────────────── */
.portada{background:var(--crema); border-radius:var(--r); padding:30px 22px 26px; position:relative; overflow:hidden}
/* el círculo decora, no estorba: abajo a la derecha no cae debajo de ningún
   texto, y arriba sí lo hacía */
.portada:after{content:""; position:absolute; right:-80px; bottom:-90px; width:210px; height:210px;
  border-radius:50%; background:var(--sol); opacity:.22; pointer-events:none}
.portada__ojo{position:relative; font-weight:700; color:var(--hoja); font-size:14px;
  text-transform:uppercase; letter-spacing:.8px; margin-bottom:10px}
.portada h1{position:relative}
.portada h1 em{font-style:normal; color:var(--coral)}
.portada__sub{position:relative; font-size:18px; max-width:30ch}
.portada__acc{position:relative; display:flex; flex-direction:column; gap:10px; margin-top:20px}

.btn{display:block; text-align:center; text-decoration:none; font-weight:700; font-size:17px;
  padding:15px 22px; border-radius:999px; border:2.5px solid transparent}
.btn--sol{background:var(--sol); color:#3d2a00; border-color:var(--sol)}
.btn--linea{border-color:var(--tinta); color:var(--tinta)}

/* ── cifras ───────────────────────────────────────────────────────────── */
.cifras ul{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.cifra{border-radius:var(--r); padding:20px; text-align:center}
.cifra b{display:block; font-family:Fredoka,sans-serif; font-size:46px; line-height:1}
.cifra span{display:block; font-weight:600; font-size:15px; margin-top:4px}
.cifra--sol{background:var(--sol-claro)} .cifra--sol b{color:#b57d00}
.cifra--coral{background:var(--coral-claro)} .cifra--coral b{color:var(--coral)}
.cifra--hoja{background:var(--hoja-claro)} .cifra--hoja b{color:var(--hoja)}
.cifra--cielo{background:var(--cielo-claro)} .cifra--cielo b{color:var(--cielo)}
.cifra--ciruela{background:var(--ciruela-claro)} .cifra--ciruela b{color:var(--ciruela)}

/* ── cajas de texto ───────────────────────────────────────────────────── */
.caja{border-radius:var(--r); padding:24px 20px; border:2px solid var(--linea); background:var(--papel)}
.caja--sol{border-color:#f3dba6} .caja--coral{border-color:#f5c7bd}
.caja--hoja{border-color:#c6e0c2} .caja--cielo{border-color:#bfd9e8}
.caja--ciruela{border-color:#d9c3e6}
.caja p:last-child{margin-bottom:0}

.foto-grande{margin:0; border-radius:var(--r); overflow:hidden; background:var(--crema)}
.foto-grande img{width:100%; aspect-ratio:4/3; object-fit:cover}
.foto-grande figcaption{padding:12px 16px; font-size:14.5px; color:var(--suave)}

.fichas__rej{display:grid; gap:14px}
.ficha{border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column}
.ficha__foto{width:100%; aspect-ratio:16/10; object-fit:cover}
.ficha__txt{padding:18px 18px 20px}
.ficha p{margin:0; font-size:15.5px}
.ficha--sol{background:var(--sol-claro)} .ficha--coral{background:var(--coral-claro)}
.ficha--hoja{background:var(--hoja-claro)} .ficha--cielo{background:var(--cielo-claro)}
.ficha--ciruela{background:var(--ciruela-claro)}

.cita{margin:0; background:var(--hoja); color:#fff; border-radius:var(--r); padding:26px 22px;
  font-family:Fredoka,sans-serif; font-size:20px; line-height:1.4}
.cita p:last-child{margin-bottom:0}

.puntos{list-style:none; margin:0; padding:0; display:grid; gap:11px}
.punto{position:relative; padding-left:34px; font-size:16px}
.punto:before{content:""; position:absolute; left:0; top:6px; width:20px; height:20px; border-radius:50%}
.punto--sol:before{background:var(--sol)} .punto--coral:before{background:var(--coral)}
.punto--hoja:before{background:var(--hoja)} .punto--cielo:before{background:var(--cielo)}
.punto--ciruela:before{background:var(--ciruela)}

.nota{background:var(--sol-claro); border-radius:var(--r); padding:18px 20px; font-size:15.5px}

/* ── novedades ────────────────────────────────────────────────────────── */
.novedades__rej{display:grid; gap:14px; margin-bottom:16px}
.nota-card{display:block; border-radius:var(--r); overflow:hidden; text-decoration:none; color:inherit}
.nota-card__foto{width:100%; aspect-ratio:16/9; object-fit:cover}
.nota-card div{padding:16px 18px 18px}
.nota-card time{display:block; font-size:13px; font-weight:700; opacity:.7; margin-bottom:5px}
.nota-card h3{margin:0}
.nota-card--sol{background:var(--sol-claro)} .nota-card--coral{background:var(--coral-claro)}
.nota-card--hoja{background:var(--hoja-claro)} .nota-card--cielo{background:var(--cielo-claro)}
.nota-card--ciruela{background:var(--ciruela-claro)}

/* ── ficha de un evento ───────────────────────────────────────────────── */
/* Lo primero de la pantalla son los cuatro datos que decide alguien que duda:
   cuándo, dónde, cuánto y el botón. En la de 2025 el botón caía fuera. */
.ev-cab{background:var(--crema); border-radius:var(--r); padding:24px 20px; position:relative; overflow:hidden}
.ev-cab:after{content:""; position:absolute; right:-80px; bottom:-90px; width:210px; height:210px;
  border-radius:50%; background:var(--sol); opacity:.22; pointer-events:none}
.ev-ojo{position:relative; margin:0 0 10px; font-weight:700; font-size:13.5px; color:var(--hoja);
  text-transform:uppercase; letter-spacing:.8px}
.ev-cab h1{position:relative; font-size:clamp(29px,8vw,52px)}
.ev-sub{position:relative; font-size:16.5px; margin:8px 0 0; max-width:34ch}
.ev-datos{position:relative; display:grid; gap:8px; margin:16px 0 14px}
.ev-datos div{background:var(--papel); border-radius:14px; padding:11px 14px}
.ev-datos b{display:block; font-family:Fredoka,sans-serif; font-size:18.5px; color:var(--tinta); line-height:1.2}
.ev-datos span{display:block; font-size:12.5px; color:var(--suave); text-transform:uppercase; letter-spacing:.7px; margin-top:2px}
.ev-cta{position:relative}
.ev-plazas{position:relative; margin:10px 0 0; font-size:14.5px; color:var(--suave); text-align:center}

.ev-fila0{background:var(--ciruela-claro); border-radius:var(--r); padding:24px 20px}
.ev-fila0 h2{margin-bottom:10px}
.ev-fila0 p{margin:0 0 10px; font-size:16px}
.ev-cuenta{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:17px; font-weight:700;
  background:var(--papel); border-radius:12px; padding:13px 15px; letter-spacing:.5px;
  word-break:break-all; user-select:all; margin:0}

.ev-hecho{background:var(--hoja-claro); border-radius:var(--r); padding:34px 22px; text-align:center}
.ev-hecho h1{font-size:clamp(30px,8vw,44px); margin-bottom:10px}
.ev-hecho p{font-size:17px; max-width:40ch; margin:0 auto 6px}
.ev-hecho .ev-datos{text-align:left}

@media (min-width:700px){
  .ev-cab{padding:54px 44px}
  .ev-datos{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
  .ev-cta{display:inline-block}
  .ev-plazas{text-align:left}
}

/* ── formulario ───────────────────────────────────────────────────────── */
.form{display:grid; gap:14px}
.form label{display:grid; gap:5px; font-weight:700; font-size:15px; color:var(--tinta)}
.form input,.form select,.form textarea{font:inherit; font-size:16.5px; padding:13px 14px;
  border:2px solid var(--linea); border-radius:14px; background:var(--papel); color:var(--texto); width:100%}
.form input:focus,.form select:focus,.form textarea:focus{outline:none; border-color:var(--coral)}
.form .ayuda{margin:-4px 0 0; font-size:14px; color:var(--suave); font-weight:400}
.form button{margin-top:4px; border:0; cursor:pointer; font-family:inherit}

/* ── pie ──────────────────────────────────────────────────────────────── */
.pie{margin:var(--aire) 16px 0}
.pie__caja{background:var(--cielo-claro); border-radius:var(--r); padding:24px 20px}
.pie__caja p{font-size:16px}
.cuenta{margin-top:16px; padding-top:14px; border-top:2px solid #bfd9e8}
.cuenta span{display:block; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.7px; color:var(--suave)}
.cuenta b{display:block; font-size:16px; letter-spacing:.4px; word-break:break-all}
.cuenta__bizum{margin-top:6px}
.pie__nota{text-align:center; font-size:14px; color:var(--suave); padding:18px 0 4px}

/* ── barra fija ───────────────────────────────────────────────────────── */
.barra{position:fixed; left:0; right:0; bottom:0; z-index:40; display:flex; gap:10px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom,0)); background:#fffdf7f2;
  border-top:2px solid var(--linea); backdrop-filter:blur(8px)}
.barra a{flex:1; text-align:center; text-decoration:none; font-weight:700; font-size:16.5px;
  padding:14px 10px; border-radius:999px; min-height:50px}
.barra__tel{background:var(--cielo-claro); color:#1f4e69}
.barra__ayuda{background:var(--coral); color:#fff}

@media (prefers-reduced-motion:no-preference){
  .men,.btn,.barra a{transition:transform .14s ease}
  .men:active,.btn:active,.barra a:active{transform:scale(.96)}
}

/* ── y a partir de aquí, lo que solo cabe en pantallas grandes ────────── */
@media (min-width:700px){
  :root{--aire:40px; --r:24px}
  body{padding-bottom:0}
  .cab,.menu,main,.pie{max-width:1040px; margin-left:auto; margin-right:auto}
  main{padding:0 24px}
  .cab{padding:22px 24px 10px}
  .menu{padding:2px 24px 18px}
  .portada{padding:60px 48px 54px}
  .portada:after{width:340px; height:340px; right:-110px; bottom:-140px}
  .portada__sub{font-size:21px; max-width:40ch}
  .portada__acc{flex-direction:row}
  .btn{display:inline-block}
  .cifras ul{grid-template-columns:repeat(3,1fr)}
  .cifra b{font-size:58px}
  .caja{padding:34px 32px}
  .fichas__rej{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
  .novedades__rej{grid-template-columns:repeat(3,1fr)}
  .cita{font-size:25px; padding:38px 34px}
  .pie{margin:var(--aire) auto 0; padding:0 24px}
  .pie__caja{padding:34px 32px}
  /* en escritorio el pulgar no manda: la barra fija estorba más que ayuda */
  .barra{display:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   De aquí abajo, lo que esta cara necesitaba para pintar TODA la web y no solo
   la portada, las secciones y la ficha de un evento: colaborar, contacto, la
   lista de novedades, entrar y el letrero de los pendientes.

   El contenido y el orden los manda la cara seria. Esto es solo la pinta.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── submenú: las hijas de la sección en la que estás ─────────────────── */
.submenu{display:flex; gap:8px; overflow-x:auto; padding:0 16px 14px; margin-top:-6px;
  scrollbar-width:none}
.submenu::-webkit-scrollbar{display:none}
.submenu a{flex:0 0 auto; text-decoration:none; font-weight:700; font-size:14px;
  color:var(--suave); padding:7px 13px; border-radius:999px; border:2px solid var(--linea);
  background:var(--papel); white-space:nowrap}
.submenu a.on{color:var(--tinta); border-color:var(--tinta)}

/* ── avisos ───────────────────────────────────────────────────────────── */
.nota--bien{background:var(--hoja-claro)}
.nota--mal{background:var(--coral-claro)}
.nota b{display:block; font-family:Fredoka,sans-serif; font-size:17px; color:var(--tinta)}

/* ── bloques que faltaban ─────────────────────────────────────────────── */
.punto b{font-weight:700; color:var(--tinta)}
.punto span{display:block; font-size:14.5px; color:var(--suave); font-weight:400}
.cita cite{display:block; margin-top:12px; font-size:15px; font-style:normal; opacity:.85}
.bloque-btn{margin:0}
.galeria-v2__rej{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:14px}
.galeria-v2__img{width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:14px}

/* ── novedades: la tarjeta aguanta ahora resumen y pie ────────────────── */
.nota-card p{margin:6px 0 0; font-size:15px}
.nota-card__pie{display:flex; flex-wrap:wrap; gap:4px 14px; font-size:14px; opacity:.8}
.nota-card__mas{display:inline-block; margin-top:10px; font-weight:700; font-size:15px;
  border-bottom:2.5px solid currentColor}

/* El índice por año, en pastillas: en el móvil una columna al lado no cabe. */
.anos{display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none}
.anos::-webkit-scrollbar{display:none}
.anos a{flex:0 0 auto; text-decoration:none; font-weight:700; font-size:14.5px; color:var(--texto);
  background:var(--crema); border:2px solid transparent; border-radius:999px; padding:8px 14px; white-space:nowrap}
.anos a.on{border-color:var(--tinta); color:var(--tinta)}
.anos span{opacity:.55; font-weight:600}

.paginas{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.paginas .btn{display:inline-block; padding:11px 18px; font-size:15px}
.paginas__cuenta{font-size:14.5px; color:var(--suave); font-weight:700}

/* ── el teléfono, en grande ───────────────────────────────────────────── */
.tel-grande{display:block; text-decoration:none; background:var(--cielo-claro); color:#1f4e69;
  border-radius:var(--r); padding:20px 22px; text-align:center}
.tel-grande span{display:block; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; opacity:.75}
.tel-grande b{display:block; font-family:Fredoka,sans-serif; font-size:clamp(28px,8vw,40px); line-height:1.1; margin-top:4px}

/* ── el letrero de los pendientes ─────────────────────────────────────── */
.pend{display:grid; gap:18px; align-items:center; background:var(--cielo-claro);
  border-radius:var(--r); padding:20px}
.pend__mini img{width:100%; max-width:240px; height:auto; border-radius:14px; cursor:zoom-in}
.pend__txt h2{margin-bottom:8px}
.pend__txt p{margin:0 0 10px; font-size:15.5px}
.pend__ver{font-weight:700}
.pend__vel{display:none; position:fixed; inset:0; z-index:50; background:#000000d1;
  align-items:center; justify-content:center; padding:16px; cursor:zoom-out}
.pend__vel:target{display:flex}
.pend__vel img{max-width:100%; max-height:100%; width:auto; height:auto; border-radius:10px}

/* ── formularios ──────────────────────────────────────────────────────── */
/* Los campos son los mismos que en la cara seria (el HTML se escribe una vez);
   aquí solo cambia cómo se ven. */
.formulario{display:grid; gap:14px}
.formulario h2{margin:0}
.formulario h3{margin:10px 0 0}
.formulario .campo{display:grid; gap:14px}
.formulario label{display:grid; gap:5px; font-weight:700; font-size:15px; color:var(--tinta)}
.formulario input,.formulario select,.formulario textarea{font:inherit; font-size:16.5px;
  padding:13px 14px; border:2px solid var(--linea); border-radius:14px;
  background:var(--papel); color:var(--texto); width:100%}
.formulario input:focus,.formulario select:focus,.formulario textarea:focus{outline:none; border-color:var(--coral)}
.formulario .ayuda{display:block; font-size:14.5px; color:var(--suave); font-weight:400; margin:-6px 0 0}
.formulario p{font-size:15.5px}

/* Casillas y botones de elección: el ancho completo de los campos de texto no les
   vale, se quedaban a un lado con la etiqueta en el otro. */
.formulario input[type="radio"],.formulario input[type="checkbox"]{width:auto; margin:0; accent-color:var(--coral)}
.opciones{border:0; padding:0; margin:0}
.opciones legend{font-weight:700; font-size:15px; color:var(--tinta); padding:0 0 8px}
.formulario .opciones label,.formulario .acepto{display:flex; align-items:center; gap:10px;
  font-weight:400; font-size:15px; margin:0 0 8px; padding:13px 15px;
  border:2px solid var(--linea); border-radius:14px; cursor:pointer}
.formulario .opciones label:has(input:checked){border-color:var(--coral); background:var(--coral-claro)}
.formulario .acepto{align-items:flex-start; font-size:14.5px; color:var(--suave); border:0; padding:0; margin:4px 0 0}

.boton{display:inline-block; text-align:center; text-decoration:none; cursor:pointer;
  font:inherit; font-weight:700; font-size:17px; padding:15px 24px; border-radius:999px;
  border:2.5px solid var(--sol); background:var(--sol); color:#3d2a00}
.boton--linea{background:transparent; border-color:var(--tinta); color:var(--tinta)}
.boton--grande{width:100%}
.descargas{display:flex; flex-wrap:wrap; gap:10px}
.caja .cuenta{margin:0 0 14px; border:0; padding:14px 16px; background:var(--crema); border-radius:14px}
.caja .cuenta--bizum{background:var(--sol)}
/* El <br> del marcado sobra aquí: el span ya va en su línea y dejaba un hueco vacío. */
.caja .cuenta br{display:none}
.caja .cuenta b{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:16.5px; letter-spacing:.4px; word-break:break-all}
.caja .cuenta span{display:block; margin-top:6px; font-size:13.5px; color:var(--suave);
  text-transform:none; letter-spacing:0; font-weight:400}

/* ── pestañas (sin JavaScript: la CSP de la web no deja scripts) ──────── */
.pestanas > input{position:absolute; opacity:0; pointer-events:none}
.pestanas__barra{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px}
.pestanas__barra label{flex:1 1 45%; text-align:center; cursor:pointer; font-weight:700; font-size:15px;
  color:var(--suave); background:var(--papel); border:2px solid var(--linea); border-radius:999px; padding:11px 14px}
.pestanas__panel{display:none}
.pestanas > .t1:checked ~ .pestanas__barra .l1,
.pestanas > .t2:checked ~ .pestanas__barra .l2{color:var(--tinta); border-color:var(--tinta); background:var(--crema)}
.pestanas > .t1:checked ~ .p1,
.pestanas > .t2:checked ~ .p2{display:block}
.pestanas > input:focus-visible ~ .pestanas__barra label{outline:2px solid var(--coral); outline-offset:2px}
.pestanas--sub{margin-top:18px}
.pestanas--sub .pestanas__barra label{font-size:14px; padding:9px 12px}

/* ── entrar ───────────────────────────────────────────────────────────── */
.acceso{display:flex; flex-direction:column; gap:var(--aire); max-width:520px; margin:0 auto; width:100%}

@media (min-width:700px){
  .submenu{max-width:1040px; margin:-10px auto 0; padding:0 24px 18px}
  .formulario .campo--doble{grid-template-columns:1fr 1fr}
  .pestanas__barra label{flex:0 0 auto; padding:12px 22px}
  .boton--grande{width:auto}
  .pend{grid-template-columns:minmax(160px,230px) 1fr; gap:26px; padding:30px}
  .pend__mini img{max-width:none}
  .galeria-v2__rej{grid-template-columns:repeat(4,1fr)}
}