/**
 * /acogida/ v2 — EL AMANECER. Sobre el CSS compartido page-servicios.css.
 *
 * La línea de horarios renace como EL ARCO DEL SOL: un arco de cera con las paradas horarias como
 * muescas y un SOL de cera que lo viaja (page-acogida.js: sigue al cursor, deriva al salir, tap y
 * teclado). El CIELO del bloque vira con la posición del sol (--sun-t): amanece de 7:30 (ámbar-
 * rosado) a día pleno (9:30); por la tarde atardece hacia las 17:30. Mini-arco espejo para la
 * tarde. Toques: el reloj de cera del titular y el ambiente de alba del hero. Serena por encima de todo.
 */

.sf-acogida {
	--sf-ac-sol: #f4ac3f;
	--sf-ac-sol-2: #ef9f27;
	--sf-ac-tinta: var(--wp--preset--color--verde-bosque, #0b2e1f);
	--sf-ac-crema: var(--wp--preset--color--crema, #f7f5ef);
}

/* ===========================================================================
 * 1) EL HERO — ambiente de alba + el reloj del titular.
 * ========================================================================= */
.sf-acogida .sf-svc-hero { position: relative; overflow: hidden; }
/* Degradado de alba muy sutil, naciendo desde abajo (6–8%). */
.sf-acogida .sf-svc-hero::before {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient( to top, rgba(240, 168, 88, 0.08) 0%, rgba(238, 186, 168, 0.05) 24%, transparent 48% );
	pointer-events: none;
	z-index: 0;
}
.sf-acogida .sf-svc-hero__inner { position: relative; z-index: 1; }

/* Motas de polvo de mañana (crema, blur, derivando lentísimo). */
.sf-acog-motes { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.sf-acog-motes span {
	position: absolute;
	width: 7px; height: 7px;
	border-radius: 50%;
	background: color-mix( in srgb, var(--sf-ac-crema) 82%, white );
	filter: blur(1.2px);
	opacity: 0;
}
.sf-acog-motes span:nth-child(1) { left: 22%; top: 62%; }
.sf-acog-motes span:nth-child(2) { left: 54%; top: 34%; width: 5px; height: 5px; }
.sf-acog-motes span:nth-child(3) { left: 74%; top: 70%; width: 6px; height: 6px; }
.sf-js .sf-acog-motes span { animation: sf-ac-mote 17s ease-in-out infinite; }
.sf-js .sf-acog-motes span:nth-child(2) { animation-duration: 22s; animation-delay: -6s; }
.sf-js .sf-acog-motes span:nth-child(3) { animation-duration: 26s; animation-delay: -12s; }
@keyframes sf-ac-mote {
	0%   { opacity: 0; transform: translate( 0, 0 ); }
	20%  { opacity: 0.7; }
	50%  { transform: translate( 26px, -34px ); }
	80%  { opacity: 0.5; }
	100% { opacity: 0; transform: translate( 52px, -70px ); }
}

/* El reloj de cera junto a "horario". */
.sf-acog-reloj-wrap { position: relative; white-space: nowrap; }
.sf-acog-reloj {
	display: inline-block;
	width: 0.82em; height: 0.82em;
	margin-left: 0.14em;
	overflow: visible;
	vertical-align: baseline;
	color: currentColor;
}
.sf-acog-reloj__face { fill: none; stroke: currentColor; stroke-width: 2.4; opacity: 0.9; }
.sf-acog-reloj__pin { fill: currentColor; }
.sf-acog-reloj__hour, .sf-acog-reloj__min {
	stroke: currentColor;
	stroke-linecap: round;
	transform-box: view-box;
	transform-origin: 20px 20px;
}
.sf-acog-reloj__hour { stroke-width: 2.6; transform: rotate( 225deg ); }
.sf-acog-reloj__min  { stroke-width: 2;   transform: rotate( 180deg ); }
/* Al cargar, un giro de llegada clava las agujas en las 7:30; ENCADENADO, el reloj queda VIVO:
   el minutero da una vuelta cada 60s (linear) y la horaria avanza su proporción (una cada 720s).
   El giro de llegada no lleva fill → al terminar revierte a la base (225°/180°), que es justo el
   inicio del bucle: empalme sin salto. */
.sf-js .sf-acog-reloj__hour { animation: sf-ac-clock-h 1.2s cubic-bezier(0.2, 1.2, 0.4, 1), sf-ac-hour-loop 720s linear 1.2s infinite; }
.sf-js .sf-acog-reloj__min  { animation: sf-ac-clock-m 1.2s cubic-bezier(0.2, 1.2, 0.4, 1), sf-ac-min-loop 60s linear 1.2s infinite; }
@keyframes sf-ac-clock-h { from { transform: rotate( -495deg ); } to { transform: rotate( 225deg ); } }
@keyframes sf-ac-clock-m { from { transform: rotate( -540deg ); } to { transform: rotate( 180deg ); } }
@keyframes sf-ac-hour-loop { from { transform: rotate( 225deg ); } to { transform: rotate( 585deg ); } }
@keyframes sf-ac-min-loop  { from { transform: rotate( 180deg ); } to { transform: rotate( 540deg ); } }

/* ===========================================================================
 * 2) EL ARCO DEL SOL.
 * ========================================================================= */
.sf-acog-arco {
	position: relative;
	margin: clamp(1.5rem, 4vh, 3rem) auto 0;
	padding-bottom: clamp(0.5rem, 2vh, 1.25rem);
	max-width: 56rem;
	isolation: isolate;
}
.sf-acog-arco--tarde { max-width: 40rem; margin-top: clamp(1rem, 3vh, 2rem); }

/* El cielo del bloque (detrás del arco, CONTENIDO en el bloque para no lavar el texto vecino).
   Su opacidad la maneja --sun-t. Muy suave: pastel + tope moderado. */
.sf-acog-sky {
	position: absolute;
	left: -6%; right: -6%; top: 14%; bottom: 0;
	z-index: -1;
	pointer-events: none;
	border-radius: 48% / 60%;
	transition: opacity 0.5s ease;
}
.sf-acog-arco--manana .sf-acog-sky {
	background: radial-gradient( 116% 96% at 50% 94%, #f5d2b2 0%, #f9e2d6 42%, rgba(249, 233, 224, 0.3) 68%, transparent 82% );
	opacity: calc( ( 1 - var(--sun-t, 0.5) ) * 0.78 );
}
.sf-acog-arco--tarde .sf-acog-sky {
	background: radial-gradient( 118% 100% at 50% 96%, #eeb693 0%, #ebc2c4 42%, #d7c6da 70%, transparent 88% );
	opacity: calc( var(--sun-t, 0.5) * 0.78 );
}

.sf-acog-arco__svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: manipulation; }

/* Trazo de cera doble. */
.sf-acog-arc { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sf-acog-arc__halo { stroke: var(--sf-ac-crema); stroke-width: 12; opacity: 0.85; }
.sf-acog-arc__line { stroke: var(--sf-ac-tinta); stroke-width: 5; }
.sf-js .sf-acog-arc { stroke-dasharray: 100; stroke-dashoffset: 100; }
.sf-js .sf-acog-arco.is-inview .sf-acog-arc { stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s cubic-bezier(0.4, 0, 0.2, 1); }

/* Muescas horarias. */
.sf-acog-notch { cursor: pointer; }
.sf-acog-notch__hit { fill: transparent; }
.sf-acog-notch__dot {
	fill: var(--sf-ac-crema);
	stroke: var(--sf-ac-tinta);
	stroke-width: 3;
	transition: stroke-width 0.25s ease, fill 0.25s ease;
}
.sf-acog-notch__time {
	font-family: var(--wp--preset--font-family--etiquetas);
	font-size: 15px;
	letter-spacing: 0.02em;
	fill: var(--sf-ac-tinta);
}
.sf-acog-notch.is-near .sf-acog-notch__dot { fill: var(--sf-ac-sol); stroke: var(--sf-ac-sol-2); stroke-width: 4; }
.sf-acog-notch:focus { outline: none; }
.sf-acog-notch:focus-visible .sf-acog-notch__dot { stroke: var(--wp--preset--color--primario, #00a74d); stroke-width: 4.5; }

/* El sol de cera. */
.sf-acog-sun-wrap { filter: drop-shadow( 0 0 9px rgba(244, 172, 63, 0.55) ); will-change: transform; }
.sf-acog-sun__core { fill: var(--sf-ac-sol); }
.sf-acog-sun__ray { stroke: var(--sf-ac-sol-2); stroke-width: 3; stroke-linecap: round; }
.sf-js .sf-acog-arco.is-inview .sf-acog-sun { animation: sf-ac-sunspin 26s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes sf-ac-sunspin { to { transform: rotate( 360deg ); } }

/* La caption (crossfade). */
.sf-acog-caption {
	position: relative;
	margin: clamp(0.5rem, 2vh, 1.25rem) auto 0;
	min-height: 4.2rem;
	text-align: center;
}
.sf-acog-caption__item {
	position: absolute;
	left: 0; right: 0; top: 0;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	opacity: 0;
	transform: translateY( 6px );
	transition: opacity 0.4s ease, transform 0.4s ease;
	pointer-events: none;
}
.sf-acog-caption__item.is-active { opacity: 1; transform: none; }
.sf-acog-caption__t {
	font-family: var(--wp--preset--font-family--titulos);
	font-weight: 400;
	font-size: clamp(1.4rem, 3.2vw, 2rem);
	line-height: 1.05;
	color: var(--sf-ac-tinta);
}
.sf-acog-caption__s {
	font-family: var(--wp--preset--font-family--cuerpo);
	font-style: italic;
	font-size: 0.98rem;
	color: color-mix( in srgb, var(--wp--preset--color--tinta, #173404) 82%, transparent );
}

.sf-acog-tarde-title {
	margin: clamp(2.5rem, 6vh, 4rem) 0 0;
	text-align: center;
	font-family: var(--wp--preset--font-family--titulos);
	font-weight: 400;
	font-size: clamp(1.3rem, 3vw, 1.8rem);
	color: var(--sf-ac-tinta);
}
.sf-acog-medias { text-align: center; margin-top: clamp(2rem, 5vh, 3.25rem); font-size: 1rem; }

/* ---------------------------------------------------------------------------
 * EL PERCHERO — se llena de abrigos con el sol (una percha por muesca).
 * ------------------------------------------------------------------------- */
.sf-acog-perchero { margin: clamp(1.75rem, 4.5vh, 3rem) auto 0; max-width: 30rem; }
.sf-acog-perchero__svg { display: block; width: 100%; height: auto; overflow: visible; }
.sf-acog-perchero__bar { fill: none; stroke: var(--sf-ac-tinta); stroke-width: 4; stroke-linecap: round; }
.sf-acog-hook { fill: none; stroke: var(--sf-ac-tinta); stroke-width: 2.4; stroke-linecap: round; } /* parte del mueble: siempre visible. */
.sf-acog-coat__body { fill: var(--cc, #e2ac57); stroke: var(--sf-ac-tinta); stroke-width: 2.2; stroke-linejoin: round; }
.sf-acog-coat__collar { fill: none; stroke: var(--sf-ac-tinta); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sf-acog-coat__bag { fill: color-mix( in srgb, var(--cc, #e2ac57) 60%, #fff ); stroke: var(--sf-ac-tinta); stroke-width: 2; }
.sf-acog-coat__strap { fill: none; stroke: var(--sf-ac-tinta); stroke-width: 1.8; stroke-linecap: round; }
/* Cuelga/descuelga con el sol (bidireccional); cuelga con un settle de percha. */
.sf-acog-coat {
	opacity: 0;
	transform: translateY( -6px ) scale( 0.9 );
	transform-box: fill-box;
	transform-origin: top center;
	transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.34, 1.5, 0.5, 1);
}
.sf-acog-coat.is-hung { opacity: 1; transform: none; }
.sf-acog-perchero__cap {
	margin: clamp(0.6rem, 2vh, 1rem) 0 0;
	text-align: center;
	font-family: var(--wp--preset--font-family--etiquetas);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	color: color-mix( in srgb, var(--wp--preset--color--tinta, #173404) 84%, transparent );
}

/* ===========================================================================
 * 3) AIRE pre-CTA. El aire y la costura los da la utilidad compartida .sf-pre-cta (+ .sf-pre-cta--xl,
 *    opt-in, aplicada en el markup del CTA de acogida: hueco crema por margen para separar la costura).
 *    Aquí solo la RESPIRACIÓN DE CIERRE de la FAQ (espaciado del CONTENIDO, no parche del CTA): que
 *    el último acordeón no muera pegado al borde de su bloque.
 * ========================================================================= */
.sf-acogida .sf-svc-sec--crema:has( .sf-svc-faq ) { padding-block-end: clamp(4rem, 8vh, 6rem); }

/* ===========================================================================
 * MÓVIL — tap por muescas; el arco escala a lo ancho (se mantiene legible).
 * ========================================================================= */
@media (max-width: 720px) {
	.sf-acog-notch__time { font-size: 19px; }
	.sf-acog-caption { min-height: 4.8rem; }
	/* Perchero de 3 perchas: se ocultan la 2ª y la 4ª (quedan 3 repartidas). */
	.sf-acog-perchero__svg > g:nth-of-type(2),
	.sf-acog-perchero__svg > g:nth-of-type(4) { display: none; }
}
@media (max-width: 768px) {
	.sf-acog-motes { display: none; }
}

/* ===========================================================================
 * REDUCED-MOTION — sol fijo en su reposo (8:30 / 17:00), cielos estáticos, captions visibles.
 * ========================================================================= */
@media (prefers-reduced-motion: reduce) {
	.sf-acog-motes span { animation: none !important; opacity: 0 !important; }
	.sf-js .sf-acog-reloj__hour, .sf-js .sf-acog-reloj__min { animation: none !important; }
	.sf-js .sf-acog-arc { stroke-dashoffset: 0; }
	.sf-js .sf-acog-arco.is-inview .sf-acog-arc { transition: none; }
	.sf-js .sf-acog-arco.is-inview .sf-acog-sun { animation: none !important; }
	.sf-acog-sky { transition: none; }
	/* Perchero a medio llenar y quieto (las pre-colgadas por defecto = mitad). */
	.sf-acog-coat { transition: none !important; }
}