/* Base: reinicio, tipografía, superficies del navegador y las piezas que comparten todas las plantillas. */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--alo-alto-cabecera) + 16px);
	scrollbar-color: var(--alo-turquesa-fuerte) var(--alo-menta-suave);
	interpolate-size: allow-keywords;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		transition-duration: 1ms !important;
		animation-duration: 1ms !important;
		animation-delay: 0ms !important;
		animation-iteration-count: 1 !important;
	}
}

body {
	margin: 0;
	background: var(--alo-papel);
	color: var(--alo-navy);
	font-family: var(--alo-letra);
	font-size: var(--alo-t-cuerpo);
	font-weight: 400;
	line-height: 1.6;
	font-synthesis: none;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	caret-color: var(--alo-turquesa-hondo);
	overflow-x: clip;
}

::selection {
	background: var(--alo-turquesa);
	color: var(--alo-navy);
}

img,
svg,
video,
picture,
iframe {
	display: block;
	max-width: 100%;
	height: auto;
}

h1,
h2,
h3,
h4 {
	margin: 0 0 0.5em;
	font-family: var(--alo-letra);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.02em;
	text-wrap: balance;
	color: inherit;
}

h1 {
	font-size: var(--alo-t-pagina);
	font-weight: 700;
	line-height: 1.1;
}

h2 {
	font-size: var(--alo-t-titular);
}

h3 {
	font-size: var(--alo-t-titulo);
	line-height: 1.25;
	letter-spacing: -0.01em;
}

h4 {
	font-size: 1.0625rem;
	letter-spacing: 0;
}

p,
ul,
ol,
dl,
blockquote,
figure,
address {
	margin: 0 0 1em;
}

address {
	font-style: normal;
}

p {
	text-wrap: pretty;
}

strong,
b {
	font-weight: 600;
}

a {
	color: var(--alo-turquesa-hondo);
	text-decoration-line: underline;
	text-decoration-color: rgba(27, 119, 120, 0.4);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
	transition: color var(--alo-d-estado) ease, text-decoration-color var(--alo-d-estado) ease;
}

@media (hover: hover) and (pointer: fine) {
	a:not([class]):hover {
		color: var(--alo-navy);
		text-decoration-color: currentColor;
	}
}

:focus-visible {
	outline: 2px solid var(--alo-foco);
	outline-offset: 3px;
	border-radius: 4px;
}

input,
select,
textarea,
button {
	font: inherit;
	color: inherit;
}

input[type="search"],
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
select,
textarea {
	min-height: 48px;
	padding: 12px 14px;
	border: 1px solid var(--alo-linea-campo);
	border-radius: var(--alo-r-campo);
	background: var(--alo-blanco);
	font-size: 1rem;
}

input::placeholder,
textarea::placeholder {
	color: var(--alo-tinta-suave);
	opacity: 1;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	border-color: var(--alo-turquesa-hondo);
	outline-offset: 1px;
}

/* Lo que no se ve pero se lee (la clase del tema y la de WordPress y WooCommerce) */
.screen-reader-text:not(:focus),
.alo-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.alo-sprite {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

.alo-icono {
	width: 1.25em;
	height: 1.25em;
	flex: none;
}

.alo-main:focus {
	outline: none;
}

/* Contenedores y secciones */
.alo-contenedor {
	width: 100%;
	max-width: calc(var(--alo-ancho) + 2 * var(--alo-medianil));
	margin-inline: auto;
	padding-inline: var(--alo-medianil);
}

.alo-contenedor--texto > * {
	max-width: var(--alo-ancho-texto);
}

.alo-seccion {
	padding-block: var(--alo-seccion);
}

.alo-seccion--sin-arriba {
	padding-top: 0;
}

.alo-seccion--menta {
	background: var(--alo-menta);
}

.alo-seccion--rosa {
	background: var(--alo-rosa);
}

.alo-seccion--melocoton {
	background: var(--alo-melocoton);
}

.alo-seccion--navy {
	--alo-foco: var(--alo-blanco);
	background: var(--alo-navy);
	color: var(--alo-blanco);
}

.alo-seccion--navy p {
	color: #d5daea;
}

.alo-seccion__cabecera {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 24px;
	margin-bottom: clamp(18px, 3vw, 28px);
}

.alo-seccion__cabecera h2 {
	margin: 0;
}

.alo-seccion__intro {
	max-width: 44rem;
	margin-bottom: clamp(20px, 3vw, 32px);
	color: var(--alo-tinta-suave);
}

.alo-entradilla {
	max-width: 44rem;
	font-size: var(--alo-t-entradilla);
	line-height: 1.6;
	color: var(--alo-tinta-suave);
}

/* La puntada: se cose una vez al llegar, a golpes de aguja. Es el único momento de movimiento de la portada. */
.alo-puntada {
	position: relative;
	display: inline-block;
	padding-bottom: 0.1em;
}

.alo-puntada::after {
	content: "";
	position: absolute;
	inset: auto 0 -0.06em;
	height: 8px;
	background: var(--alo-puntada-frambuesa) repeat-x left center;
	animation: alo-coser 1100ms steps(15, end) 220ms both;
}

@keyframes alo-coser {
	from {
		clip-path: inset(0 100% 0 0);
	}

	to {
		clip-path: inset(0 0 0 0);
	}
}

/* Botones: 48 px, se hunden al pulsar. Letra navy: la blanca sobre turquesa no se lee. */
.alo-boton,
.wp-element-button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 11px 24px;
	border: 1.5px solid var(--alo-turquesa);
	border-radius: var(--alo-r-campo);
	background: var(--alo-turquesa);
	color: var(--alo-navy);
	font-family: var(--alo-letra);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--alo-d-estado) ease, border-color var(--alo-d-estado) ease, color var(--alo-d-estado) ease, transform var(--alo-d-pulsar) var(--alo-ease-salida);
}

.alo-boton .alo-icono {
	width: 1.2em;
	height: 1.2em;
}

.alo-boton:active,
.wp-element-button:active {
	transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
	.alo-boton:hover,
	.wp-element-button:hover,
	.wp-block-button__link:hover {
		background: var(--alo-turquesa-fuerte);
		border-color: var(--alo-turquesa-fuerte);
		color: var(--alo-navy);
	}
}

.alo-boton--contorno {
	background: transparent;
	border-color: var(--alo-navy);
	color: var(--alo-navy);
}

@media (hover: hover) and (pointer: fine) {
	.alo-boton--contorno:hover {
		background: var(--alo-navy);
		border-color: var(--alo-navy);
		color: var(--alo-blanco);
	}
}

.alo-boton--whatsapp {
	background: var(--alo-whatsapp);
	border-color: var(--alo-whatsapp);
	color: var(--alo-navy);
}

@media (hover: hover) and (pointer: fine) {
	.alo-boton--whatsapp:hover {
		background: var(--alo-whatsapp-fuerte);
		border-color: var(--alo-whatsapp-fuerte);
		color: var(--alo-navy);
	}
}

.alo-enlace-flecha {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	font-weight: 600;
	color: var(--alo-turquesa-hondo);
	text-decoration: none;
}

.alo-enlace-flecha .alo-icono {
	width: 1.1em;
	height: 1.1em;
	transition: transform var(--alo-d-estado) var(--alo-ease-salida);
}

@media (hover: hover) and (pointer: fine) {
	.alo-enlace-flecha:hover {
		color: var(--alo-navy);
	}

	.alo-enlace-flecha:hover .alo-icono {
		transform: translateX(4px);
	}
}

/* WhatsApp siempre a mano: botón flotante */
.alo-wa-flotante {
	position: fixed;
	right: max(16px, env(safe-area-inset-right));
	bottom: calc(72px + env(safe-area-inset-bottom));
	z-index: 40;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 52px;
	padding: 0 18px;
	border-radius: 999px;
	background: var(--alo-whatsapp);
	color: var(--alo-navy);
	font-weight: 600;
	text-decoration: none;
	box-shadow: var(--alo-sombra-flotante);
	transition: transform var(--alo-d-pulsar) var(--alo-ease-salida), background-color var(--alo-d-estado) ease;
}

.alo-wa-flotante .alo-icono {
	width: 24px;
	height: 24px;
}

.alo-wa-flotante:active {
	transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
	.alo-wa-flotante:hover {
		background: var(--alo-whatsapp-fuerte);
		color: var(--alo-navy);
	}
}

@media (max-width: 760px) {
	.alo-wa-flotante {
		width: 52px;
		padding: 0;
		justify-content: center;
	}

	.alo-wa-flotante span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
	}
}

/* Migas: siempre en una línea; lo que no cabe se acorta */
.alo-migas ol {
	display: flex;
	flex-wrap: nowrap;
	gap: 4px 0;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
	font-size: var(--alo-t-dato);
	color: var(--alo-tinta-suave);
}

.alo-migas li {
	flex: none;
	min-width: 0;
	white-space: nowrap;
}

.alo-migas li:last-child {
	flex: 0 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
}

.alo-migas a:focus-visible {
	outline-offset: -2px;
}

.alo-migas li + li::before {
	content: "/";
	margin-inline: 8px;
	color: var(--alo-tinta-suave);
}

.alo-migas a {
	color: var(--alo-tinta-suave);
	text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
	.alo-migas a:hover {
		color: var(--alo-turquesa-hondo);
		text-decoration: underline;
	}
}

.alo-migas [aria-current] {
	color: var(--alo-navy);
}

@media (max-width: 639px) {
	.alo-migas li:nth-child(n + 3):last-child {
		display: none;
	}

	.alo-migas li:nth-child(n + 3):nth-last-child(2) {
		flex: 0 1 auto;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

/* Preguntas desplegables: cosidas con filetes de puntada */
.alo-preguntas {
	display: grid;
	gap: 10px;
}

.alo-pregunta {
	border: var(--alo-filete);
	border-radius: var(--alo-r-campo);
	background: var(--alo-blanco);
}

.alo-pregunta summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 56px;
	padding: 14px 18px;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	list-style: none;
	border-radius: var(--alo-r-campo);
}

.alo-pregunta summary::-webkit-details-marker {
	display: none;
}

.alo-pregunta__signo {
	width: 22px;
	height: 22px;
	color: var(--alo-turquesa-hondo);
	transition: transform var(--alo-d-estado) var(--alo-ease-salida);
}

.alo-pregunta[open] .alo-pregunta__signo {
	transform: rotate(45deg);
}

@media (hover: hover) and (pointer: fine) {
	.alo-pregunta summary:hover .alo-pregunta__texto {
		color: var(--alo-turquesa-hondo);
	}
}

.alo-pregunta::details-content {
	block-size: 0;
	overflow: clip;
	transition: block-size var(--alo-d-panel) var(--alo-ease-salida), content-visibility var(--alo-d-panel) allow-discrete;
}

.alo-pregunta[open]::details-content {
	block-size: auto;
}

.alo-pregunta__respuesta {
	padding: 0 48px 18px 18px;
	color: var(--alo-tinta-suave);
}

.alo-pregunta__respuesta p:last-child {
	margin-bottom: 0;
}

/* Bloque de preguntas: el titular a un lado y las preguntas al otro */
.alo-bloque-preguntas {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
	gap: 16px clamp(32px, 6vw, 72px);
	align-items: start;
}

.alo-bloque-preguntas .alo-seccion__intro {
	margin-bottom: 0;
}

@media (max-width: 899px) {
	.alo-bloque-preguntas {
		grid-template-columns: 1fr;
	}
}

/* Técnicas: filas, no tarjetas iguales */
.alo-tecnicas {
	margin: 0;
	padding: 0;
	list-style: none;
}

.alo-tecnica {
	display: grid;
	grid-template-columns: 52px minmax(0, 1.5fr) minmax(0, 1fr);
	gap: 8px 24px;
	align-items: start;
	padding-block: 24px;
	background: var(--alo-puntada-turquesa) repeat-x left top;
}

.alo-tecnica:last-child {
	padding-bottom: 0;
}

.alo-tecnica__icono {
	width: 40px;
	height: 40px;
	color: var(--alo-turquesa-hondo);
}

.alo-tecnica__texto h3 {
	margin-bottom: 0.3em;
}

.alo-tecnica__texto p {
	margin: 0;
	color: var(--alo-tinta-suave);
}

.alo-tecnica__puntos {
	display: grid;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--alo-t-pequeno);
}

.alo-tecnica__puntos li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.alo-tecnica__puntos .alo-icono {
	margin-top: 2px;
	color: var(--alo-turquesa-hondo);
}

.alo-tecnicas--dos .alo-tecnica {
	grid-template-columns: 52px minmax(0, 1fr);
}

@media (max-width: 760px) {
	.alo-tecnica {
		grid-template-columns: 44px minmax(0, 1fr);
		gap: 10px 14px;
	}

	.alo-tecnica__puntos {
		grid-column: 2;
	}

	.alo-tecnica__icono {
		width: 32px;
		height: 32px;
	}
}

/* Los cuatro pasos, cosidos entre sí */
.alo-pasos {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	margin: clamp(18px, 3vw, 28px) 0 0;
	padding: 0;
	list-style: none;
}

.alo-paso {
	position: relative;
}

.alo-paso:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 20px;
	left: 60px;
	right: -14px;
	height: 8px;
	background: var(--alo-puntada-frambuesa) repeat-x left center;
}

.alo-paso__num {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	margin-bottom: 14px;
	border-radius: 999px;
	background: var(--alo-blanco);
	color: var(--alo-navy);
	font-size: 1.125rem;
	font-weight: 700;
	box-shadow: var(--alo-sombra-suave);
}

.alo-paso h3 {
	margin-bottom: 0.35em;
}

.alo-paso p {
	margin: 0;
	color: var(--alo-navy);
	font-size: var(--alo-t-pequeno);
}

@media (max-width: 899px) {
	.alo-pasos {
		grid-template-columns: 1fr;
		gap: 22px;
	}

	.alo-paso {
		padding-left: 64px;
		min-height: 48px;
	}

	.alo-paso__num {
		position: absolute;
		top: 0;
		left: 0;
		margin: 0;
	}

	.alo-paso:not(:last-child)::after {
		top: 56px;
		bottom: -18px;
		left: 20px;
		right: auto;
		width: 8px;
		height: auto;
		background: var(--alo-puntada-vertical) repeat-y center top;
	}
}

/* Banda de ayuda */
.alo-ayuda__dentro {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px 48px;
}

.alo-ayuda__dentro > div {
	flex: 1 1 26rem;
	max-width: 46rem;
}

.alo-ayuda h2 {
	font-size: var(--alo-t-titulo);
	margin-bottom: 0.3em;
}

.alo-ayuda p {
	margin: 0;
	color: var(--alo-navy);
}

.alo-ayuda__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* Lista de contacto (portada y contacto) */
.alo-lista-contacto {
	display: grid;
	gap: 10px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

.alo-lista-contacto a,
.alo-lista-contacto span {
	display: inline-flex;
	align-items: flex-start;
	gap: 10px;
	color: var(--alo-navy);
	font-weight: 500;
}

.alo-lista-contacto a {
	min-height: 28px;
	text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
	.alo-lista-contacto a:hover {
		color: var(--alo-turquesa-hondo);
		text-decoration: underline;
	}
}

.alo-lista-contacto .alo-icono {
	margin-top: 2px;
	color: var(--alo-turquesa-hondo);
}

/* Mapa con consentimiento */
.alo-mapa {
	position: relative;
	min-height: 340px;
	border-radius: var(--alo-r-bloque);
	background: var(--alo-blanco);
	overflow: hidden;
}

.alo-mapa iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.alo-mapa__aviso {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 10px;
	padding: 24px;
	text-align: center;
	color: var(--alo-tinta-suave);
}

.alo-mapa__aviso > .alo-icono {
	width: 34px;
	height: 34px;
	color: var(--alo-turquesa-hondo);
}

.alo-mapa__aviso p {
	max-width: 34ch;
	margin: 0;
}

.alo-mapa__aviso strong {
	color: var(--alo-navy);
}

.alo-mapa__acciones {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 20px;
	margin-top: 6px !important;
}

.alo-mapa[data-alo-cargado] .alo-mapa__aviso {
	display: none;
}

/* Avisos de WooCommerce (la ficha y la tienda no cargan sus hojas) */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 20px;
	margin: 0 0 16px;
	padding: 14px 18px;
	border: 0;
	border-radius: var(--alo-r-campo);
	background: var(--alo-menta);
	color: var(--alo-navy);
	list-style: none;
}

.woocommerce-error {
	background: var(--alo-rosa);
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	content: none;
}

.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
	order: 2;
	flex: none;
	font-weight: 600;
	color: var(--alo-navy);
}

/* Paginación */
.pagination .nav-links,
.woocommerce-pagination ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}

.pagination .page-numbers,
.woocommerce-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 14px;
	border: var(--alo-filete);
	border-radius: var(--alo-r-campo);
	background: var(--alo-blanco);
	color: var(--alo-navy);
	font-weight: 500;
	text-decoration: none;
}

.pagination .page-numbers.current,
.woocommerce-pagination .page-numbers.current {
	background: var(--alo-navy);
	border-color: var(--alo-navy);
	color: var(--alo-blanco);
}

/* Texto largo (legales, descripciones, entradas) */
.alo-prosa {
	max-width: var(--alo-ancho-texto);
}

.alo-prosa code {
	overflow-wrap: anywhere;
}

.alo-prosa h2 {
	margin-top: 1.5em;
}

.alo-prosa h3 {
	margin-top: 1.4em;
}

.alo-prosa > :first-child {
	margin-top: 0;
}

.alo-prosa ul,
.alo-prosa ol {
	padding-left: 1.3em;
}

.alo-prosa li {
	margin-bottom: 0.4em;
}

.alo-prosa li::marker {
	color: var(--alo-frambuesa);
}

.alo-prosa blockquote {
	margin-inline: 0;
	padding: 14px 18px;
	border-radius: var(--alo-r-campo);
	background: var(--alo-menta-suave);
}

.alo-prosa table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--alo-t-pequeno);
	font-variant-numeric: tabular-nums;
}

.alo-prosa th,
.alo-prosa td {
	padding: 10px 12px;
	border: 0;
	border-bottom: var(--alo-filete);
	text-align: left;
	vertical-align: top;
}

.alo-prosa thead th {
	border-bottom: 2px solid var(--alo-navy);
}

.alo-prosa .wp-block-table {
	margin-inline: 0;
	overflow-x: auto;
}

.alo-prosa img {
	border-radius: var(--alo-r-tarjeta);
}

.alo-vacio {
	padding: 24px 0;
	font-size: var(--alo-t-entradilla);
	color: var(--alo-tinta-suave);
}