/* ==========================================================================
   CREATICS · actividades.css — /actividades-para-ninos/.
   Requiere fonts + tokens + base + creatics + home.css (héroe, pilares, recorrido,
   reseñas, preguntas y cierre vienen de ahí) y horario.css.
   Prefijo .cs-apn- para lo propio de esta página.
   ========================================================================== */

/* ---------- Héroe: más bajo que en la portada, para llegar antes a pedir información ---------- */
.cs-pagina--actividades .cs-hero{min-height:min(78vh,780px)}
.cs-pagina--actividades .cs-hero__content{padding-block:112px 104px}
.cs-apn-hero__ante{display:block;margin-bottom:16px;font-family:var(--font-mono);font-size:var(--text-xs);font-weight:700;letter-spacing:var(--tracking-wider);line-height:1.45;text-transform:uppercase;color:var(--cs-turquoise);text-shadow:0 1px 10px rgba(14,16,32,.85),0 0 2px rgba(14,16,32,.9)}
.cs-apn-hero__claim{display:block}
.cs-apn-hero__actions{gap:14px}
/* Contraste sobre la foto: el degradado de la portada solo oscurece un 25 % arriba, donde
   está la pantalla clara. Con este, antetítulo 5,3:1, reseñas 5,9:1 y entradilla 5,5:1. */
.cs-pagina--actividades .cs-hero::after{background:linear-gradient(to top,rgba(14,16,32,.92) 0%,rgba(14,16,32,.62) 45%,rgba(14,16,32,.6) 100%)}
.cs-pagina--actividades .cs-hero .cs-rating{min-height:44px;background:rgba(14,16,32,.42);border-color:rgba(255,255,255,.34)}
@media (max-width:720px){
	.cs-pagina--actividades .cs-hero{min-height:0}
	.cs-pagina--actividades .cs-hero__content{padding-block:88px 56px}
	.cs-apn-hero__ante{font-size:var(--text-2xs);margin-bottom:12px}
}

/* ---------- WhatsApp: el blanco sobre el verde de la marca da 2:1; la tinta, 9,5:1 ---------- */
.cs-pagina--actividades .cs-btn--whatsapp{--_fg:var(--cs-ink)}
.cs-pagina--actividades .cs-btn--whatsapp:hover,
.cs-pagina--actividades .cs-nav__wa,.cs-pagina--actividades .cs-nav__wa:hover,
.cs-pagina--actividades .cs-wa-float,.cs-pagina--actividades .cs-wa-float:hover{color:var(--cs-ink)}
/* Cabecera en el móvil: sin el icono de WhatsApp (ya está en el héroe, la barra y el menú), el logo no encoge */
@media (max-width:420px){.cs-pagina--actividades .cs-nav__wa{display:none}}
@media (max-width:360px){.cs-pagina--actividades .cs-nav__cta{display:none}}

/* ---------- Información rápida (tarjeta que monta sobre el héroe) ---------- */
.cs-apn-info{position:relative;z-index:3;margin-top:-64px}
.cs-apn-info__tarjeta{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;padding:28px 32px 24px;background:#fff;border:var(--border-bold) solid var(--cs-ink);border-radius:var(--radius-card);box-shadow:var(--shadow-offset)}
.cs-apn-info__copy .cs-h3{margin:0;font-size:var(--text-2xl);line-height:1.15}
.cs-apn-info__copy p{margin:6px 0 0;font-size:var(--text-base);line-height:var(--leading-normal);color:var(--color-ink-soft)}
.cs-apn-linea .cs-form__fields{display:flex;flex-direction:column;gap:12px}
.cs-apn-linea__fila{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) auto;gap:12px;align-items:end}
.cs-apn-linea .cs-field__label{color:var(--color-ink-soft)}
.cs-apn-linea .cs-input{min-height:52px;background:#fff;color:var(--cs-ink);border:2px solid var(--color-border-strong)}
.cs-apn-linea .cs-input::placeholder{color:var(--color-ink-mute)}
.cs-apn-linea .cs-input:focus{border-color:var(--cs-blue)}
.cs-apn-linea__boton{min-height:52px}
.cs-apn-linea .cs-check{display:flex;align-items:flex-start;gap:10px;font-size:var(--text-xs);line-height:var(--leading-normal);color:var(--color-ink-soft);cursor:pointer}
.cs-apn-linea .cs-check input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--cs-pink)}
.cs-apn-linea .cs-check a{color:var(--cs-blue);text-decoration:underline;text-underline-offset:2px}
.cs-apn-linea .cs-form__error{margin:0;font-size:var(--text-sm);font-weight:700;color:var(--pink-600)}
.cs-apn-linea .cs-form__ok{border:2px solid var(--cs-ink)}
.cs-apn-linea .cs-btn[aria-busy="true"]{opacity:.7;pointer-events:none}
.cs-apn-linea__legal{margin:0;font-size:var(--text-2xs);line-height:1.5;color:var(--color-ink-mute)}
@media (min-width:721px){.cs-apn-linea .cs-check{min-height:44px;align-items:center}}
/* Tableta: dos campos por fila y el botón debajo; si no, «Año de nacimiento» se corta */
@media (min-width:721px) and (max-width:1120px){.cs-apn-linea__fila{grid-template-columns:repeat(2,minmax(0,1fr))}.cs-apn-linea__boton{grid-column:1 / -1}}
.cs-apn-info__wa{display:flex;align-items:center;gap:14px}
.cs-apn-info__o{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-wider);color:var(--color-ink-mute)}
@media (min-width:1000px){
	.cs-apn-info__tarjeta{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"copy copy" "form wa";column-gap:28px}
	.cs-apn-info__copy{grid-area:copy}
	.cs-apn-linea{grid-area:form}
	/* A la altura de los campos (debajo de sus etiquetas) */
	.cs-apn-info__wa{grid-area:wa;align-self:start;margin-top:24px;padding-left:28px;border-left:1.5px solid var(--color-border)}
	.cs-apn-info__wa .cs-btn{min-height:52px}
}
@media (max-width:720px){
	.cs-apn-info{margin-top:-28px}
	.cs-apn-info__tarjeta{padding:22px 18px 20px;gap:16px;box-shadow:4px 4px 0 var(--cs-ink)}
	.cs-apn-info__copy .cs-h3{font-size:var(--text-xl)}
	/* En el móvil, la casilla de privacidad antes del botón: así no se pulsa sin verla */
	.cs-apn-linea__fila{display:contents}
	.cs-apn-linea .cs-field{order:1}
	.cs-apn-linea .cs-form__error--js{order:2}
	.cs-apn-linea .cs-check{order:3}
	.cs-apn-linea__boton{order:4;width:100%}
	.cs-apn-linea__legal{order:5}
	.cs-apn-info__wa{flex-direction:column;align-items:stretch;gap:8px}
	.cs-apn-info__o{text-align:center}
	.cs-apn-info__wa .cs-btn{width:100%}
}

/* ---------- Programas ---------- */
.cs-apn-prog{padding-top:calc(var(--section-y) * .8)}
.cs-apn-filtros{display:flex;flex-wrap:wrap;gap:10px}
.cs-apn-filtros .cs-pill{min-height:44px;border-color:var(--neutral-300)}
.cs-apn-filtros .cs-pill:hover,.cs-apn-filtros .cs-pill[aria-pressed="true"]{border-color:var(--cs-ink)}
.cs-apn-prog__grid{gap:28px}
/* Sin overflow:hidden: el menú de «Reservar» sale por fuera de la tarjeta */
.cs-apn-act{overflow:visible}
.cs-apn-act[hidden]{display:none}
.cs-apn-act .cs-card__img{width:100%;aspect-ratio:3/2;height:auto;object-fit:cover}
.cs-apn-act__edad{align-self:flex-start}
.cs-apn-act__titulo{color:inherit;text-decoration:none}
.cs-apn-act__titulo:hover{color:var(--cs-blue);text-decoration:underline;text-underline-offset:4px}
.cs-apn-act__meta{margin:0;font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-ink-mute)}
.cs-apn-act__acciones{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px;margin-top:auto;padding-top:10px}
.cs-apn-act__acciones .cs-btn{min-height:44px}
.cs-apn-act__acciones .cs-btn .cs-i{width:18px;height:18px}
/* El menú se ancla a la fila de botones, no al botón: así no se sale de la ficha ni de la pantalla */
.cs-apn-act__acciones{position:relative}
.cs-apn-reserva{position:static}
.cs-apn-reserva>summary{list-style:none;cursor:pointer}
.cs-apn-reserva>summary::-webkit-details-marker{display:none}
.cs-apn-reserva>summary .cs-i{width:16px;height:16px;transition:transform var(--dur-fast) var(--ease-out)}
.cs-apn-reserva[open]>summary{background:var(--cs-ink);color:#fff}
.cs-apn-reserva[open]>summary .cs-i{transform:rotate(180deg)}
.cs-apn-reserva__menu{position:absolute;left:0;top:calc(100% + 8px);z-index:6;min-width:232px;margin:0;padding:6px;list-style:none;background:#fff;border:var(--border-bold) solid var(--cs-ink);border-radius:12px;box-shadow:var(--shadow-offset)}
.cs-apn-reserva__menu a{display:flex;align-items:center;min-height:44px;padding:8px 12px;border-radius:8px;font-weight:700;font-size:var(--text-sm);color:var(--cs-ink);text-decoration:none}
.cs-apn-reserva__menu a:hover{background:var(--blue-50);color:var(--cs-ink)}
.cs-apn-act__links{display:flex;flex-wrap:wrap;gap:0 18px;margin:0;font-size:var(--text-sm)}
.cs-apn-act__links a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--cs-blue);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
@media (max-width:1000px){.cs-apn-prog__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:641px){.cs-apn-reserva__menu{left:0;right:0;min-width:0}}
@media (max-width:640px){
	.cs-apn-prog__grid{grid-template-columns:minmax(0,1fr)}
	.cs-apn-act__acciones{flex-direction:column;align-items:stretch}
	.cs-apn-act__acciones>.cs-btn,.cs-apn-reserva>summary{width:100%}
	.cs-apn-reserva__menu{position:static;margin-top:8px;box-shadow:none}
}
/* Pantallas de 320–360 px: titulares y botones largos sin salirse */
@media (max-width:360px){
	.cs-pagina--actividades .cs-h2{font-size:clamp(1.75rem,9vw,2.25rem)}
	.cs-pagina--actividades .cs-btn{white-space:normal;text-align:center;line-height:1.2}
}

/* ---------- Bandas de WhatsApp entre secciones ---------- */
.cs-apn-banda{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding:18px 22px;background:var(--blue-50);border:1.5px solid var(--blue-100);border-radius:14px}
.cs-apn-banda p{margin:0;font-family:var(--font-heading);font-weight:700;font-size:var(--text-md);line-height:1.3;color:var(--cs-ink)}
.cs-section--alt .cs-apn-banda{background:#fff;border-color:var(--color-border)}
@media (max-width:720px){.cs-apn-banda{padding:16px}.cs-apn-banda .cs-btn{width:100%}}

/* ---------- Así se aprende ---------- */
.cs-apn-rec .cs-rec-wrap{margin-top:0}
/* La portada reserva a la derecha el sitio del WhatsApp flotante; aquí, en el móvil, no hay flotante */
@media (max-width:720px){.cs-pagina--actividades .cs-rec__nav{padding-right:12px}}

/* ---------- Vacaciones ---------- */
.cs-apn-vac__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.cs-apn-vac__copy{gap:18px}
.cs-apn-vac__puntos{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.cs-apn-vac__puntos li{display:flex;align-items:baseline;gap:12px;font-weight:600;color:var(--cs-ink)}
.cs-apn-vac__puntos li::before{content:"";flex:none;width:8px;height:8px;border-radius:2px;background:var(--cs-pink);transform:translateY(-2px)}
.cs-apn-vac__nota{margin:0;padding:12px 16px;border-left:4px solid var(--cs-turquoise);background:var(--neutral-50);border-radius:0 10px 10px 0;font-size:var(--text-sm);line-height:var(--leading-normal);color:var(--color-ink-soft)}
.cs-apn-vac__fotos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.cs-apn-vac__foto{margin:0;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:var(--neutral-100)}
.cs-apn-vac__foto img{display:block;width:100%;height:100%;object-fit:cover}
.cs-apn-vac__foto--1,.cs-apn-vac__foto--4{border:var(--border-bold) solid var(--cs-ink);box-shadow:var(--shadow-offset)}
.cs-apn-vac__foto--1{transform:rotate(-1.5deg)}
.cs-apn-vac__foto--4{transform:rotate(1.2deg)}
@media (max-width:900px){.cs-apn-vac__grid{grid-template-columns:minmax(0,1fr);gap:36px}}
@media (max-width:720px){.cs-apn-vac .cs-btn{width:100%}.cs-apn-vac__fotos{gap:12px}.cs-apn-vac__foto--1,.cs-apn-vac__foto--4{box-shadow:3px 3px 0 var(--cs-ink)}}

/* ---------- Reseñas: la nota de Google sobre fondo claro ---------- */
.cs-apn-res .cs-apn-res__nota{align-self:center;margin-top:6px;background:#fff;border:1.5px solid var(--color-border);color:var(--cs-ink)}
.cs-apn-res .cs-apn-res__nota:hover{background:#fff;border-color:var(--cs-ink);color:var(--cs-ink)}
.cs-apn-res .cs-apn-res__nota .cs-stars{-webkit-text-stroke:.4px var(--cs-ink)}

/* ---------- Barra fija en el móvil ---------- */
.cs-apn-barra{display:none}
@media (max-width:720px){
	.cs-pagina--actividades .cs-wa-float{display:none}          /* la barra ya lleva WhatsApp */
	.cs-apn-barra{position:fixed;left:0;right:0;bottom:0;z-index:80;display:flex;gap:10px;align-items:center;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);border-top:var(--border-bold) solid var(--cs-ink);box-shadow:0 -6px 18px rgba(14,16,32,.12);transform:translateY(110%);transition:transform var(--dur) var(--ease-out);visibility:hidden}
	.cs-apn-barra.is-visible{transform:none;visibility:visible}
	.cs-apn-barra__cta{flex:1;min-height:52px;font-size:var(--text-base)}
	.cs-apn-barra__wa{flex:none;display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:#25d366;color:var(--cs-ink);border:2px solid var(--cs-ink)}
	.cs-apn-barra__wa:hover{color:var(--cs-ink)}
	.cs-apn-barra__wa .cs-i{width:26px;height:26px}
	/* Hueco para que la barra no tape el final del pie: dentro del pie, que es oscuro */
	.cs-pagina--actividades .cs-footer::after{content:"";display:block;height:calc(76px + env(safe-area-inset-bottom))}
	html{scroll-padding-bottom:calc(84px + env(safe-area-inset-bottom))}
	/* El botón flotante de ajustes de cookies (Moove) quedaría encima de la barra */
	body.cs-pagina--actividades #moove_gdpr_save_popup_settings_button{bottom:calc(88px + env(safe-area-inset-bottom))}
	/* Y la insignia de vista previa, que taparía el texto del botón de la barra */
	body.cs-pagina--actividades .cs-preview-badge{bottom:calc(88px + env(safe-area-inset-bottom))}
}
body.cs-pagina--actividades.cs-menu-open #moove_gdpr_save_popup_settings_button{visibility:hidden}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
	.cs-apn-vac__foto--1,.cs-apn-vac__foto--4{transform:none}
	.cs-apn-barra{transition:none}
}