/* ==========================================================================
   CREATICS · contacto.css — lo propio de /contacto/ (prefijo .cs-ct-).
   Requiere los cinco comunes y actividades.css (familia «actividades»: banda de
   ayuda, barra fija del móvil, WhatsApp con texto oscuro). Solo lo que no existe:
   el héroe corto de texto, las dos puertas de arriba, las tarjetas de caso, el
   contacto por centro, el atajo de WhatsApp y el bloque «Dónde estamos». El
   formulario, las preguntas y el cierre oscuro son los componentes de siempre
   (.cs-form, .cs-faq, .cs-cierre).
   ========================================================================== */

/* ---------- Héroe: corto y de texto (es una página para hacer algo) ---------- */
.cs-ct-hero{padding-block:88px 40px}
.cs-ct-hero__in{gap:14px;align-items:flex-start}
.cs-ct-hero__t{font-size:var(--text-5xl);line-height:1.04;color:var(--cs-white)}
.cs-ct-hero .cs-lead{max-width:58ch}

/* ---------- Las dos puertas: lo primero y lo único que hay que decidir ---------- */
.cs-ct-puertas{scroll-margin-top:72px;padding-block:44px}
.cs-ct-puertas__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.cs-ct-puerta{--_c:var(--cs-blue);display:flex;flex-direction:column;gap:10px;padding:30px 30px 26px;background:var(--color-surface);border:1.5px solid var(--color-border);border-top:6px solid var(--_c);border-radius:var(--radius-card);box-shadow:var(--shadow-sm);scroll-margin-top:96px}
.cs-ct-puerta--pink{--_c:var(--cs-pink)}
.cs-ct-puerta--turquoise{--_c:var(--cs-turquoise)}
.cs-ct-puerta__t{margin:0;color:var(--_c)}
.cs-ct-puerta__sub{margin:0;font-family:var(--font-heading);font-weight:700;font-size:var(--text-lg);line-height:1.3;color:var(--cs-ink)}
.cs-ct-puerta__txt{margin:0;font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--color-ink-soft)}
.cs-ct-puerta__acciones{margin-top:auto;padding-top:16px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.cs-ct-puerta__acciones .cs-ct-accion--btn{min-height:52px}

/* ---------- Enlace de acción: fila pulsable de 44 px con icono ---------- */
.cs-ct-accion{display:inline-block;min-height:44px;padding-block:13px;font-size:var(--text-sm);font-weight:700;line-height:1.3;color:var(--cs-blue);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px;overflow-wrap:anywhere}
.cs-ct-accion:hover{color:var(--color-link-hover)}
.cs-ct-accion .cs-i{display:inline-block;width:18px;height:18px;margin-right:.45em;vertical-align:-4px}
/* La flecha y las estrellas son cajas en línea: así no heredan el subrayado del enlace */
.cs-ct-flecha{display:inline-block;margin-left:.4em;text-decoration:none}
.cs-ct-accion--btn{min-height:48px;white-space:normal;text-align:center;line-height:1.2}
.cs-ct-acciones{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.cs-ct-acciones li{max-width:100%}
.cs-ct-acciones li:first-child{margin-bottom:6px}

/* ---------- Otras consultas: tres casos compactos al final ---------- */
.cs-ct-otras{scroll-margin-top:72px}
.cs-ct-casos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.cs-ct-casos--otras .cs-ct-acciones li:first-child{margin-bottom:0}
.cs-ct-caso{--_c:var(--cs-blue);display:flex;flex-direction:column;gap:10px;padding:24px 24px 20px;background:var(--color-surface);border:1.5px solid var(--color-border);border-top:4px solid var(--_c);border-radius:var(--radius-card);box-shadow:var(--shadow-sm);scroll-margin-top:96px}
.cs-ct-caso--pink{--_c:var(--cs-pink)}
.cs-ct-caso--turquoise{--_c:var(--cs-turquoise)}
.cs-ct-caso--yellow{--_c:var(--cs-yellow)}
.cs-ct-caso__t{margin:0}
.cs-ct-caso__sub{margin:0;font-family:var(--font-mono);font-size:var(--text-2xs);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-wider);line-height:1.5;color:var(--color-ink-mute)}
.cs-ct-caso__txt{margin:0;font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--color-ink-soft)}
.cs-ct-caso .cs-ct-acciones{margin-top:auto;padding-top:8px}

/* ---------- El contacto de cada centro (destino de la primera puerta) ---------- */
.cs-ct-colegios{scroll-margin-top:72px}
.cs-ct-centros{display:flex;flex-direction:column;gap:22px;padding:32px;background:var(--neutral-50);border:1.5px solid var(--color-border);border-radius:var(--radius-card);scroll-margin-top:96px}
.cs-ct-centros .cs-h3{margin:0}
.cs-ct-centros__txt{margin:0;font-size:var(--text-base);line-height:var(--leading-normal);color:var(--color-ink-soft)}
.cs-ct-centros__lista{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.cs-ct-centro{display:flex;flex-direction:column;gap:6px;padding:20px 20px 14px;background:var(--color-surface);border:1.5px solid var(--color-border);border-radius:14px;scroll-margin-top:96px}
.cs-ct-centro__t{margin:0;font-family:var(--font-heading);font-weight:700;font-size:var(--text-lg);line-height:1.25;color:var(--cs-ink)}
.cs-ct-centro__t small{display:block;margin-top:4px;font-family:var(--font-mono);font-size:var(--text-2xs);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-wider);color:var(--color-ink-mute)}
.cs-ct-centro__persona{margin:4px 0 0;font-size:var(--text-base);font-weight:700;line-height:1.35;color:var(--cs-ink)}
.cs-ct-centro__horario{display:block;font-size:var(--text-sm);font-weight:500;color:var(--color-ink-soft)}
.cs-ct-centro__nota{margin:0;font-size:var(--text-sm);line-height:var(--leading-normal);color:var(--color-ink-soft)}
.cs-ct-acciones--centro li:first-child{margin-bottom:0}
.cs-ct-centro__pie{margin:auto 0 0;padding-top:8px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;border-top:1px solid var(--color-border)}
.cs-home .cs-ct-centro__wa{min-height:44px}   /* gana a .cs-home .cs-btn--sm (40 px) */
.cs-ct-centro--externo{background:transparent;border-style:dashed;border-color:var(--color-border-strong)}
.cs-ct-centros__otro{margin:0;font-size:var(--text-sm);line-height:var(--leading-normal);color:var(--color-ink-soft)}

/* ---------- Formulario y atajo de WhatsApp (cierre oscuro de siempre) ---------- */
.cs-ct-escribe{scroll-margin-top:64px}
.cs-home .cs-ct-escribe .cs-cierre__grid{align-items:start}
/* Vuelta del envío sin JavaScript (?cs_lead=…#contacto): el ancla va en el formulario y el aviso queda a la vista */
.cs-ct-escribe .cs-form{position:relative}
.cs-ct-escribe .cs-form>.cs-anchor{position:absolute;left:0;top:-96px}
/* En escritorio el atajo de WhatsApp acompaña mientras se recorre el formulario.
   .cs-photo-section lleva overflow:hidden, que anula position:sticky; clip recorta igual y lo permite. */
@media (min-width:1001px){.cs-ct-escribe{overflow:clip}.cs-home .cs-ct-escribe .cs-cierre__copy{position:sticky;top:96px}}
/* El titular del cierre de la portada es un lema; aquí es el título de un formulario */
.cs-home .cs-ct-escribe .cs-cierre__title{font-size:var(--text-4xl);letter-spacing:var(--tracking-tight)}
.cs-ct-atajo{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border-left:4px solid var(--cs-turquoise);border-radius:0 12px 12px 0;background:color-mix(in srgb,var(--cs-white) 8%,transparent);color:var(--cs-white)}
.cs-ct-atajo strong{font-family:var(--font-heading);font-size:var(--text-lg);line-height:1.25}
.cs-ct-atajo span{font-size:var(--text-sm);line-height:var(--leading-normal);color:color-mix(in srgb,var(--cs-white) 85%,transparent)}
.cs-ct-escribe__mail{margin:0;font-size:var(--text-sm);color:color-mix(in srgb,var(--cs-white) 85%,transparent)}
.cs-ct-escribe__mail a{display:inline-flex;align-items:center;gap:.4em;min-height:44px;font-weight:700;color:var(--cs-turquoise);text-decoration:underline;text-underline-offset:3px}
.cs-ct-escribe__mail a:hover{color:var(--cs-white)}
.cs-ct-escribe .cs-cierre__tel{gap:.4em}
.cs-ct-escribe textarea.cs-input{resize:vertical;min-height:112px;font-family:inherit;line-height:var(--leading-normal)}
.cs-ct-escribe .cs-field__label{gap:12px;align-items:baseline}
.cs-ct-escribe .cs-field__hint{text-align:right}

/* ---------- Dónde estamos ---------- */
.cs-ct-donde{scroll-margin-top:64px}
.cs-ct-donde__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center}
.cs-ct-donde__foto{position:relative;display:block;border-radius:18px;border:var(--border-bold) solid var(--cs-ink);box-shadow:var(--shadow-offset);overflow:hidden;color:var(--cs-ink);text-decoration:none;transition:transform var(--dur-fast) var(--ease-out)}
.cs-ct-donde__foto:hover{transform:translateY(-3px)}
.cs-ct-donde__foto img{display:block;width:100%;height:auto;aspect-ratio:8/5;object-fit:cover}
.cs-ct-donde__pin{position:absolute;left:14px;bottom:14px;display:inline-flex;align-items:center;gap:.45em;min-height:44px;padding:8px 14px;border-radius:var(--radius-pill);background:var(--cs-yellow);border:2px solid var(--cs-ink);font-family:var(--font-heading);font-weight:700;font-size:var(--text-sm);line-height:1.1}
.cs-ct-donde__copy{gap:18px;align-items:flex-start}
.cs-ct-donde__copy .cs-h2{margin:0;max-width:22ch}
.cs-ct-dir{display:flex;flex-direction:column;gap:6px}
.cs-ct-dir__t{margin:0;font-family:var(--font-mono);font-size:var(--text-2xs);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-wider);color:var(--color-ink-mute)}
.cs-ct-dir__txt{font-style:normal;font-family:var(--font-heading);font-weight:700;font-size:var(--text-xl);line-height:1.35;color:var(--cs-ink)}
.cs-ct-donde__acciones{gap:8px 20px}
.cs-ct-donde__acciones .cs-stars{display:inline-block;margin-right:.45em;color:var(--yellow-500);letter-spacing:1px;text-decoration:none}
.cs-ct-donde__hub{margin:0;padding-top:14px;border-top:1px solid var(--color-border-strong);width:100%;display:flex;flex-wrap:wrap;align-items:center;gap:0 14px;font-size:var(--text-base);color:var(--cs-ink)}

/* ---------- Banda final: reservas y WhatsApp ---------- */
.cs-ct-banda__acciones{gap:10px}

@media (max-width:1000px){
	.cs-ct-casos{grid-template-columns:minmax(0,1fr)}
	.cs-ct-centros__lista{grid-template-columns:repeat(2,minmax(0,1fr))}
	.cs-ct-caso .cs-ct-acciones{margin-top:0}
}
@media (max-width:900px){
	.cs-ct-puertas__grid{grid-template-columns:minmax(0,1fr)}
	.cs-ct-donde__grid{grid-template-columns:minmax(0,1fr);gap:28px}
}

/* ---------- Móvil ---------- */
@media (max-width:720px){
	.cs-ct-hero{padding-block:84px 28px}
	.cs-ct-hero__t{font-size:var(--text-4xl)}
	.cs-home .cs-ct-escribe .cs-cierre__title{font-size:var(--text-3xl)}
	.cs-ct-puertas{padding-block:32px}
	.cs-ct-puerta{padding:24px 18px 20px}
	.cs-ct-puerta__acciones{flex-direction:column;align-items:stretch;gap:8px}
	.cs-ct-puerta__acciones .cs-btn{width:100%}
	.cs-ct-caso{padding:20px 18px 16px}
	.cs-ct-accion--btn{width:100%}
	.cs-ct-acciones li:first-child{width:100%}
	.cs-ct-acciones--centro li:first-child{width:auto}
	.cs-ct-centros{padding:20px 16px}
	.cs-ct-centros__lista{grid-template-columns:minmax(0,1fr)}
	.cs-ct-dir__txt{font-size:var(--text-lg)}
	.cs-ct-donde__acciones{width:100%}
	.cs-ct-donde__acciones .cs-btn{width:100%}
	.cs-ct-banda__acciones{width:100%}
	.cs-ct-banda__acciones .cs-btn{width:100%}
}

@media (prefers-reduced-motion:reduce){
	.cs-ct-donde__foto{transition:none}
	.cs-ct-donde__foto:hover{transform:none}
}