/*
Theme Name: Experto Laboral PHP
Theme URI: https://expertolaboralonline.com/
Author: Experto Laboral Online
Description: Tema clásico a medida para Experto Laboral Online. Despidos, nóminas y reclamaciones laborales. Sin maquetadores externos. Carpeta expertolaboral-php: el slug es distinto del tema de bloques anterior a propósito, para que las plantillas de bloques guardadas en la base de datos no lo afecten.
Version: 2.26.1
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: expertolaboral
Tags: custom-menu, featured-images, translation-ready, e-commerce
*/

/* =============================================================
   1. Tokens
   Los colores, tipografías y espaciados salen de theme.json,
   que WordPress convierte en variables --wp--preset--*.
   Aquí solo les damos nombres cortos.
   ============================================================= */

:root {
	--navy:       var(--wp--preset--color--navy, #12294A);
	--navy-deep:  var(--wp--preset--color--navy-deep, #0F1930);
	--orange:     var(--wp--preset--color--orange, #E85C3A);
	--orange-dk:  var(--wp--preset--color--orange-dark, #C8492B);
	--peach:      var(--wp--preset--color--peach, #FCEDE6);
	--blue-soft:  var(--wp--preset--color--blue-soft, #EAF1F8);
	--shell:      var(--wp--preset--color--shell, #F4F0E9);
	--cream:      var(--wp--preset--color--cream, #FBF8F4);
	--ink:        var(--wp--preset--color--ink, #1C2430);
	--muted:      #565C70; /* más oscuro que el token del logotipo: el gris de marca
	                          se queda en 4,7:1 sobre el fondo crema y el texto pequeño
	                          necesita más contraste para leerse con comodidad */
	--line:       var(--wp--preset--color--line, #E3DED5);

	--serif: var(--wp--preset--font-family--serif, Lora, Georgia, serif);
	--sans:  var(--wp--preset--font-family--sans, Inter, -apple-system, "Segoe UI", Roboto, sans-serif);

	--s-10: .5rem;
	--s-20: 1rem;
	--s-30: 1.75rem;
	--s-40: 2.75rem;
	--s-50: 4.5rem;
	--s-60: 6.5rem;

	--radio: 10px;
	--radio-s: 6px;
	--sombra: 0 1px 2px rgba(18,41,74,.05), 0 8px 24px rgba(18,41,74,.06);
	--sombra-alta: 0 12px 40px rgba(18,41,74,.16);
}

/* =============================================================
   2. Base
   ============================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
	margin: 0;
	font-family: var(--sans);
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--muted);
	background: #fff;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--serif);
	color: var(--navy);
	font-weight: 600;
	line-height: 1.18;
	letter-spacing: -.01em;
	margin: 0 0 var(--s-20);
}

h3, h4 { font-family: var(--sans); }

p { margin: 0 0 var(--s-20); }

a { color: var(--orange); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--orange);
	outline-offset: 3px;
	border-radius: 3px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.el-skip {
	position: absolute;
	left: -9999px;
	z-index: 999;
}
.el-skip:focus {
	left: 1rem; top: 1rem;
	background: var(--navy);
	color: #fff;
	padding: .75rem 1.25rem;
	border-radius: var(--radio-s);
}

/* =============================================================
   3. Contenedores y secciones
   ============================================================= */

.el-wrap {
	width: 100%;
	max-width: 1180px;
	margin-inline: auto;
	padding-inline: var(--s-30);
}

.el-narrow { max-width: 760px; }

.el-section { padding-block: var(--s-60); }
.el-section--shell  { background: var(--shell); }
.el-section--blanco { background: #fff; }
.el-section--cream  { background: var(--cream); }
.el-section--centro { text-align: center; }

.el-main { display: block; }

.el-mt-30 { margin-top: var(--s-30); }

.el-sechead { text-align: center; margin-bottom: var(--s-40); }
.el-sechead__title { font-size: clamp(1.75rem, 3.5vw, 2.25rem); margin-bottom: .5rem; }
.el-sechead__sub { font-size: .9375rem; margin: 0; }
.el-sechead__mas { text-align: center; margin-top: var(--s-40); font-size: .9375rem; }

.el-pagehead { margin-bottom: var(--s-30); }
.el-pagehead__title { font-size: clamp(1.9rem, 4vw, 2.6rem); }
.el-pagehead__sub { font-size: .9375rem; }
.el-pagehead__form { margin-top: var(--s-20); }

.el-eyebrow {
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--orange);
	margin-bottom: .5rem;
}
.el-eyebrow--gris  { color: var(--muted); }
.el-eyebrow--claro { color: rgba(255,255,255,.75); }
.el-eyebrow a { color: inherit; }

.el-meta { font-size: .875rem; color: var(--muted); }

.el-figura { margin: 0 0 var(--s-30); }
.el-figura img { border-radius: var(--radio); width: 100%; }

.el-vacio { text-align: center; padding-block: var(--s-40); }

/* =============================================================
   4. Botones
   ============================================================= */

.el-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .9rem 1.6rem;
	border: 1px solid transparent;
	border-radius: var(--radio-s);
	font-family: inherit;
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease;
	text-decoration: none;
}
.el-btn:hover { text-decoration: none; }

.el-btn--primary { background: var(--orange); color: #fff; }
.el-btn--primary:hover { background: var(--orange-dk); color: #fff; }

.el-btn--navy { background: var(--navy); color: #fff; }
.el-btn--navy:hover { background: var(--navy-deep); color: #fff; }

.el-btn--blanco { background: #fff; color: var(--orange); }
.el-btn--blanco:hover { background: var(--cream); color: var(--orange-dk); }

.el-btn--lg { padding: 1.05rem 2rem; font-size: 1rem; letter-spacing: .01em; }

/* La flecha se desplaza al pasar por encima: invita sin distraer */
.el-btn--flecha .el-icono {
	width: 18px;
	height: 18px;
	transition: transform .22s ease;
}
.el-btn--flecha:hover .el-icono { transform: translateX(4px); }
.el-btn--primary { box-shadow: 0 6px 18px rgba(232,92,58,.28); }
.el-btn--primary:hover { box-shadow: 0 8px 24px rgba(232,92,58,.34); }

@media (prefers-reduced-motion: reduce) {
	.el-btn--flecha:hover .el-icono { transform: none; }
}
.el-btn--ancho { width: 100%; }
.el-btn--pastilla { border-radius: 999px; padding: .8rem 1.5rem; font-size: .875rem; }

/* =============================================================
   5. Cabecera y menú
   ============================================================= */

.el-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: #fff;
	border-bottom: 1px solid var(--line);
}

.el-header__inner {
	display: flex;
	align-items: center;
	gap: clamp(1.75rem, 4vw, 4rem);
	padding-block: 1.25rem;
}

.el-header__acciones {
	display: flex;
	align-items: center;
	gap: var(--s-20);
	margin-left: auto;
}

.el-brand img,
.custom-logo { max-height: 40px; width: auto; }

.el-brand__text {
	font-family: var(--serif);
	font-size: 1.35rem;
	font-weight: 600;
	color: var(--navy);
}

.el-nav {
	display: flex;
	align-items: center;
	gap: clamp(1.75rem, 3.5vw, 3rem);
}

.el-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(1.5rem, 2.4vw, 2.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
	white-space: nowrap;
}

.el-nav__list a {
	position: relative;
	display: block;
	padding-block: .4rem;
	color: var(--navy);
	/* Serif, igual que el logotipo: la cabecera deja de parecer una
	   plantilla genérica y se lee como un despacho. */
	font-family: var(--serif);
	font-size: 1.0625rem;
	font-weight: 500;
	letter-spacing: .002em;
	/* Ningún elemento del menú puede partirse en dos líneas */
	white-space: nowrap;
}

/* Subrayado que crece desde el centro: discreto, no rebota el texto */
.el-nav__list a::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 0;
	height: 1.5px;
	background: var(--orange);
	transform: translateX(-50%);
	transition: width .22s ease;
}

.el-nav__list a:hover { color: var(--navy); text-decoration: none; }
.el-nav__list a:hover::after { width: 100%; }

.el-nav__list .current-menu-item > a::after,
.el-nav__list .current_page_item > a::after { width: 100%; }

/* Teléfono en cabecera: en un despacho, un número visible convierte */
.el-header__tel {
	color: var(--navy);
	font-size: .9375rem;
	font-weight: 600;
	letter-spacing: .01em;
	white-space: nowrap;
}
.el-header__tel:hover { color: var(--orange); text-decoration: none; }

/* Carrito */
.el-carrito {
	position: relative;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	color: var(--navy);
	transition: background-color .18s ease;
}
.el-carrito:hover { background: var(--shell); text-decoration: none; }
.el-carrito .el-icono { width: 21px; height: 21px; }

.el-carrito__num {
	position: absolute;
	top: 2px;
	right: 0;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--orange);
	color: #fff;
	font-size: .6875rem;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}
.el-carrito__num--vacio { display: none; }

.el-nav__list .current-menu-item > a,
.el-nav__list .current_page_item > a { color: var(--orange); }

/* Submenús */
.el-nav__list li { position: relative; }
.el-nav__list .sub-menu {
	position: absolute;
	left: 0; top: 100%;
	min-width: 220px;
	margin: 0;
	padding: .5rem 0;
	list-style: none;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radio-s);
	box-shadow: var(--sombra);
	opacity: 0;
	visibility: hidden;
	transition: opacity .15s ease;
}
.el-nav__list li:hover > .sub-menu,
.el-nav__list li:focus-within > .sub-menu { opacity: 1; visibility: visible; }
.el-nav__list .sub-menu a { display: block; padding: .5rem 1rem; }

.el-burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px; height: 44px;
	padding: 0 10px;
	background: none;
	border: 1px solid var(--line);
	border-radius: var(--radio-s);
	cursor: pointer;
}
.el-burger span {
	display: block;
	height: 2px;
	background: var(--navy);
	border-radius: 2px;
}

@media (max-width: 900px) {
	.el-burger { display: flex; }

	.el-nav {
		position: fixed;
		inset: 0;
		z-index: 200;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		gap: var(--s-30);
		padding: var(--s-50) var(--s-30);
		background: var(--navy);
		transform: translateX(100%);
		transition: transform .25s ease;
		overflow-y: auto;
	}
	.el-nav-abierto .el-nav { transform: translateX(0); }
	.el-nav-abierto { overflow: hidden; }

	.el-nav__list { flex-direction: column; align-items: flex-start; gap: var(--s-20); }
	.el-nav__list a { color: #fff; font-size: 1.25rem; }
	.el-nav__list .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		background: none;
		border: 0;
		box-shadow: none;
		padding-left: var(--s-20);
	}
	.el-nav__list .sub-menu a { font-size: 1rem; color: rgba(255,255,255,.8); }

	/* El botón de cierre es la propia hamburguesa, que queda por encima */
	.el-nav-abierto .el-burger { position: relative; z-index: 300; }
	.el-nav-abierto .el-burger span { background: #fff; }
}

.el-icono {
	width: 20px;
	height: 20px;
	flex: none;
	display: block;
}

/* =============================================================
   6. Rejillas y tarjetas
   ============================================================= */

.el-rejilla {
	display: grid;
	gap: var(--s-30);
}
.el-rejilla--2 { grid-template-columns: repeat(2, 1fr); }
.el-rejilla--3 { grid-template-columns: repeat(3, 1fr); }
.el-rejilla--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1000px) {
	.el-rejilla--3,
	.el-rejilla--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.el-rejilla--2,
	.el-rejilla--3,
	.el-rejilla--4 { grid-template-columns: 1fr; }
}

.el-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radio);
	box-shadow: var(--sombra);
	overflow: hidden;
}

.el-card__media { display: block; background: var(--blue-soft); }
.el-card__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.el-card__placeholder {
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 9;
	color: var(--orange);
	opacity: .35;
}
.el-card__placeholder svg { width: 38%; height: auto; }

.el-card__body { padding: var(--s-30); flex: 1; }

.el-card__title {
	font-family: var(--sans);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.4;
	margin-bottom: .5rem;
}
.el-card__title a { color: var(--navy); }
.el-card__title a:hover { color: var(--orange); text-decoration: none; }

.el-card__excerpt { font-size: .9375rem; margin-bottom: 0; }
.el-card__more { margin: var(--s-20) 0 0; font-size: .9375rem; }

/* =============================================================
   7. Listas con marca de verificación
   ============================================================= */

.el-check { list-style: none; margin: 0 0 var(--s-30); padding: 0; }

.el-check li {
	position: relative;
	padding-left: 1.6rem;
	margin-bottom: .55rem;
	font-size: .9375rem;
	color: var(--ink);
}

.el-check li::before {
	content: "";
	position: absolute;
	left: 0; top: .45em;
	width: .55rem; height: .3rem;
	border-left: 2px solid var(--orange);
	border-bottom: 2px solid var(--orange);
	transform: rotate(-45deg);
}

/* =============================================================
   8. Héroe y panel de marca
   ============================================================= */

.el-hero { background: var(--cream); padding-block: var(--s-50) var(--s-60); }

.el-hero__inner {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: clamp(2.5rem, 5vw, 5rem);
	align-items: center;
}

.el-hero__title {
	font-size: clamp(2.25rem, 5vw, 3.35rem);
	line-height: 1.1;
	letter-spacing: -.018em;
	margin-bottom: var(--s-30);
}
.el-hero__title em {
	display: block;
	font-style: italic;
	font-weight: 400;
	color: var(--orange);
}

/* El lead es lo que decide si alguien sigue leyendo: más cuerpo, más aire
   y una medida corta para que el ojo no se pierda al saltar de línea. */
.el-hero__lead {
	max-width: 34em;
	margin-bottom: var(--s-40);
	font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
	line-height: 1.75;
	color: var(--ink);
	opacity: .82;
}

.el-hero__acciones {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-30);
}

.el-hero__cta { display: block; }

.el-hero__micro {
	margin: .7rem 0 0;
	font-size: .8125rem;
	line-height: 1.5;
	color: var(--muted);
}

.el-hero__tel {
	color: var(--navy);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: .01em;
	border-bottom: 1px solid var(--line);
	padding-bottom: 2px;
}
.el-hero__tel:hover { color: var(--orange); border-color: var(--orange); text-decoration: none; }

/* Muestra del entregable: el producto, no una foto de despacho */
.el-muestra {
	position: relative;
	margin: 0;
	padding: clamp(1.25rem, 2.5vw, 2rem);
}

.el-muestra__fondo {
	position: absolute;
	inset: 0;
	overflow: hidden;
	display: grid;
	place-items: center;
	color: var(--orange);
	opacity: .1;
	pointer-events: none;
}
/* Recortado al área de la muestra: antes asomaba por debajo de la tarjeta
   y se veía como un círculo gris suelto. */
.el-muestra__fondo svg { width: 78%; height: auto; }

.el-muestra__doc {
	position: relative;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radio);
	box-shadow: 0 18px 50px rgba(18,41,74,.14);
	overflow: hidden;
}

.el-muestra__cab {
	display: flex;
	align-items: center;
	gap: .65rem;
	padding: .9rem 1.15rem;
	background: var(--navy);
	color: #fff;
}
.el-muestra__marca { display: block; width: 20px; color: var(--orange); }
.el-muestra__marca svg { width: 100%; height: auto; display: block; }

.el-muestra__tit {
	font-family: var(--serif);
	font-size: .9375rem;
	font-weight: 600;
	letter-spacing: .01em;
}

.el-muestra__badge {
	margin-left: auto;
	padding: .15rem .5rem;
	border: 1px solid rgba(255,255,255,.3);
	border-radius: 999px;
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: rgba(255,255,255,.75);
}

.el-muestra__lineas { margin: 0; padding: 0; list-style: none; }

.el-muestra__lineas li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .8rem 1.15rem;
	border-bottom: 1px solid var(--line);
}

.el-muestra__concepto { font-size: .875rem; color: var(--ink); }

.el-muestra__estado {
	flex: none;
	padding: .18rem .6rem;
	border-radius: 999px;
	font-size: .75rem;
	font-weight: 650;
	letter-spacing: .01em;
}
.el-muestra__estado.es-aviso { background: var(--peach); color: var(--orange-dk); }
.el-muestra__estado.es-ok    { background: var(--blue-soft); color: var(--navy); }


/* Credenciales bajo el héroe: iconos, hairlines y jerarquía clara */
.el-credenciales {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	margin: var(--s-50) 0 0;
	padding: var(--s-30) 0 0;
	border-top: 1px solid var(--line);
	list-style: none;
}

.el-credenciales li {
	display: flex;
	align-items: center;
	gap: .9rem;
	padding: .55rem clamp(1rem, 2.4vw, 1.75rem);
	border-left: 1px solid var(--line);
}
.el-credenciales li:first-child { border-left: 0; padding-left: 0; }

.el-credenciales__icono {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	flex: none;
	border-radius: 50%;
	background: var(--peach);
	color: var(--orange);
}
.el-credenciales__icono .el-icono { width: 19px; height: 19px; }

.el-credenciales__texto { display: block; line-height: 1.4; }
.el-credenciales__texto strong {
	display: block;
	color: var(--navy);
	font-size: 1.125rem;
	font-weight: 650;
	letter-spacing: -.01em;
}
.el-credenciales__texto > span {
	display: block;
	margin-top: 2px;
	padding-bottom: 2px;
	font-size: .8125rem;
	line-height: 1.5;
	color: var(--muted);
}

/* Sin altura fija: la fila crece con el texto en vez de recortarlo */
.el-credenciales li { align-items: flex-start; }
.el-credenciales__icono { margin-top: 2px; }

@media (max-width: 1100px) {
	.el-credenciales { grid-template-columns: repeat(2, 1fr); row-gap: var(--s-30); }
	.el-credenciales li:nth-child(odd) { border-left: 0; padding-left: 0; }
}

@media (max-width: 760px) {
	.el-credenciales li { border-left: 0; padding-left: 0; }
}

@media (max-width: 900px) {
	.el-hero__inner { grid-template-columns: 1fr; gap: var(--s-40); }
}

/* =============================================================
   9. Rutas, razones y equipo
   ============================================================= */

/* Tarjetas de situación: icono y título en la misma línea */
.el-ruta {
	padding: clamp(1.75rem, 3vw, 2.5rem);
	border-radius: 14px;
}
.el-ruta--azul { background: var(--blue-soft); }
.el-ruta--melocoton { background: var(--peach); }

.el-ruta__cab {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.1rem;
}

.el-ruta__icono {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	flex: none;
	border-radius: 14px;
	background: #fff;
}
.el-ruta__icono .el-icono { width: 24px; height: 24px; }
.el-ruta--azul .el-ruta__icono { color: var(--navy); }
.el-ruta--melocoton .el-ruta__icono { color: var(--orange); }

.el-ruta__title {
	margin: 0;
	font-family: var(--sans);
	font-size: 1.1875rem;
	font-weight: 650;
	letter-spacing: -.01em;
}

.el-ruta__texto {
	font-size: .9375rem;
	color: var(--muted);
	margin-bottom: var(--s-30);
}

.el-ruta .el-check { margin-bottom: var(--s-30); }

/* Tarjetas de servicio: toda la tarjeta es el enlace */
.el-servicio {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: clamp(1.4rem, 2.2vw, 1.85rem);
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 14px;
	box-shadow: var(--sombra);
	color: inherit;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.el-servicio:hover {
	transform: translateY(-3px);
	border-color: #D8CFC0;
	box-shadow: 0 14px 32px rgba(18,41,74,.10);
	text-decoration: none;
}


.el-servicio__title {
	margin: 0 0 .6rem;
	font-family: var(--serif);
	font-size: 1.1875rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--navy);
}

.el-servicio__texto {
	margin: 0;
	font-size: .875rem;
	line-height: 1.65;
	color: var(--muted);
}

.el-servicio__pie {
	display: block;
	margin-top: auto;
	padding-top: var(--s-30);
}

.el-servicio__precio {
	display: block;
	margin-bottom: .5rem;
	color: var(--orange);
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -.01em;
}
.el-servicio__precio small {
	margin-left: .35rem;
	font-size: .75rem;
	font-weight: 500;
	color: var(--muted);
}


@media (prefers-reduced-motion: reduce) {
	.el-servicio:hover { transform: none; }
}

/* Cuatro razones centradas y separadas por filetes verticales */
.el-razones {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	margin: 0;
	padding: 0;
	list-style: none;
}

.el-razon {
	padding: 0 clamp(.75rem, 2vw, 1.75rem);
	text-align: center;
	border-left: 1px solid var(--line);
}
.el-razon:first-child { border-left: 0; }

.el-razon__icono {
	display: block;
	margin: 0 auto var(--s-20);
	color: var(--orange);
}
.el-razon__icono .el-icono { width: 30px; height: 30px; margin: 0 auto; }

.el-razon__title {
	max-width: 14em;
	margin: 0 auto .7rem;
	font-family: var(--sans);
	font-size: .9375rem;
	font-weight: 650;
	line-height: 1.4;
	color: var(--navy);
}

.el-razon__texto {
	max-width: 17em;
	margin: 0 auto;
	font-size: .875rem;
	line-height: 1.65;
	color: var(--muted);
}

@media (max-width: 900px) {
	.el-razones { grid-template-columns: repeat(2, 1fr); row-gap: var(--s-40); }
	.el-razon:nth-child(odd) { border-left: 0; }
}

@media (max-width: 520px) {
	.el-razones { grid-template-columns: 1fr; }
	.el-razon { border-left: 0; }
}

/* =============================================================
   10. Preguntas frecuentes
   ============================================================= */

.el-faq details {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radio-s);
	padding: 1rem 1.2rem;
	height: fit-content;
}

.el-faq summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	cursor: pointer;
	font-size: .9375rem;
	font-weight: 500;
	color: var(--ink);
	list-style: none;
}
.el-faq summary::-webkit-details-marker { display: none; }
.el-faq summary::after {
	content: "+";
	flex: none;
	font-size: 1.25rem;
	line-height: 1;
	color: var(--muted);
}
.el-faq details[open] summary::after { content: "\2212"; }
.el-faq details p { margin: .75rem 0 0; font-size: .9375rem; }

/* =============================================================
   11. Llamadas a la acción
   ============================================================= */

.el-cta-final {
	background: var(--orange);
	color: #fff;
	padding-block: var(--s-50);
}
.el-cta-final__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-30);
}
.el-cta-final__inner > div:first-child { max-width: 46rem; }
.el-cta-final__title { color: #fff; font-size: clamp(1.6rem, 3.5vw, 2.25rem); }
.el-cta-final__lead { font-size: .9375rem; color: rgba(255,255,255,.9); margin: 0; }

.el-cta-inline {
	margin: var(--s-50) 0 var(--s-40);
	padding: var(--s-40);
	background: var(--blue-soft);
	border-radius: var(--radio);
}
.el-cta-inline__title { font-size: 1.5rem; }
.el-cta-inline p { font-size: .9375rem; }

/* =============================================================
   12. Contenido de artículos y páginas
   ============================================================= */

.el-prosa { font-size: 1.0625rem; }
.el-prosa > * + * { margin-top: var(--s-20); }
.el-prosa h2 { font-size: 1.6rem; margin-top: var(--s-40); }
.el-prosa h3 { font-size: 1.25rem; margin-top: var(--s-30); }
.el-prosa ul, .el-prosa ol { padding-left: 1.25rem; }
.el-prosa li { margin-bottom: .4rem; }
.el-prosa img { border-radius: var(--radio); }
.el-prosa blockquote {
	margin: var(--s-30) 0;
	padding-left: var(--s-30);
	border-left: 3px solid var(--orange);
	font-family: var(--serif);
	font-style: italic;
	color: var(--ink);
}
.el-prosa table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.el-prosa th, .el-prosa td { padding: .65rem .8rem; border-bottom: 1px solid var(--line); text-align: left; }
.el-prosa figure { margin: var(--s-30) 0; }

/* Tablas y bloques anchos no deben desbordar la página */
.el-prosa table,
.el-prosa pre { display: block; overflow-x: auto; max-width: 100%; }

.el-vecinos {
	display: flex;
	justify-content: space-between;
	gap: var(--s-30);
	margin: var(--s-50) 0;
	padding-top: var(--s-30);
	border-top: 1px solid var(--line);
	font-size: .9375rem;
}
.el-vecinos__next { text-align: right; }

.el-paginacion { margin-top: var(--s-50); }
.el-paginacion .nav-links {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: .4rem;
}
.el-paginacion .page-numbers {
	display: inline-block;
	padding: .5rem .9rem;
	border: 1px solid var(--line);
	border-radius: var(--radio-s);
	color: var(--ink);
	font-size: .9375rem;
}
.el-paginacion .page-numbers:hover,
.el-paginacion .page-numbers.current {
	background: var(--navy);
	border-color: var(--navy);
	color: #fff;
	text-decoration: none;
}

/* =============================================================
   13. Buscador
   ============================================================= */

.el-search { display: flex; gap: .5rem; flex-wrap: wrap; }
.el-search input[type="search"] {
	flex: 1 1 14rem;
	padding: .8rem 1rem;
	font: inherit;
	font-size: .9375rem;
	color: var(--ink);
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radio-s);
}

/* =============================================================
   14. Calculadora
   ============================================================= */

.el-calc {
	max-width: 420px;
	margin-inline: auto;
	padding: var(--s-30);
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radio);
	box-shadow: var(--sombra-alta);
}

.el-calc__title { font-size: 1.125rem; margin-bottom: .25rem; }
.el-calc__sub { font-size: .875rem; margin-bottom: var(--s-30); }

.el-calc label {
	display: block;
	font-size: .8125rem;
	font-weight: 600;
	color: var(--ink);
	margin-bottom: .35rem;
}

.el-calc select,
.el-calc input {
	width: 100%;
	padding: .7rem .8rem;
	font: inherit;
	font-size: .9375rem;
	color: var(--ink);
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radio-s);
}

.el-field + .el-field { margin-top: .9rem; }
.el-calc .el-btn { margin-top: var(--s-20); }

.el-calc__result {
	margin: var(--s-20) 0 0;
	padding: .9rem 1rem;
	background: var(--blue-soft);
	border-radius: var(--radio-s);
	font-size: .9375rem;
	color: var(--navy);
}
.el-calc__result[hidden] { display: none; }

.el-calc__legal { margin: .8rem 0 0; font-size: .75rem; }

/* =============================================================
   15. Pie
   ============================================================= */

.el-footer {
	position: relative;
	overflow: hidden;
	padding-block: var(--s-60) var(--s-30);
	background: var(--navy);
	color: rgba(255,255,255,.62);
}

.el-footer__marca {
	position: absolute;
	left: -5%;
	bottom: -32%;
	width: 26%;
	color: var(--orange);
	opacity: .08;
	pointer-events: none;
}
.el-footer__marca svg { display: block; width: 100%; height: auto; }

.el-footer__inner { position: relative; z-index: 1; }

.el-footer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: clamp(2rem, 4vw, 3.5rem);
}

.el-footer__titulo {
	margin: 0 0 var(--s-30);
	padding-bottom: .9rem;
	border-bottom: 1px solid rgba(255,255,255,.18);
	color: #fff;
	font-family: var(--serif);
	font-size: 1.35rem;
	font-weight: 600;
	letter-spacing: -.01em;
}

.el-footer__menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Dos columnas de enlaces, como en el pie de referencia */
.el-footer__menu--dos { columns: 2; column-gap: var(--s-30); }
.el-footer__menu--dos li { break-inside: avoid; }

.el-footer__menu li { margin-bottom: .7rem; }

.el-footer__menu a {
	color: rgba(255,255,255,.62);
	font-size: .9375rem;
	line-height: 1.5;
}
.el-footer__menu a:hover { color: #fff; text-decoration: none; }

.el-footer__posts {
	margin: 0;
	padding: 0;
	list-style: none;
}
.el-footer__posts li { margin-bottom: var(--s-20); }
.el-footer__posts a {
	color: #fff;
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.45;
}
.el-footer__posts a:hover { color: var(--orange); text-decoration: none; }

.el-footer__base {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .75rem var(--s-30);
	margin-top: var(--s-50);
	padding-top: var(--s-30);
	border-top: 1px solid rgba(255,255,255,.18);
}

.el-footer__copy p {
	margin: 0;
	font-size: .875rem;
	color: rgba(255,255,255,.62);
}
.el-footer__copy strong { color: #fff; font-weight: 650; }

.el-footer__fiscal {
	margin-top: .25rem !important;
	font-size: .8125rem !important;
	color: rgba(255,255,255,.5) !important;
}

.el-opiniones__widget { position: relative; z-index: 1; }

.el-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem 0;
	margin: 0;
	padding: 0;
	list-style: none;
}
.el-footer__legal li + li::before {
	content: "·";
	margin: 0 .55rem;
	color: rgba(255,255,255,.35);
}
.el-footer__legal li { display: inline-flex; align-items: center; }
.el-footer__legal a { color: rgba(255,255,255,.62); font-size: .8125rem; }
.el-footer__legal a:hover { color: #fff; text-decoration: none; }

/* =============================================================
   16. WhatsApp
   ============================================================= */

.el-whatsapp {
	position: fixed;
	right: 1.25rem; bottom: 1.25rem;
	z-index: 200;
	display: grid;
	place-items: center;
	width: 54px; height: 54px;
	border-radius: 50%;
	background: #25D366;
	box-shadow: var(--sombra-alta);
}
.el-whatsapp svg { width: 28px; height: 28px; fill: #fff; }

/* =============================================================
   17. WooCommerce
   ============================================================= */

.woocommerce ul.products li.product {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radio);
	padding: 1.25rem;
	box-shadow: var(--sombra);
}
.woocommerce ul.products li.product .price { color: var(--orange); font-weight: 600; }

.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	background: var(--orange);
	color: #fff;
	border-radius: var(--radio-s);
	font-weight: 600;
}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover { background: var(--orange-dk); color: #fff; }

.woocommerce-message,
.woocommerce-info { border-top-color: var(--orange); }
.woocommerce-message::before,
.woocommerce-info::before { color: var(--orange); }

/* =============================================================
   18. Comentarios
   ============================================================= */

.comment-list { list-style: none; margin: 0; padding: 0; }
.comment-list li { margin-bottom: var(--s-30); }
.comment-list .children { list-style: none; padding-left: var(--s-30); }
.comment-body { font-size: .9375rem; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	padding: .7rem .8rem;
	font: inherit;
	font-size: .9375rem;
	border: 1px solid var(--line);
	border-radius: var(--radio-s);
}
.comment-form .submit {
	padding: .9rem 1.6rem;
	background: var(--orange);
	color: #fff;
	border: 0;
	border-radius: var(--radio-s);
	font-weight: 600;
	cursor: pointer;
}

/* =============================================================
   19. Opiniones
   ============================================================= */

.el-opiniones {
	position: relative;
	overflow: hidden;
	padding-block: var(--s-60);
	background: var(--navy);
	background-image: radial-gradient(120% 90% at 15% 0%, rgba(232,92,58,.16), transparent 62%);
	color: rgba(255,255,255,.72);
}

.el-opiniones__marca {
	position: absolute;
	right: -6%;
	bottom: -28%;
	width: 42%;
	color: var(--orange);
	opacity: .12;
	pointer-events: none;
}
.el-opiniones__marca svg { display: block; width: 100%; height: auto; }

.el-opiniones__inner { position: relative; z-index: 1; }

.el-opiniones__cab {
	max-width: 44rem;
	margin: 0 auto var(--s-40);
	text-align: center;
}

.el-opiniones__titulo {
	color: #fff;
	font-size: clamp(1.75rem, 3.5vw, 2.35rem);
	margin-bottom: var(--s-20);
}

.el-opiniones__intro {
	margin: 0;
	font-size: .9375rem;
	line-height: 1.7;
	color: rgba(255,255,255,.7);
}

.el-opiniones__cuerpo {
	display: grid;
	grid-template-columns: minmax(11rem, 15rem) minmax(0, 1fr);
	gap: clamp(1.75rem, 3.5vw, 3rem);
	align-items: center;
}

@media (max-width: 860px) {
	.el-opiniones__cuerpo { grid-template-columns: 1fr; }
}

/* Resumen de la valoración */
.el-resumen { text-align: center; }

.el-resumen__nota {
	margin: 0;
	font-family: var(--serif);
	font-size: clamp(2.5rem, 5vw, 3.25rem);
	font-weight: 600;
	line-height: 1;
	color: #fff;
}

.el-resumen__estrellas {
	margin: .6rem 0 .5rem;
	color: var(--orange);
	font-size: 1.35rem;
	letter-spacing: .16em;
}

.el-resumen__pie {
	margin: 0;
	font-size: .8125rem;
	color: rgba(255,255,255,.62);
}

.el-resumen__enlace {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin-top: var(--s-20);
	color: #fff;
	font-size: .875rem;
	font-weight: 600;
	border-bottom: 1px solid rgba(255,255,255,.35);
	padding-bottom: 2px;
}
.el-resumen__enlace:hover { color: var(--orange); border-color: var(--orange); text-decoration: none; }
.el-resumen__enlace .el-icono { width: 15px; height: 15px; }

/* Carrusel */
.el-carrusel { position: relative; min-width: 0; }

.el-carrusel__pista {
	display: flex;
	gap: var(--s-30);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: 0;
	padding-bottom: .5rem;
	scrollbar-width: none;
}
.el-carrusel__pista::-webkit-scrollbar { display: none; }

/*
 * Las tarjetas ocupan más del 50 % de la pista a propósito: con dos
 * opiniones la pista ya desborda, y sin desbordamiento no hay nada que
 * desplazar y el carrusel se queda quieto. Además se leen mejor.
 */
.el-opinion {
	flex: 0 0 clamp(17rem, 58%, 25rem);
	scroll-snap-align: start;
	margin: 0;
	padding: var(--s-30);
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 14px 34px rgba(8,16,32,.24);
}

.el-opinion__cab {
	display: flex;
	align-items: center;
	gap: .7rem;
	margin-bottom: .7rem;
}

.el-opinion__avatar {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	flex: none;
	border-radius: 50%;
	background: var(--navy);
	color: #fff;
	font-size: .875rem;
	font-weight: 650;
	letter-spacing: .02em;
}

.el-opinion__autor {
	font-size: .9375rem;
	font-weight: 650;
	color: var(--navy);
}

.el-opinion__estrellas {
	margin: 0 0 .6rem;
	color: var(--orange);
	font-size: .9375rem;
	letter-spacing: .12em;
}

.el-opinion blockquote { margin: 0; }
.el-opinion blockquote p {
	margin: 0;
	font-size: .875rem;
	line-height: 1.65;
	color: var(--ink);
}

.el-carrusel__flecha {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: var(--navy);
	box-shadow: 0 6px 18px rgba(8,16,32,.28);
	cursor: pointer;
	transition: opacity .18s ease;
}
.el-carrusel__flecha:disabled { opacity: 0; pointer-events: none; }
.el-carrusel__flecha .el-icono { width: 18px; height: 18px; }

.el-carrusel__flecha--prev { left: -14px; }
.el-carrusel__flecha--prev .el-icono { transform: rotate(180deg); }
.el-carrusel__flecha--next { right: -14px; }

@media (max-width: 560px) {
	.el-carrusel__flecha--prev { left: -6px; }
	.el-carrusel__flecha--next { right: -6px; }
}


/* =============================================================
   20. Cómo funciona
   ============================================================= */

/* Que la cabecera fija no tape el título al saltar desde el menú */
#como-funciona { scroll-margin-top: 90px; }

.el-pasos {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.5rem, 3vw, 2.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: paso;
}

.el-paso {
	position: relative;
	padding: clamp(1.75rem, 3vw, 2.25rem);
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 14px;
	box-shadow: var(--sombra);
}

.el-paso__num {
	position: absolute;
	top: -16px;
	left: clamp(1.75rem, 3vw, 2.25rem);
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--navy);
	color: #fff;
	font-size: .9375rem;
	font-weight: 700;
}

.el-paso__icono {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin-bottom: var(--s-30);
	border-radius: 13px;
	background: var(--peach);
	color: var(--orange);
}
.el-paso__icono .el-icono { width: 22px; height: 22px; }

.el-paso__title {
	margin: 0 0 .55rem;
	font-family: var(--sans);
	font-size: 1.0625rem;
	font-weight: 650;
	line-height: 1.35;
	color: var(--navy);
}

.el-paso__texto {
	margin: 0;
	font-size: .9375rem;
	line-height: 1.65;
	color: var(--muted);
}

/* Línea que une los tres pasos en pantallas anchas */
@media (min-width: 981px) {
	.el-pasos { position: relative; }
	.el-paso:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 0;
		right: calc(-1 * clamp(1.5rem, 3vw, 2.5rem));
		width: clamp(1.5rem, 3vw, 2.5rem);
		height: 1px;
		background: var(--line);
	}
}

@media (max-width: 980px) {
	.el-pasos { grid-template-columns: 1fr; gap: var(--s-40); }
}

/* Marca Google del bloque de reseñas */
.el-resumen__google {
	margin: .9rem 0 0;
	font-family: var(--sans);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1;
}
.el-google span { display: inline; }


/* =============================================================
   21. Ajustes de presencia (v2.5)
   Menú, héroe, barra de datos, razones y llamada final.
   Van al final para que ganen sobre las reglas anteriores sin tener
   que reescribirlas una a una.
   ============================================================= */

/* --- Menú: más grande, más aire, más peso --- */
.el-header__inner { padding-block: 1.5rem; }

.el-brand img,
.el-brand .custom-logo { max-height: 50px; }

.el-nav__list { gap: clamp(1.9rem, 3.2vw, 3.1rem); }

.el-nav__list a {
	font-size: 1.1875rem;
	font-weight: 600;
	letter-spacing: -.003em;
	padding-block: .45rem;
}

.el-nav__list a::after { height: 2px; }

.el-carrito { width: 46px; height: 46px; }
.el-carrito .el-icono { width: 24px; height: 24px; }

/* --- Héroe: más ancho, título más grande, menos saltos de línea --- */
.el-hero .el-wrap { max-width: 1320px; }

.el-hero__inner {
	grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
	gap: clamp(2.5rem, 4.5vw, 4.5rem);
}

.el-hero__title {
	font-size: clamp(2.6rem, 5.4vw, 4.4rem);
	line-height: 1.04;
	letter-spacing: -.022em;
}

.el-hero__lead {
	max-width: 40em;
	font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
}

/* --- Barra de datos: deja de ser una línea y pasa a ser una pieza --- */
.el-credenciales {
	margin-top: var(--s-60);
	padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 3vw, 2.5rem);
	border-top: 0;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 18px;
	box-shadow: 0 18px 44px rgba(18,41,74,.10);
}

.el-credenciales li {
	align-items: center;
	gap: 1.1rem;
	padding-block: .5rem;
}

.el-credenciales__icono {
	width: 58px;
	height: 58px;
	margin-top: 0;
	background: var(--orange);
	color: #fff;
	box-shadow: 0 8px 18px rgba(232,92,58,.28);
}
.el-credenciales__icono .el-icono { width: 27px; height: 27px; }

.el-credenciales__texto strong {
	font-family: var(--serif);
	font-size: clamp(1.4rem, 2.2vw, 1.75rem);
	font-weight: 600;
	line-height: 1.15;
}

.el-credenciales__texto > span {
	margin-top: 4px;
	font-size: .9375rem;
	color: var(--ink);
	opacity: .78;
}

/* --- ¿Por qué elegirnos?: iconos con presencia --- */
.el-razon__icono {
	display: grid;
	place-items: center;
	width: 66px;
	height: 66px;
	margin: 0 auto var(--s-30);
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 10px 26px rgba(18,41,74,.09);
}
.el-razon__icono .el-icono { width: 30px; height: 30px; }

.el-razon__title { font-size: 1.0625rem; }
.el-razon__texto { color: var(--ink); opacity: .78; }

/* --- Llamada final: un golpe visual antes del pie --- */
.el-cta-final {
	position: relative;
	overflow: hidden;
	padding-block: clamp(5rem, 10vw, 8.5rem);
	background: var(--orange);
	background-image: radial-gradient(90% 140% at 100% 0%, rgba(255,255,255,.14), transparent 55%);
}

.el-cta-final__inner { gap: var(--s-40); }
.el-cta-final__inner > div:first-child { max-width: 52rem; }

.el-cta-final__title {
	font-size: clamp(2.2rem, 4.8vw, 3.75rem);
	line-height: 1.06;
	letter-spacing: -.02em;
	margin-bottom: var(--s-30);
}

.el-cta-final__lead {
	font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
	line-height: 1.7;
	color: rgba(255,255,255,.95);
}

.el-cta-final .el-eyebrow--claro {
	font-size: .875rem;
	color: rgba(255,255,255,.9);
	margin-bottom: var(--s-20);
}

.el-cta-final__btn {
	padding: 1.35rem 2.6rem;
	font-size: 1.1875rem;
	font-weight: 700;
	letter-spacing: -.005em;
	color: var(--orange-dk);
	box-shadow: 0 16px 38px rgba(120,32,10,.30);
	white-space: nowrap;
}
.el-cta-final__btn .el-icono { width: 22px; height: 22px; }
.el-cta-final__btn:hover { background: #fff; color: var(--navy); box-shadow: 0 20px 44px rgba(120,32,10,.36); }

@media (max-width: 760px) {
	.el-cta-final__btn { width: 100%; white-space: normal; }
}


/* =============================================================
   22. Presencia y profundidad (v2.6)
   ============================================================= */

/* --- Cuerpo: más contraste con la misma familia --- */
body { color: #3F465A; }
.el-sechead__sub { font-size: 1.0625rem; color: #4A5166; }

/* --- H2 con más peso --- */
.el-sechead__title,
.el-opiniones__titulo,
.el-cta-final__title { font-weight: 700; }
.el-sechead__title { font-size: clamp(2rem, 3.8vw, 2.75rem); letter-spacing: -.018em; }

/* --- Menú: más visible, subrayado suave --- */
.el-nav__list a {
	font-size: 1.25rem;
	font-weight: 700;
}
.el-nav__list a::after {
	height: 3px;
	bottom: -2px;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--orange), #F28A6C);
	opacity: .9;
	transition: width .28s cubic-bezier(.2,.7,.2,1);
}

/* --- Héroe: bloque de texto al ~64 % del contenedor, título 48-64 px --- */
.el-hero__inner { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); }

.el-hero__title {
	font-size: clamp(3rem, 4.6vw, 4rem);
	line-height: 1.08;
}

/* La parte naranja sigue a continuación en vez de forzar un salto de línea:
   el titular pasa de cuatro líneas a tres. */
.el-hero__title em { display: inline; }

.el-hero__lead { max-width: 44em; }

@media (max-width: 1100px) {
	.el-hero__inner { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
}

/* --- Profundidad: degradados sutiles en los fondos --- */
.el-hero {
	background:
		radial-gradient(70% 90% at 100% 0%, rgba(232,92,58,.07), transparent 60%),
		linear-gradient(180deg, #FCFAF6 0%, var(--cream) 100%);
}
.el-section--shell {
	background: linear-gradient(180deg, #F6F2EC 0%, var(--shell) 100%);
}
.el-section--blanco {
	background: linear-gradient(180deg, #FFFFFF 0%, #FCFBF9 100%);
}

/* --- Servicios como producto principal: 2 x 2, tarjetas grandes --- */
.el-servicios {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.25rem, 2.5vw, 2rem);
}
@media (max-width: 760px) {
	.el-servicios { grid-template-columns: 1fr; }
}

.el-servicio {
	padding: clamp(1.75rem, 3vw, 2.5rem);
	border-radius: 18px;
	box-shadow: 0 1px 2px rgba(18,41,74,.05), 0 14px 36px rgba(18,41,74,.08);
}
.el-servicio:hover {
	transform: translateY(-4px);
	box-shadow: 0 2px 4px rgba(18,41,74,.06), 0 22px 48px rgba(18,41,74,.13);
}


.el-servicio__title { font-size: clamp(1.4rem, 2.2vw, 1.7rem); font-weight: 700; }
.el-servicio__texto { font-size: 1rem; color: #4A5166; max-width: 32em; }

.el-servicio__pie {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .75rem 1.25rem;
	padding-top: var(--s-30);
}

/* El CTA manda: botón contrastado */
.el-servicio__boton {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	padding: .85rem 1.4rem;
	border-radius: 999px;
	background: var(--navy);
	color: #fff;
	font-size: .9375rem;
	font-weight: 650;
	transition: background-color .18s ease;
}
.el-servicio__boton .el-icono { width: 17px; height: 17px; transition: transform .18s ease; }
.el-servicio:hover .el-servicio__boton { background: var(--orange); }
.el-servicio:hover .el-servicio__boton .el-icono { transform: translateX(3px); }

/* El precio pasa a secundario */
.el-servicio__precio {
	margin: 0;
	color: var(--navy);
	font-size: .9375rem;
	font-weight: 600;
}
.el-servicio__precio small { color: #4A5166; }

/* --- Opiniones: atribución a Google en cada tarjeta --- */
.el-opinion__autor { display: block; }
.el-opinion__fuente {
	display: block;
	margin-top: 1px;
	font-size: .75rem;
	font-weight: 500;
	color: #4A5166;
}
.el-opinion__fuente .el-google { font-weight: 700; letter-spacing: -.02em; }

/* --- Guías: un mismo tratamiento de color para todas las fotos --- */
.el-card__media { position: relative; overflow: hidden; }
.el-card__media img {
	filter: saturate(.78) contrast(1.04) brightness(1.02);
	transition: transform .4s ease, filter .4s ease;
}
.el-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(18,41,74,0) 45%, rgba(18,41,74,.28) 100%);
	mix-blend-mode: multiply;
	pointer-events: none;
}
.el-card--post:hover .el-card__media img { transform: scale(1.04); filter: saturate(.92) contrast(1.04); }

/* --- Llamada final: botón aún mayor y entrada animada --- */
.el-cta-final__btn {
	padding: 1.5rem 3rem;
	font-size: 1.3125rem;
}

.el-js .el-cta-final[data-aparece] .el-cta-final__inner {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
}
.el-js .el-cta-final[data-aparece].es-visible .el-cta-final__inner {
	opacity: 1;
	transform: none;
}
.el-js .el-cta-final[data-aparece] .el-cta-final__btn {
	transform: scale(.94);
	transition: transform .6s cubic-bezier(.2,.7,.2,1) .25s, background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.el-js .el-cta-final[data-aparece].es-visible .el-cta-final__btn { transform: none; }

@media (prefers-reduced-motion: reduce) {
	.el-js .el-cta-final[data-aparece] .el-cta-final__inner,
	.el-js .el-cta-final[data-aparece] .el-cta-final__btn { opacity: 1; transform: none; transition: none; }
	.el-card--post:hover .el-card__media img { transform: none; }
}


/* =============================================================
   23. Ancho completo y piezas protagonistas (v2.7)
   ============================================================= */

/* Contenedor ancho para las secciones que deben llenar la pantalla */
.el-wrap--ancho { max-width: 1440px; }

/* --- Héroe: título y muestra reparten todo el ancho --- */
.el-hero .el-wrap { max-width: 1440px; }
.el-hero__inner {
	grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
	gap: clamp(2.5rem, 4vw, 4.5rem);
}
@media (max-width: 1100px) {
	.el-hero__inner { grid-template-columns: 1fr; }
}

/* --- Muestra del informe, ampliada --- */
.el-muestra { padding: 0; }
.el-muestra__fondo { display: none; }

.el-muestra__doc {
	border-radius: 20px;
	box-shadow:
		0 2px 4px rgba(18,41,74,.05),
		0 24px 60px rgba(18,41,74,.16),
		0 0 0 1px rgba(18,41,74,.04);
	transform: rotate(-.6deg);
	transition: transform .4s ease;
}
.el-muestra:hover .el-muestra__doc { transform: rotate(0); }

.el-muestra__cab { padding: 1.2rem 1.5rem; }
.el-muestra__marca { width: 24px; }
.el-muestra__tit { font-size: 1.125rem; }
.el-muestra__badge { font-size: .6875rem; padding: .22rem .65rem; }

.el-muestra__meta {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin: 0;
	border-bottom: 1px solid var(--line);
	background: linear-gradient(180deg, #F8FAFD 0%, #fff 100%);
}
.el-muestra__meta > div { padding: 1rem 1.5rem; border-left: 1px solid var(--line); }
.el-muestra__meta > div:first-child { border-left: 0; }
.el-muestra__meta dt {
	margin: 0 0 .2rem;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #6A7086;
}
.el-muestra__meta dd { margin: 0; font-size: .9375rem; font-weight: 650; color: var(--navy); }

.el-muestra__lineas li { padding: 1rem 1.5rem; }
.el-muestra__concepto { font-size: 1rem; }
.el-muestra__estado { font-size: .8125rem; padding: .28rem .8rem; }

.el-muestra__resumen {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 1.1rem 1.5rem;
	padding: 1rem 1.2rem;
	border-radius: 14px;
	background: linear-gradient(135deg, var(--peach) 0%, #FFF6F1 100%);
}
.el-muestra__num {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	flex: none;
	border-radius: 14px;
	background: var(--orange);
	color: #fff;
	font-family: var(--serif);
	font-size: 1.75rem;
	font-weight: 700;
	box-shadow: 0 8px 20px rgba(232,92,58,.3);
}
.el-muestra__resumen-texto strong { display: block; color: var(--navy); font-size: 1.0625rem; }
.el-muestra__resumen-texto span { display: block; font-size: .875rem; color: #4A5166; }


@media (max-width: 560px) {
	.el-muestra__meta { grid-template-columns: 1fr; }
	.el-muestra__meta > div { border-left: 0; border-top: 1px solid var(--line); }
	.el-muestra__meta > div:first-child { border-top: 0; }
	.el-muestra__doc { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.el-muestra__doc, .el-muestra:hover .el-muestra__doc { transform: none; }
}

/* --- Servicios: los cuatro en una fila, con la foto del producto --- */
.el-servicios {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1rem, 1.8vw, 1.75rem);
}
@media (max-width: 1100px) { .el-servicios { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .el-servicios { grid-template-columns: 1fr; } }

.el-servicio { padding: 0; overflow: hidden; }

.el-servicio__media {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--blue-soft);
}
.el-servicio__foto {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .45s ease;
}
.el-servicio:hover .el-servicio__foto { transform: scale(1.05); }

.el-servicio__cuerpo {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: clamp(1.25rem, 2vw, 1.6rem);
}

.el-servicio__title { font-size: clamp(1.2rem, 1.6vw, 1.4rem); margin-bottom: .5rem; }
.el-servicio__texto { display: block; font-size: .9375rem; line-height: 1.6; }

.el-servicio__pie {
	flex-direction: column;
	align-items: stretch;
	gap: .85rem;
	margin-top: auto;
	padding-top: var(--s-30);
}

.el-servicio__precio { font-size: 1rem; color: var(--navy); font-weight: 700; }
.el-servicio__precio small,
.el-servicio__precio .woocommerce-price-suffix { font-size: .8125rem; font-weight: 500; color: #4A5166; }

.el-servicio__boton { justify-content: center; width: 100%; padding: .9rem 1rem; }

@media (prefers-reduced-motion: reduce) {
	.el-servicio:hover .el-servicio__foto { transform: none; }
}

/* --- Por qué elegirnos: ancho y grande --- */
.el-porque { padding-block: clamp(5rem, 8vw, 7rem); }
.el-porque .el-sechead { margin-bottom: clamp(3rem, 5vw, 4.5rem); }

.el-porque .el-razones { gap: 0; }
.el-porque .el-razon { padding: 0 clamp(1rem, 2.4vw, 2.5rem); }
.el-porque .el-razon__icono { width: 88px; height: 88px; }
.el-porque .el-razon__icono .el-icono { width: 38px; height: 38px; }
.el-porque .el-razon__title {
	max-width: 16em;
	font-family: var(--serif);
	font-size: clamp(1.25rem, 1.7vw, 1.5rem);
	font-weight: 700;
	margin-bottom: .8rem;
}
.el-porque .el-razon__texto { max-width: 20em; font-size: 1.0625rem; line-height: 1.65; }

/* --- Opiniones a ancho completo --- */
.el-opiniones__nota-api {
	margin: var(--s-30) 0 0;
	text-align: center;
	font-size: .8125rem;
	color: rgba(255,255,255,.55);
}
.el-opinion__autor a { color: var(--navy); }
.el-opinion__autor a:hover { color: var(--orange); text-decoration: none; }

/* --- Llamada final: menos margen, más ancho, más contenido --- */
.el-cta-final { padding-block: clamp(3.5rem, 6vw, 5.5rem); }

.el-cta-final__marca {
	position: absolute;
	right: -3%;
	top: 50%;
	width: clamp(220px, 26vw, 420px);
	transform: translateY(-50%);
	color: #fff;
	opacity: .1;
	pointer-events: none;
}
.el-cta-final__marca svg { display: block; width: 100%; height: auto; }

.el-cta-final__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(2rem, 4vw, 4rem);
}
.el-cta-final__inner > div:first-child { max-width: none; }

.el-cta-final__puntos {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem 1.75rem;
	margin: var(--s-30) 0 0;
	padding: 0;
	list-style: none;
}
.el-cta-final__puntos li {
	position: relative;
	padding-left: 1.6rem;
	font-size: 1rem;
	font-weight: 600;
	color: #fff;
}
.el-cta-final__puntos li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .38em;
	width: .6rem;
	height: .32rem;
	border-left: 2.5px solid #fff;
	border-bottom: 2.5px solid #fff;
	transform: rotate(-45deg);
}

.el-cta-final__acciones {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: .9rem;
}
.el-cta-final__alt {
	color: rgba(255,255,255,.92);
	font-size: .9375rem;
	font-weight: 600;
	border-bottom: 1px solid rgba(255,255,255,.4);
	padding-bottom: 2px;
}
.el-cta-final__alt:hover { color: #fff; border-color: #fff; text-decoration: none; }

@media (max-width: 900px) {
	.el-cta-final__inner { grid-template-columns: 1fr; }
	.el-cta-final__acciones { align-items: stretch; }
	.el-cta-final__alt { align-self: center; }
}

/* Página "Cómo funciona" */
.el-pagina-cab { padding-bottom: 0; }


/* =============================================================
   24. Slider de opiniones: una a la vez (v2.7.1)
   Antes las tarjetas medían 400 px y en un contenedor de 1096 px cabían
   todas: sin desbordamiento no había nada que desplazar y el slider no se
   movía. Una tarjeta por vista garantiza el movimiento con dos o más.
   ============================================================= */

.el-carrusel__pista { gap: 0; }

.el-opinion {
	flex: 0 0 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 17rem;
	padding: clamp(1.75rem, 3.5vw, 3rem) clamp(1.75rem, 5vw, 4rem);
	border-radius: 20px;
}

.el-opinion__cab { margin-bottom: 1rem; }
.el-opinion__avatar { width: 48px; height: 48px; font-size: 1rem; }
.el-opinion__autor { font-size: 1.0625rem; }

.el-opinion__estrellas { font-size: 1.125rem; margin-bottom: 1rem; }

.el-opinion blockquote p {
	max-width: 46em;
	font-family: var(--serif);
	font-size: clamp(1.15rem, 1.7vw, 1.4rem);
	line-height: 1.6;
	color: var(--navy);
}

.el-carrusel__flecha { width: 48px; height: 48px; }
.el-carrusel__flecha--prev { left: -24px; }
.el-carrusel__flecha--next { right: -24px; }

.el-carrusel__puntos {
	display: flex;
	justify-content: center;
	gap: .6rem;
	margin-top: var(--s-30);
}
.el-carrusel__puntos button {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255,255,255,.35);
	cursor: pointer;
	transition: width .25s ease, background-color .25s ease;
}
.el-carrusel__puntos button[aria-current="true"] {
	width: 28px;
	background: var(--orange);
}

@media (max-width: 560px) {
	.el-carrusel__flecha--prev { left: -8px; }
	.el-carrusel__flecha--next { right: -8px; }
	.el-opinion { min-height: 0; }
}


/* =============================================================
   25. Héroe más compacto, widget integrado, imágenes unificadas (v2.8)
   ============================================================= */

/* --- Héroe: menos alto para que quepa en la primera pantalla --- */
.el-hero { padding-block: clamp(2.5rem, 4vw, 3.5rem) clamp(2.5rem, 4vw, 3.5rem); }
.el-hero__inner { align-items: center; }

.el-hero__title {
	font-size: clamp(2.6rem, 3.9vw, 3.5rem);
	line-height: 1.07;
	margin-bottom: var(--s-20);
}
.el-hero .el-eyebrow { margin-bottom: .75rem; }
.el-hero__lead { margin-bottom: var(--s-30); }

/* --- Widget integrado: sin inclinación, misma sombra que la barra --- */
.el-muestra__doc,
.el-muestra:hover .el-muestra__doc { transform: none; }

.el-muestra__doc,
.el-credenciales { box-shadow: 0 1px 2px rgba(18,41,74,.05), 0 18px 44px rgba(18,41,74,.11); }

.el-muestra__cab { padding: 1rem 1.4rem; }
.el-muestra__meta > div { padding: .8rem 1.4rem; }
.el-muestra__lineas li { padding: .72rem 1.4rem; }
.el-muestra__resumen { margin: .9rem 1.4rem; padding: .85rem 1.1rem; }

.el-credenciales { margin-top: var(--s-40); }

/* --- Un mismo tratamiento para todas las imágenes de contenido --- */
.el-servicio__foto,
.el-card__media img,
.el-prosa img,
.el-figura img {
	filter: brightness(.98) contrast(1.05) saturate(.95) sepia(.02);
}
.el-card--post:hover .el-card__media img,
.el-servicio:hover .el-servicio__foto {
	filter: brightness(1) contrast(1.05) saturate(1) sepia(0);
}

/* --- Pulso sutil en el botón del héroe: tres veces y se detiene --- */
@keyframes el-pulso {
	0%   { box-shadow: 0 6px 18px rgba(232,92,58,.28), 0 0 0 0 rgba(232,92,58,.45); }
	70%  { box-shadow: 0 6px 18px rgba(232,92,58,.28), 0 0 0 14px rgba(232,92,58,0); }
	100% { box-shadow: 0 6px 18px rgba(232,92,58,.28), 0 0 0 0 rgba(232,92,58,0); }
}
.el-hero__cta .el-btn--primary { animation: el-pulso 2.2s ease-out 1.2s 3; }

@media (prefers-reduced-motion: reduce) {
	.el-hero__cta .el-btn--primary { animation: none; }
}


/* =============================================================
   26. Responsive medido, documento integrado (v2.9)
   Valores ajustados tras medir la portada a 360, 390, 600, 768, 820,
   920, 1024, 1180, 1280 y 1440 px.
   ============================================================= */

/* --- Titular: escala continua. Antes el mínimo de 42 px dejaba el
       titular en seis líneas en un móvil de 390 px. --- */
.el-hero__title {
	font-size: clamp(2rem, 1.1rem + 3.1vw, 3.5rem);
	/* Reparte las palabras entre líneas en vez de dejar una sola colgando */
	text-wrap: balance;
}
.el-sechead__title,
.el-cta-final__title,
.el-opiniones__titulo,
.el-servicio__title { text-wrap: balance; }
.el-hero__lead,
.el-sechead__sub { text-wrap: pretty; }

/* En portátiles pequeños la columna de texto se quedaba en 560 px */
@media (min-width: 1101px) and (max-width: 1320px) {
	.el-hero__inner { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
}

/* --- Barra de datos: a 360 px en dos columnas no cabía y la página
       entera se podía desplazar en horizontal. --- */
.el-credenciales { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
@media (max-width: 1100px) {
	.el-credenciales { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.el-credenciales { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-20); }
	.el-credenciales li { border-left: 0; padding-left: 0; }
}

/* --- Widget como documento: esquina doblada e iconos del propio sitio --- */
.el-muestra__doc { position: relative; border-top-right-radius: 0; }
.el-muestra__doc::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 30px;
	height: 30px;
	background: linear-gradient(225deg, var(--cream) 0 50%, #2C4A78 50% 100%);
	border-bottom-left-radius: 6px;
	box-shadow: -3px 3px 6px rgba(8,16,32,.18);
	pointer-events: none;
}

.el-muestra__meta dt {
	display: flex;
	align-items: center;
	gap: .4rem;
}
.el-muestra__meta-ico { display: inline-grid; color: var(--orange); }
.el-muestra__meta-ico .el-icono { width: 15px; height: 15px; }

@media (max-width: 480px) {
	.el-muestra__lineas li { padding-inline: 1rem; }
	.el-muestra__concepto { font-size: .9375rem; }
}


/* =============================================================
   27. Plantilla de reclamación: despidos y salarios (v2.11)
   ============================================================= */

.el-rec-hero {
	padding-block: clamp(3rem, 6vw, 5rem);
	background:
		radial-gradient(70% 90% at 100% 0%, rgba(232,92,58,.07), transparent 60%),
		linear-gradient(180deg, #FCFAF6 0%, var(--cream) 100%);
}
.el-rec-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: clamp(2rem, 4vw, 4rem);
	align-items: center;
}
.el-rec-hero__title {
	font-size: clamp(2rem, 1.1rem + 3.1vw, 3.5rem);
	line-height: 1.08;
	letter-spacing: -.02em;
	text-wrap: balance;
	margin-bottom: var(--s-20);
}
.el-rec-hero__lead {
	max-width: 40em;
	font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
	line-height: 1.7;
	color: var(--ink);
	opacity: .85;
	margin-bottom: var(--s-30);
	text-wrap: pretty;
}

.el-rec-hero__datos {
	display: grid;
	gap: .9rem;
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 18px;
	box-shadow: 0 1px 2px rgba(18,41,74,.05), 0 18px 44px rgba(18,41,74,.11);
}
.el-rec-dato { display: flex; align-items: center; gap: 1rem; color: var(--ink); line-height: 1.4; }
.el-rec-dato strong { display: block; font-family: var(--serif); font-size: 1.25rem; color: var(--navy); }
.el-rec-dato__icono {
	display: grid;
	place-items: center;
	width: 50px;
	height: 50px;
	flex: none;
	border-radius: 50%;
	background: var(--peach);
	color: var(--orange);
}
.el-rec-dato__icono .el-icono { width: 23px; height: 23px; }
.el-rec-dato--plazo .el-rec-dato__icono { background: var(--orange); color: #fff; }

@media (max-width: 900px) {
	.el-rec-hero__inner { grid-template-columns: 1fr; }
}

/* Pasos */
.el-rec-pasos {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 1.75rem);
	margin: 0;
	padding: 0;
	list-style: none;
}
.el-rec-paso {
	position: relative;
	padding: clamp(1.5rem, 2.5vw, 2rem);
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 16px;
	box-shadow: var(--sombra);
}
.el-rec-paso__num {
	position: absolute;
	top: -15px;
	left: 1.5rem;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--navy);
	color: #fff;
	font-weight: 700;
	font-size: .9375rem;
}
.el-rec-paso__icono {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin-bottom: var(--s-20);
	border-radius: 14px;
	background: var(--peach);
	color: var(--orange);
}
.el-rec-paso__icono .el-icono { width: 25px; height: 25px; }
.el-rec-paso__title { font-family: var(--sans); font-size: 1.0625rem; font-weight: 700; margin-bottom: .45rem; text-wrap: balance; }
.el-rec-paso__texto { margin: 0; font-size: .9375rem; line-height: 1.6; color: #4A5166; }

@media (max-width: 1000px) { .el-rec-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-40); } }
@media (max-width: 560px)  { .el-rec-pasos { grid-template-columns: 1fr; } }

/* Texto legal */
.el-rec-info h2 {
	position: relative;
	margin-top: var(--s-40);
	padding-bottom: .7rem;
	font-size: clamp(1.35rem, 2.2vw, 1.7rem);
	text-wrap: balance;
}
.el-rec-info h2::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 44px;
	height: 3px;
	border-radius: 3px;
	background: var(--orange);
}
.el-rec-info > :first-child { margin-top: 0; }

/* Formulario */
.el-rec-form { scroll-margin-top: 90px; }
.el-rec-form__caja {
	padding: clamp(1.5rem, 3.5vw, 2.75rem);
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 20px;
	box-shadow: 0 1px 2px rgba(18,41,74,.05), 0 18px 44px rgba(18,41,74,.10);
}
.el-rec-form__caja .gform_wrapper input[type="text"],
.el-rec-form__caja .gform_wrapper input[type="email"],
.el-rec-form__caja .gform_wrapper input[type="tel"],
.el-rec-form__caja .gform_wrapper input[type="number"],
.el-rec-form__caja .gform_wrapper select,
.el-rec-form__caja .gform_wrapper textarea {
	width: 100%;
	padding: .8rem .95rem;
	font: inherit;
	font-size: 1rem;
	color: var(--ink);
	background: #fff;
	border: 1px solid #D4CEC4;
	border-radius: 10px;
	box-shadow: none;
}
.el-rec-form__caja .gform_wrapper input:focus,
.el-rec-form__caja .gform_wrapper select:focus,
.el-rec-form__caja .gform_wrapper textarea:focus {
	border-color: var(--orange);
	outline: 2px solid rgba(232,92,58,.25);
	outline-offset: 0;
}
.el-rec-form__caja .gform_wrapper .gfield_label { font-weight: 650; color: var(--navy); }
.el-rec-form__caja .gform_wrapper .gfield_required { color: var(--orange-dk); }
.el-rec-form__caja .gform_wrapper .gform_button,
.el-rec-form__caja .gform_wrapper .gform_next_button,
.el-rec-form__caja .gform_wrapper .gform_previous_button {
	padding: .95rem 1.8rem;
	border: 0;
	border-radius: 999px;
	background: var(--orange);
	color: #fff;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}
.el-rec-form__caja .gform_wrapper .gform_previous_button { background: var(--shell); color: var(--navy); }
.el-rec-form__caja .gform_wrapper .gform_button:hover,
.el-rec-form__caja .gform_wrapper .gform_next_button:hover { background: var(--orange-dk); }
.el-rec-form__caja .gform_wrapper .gf_progressbar { background: var(--shell); border-radius: 999px; }
.el-rec-form__caja .gform_wrapper .gf_progressbar_percentage { background: var(--orange); border-radius: 999px; }

/* Honorarios */
.el-rec-honorarios__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
	gap: clamp(2rem, 4vw, 4rem);
	align-items: start;
}
.el-rec-honorarios .el-sechead__title { text-align: left; }
.el-rec-honorarios__lista { margin: 0; display: grid; gap: 1rem; }
.el-rec-honorarios__lista > div {
	padding: 1.25rem 1.5rem;
	background: #fff;
	border: 1px solid var(--line);
	border-left: 4px solid var(--orange);
	border-radius: 12px;
}
.el-rec-honorarios__lista dt { margin-bottom: .3rem; font-weight: 700; color: var(--navy); }
.el-rec-honorarios__lista dd { margin: 0; line-height: 1.6; color: #4A5166; }
@media (max-width: 900px) { .el-rec-honorarios__inner { grid-template-columns: 1fr; } }

.el-rec-cta .el-cta-final__inner { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); }


/* =============================================================
   28. Tienda de revisiones (v2.12)
   ============================================================= */

.el-tienda-hero { padding-bottom: clamp(2.5rem, 4vw, 3.5rem); }

.el-tienda-pasos {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
	margin: var(--s-40) 0 0;
	padding: 0;
	list-style: none;
}
.el-tienda-pasos li {
	display: flex;
	align-items: flex-start;
	gap: .9rem;
	padding: 1.1rem 1.25rem;
	background: rgba(255,255,255,.7);
	border: 1px solid var(--line);
	border-radius: 14px;
}
.el-tienda-pasos__num {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	flex: none;
	border-radius: 50%;
	background: var(--navy);
	color: #fff;
	font-weight: 700;
}
.el-tienda-pasos__texto strong { display: block; color: var(--navy); font-size: 1rem; }
.el-tienda-pasos__texto span { display: block; margin-top: .15rem; font-size: .9rem; line-height: 1.55; color: #4A5166; }
@media (max-width: 860px) { .el-tienda-pasos { grid-template-columns: 1fr; } }

/* Rejilla de productos: la de WooCommerce usa floats; aquí, grid */
.woocommerce ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1rem, 1.8vw, 1.75rem);
	margin: 0 !important;
	padding: 0;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none !important; }
@media (max-width: 1100px) { .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .woocommerce ul.products { grid-template-columns: 1fr; } }

.woocommerce ul.products li.product {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 18px;
	box-shadow: 0 1px 2px rgba(18,41,74,.05), 0 14px 36px rgba(18,41,74,.08);
	transition: transform .18s ease, box-shadow .18s ease;
}
.woocommerce ul.products li.product:hover {
	transform: translateY(-4px);
	box-shadow: 0 2px 4px rgba(18,41,74,.06), 0 22px 48px rgba(18,41,74,.13);
}
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
	display: flex;
	flex-direction: column;
	flex: 1;
	color: inherit;
	text-decoration: none;
}
.woocommerce ul.products li.product img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	margin: 0 !important;
	filter: brightness(.98) contrast(1.05) saturate(.95);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	margin: 0;
	padding: 1.25rem 1.4rem .4rem !important;
	font-family: var(--serif);
	font-size: clamp(1.1rem, 1.5vw, 1.3rem) !important;
	font-weight: 700;
	line-height: 1.3;
	color: var(--navy);
	text-wrap: balance;
}
.woocommerce ul.products li.product .price {
	display: block;
	margin: auto 0 0 !important;
	padding: .5rem 1.4rem 0;
	color: var(--navy) !important;
	font-size: 1.0625rem !important;
	font-weight: 700;
}
.woocommerce ul.products li.product .price .woocommerce-price-suffix { font-size: .8125rem; font-weight: 500; color: #4A5166; }
.woocommerce ul.products li.product .button {
	display: flex !important;
	align-items: center;
	justify-content: center;
	margin: 1rem 1.4rem 1.4rem !important;
	padding: .9rem 1rem !important;
	border-radius: 999px !important;
	background: var(--navy) !important;
	color: #fff !important;
	font-weight: 650;
	text-align: center;
}
.woocommerce ul.products li.product .button:hover { background: var(--orange) !important; }
.woocommerce ul.products li.product .added_to_cart {
	display: block;
	margin: -.6rem 1.4rem 1.2rem;
	text-align: center;
	font-size: .875rem;
	color: var(--orange-dk);
}
@media (prefers-reduced-motion: reduce) {
	.woocommerce ul.products li.product:hover { transform: none; }
}

/* =============================================================
   29. Blog (v2.12)
   ============================================================= */

.el-blog-cab {
	padding-block: clamp(3rem, 6vw, 4.5rem) clamp(1.75rem, 3vw, 2.5rem);
	background:
		radial-gradient(70% 90% at 100% 0%, rgba(232,92,58,.07), transparent 60%),
		linear-gradient(180deg, #FCFAF6 0%, var(--cream) 100%);
	border-bottom: 1px solid var(--line);
}
.el-blog-cab__fila {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(16rem, 26rem);
	gap: var(--s-30);
	align-items: end;
}
.el-blog-cab__title {
	margin-bottom: .5rem;
	font-size: clamp(2rem, 1.1rem + 3vw, 3.25rem);
	letter-spacing: -.02em;
	text-wrap: balance;
}
.el-blog-cab__sub { margin: 0; font-size: 1.0625rem; color: #4A5166; }
.el-blog-cab__buscar .el-search input[type="search"] { border-radius: 999px; padding-inline: 1.2rem; }
.el-blog-cab__buscar .el-search .el-btn { border-radius: 999px; }
@media (max-width: 860px) { .el-blog-cab__fila { grid-template-columns: 1fr; } }

.el-temas {
	display: flex;
	flex-wrap: wrap;
	gap: .55rem;
	margin-top: var(--s-30);
}
.el-temas__item {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .55rem 1rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: #fff;
	color: var(--navy);
	font-size: .9375rem;
	font-weight: 600;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.el-temas__item:hover { border-color: var(--navy); text-decoration: none; }
.el-temas__item.es-activo { background: var(--navy); border-color: var(--navy); color: #fff; }
.el-temas__num {
	display: inline-grid;
	place-items: center;
	min-width: 1.6rem;
	height: 1.35rem;
	padding: 0 .4rem;
	border-radius: 999px;
	background: var(--shell);
	color: var(--navy);
	font-size: .75rem;
	font-weight: 700;
}
.el-temas__item.es-activo .el-temas__num { background: rgba(255,255,255,.18); color: #fff; }

.el-blog-lista { padding-top: clamp(2.5rem, 4vw, 3.5rem); }

.el-blog-opciones {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 1.75rem);
}
.el-blog-opcion {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 18px;
	box-shadow: 0 1px 2px rgba(18,41,74,.05), 0 14px 36px rgba(18,41,74,.08);
	color: #4A5166;
	transition: transform .18s ease, box-shadow .18s ease;
}
.el-blog-opcion:hover { transform: translateY(-3px); text-decoration: none; box-shadow: 0 2px 4px rgba(18,41,74,.06), 0 22px 48px rgba(18,41,74,.13); }
.el-blog-opcion strong { font-family: var(--serif); font-size: clamp(1.3rem, 2vw, 1.6rem); color: var(--navy); line-height: 1.25; }
.el-blog-opcion .el-servicio__boton { align-self: flex-start; margin-top: var(--s-20); }
.el-blog-opcion:hover .el-servicio__boton { background: var(--orange); }
@media (max-width: 760px) { .el-blog-opciones { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .el-blog-opcion:hover { transform: none; } }


/* =============================================================
   30. Aviso de cookies (v2.13)
   ============================================================= */

.el-cookies[hidden] { display: none; }

.el-cookies__barra {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 400;
	max-height: 80vh;
	overflow-y: auto;
	padding: 1.15rem clamp(1rem, 4vw, 3rem);
	background: var(--navy);
	color: rgba(255,255,255,.82);
	box-shadow: 0 -8px 30px rgba(8,16,32,.28);
}

.el-cookies__fila {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1.25rem 2.5rem;
	max-width: 1440px;
	margin-inline: auto;
}

.el-cookies__texto { max-width: 62ch; }
.el-cookies__titulo {
	margin: 0 0 .15rem;
	color: #fff;
	font-size: 1rem;
	font-weight: 700;
}
.el-cookies__texto p { margin: 0; font-size: .875rem; line-height: 1.55; }
.el-cookies__texto a { color: #fff; text-decoration: underline; }

.el-cookies__botones { display: flex; flex-wrap: wrap; gap: .6rem; }
.el-cookies__botones button[hidden] { display: none; }

.el-cookies__btn {
	padding: .75rem 1.6rem;
	border: 1px solid transparent;
	border-radius: var(--radio-s);
	font: inherit;
	font-size: .9375rem;
	font-weight: 650;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
/* Aceptar y rechazar pesan lo mismo a propósito: rechazar tiene que ser
   tan fácil como aceptar. */
.el-cookies__btn--si { background: var(--orange); color: #fff; }
.el-cookies__btn--si:hover { background: var(--orange-dark, #C8492B); }
.el-cookies__btn--no { background: #fff; color: var(--navy); }
.el-cookies__btn--no:hover { background: var(--cream); }
.el-cookies__btn--mas { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.el-cookies__btn--mas:hover { border-color: #fff; background: rgba(255,255,255,.08); }

/* Categorías, desplegadas dentro de la misma barra */
.el-cookies__opciones {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem 3rem;
	max-width: 1440px;
	margin: 1.15rem auto 0;
	padding-top: 1.15rem;
	border-top: 1px solid rgba(255,255,255,.18);
}
.el-cookies__opciones[hidden] { display: none; }

.el-cookies__grupo label {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .75rem;
	align-items: start;
	cursor: pointer;
	font-size: .8125rem;
	line-height: 1.55;
	color: rgba(255,255,255,.72);
}
.el-cookies__grupo input {
	margin-top: .15rem;
	width: 17px;
	height: 17px;
	accent-color: var(--orange);
}
.el-cookies__grupo input:disabled { cursor: not-allowed; opacity: .7; }
.el-cookies__grupo strong {
	display: block;
	margin-bottom: .1rem;
	color: #fff;
	font-size: .9375rem;
}

/* Enlace del pie para volver a decidir */
.el-footer__cookies {
	padding: 0;
	background: none;
	border: 0;
	color: rgba(255,255,255,.62);
	font: inherit;
	font-size: .8125rem;
	text-decoration: underline;
	cursor: pointer;
}
.el-footer__cookies:hover { color: #fff; }

@media (max-width: 860px) {
	.el-cookies__fila { justify-content: flex-start; }
	.el-cookies__botones { width: 100%; }
	.el-cookies__btn { flex: 1 1 auto; text-align: center; }
	.el-cookies__opciones { grid-template-columns: 1fr; }
}


/* =============================================================
   31. Ficha de producto y circuito de compra (v2.14)
   ============================================================= */

.woocommerce div.product {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: clamp(2rem, 4vw, 4rem);
	align-items: start;
}
.woocommerce div.product > .woocommerce-product-gallery { grid-column: 1; }
.woocommerce div.product > .summary { grid-column: 2; margin: 0 !important; width: auto !important; float: none !important; }
.woocommerce div.product > .woocommerce-tabs,
.woocommerce div.product > .el-ficha-pasos,
.woocommerce div.product > .related,
.woocommerce div.product > .up-sells { grid-column: 1 / -1; }

.woocommerce div.product .woocommerce-product-gallery {
	width: auto !important;
	float: none !important;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(18,41,74,.05), 0 18px 44px rgba(18,41,74,.11);
}
.woocommerce div.product .woocommerce-product-gallery img { border-radius: 0; }

.woocommerce div.product .product_title {
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	line-height: 1.15;
	letter-spacing: -.02em;
	text-wrap: balance;
	margin-bottom: var(--s-20);
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	margin-bottom: var(--s-30) !important;
	color: var(--navy) !important;
	font-size: 1.75rem !important;
	font-weight: 700;
}
.woocommerce div.product .price .woocommerce-price-suffix {
	font-size: .9375rem;
	font-weight: 500;
	color: #4A5166;
}
.woocommerce div.product .woocommerce-product-details__short-description {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: #4A5166;
}
.woocommerce div.product form.cart { margin-bottom: var(--s-30) !important; }
.woocommerce div.product form.cart .button {
	width: 100%;
	padding: 1.1rem 2rem !important;
	border-radius: 999px !important;
	background: var(--orange) !important;
	color: #fff !important;
	font-size: 1.0625rem !important;
	font-weight: 700;
	box-shadow: 0 10px 26px rgba(232,92,58,.28);
}
.woocommerce div.product form.cart .button:hover { background: var(--orange-dark, #C8492B) !important; }

/* Lo que se lleva, bajo el botón */
.el-ficha-confianza { margin: 0 0 var(--s-30); padding: 0; list-style: none; }
.el-ficha-confianza li {
	display: flex;
	align-items: flex-start;
	gap: .7rem;
	padding: .45rem 0;
	font-size: .9375rem;
	line-height: 1.5;
	color: var(--ink);
}
.el-ficha-confianza .el-icono { width: 19px; height: 19px; flex: none; margin-top: .1rem; color: var(--orange); }

/* Pestaña de descripción */
.woocommerce div.product .woocommerce-tabs { margin-top: var(--s-50); }
.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0 !important; margin: 0 0 var(--s-30) !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border-bottom-color: var(--line) !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent !important;
	border: 0 !important;
	border-bottom: 3px solid transparent !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 0 1.75rem 0 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	padding: .6rem 0 !important;
	color: #4A5166 !important;
	font-family: var(--sans);
	font-weight: 650;
	font-size: 1rem;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { border-bottom-color: var(--orange) !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--navy) !important; }
.woocommerce div.product .woocommerce-Tabs-panel { max-width: 68ch; font-size: 1.0625rem; line-height: 1.75; }
.woocommerce div.product .woocommerce-Tabs-panel h2:first-child { display: none; }

/* Qué pasa después de contratar */
.el-ficha-pasos {
	margin-top: var(--s-50);
	padding: clamp(1.75rem, 3vw, 2.5rem);
	background: var(--shell);
	border-radius: 18px;
}
.el-ficha-pasos__title { font-size: clamp(1.35rem, 2.2vw, 1.75rem); margin-bottom: var(--s-30); }
.el-ficha-pasos ol {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 1.75rem);
	margin: 0;
	padding: 0;
	list-style: none;
}
.el-ficha-pasos li {
	position: relative;
	padding: 1.4rem;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 14px;
}
.el-ficha-pasos__num {
	position: absolute;
	top: -14px;
	left: 1.4rem;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--navy);
	color: #fff;
	font-size: .875rem;
	font-weight: 700;
}
.el-ficha-pasos__icono {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-bottom: .9rem;
	border-radius: 12px;
	background: var(--peach);
	color: var(--orange);
}
.el-ficha-pasos__icono .el-icono { width: 21px; height: 21px; }
.el-ficha-pasos li strong { display: block; color: var(--navy); font-size: 1rem; margin-bottom: .3rem; }
.el-ficha-pasos li > span:last-child { display: block; font-size: .9rem; line-height: 1.6; color: #4A5166; }

.woocommerce .related > h2,
.woocommerce .up-sells > h2 {
	margin-top: var(--s-50);
	margin-bottom: var(--s-30);
	font-size: clamp(1.35rem, 2.2vw, 1.75rem);
}

@media (max-width: 900px) {
	.woocommerce div.product { grid-template-columns: 1fr; }
	.woocommerce div.product > .woocommerce-product-gallery,
	.woocommerce div.product > .summary { grid-column: 1; }
	.el-ficha-pasos ol { grid-template-columns: 1fr; }
}

/* --- Carrito, pago y cuenta --- */
.woocommerce table.shop_table {
	border-radius: 14px;
	border-color: var(--line);
	overflow: hidden;
}
.woocommerce table.shop_table th {
	background: var(--shell);
	color: var(--navy);
	font-family: var(--sans);
	font-weight: 700;
	font-size: .875rem;
	letter-spacing: .02em;
	text-transform: uppercase;
}
.woocommerce table.shop_table td { border-top-color: var(--line); }
.woocommerce table.cart img { width: 64px; border-radius: 8px; }

.woocommerce .cart_totals h2,
.woocommerce-checkout h3,
.woocommerce-account h2 {
	font-size: clamp(1.25rem, 2vw, 1.5rem);
	margin-bottom: var(--s-20);
}
.woocommerce .cart-collaterals .cart_totals {
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 16px;
	box-shadow: var(--sombra);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-account form input.input-text {
	padding: .8rem .95rem;
	border: 1px solid #D4CEC4;
	border-radius: 10px;
	font: inherit;
	font-size: 1rem;
	color: var(--ink);
	background: #fff;
}
.woocommerce form .form-row label { font-weight: 650; color: var(--navy); }

#add_payment_method #payment,
.woocommerce-cart #payment,
.woocommerce-checkout #payment {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 16px;
}
.woocommerce-checkout #payment div.payment_box { background: var(--shell); color: #4A5166; }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--shell); }

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	border-radius: 999px;
	padding: .9rem 1.8rem;
	font-weight: 650;
	background: var(--navy);
	color: #fff;
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover { background: var(--orange); color: #fff; }
.woocommerce .checkout-button,
.woocommerce #place_order {
	background: var(--orange) !important;
	color: #fff !important;
	font-size: 1.0625rem !important;
	padding: 1.05rem 2rem !important;
}
.woocommerce .checkout-button:hover,
.woocommerce #place_order:hover { background: var(--orange-dark, #C8492B) !important; }

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li {
	border-bottom: 1px solid var(--line);
}
.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: .75rem 0;
	color: var(--navy);
	font-weight: 600;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { color: var(--orange); }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top-color: var(--orange);
	background: var(--shell);
	border-radius: 10px;
}

/* =============================================================
   24. Carrito y pago a dos columnas (v2.15)
   ============================================================= */

/*
 * Las tablas del blog llevan display:block para poder desplazarse en
 * horizontal (.el-prosa table). En el carrito y el pago eso encogía las
 * tablas a la mitad del ancho. Aquí vuelven a ser tablas.
 */
.el-prosa .woocommerce table.shop_table {
	display: table;
	width: 100%;
	overflow: hidden;
	font-size: .9375rem;
}
.el-prosa .woocommerce table.shop_table th,
.el-prosa .woocommerce table.shop_table td { border-bottom: 0; }
.el-prosa .woocommerce > * + *,
.el-prosa .woocommerce form > * + * { margin-top: 0; }

/* --- Carrito: tabla y sugerencias a la izquierda, total a la derecha --- */
.woocommerce-cart .el-prosa .woocommerce {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
	column-gap: clamp(1.75rem, 3vw, 3rem);
	align-items: start;
}
.woocommerce-cart .el-prosa .woocommerce > * { grid-column: 1 / -1; }
.woocommerce-cart .el-prosa .woocommerce > .woocommerce-notices-wrapper { grid-row: 1; }
.woocommerce-cart .el-prosa .woocommerce > .woocommerce-cart-form { grid-column: 1; grid-row: 2; margin: 0; }
.woocommerce-cart .el-prosa .woocommerce > .cart-collaterals { display: contents; }

.woocommerce-cart .cart-collaterals .cart_totals {
	grid-column: 2;
	grid-row: 2 / span 2;
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	position: sticky;
	top: 110px;
}
.woocommerce-cart .cart-collaterals .cart_totals h2 { margin-top: 0; }
.woocommerce-cart .cart-collaterals .cart_totals table.shop_table { margin-bottom: var(--s-20); }
.woocommerce-cart .wc-proceed-to-checkout { padding: 0 !important; }
.woocommerce-cart .wc-proceed-to-checkout .checkout-button { display: block; width: 100%; margin: 0 !important; text-align: center; }

.woocommerce-cart .cart-collaterals .cross-sells {
	grid-column: 1;
	grid-row: 3;
	width: auto !important;
	float: none !important;
	margin: var(--s-40) 0 0 !important;
}
.woocommerce-cart .cross-sells > h2 { margin: 0 0 var(--s-20); font-size: clamp(1.25rem, 2vw, 1.5rem); }
.woocommerce-cart .cross-sells ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.woocommerce-cart .cross-sells ul.products li.product .woocommerce-loop-product__title { font-size: 1.125rem !important; }

/* Solo se compra un servicio de cada: el botón "Actualizar carrito" no hace nada. */
.woocommerce-cart table.cart td.actions { display: none; }
.woocommerce-cart table.cart tr:last-child td { border-bottom: 0; }

@media (max-width: 960px) {
	.woocommerce-cart .el-prosa .woocommerce { grid-template-columns: minmax(0, 1fr); }
	.woocommerce-cart .cart-collaterals .cart_totals { grid-column: 1; grid-row: 3; position: static; margin-top: var(--s-30) !important; }
	.woocommerce-cart .cart-collaterals .cross-sells { grid-row: 4; }
}
@media (max-width: 700px) {
	.woocommerce-cart .cross-sells ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
	.woocommerce-cart .cross-sells ul.products { grid-template-columns: 1fr; }
}

/* --- Pago: datos a la izquierda, pedido y botón de pagar a la derecha --- */
.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-checkout form.checkout_coupon,
.woocommerce-checkout .woocommerce-additional-fields > h3 { display: none !important; }

.woocommerce-checkout .el-prosa form.checkout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(340px, 440px);
	/* La última fila absorbe la altura de los datos de facturación; así
	   "Tu pedido" queda pegado a su tabla y no se separa. */
	grid-template-rows: auto auto 1fr;
	column-gap: clamp(1.75rem, 3vw, 3rem);
	align-items: start;
}
.woocommerce-checkout .el-prosa form.checkout > * { grid-column: 1 / -1; }
.woocommerce-checkout .el-prosa form.checkout > .woocommerce-NoticeGroup { grid-row: 1; }
.woocommerce-checkout .el-prosa form.checkout > #customer_details { grid-column: 1; grid-row: 2 / span 2; }
.woocommerce-checkout .el-prosa form.checkout > #order_review_heading { grid-column: 2; grid-row: 2; margin: 0 0 var(--s-20); }
.woocommerce-checkout .el-prosa form.checkout > #order_review {
	grid-column: 2;
	grid-row: 3;
	position: sticky;
	top: 110px;
}

/* Las dos columnas de datos, una encima de otra */
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 { float: none; width: 100%; }
.woocommerce-checkout #customer_details .col-2:not(:empty) { margin-top: var(--s-30); }
.woocommerce-checkout #customer_details h3 { margin-top: 0; }

.woocommerce-checkout #order_review table.shop_table { margin-bottom: var(--s-20); }
.woocommerce-checkout #payment .form-row.place-order { padding: 1.25rem; }
.woocommerce-checkout #payment #place_order { width: 100% !important; float: none !important; margin-top: var(--s-20); }

@media (max-width: 960px) {
	.woocommerce-checkout .el-prosa form.checkout { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
	.woocommerce-checkout .el-prosa form.checkout > #customer_details { grid-row: 2; }
	.woocommerce-checkout .el-prosa form.checkout > #order_review_heading { grid-column: 1; grid-row: 3; margin-top: var(--s-40); }
	.woocommerce-checkout .el-prosa form.checkout > #order_review { grid-column: 1; grid-row: 4; position: static; }
}

/* --- Documentación de cada servicio en el pago (inc/carta-despido.php) --- */
.el-docs { margin: 0 0 var(--s-30); }
.el-docs__titulo {
	margin: 0 0 .35rem;
	font-family: var(--serif);
	font-size: clamp(1.15rem, 1.8vw, 1.35rem);
	font-weight: 700;
	color: var(--navy);
}
.el-docs__intro { margin: 0 0 var(--s-20); font-size: .9375rem; color: var(--muted); }
.el-doc { margin: 0 0 1.25rem; }
.el-doc__label { display: block; margin-bottom: .45rem; font-weight: 650; color: var(--navy); }
.el-doc__label abbr { color: var(--orange); text-decoration: none; border: 0; }
.el-doc textarea,
.el-doc input[type="text"],
.el-doc input[type="date"] {
	width: 100%;
	padding: .8rem .95rem;
	border: 1px solid #D4CEC4;
	border-radius: 10px;
	font: inherit;
	font-size: 1rem;
	color: var(--ink);
	background: #fff;
}
.el-doc__zona {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem 1rem;
	padding: 1rem 1.15rem;
	border: 2px dashed #CFC8BC;
	border-radius: 14px;
	background: var(--cream);
	cursor: pointer;
	transition: border-color .2s ease, background .2s ease;
}
.el-doc__zona:hover,
.el-doc__zona:focus-within { border-color: var(--navy); }
.el-doc__zona input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.el-doc__boton {
	padding: .65rem 1.3rem;
	border-radius: 999px;
	background: var(--navy);
	color: #fff;
	font-size: .9375rem;
	font-weight: 650;
	white-space: nowrap;
}
.el-doc__estado { font-size: .9375rem; color: var(--muted); overflow-wrap: anywhere; }
.el-doc__estado:empty { display: none; }
.el-doc__lista { margin: .5rem 0 0; padding: 0; list-style: none; }
.el-doc__lista li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	margin-top: .35rem;
	padding: .45rem .75rem;
	border-radius: 8px;
	background: #EEF7F1;
	color: #1F6B3F;
	font-size: .9375rem;
	font-weight: 600;
	overflow-wrap: anywhere;
}
.el-doc__quitar {
	flex: none;
	padding: .15rem .45rem;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: #1F6B3F;
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
}
.el-doc__quitar:hover { background: rgba(31,107,63,.12); }
.el-doc__ayuda { margin: .4rem 0 0; font-size: .875rem; color: var(--muted); }
.el-doc.is-cargando .el-doc__zona { opacity: .7; cursor: progress; }
.el-doc.is-ok .el-doc__zona { border-style: solid; border-color: #2E7D4F; background: #F6FBF8; }
.el-doc.is-error .el-doc__zona { border-color: var(--orange); background: var(--peach); }
.el-doc.is-error .el-doc__estado { color: var(--orange-dk); font-weight: 650; }

/* v2.15.1 — Con un solo servicio, subtotal y total son el mismo número:
   se deja solo el total. */
.woocommerce-checkout-review-order-table tr.cart-subtotal,
.woocommerce-cart .cart_totals tr.cart-subtotal { display: none; }


/* =============================================================
   25. Maternidad y Compromiso (v2.16)
   ============================================================= */

.el-servicios--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .el-servicios--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .el-servicios--3 { grid-template-columns: 1fr; } }

/* Compromiso: la lista numerada del editor se muestra como tarjetas */
.el-compromiso > h2,
.el-compromiso > h3 { text-align: center; margin: 0 0 var(--s-20); font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.el-compromiso > p { max-width: 46em; margin: 0 auto var(--s-40); text-align: center; color: var(--muted); }
.el-compromiso ol {
	counter-reset: el-comp;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}
.el-compromiso ol li {
	counter-increment: el-comp;
	position: relative;
	padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.25rem, 2.5vw, 1.75rem) 4.25rem;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 16px;
	box-shadow: var(--sombra);
	line-height: 1.65;
	color: var(--ink);
}
.el-compromiso ol li::before {
	content: counter(el-comp);
	position: absolute;
	top: clamp(1.25rem, 2.5vw, 1.75rem);
	left: 1.25rem;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--navy);
	color: #fff;
	font-weight: 700;
	font-size: .9375rem;
}
.el-compromiso ol li strong { display: block; margin-bottom: .25rem; font-family: var(--serif); font-size: 1.125rem; color: var(--navy); }
@media (max-width: 800px) { .el-compromiso ol { grid-template-columns: 1fr; } }

.el-doc__label .optional { font-weight: 400; font-size: .875rem; color: var(--muted); }

/* =============================================================
   33. Sistema visual unificado (v2.17)
   Va al final a propósito: gana sobre las capas anteriores sin tener
   que reescribirlas. Un contenedor, un naranja accesible, dos botones,
   una escala tipográfica, una paleta corta y un solo ritmo vertical.
   ============================================================= */

/* --- Tokens --- */
:root {
	--navy:        #12294A;
	--orange:      #C8492B; /* 4,73:1 con texto blanco: cumple WCAG AA */
	--orange-dk:   #A93A20;
	--orange-dark: #A93A20;
	--ink:         #1C2430;
	--muted:       #565C70;
	--line:        #E3DED5;
	--surface:     #F7F5F1;

	/* Los antiguos fondos crema y concha pasan a ser la misma superficie;
	   melocotón y azul suave quedan como tintes muy claros de la marca. */
	--shell:     var(--surface);
	--cream:     var(--surface);
	--peach:     #F8ECE8;
	--blue-soft: #EEF1F6;

	--radio:   12px;
	--radio-s: 6px;

	--btn-h:    48px;
	--btn-h-lg: 56px;

	--sec-y: 80px;

	/* Escala tipográfica: H1 48 · H2 34 · H3 22 · cuerpo 17 · pequeño 14 */
	--t-h1:    clamp(2.125rem, 1.45rem + 2.4vw, 3rem);
	--t-h2:    clamp(1.75rem, 1.4rem + 1.2vw, 2.125rem);
	--t-h3:    1.375rem;
	--t-body:  1.0625rem;
	--t-small: .875rem;
}
@media (max-width: 760px) {
	:root { --sec-y: 56px; --t-h3: 1.25rem; }
}

/* --- 1. Un solo ancho de contenido: todo arranca en la línea del logo.
       Los fondos a sangre siguen ocupando la pantalla porque van en la
       sección, no en el contenedor. --- */
.el-wrap--ancho,
.el-hero .el-wrap { max-width: 1180px; }

/* --- 5. Paleta: fondos planos, sin degradados --- */
.el-hero,
.el-section--shell,
.el-section--cream { background: var(--surface); }
.el-section--blanco { background: #fff; }

/* --- 6. Ritmo vertical único --- */
.el-section,
.el-porque,
.el-opiniones,
.el-cta-final { padding-block: var(--sec-y); }
.el-hero { padding-block: 56px var(--sec-y); }
.el-footer { padding-block: var(--sec-y) 28px; }
.el-sechead,
.el-porque .el-sechead { margin-bottom: 40px; }
@media (max-width: 760px) {
	.el-hero { padding-block: 32px var(--sec-y); }
	.el-sechead,
	.el-porque .el-sechead { margin-bottom: 28px; }
}

/* --- 4. Escala tipográfica --- */
body { font-size: var(--t-body); }

h1, h2, h3, h4 { font-weight: 600; }

h1,
.el-hero__title,
.el-pagehead__title,
.el-rec-hero__title,
.el-blog-cab__title,
.woocommerce div.product .product_title {
	font-size: var(--t-h1);
	line-height: 1.1;
	letter-spacing: -.015em;
	font-weight: 600;
}

.el-sechead__title,
.el-opiniones__titulo,
.el-cta-final__title {
	font-size: var(--t-h2);
	line-height: 1.18;
	letter-spacing: -.012em;
	font-weight: 600;
}

.el-ruta__title,
.el-servicio__title,
.el-paso__title,
.el-rec-paso__title,
.el-razon__title,
.el-porque .el-razon__title,
.el-card__title,
.el-ficha-pasos__title,
.el-cta-inline__title {
	font-family: var(--sans);
	font-size: var(--t-h3);
	line-height: 1.3;
	letter-spacing: -.01em;
	font-weight: 600;
}

.el-prosa h2 { font-size: 1.75rem; }
.el-prosa h3 { font-size: 1.375rem; }

/* Títulos de sección a la izquierda; centrados solo en opiniones y en la
   llamada final, que son piezas de cierre. */
.el-sechead { text-align: left; }
.el-sechead__sub { max-width: 44em; font-size: var(--t-body); }
.el-sechead__mas { text-align: left; }

/* Ningún texto útil por debajo de 14 px */
.el-eyebrow { font-size: var(--t-small); letter-spacing: .1em; }
.el-hero__micro { font-size: .9375rem; color: var(--ink); }
.el-credenciales__texto > span,
.el-servicio__precio small,
.el-servicio__precio .woocommerce-price-suffix,
.el-opinion__fuente,
.el-footer__legal a,
.el-footer__fiscal,
.el-footer__copy p,
.el-calc__legal,
.el-muestra__estado { font-size: var(--t-small) !important; }
.el-card__excerpt,
.el-ruta__texto,
.el-servicio__texto,
.el-paso__texto,
.el-razon__texto,
.el-check li { font-size: 1rem; }

/* --- 3. Botones: dos estilos y dos tamaños --- */
.el-btn,
.el-servicio__boton,
.comment-form .submit,
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-height: var(--btn-h);
	padding: 0 1.5rem;
	border: 1.5px solid transparent;
	border-radius: var(--radio-s);
	font-family: var(--sans) !important;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0;
	box-shadow: none;
	text-transform: none;
}

.el-btn--lg,
.el-cta-final__btn,
.woocommerce div.product form.cart .button,
.woocommerce .checkout-button,
.woocommerce #place_order {
	min-height: var(--btn-h-lg);
	padding: 0 2rem !important;
	font-size: 1.0625rem !important;
	border-radius: var(--radio-s) !important;
	box-shadow: none !important;
}

/* La pastilla desaparece: mismo radio para todos */
.el-btn--pastilla { border-radius: var(--radio-s); padding: 0 1.5rem; font-size: 1rem; }

/* Primario: naranja con texto blanco */
.el-btn--primary,
.comment-form .submit,
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	background: var(--orange);
	border-color: var(--orange);
	color: #fff;
	box-shadow: none;
}
.el-btn--primary:hover,
.comment-form .submit:hover,
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background: var(--orange-dk);
	border-color: var(--orange-dk);
	color: #fff;
	box-shadow: none;
}
.woocommerce div.product form.cart .button,
.woocommerce .checkout-button,
.woocommerce #place_order { background: var(--orange) !important; border-color: var(--orange) !important; }
.woocommerce div.product form.cart .button:hover,
.woocommerce .checkout-button:hover,
.woocommerce #place_order:hover { background: var(--orange-dk) !important; border-color: var(--orange-dk) !important; }

/* Sin pulso ni sombras de colores: la seriedad también es calma */
.el-hero__cta .el-btn--primary { animation: none; }

/* Secundario: borde azul marino, fondo transparente */
.el-btn--navy,
.el-btn--secundario,
.el-servicio__boton {
	background: transparent;
	border-color: var(--navy);
	color: var(--navy);
}
.el-btn--navy:hover,
.el-btn--secundario:hover,
.el-servicio:hover .el-servicio__boton {
	background: var(--navy);
	border-color: var(--navy);
	color: #fff;
}
.el-servicio__boton { width: 100%; }

/* Sobre fondo naranja: botón blanco con texto naranja oscuro */
.el-btn--blanco,
.el-cta-final__btn {
	background: #fff;
	border-color: #fff;
	color: var(--orange-dk);
	white-space: normal;
}
.el-btn--blanco:hover,
.el-cta-final__btn:hover {
	background: var(--navy);
	border-color: var(--navy);
	color: #fff;
	box-shadow: none;
}
.el-js .el-cta-final[data-aparece] .el-cta-final__btn { transform: none; }

/* Botones del aviso de cookies: misma forma */
.el-cookies__btn { min-height: 44px; padding: 0 1.4rem; border-radius: var(--radio-s); font-weight: 600; }

/* --- Radios: tarjetas 12 px, iconos 8 px, círculos solo para avatares --- */
.el-ruta,
.el-servicio,
.el-paso,
.el-credenciales,
.el-muestra__doc,
.el-opinion,
.el-card,
.el-calc,
.el-cta-inline,
.el-compromiso ol li,
.woocommerce ul.products li.product,
.woocommerce div.product .woocommerce-product-gallery { border-radius: var(--radio); }
.el-muestra__doc { border-top-right-radius: 0; }
.el-ruta__icono,
.el-paso__icono,
.el-muestra__resumen,
.el-muestra__num { border-radius: 8px; }

/* Sombras discretas y todas iguales */
.el-ruta,
.el-servicio,
.el-paso,
.el-card,
.el-credenciales,
.el-muestra__doc { box-shadow: 0 1px 2px rgba(18,41,74,.05), 0 8px 24px rgba(18,41,74,.06); }
.el-servicio:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(18,41,74,.06), 0 14px 32px rgba(18,41,74,.10); }
.el-credenciales__icono,
.el-muestra__num { box-shadow: none; }

/* --- 5. Tarjetas de «¿Qué te ha pasado?»: iguales, blancas con borde --- */
.el-ruta,
.el-ruta--azul,
.el-ruta--melocoton {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--line);
}
.el-ruta__icono,
.el-ruta--azul .el-ruta__icono,
.el-ruta--melocoton .el-ruta__icono { background: var(--surface); color: var(--navy); }
.el-ruta > .el-btn { align-self: flex-start; margin-top: auto; }

/* --- 14. Las dos vías de «Me han despedido» --- */
.el-ruta__opciones { display: grid; gap: 1rem; }
.el-ruta__opcion {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 1.25rem 1.35rem;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 8px;
}
.el-ruta__opcion-tit { margin: 0 0 .3rem; color: var(--navy); font-weight: 600; font-size: 1.0625rem; line-height: 1.35; }
.el-ruta__opcion-texto { margin: 0 0 1rem; font-size: 1rem; line-height: 1.6; }
.el-ruta__opcion .el-btn { background: #fff; }
.el-ruta__opcion .el-btn:hover { background: var(--navy); }

/* --- Menú: subrayado sólido, sin degradado --- */
.el-nav__list a::after { background: var(--orange); }

/* --- 7. Cabecera: más baja, con el botón principal siempre a mano --- */
.el-header__inner {
	min-height: 72px;
	padding-block: 0;
	gap: clamp(1.5rem, 3vw, 2.75rem);
}

/* El logo lleva el lema «Abogados laboralistas» dentro de la imagen y, a
   este tamaño, se leía como una mancha gris. Se recorta por CSS: se muestra
   la parte de arriba (78 de sus 98 px de alto) y el archivo no cambia. */
.el-brand .custom-logo-link { display: block; height: 34px; overflow: hidden; line-height: 0; }
.el-brand img,
.el-brand .custom-logo { height: calc(34px * 98 / 78); max-height: none; width: auto; }

.el-nav__list { gap: clamp(1.25rem, 2.2vw, 2.25rem); }
.el-nav__list a { font-size: 1.0625rem; font-weight: 600; }

.el-header__acciones { gap: .75rem; }
.el-header__cta { min-height: 44px; padding: 0 1.25rem; font-size: .9375rem; white-space: nowrap; }

.el-carrito { width: 44px; height: 44px; }
.el-carrito .el-icono { width: 22px; height: 22px; }

#como-funciona,
[id] { scroll-margin-top: 88px; }

@media (max-width: 900px) {
	.el-header__inner { min-height: 60px; gap: 1rem; }
	.el-brand .custom-logo-link { height: 28px; }
	.el-brand img,
	.el-brand .custom-logo { height: calc(28px * 98 / 78); }
	[id] { scroll-margin-top: 76px; }
}
@media (max-width: 640px) {
	.el-header__cta { display: none; }
}

/* --- 8. Menú móvil: panel blanco bajo la cabecera, con ✕ y botón --- */
.el-nav__pie { display: none; }

@media (max-width: 900px) {
	.el-nav {
		top: 60px;
		inset-inline: 0;
		bottom: 0;
		justify-content: flex-start;
		align-items: stretch;
		gap: 0;
		padding: .5rem var(--s-30) var(--s-30);
		background: #fff;
		border-top: 1px solid var(--line);
		visibility: hidden;
		transition: transform .25s ease, visibility 0s linear .25s;
	}
	.el-nav-abierto .el-nav {
		visibility: visible;
		transition: transform .25s ease, visibility 0s linear 0s;
	}

	.el-nav__list { align-items: stretch; gap: 0; }
	.el-nav__list > li { border-bottom: 1px solid var(--line); }
	.el-nav__list a {
		display: flex;
		align-items: center;
		min-height: 56px;
		padding-block: 0;
		color: var(--navy);
		font-family: var(--serif);
		font-size: 1.25rem;
	}
	.el-nav__list a::after { display: none; }
	.el-nav__list .sub-menu a { min-height: 44px; color: var(--muted); font-size: 1rem; }

	.el-nav__pie {
		display: flex;
		flex-direction: column;
		gap: 1rem;
		margin-top: auto;
		padding-top: var(--s-30);
	}
	.el-nav__pie .el-btn { width: 100%; }
	.el-nav__email {
		align-self: center;
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		color: var(--muted);
		font-size: 1rem;
	}

	/* La hamburguesa se convierte en ✕ y sigue en su sitio */
	.el-nav-abierto .el-burger span { background: var(--navy); }
	.el-burger span { transition: transform .2s ease, opacity .2s ease; }
	.el-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.el-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
	.el-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* --- 9. Accesibilidad --- */
.el-skip { position: fixed; top: 1rem; }
.el-skip:focus { z-index: 1000; }

/* Una sola parada de teclado por tarjeta: el enlace del título la cubre */
.el-card { position: relative; }
.el-card__enlace::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.el-card__enlace:focus-visible { outline: none; }
.el-card:has(.el-card__enlace:focus-visible) { outline: 2px solid var(--orange); outline-offset: 3px; }
.el-card--post:hover .el-card__title a { color: var(--orange); }
.el-card__more { color: var(--orange); font-weight: 600; }

/* Zonas táctiles de 44 px en el pie */
.el-footer__menu li,
.el-footer__posts li { margin-bottom: 0; }
.el-footer__menu a,
.el-footer__posts a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-block: .35rem;
}
.el-footer__legal a { display: inline-flex; align-items: center; min-height: 44px; }

/* Puntos del carrusel: se ven igual, pero el área que se pulsa es de 28 px */
.el-carrusel__puntos button {
	box-sizing: content-box;
	padding: 9px;
	background-clip: content-box;
}

/* --- Ajustes tras revisar en pantalla (v2.17) --- */
/* El punto activo del carrusel recupera su forma: el shorthand de fondo
   reseteaba el recorte al contenido. */
.el-carrusel__puntos button[aria-current="true"] { background-clip: content-box; }

/* El botón de «No me pagan bien» va justo después de la lista */
.el-ruta > .el-btn { margin-top: 0; }

/* Dos secciones seguidas con el mismo fondo no suman dos márgenes */
.el-section--blanco + .el-section--blanco,
.el-section--shell + .el-section--shell { padding-top: 0; }

/* Con la barra de administración, la cabecera fija baja con ella */
.admin-bar .el-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .el-header { top: 0; } }

/* El pie de la valoración también llega a 14 px */
.el-resumen__pie { font-size: var(--t-small); }

/* Menú móvil con la barra de administración (solo al iniciar sesión) */
@media (max-width: 900px) { .admin-bar .el-nav { top: 92px; } }
@media (max-width: 782px) { .admin-bar .el-nav { top: 106px; } }

/* =============================================================
   34. Cabecera móvil, ficha de servicio (v2.18)
   ============================================================= */

/* El carrito solo aparece cuando tiene algo dentro */
.el-carrito:has(.el-carrito__num--vacio) { display: none; }

/* Móvil: logo a la izquierda y el menú (☰) solo a la derecha, sin recuadro */
@media (max-width: 900px) {
	.el-header__acciones { order: 1; margin-left: auto; }
	.el-burger { order: 2; border: 0; margin-right: -10px; }
}

/* --- Ficha de servicio: sin la imagen con texto; a la derecha, qué pasa
       después de contratar --- */
.single-product div.product > .woocommerce-product-gallery { display: none; }

.woocommerce div.product {
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
}
.woocommerce div.product > .summary { grid-column: 1; grid-row: 1; }
.woocommerce div.product > .el-ficha-pasos {
	grid-column: 2;
	grid-row: 1;
	align-self: start;
	margin-top: 0;
	border-radius: var(--radio);
}
.woocommerce div.product > .el-ficha-pasos ol { grid-template-columns: 1fr; gap: 1.5rem; }
.el-ficha-pasos li { border-radius: var(--radio); }
.el-ficha-pasos__title { font-size: var(--t-h3); }
.el-ficha-pasos li > span:last-child { font-size: 1rem; }

.woocommerce div.product .woocommerce-product-details__short-description {
	margin-top: var(--s-30);
	padding-top: var(--s-30);
	border-top: 1px solid var(--line);
}

@media (max-width: 900px) {
	.woocommerce div.product { grid-template-columns: minmax(0, 1fr); }
	.woocommerce div.product > .summary,
	.woocommerce div.product > .el-ficha-pasos { grid-column: 1; grid-row: auto; }
	.woocommerce div.product .product_title { font-size: 1.875rem; }
	.woocommerce div.product p.price,
	.woocommerce div.product span.price { margin-bottom: var(--s-20) !important; }
}

/* --- Barra fija de compra (solo móvil) --- */
.el-barra-compra { display: none; }

@media (max-width: 900px) {
	.el-barra-compra {
		display: block;
		position: fixed;
		inset-inline: 0;
		bottom: 0;
		z-index: 90;
		background: #fff;
		border-top: 1px solid var(--line);
		box-shadow: 0 -6px 20px rgba(18,41,74,.08);
		padding: .75rem var(--s-30) calc(.75rem + env(safe-area-inset-bottom, 0px));
		transform: translateY(110%);
		visibility: hidden;
		transition: transform .25s ease, visibility 0s linear .25s;
	}
	.el-barra-compra.es-visible {
		transform: none;
		visibility: visible;
		transition: transform .25s ease, visibility 0s linear 0s;
	}
	.el-barra-compra__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
	}
	.el-barra-compra__precio { color: var(--navy); font-weight: 700; font-size: 1.125rem; line-height: 1.2; }
	.el-barra-compra__precio .woocommerce-price-suffix { display: block; font-size: var(--t-small); font-weight: 500; color: var(--muted); }
	.el-barra-compra__btn { flex: none; }
	body.el-barra-visible { padding-bottom: 84px; }
}
@media (prefers-reduced-motion: reduce) {
	.el-barra-compra { transition: none; }
}

/* =============================================================
   35. Portada más corta y directa (v2.19)
   ============================================================= */

/* Héroe: dos botones en la misma fila (revisar mi caso / ver precios). */
.el-hero__botones { display: flex; flex-wrap: wrap; gap: .75rem 1rem; }
.el-hero__sec { white-space: nowrap; }

@media (max-width: 760px) {
	.el-hero__botones { flex-direction: column; }
	.el-hero__botones .el-btn { width: 100%; justify-content: center; }
	.el-hero__micro { text-align: center; }

	/* Muestra del informe más compacta: solo lo que se puede reclamar. */
	.el-muestra__meta,
	.el-muestra__lineas li:has(.es-ok) { display: none; }
}

/* Opiniones: en móvil, fijas y apiladas (sin carrusel). */
@media (max-width: 760px) {
	.el-carrusel__pista {
		display: grid;
		gap: 1rem;
		overflow: visible;
		scroll-snap-type: none;
		padding-bottom: 0;
	}
	.el-carrusel__flecha,
	.el-carrusel__puntos { display: none; }
	.el-opinion {
		min-height: 0;
		padding: 1.25rem 1.25rem 1.4rem;
		border-radius: var(--radio);
	}
	.el-opinion__cab { margin-bottom: .6rem; }
	.el-opinion__avatar { width: 40px; height: 40px; font-size: .875rem; }
	.el-opinion__estrellas { font-size: 1rem; margin-bottom: .6rem; }
	.el-opinion blockquote p { font-size: 1.05rem; line-height: 1.55; }
}

/* Barra de datos del héroe: en móvil 2 × 2 compacta en vez de 4 filas. */
@media (max-width: 640px) {
	.el-credenciales {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.1rem .75rem;
		padding: 1.1rem 1rem;
	}
	.el-credenciales li {
		flex-direction: column;
		align-items: flex-start;
		gap: .5rem;
		padding-block: 0;
		min-width: 0;
	}
	.el-credenciales__icono { width: 40px; height: 40px; }
	.el-credenciales__icono .el-icono { width: 20px; height: 20px; }
	.el-credenciales__texto { overflow-wrap: anywhere; }
	.el-credenciales__texto strong { font-size: 1.1rem; }
	.el-credenciales__texto > span { font-size: .8125rem; }
}

/* =============================================================
   36. Portada móvil más corta (v2.20)
   ============================================================= */

/* Pie plegable: en escritorio el <summary> es un título normal. */
.el-footer__plegable > summary { display: block; list-style: none; }
.el-footer__plegable > summary::-webkit-details-marker { display: none; }
@media (min-width: 761px) {
	.el-footer__plegable > summary { pointer-events: none; }
}

@media (max-width: 760px) {
	.el-footer__grid { gap: 0; }
	.el-footer__plegable > summary {
		position: relative;
		margin: 0;
		padding: 1rem 2rem 1rem 0;
		cursor: pointer;
		font-size: 1.15rem;
	}
	.el-footer__plegable > summary::after {
		content: "";
		position: absolute;
		right: 4px;
		top: 50%;
		width: 9px;
		height: 9px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: translateY(-70%) rotate(45deg);
		transition: transform .2s ease;
	}
	.el-footer__plegable[open] > summary::after { transform: translateY(-30%) rotate(-135deg); }
	.el-footer__plegable[open] > summary { margin-bottom: .5rem; }
	.el-footer__plegable:focus-within > summary:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
	.el-footer__col--articulos { margin-top: var(--s-30); }

	/* Guías y artículos: lista compacta (categoría + título). */
	.el-guias-sec .el-rejilla { gap: .75rem; }
	.el-guias-sec .el-card__media,
	.el-guias-sec .el-card__excerpt,
	.el-guias-sec .el-card__more { display: none; }
	.el-guias-sec .el-card__body { padding: .9rem 2.5rem .95rem 1rem; }
	.el-guias-sec .el-card__body .el-eyebrow { margin-bottom: .3rem; font-size: .75rem; }
	.el-guias-sec .el-card__title { margin: 0; font-size: 1.05rem; line-height: 1.35; }
	.el-guias-sec .el-card::after {
		content: "→";
		position: absolute;
		right: 1rem;
		top: 50%;
		transform: translateY(-50%);
		color: var(--orange);
		font-weight: 600;
	}

	/* Opiniones: resumen en una línea sobre las reseñas. */
	.el-resumen {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: .3rem .6rem;
	}
	.el-resumen__nota { font-size: 1.6rem; }
	.el-resumen__estrellas { margin: 0; font-size: 1rem; }
	.el-resumen__pie { margin: 0; }
	.el-resumen__google { display: none; }
	.el-resumen__enlace { margin-top: 0; }
}

/* =============================================================
   37. Auditoría 7 (v2.21)
   ============================================================= */

/* --- 01. Contenido de las entradas: nada más ancho que la pantalla --- */
.el-prosa { overflow-wrap: break-word; }
.el-prosa a { overflow-wrap: anywhere; }
.el-prosa img,
.el-prosa video { max-width: 100%; height: auto; }
.el-prosa figure,
.el-prosa .wp-caption { max-width: 100%; width: auto !important; }
.el-prosa iframe { max-width: 100%; }
.el-prosa iframe[src*="youtube"],
.el-prosa iframe[src*="vimeo"] { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.el-prosa table { display: block; max-width: 100%; overflow-x: auto; }

/* --- 03. Estilos pegados de la web vieja (Tahoma, 18 px, colores sueltos) --- */
.single-product div.product [style*="font-family"],
.single-product div.product [style*="font-size"],
.single-product div.product font,
.el-prosa [style*="font-family"],
.el-prosa [style*="font-size"],
.el-prosa font {
	font-family: inherit !important;
	font-size: inherit !important;
}
.woocommerce-product-details__short-description [style*="color"],
.woocommerce-Tabs-panel [style*="color"],
.el-prosa [style*="color"] { color: inherit !important; }

/* Relacionados: botón secundario del sistema */
.woocommerce .related ul.products li.product .button,
.woocommerce .upsells ul.products li.product .button {
	min-height: var(--btn-h);
	border: 1px solid var(--navy) !important;
	border-radius: var(--radio-s) !important;
	background: transparent !important;
	color: var(--navy) !important;
}
.woocommerce .related ul.products li.product .button:hover,
.woocommerce .upsells ul.products li.product .button:hover {
	background: var(--navy) !important;
	color: #fff !important;
}

/* --- 04. Fecha y aviso en artículos antiguos --- */
.el-aviso-antiguo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
	margin: 0 0 var(--s-40);
	padding: 1.1rem 1.25rem;
	background: var(--surface);
	border: 1px solid var(--line);
	border-left: 4px solid var(--orange);
	border-radius: var(--radio);
}
.el-aviso-antiguo p { flex: 1 1 22rem; margin: 0; font-size: .9375rem; color: var(--ink); }
.el-aviso-antiguo .el-btn { flex: none; }

/* --- 08. Menú con Maternidad: entre 901 y 1120 px todo en una línea --- */
.el-brand { flex-shrink: 0; }
@media (min-width: 901px) and (max-width: 1120px) {
	.el-header__inner { gap: 16px; }
	.el-nav ul { gap: 12px; }
	.el-header .el-nav a { font-size: 15px; }
	.el-nav .menu-item:first-child { display: none; } /* «Inicio»: ya lo hace el logo */
	.el-header__acciones { gap: 12px; }
	.el-header__cta { padding-inline: 16px; }
}

/* --- 09. Textos legales: índice, títulos y tabla --- */
.el-indice {
	margin: var(--s-30) 0 var(--s-40);
	padding: 1.1rem 1.35rem;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radio);
}
.el-indice__titulo { margin: 0 0 .5rem !important; font-weight: 650; color: var(--navy); }
.el-indice ol { margin: 0; padding-left: 1.3rem; columns: 2; column-gap: 2rem; }
.el-indice li { margin: 0; padding-block: .2rem; break-inside: avoid; font-size: .9375rem; }
@media (max-width: 640px) { .el-indice ol { columns: 1; } }
.el-legal h2 { margin-top: var(--s-50); font-size: var(--t-h3); }
.el-legal h3 { margin-top: var(--s-30); font-size: 1.125rem; }
.el-legal table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.el-legal th,
.el-legal td { padding: .6rem .75rem; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.el-legal th { background: var(--surface); font-weight: 650; color: var(--navy); }

/* --- 11. Blog, categorías y búsqueda en móvil: lista compacta --- */
@media (max-width: 760px) {
	.el-listado { gap: .75rem; }
	.el-listado .el-card__media,
	.el-listado .el-card__more { display: none; }
	.el-listado .el-card__body { padding: .95rem 1rem 1rem; }
	.el-listado .el-card__body .el-eyebrow { margin-bottom: .3rem; font-size: .75rem; }
	.el-listado .el-card__title { margin: 0 0 .35rem; font-size: 1.05rem; line-height: 1.35; }
	.el-listado .el-card__excerpt {
		display: -webkit-box;
		margin: 0;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		font-size: var(--t-small);
		color: var(--muted);
	}
}

/* --- 12. Detalles del sistema --- */
.el-blog-cab__buscar .el-search input[type="search"],
.el-blog-cab__buscar .el-search .el-btn { border-radius: var(--radio-s); }

.woocommerce div.product .price .woocommerce-price-suffix,
.woocommerce ul.products li.product .price .woocommerce-price-suffix,
.el-servicio__precio .woocommerce-price-suffix { font-size: var(--t-small); }

.el-rec-form__caja .gform_wrapper .gform_button,
.el-rec-form__caja .gform_wrapper .gform_next_button,
.el-rec-form__caja .gform_wrapper .gform_previous_button {
	min-height: var(--btn-h);
	border-radius: var(--radio-s);
}
.el-rec-form__caja .gform_wrapper .gf_progressbar_title,
.el-rec-form__caja .gform_wrapper .gfield_required,
.el-rec-form__caja .gform_wrapper .gfield_required_text {
	font-size: var(--t-small) !important;
	color: var(--muted);
}
.el-rec-form__caja .gform_wrapper .gfield_required { color: var(--orange-dk); }

.el-compromiso h2,
.el-compromiso h3 { text-align: left; }
.el-compromiso > p { margin-inline: 0; text-align: left; }

/* Zonas táctiles de 44 px: migas de las fichas y «×» del carrito */
@media (max-width: 760px) {
	.woocommerce .woocommerce-breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; }
}
.woocommerce a.remove { position: relative; }
.woocommerce a.remove::after { content: ""; position: absolute; inset: -11px; }

/* --- 13. Enlace a «Nuestro compromiso» en Despidos y Salarios --- */
.el-rec-hero__compromiso {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: .9375rem;
	font-weight: 600;
	color: var(--navy);
}
.el-rec-hero__compromiso:hover { color: var(--orange-dk); }

/* --- 14. Quiénes somos: alineada con el logo, texto a ancho de lectura --- */
.el-institucional .el-pagehead,
.el-institucional .el-prosa { max-width: 760px; }

/* Índice legal como lista sin viñetas (los títulos ya llevan su número) */
.el-indice ul { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 2rem; }
@media (max-width: 640px) { .el-indice ul { columns: 1; } }
.el-legal h2[id] { scroll-margin-top: 90px; }
.el-legal .el-tabla td:first-child { width: 36%; font-weight: 650; color: var(--navy); }
.el-legal .el-tabla td p { margin: .25rem 0 0; }
.el-legal .el-tabla table { display: table; }
@media (max-width: 560px) {
	.el-legal .el-tabla tr,
	.el-legal .el-tabla td { display: block; width: auto; }
	.el-legal .el-tabla td:first-child { border-bottom: 0; padding-bottom: 0; }
}

/* Bloques de imagen centrados: WordPress los pone en display:table y así
   ignoran el max-width; en bloque, la imagen nunca pasa del ancho del texto. */
.el-prosa figure.wp-block-image,
.el-prosa .wp-block-image figure { display: block; }
.el-prosa .wp-block-image img { max-width: 100% !important; height: auto !important; }
.el-prosa .wp-block-image a { display: inline-block; max-width: 100%; }
.comment-content { overflow-wrap: break-word; }
.comment-content a { overflow-wrap: anywhere; }

/* =============================================================
   38. Segunda pasada de la auditoría 7 (v2.22)
   ============================================================= */

/* --- N1. Formularios de Gravity Forms dentro de las entradas del blog:
       mismo aspecto que en Despidos y Salarios --- */
.el-prosa .gform_wrapper {
	margin: var(--s-40) 0;
	padding: clamp(1.25rem, 3.5vw, 2.25rem);
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radio);
	box-shadow: 0 1px 2px rgba(18,41,74,.05), 0 8px 24px rgba(18,41,74,.06);
	font-family: var(--sans);
}
.el-prosa .gform_wrapper input[type="text"],
.el-prosa .gform_wrapper input[type="email"],
.el-prosa .gform_wrapper input[type="tel"],
.el-prosa .gform_wrapper input[type="number"],
.el-prosa .gform_wrapper select,
.el-prosa .gform_wrapper textarea {
	width: 100%;
	padding: .8rem .95rem;
	font: inherit;
	font-size: 1rem;
	color: var(--ink);
	background: #fff;
	border: 1px solid #D4CEC4;
	border-radius: 10px;
	box-shadow: none;
}
.el-prosa .gform_wrapper input:focus,
.el-prosa .gform_wrapper select:focus,
.el-prosa .gform_wrapper textarea:focus {
	border-color: var(--orange);
	outline: 2px solid rgba(232,92,58,.25);
	outline-offset: 0;
}
.el-prosa .gform_wrapper .gfield_label { font-weight: 650; color: var(--navy); }
.el-prosa .gform_wrapper .gform_button,
.el-prosa .gform_wrapper .gform_next_button,
.el-prosa .gform_wrapper .gform_previous_button {
	min-height: var(--btn-h);
	padding: .95rem 1.8rem;
	border: 0;
	border-radius: var(--radio-s);
	background: var(--orange);
	color: #fff;
	font: inherit;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
}
.el-prosa .gform_wrapper .gform_previous_button { background: var(--shell); color: var(--navy); }
.el-prosa .gform_wrapper .gform_button:hover,
.el-prosa .gform_wrapper .gform_next_button:hover { background: var(--orange-dk); }
.el-prosa .gform_wrapper .gf_progressbar { background: var(--shell); border-radius: 999px; }
.el-prosa .gform_wrapper .gf_progressbar_percentage { background: var(--orange); border-radius: 999px; }
.el-prosa .gform_wrapper .gf_progressbar_title,
.el-prosa .gform_wrapper .gfield_required,
.el-prosa .gform_wrapper .gfield_required_text { font-size: var(--t-small) !important; color: var(--muted); }
.el-prosa .gform_wrapper .gfield_required { color: var(--orange-dk); }
.el-prosa .gform_wrapper ul,
.el-prosa .gform_wrapper li { margin: 0; padding: 0; list-style: none; }

/* Porcentaje de la barra de progreso a 14 px en todos los formularios */
.gform_wrapper .gf_progressbar_percentage,
.gform_wrapper .gf_progressbar_percentage span { font-size: var(--t-small) !important; }

/* --- 08. «¿Qué te ha pasado?» con tres áreas: despido a la izquierda
       (dos opciones) y salarios y conciliación apiladas a la derecha --- */
@media (min-width: 641px) {
	.el-rutas { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
	.el-rutas .el-ruta--doble { grid-row: span 2; align-self: stretch; }
}

/* --- N2.2 Preguntas frecuentes: toda la fila se pulsa (44 px mínimo) --- */
.el-faq details { padding: 0; }
.el-faq summary { min-height: 44px; padding: .9rem 1.2rem; }
.el-faq details p { margin: 0; padding: 0 1.2rem 1rem; }

/* --- N2.3 Textos pequeños a 12-13 px --- */
.el-muestra__badge { font-size: .75rem; letter-spacing: .06em; }
.el-muestra__meta dt { font-size: .75rem; }
@media (max-width: 760px) {
	.el-listado .el-card__body .el-eyebrow,
	.el-guias-sec .el-card__body .el-eyebrow { font-size: .8125rem; letter-spacing: .06em; }
}
.el-muestra__meta dt { letter-spacing: .04em; }
.el-muestra__meta > div { padding-inline: 1.1rem; }
/* Barra de progreso de Gravity Forms con los colores de la marca (su tema la pinta azul) */
.gform_wrapper .gf_progressbar { background: var(--shell) !important; border-radius: 999px !important; }
.gform_wrapper .gf_progressbar_percentage { background: var(--orange) !important; color: #fff !important; border-radius: 999px !important; }

/* =============================================================
   39. «¿Qué te ha pasado?» con color y fondos alternos (v2.23)
   ============================================================= */

/* Cada área con su color suave, como en la versión anterior */
.el-rutas .el-ruta { border: 0; }
.el-rutas .el-ruta--melocoton { background: var(--peach); }
.el-rutas .el-ruta--azul { background: var(--blue-soft); }
.el-rutas .el-ruta--verde { background: #E8F2EC; }
.el-rutas .el-ruta__icono { background: #fff; }
.el-rutas .el-ruta--melocoton .el-ruta__icono { color: var(--orange-dk); }
.el-rutas .el-ruta--azul .el-ruta__icono { color: var(--navy); }
.el-rutas .el-ruta--verde .el-ruta__icono { color: #2F6B4F; }
.el-rutas .el-ruta__opcion { background: #fff; border-color: rgba(200,73,43,.18); }

/* «Me han despedido» arriba a todo el ancho con sus dos opciones lado a
   lado; salarios y conciliación debajo, a la misma altura. Sin huecos. */
@media (min-width: 641px) {
	.el-rutas { align-items: stretch; }
	.el-rutas .el-ruta--doble { grid-row: auto; grid-column: 1 / -1; }
	.el-rutas .el-ruta--doble .el-ruta__opciones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.el-rutas .el-ruta__opcion .el-btn { margin-top: auto; }
}

/* Fondos alternos en la portada: ¿Qué te ha pasado? (blanco) →
   Servicios (crema) → Cómo funciona (blanco) */
.home .el-servicios-sec {
	padding-top: var(--sec-y);
	background: #F1EBE2;
	border-top: 1px solid #E6DED2;
	border-bottom: 1px solid #E6DED2;
}
.home .el-servicios-sec + #como-funciona { background: #fff; }
@media (max-width: 640px) {
	.el-rutas .el-ruta { padding: 1.35rem 1.1rem; }
	.el-rutas .el-ruta__opcion { padding: 1rem; }
}

/* =============================================================
   40. Auditoría final (v2.24)
   ============================================================= */

/* F1. Texto naranja sobre fondos arena/crema: naranja oscuro para cumplir
   AA (4,5 : 1). Los botones no cambian. */
.el-section--shell a:not([class*="el-btn"]):not(.button),
.el-section--cream a:not([class*="el-btn"]):not(.button),
.el-indice a { color: var(--orange-dk); }
.el-section--shell a:not([class*="el-btn"]):not(.button):hover,
.el-section--cream a:not([class*="el-btn"]):not(.button):hover,
.el-indice a:hover { color: var(--navy); }
.el-section--shell .el-eyebrow:not(.el-eyebrow--gris):not(.el-eyebrow--claro),
.el-section--cream .el-eyebrow:not(.el-eyebrow--gris):not(.el-eyebrow--claro) { color: var(--orange-dk); }

/* F2. Cuadrículas de servicios dentro de las entradas: botón secundario */
.el-prosa ul.products li.product .button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-height: var(--btn-h);
	border: 1px solid var(--navy) !important;
	border-radius: var(--radio-s) !important;
	background: transparent !important;
	color: var(--navy) !important;
	font-weight: 600;
	text-decoration: none;
}
.el-prosa ul.products li.product .button:hover { background: var(--navy) !important; color: #fff !important; }

/* Mensaje de gracias de los formularios (Gravity Forms, confirmación) */
.el-gracias { padding: clamp(1rem, 3vw, 2rem) 0; text-align: center; }
.el-gracias__logo { display: block; width: 240px; max-width: 70%; height: auto; margin: 0 auto 1.5rem; }
.el-gracias__titulo { margin: 0 0 .5rem !important; font-family: var(--serif); font-size: clamp(1.5rem, 3vw, 1.9rem); font-weight: 600; line-height: 1.25; color: var(--navy); }
.el-gracias__texto { margin: 0 !important; font-size: 1.0625rem; color: var(--ink); }

/* =============================================================
   41. Carrito sin cantidad y tabla de privacidad en móvil (v2.25)
   ============================================================= */

/* Cada servicio se contrata una vez: sin columna ni selector de cantidad */
.woocommerce table.shop_table th.product-quantity,
.woocommerce table.shop_table td.product-quantity,
.woocommerce-checkout-review-order-table .product-quantity,
.woocommerce div.product form.cart .quantity,
.woocommerce-cart-form button[name="update_cart"] { display: none !important; }

/* Tabla de la política de privacidad en móvil: cada fila como una tarjeta */
@media (max-width: 560px) {
	.el-legal .el-tabla table,
	.el-legal .el-tabla tbody { display: block; width: 100%; }
	.el-legal .el-tabla tr {
		display: block;
		margin-bottom: .75rem;
		border: 1px solid var(--line);
		border-radius: var(--radio-s);
		overflow: hidden;
	}
	.el-legal .el-tabla td {
		display: block;
		width: auto !important;
		border: 0;
		overflow-wrap: normal;
		word-break: normal;
		hyphens: none;
	}
	.el-legal .el-tabla td:first-child {
		padding: .6rem .8rem;
		background: var(--surface);
		border-bottom: 1px solid var(--line);
	}
}


/* 42. Portada · Guías y artículos: tarjetas de la misma altura (1 oct 2026) */
.el-guias-sec .el-card__body { display: flex; flex-direction: column; }
.el-guias-sec .el-card__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	min-height: calc(1.4em * 3);
}
.el-guias-sec .el-card__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}
.el-guias-sec .el-card__more { margin-top: auto; padding-top: var(--s-20); }
@media (max-width: 760px) {
	.el-guias-sec .el-rejilla { grid-auto-rows: 1fr; }
	.el-guias-sec .el-card__body { justify-content: center; }
	.el-guias-sec .el-card__title { min-height: 0; }
	.el-guias-sec .el-card__excerpt { display: none; }
}
