/* Alfa Neumáticos: solo lo que theme.json no cubre. Colores siempre vía var(--wp--preset--color--*).
   Lenguaje visual: premium, sin cajas. Líneas finas, bordes redondeados suaves, mucho aire. */

:root {
	--alfa-radio: var(--wp--custom--radio);
	--alfa-radio-grande: var(--wp--custom--radio-grande);
	--alfa-pildora: var(--wp--custom--radio-pildora);
	--alfa-linea: var(--wp--custom--linea);
	--alfa-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Textos justificados (pedido del cliente). La separación en sílabas evita huecos grandes
   entre palabras, sobre todo en celular. Títulos, etiquetas, textos centrados y formulario quedan como están. */
:where(main) p:where(:not([class*="has-text-align"], .alfa-badge, .alfa-eyebrow, .alfa-paso__num)),
:where(.alfa-footer .wp-block-column) > p {
	text-align: justify;
	-webkit-hyphens: auto;
	hyphens: auto;
}
.alfa-form p, .alfa-form__gracias p { text-align: left; -webkit-hyphens: manual; hyphens: manual; }
/* Un correo no se puede cortar: justificado dejaría espacios enormes en la línea anterior. */
:where(main) p:where(:has(a[href^="mailto:"])) { text-align: left; }

/* Sin espacio entre header, main y footer (las secciones traen su propio padding). */
.wp-site-blocks > * + * { margin-block-start: 0; }

/* Accesibilidad ------------------------------------------------------------ */
:where(a, button, input, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--azul);
	outline-offset: 3px;
	border-radius: 6px;
}
.has-negro-background-color :where(a, button, summary):focus-visible,
.has-negro-profundo-background-color :where(a, button, summary):focus-visible,
.wp-block-cover :where(a, button):focus-visible {
	outline-color: var(--wp--preset--color--blanco);
}
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
html { scroll-behavior: smooth; }

/* Header ---------------------------------------------------------------- */
.alfa-topbar p { margin: 0; letter-spacing: 0.02em; }
.alfa-topbar a { color: inherit; text-decoration: none; }
.alfa-topbar a:hover { color: var(--wp--preset--color--blanco); }
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
}
.admin-bar header.wp-block-template-part { top: var(--wp-admin--admin-bar--height, 0); }
.alfa-header {
	background-color: color-mix(in srgb, var(--wp--preset--color--blanco) 86%, transparent) !important;
	border-bottom: 1px solid var(--alfa-linea);
	backdrop-filter: saturate(1.4) blur(14px);
	-webkit-backdrop-filter: saturate(1.4) blur(14px);
}
/* backdrop-filter (y transform) encierran al menú móvil dentro del header: se quitan mientras está abierto. */
.alfa-header:has(.is-menu-open) { backdrop-filter: none; -webkit-backdrop-filter: none; }
header.wp-block-template-part:has(.is-menu-open) { transform: none !important; }
body:has(.is-menu-open) .alfa-wa { display: none; }
.alfa-logo { margin: 0; flex-shrink: 0; }
.alfa-logo img { display: block; height: auto; }
.alfa-header .wp-block-navigation a {
	position: relative;
	text-decoration: none;
	padding-block: 0.35rem;
}
.alfa-header .wp-block-navigation a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1.5px;
	background: var(--wp--preset--color--rojo);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.35s var(--alfa-ease);
}
.alfa-header .wp-block-navigation a:hover::after { transform: scaleX(1); transform-origin: left; }
.alfa-header .wp-block-button__link { padding: 0.7rem 1.4rem; }
@media (max-width: 599px) {
	.alfa-topbar p:last-child { display: none; }
	.alfa-header__cta .wp-block-button__link { padding: 0.55rem 1rem; font-size: var(--wp--preset--font-size--xs); }
}
/* Con 4 links el menú no cabe en tablet: el botón hamburguesa se usa hasta 1099px (WordPress lo cambia en 600px). */
@media (min-width: 600px) and (max-width: 1099px) {
	.alfa-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.alfa-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}
.wp-block-navigation__responsive-container.is-menu-open { padding: var(--wp--preset--spacing--50); }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { font-size: var(--wp--preset--font-size--xl); font-weight: 600; }

/* Etiqueta de sección: texto pequeño con línea roja, sin caja ------------------ */
.alfa-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.18em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--wp--preset--color--gris-texto);
}
.alfa-badge::before {
	content: "";
	width: 2rem;
	height: 1.5px;
	background: var(--wp--preset--color--rojo);
}
.has-negro-background-color .alfa-badge,
.has-negro-profundo-background-color .alfa-badge,
.wp-block-cover .alfa-badge { color: var(--wp--preset--color--gris-texto-oscuro); }
.has-text-align-center.alfa-badge { display: flex; justify-content: center; }
.alfa-eyebrow {
	margin: 0;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gris-texto-oscuro);
}
.alfa-eyebrow::before { content: "·"; margin-right: 0.75rem; }
.alfa-subrayado {
	background-image: linear-gradient(var(--wp--preset--color--rojo), var(--wp--preset--color--rojo));
	background-repeat: no-repeat;
	background-size: 100% 0.08em;
	background-position: 0 95%;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
.alfa-pendiente {
	padding: 0.6rem 0.9rem;
	border: 1px dashed var(--wp--preset--color--rojo);
	border-radius: var(--alfa-radio);
	color: var(--wp--preset--color--rojo);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--s);
}

/* Botones ------------------------------------------------------------------ */
.wp-block-button__link {
	transition: background-color 0.3s var(--alfa-ease), color 0.3s var(--alfa-ease), border-color 0.3s var(--alfa-ease), transform 0.3s var(--alfa-ease);
}
.wp-block-button__link:hover { transform: translateY(-1px); }
.wp-block-button.is-style-outline > .wp-block-button__link {
	border: 1px solid currentColor;
	background: transparent;
	color: var(--wp--preset--color--texto);
}
.wp-block-cover .wp-block-button.is-style-outline > .wp-block-button__link,
.has-negro-background-color .wp-block-button.is-style-outline > .wp-block-button__link,
.has-negro-profundo-background-color .wp-block-button.is-style-outline > .wp-block-button__link {
	color: var(--wp--preset--color--blanco);
	border-color: var(--wp--preset--color--gris-texto-oscuro);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--blanco);
	border-color: var(--wp--preset--color--blanco);
	color: var(--wp--preset--color--negro);
}

/* Hero --------------------------------------------------------------------- */
.alfa-hero h1 { margin-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30); max-width: 14ch; }
.alfa-hero .wp-block-cover__background {
	background: linear-gradient(90deg, var(--wp--preset--color--negro-profundo) 0%, transparent 70%) !important;
	opacity: 0.85 !important;
}
/* En celular el texto queda sobre el operador: se oscurece más para mantener contraste AA. */
@media (max-width: 781px) {
	.alfa-hero .wp-block-cover__background {
		background: var(--wp--preset--color--negro-profundo) !important;
		opacity: 0.7 !important;
	}
}
.alfa-hero-interno { background-color: var(--wp--preset--color--negro); }
.alfa-hero-interno .wp-block-post-title { margin-top: var(--wp--preset--spacing--30); }
.alfa-hero-interno .wp-block-post-excerpt__more-text { display: none; }

/* Cifras: números grandes separados por líneas finas ------------------------------- */
.alfa-cifras .alfa-cifra {
	gap: 0.35rem;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	border-left: 1px solid var(--alfa-linea);
}
.alfa-cifras .alfa-cifra:first-child { border-left: 0; padding-left: 0; }
@media (max-width: 781px) {
	.alfa-cifras .alfa-cifra { border-left: 0; padding-left: 0; border-top: 1px solid var(--alfa-linea); padding-top: var(--wp--preset--spacing--30); }
	.alfa-cifras .alfa-cifra:first-child { border-top: 0; }
}
.alfa-cifra p { margin: 0; }
.alfa-cifra__valor {
	font-family: var(--wp--preset--font-family--titulos);
	font-size: var(--wp--preset--font-size--xxl);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.035em;
	font-variant-numeric: tabular-nums;
}

/* ¿Por qué Alfa?: lista interactiva + neumático animado ---------------------------- */
/* Dos secciones oscuras seguidas: una línea fina las separa. */
.has-negro-background-color + .has-negro-profundo-background-color,
.has-negro-profundo-background-color + .has-negro-background-color,
.has-negro-profundo-background-color + .has-negro-profundo-background-color {
	border-top: 1px solid var(--wp--preset--color--negro-tarjeta);
}

.alfa-ventajas__lista { border-top: 1px solid var(--wp--preset--color--negro-tarjeta); }
.alfa-ventaja {
	position: relative;
	display: grid;
	grid-template-columns: 3rem 1fr;
	column-gap: var(--wp--preset--spacing--30);
	padding-block: var(--wp--preset--spacing--40);
	border-bottom: 1px solid var(--wp--preset--color--negro-tarjeta);
}
.alfa-ventaja > * { margin: 0 !important; }
.alfa-ventaja__num {
	grid-row: span 2;
	padding-top: 0.35rem;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--gris-texto-oscuro);
	font-variant-numeric: tabular-nums;
	transition: color 0.4s;
}
.alfa-ventaja__titulo {
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 600;
	transition: color 0.4s, transform 0.5s var(--alfa-ease);
}
.alfa-ventaja__texto { padding-top: var(--wp--preset--spacing--20); max-width: 46ch; }

/* Barra de progreso de la ventaja activa (la anima main.js). */
.alfa-ventaja::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 100%;
	height: 1.5px;
	background: var(--wp--preset--color--rojo);
	transform: scaleX(0);
	transform-origin: left;
}

/* Modo interactivo (solo con JS): la activa se despliega, el resto queda en títulos. */
.alfa-ventajas.is-interactivo .alfa-ventaja { cursor: pointer; }
.alfa-ventajas.is-interactivo .alfa-ventaja__texto {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	padding-top: 0;
	transition: grid-template-rows 0.6s var(--alfa-ease), opacity 0.5s, padding-top 0.6s var(--alfa-ease);
}
.alfa-ventajas.is-interactivo .alfa-ventaja__texto > span { overflow: hidden; }
.alfa-ventajas.is-interactivo .alfa-ventaja:not(.is-activa) .alfa-ventaja__titulo { opacity: 0.55; }
.alfa-ventajas.is-interactivo .alfa-ventaja:not(.is-activa):hover .alfa-ventaja__titulo { opacity: 0.9; }
.alfa-ventaja__titulo { transition: opacity 0.4s, transform 0.5s var(--alfa-ease) !important; }
.alfa-ventajas.is-interactivo .alfa-ventaja:hover .alfa-ventaja__titulo { transform: translateX(6px); }
.alfa-ventajas.is-interactivo .alfa-ventaja.is-activa .alfa-ventaja__texto {
	grid-template-rows: 1fr;
	opacity: 1;
	padding-top: var(--wp--preset--spacing--20);
}
.alfa-ventajas.is-interactivo .alfa-ventaja.is-activa .alfa-ventaja__num { color: var(--wp--preset--color--rojo); }
.alfa-ventajas.is-interactivo .alfa-ventaja.is-activa::after { animation: alfa-progreso var(--alfa-duracion, 6s) linear forwards; }
.alfa-ventajas.is-pausado .alfa-ventaja.is-activa::after,
.alfa-ventajas.is-pausado .alfa-escena__progreso { animation-play-state: paused !important; }
@keyframes alfa-progreso { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Escena: neumático en SVG con inclinación 3D, inercia y brillo (lo mueve main.js). */
.alfa-escena {
	position: relative;
	width: min(100%, 460px);
	margin-inline: auto;
	aspect-ratio: 1;
	perspective: 900px;
	container-type: inline-size;
}
.alfa-escena__brillo {
	position: absolute;
	inset: 8%;
	border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--wp--preset--color--rojo) 45%, transparent) 0%, transparent 65%);
	filter: blur(40px);
	opacity: 0.35;
	transition: opacity 1.2s var(--alfa-ease), transform 1.2s var(--alfa-ease);
}
.alfa-escena.is-cambio .alfa-escena__brillo { opacity: 0.8; transform: scale(1.12); transition-duration: 0.25s; }
.alfa-escena__rueda {
	position: relative;
	width: 100%;
	height: 100%;
	transform: rotateX(var(--alfa-rx, 0deg)) rotateY(var(--alfa-ry, 0deg));
	transform-style: preserve-3d;
	will-change: transform;
}
.alfa-escena__svg { width: 100%; height: 100%; overflow: visible; }
.alfa-escena__banda { fill: none; stroke: var(--wp--preset--color--negro-tarjeta); stroke-width: 30; }
.alfa-escena__tacos { fill: none; stroke: var(--wp--preset--color--negro); stroke-width: 30; stroke-dasharray: 9 13; }
.alfa-escena__goma { fill: var(--wp--preset--color--negro-profundo); }
.alfa-escena__flanco { fill: none; stroke: var(--wp--preset--color--negro-tarjeta); stroke-width: 1.5; }
.alfa-escena__llanta { fill: var(--wp--preset--color--negro); stroke: var(--wp--preset--color--negro-tarjeta); stroke-width: 1.5; }
.alfa-escena__rayo { stroke: var(--wp--preset--color--negro-tarjeta); stroke-width: 16; stroke-linecap: round; }
.alfa-escena__taco { fill: var(--wp--preset--color--negro-profundo); }
.alfa-escena__rodado.tiene-tacos .alfa-escena__tacos { display: none; }
.alfa-escena__cubo { fill: var(--wp--preset--color--negro-tarjeta); }
.alfa-escena__tuerca { fill: var(--wp--preset--color--negro); }
.alfa-escena__progreso {
	fill: none;
	stroke: var(--wp--preset--color--rojo);
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-dasharray: 100;
	stroke-dashoffset: 100;
	filter: drop-shadow(0 0 6px var(--wp--preset--color--rojo));
}
.alfa-ventajas.is-interactivo .alfa-escena__progreso.is-corriendo { animation: alfa-arco var(--alfa-duracion, 6s) linear forwards; }
@keyframes alfa-arco { to { stroke-dashoffset: 0; } }
.alfa-escena__centro {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	color: var(--wp--preset--color--blanco);
	pointer-events: none;
	transform: translateZ(40px);
}
.alfa-escena__num {
	display: inline-block;
	font-family: var(--wp--preset--font-family--titulos);
	font-size: 24cqw;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.05em;
	font-variant-numeric: tabular-nums;
	transition: opacity 0.35s, transform 0.6s var(--alfa-ease), filter 0.35s;
}
.alfa-escena__num.is-saliendo { opacity: 0; transform: translateY(-28px); filter: blur(8px); }
.alfa-escena__num.is-entrando { opacity: 0; transform: translateY(28px); filter: blur(8px); transition: none; }
.alfa-escena__de { font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--gris-texto-oscuro); letter-spacing: 0.24em; }
.alfa-escena__titulo {
	max-width: 42cqw;
	min-height: 2.6em;
	font-size: clamp(0.6rem, 2.6cqw, 0.75rem);
	font-weight: 500;
	letter-spacing: 0.16em;
	line-height: 1.3;
	text-align: center;
	text-transform: uppercase;
	color: var(--wp--preset--color--gris-texto-oscuro);
	transition: opacity 0.4s;
}
.alfa-escena.is-cambio .alfa-escena__titulo { opacity: 0; transition-duration: 0.2s; }
@media (max-width: 781px) {
	.alfa-ventajas__col-escena { display: none; }
}

/* Títulos revelados palabra por palabra (main.js envuelve cada palabra). */
.alfa-w {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding-bottom: 0.12em;
	margin-bottom: -0.12em;
}
.alfa-w__i {
	display: inline-block;
	transform: translateY(105%) rotate(4deg);
	transform-origin: left bottom;
	transition: transform 1.1s var(--alfa-ease);
	transition-delay: calc(var(--alfa-i, 0) * 55ms + var(--alfa-base, 0ms));
}
.is-dividido.is-visible .alfa-w__i { transform: none; }
.alfa-hero h1.is-dividido { animation: none !important; }
/* Los H1 (arriba del pliegue) se animan solo con CSS: no dependen de JS ni del scroll. */
.alfa-hero h1.is-dividido .alfa-w__i,
.alfa-hero-interno h1.is-dividido .alfa-w__i {
	animation: alfa-palabra 1.1s var(--alfa-ease) both;
	animation-delay: calc(var(--alfa-i, 0) * 55ms + 150ms);
}
@keyframes alfa-palabra { from { transform: translateY(105%) rotate(4deg); } to { transform: none; } }

/* Hero: indicador de scroll. */
.alfa-hero::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 1.75rem;
	width: 1px;
	height: 3.5rem;
	background: linear-gradient(to bottom, transparent, var(--wp--preset--color--blanco));
	opacity: 0.5;
	transform-origin: top;
	animation: alfa-scroll 2.4s var(--alfa-ease) infinite;
	z-index: 2;
}
@keyframes alfa-scroll {
	0% { transform: scaleY(0); transform-origin: top; }
	45% { transform: scaleY(1); transform-origin: top; }
	55% { transform: scaleY(1); transform-origin: bottom; }
	100% { transform: scaleY(0); transform-origin: bottom; }
}

/* Fotos: se descubren con un barrido. */
/* El recorte va en la imagen, no en la figura: una figura recortada entera
   no "intersecta" para IntersectionObserver y el barrido nunca se dispararía. */
.alfa-js .alfa-foto.alfa-revela { opacity: 1; transform: none; }
.alfa-js .alfa-foto.alfa-revela img {
	clip-path: inset(0 100% 0 0);
	transform: scale(1.18);
	transition: clip-path 1.4s var(--alfa-ease), transform 1.8s var(--alfa-ease);
}
.alfa-js .alfa-foto.alfa-revela.is-visible img { clip-path: inset(0 0 0 0); transform: scale(1); }

/* Botón principal con flecha que se desliza; los botones siguen el cursor (main.js). */
.alfa-hero .wp-block-button:not(.is-style-outline) .wp-block-button__link::after,
.alfa-cta .wp-block-button:not(.is-style-outline) .wp-block-button__link::after {
	content: "→";
	display: inline-block;
	margin-left: 0.6rem;
	transition: transform 0.4s var(--alfa-ease);
}
.alfa-hero .wp-block-button__link:hover::after,
.alfa-cta .wp-block-button__link:hover::after { transform: translateX(4px); }
.wp-block-button__link.is-magnetico { transition: transform 0.25s var(--alfa-ease), background-color 0.3s var(--alfa-ease), color 0.3s, border-color 0.3s; }

/* Header que se esconde al bajar y aparece al subir. */
header.wp-block-template-part { transition: transform 0.5s var(--alfa-ease); }
header.wp-block-template-part.is-oculto { transform: translateY(-100%); }

/* Cinta a todo el ancho; main.js la acelera e inclina con el scroll. */
.alfa-cinta-wrap { margin-block: 0 !important; }
.alfa-cinta__pista span { transform: skewX(var(--alfa-skew, 0deg)); transition: transform 0.2s linear; }

/* Listas --------------------------------------------------------------------- */
.alfa-checks { list-style: none; padding: 0; }
.alfa-checks li {
	position: relative;
	padding: 0.7rem 0 0.7rem 1.75rem;
	border-bottom: 1px solid var(--alfa-linea);
	font-weight: 500;
}
.alfa-checks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 0.9rem;
	height: 1.5px;
	background: var(--wp--preset--color--rojo);
}
.alfa-oscuro .alfa-checks li, .alfa-en .alfa-checks li { color: var(--wp--preset--color--blanco); border-color: color-mix(in srgb, var(--wp--preset--color--blanco) 14%, transparent); }
.alfa-en a:not(.wp-block-button__link) { color: var(--wp--preset--color--blanco); }

/* Marcas: beneficios separados por líneas y pasos numerados ----------------------- */
.alfa-beneficios { display: grid; gap: 0; }
.alfa-beneficio { padding-block: var(--wp--preset--spacing--40); border-top: 1px solid var(--alfa-linea); }
.alfa-beneficio:first-child { border-top: 0; padding-top: 0; }
.alfa-beneficio h3 { margin: 0 0 0.4rem; }
.alfa-beneficio p { margin: 0; }
.alfa-paso { padding-top: var(--wp--preset--spacing--30); border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--blanco) 14%, transparent); position: relative; }
.alfa-paso::before { content: ""; position: absolute; top: -1px; left: 0; width: 2.5rem; height: 1.5px; background: var(--wp--preset--color--rojo); }
.alfa-paso__num { margin: 0 0 var(--wp--preset--spacing--30); font-size: var(--wp--preset--font-size--xs); font-weight: 600; letter-spacing: 0.18em; color: var(--wp--preset--color--gris-texto-oscuro); }
.alfa-paso h3 { margin: 0 0 0.5rem; }
.alfa-paso p:last-child { margin: 0; }
.alfa-lista-simple, .alfa-datos { list-style: none; padding: 0; }
.alfa-lista-simple li { margin-bottom: 0.5rem; }
.alfa-datos li { padding-block: var(--wp--preset--spacing--30); border-bottom: 1px solid var(--alfa-linea); margin: 0; }
.alfa-datos strong { color: var(--wp--preset--color--blanco); font-weight: 500; text-transform: uppercase; font-size: var(--wp--preset--font-size--xs); letter-spacing: 0.16em; }
.alfa-footer a, .alfa-datos a { color: inherit; text-decoration: none; transition: color 0.2s; }
.alfa-footer a:hover, .alfa-datos a:hover { color: var(--wp--preset--color--blanco); }
.alfa-footer h2 { font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; }
.alfa-footer__legal { margin-top: var(--wp--preset--spacing--50); padding-top: var(--wp--preset--spacing--30); border-top: 1px solid var(--alfa-linea); }

/* Fotos ------------------------------------------------------------------------ */
.alfa-foto { overflow: hidden; border-radius: var(--alfa-radio-grande); box-shadow: var(--wp--custom--sombra); }
.alfa-foto img { display: block; width: 100%; height: auto; transition: transform 1.2s var(--alfa-ease); }
.alfa-foto:hover img { transform: scale(1.03); }

/* FAQ: acordeón con líneas finas ------------------------------------------------ */
.alfa-faq .alfa-faq__item {
	margin: 0;
	padding: var(--wp--preset--spacing--40) 0;
	border: 0;
	border-bottom: 1px solid var(--alfa-linea);
	background: none;
}
.alfa-faq .alfa-faq__item:first-of-type { border-top: 1px solid var(--alfa-linea); }
.alfa-faq__item summary {
	display: flex;
	align-items: baseline;
	gap: var(--wp--preset--spacing--30);
	cursor: pointer;
	list-style: none;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--l);
	line-height: 1.35;
	letter-spacing: -0.01em;
	transition: color 0.2s;
}
.alfa-faq__item summary:hover { color: var(--wp--preset--color--rojo); }
.alfa-faq__item summary::-webkit-details-marker { display: none; }
.alfa-faq__item summary::after {
	content: "+";
	margin-left: auto;
	flex-shrink: 0;
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border: 1px solid var(--alfa-linea);
	border-radius: 50%;
	font-weight: 300;
	font-size: 1.25rem;
	line-height: 1;
	transition: transform 0.35s var(--alfa-ease), background-color 0.3s, color 0.3s;
}
.alfa-faq__item[open] summary::after {
	transform: rotate(45deg);
	background: var(--wp--preset--color--negro);
	border-color: var(--wp--preset--color--negro);
	color: var(--wp--preset--color--blanco);
}
.alfa-faq__num {
	flex-shrink: 0;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--gris-texto);
	font-variant-numeric: tabular-nums;
}
.alfa-faq__item p { margin: var(--wp--preset--spacing--30) 3rem 0 2.4rem; color: var(--wp--preset--color--gris-texto); }

/* Formulario ------------------------------------------------------------------ */
.alfa-form-caja { border-radius: var(--alfa-radio-grande); box-shadow: var(--wp--custom--sombra); box-sizing: border-box; }
/* Formulario compacto: tarjeta de 540 px como máximo, alineada a la derecha en computador. */
#formulario .wp-block-columns { align-items: center; }
#formulario .alfa-form-caja { flex-basis: auto !important; flex-grow: 1; max-width: 540px; margin-left: auto !important; padding: 1.75rem !important; }
@media (max-width: 781px) { #formulario .alfa-form-caja { max-width: 560px; margin-left: 0 !important; padding: 1.25rem !important; } }
.alfa-form { display: grid; gap: 0.8rem; }
.alfa-form p { margin: 0; }
.alfa-form label { display: block; margin-bottom: 0.3rem; font-size: 0.8125rem; font-weight: 500; }
.alfa-form input, .alfa-form textarea, .alfa-form select {
	width: 100%;
	box-sizing: border-box;
	padding: 0.6rem 0.85rem;
	border: 1px solid var(--wp--preset--color--gris-borde);
	border-radius: 10px;
	background: var(--wp--preset--color--gris);
	color: var(--wp--preset--color--texto);
	font: inherit;
	/* 16px: con menos, el iPhone hace zoom al tocar el campo. */
	font-size: 1rem;
	transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}
.alfa-form input:focus, .alfa-form textarea:focus, .alfa-form select:focus {
	border-color: var(--wp--preset--color--negro);
	background: var(--wp--preset--color--blanco);
	box-shadow: 0 0 0 4px var(--wp--preset--color--gris);
	outline: none;
}
.alfa-form [aria-invalid="true"] { border-color: var(--wp--preset--color--rojo); }
.alfa-form__grid { display: grid; gap: 0.8rem; }
/* Bloques numerados: 1 Tus datos, 2 Tu negocio, 3 Tu consulta. */
.alfa-form__bloque { margin: 0; padding: 0 0 1.1rem; border: 0; border-bottom: 1px solid var(--alfa-linea); min-width: 0; }
.alfa-form__bloque legend { display: flex; align-items: center; gap: 0.55rem; padding: 0; margin-bottom: 0.8rem; font-size: var(--wp--preset--font-size--xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--gris-texto); }
.alfa-form__bloque legend span { display: inline-grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 50%; background: var(--wp--preset--color--negro); color: var(--wp--preset--color--blanco); font-size: 0.7rem; letter-spacing: 0; }
.alfa-form select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 2.4rem;
	cursor: pointer;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 1.15rem) 55%, calc(100% - 0.8rem) 55%;
	background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
	background-repeat: no-repeat;
}
.alfa-form select:invalid { color: var(--wp--preset--color--gris-texto); }
.alfa-form select option { color: var(--wp--preset--color--texto); }
.alfa-form__horario { font-weight: 500; color: var(--wp--preset--color--texto) !important; }
@media (min-width: 600px) {
	.alfa-form__grid { grid-template-columns: 1fr 1fr; }
	.alfa-form__full { grid-column: 1 / -1; }
}
.alfa-form__acciones { display: grid; gap: 0.6rem; }
.alfa-form__acciones button { width: 100%; border: 0; cursor: pointer; padding: 0.8rem 1.5rem; font-size: var(--wp--preset--font-size--s); }
.alfa-form__acciones small { color: var(--wp--preset--color--gris-texto); text-align: center; font-size: var(--wp--preset--font-size--xs); line-height: 1.4; }
.alfa-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.alfa-form__error { padding: 0.85rem 1.1rem; border-radius: 12px; background: var(--wp--preset--color--gris); color: var(--wp--preset--color--rojo); font-weight: 600; }
.alfa-form__gracias { padding: var(--wp--preset--spacing--40); border-radius: var(--alfa-radio); background: var(--wp--preset--color--gris); }
.alfa-form__gracias-titulo { margin: 0 0 0.5rem; font-weight: 700; letter-spacing: -0.02em; font-size: var(--wp--preset--font-size--xl); }
.alfa-form [hidden] { display: none !important; }
/* Selector de perfil: cliente o marca. */
.alfa-form__perfil { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.alfa-form__perfil legend { padding: 0; margin-bottom: 0.6rem; font-size: var(--wp--preset--font-size--xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--gris-texto); }
.alfa-form .alfa-form__opcion { position: relative; display: block; margin: 0; cursor: pointer; }
.alfa-form .alfa-form__opcion input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.alfa-form__opcion span { display: grid; gap: 0.15rem; height: 100%; box-sizing: border-box; padding: 0.7rem 0.85rem 0.7rem 2.3rem; border: 1px solid var(--wp--preset--color--gris-borde); border-radius: 12px; transition: border-color 0.2s, background-color 0.2s; }
.alfa-form__opcion span::before { content: ""; position: absolute; left: 0.85rem; top: 0.95rem; width: 0.9rem; height: 0.9rem; border: 2px solid var(--wp--preset--color--gris-borde); border-radius: 50%; box-sizing: border-box; transition: border 0.2s; }
.alfa-form__opcion strong { font-size: 0.875rem; line-height: 1.25; }
.alfa-form__opcion small { font-size: 0.75rem; line-height: 1.3; color: var(--wp--preset--color--gris-texto); }
.alfa-form__opcion:hover span { border-color: var(--wp--preset--color--negro); }
.alfa-form__opcion input:checked + span { border-color: var(--wp--preset--color--negro); background: var(--wp--preset--color--gris); }
.alfa-form__opcion input:checked + span::before { border: 5px solid var(--wp--preset--color--rojo); }
.alfa-form__opcion input:focus-visible + span { outline: 2px solid var(--wp--preset--color--azul); outline-offset: 2px; }
@media (max-width: 380px) { .alfa-form__perfil { grid-template-columns: 1fr; } }

/* Mapa -------------------------------------------------------------------------- */
.alfa-mapa { position: relative; aspect-ratio: 16 / 10; border-radius: var(--alfa-radio-grande); overflow: hidden; }
.alfa-mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Misión y visión: dos columnas abiertas con línea superior. */
.alfa-mision-vision > .wp-block-column { padding-top: var(--wp--preset--spacing--40); border-top: 1px solid var(--alfa-linea); }
.alfa-vision {
	margin-top: var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--titulos);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.02em;
}

/* Dueño ------------------------------------------------------------------------- */
.alfa-dueno__foto { margin: 0; overflow: hidden; border-radius: var(--alfa-radio-grande); }
.alfa-dueno__foto img { display: block; width: 100%; height: auto; }
.alfa-dueno__cargo { margin-top: 0; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; font-size: var(--wp--preset--font-size--xs); }
.alfa-dueno__cita {
	margin: var(--wp--preset--spacing--40) 0;
	padding: 0;
	border: 0;
	color: var(--wp--preset--color--blanco);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.015em;
}
.alfa-dueno__cita::before {
	content: "“";
	display: block;
	height: 2.5rem;
	color: var(--wp--preset--color--rojo);
	font-size: 4rem;
	line-height: 1;
}

/* Motion graphics ------------------------------------------------------------------ */

/* Cinta: franja negra con texto que corre en continuo. */
.alfa-cinta {
	overflow: hidden;
	background: var(--wp--preset--color--negro-profundo);
	color: var(--wp--preset--color--gris-texto-oscuro);
	padding-block: 1.1rem;
	border-bottom: 1px solid var(--wp--preset--color--negro-tarjeta);
}
.alfa-cinta__pista {
	display: flex;
	width: max-content;
	animation: alfa-cinta 45s linear infinite;
}
.alfa-cinta__pista span {
	display: inline-flex;
	align-items: center;
	gap: 2.5rem;
	padding-right: 2.5rem;
	font-size: var(--wp--preset--font-size--s);
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	white-space: nowrap;
}
.alfa-cinta__pista span::after {
	content: "";
	width: 0.35rem;
	height: 0.35rem;
	border-radius: 50%;
	background: var(--wp--preset--color--rojo);
}
.alfa-cinta:hover .alfa-cinta__pista { animation-play-state: paused; }
@keyframes alfa-cinta { to { transform: translateX(-50%); } }

/* Hero: la foto se acerca lentamente y el texto entra escalonado. */
.alfa-hero .wp-block-cover__image-background { animation: alfa-zoom 20s var(--alfa-ease) both; }
@keyframes alfa-zoom { from { transform: scale(1.1); } to { transform: scale(1); } }
.alfa-hero .wp-block-cover__inner-container > .wp-block-group > * { animation: alfa-entra 1.1s var(--alfa-ease) both; }
.alfa-hero .wp-block-cover__inner-container > .wp-block-group > :nth-child(2) { animation-delay: 0.15s; }
.alfa-hero .wp-block-cover__inner-container > .wp-block-group > :nth-child(3) { animation-delay: 0.3s; }
.alfa-hero .wp-block-cover__inner-container > .wp-block-group > :nth-child(4) { animation-delay: 0.45s; }
@keyframes alfa-entra { from { opacity: 0; transform: translateY(24px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.alfa-hero .alfa-subrayado { animation: alfa-subraya 1.1s 1s var(--alfa-ease) both; }
@keyframes alfa-subraya { from { background-size: 0 0.08em; } to { background-size: 100% 0.08em; } }

/* Aparición al hacer scroll (main.js agrega .alfa-js al html y .is-visible a cada elemento). */
.alfa-js .alfa-revela {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 1s var(--alfa-ease), transform 1s var(--alfa-ease);
	transition-delay: var(--alfa-retraso, 0s);
}
.alfa-js .alfa-revela.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
	.alfa-js .alfa-revela { opacity: 1; transform: none; }
}

/* WhatsApp flotante ------------------------------------------------------------- */
.alfa-wa {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 60;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	text-decoration: none;
}
.alfa-wa__icono {
	width: 3.5rem;
	height: 3.5rem;
	padding: 0.85rem;
	box-sizing: border-box;
	border-radius: 50%;
	background: var(--wp--preset--color--whatsapp);
	color: var(--wp--preset--color--blanco);
	box-shadow: 0 8px 24px -6px color-mix(in srgb, var(--wp--preset--color--whatsapp) 60%, transparent);
	transition: background-color 0.3s, transform 0.3s var(--alfa-ease);
}
.alfa-wa__burbuja {
	padding: 0.55rem 1rem;
	border-radius: var(--alfa-pildora);
	background: var(--wp--preset--color--blanco);
	color: var(--wp--preset--color--negro);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	box-shadow: var(--wp--custom--sombra);
}
.alfa-wa:hover .alfa-wa__icono { background: var(--wp--preset--color--whatsapp-oscuro); transform: scale(1.06); }
@media (max-width: 599px) { .alfa-wa__burbuja { display: none; } }