/* ==========================================================================
   Espuma y Poliurea del Sur — sistema de diseño
   ==========================================================================

   Mismo planteamiento que la web de Gallardo: un juego de tokens, clases
   propias sobre los contenedores de Elementor y toda la maquetación resuelta
   aquí en vez de con ajustes responsive widget a widget.

   La paleta NO se copia de allí. El amarillo eléctrico era del oficio del
   cliente; aquí el color de marca sale del material: el naranja es literalmente
   el de la espuma de poliuretano en todas las fotos de obra, y el fondo es el
   azul pizarra de la bahía. El rojo aparece solo en la poliurea, que es el
   color real del acabado que se ve en las cubiertas industriales.

   Mobile-first sin excepciones: cada bloque se define para móvil y solo se
   amplía hacia arriba con min-width.
   ========================================================================== */

:root {
	/* --- Fondo y superficies -------------------------------------------- */
	--eps-noche-900: #071219;   /* pie y bloques de máximo contraste */
	--eps-noche-800: #0B1A22;   /* fondo oscuro principal (hero, cabecera) */
	--eps-noche-700: #12242E;   /* tarjetas sobre fondo oscuro */
	--eps-noche-600: #1B3340;   /* bordes y separadores sobre oscuro */

	--eps-claro-100: #FFFFFF;
	--eps-claro-200: #F4F7F9;   /* secciones claras alternas */
	--eps-claro-300: #E7EDF1;   /* bordes sobre claro */

	/* --- Tinta ----------------------------------------------------------- */
	--eps-tinta:       #0B1A22;
	--eps-tinta-suave: #46586A;
	--eps-tinta-tenue: #7B8C99;

	--eps-sobre-oscuro:       #EAF1F5;
	--eps-sobre-oscuro-suave: #A9BEC9;

	/* --- Acento: el naranja de la espuma --------------------------------- */
	--eps-espuma-300: #FFC48F;
	--eps-espuma-400: #FF9A4D;
	--eps-espuma-500: #F07B28;   /* color de acción */
	--eps-espuma-600: #D2641A;
	/* Para texto pequeño sobre fondo claro: #D2641A se queda en 3,76:1 sobre
	   blanco y no llega al 4,5:1 que pide WCAG AA. Este sí (5,03:1), con el
	   mismo tono. */
	--eps-espuma-700: #B5520D;
	--eps-espuma-rgb: 240, 123, 40;

	/* --- Secundario: el rojo del acabado de poliurea --------------------- */
	--eps-poliurea-500: #D8402F;
	--eps-poliurea-600: #B33324;

	/* --- Medidas --------------------------------------------------------- */
	--eps-contenedor: 1180px;
	--eps-gutter: clamp(1.15rem, 5vw, 2.5rem);
	--eps-seccion-y: clamp(3.25rem, 9vw, 6.5rem);

	--eps-radio-sm: 10px;
	--eps-radio: 16px;
	--eps-radio-lg: 26px;
	--eps-radio-pill: 999px;

	--eps-sombra-sm: 0 1px 2px rgba(11, 26, 34, .05), 0 4px 12px rgba(11, 26, 34, .06);
	--eps-sombra: 0 2px 6px rgba(11, 26, 34, .06), 0 18px 40px -18px rgba(11, 26, 34, .28);
	--eps-sombra-lg: 0 36px 70px -30px rgba(7, 18, 25, .55);

	/* --- Tipografía ------------------------------------------------------ */
	--eps-display: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--eps-texto: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

	--eps-transicion: 220ms cubic-bezier(.4, 0, .2, 1);
}

/* ==========================================================================
   1. Base
   ========================================================================== */

body {
	font-family: var(--eps-texto);
	color: var(--eps-tinta);
	background: var(--eps-claro-100);
	font-size: 17px;
	line-height: 1.65;
	letter-spacing: -0.005em;
}

h1, h2, h3, h4,
.elementor-heading-title {
	font-family: var(--eps-display);
	letter-spacing: -0.025em;
	text-wrap: balance;
}

/* ==========================================================================
   2. Guardas de desbordamiento en móvil

   Elementor pone flex-wrap:wrap en sus contenedores. En dirección columna eso
   significa "si no cabe a lo alto, abre otra columna a la derecha": en WebKit
   (todos los navegadores de iPhone) aparece scroll lateral que Chrome no
   reproduce jamás. Aprendido en la web de Gallardo tras cuatro rondas.
   El selector de .e-con-inner tiene que ir calcado al de Elementor o pierde
   por especificidad.
   ========================================================================== */

@media (max-width: 1024px) {
	.e-con,
	.e-con.e-flex > .e-con-inner {
		flex-wrap: nowrap;
	}
}

/* Nada posicionado fixed puede vivir fuera de la pantalla: WebKit lo cuenta
   para el ancho desplazable aunque un ancestro tenga overflow hidden. */
.eps-barra-accion[hidden] {
	display: none !important;
}

/* ==========================================================================
   3. Secciones
   ========================================================================== */

.eps-seccion {
	padding-block: var(--eps-seccion-y);
	position: relative;
}

/* Secciones oscuras: el bloque de impacto. */
.eps-seccion--oscura {
	background: var(--eps-noche-800);
	color: var(--eps-sobre-oscuro);
}

.eps-seccion--oscura :is(h1, h2, h3, h4, .elementor-heading-title),
.eps-seccion--oscura .elementor-widget-heading .elementor-heading-title {
	color: #fff;
}

.eps-seccion--oscura p,
.eps-seccion--oscura li {
	color: var(--eps-sobre-oscuro-suave);
}

.eps-seccion--clara {
	background: var(--eps-claro-200);
}

/* Filo de acento que separa la zona oscura de la clara. */
.eps-seccion--oscura + .eps-seccion:not(.eps-seccion--oscura) {
	border-top: 3px solid var(--eps-espuma-500);
}

/* --- Antetítulo (eyebrow) --------------------------------------------------
   Etiqueta de sección, no un titular: dice de qué va el bloque antes de que
   llegue el H2. Es puramente estructural, no añade afirmaciones. */
.eps-eyebrow {
	font-family: var(--eps-display);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--eps-espuma-700);
	margin-bottom: 0.5rem;
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.eps-eyebrow::before {
	content: "";
	width: 26px;
	height: 2px;
	background: var(--eps-espuma-500);
	flex: none;
}

.eps-seccion--oscura .eps-eyebrow {
	color: var(--eps-espuma-400);
}

/* ==========================================================================
   4. Titulares
   ========================================================================== */

h1, .elementor-widget-heading h1.elementor-heading-title {
	font-weight: 800;
	font-size: clamp(2.1rem, 8.5vw, 4.25rem);
	line-height: 1.02;
}

h2, .elementor-widget-heading h2.elementor-heading-title {
	font-weight: 700;
	font-size: clamp(1.65rem, 5.5vw, 2.6rem);
	line-height: 1.12;
}

h3, .elementor-widget-heading h3.elementor-heading-title {
	font-weight: 700;
	font-size: clamp(1.12rem, 3.2vw, 1.35rem);
	line-height: 1.28;
}

/* Última palabra del H1 en color: el gesto que ancla la marca. Se aplica con
   un <span> en el texto del titular, editable desde Elementor. */
.eps-acento {
	color: var(--eps-espuma-400);
}

.eps-lead {
	font-size: clamp(1.05rem, 3.4vw, 1.28rem);
	line-height: 1.6;
	max-width: 42ch;
}

/* ==========================================================================
   5. Hero
   ========================================================================== */

.eps-hero {
	position: relative;
	overflow: hidden;
	background: var(--eps-noche-800);
	color: var(--eps-sobre-oscuro);
	padding-block: clamp(2.5rem, 9vw, 5.5rem) clamp(3rem, 10vw, 6rem);
	isolation: isolate;
}

/* La foto va dentro del DOM como widget de imagen (así el cliente la cambia en
   Elementor) pero se coloca de fondo con CSS.

   Los selectores de imagen llevan un ancestro delante a propósito: Elementor 4
   declara `.elementor img { height: auto }`, que empata en especificidad con
   `.clase img`. En un empate decide el orden de carga de las hojas, y eso
   cambia de un servidor a otro. Con el ancestro delante no hay empate. */
.eps-hero__fondo {
	position: absolute;
	inset: 0;
	z-index: -2;
	margin: 0;
	pointer-events: none;
}

.eps-hero .eps-hero__fondo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	border-radius: 0;
}

/* Velo: sin él el texto no cumple contraste sobre una foto de obra a pleno sol.
   Más denso abajo, donde está el texto, y más limpio arriba, donde se ve la
   fotografía. */
.eps-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, rgba(7, 18, 25, .74) 0%, rgba(7, 18, 25, .88) 42%, rgba(7, 18, 25, .97) 100%),
		radial-gradient(120% 80% at 15% 0%, rgba(var(--eps-espuma-rgb), .20) 0%, transparent 60%);
}

.eps-hero :is(h1, h2, .elementor-heading-title),
.eps-hero .elementor-widget-heading .elementor-heading-title {
	color: #fff;
}

/* En escritorio el hero es más bajo y el texto ocupa media pantalla: con el
   mismo velo que en móvil la foto desaparecía del todo. Se aclara y se
   desplaza el degradado hacia la izquierda, que es donde está el texto. */
@media (min-width: 900px) {
	.eps-hero::after {
		background:
			linear-gradient(100deg, rgba(7, 18, 25, .94) 0%, rgba(7, 18, 25, .80) 45%, rgba(7, 18, 25, .45) 100%),
			radial-gradient(90% 90% at 100% 0%, rgba(var(--eps-espuma-rgb), .18) 0%, transparent 60%);
	}

	.eps-hero .eps-lead,
	.eps-hero .elementor-widget-text-editor {
		max-width: 46ch;
	}
}


.eps-hero p {
	color: #D9E5EC;
}

/* --- Píldora sobre el H1 --------------------------------------------------- */
.eps-pildora {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.5rem 1rem 0.5rem 0.55rem;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: var(--eps-radio-pill);
	background: rgba(255, 255, 255, .07);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.35;
	color: #EAF1F5 !important;
	margin: 0 0 1.25rem;
	max-width: 100%;
}

.eps-pildora__icono {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--eps-espuma-500);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	font-size: 0.8rem;
}

/* ==========================================================================
   6. Botones
   ========================================================================== */

.elementor-button,
.eps-tel,
.eps-whatsapp,
.ff-btn-submit {
	font-family: var(--eps-display);
	font-weight: 700;
	letter-spacing: -0.01em;
	border-radius: var(--eps-radio-pill);
	padding: 0.95rem 1.6rem;
	min-height: 52px;
	border: 0;
	transition: transform var(--eps-transicion), box-shadow var(--eps-transicion),
		background-color var(--eps-transicion);
	text-decoration: none;
}

.elementor-button:hover,
.eps-tel:hover,
.eps-whatsapp:hover,
.ff-btn-submit:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px -10px rgba(var(--eps-espuma-rgb), .6);
}

.elementor-button:active,
.eps-tel:active,
.eps-whatsapp:active {
	transform: translateY(0);
}

/* Botón principal: el naranja de la espuma. */
.eps-boton--principal .elementor-button,
a.eps-tel {
	background: var(--eps-espuma-500);
	color: #10202A !important;
}

.eps-boton--principal .elementor-button:hover,
a.eps-tel:hover {
	background: var(--eps-espuma-400);
}

/* Botón secundario sobre oscuro: contorno. */
.eps-hero .eps-boton:not(.eps-boton--principal) .elementor-button,
a.eps-whatsapp {
	background: transparent;
	color: #fff !important;
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .3);
}

.eps-hero .eps-boton:not(.eps-boton--principal) .elementor-button:hover,
a.eps-whatsapp:hover {
	background: rgba(255, 255, 255, .1);
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55);
}

/* En móvil los CTA ocupan el ancho: son el objetivo de la página. */
.eps-hero__botones,
.eps-cta__botones {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	width: 100%;
	margin-top: 1.75rem;
}

.eps-hero__botones .elementor-widget,
.eps-cta__botones .elementor-widget {
	width: 100%;
}

.eps-hero__botones .elementor-button,
.eps-cta__botones .elementor-button,
.eps-hero__botones .eps-tel,
.eps-hero__botones .eps-whatsapp,
.eps-cta__botones .eps-tel,
.eps-cta__botones .eps-whatsapp {
	width: 100%;
	justify-content: center;
}

@media (min-width: 700px) {
	.eps-hero__botones,
	.eps-cta__botones {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
	}

	.eps-hero__botones .elementor-widget,
	.eps-cta__botones .elementor-widget {
		width: auto;
	}

	.eps-hero__botones .elementor-button,
	.eps-cta__botones .elementor-button,
	.eps-hero__botones .eps-tel,
	.eps-hero__botones .eps-whatsapp,
	.eps-cta__botones .eps-tel,
	.eps-cta__botones .eps-whatsapp {
		width: auto;
	}
}

/* ==========================================================================
   7. Rejillas y tarjetas
   ========================================================================== */

.eps-grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
	width: 100%;
}

@media (min-width: 620px) {
	.eps-grid--2,
	.eps-grid--3,
	.eps-grid--4 {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.25rem;
	}
}

@media (min-width: 960px) {
	.eps-grid--3 { grid-template-columns: repeat(3, 1fr); }
	.eps-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.eps-card {
	background: var(--eps-claro-100);
	border: 1px solid var(--eps-claro-300);
	border-radius: var(--eps-radio);
	padding: 1.35rem;
	height: 100%;
	position: relative;
	overflow: hidden;
	transition: transform var(--eps-transicion), box-shadow var(--eps-transicion),
		border-color var(--eps-transicion);
}

.eps-card > * + * {
	margin-top: 0.55rem;
}

/* Filo de acento que aparece al pasar por encima. En táctil no hay hover, así
   que el diseño nunca depende de él para leerse. */
.eps-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: var(--eps-espuma-500);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--eps-transicion);
}

.eps-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--eps-sombra);
	border-color: transparent;
}

.eps-card:hover::before {
	transform: scaleX(1);
}

.eps-seccion--clara .eps-card {
	border-color: transparent;
	box-shadow: var(--eps-sombra-sm);
}

.eps-seccion--oscura .eps-card {
	background: var(--eps-noche-700);
	border-color: var(--eps-noche-600);
}

.eps-seccion--oscura .eps-card p {
	color: var(--eps-sobre-oscuro-suave);
}

/* --- Tarjeta de servicio con foto ---------------------------------------- */
.eps-card--servicio {
	padding: 0;
	display: flex;
	flex-direction: column;
}

.eps-card--servicio > .elementor-widget {
	padding-inline: 1.35rem;
	margin-top: 0.55rem;
}

.eps-card--servicio > .eps-card__foto {
	padding-inline: 0;
	margin-top: 0;
}

.eps-card--servicio > .elementor-widget:last-child {
	padding-bottom: 1.35rem;
	margin-top: 1rem;
}

.eps-card__foto {
	overflow: hidden;
}

.eps-card .eps-card__foto img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	display: block;
	transition: transform 600ms cubic-bezier(.2, .8, .2, 1);
}

.eps-card--servicio:hover .eps-card__foto img {
	transform: scale(1.05);
}

/* --- Tarjeta de localidad ------------------------------------------------- */
.eps-card--ciudad ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.eps-card--ciudad li + li {
	margin-top: 0.4rem;
}

.eps-card--ciudad a {
	display: inline-flex;
	/* A la primera línea, no al centro: con dos líneas la flecha quedaba
	   flotando en mitad del enlace. */
	align-items: flex-start;
	gap: 0.4rem;
	text-decoration: none;
	font-weight: 600;
	color: var(--eps-tinta);
	min-height: 32px;
}

.eps-card--ciudad a::before {
	content: "→";
	color: var(--eps-espuma-500);
	transition: transform var(--eps-transicion);
}

.eps-card--ciudad a:hover {
	color: var(--eps-espuma-700);
}

.eps-card--ciudad a:hover::before {
	transform: translateX(3px);
}

/* ==========================================================================
   8. Franja de datos

   Solo repite afirmaciones que ya están en el texto de la web. No añade
   ninguna cifra nueva.
   ========================================================================== */

.eps-franja {
	background: var(--eps-noche-900);
	color: var(--eps-sobre-oscuro);
	padding-block: clamp(1.5rem, 5vw, 2.25rem);
}

.eps-franja ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.9rem;
	grid-template-columns: 1fr;
}

.eps-franja li {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	font-weight: 600;
	font-size: 0.95rem;
	color: #DCE8EE !important;
	line-height: 1.35;
}

.eps-franja li::before {
	content: "✓";
	color: var(--eps-espuma-400);
	font-weight: 800;
	flex: none;
}

@media (min-width: 700px) {
	.eps-franja ul {
		grid-template-columns: repeat(3, 1fr);
		gap: 1.5rem;
	}
}

/* ==========================================================================
   9. Proceso de trabajo como línea de tiempo
   ========================================================================== */

.eps-pasos {
	list-style: none;
	counter-reset: paso;
	padding: 0;
	margin: 1.5rem 0 0;
	position: relative;
}

.eps-pasos li {
	counter-increment: paso;
	position: relative;
	padding-left: 3.25rem;
	padding-bottom: 1.5rem;
}

.eps-pasos li::before {
	content: counter(paso, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--eps-espuma-500);
	color: #10202A;
	font-family: var(--eps-display);
	font-weight: 800;
	font-size: 0.8rem;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
}

/* Línea que une los pasos. */
.eps-pasos li::after {
	content: "";
	position: absolute;
	left: calc(1.125rem - 1px);
	top: 2.25rem;
	bottom: 0;
	width: 2px;
	background: linear-gradient(180deg, var(--eps-espuma-300), var(--eps-claro-300));
}

.eps-pasos li:last-child {
	padding-bottom: 0;
}

.eps-pasos li:last-child::after {
	display: none;
}

/* ==========================================================================
   10. Listas de ventajas
   ========================================================================== */

.eps-seccion--ventajas ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 0.85rem;
}

.eps-seccion--ventajas li {
	position: relative;
	padding-left: 2rem;
	line-height: 1.55;
}

.eps-seccion--ventajas li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 12px;
	height: 12px;
	border-radius: 3px;
	background: var(--eps-espuma-500);
	transform: rotate(45deg);
}

@media (min-width: 860px) {
	.eps-seccion--ventajas ul {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.1rem 2rem;
	}
}

/* ==========================================================================
   11. Preguntas frecuentes
   ========================================================================== */

.eps-faq__item {
	background: var(--eps-claro-100);
	border: 1px solid var(--eps-claro-300);
	border-radius: var(--eps-radio);
	padding: 1.25rem 1.35rem;
	transition: border-color var(--eps-transicion), box-shadow var(--eps-transicion);
}

.eps-faq__item + .eps-faq__item {
	margin-top: 0.85rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--eps-claro-300);
}

.eps-faq__item:hover {
	border-color: var(--eps-espuma-300);
	box-shadow: var(--eps-sombra-sm);
}

.eps-faq__pregunta {
	color: var(--eps-tinta);
}

.eps-faq__respuesta p {
	margin-bottom: 0;
	color: var(--eps-tinta-suave);
}

/* ==========================================================================
   12. Galería
   ========================================================================== */

.eps-galeria .gallery {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.5rem;
	margin: 0 !important;
}

.eps-galeria .gallery-item {
	width: 100% !important;
	max-width: none !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden;
	border-radius: var(--eps-radio-sm);
}

.eps-galeria .gallery-icon,
.eps-galeria .gallery-icon a {
	display: block;
	width: 100%;
	overflow: hidden;
	border-radius: var(--eps-radio-sm);
}

.eps-galeria .gallery-item img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
	height: auto;
	display: block;
	border: none !important;
	transition: transform 700ms cubic-bezier(.2, .8, .2, 1), filter var(--eps-transicion);
}

.eps-galeria .gallery-item:hover img {
	transform: scale(1.07);
	filter: saturate(1.08);
}

@media (min-width: 620px) {
	.eps-galeria .gallery {
		grid-template-columns: repeat(3, 1fr);
		gap: 0.75rem;
	}
}

@media (min-width: 960px) {
	.eps-galeria .gallery {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ==========================================================================
   13. Foto de apertura de las páginas interiores
   ========================================================================== */

.eps-seccion .eps-imagen--ancha img,
.eps-imagen--ancha img {
	width: 100%;
	border-radius: var(--eps-radio);
	aspect-ratio: 4 / 3;
	object-fit: cover;
	box-shadow: var(--eps-sombra);
}

@media (min-width: 768px) {
	.eps-imagen--ancha img {
		aspect-ratio: 21 / 9;
	}
}

/* ==========================================================================
   14. Barra de acciones fija en móvil

   Es el elemento que más convierte de la web de Gallardo: llamar, WhatsApp y
   presupuesto siempre a un pulgar. Solo en móvil; en escritorio los CTA ya
   están a la vista.
   ========================================================================== */

.eps-barra-accion {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 998;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	background: var(--eps-noche-900);
	border-top: 1px solid var(--eps-noche-600);
	padding-bottom: env(safe-area-inset-bottom, 0);
	box-shadow: 0 -6px 24px rgba(7, 18, 25, .35);
}

.eps-barra-accion a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.15rem;
	padding: 0.6rem 0.35rem;
	min-height: 58px;
	color: #E6EEF3;
	text-decoration: none;
	font-family: var(--eps-display);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	border: 0;
	background: none;
	transition: background-color var(--eps-transicion);
}

.eps-barra-accion a + a {
	border-left: 1px solid var(--eps-noche-600);
}

.eps-barra-accion a:active {
	background: rgba(255, 255, 255, .08);
}

.eps-barra-accion a svg {
	width: 21px;
	height: 21px;
	fill: none;
	stroke: var(--eps-espuma-400);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* La acción principal se distingue del resto. */
.eps-barra-accion a.es-principal {
	background: var(--eps-espuma-500);
	color: #10202A;
}

.eps-barra-accion a.es-principal svg {
	stroke: #10202A;
}

@media (min-width: 768px) {
	.eps-barra-accion {
		display: none;
	}
}

/* ==========================================================================
   15. Aparición al hacer scroll

   Desplazamiento y opacidad, nada más. El contenido se ve igual si el
   JavaScript no llega a ejecutarse (la clase la pone el propio script) y se
   desactiva por completo si el sistema pide menos movimiento.
   ========================================================================== */

.js-reveal .eps-reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 620ms cubic-bezier(.2, .7, .2, 1),
		transform 620ms cubic-bezier(.2, .7, .2, 1);
	will-change: opacity, transform;
}

.js-reveal .eps-reveal.es-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.js-reveal .eps-reveal {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   16. Migas de pan
   ========================================================================== */

/* Las migas van siempre entre la cabecera y el hero, los dos oscuros: en blanco
   partían el bloque superior en dos. Comparten fondo con ellos y así cabecera,
   migas y hero se leen como una sola pieza. */
.eps-breadcrumbs {
	font-size: 0.8125rem;
	padding: 0.75rem 0 0.25rem;
	word-break: break-word;
	background: var(--eps-noche-800);
}

.eps-breadcrumbs__inner {
	max-width: var(--eps-contenedor);
	margin-inline: auto;
	padding-inline: var(--eps-gutter);
	color: var(--eps-sobre-oscuro-suave);
}

.eps-breadcrumbs a {
	text-decoration: none;
	color: var(--eps-sobre-oscuro-suave);
	transition: color var(--eps-transicion);
}

.eps-breadcrumbs a:hover {
	color: var(--eps-espuma-400);
}

/* El separador ">" que pinta Rank Math, más discreto. */
.eps-breadcrumbs .separator {
	color: var(--eps-noche-600);
	padding-inline: 0.15rem;
}

/* ==========================================================================
   17. Enlaces de contenido
   ========================================================================== */

.elementor-widget-text-editor a {
	color: var(--eps-espuma-700);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1.5px;
	transition: color var(--eps-transicion);
}

.elementor-widget-text-editor a:hover {
	color: var(--eps-espuma-500);
}

.eps-seccion--oscura .elementor-widget-text-editor a {
	color: var(--eps-espuma-300);
}

.eps-enlace-cruzado {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.75rem;
	font-weight: 700;
	font-family: var(--eps-display);
	color: var(--eps-espuma-700);
	text-decoration: none;
	border-bottom: 2px solid var(--eps-espuma-300);
	padding-bottom: 2px;
	transition: border-color var(--eps-transicion);
}

.eps-enlace-cruzado:hover {
	border-color: var(--eps-espuma-500);
}

/* ==========================================================================
   18. Nota legal y marcadores de pendiente
   ========================================================================== */

.eps-nota-legal {
	border-left: 4px solid var(--eps-espuma-500);
	background: #FFF6EE;
	padding: 0.9rem 1.15rem;
	margin-bottom: 1.5rem;
	border-radius: 0 var(--eps-radio-sm) var(--eps-radio-sm) 0;
	font-size: 0.9375rem;
}

/* ==========================================================================
   19. Formulario
   ========================================================================== */

.eps-formulario {
	background: var(--eps-claro-100);
	border: 1px solid var(--eps-claro-300);
	border-radius: var(--eps-radio-lg);
	padding: clamp(1.25rem, 4vw, 2rem);
	box-shadow: var(--eps-sombra);
	margin-top: 1rem;
}

.eps-formulario input[type="text"],
.eps-formulario input[type="email"],
.eps-formulario input[type="tel"],
.eps-formulario select,
.eps-formulario textarea {
	border-radius: var(--eps-radio-sm) !important;
	border: 1px solid var(--eps-claro-300) !important;
	padding: 0.8rem 0.9rem !important;
	font-family: var(--eps-texto) !important;
	font-size: 16px !important;
	transition: border-color var(--eps-transicion), box-shadow var(--eps-transicion);
}

.eps-formulario input:focus,
.eps-formulario select:focus,
.eps-formulario textarea:focus {
	border-color: var(--eps-espuma-500) !important;
	box-shadow: 0 0 0 3px rgba(var(--eps-espuma-rgb), .18) !important;
	outline: none;
}

.eps-formulario .ff-btn-submit {
	background: var(--eps-espuma-500) !important;
	color: #10202A !important;
	width: 100%;
}

/* ==========================================================================
   20. Mapa
   ========================================================================== */

.eps-mapa {
	aspect-ratio: 4 / 3;
	width: 100%;
	background: var(--eps-claro-300);
	border-radius: var(--eps-radio);
	border: 0;
}

@media (min-width: 768px) {
	.eps-mapa {
		aspect-ratio: 16 / 9;
	}
}

/* ==========================================================================
   21. Banner de cookies

   CookieYes viene con su azul de fábrica y es literalmente lo primero que ve
   todo el que entra. Se lleva a la paleta del sitio sin tocar su
   funcionamiento: los botones siguen siendo los suyos, solo cambian de color.
   Aceptar y rechazar pesan lo mismo visualmente, que además es lo que exige la
   normativa: rechazar tiene que ser tan fácil como aceptar.
   ========================================================================== */

.cky-consent-container .cky-consent-bar {
	background: var(--eps-noche-800) !important;
	border: 1px solid var(--eps-noche-600) !important;
	border-radius: var(--eps-radio) !important;
	box-shadow: var(--eps-sombra-lg) !important;
	font-family: var(--eps-texto) !important;
}

.cky-consent-container .cky-title,
.cky-preference-center .cky-preference-title {
	font-family: var(--eps-display) !important;
	color: #fff !important;
}

.cky-consent-container .cky-notice-des,
.cky-consent-container .cky-notice-des p {
	color: var(--eps-sobre-oscuro-suave) !important;
	font-size: 0.875rem !important;
}

.cky-notice-btn-wrapper .cky-btn {
	font-family: var(--eps-display) !important;
	font-weight: 700 !important;
	border-radius: var(--eps-radio-pill) !important;
	min-height: 46px !important;
	transition: background-color var(--eps-transicion), color var(--eps-transicion);
}

.cky-btn-accept {
	background: var(--eps-espuma-500) !important;
	border-color: var(--eps-espuma-500) !important;
	color: #10202A !important;
}

.cky-btn-accept:hover {
	background: var(--eps-espuma-400) !important;
	border-color: var(--eps-espuma-400) !important;
}

.cky-btn-reject,
.cky-btn-customize {
	background: transparent !important;
	border: 1.5px solid rgba(255, 255, 255, .35) !important;
	color: #fff !important;
}

.cky-btn-reject:hover,
.cky-btn-customize:hover {
	background: rgba(255, 255, 255, .1) !important;
	border-color: rgba(255, 255, 255, .6) !important;
}

/* Botón flotante para reabrir las preferencias. */
.cky-btn-revisit-wrapper {
	background: var(--eps-noche-800) !important;
	border: 1px solid var(--eps-noche-600) !important;
}

/* ==========================================================================
   22. Accesibilidad
   ========================================================================== */

.eps-skip-link {
	position: absolute;
	left: -9999px;
}

.eps-skip-link:focus {
	left: 1rem;
	top: 1rem;
	z-index: 9999;
	padding: 0.65rem 1.1rem;
	background: var(--eps-espuma-500);
	color: #10202A;
	border-radius: var(--eps-radio-sm);
	font-weight: 700;
}

:focus-visible {
	outline: 3px solid var(--eps-espuma-400);
	outline-offset: 2px;
}