/* ==========================================================================
   Acolita — capa Material Design 3 sobre los tokens de theme.json.
   Los colores, tamaños y formas salen de --wp--preset-* y --wp--custom-*;
   aquí vive el comportamiento: elevación, state layers y los componentes.
   ========================================================================== */

:root{
	/* El sistema decide claro u oscuro; aquí no se fuerza ninguno. */

	--p:var(--wp--preset--color--primary);
	--on-p:var(--wp--preset--color--on-primary);
	--pc:var(--wp--preset--color--primary-container);
	--on-pc:var(--wp--preset--color--on-primary-container);
	--sc:var(--wp--preset--color--secondary-container);
	--on-sc:var(--wp--preset--color--on-secondary-container);
	--tc:var(--wp--preset--color--tertiary-container);
	--on-tc:var(--wp--preset--color--on-tertiary-container);
	--err:var(--wp--preset--color--error);
	--errc:var(--wp--preset--color--error-container);
	--on-errc:var(--wp--preset--color--on-error-container);
	--surf:var(--wp--preset--color--surface);
	--surf-1:var(--wp--preset--color--surface-container-low);
	--surf-2:var(--wp--preset--color--surface-container);
	--surf-3:var(--wp--preset--color--surface-container-high);
	--blanco:var(--wp--preset--color--surface-bright);
	--tinta:var(--wp--preset--color--on-surface);
	--tinta-2:var(--wp--preset--color--on-surface-variant);
	--linea:var(--wp--preset--color--outline);
	--linea-2:var(--wp--preset--color--outline-variant);
	--marca:var(--wp--preset--color--marca);

	--r-xs:var(--wp--custom--forma--xs);
	--r-sm:var(--wp--custom--forma--sm);
	--r-md:var(--wp--custom--forma--md);
	--r-lg:var(--wp--custom--forma--lg);
	--r-xl:var(--wp--custom--forma--xl);
	--r-full:var(--wp--custom--forma--completo);

	--e1:var(--wp--custom--elevacion--1);
	--e2:var(--wp--custom--elevacion--2);
	--e3:var(--wp--custom--elevacion--3);

	--curva:var(--wp--custom--curva);
	--alto:var(--wp--custom--alto-control);
}

*,*::before,*::after{box-sizing:border-box}

/* `hidden` pierde contra cualquier display explícito, y aquí casi todo es flex
   o grid. Sin esta línea el chevron de volver sale en el paso 1. */
[hidden]{display:none !important}

.wp-site-blocks{min-height:100svh;display:flex;flex-direction:column}
.wp-site-blocks>main{flex:1}

::selection{background:var(--pc);color:var(--on-pc)}

:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{
	outline:3px solid var(--p);
	outline-offset:2px;
	border-radius:var(--r-xs);
}

/* ==========================================================================
   State layer — el gesto que hace que Material se sienta Material.
   Una capa del color de contenido a 8% en hover y 12% al pulsar.
   ========================================================================== */

.md-estado{position:relative;overflow:hidden;isolation:isolate}
.md-estado::after{
	content:"";position:absolute;inset:0;
	background:currentColor;opacity:0;
	transition:opacity .12s var(--curva);
	pointer-events:none;z-index:0;
}
.md-estado:hover::after{opacity:.08}
.md-estado:active::after{opacity:.12}
.md-estado>*{position:relative;z-index:1}

/* ==========================================================================
   Botones
   ========================================================================== */

.md-btn{
	display:inline-flex;align-items:center;justify-content:center;gap:8px;
	min-height:var(--alto);padding:0 24px;
	border:none;border-radius:var(--r-full);
	font-family:inherit;font-size:.9375rem;font-weight:600;letter-spacing:.01em;
	line-height:1;text-decoration:none;cursor:pointer;
	transition:box-shadow .18s var(--curva), background-color .18s var(--curva);
	position:relative;overflow:hidden;isolation:isolate;
}
.md-btn::after{
	content:"";position:absolute;inset:0;background:currentColor;opacity:0;
	transition:opacity .12s var(--curva);pointer-events:none;z-index:0;
}
.md-btn:hover::after{opacity:.08}
.md-btn:active::after{opacity:.12}
.md-btn>*{position:relative;z-index:1}
.md-btn svg{flex:0 0 auto}

.md-btn--relleno{background:var(--p);color:var(--on-p)}
.md-btn--relleno:hover{box-shadow:var(--e1);color:var(--on-p);background:var(--mal-primary-hover,var(--p))}
.md-btn--tonal{background:var(--sc);color:var(--on-sc)}
.md-btn--tonal:hover{box-shadow:var(--e1);color:var(--on-sc)}
.md-btn--elevado{background:var(--surf-1);color:var(--p);box-shadow:var(--e1)}
.md-btn--elevado:hover{box-shadow:var(--e2);color:var(--p)}
.md-btn--contorno{background:transparent;color:var(--p);box-shadow:inset 0 0 0 1px var(--linea)}
.md-btn--contorno:hover{box-shadow:inset 0 0 0 1px var(--p);color:var(--p)}
.md-btn--texto{background:transparent;color:var(--p);padding:0 12px}
.md-btn--peligro{background:var(--errc);color:var(--on-errc)}
.md-btn--negro{background:var(--tinta);color:var(--surf)}
.md-btn--bloque{width:100%}
.md-btn--alto{min-height:56px;font-size:1rem}
.md-btn[disabled],.md-btn[aria-disabled="true"]{
	background:color-mix(in srgb, var(--tinta) 12%, transparent);
	color:color-mix(in srgb, var(--tinta) 38%, transparent);
	box-shadow:none;cursor:not-allowed;pointer-events:none;
}

/* Botón de icono */
.md-icono{
	display:inline-flex;align-items:center;justify-content:center;
	width:40px;height:40px;min-width:40px;padding:0;
	border:none;border-radius:var(--r-full);
	background:transparent;color:var(--tinta-2);cursor:pointer;
	position:relative;overflow:hidden;isolation:isolate;
}
.md-icono::after{content:"";position:absolute;inset:0;background:currentColor;opacity:0;transition:opacity .12s;pointer-events:none}
.md-icono:hover::after{opacity:.08}
.md-icono:active::after{opacity:.12}
.md-icono svg{position:relative;z-index:1}

/* FAB */
.md-fab{
	display:inline-flex;align-items:center;gap:10px;
	min-height:56px;padding:0 20px;
	border:none;border-radius:var(--r-lg);
	background:var(--pc);color:var(--on-pc);
	box-shadow:var(--e3);
	font-family:inherit;font-size:.9375rem;font-weight:600;
	cursor:pointer;text-decoration:none;
	position:relative;overflow:hidden;isolation:isolate;
	transition:box-shadow .18s var(--curva);
}
.md-fab::after{content:"";position:absolute;inset:0;background:currentColor;opacity:0;transition:opacity .12s;pointer-events:none}
.md-fab:hover{box-shadow:var(--e4,0 6px 10px 4px rgba(0,32,27,.10),0 2px 3px rgba(0,32,27,.20));color:var(--on-pc)}
.md-fab:hover::after{opacity:.08}
.md-fab>*{position:relative;z-index:1}

/* Los botones nativos de Gutenberg heredan el aire Material. */
.wp-block-button__link{
	min-height:var(--alto);display:inline-flex;align-items:center;justify-content:center;
	transition:box-shadow .18s var(--curva);
}
.wp-block-button__link:hover{box-shadow:var(--e1)}
.wp-block-button.is-style-outline>.wp-block-button__link{
	border-width:1px;border-color:var(--linea);color:var(--p);
}
.wp-block-button.is-style-outline>.wp-block-button__link:hover{border-color:var(--p);box-shadow:none;background:color-mix(in srgb, var(--p) 8%, transparent)}

/* ==========================================================================
   Tarjetas
   ========================================================================== */

.md-card{
	background:var(--blanco);
	border-radius:var(--r-lg);
	padding:20px;
}
.md-card--elevada{box-shadow:var(--e1)}
.md-card--rellena{background:var(--surf-2);box-shadow:none}
.md-card--contorno{background:var(--surf);box-shadow:inset 0 0 0 1px var(--linea-2)}
.md-card--tonal{background:var(--pc);color:var(--on-pc)}
.md-card--suave{background:var(--surf-1);box-shadow:none}

/* ==========================================================================
   Chips
   ========================================================================== */

.md-chip{
	display:inline-flex;align-items:center;gap:6px;
	height:32px;padding:0 14px;
	border-radius:var(--r-sm);
	background:var(--surf-2);color:var(--tinta-2);
	font-size:.8125rem;font-weight:500;line-height:1;
	text-decoration:none;white-space:nowrap;
}
.md-chip--activo{background:var(--sc);color:var(--on-sc)}
.md-chip--aviso{background:var(--tc);color:var(--on-tc)}
.md-chip--mal{background:var(--errc);color:var(--on-errc)}
.md-chip--marca{background:var(--pc);color:var(--on-pc)}

/* ==========================================================================
   Campos de texto — estilo relleno, como el prototipo
   ========================================================================== */

.md-campo{
	width:100%;min-height:var(--alto);
	padding:14px 16px;
	background:var(--surf-2);
	border:none;border-bottom:1px solid transparent;
	border-radius:var(--r-md);
	font-family:inherit;font-size:.9375rem;color:var(--tinta);
	transition:background-color .15s var(--curva), border-color .15s var(--curva);
}
.md-campo::placeholder{color:var(--tinta-2);opacity:.85}
.md-campo:hover{background:var(--surf-3)}
.md-campo:focus{
	outline:none;background:var(--surf-3);
	border-bottom-color:var(--p);
	box-shadow:0 1px 0 0 var(--p);
}
textarea.md-campo{min-height:120px;resize:vertical;line-height:1.5}
.md-etiqueta{
	display:block;
	font-size:.8125rem;font-weight:600;letter-spacing:.01em;
	color:var(--tinta-2);margin-bottom:6px;
}
.md-apoyo{font-size:.75rem;color:var(--tinta-2);margin:6px 0 0;line-height:1.45}

/* ==========================================================================
   Barra superior
   ========================================================================== */

.md-barra{
	position:sticky;top:0;z-index:40;
	background:color-mix(in srgb, var(--surf) 86%, transparent);
	backdrop-filter:saturate(180%) blur(14px);
	-webkit-backdrop-filter:saturate(180%) blur(14px);
	border-bottom:1px solid transparent;
	transition:border-color .2s, box-shadow .2s;
}
body.ha-bajado .md-barra{border-bottom-color:var(--linea-2)}

.wp-block-navigation .wp-block-navigation-item__content{
	text-decoration:none;font-weight:500;font-size:.9375rem;color:var(--tinta-2);
	padding:8px 4px;
}
.wp-block-navigation .wp-block-navigation-item__content:hover{color:var(--p);text-decoration:none}
.wp-block-navigation__responsive-container.is-menu-open{background:var(--surf)}
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close{color:var(--tinta)}

/* Logotipo */
.ac-logo{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--tinta)}
.ac-logo svg{display:block;flex:0 0 auto}
.ac-logo b{
	font-family:Outfit,sans-serif;font-size:1.3rem;font-weight:700;letter-spacing:-.025em;
}

/* ==========================================================================
   Utilidades compartidas
   ========================================================================== */

.md-pila{display:flex;flex-direction:column}
.md-fila{display:flex;align-items:center}
.md-crece{flex:1;min-width:0}
.md-num{font-variant-numeric:tabular-nums}

.md-punto{
	display:inline-block;width:8px;height:8px;border-radius:50%;
	background:var(--marca);vertical-align:top;margin-left:2px;
}

.md-divisor{border:none;border-top:1px solid var(--linea-2);margin:0}

/* La página de destino se pinta sola y no quiere el padding del tema… */
body.acolita-destino main{padding:0}
/* …pero el asistente sí lo necesita: es una pantalla, no un lienzo. */
body.acolita-destino main.ac-asis-cuerpo{padding:clamp(24px, 6vh, 72px) 24px 140px}
@media (max-width:600px){
	body.acolita-destino main.ac-asis-cuerpo{padding:24px 20px 132px}
}

@media (prefers-reduced-motion:reduce){
	*,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* El logotipo de la cabecera: el isotipo teal y la palabra en negro. */
.wp-block-site-logo img{
	display:block;height:auto;
	max-width:132px;
}
.wp-block-site-logo a{display:block;line-height:0}
@media (max-width:600px){ .wp-block-site-logo img{max-width:112px} }

/* ==========================================================================
   Portada
   ========================================================================== */

.ac-tipos-rej{
	display:grid;gap:12px;
	grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
	margin-top:24px;
}
.ac-tipo-ficha{
	padding:22px;border-radius:16px;
	background:var(--surf-2);
}
.ac-tipo-ficha b{display:block;font-size:1.0625rem;font-weight:600;margin-bottom:2px}
.ac-tipo-ficha small{
	display:block;font-size:.875rem;line-height:1.45;color:var(--tinta-2);
}
.ac-tipo-ficha-i{width:30px;height:30px;color:var(--p);margin-bottom:12px;display:block}

.ac-recorrido{display:grid;gap:12px;margin-top:24px}
@media (min-width:760px){ .ac-recorrido{grid-template-columns:1fr 1fr} }

.ac-parada{
	display:flex;gap:16px;align-items:flex-start;
	padding:22px;border-radius:16px;
	background:var(--blanco);
	box-shadow:var(--e1);
	text-decoration:none;color:inherit;
	transition:box-shadow .18s var(--curva), transform .18s var(--curva);
}
.ac-parada:hover{box-shadow:var(--e2);transform:translateY(-2px);text-decoration:none;color:inherit}
.ac-parada-i{
	display:grid;place-items:center;flex:0 0 auto;
	width:48px;height:48px;border-radius:14px;
	background:var(--pc);color:var(--on-pc);
}
.ac-parada-i .ac-i{width:24px;height:24px}
.ac-parada-txt{flex:1;min-width:0}
.ac-parada-txt b{display:block;font-size:1.0625rem;font-weight:600;margin-bottom:4px}
.ac-parada-txt small{display:block;font-size:.875rem;line-height:1.5;color:var(--tinta-2)}
.ac-parada-txt code{
	font-family:var(--mal-mono,ui-monospace,monospace);font-size:.8125rem;
	background:var(--surf-2);padding:1px 6px;border-radius:5px;
}
.ac-parada-txt em{
	display:inline-flex;align-items:center;gap:6px;
	margin-top:10px;font-style:normal;font-size:.875rem;font-weight:600;color:var(--p);
}
.ac-parada-txt em .ac-i{width:16px;height:16px}

.ac-i{width:22px;height:22px;flex:0 0 auto;stroke-width:2;fill:none;stroke:currentColor}

/* ==========================================================================
   Anchos en pantalla grande
   ========================================================================== */

/* Los bloques propios se alinean como los de Gutenberg. */
.alignwide{
	max-width:var(--wp--style--global--wide-size,1320px);
	margin-left:auto;margin-right:auto;
}

/* En escritorio la portada se estira; el párrafo de entrada no, porque una
   línea de 1300px no la lee nadie. */
@media (min-width:1100px){
	.ac-tipos-rej{grid-template-columns:repeat(3,1fr);gap:16px}
	.ac-recorrido{grid-template-columns:repeat(3,1fr);gap:16px}
}

/* ==========================================================================
   Páginas de contenido
   ========================================================================== */

.wp-block-post-content > h2{margin-top:2.2em}
.wp-block-post-content > p{max-width:68ch}
.wp-block-post-content > ul{max-width:68ch}
.wp-block-list li{margin-bottom:.5em}

/* Preguntas frecuentes: el acordeón nativo, vestido. */
.wp-block-details{
	background:var(--blanco);
	border-radius:var(--r-md);
	padding:18px 22px;
	margin:10px 0;
	box-shadow:var(--e1);
}
.wp-block-details summary{
	cursor:pointer;list-style:none;
	font-size:1.0625rem;font-weight:600;
	display:flex;align-items:center;gap:12px;
}
.wp-block-details summary::-webkit-details-marker{display:none}
.wp-block-details summary::before{
	content:"";flex:0 0 auto;
	width:10px;height:10px;
	border-right:2px solid var(--p);border-bottom:2px solid var(--p);
	transform:rotate(-45deg);margin-left:2px;
	transition:transform .2s var(--curva);
}
.wp-block-details[open] summary::before{transform:rotate(45deg)}
.wp-block-details[open] summary{margin-bottom:10px}
.wp-block-details p{
	margin:0 0 10px;font-size:.9375rem;line-height:1.6;color:var(--tinta-2);
	max-width:68ch;
}
.wp-block-details p:last-child{margin-bottom:0}

/* Las preguntas frecuentes se leen mejor en dos columnas cuando hay sitio. */
@media (min-width:1000px){
	.wp-block-post-content > .wp-block-details{
		display:inline-block;width:calc(50% - 6px);vertical-align:top;margin:5px 0;
	}
	.wp-block-post-content > .wp-block-details:nth-of-type(odd){margin-right:8px}
	.wp-block-post-content > .wp-block-details[open]{width:100%;margin-right:0}
}

/* El título de una página de contenido, en grande y con aire. */
.wp-block-post-title{letter-spacing:-.03em;text-wrap:balance}

/* La entrada de cada sección: alineada con su titular y con ancho de lectura.
   Va dentro de un grupo de flujo, no con `alignwide` propio: pelear con el
   centrado que Gutenberg le pone a los alignwide no compensa. */
.ac-lede{max-width:68ch}