/* ==========================================================================
   CREATICS · hub.css — la página de la sede (/hub/). Prefijo .cs-hub-
   (con un guion: .cs-hub__… es el bloque del HUB de la portada, en home.css, y
   aquí se reutiliza tal cual para las tarjetas de la comunidad).
   Requiere los cinco comunes + horario.css + actividades.css: de ahí salen las
   fichas de actividad (.cs-apn-act), las bandas de WhatsApp, la barra fija del
   móvil, las reseñas, las preguntas y el cierre con formulario.
   ========================================================================== */

/* ---------- Héroe: texto sobre fondo plano y la fachada enmarcada ----------
   La foto de la fachada mide 800 px: a sangre se vería borrosa, en un marco no. */
.cs-hub-hero{padding-block:104px 72px}
.cs-hub-hero__grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:56px;align-items:center}
.cs-hub-hero__copy{gap:18px;align-items:flex-start}
.cs-hub-hero__t{font-size:var(--display-sm);line-height:1.06;max-width:19ch;color:var(--cs-white)}
.cs-hub-hero__dir{display:flex;align-items:flex-start;gap:10px;margin:0;font-family:var(--font-heading);font-weight:var(--weight-bold);font-size:var(--text-md);line-height:var(--leading-snug);color:var(--cs-white)}
.cs-hub-hero__dir .cs-i{flex:none;margin-top:1px;color:var(--cs-turquoise)}
.cs-hub-hero__acciones{gap:14px;padding-top:6px}
.cs-hub-hero__acciones .cs-btn .cs-i{width:18px;height:18px}
.cs-hub-hero__nota{min-height:44px}
.cs-hub-hero__foto{margin:0}
.cs-hub-hero__foto img{display:block;width:100%;height:auto;aspect-ratio:8/5;object-fit:cover;border-radius:var(--radius-card);border:var(--border-bold) solid var(--cs-white);box-shadow:6px 6px 0 0 var(--cs-turquoise);transform:rotate(1.2deg)}
@media (max-width:900px){
	.cs-hub-hero{padding-block:96px 48px}
	.cs-hub-hero__grid{grid-template-columns:minmax(0,1fr);gap:32px}
	.cs-hub-hero__foto{max-width:560px}
	.cs-hub-hero__foto img{transform:none;box-shadow:4px 4px 0 0 var(--cs-turquoise)}
}
@media (max-width:720px){
	.cs-hub-hero{padding-block:88px 40px}
	.cs-hub-hero__acciones{width:100%;flex-direction:column;align-items:stretch;gap:10px}
	.cs-hub-hero__acciones .cs-btn{width:100%}
	.cs-hub-hero__dir{font-size:var(--text-base)}
}

/* ---------- Ficha de visita: cuatro datos, cada uno un enlace entero ---------- */
.cs-hub-visita{padding-block:calc(var(--section-y) * .75)}
.cs-hub-ficha{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:0;padding:0;list-style:none}
.cs-hub-ficha li{display:flex}
.cs-hub-dato{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0;padding:22px 22px 18px;background:var(--color-surface);border:var(--border-bold) solid var(--cs-ink);border-radius:var(--radius-card);box-shadow:var(--shadow-offset);color:var(--cs-ink);text-decoration:none;transition:transform var(--dur-fast) var(--ease-out)}
.cs-hub-dato:hover{transform:translate(-2px,-2px);color:var(--cs-ink)}
.cs-hub-dato__icono{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-bottom:6px;border-radius:50%;border:2px solid var(--cs-ink);background:var(--cs-yellow);color:var(--cs-ink)}
.cs-hub-dato--telefono .cs-hub-dato__icono{background:var(--cs-turquoise)}
.cs-hub-dato--whatsapp .cs-hub-dato__icono{background:var(--cs-mint)}
.cs-hub-dato--correo .cs-hub-dato__icono{background:var(--pink-100)}
.cs-hub-dato__et{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:var(--weight-bold);text-transform:uppercase;letter-spacing:var(--tracking-wider);color:var(--color-ink-mute)}
.cs-hub-dato__valor{max-width:100%;font-family:var(--font-heading);font-style:normal;font-weight:var(--weight-bold);font-size:var(--text-lg);line-height:var(--leading-snug);overflow-wrap:anywhere}
address.cs-hub-dato__valor{font-size:var(--text-md)}
.cs-hub-dato__accion{margin-top:auto;padding-top:10px;font-size:var(--text-sm);font-weight:var(--weight-bold);color:var(--cs-blue);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
@media (max-width:1100px){.cs-hub-ficha{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){
	.cs-hub-ficha{grid-template-columns:minmax(0,1fr);gap:14px}
	.cs-hub-dato{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;row-gap:2px;padding:16px;box-shadow:4px 4px 0 0 var(--cs-ink)}
	.cs-hub-dato__icono{grid-row:1 / span 3;margin:0}
	.cs-hub-dato__et,.cs-hub-dato__valor,.cs-hub-dato__accion{grid-column:2}
	.cs-hub-dato__accion{padding-top:4px}
}

/* ---------- Qué es el HUB: las tres palabras a la vez ---------- */
.cs-hub-que__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:64px;align-items:center}
.cs-hub-que__copy{gap:18px}
.cs-hub-que .cs-h2{color:var(--cs-white)}
.cs-hub-que .cs-lead{max-width:54ch}
.cs-hub-que__copy>p{margin:0}
.cs-hub-que__enlace{display:inline-flex;align-items:center;min-height:44px;color:var(--cs-turquoise)}
.cs-hub-que__enlace:hover{color:var(--cs-white)}
.cs-hub-palabras{display:flex;flex-direction:column;gap:16px;margin:0;padding:0;list-style:none}
.cs-hub-palabras__p{padding:24px 28px;border-radius:var(--radius-card);font-family:var(--font-display);font-size:var(--text-2xl);line-height:1.1;letter-spacing:var(--tracking-wide);color:var(--cs-ink);background:var(--cs-yellow);overflow-wrap:anywhere}
.cs-hub-palabras__p--1,.cs-hub-palabras__p--3{margin-right:28px}
.cs-hub-palabras__p--2{margin-left:28px;background:var(--cs-turquoise)}
.cs-hub-palabras__p--3{background:var(--cs-mint)}
@media (max-width:1100px){.cs-hub-palabras__p{font-size:var(--text-xl)}}
@media (max-width:900px){
	.cs-hub-que__grid{grid-template-columns:minmax(0,1fr);gap:32px}
	.cs-hub-palabras__p--1,.cs-hub-palabras__p--3{margin-right:0}
	.cs-hub-palabras__p--2{margin-left:0}
	.cs-hub-palabras__p{font-size:var(--text-2xl)}
}
@media (max-width:480px){.cs-hub-palabras{gap:10px}.cs-hub-palabras__p{padding:18px 20px;font-size:var(--text-xl)}}

/* ---------- La academia: las fichas de actividades.css, sin menú de reserva ---------- */
.cs-hub-act__links{margin-top:auto;padding-top:6px}
.cs-hub-act__links a{gap:5px}
.cs-hub-academia__mas{display:flex;justify-content:center}
@media (max-width:720px){.cs-hub-academia__mas .cs-btn{width:100%}}

/* ---------- El espacio: cuatro fotos apaisadas ---------- */
.cs-hub-galeria{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.cs-hub-galeria__foto{margin:0;aspect-ratio:16/9;border-radius:var(--radius-card);overflow:hidden;background:var(--neutral-100)}
.cs-hub-galeria__foto img{display:block;width:100%;height:100%;object-fit:cover}
.cs-hub-galeria__foto--1,.cs-hub-galeria__foto--4{border:var(--border-bold) solid var(--cs-ink);box-shadow:var(--shadow-offset)}
@media (max-width:640px){
	.cs-hub-galeria{grid-template-columns:minmax(0,1fr);gap:14px}
	.cs-hub-galeria__foto--1,.cs-hub-galeria__foto--4{box-shadow:4px 4px 0 0 var(--cs-ink)}
}

/* ---------- La comunidad: tarjetas .cs-hub__act de la portada, con enlace opcional ---------- */
.cs-hub-comunidad .cs-hub__act-title{font-size:var(--text-md)}
.cs-hub-comunidad .cs-hub__act p{font-size:var(--text-sm);color:var(--color-ink-soft)}
.cs-hub-act__enlace{display:inline-flex;align-items:center;min-height:44px;white-space:normal}

/* ---------- Reseñas y formulario: objetivos táctiles de 44 px ---------- */
.cs-pagina--hub .cs-apn-res__nota{min-height:44px}
.cs-pagina--hub .cs-aliados__link .cs-link{display:inline-flex;align-items:center;min-height:44px}
.cs-pagina--hub .cs-check{min-height:44px;align-items:center}
.cs-pagina--hub .cs-faq__cta .cs-btn{min-height:44px}

/* ---------- Preguntas: fondo gris para separarlas de las reseñas ---------- */
.cs-pagina--hub .cs-faq{background:var(--neutral-50)}

/* ---------- Pantallas de 320–360 px: el antetítulo del horario es largo y no se parte ---------- */
@media (max-width:360px){.cs-pagina--hub .cs-kicker{white-space:normal;line-height:1.3}.cs-pagina--hub .cs-kicker__rule{flex:none}}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
	.cs-hub-hero__foto img{transform:none}
	.cs-hub-dato{transition:none}
	.cs-hub-dato:hover{transform:none}
}

/* Notas de visita (contacto previo, aparcamiento, acceso) y línea del colaboratorio · 19/09/2026 */
.cs-hub-notas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 20px}
.cs-hub-notas li{padding:12px 16px;border-left:4px solid var(--cs-yellow);border-radius:0 12px 12px 0;background:var(--color-surface-alt,var(--color-surface));font-size:var(--text-sm);line-height:var(--leading-normal);color:var(--cs-ink)}
.cs-hub-que__colabora{margin:0;font-size:var(--text-base);line-height:var(--leading-normal)}
@media (max-width:900px){.cs-hub-notas{grid-template-columns:1fr}}