/* ==========================================================================
   CREATICS · kantica.css — lo propio de la landing del AMPA CEIP Kantic@.
   Requiere fonts + tokens + base + creatics + home.css (cabecera, pie, formulario,
   FAQ, método, pilares y cierre vienen de ahí). Todo bajo body.cs-pagina--kantica.
   El recurso de la casa: la pegatina (borde 2,5 px en tinta + sombra dura 5 px).
   ========================================================================== */

/* ---------- Aviso de borrador (solo mientras haya datos pendientes) ---------- */
.cs-kt__aviso{margin:0;padding:10px var(--gutter);background:var(--cs-yellow);color:var(--cs-ink);border-bottom:var(--border-bold) solid var(--cs-ink);font-size:var(--text-sm);line-height:var(--leading-normal)}
.cs-kt__aviso summary{cursor:pointer;list-style:none}
.cs-kt__aviso summary::-webkit-details-marker{display:none}
.cs-kt__aviso ul{margin:8px 0 2px;padding-left:20px}

/* ---------- Cabecera de la landing ----------
   Logo, seis anclas, «Web completa» y «Solicitar cuenta» necesitan unos 1220 px.
   Por debajo, menú de hamburguesa, que lleva las anclas y «Ver la web completa»:
   la web completa queda siempre a un toque (y en el pie, también sin JavaScript). */
.cs-pagina--kantica .cs-nav__sec{white-space:nowrap}
.cs-pagina--kantica .cs-nav__links>.cs-nav__item{padding-inline:8px}
@media (max-width:1240px){
	.cs-pagina--kantica .cs-nav{padding-block:10px;gap:12px}
	.cs-pagina--kantica .cs-nav__links,.cs-pagina--kantica .cs-nav__sec{display:none}
	.cs-pagina--kantica .cs-nav__wa,.cs-pagina--kantica .cs-nav__burger{display:inline-flex}
	.cs-pagina--kantica .cs-nav__cta{min-height:44px}
}
/* En el móvil la fila no cabía y encogía el logotipo. WhatsApp ya está en el héroe,
   en la barra fija y en el menú; en los más estrechos sobra también la llamada,
   que está justo debajo, en el héroe. */
@media (max-width:420px){.cs-pagina--kantica .cs-nav__wa{display:none}}
@media (max-width:360px){.cs-pagina--kantica .cs-nav__cta{display:none}}
.cs-pagina--kantica .cs-menu__actions .cs-btn--outline{min-height:52px}

/* ---------- WhatsApp: el blanco sobre el verde de la marca da 2:1; la tinta, 9,5:1 ---------- */
.cs-pagina--kantica .cs-btn--whatsapp{--_fg:var(--cs-ink)}
.cs-pagina--kantica .cs-btn--whatsapp:hover,
.cs-pagina--kantica .cs-nav__wa,.cs-pagina--kantica .cs-nav__wa:hover,
.cs-pagina--kantica .cs-wa-float,.cs-pagina--kantica .cs-wa-float:hover{color:var(--cs-ink)}

/* ---------- Enlaces sobre fondo oscuro: al pasar el ratón, blanco (el rosa bajaba de 4,5:1) ---------- */
.cs-pagina--kantica .cs-section--ink a:not(.cs-btn):hover,
.cs-pagina--kantica .cs-section--deep a:not(.cs-btn):hover{color:#fff}

/* ---------- «Dónde estamos» sobre el fondo gris: turquesa más oscuro para llegar a 4,5:1 ---------- */
.cs-pagina--kantica .cs-kicker--highlight{color:var(--turquoise-700)}

/* ---------- Antetítulos largos: en la landing pueden partirse en dos líneas ----------
   El «Familias del AMPA CEIP Kantic@ · Curso 2026-2027» sin partir mide 389 px y
   ensanchaba toda la página en el móvil. */
.cs-pagina--kantica .cs-kicker{flex-wrap:nowrap;align-items:flex-start}
.cs-pagina--kantica .cs-kicker > span{white-space:normal;line-height:1.35}
.cs-pagina--kantica .cs-kicker__rule{flex:none;margin-top:.55em}

/* ---------- Héroe ---------- */
.cs-kt__hero{padding-block:clamp(36px,6vw,88px) clamp(40px,5vw,76px);background:var(--neutral-0)}
.cs-kt__hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);grid-template-areas:"top cerca" "bottom cerca";column-gap:clamp(28px,5vw,72px);row-gap:26px;align-items:center}
.cs-kt__hero-top{grid-area:top;gap:18px;align-items:flex-start;align-self:end}
.cs-kt__hero-bottom{grid-area:bottom;gap:18px;align-self:start}
.cs-kt-cerca{grid-area:cerca}
.cs-kt__title{font-size:clamp(2.15rem,1.2rem + 3.4vw,4.1rem);max-width:16ch;line-height:1.04}
.cs-kt__marca{background:var(--cs-yellow);box-shadow:5px 5px 0 var(--cs-ink);padding:0 .16em;border-radius:6px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.cs-kt__lead{max-width:46ch;color:var(--cs-ink)}
.cs-kt__hero-cta{gap:12px}

/* ---------- Infografía: del cole a la academia ---------- */
.cs-kt-cerca{margin:0;padding:26px 24px 20px;background:#fff;border:var(--border-bold) solid var(--cs-ink);border-radius:18px;box-shadow:var(--shadow-offset);transform:rotate(1.2deg);display:flex;flex-direction:column;gap:16px}
.cs-kt-cerca__mapa{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:10px}
.cs-kt-cerca__punto{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;width:112px}
.cs-kt-cerca__punto strong{font-family:var(--font-heading);font-weight:700;font-size:var(--text-sm);line-height:1.15;color:var(--cs-ink)}
.cs-kt-cerca__punto small{font-family:var(--font-mono);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--color-ink-mute)}
.cs-kt-cerca__icono{display:flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:50%;border:var(--border-bold) solid var(--cs-ink);box-shadow:3px 3px 0 var(--cs-ink)}
.cs-kt-cerca__icono .cs-i{width:34px;height:34px}
.cs-kt-cerca__icono--cole{background:var(--cs-yellow);color:var(--cs-ink)}
.cs-kt-cerca__icono--hub{background:var(--cs-ink)}
.cs-kt-cerca__icono--hub img{width:40px;height:auto}
.cs-kt-cerca__camino{display:flex;flex-direction:column;align-items:center;gap:10px;padding-top:10px}
/* Por defecto la etiqueta puede partirse en dos líneas para no pisar los círculos;
   entera, en pastilla, solo desde 1181 px, donde hay sitio de sobra. */
.cs-kt-cerca__tiempo{max-width:100%;padding:6px 10px;border-radius:12px;background:var(--cs-pink);color:#fff;border:2px solid var(--cs-ink);font-family:var(--font-heading);font-weight:700;font-size:var(--text-sm);line-height:1.1;text-align:center;transform:rotate(-2deg)}
.cs-kt-cerca__puntos{display:flex;align-items:center;justify-content:space-between;width:100%;min-width:64px}
.cs-kt-cerca__puntos i{width:9px;height:9px;border-radius:50%;background:var(--cs-ink);flex:none}
.cs-kt-cerca__puntos i:nth-child(3n+1){background:var(--cs-pink)}
.cs-kt-cerca__puntos i:nth-child(3n+2){background:var(--turquoise-600)}
.cs-kt-cerca__pie{margin:0;padding-top:14px;border-top:1.5px dashed var(--color-border-strong);font-size:var(--text-sm);line-height:var(--leading-normal);color:var(--color-ink-soft);text-align:center}
/* En escritorio ancho, más grande: es uno de los dos mensajes principales de la página.
   Entre 1001 y 1180 px la tarjeta es estrecha y se queda con el tamaño normal. */
@media (min-width:1181px){
	.cs-kt-cerca{padding:34px 30px 24px;gap:20px}
	.cs-kt-cerca__punto{width:118px;gap:10px}
	.cs-kt-cerca__punto strong{font-size:var(--text-md)}
	.cs-kt-cerca__icono{width:96px;height:96px;box-shadow:4px 4px 0 var(--cs-ink)}
	.cs-kt-cerca__icono .cs-i{width:44px;height:44px}
	.cs-kt-cerca__icono--hub img{width:54px}
	.cs-kt-cerca__camino{padding-top:18px;gap:14px}
	.cs-kt-cerca__tiempo{font-size:var(--text-base);padding:8px 14px;white-space:nowrap;border-radius:var(--radius-pill)}
	.cs-kt-cerca__puntos i{width:12px;height:12px}
	.cs-kt-cerca__pie{font-size:var(--text-md)}
}
/* Hasta 1000 px, el héroe en una columna: texto, infografía y botones. En dos
   columnas la tarjeta quedaba tan estrecha que la etiqueta pisaba los círculos. */
@media (max-width:1000px){
	.cs-kt__hero-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "cerca" "bottom";row-gap:22px}
	.cs-kt-cerca{transform:none;max-width:560px}
}
@media (max-width:860px){
	.cs-kt__hero{padding-block:24px 40px}
	.cs-kt-cerca{padding:18px 14px 14px;gap:12px}
	.cs-kt-cerca__punto{width:92px}
	.cs-kt-cerca__icono{width:58px;height:58px}
	.cs-kt-cerca__icono .cs-i{width:28px;height:28px}
	.cs-kt-cerca__icono--hub img{width:32px}
	.cs-kt-cerca__pie{padding-top:10px}
	.cs-kt-cerca__mapa{gap:6px}
	.cs-kt__hero-cta .cs-btn{flex:1 1 100%}
}
@media (max-width:360px){.cs-kt-cerca__punto{width:78px}.cs-kt-cerca__tiempo{font-size:var(--text-xs);padding:5px 8px}}

/* ---------- La ventaja: tres pegatinas ---------- */
.cs-kt__stickers{gap:28px}
.cs-kt__sticker{display:flex;flex-direction:column;gap:10px;padding:26px 24px;border-radius:16px;border:var(--border-bold) solid var(--cs-ink);box-shadow:var(--shadow-offset);background:#fff;transform:rotate(-1deg)}
.cs-kt__sticker:nth-child(2){transform:rotate(1deg)}
.cs-kt__sticker:nth-child(3){transform:rotate(-.6deg)}
.cs-kt__sticker--yellow{background:var(--cs-yellow)}
.cs-kt__sticker--turquoise{background:var(--cs-turquoise)}
.cs-kt__sticker--pink{background:var(--cs-pink);color:#fff}
.cs-kt__sticker-grande{font-family:var(--font-heading);font-weight:700;font-size:clamp(1.6rem,1.1rem + 1.5vw,2.3rem);line-height:1.02;letter-spacing:var(--tracking-tight)}
.cs-kt__sticker-texto{font-size:var(--text-sm);line-height:var(--leading-normal)}
.cs-kt__sticker-nota{margin-top:auto;font-family:var(--font-heading);font-weight:700;font-size:var(--text-xs);padding-top:8px;border-top:1.5px solid rgba(14,16,32,.25)}
.cs-kt__sticker--pink .cs-kt__sticker-nota{border-top-color:rgba(255,255,255,.4)}
.cs-kt__condiciones{max-width:70ch;font-size:var(--text-sm);color:var(--color-ink-soft);padding-left:16px;border-left:4px solid var(--cs-yellow)}
@media (max-width:720px){.cs-kt__sticker,.cs-kt__sticker:nth-child(2),.cs-kt__sticker:nth-child(3){transform:none}.cs-kt__stickers{gap:20px}.cs-kt__sticker{padding:22px 20px}}

/* ---------- Cómo se pide ---------- */
.cs-kt__pasos .cs-h2{color:#fff}
.cs-kt__lista-pasos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:28px}
.cs-kt__paso{display:flex;gap:16px;align-items:flex-start;padding:24px;border-radius:16px;background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.16)}
.cs-kt__paso h3{color:#fff}
.cs-kt__paso p{color:rgba(255,255,255,.82);font-size:var(--text-sm);line-height:var(--leading-normal)}
.cs-kt__paso-num{flex:none;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--cs-turquoise);color:var(--cs-ink);font-family:var(--font-heading);font-weight:700;font-size:var(--text-lg);border:var(--border-bold) solid var(--cs-ink);box-shadow:3px 3px 0 #fff}
.cs-kt__paso-cta{align-self:flex-start;margin-top:4px}
.cs-kt__porque{max-width:64ch;color:var(--mint-300);font-family:var(--font-heading);font-weight:600;font-size:var(--text-md);padding-left:16px;border-left:4px solid var(--cs-turquoise)}

/* ---------- Actividades ---------- */
.cs-kt__filtros{display:flex;flex-wrap:wrap;gap:10px}
.cs-kt__filtros .cs-pill{min-height:44px}
.cs-kt__act-grid{gap:28px}
.cs-kt__act[hidden]{display:none}
.cs-kt__act .cs-card__img{width:100%;aspect-ratio:3/2;height:auto;object-fit:cover}
.cs-kt__edad{align-self:flex-start;font-size:var(--text-sm);padding:6px 12px;margin-top:-34px;position:relative;z-index:1}
.cs-kt__horario{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:12px;padding:28px;border-radius:16px;background:var(--cs-yellow);border:var(--border-bold) solid var(--cs-ink);box-shadow:var(--shadow-offset)}
.cs-kt__horario p{font-size:var(--text-sm);line-height:var(--leading-normal)}
@media (max-width:1000px){.cs-kt__act-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.cs-kt__act-grid{grid-template-columns:1fr}}

/* ---------- Método y filosofía (estructura de la portada) ---------- */
.cs-kt__metodo .cs-section__head,.cs-kt__filosofia .cs-section__head{max-width:720px}
.cs-kt__datos{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.cs-kt__datos li{padding:7px 12px;border-radius:var(--radius-pill);background:#fff;border:2px solid var(--cs-ink);font-family:var(--font-heading);font-weight:700;font-size:var(--text-xs)}
@media (max-width:720px){.cs-kt__filosofia .cs-photo-card{height:300px}}

/* ---------- Prueba social ---------- */
.cs-kt__nota{display:flex;flex-wrap:wrap;align-items:center;gap:28px}
.cs-kt__nota-num{display:flex;flex-direction:column;align-items:center;gap:4px;padding:18px 26px;border-radius:16px;background:#fff;border:var(--border-bold) solid var(--cs-ink);box-shadow:var(--shadow-offset);text-decoration:none;color:var(--cs-ink);transform:rotate(-2deg)}
.cs-kt__nota-n{font-family:var(--font-heading);font-weight:700;font-size:3.2rem;line-height:.9}
.cs-kt__nota-num .cs-stars{font-size:var(--text-lg);letter-spacing:1px;-webkit-text-stroke:.4px var(--cs-ink)}
.cs-kt__review{border:var(--border-bold) solid var(--cs-ink);box-shadow:var(--shadow-offset)}

/* ---------- Dónde ---------- */
.cs-kt__dos{gap:56px;align-items:center;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}   /* a 320 px la pista de 320 se salía */
.cs-kt__dir{display:flex;align-items:center;gap:8px;font-family:var(--font-heading);font-weight:700;font-size:var(--text-sm)}
.cs-kt__dir .cs-i{color:var(--cs-pink)}
.cs-kt__mapa{position:relative;display:block;border-radius:16px;overflow:hidden;border:var(--border-bold) solid var(--cs-ink);box-shadow:var(--shadow-offset);color:#fff;text-decoration:none}
.cs-kt__mapa img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.cs-kt__mapa-cara{position:absolute;left:0;right:0;bottom:0;padding:18px 20px;display:flex;flex-direction:column;gap:4px;background:linear-gradient(to top,rgba(14,16,32,.92),rgba(14,16,32,0));font-size:var(--text-sm)}
.cs-kt__mapa-cara strong{font-family:var(--font-heading);font-size:var(--text-lg)}
.cs-kt__mapa-cara span{color:var(--cs-turquoise);font-weight:700}
.cs-kt__mapa:hover .cs-kt__mapa-cara span{text-decoration:underline}
@media (max-width:720px){.cs-kt__dos{gap:28px}}

/* ---------- Cierre ---------- */
.cs-kt__cierre{padding-block:96px}
/* En escritorio, texto y dudas a la izquierda y el formulario a la derecha; en el
   móvil, texto, formulario y después las dudas: quien pulsa «Solicitar mi cuenta»
   llega al formulario, no a tres alternativas. */
.cs-kt__cierre .cs-cierre__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"copy form" "contacto form";align-items:start;column-gap:56px;row-gap:28px}
.cs-kt__cierre .cs-cierre__copy{grid-area:copy;align-self:end}
.cs-kt__cierre .cs-form{grid-area:form;position:relative}
.cs-kt__cierre .cs-form>.cs-anchor{position:absolute;left:0;top:-96px}   /* vuelta sin JavaScript: el aviso queda a la vista */
.cs-kt__contacto{grid-area:contacto}
@media (max-width:860px){.cs-kt__cierre .cs-cierre__grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "form" "contacto";row-gap:32px}}
/* Bordes de los campos: con el 25 % de blanco no llegaban a 3:1 */
.cs-pagina--kantica .cs-form .cs-input:not(:focus){border-color:rgba(255,255,255,.42)}
.cs-kt__cierre .cs-form textarea.cs-input{min-height:64px;resize:vertical;font-family:inherit}
.cs-kt__contacto{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:20px 22px;border-radius:14px;background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.16)}
.cs-kt__contacto-t{font-family:var(--font-heading);font-weight:700;color:#fff}
.cs-kt__contacto-tel{display:inline-flex;align-items:center;gap:10px;min-height:48px;font-family:var(--font-heading);font-weight:700;font-size:var(--text-xl);color:var(--cs-turquoise);text-decoration:none}
.cs-kt__contacto-tel:hover{text-decoration:underline;text-underline-offset:5px}
.cs-kt__contacto-mail{font-size:var(--text-sm);color:rgba(255,255,255,.78)}
.cs-kt__contacto-mail a{display:inline-flex;align-items:center;min-height:44px;color:var(--cs-turquoise);font-weight:700}
.cs-pagina--kantica .cs-footer__col a{min-height:44px}
@media (max-width:720px){.cs-kt__cierre{padding-block:64px}}

/* ---------- Barra fija en el móvil ---------- */
.cs-kt-barra{display:none}
@media (max-width:720px){
	.cs-pagina--kantica .cs-wa-float{display:none}          /* la barra ya lleva WhatsApp */
	.cs-kt-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-kt-barra.is-visible{transform:none;visibility:visible}
	.cs-kt-barra__cta{flex:1;min-height:52px;font-size:var(--text-base)}
	.cs-kt-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-kt-barra__wa:hover{color:var(--cs-ink)}
	.cs-kt-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--kantica .cs-footer::after{content:"";display:block;height:calc(76px + env(safe-area-inset-bottom))}
	/* Al tabular, el navegador deja el elemento enfocado por encima de la barra */
	html{scroll-padding-bottom:calc(84px + env(safe-area-inset-bottom))}
	/* El botón flotante de ajustes de cookies (Moove) quedaba encima de «Solicitar mi cuenta» */
	body.cs-pagina--kantica #moove_gdpr_save_popup_settings_button{bottom:calc(88px + env(safe-area-inset-bottom))}
}
body.cs-pagina--kantica.cs-menu-open #moove_gdpr_save_popup_settings_button{visibility:hidden}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
	.cs-kt-cerca,.cs-kt-cerca__tiempo,.cs-kt__sticker,.cs-kt__sticker:nth-child(2),.cs-kt__sticker:nth-child(3),.cs-kt__nota-num{transform:none}
	.cs-kt-barra{transition:none}
}