/*
 * EENDA
 * Marketing, Desarrollo & Consulting
 * www.eenda.com
 * © 2026
 */

/*
 * eenda.com — Hoja del front (mobile-first)
 *
 * Estructura:
 *   1. Tokens
 *   2. Puente con Bootstrap
 *   3. Base
 *   4. Accesibilidad
 *   5. Movimiento
 *   6. Titulares de cartel
 *   7. Rótulos de sección
 *   8. Botones y enlaces de acción
 *   9. Icono de flecha
 *  10. Header
 *  11. Menú a pantalla completa (offcanvas)
 *  12. Hero de la home
 *  13. Banda de clientes
 *  14. Introducción
 *  15. Capacidades (índice de servicios)
 *  16. Resultados
 *  17. Proyectos destacados
 *  18. Producto propio
 *  19. Trayectoria
 *  20. Preguntas frecuentes
 *  21. Contacto
 *  22. Pie
 *  23. Distintivo de contenido de muestra
 *  24. Páginas de error
 *  25. Cabecera de página interior
 *  26. Catálogo de servicios
 *  27. Ficha de servicio
 *  28. Portfolio
 *  29. Ficha de proyecto
 *  30. Nosotros
 *  31. Contacto (página)
 *  32. Blog — listado
 *  33. Blog — entrada
 *  34. Documentos legales
 *  35. Vídeo incrustado
 *  36. Dirección postal
 *
 * Los breakpoints viven en responsive.css, siempre con min-width, igual que en
 * la hoja del XPanel®. Lo que hay aquí es la versión móvil.
 *
 * Regla de la casa: antes de escribir una clase hay que comprobar que Bootstrap
 * 5.3.8 no la resuelve ya. Este archivo es identidad (tipografía, color,
 * hairlines, ritmo) y comportamiento propio; el grid, el espaciado, el
 * offcanvas y las utilidades los pone Bootstrap.
 *
 * DIRECCIÓN VISUAL (septiembre de 2026)
 * --------------------------------------------------------------------------
 * Titulares en mayúsculas condensadas (Archivo Condensed) que entran en
 * contorno y se rellenan de izquierda a derecha; cantos vivos en todo; botones
 * con un barrido de relleno; franjas que alternan claro, oscuro abisal y un
 * único bloque en el azul de marca. Nada lleva sombra ni radio: la separación
 * la hacen el fondo, el filete de 1px y el espacio.
 *
 * La marca del producto XPanel® vive en css/xpanel/style.css y no se mezcla con
 * esta: son dos superficies distintas con dos identidades distintas.
 */


/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root{
	/* Marca. El azul sale del propio logotipo (static/media/images/logo.png),
	   muestreado del isotipo: no es una elección nueva de paleta. */
	--ee-brand: #0066cc;
	--ee-brand-rgb: 0, 102, 204;
	--ee-brand-dark: #0052a3;
	/* Aclarado del azul de marca, para numeración y detalles sobre fondo
	   oscuro: el #0066cc sobre abisal no llega a contraste legible. */
	--ee-brand-light: #7ab7ff;

	/* Tinta. Negro ligeramente frío en lugar de #000: sobre blanco, el negro
	   puro vibra y abarata el conjunto. */
	--ee-ink: #0b0f14;
	--ee-ink-rgb: 11, 15, 20;
	--ee-ink-muted: #5a6572;

	/* Superficies */
	--ee-surface: #ffffff;
	/* El azul más profundo de la fotografía del hero. Es el fondo de todas las
	   franjas oscuras: así la fotografía y los bloques son el mismo mar. */
	--ee-abyss: #040e1a;
	--ee-abyss-rgb: 4, 14, 26;
	/* Veladura fría para separar franjas claras consecutivas. */
	--ee-tint: #f4f6f9;

	/* Texto secundario sobre abisal. */
	--ee-on-dark-muted: #98a6b7;

	/* Hairlines. Toda la separación del sitio es de 1px: ni sombras ni cajas. */
	--ee-hairline: rgba(11, 15, 20, .12);
	--ee-hairline-soft: rgba(11, 15, 20, .07);
	--ee-hairline-dark: rgba(255, 255, 255, .14);

	/* Métricas del header. Una sola altura: el header no encoge al hacer
	   scroll, solo cambia de fondo. */
	--ee-header-h: 4.5rem;

	/* Margen lateral de las piezas que van a sangre (el panel del hero). El
	   resto usa el .container de Bootstrap; en móvil los dos miden 1rem para
	   que el texto del hero y el de las franjas arranquen en la misma línea. */
	--ee-gutter: 1rem;

	/* Tipografía */
	--ee-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--ee-font-display: "Archivo Condensed", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
	--ee-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	/* Movimiento. --ee-ease para lo que responde al gesto; --ee-wipe para los
	   barridos (rellenos de titular, botones, cortinillas): arranca y frena
	   en seco, que es lo que hace que un barrido parezca un corte y no una
	   transición blanda. */
	--ee-ease: cubic-bezier(.22, .61, .36, 1);
	--ee-wipe: cubic-bezier(.858, .01, .068, .99);
	--ee-speed: .32s;
}


/* ==========================================================================
   2. Puente con Bootstrap
   --------------------------------------------------------------------------
   Reasignamos las variables de Bootstrap en lugar de reescribir sus reglas.
   ========================================================================== */

:root{
	--bs-body-font-family: var(--ee-font-sans);
	--bs-body-color: var(--ee-ink);
	--bs-body-color-rgb: var(--ee-ink-rgb);
	--bs-body-bg: var(--ee-surface);
	--bs-emphasis-color: var(--ee-ink);
	--bs-secondary-color: var(--ee-ink-muted);
	--bs-border-color: var(--ee-hairline);

	--bs-primary: var(--ee-brand);
	--bs-primary-rgb: var(--ee-brand-rgb);
	--bs-link-color: var(--ee-brand);
	--bs-link-color-rgb: var(--ee-brand-rgb);
	--bs-link-hover-color: var(--ee-brand-dark);

	--bs-focus-ring-color: rgba(var(--ee-brand-rgb), .35);
}


/* ==========================================================================
   3. Base
   ========================================================================== */

/*
 * Margen de los contenedores. Bootstrap deja .75rem por lado en móvil; se sube
 * a 1rem con su propia variable, sin tocar su regla. Las .row de dentro no se
 * ven afectadas: declaran su propio --bs-gutter-x.
 */
.container,
.container-fluid{
	--bs-gutter-x: 2rem;
}

body{
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* Inter necesita las alternativas contextuales desactivadas para que los
	   micro-textos en versales y los números no se descuadren. */
	font-feature-settings: "calt" 0;
	letter-spacing: -.011em;
	/* Red de seguridad, no solución: si algo se sale del ancho, que no
	   aparezca una barra de scroll lateral en móvil. Los desbordes se
	   corrigen en su sitio; esto solo evita que uno nuevo rompa la página. */
	overflow-x: clip;
}

/*
 * Filetes dentro de una columna de Bootstrap.
 *
 * Un border-top en un .col se dibuja sobre toda la caja de la columna, gutter
 * incluido, y sobresale media medianera por cada lado respecto al texto. Estas
 * piezas dibujan el filete como un fondo recortado al ancho del contenido:
 * el filete empieza y acaba exactamente donde el texto.
 *
 * Lo mismo vale para una .row con filete (.manifiesto__pruebas): sus
 * márgenes negativos lo sacarían por los lados.
 *
 * Cada componente elige grosor y color con --col-rule y --col-rule-w.
 */
.trayectoria__item,
.valores__item,
.servicio__bloque,
.manifiesto__pruebas,
.resultados__item + .resultados__item,
.intro__proof-item + .intro__proof-item{
	--col-rule: var(--ee-hairline);
	--col-rule-w: 1px;
	background: linear-gradient(var(--col-rule), var(--col-rule)) no-repeat center top / calc(100% - var(--bs-gutter-x)) var(--col-rule-w);
}

/*
 * Un teléfono no se parte entre dos líneas: «911 64» arriba y «40 32»
 * abajo no se lee como un número.
 */
a[href^="tel:"]{
	white-space: nowrap;
}

/*
 * Marca registrada volada. El ® al mismo cuerpo que el texto lo ensucia; a
 * .55em y levantado queda como un signo, no como una letra más.
 */
.tm{
	font-size: .55em;
	top: -.5em;
	margin-left: .05em;
	font-weight: 500;
	letter-spacing: 0;
}


/* ==========================================================================
   4. Accesibilidad
   ========================================================================== */

/*
 * Salto al contenido. Bootstrap aporta .visually-hidden-focusable, que lo
 * revela al recibir foco pero lo deja en el flujo y empuja el header. Solo hay
 * que sacarlo del flujo mientras está enfocado.
 */
.skip-link:focus{
	position: fixed;
	top: .75rem;
	left: .75rem;
	z-index: 1080;
	width: auto;
	height: auto;
	padding: .625rem 1rem;
	background: var(--ee-ink);
	color: #fff;
	text-decoration: none;
}

/*
 * Foco visible: REGLA BASE PARA TODO EL SITIO. Las secciones oscuras solo
 * cambian el color con --ee-focus, no vuelven a declarar la geometría.
 */
:focus-visible{
	outline: 2px solid var(--ee-focus, var(--ee-brand));
	outline-offset: 3px;
}

.site-header,
.site-menu,
.hero,
.pagehead,
.resultados,
.productos,
.contacto,
.site-footer,
.error,
.valores{
	--ee-focus: #fff;
}


/* ==========================================================================
   5. Movimiento
   --------------------------------------------------------------------------
   Todo cuelga de .js-motion en <html>, que pone el script inline de head.tpl
   SOLO si el visitante no ha pedido movimiento reducido. Consecuencia: sin
   JavaScript, o con movimiento reducido, nada se oculta nunca.
   ========================================================================== */

.js-motion [data-reveal]{
	opacity: 0;
	transform: translateY(1.5rem);
	transition:
		opacity .8s var(--ee-ease),
		transform .8s var(--ee-ease);
}

.js-motion [data-reveal].is-visible{
	opacity: 1;
	transform: none;
}

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


/* ==========================================================================
   6. Titulares de cartel
   --------------------------------------------------------------------------
   .display-title es el titular de TODAS las franjas y cabeceras: mayúsculas
   condensadas, interlineado cerrado y equilibrado de líneas. El tamaño lo pone
   cada componente; aquí solo va la voz.

   El relleno
   ----------
   El texto va dentro de un <span class="fill"> en línea. Con movimiento, el
   titular aparece en contorno de 1px y un relleno lo recorre de izquierda a
   derecha. Como el span es EN LÍNEA, su fondo es una sola tira que cruza
   todas las líneas del titular: el relleno termina la primera línea antes de
   empezar la segunda, sin tener que partir el texto a mano.

   El color va en --title-color y no en color, porque el relleno necesita
   ese color en tres propiedades a la vez (contorno, fondo y, sin movimiento,
   el propio texto) mientras color queda transparente.
   ========================================================================== */

.display-title{
	--title-color: var(--ee-ink);
	margin: 0;
	font-family: var(--ee-font-display);
	font-weight: 800;
	line-height: .95;
	letter-spacing: 0;
	text-transform: uppercase;
	text-wrap: balance;
	color: var(--title-color);
	/* Último recurso: una palabra que no quepa sola en su línea se parte
	   antes que salirse de su columna. Con los cuerpos de esta hoja no debería
	   ocurrir nunca; si ocurre, se ve y se corrige el cuerpo. */
	overflow-wrap: break-word;
}

.js-motion [data-reveal] .fill,
.js-motion .hero__slide .fill{
	color: transparent;
	-webkit-text-stroke: 1px var(--title-color);
	background-image: linear-gradient(var(--title-color), var(--title-color));
	background-repeat: no-repeat;
	background-size: 0% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	transition: background-size 1.4s var(--ee-wipe) .2s;
}

.js-motion [data-reveal].is-visible .fill,
.js-motion .hero__slide.is-shown .fill{
	background-size: 100% 100%;
}


/* ==========================================================================
   7. Rótulos de sección
   --------------------------------------------------------------------------
   Monoespaciada, versales, numerada y cerrada con un filete corto: la web se
   lee como un documento con apartados, no como una pila de bloques.
   ========================================================================== */

.section-label,
.eyebrow{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem .875rem;
	margin: 0 0 1.75rem;
	font-family: var(--ee-font-mono);
	font-size: .6875rem;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ee-ink-muted);
}

.section-label::after,
.eyebrow::after{
	content: "";
	width: 2.5rem;
	height: 1px;
	background: currentColor;
	opacity: .45;
}

.section-number{
	font-family: var(--ee-font-mono);
	font-size: .6875rem;
	font-weight: 500;
	letter-spacing: .1em;
	color: var(--ee-brand);
}

/* Sobre oscuro, el número pasa al azul aclarado. */
.hero .section-number,
.pagehead .section-number,
.resultados .section-number,
.contacto .section-number,
.valores .section-number,
.error .section-number{
	color: var(--ee-brand-light);
}

.productos .section-number{
	color: #fff;
}


/* ==========================================================================
   8. Botones y enlaces de acción
   --------------------------------------------------------------------------
   Tres piezas, todas con el mismo gesto: un relleno que barre de izquierda a
   derecha y deja el texto en negativo.

     .btn-brand  → acción principal, azul de marca;
     .btn-ghost  → secundaria sobre oscuro, contorno blanco;
     .link-arrow → secundaria sobre claro, contorno en tinta.

   .btn-brand y .btn-ghost se construyen con las variables de .btn de
   Bootstrap; .link-arrow es un enlace, no un botón, y no lleva .btn.
   ========================================================================== */

.btn-brand,
.btn-ghost,
.link-arrow{
	--bs-btn-padding-x: 1.5rem;
	--bs-btn-padding-y: 1rem;
	--bs-btn-font-size: .75rem;
	--bs-btn-font-weight: 600;
	--bs-btn-line-height: 1;
	--bs-btn-border-radius: 0;

	position: relative;
	z-index: 0;
	display: inline-flex;
	align-items: center;
	gap: .75rem;
	overflow: hidden;
	letter-spacing: .16em;
	text-transform: uppercase;
	transition: color .45s var(--ee-wipe), border-color .45s var(--ee-wipe);
}

/* El relleno. Va detrás del texto y dentro del recorte del botón. */
.btn-brand::before,
.btn-ghost::before,
.link-arrow::before{
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	transform: translateX(-101%);
	transition: transform .45s var(--ee-wipe);
}

.btn-brand:hover::before,
.btn-brand:focus-visible::before,
.btn-ghost:hover::before,
.btn-ghost:focus-visible::before,
.link-arrow:hover::before,
.link-arrow:focus-visible::before{
	transform: none;
}

/*
 * Principal. El relleno es blanco con texto en tinta: sobre abisal se lee
 * como un botón que se enciende, y sobre blanco el filete azul sigue
 * marcando el contorno.
 */
.btn-brand{
	--bs-btn-color: #fff;
	--bs-btn-bg: var(--ee-brand);
	--bs-btn-border-color: var(--ee-brand);
	--bs-btn-hover-color: var(--ee-ink);
	--bs-btn-hover-bg: var(--ee-brand);
	--bs-btn-hover-border-color: var(--ee-brand);
	--bs-btn-active-color: var(--ee-ink);
	--bs-btn-active-bg: #fff;
	--bs-btn-active-border-color: var(--ee-brand);
	--bs-btn-focus-shadow-rgb: var(--ee-brand-rgb);
}

.btn-brand::before{
	background: #fff;
}

.btn-ghost{
	--bs-btn-color: #fff;
	--bs-btn-bg: transparent;
	--bs-btn-border-color: rgba(255, 255, 255, .45);
	--bs-btn-hover-color: var(--ee-ink);
	--bs-btn-hover-bg: transparent;
	--bs-btn-hover-border-color: #fff;
	--bs-btn-active-color: var(--ee-ink);
	--bs-btn-active-bg: #fff;
	--bs-btn-active-border-color: #fff;
}

.btn-ghost::before{
	background: #fff;
}

/*
 * Enlace de acción. Mismo contorno y mismo barrido que los botones, en tinta.
 * Las franjas oscuras solo cambian --link-color y --link-on.
 */
.link-arrow{
	--link-color: var(--ee-ink);
	--link-on: #fff;
	padding: 1rem 1.5rem;
	font-size: .75rem;
	font-weight: 600;
	line-height: 1;
	color: var(--link-color);
	text-decoration: none;
	border: 1px solid var(--link-color);
}

.link-arrow::before{
	background: var(--link-color);
}

.link-arrow:hover,
.link-arrow:focus-visible{
	color: var(--link-on);
}

.error .link-arrow,
.valores .link-arrow{
	--link-color: #fff;
	--link-on: var(--ee-ink);
}

@media (prefers-reduced-motion: reduce){
	.btn-brand::before,
	.btn-ghost::before,
	.link-arrow::before{
		transition: none;
	}
}


/* ==========================================================================
   9. Icono de flecha
   --------------------------------------------------------------------------
   Dos flechas idénticas dentro de una caja recortada. Al pasar por encima, la
   visible sale por la derecha mientras la otra entra por la izquierda: el
   gesto se lee como un avance continuo.

   Lo emite eenda_flecha() en require/funciones/custom.php.
   ========================================================================== */

.icono-flecha{
	display: block;
	flex: none;
	width: 1em;
	height: 1em;
	overflow: hidden;
}

.btn .icono-flecha,
.link-arrow .icono-flecha{
	width: 1.125rem;
	height: 1.125rem;
}

.icono-flecha__pista{
	display: flex;
	width: 200%;
	height: 100%;
	/* Arranca desplazada media pista: se ve la SEGUNDA flecha, y la primera
	   queda esperando a la izquierda para entrar. */
	transform: translateX(-50%);
	transition: transform .45s var(--ee-ease);
}

.icono-flecha svg{
	flex: none;
	width: 50%;
	height: 100%;
}

/* El disparador es el elemento que la contiene, no la flecha. */
.btn:hover .icono-flecha__pista,
.btn:focus-visible .icono-flecha__pista,
.link-arrow:hover .icono-flecha__pista,
.link-arrow:focus-visible .icono-flecha__pista,
.servicios__link:hover .icono-flecha__pista,
.servicios__link:focus-visible .icono-flecha__pista,
.producto:hover .icono-flecha__pista,
.producto:focus-visible .icono-flecha__pista,
.canal:hover .icono-flecha__pista,
.canal:focus-visible .icono-flecha__pista,
.red:hover .icono-flecha__pista,
.red:focus-visible .icono-flecha__pista,
.entrada:hover .icono-flecha__pista,
.entrada:focus-visible .icono-flecha__pista{
	transform: translateX(0);
}


/* ==========================================================================
   10. Header
   ========================================================================== */

/*
 * Centinela de 1px al principio del documento. Lo observa scripts.js: mientras
 * se ve, el header está en reposo. Evita un listener de scroll por frame.
 */
.site-header-sentinel{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 1px;
	pointer-events: none;
}

.site-header{
	position: sticky;
	top: 0;
	z-index: 1030;
	background: var(--ee-abyss);
	border-bottom: 1px solid var(--ee-hairline-dark);
	transition:
		background-color var(--ee-speed) var(--ee-ease),
		border-color var(--ee-speed) var(--ee-ease);
}

/*
 * Variante superpuesta: el header flota transparente sobre la cabecera oscura
 * de la página. La decide require/renders/front/layout/header.php.
 */
.site-header--overlay{
	position: fixed;
	right: 0;
	left: 0;
	background: transparent;
	border-bottom-color: transparent;
}

/*
 * Al despegarse, fondo abisal casi opaco con desenfoque. Sigue siendo oscuro:
 * el logotipo y el botón no cambian de color en mitad del scroll.
 */
.site-header.is-stuck{
	background: rgba(var(--ee-abyss-rgb), .94);
	border-bottom-color: var(--ee-hairline-dark);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
	.site-header.is-stuck{
		background: rgba(var(--ee-abyss-rgb), .84);
		-webkit-backdrop-filter: saturate(160%) blur(12px);
		backdrop-filter: saturate(160%) blur(12px);
	}
}

.site-bar{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	height: var(--ee-header-h);
}

.site-brand{
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.site-brand__logo{
	display: block;
	width: auto;
	height: 1.5rem;
}

/* Sobre oscuro solo se ve el negativo del logotipo. El positivo se queda en
   el marcado como imagen con alt para quien lea sin estilos. */
.site-brand__logo--light{ display: none; }

.site-bar__actions{
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.site-bar__link{
	position: relative;
	display: none;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
}

.site-bar__link::after{
	content: "";
	position: absolute;
	right: 0;
	bottom: -.375rem;
	left: 0;
	height: 1px;
	background: var(--ee-brand-light);
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform .4s var(--ee-wipe);
}

.site-bar__link:hover,
.site-bar__link:focus-visible{
	color: #fff;
}

.site-bar__link:hover::after,
.site-bar__link:focus-visible::after,
.site-bar__link.is-active::after{
	transform: scaleX(1);
	transform-origin: left center;
}

/*
 * Disparador del menú. Dos filetes en lugar de un icono: el segundo, más
 * corto, se alarga al pasar por encima.
 */
.site-toggle,
.site-menu__close{
	display: inline-flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	gap: .375rem;
	width: 3rem;
	height: 3rem;
	padding: 0 .875rem;
	border: 1px solid var(--ee-hairline-dark);
	background: none;
	color: #fff;
	transition: border-color var(--ee-speed) var(--ee-ease);
}

.site-toggle:hover,
.site-menu__close:hover{
	border-color: rgba(255, 255, 255, .5);
}

.site-toggle span{
	display: block;
	width: 100%;
	height: 1.5px;
	background: currentColor;
	transition: width .4s var(--ee-wipe);
}

.site-toggle span:last-child{ width: 60%; }
.site-toggle:hover span:last-child{ width: 100%; }


/* ==========================================================================
   11. Menú a pantalla completa (offcanvas)
   --------------------------------------------------------------------------
   Offcanvas nativo de Bootstrap, estirado a toda la pantalla. Entra con una
   cortinilla desde arriba (clip-path) en lugar del desplazamiento por
   defecto, y el índice sube escalonado.
   ========================================================================== */

.site-menu.offcanvas-top{
	--bs-offcanvas-height: 100%;
	--bs-offcanvas-bg: var(--ee-abyss);
	--bs-offcanvas-color: #fff;
	--bs-offcanvas-border-width: 0;
	--bs-offcanvas-transition: clip-path .7s var(--ee-wipe);
	height: 100%;
	/* La barra de iOS no tapa el contenido del menú. */
	height: 100dvh;
	overflow-y: auto;
	transform: none;
	clip-path: inset(0 0 100% 0);
}

.site-menu.offcanvas-top.showing,
.site-menu.offcanvas-top.show:not(.hiding){
	transform: none;
	clip-path: inset(0 0 0 0);
}

.site-menu.offcanvas-top.hiding{
	transform: none;
	clip-path: inset(0 0 100% 0);
}

.site-menu__head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--ee-header-h);
}

.site-menu__close{
	position: relative;
}

.site-menu__close span{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1.25rem;
	height: 1.5px;
	background: currentColor;
}

.site-menu__close span:first-child{ transform: translate(-50%, -50%) rotate(45deg); }
.site-menu__close span:last-child{ transform: translate(-50%, -50%) rotate(-45deg); }

.site-menu__body{
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 3rem;
	align-content: center;
	min-height: calc(100% - var(--ee-header-h));
	padding-top: 3rem;
	padding-bottom: 3rem;
	overflow: hidden;
}

.site-nav{
	margin: 0;
	padding: 0;
}

.site-nav__item{
	transform: translateY(1.5rem);
	opacity: 0;
	transition:
		transform .7s var(--ee-wipe),
		opacity .7s var(--ee-ease);
}

.site-menu.show .site-nav__item,
.site-menu.showing .site-nav__item{
	transform: none;
	opacity: 1;
}

.site-menu.show .site-nav__item:nth-child(2){ transition-delay: .05s; }
.site-menu.show .site-nav__item:nth-child(3){ transition-delay: .10s; }
.site-menu.show .site-nav__item:nth-child(4){ transition-delay: .15s; }
.site-menu.show .site-nav__item:nth-child(5){ transition-delay: .20s; }

.site-nav__link{
	display: flex;
	align-items: baseline;
	gap: 1rem;
	padding: .25rem 0;
	color: #fff;
	text-decoration: none;
}

.site-nav__index{
	flex: none;
	width: 2rem;
	font-family: var(--ee-font-mono);
	font-size: .75rem;
	color: var(--ee-brand-light);
}

.site-nav__label{
	font-family: var(--ee-font-display);
	font-size: clamp(2.75rem, 13vw, 4rem);
	font-weight: 800;
	line-height: 1;
	text-transform: uppercase;
	transition:
		transform .5s var(--ee-wipe),
		color var(--ee-speed) var(--ee-ease);
}

/*
 * Hover en el azul corporativo. Sobre abisal, #0066cc da un contraste de
 * 3,5:1: no llega al 4,5:1 del texto normal —por eso los números pequeños
 * del menú siguen en el azul aclarado—, pero a este cuerpo (texto grande,
 * más de 2,75rem en negrita) WCAG AA pide 3:1 y lo cumple.
 */
.site-nav__link:hover .site-nav__label,
.site-nav__link:focus-visible .site-nav__label{
	transform: translateX(.875rem);
	color: var(--ee-brand);
}

/* Sección actual: en contorno, como un titular a medio rellenar. */
.site-nav__link.is-active .site-nav__label{
	color: transparent;
	-webkit-text-stroke: 1px #fff;
}

.site-nav__link.is-active:hover .site-nav__label{
	color: var(--ee-brand);
	-webkit-text-stroke-color: var(--ee-brand);
}

.site-menu__aside{
	position: relative;
	display: grid;
	gap: 1.5rem;
	align-content: end;
	padding-top: 2rem;
	border-top: 1px solid var(--ee-hairline-dark);
}

.site-menu__via{
	margin: 0;
}

.site-menu__via span{
	display: block;
	margin-bottom: .375rem;
	font-family: var(--ee-font-mono);
	font-size: .6875rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ee-on-dark-muted);
}

.site-menu__via a{
	font-size: 1.125rem;
	font-weight: 500;
	color: #fff;
	text-decoration: none;
}

.site-menu__via a:hover,
.site-menu__via a:focus-visible{
	color: var(--ee-brand-light);
}

.site-menu__descriptor{
	margin: 0;
	font-family: var(--ee-font-mono);
	font-size: .6875rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ee-on-dark-muted);
}

/* Marca de agua: el isotipo de EENDA en grande y muy tenue. */
.site-menu__watermark{
	position: absolute;
	right: -2rem;
	bottom: -1rem;
	z-index: -1;
	width: 14rem;
	color: var(--ee-brand);
	/* Tan tenue que el texto de contacto que tiene encima se lee entero. */
	opacity: .07;
	pointer-events: none;
}

.offcanvas-backdrop.show{
	opacity: 0;
}


/* ==========================================================================
   12. Hero de la home — versión móvil
   --------------------------------------------------------------------------
   Las diapositivas comparten la misma celda de la rejilla: el hero mide lo
   que la más alta y nada depende de alturas fijas.

   En móvil la fotografía pasa a fondo tenue de la diapositiva y el panel se
   vuelve transparente: no hay anchura para partir la pantalla en dos. A
   partir de lg (responsive.css) la diapositiva se parte: foto a un lado,
   panel al otro.
   ========================================================================== */

.hero{
	position: relative;
	display: grid;
	color: #fff;
	background: var(--ee-abyss);
	overflow: hidden;
	isolation: isolate;
}

.hero__slide{
	position: relative;
	grid-area: 1 / 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	/* svh y no vh: en móvil, vh cuenta con la barra del navegador retraída y
	   el hero se sale por abajo justo al cargar. */
	min-height: 100svh;
	visibility: hidden;
}

.hero__slide.is-active{
	z-index: 2;
	visibility: visible;
}

/* La saliente sigue visible debajo mientras la entrante se descubre. */
.hero__slide.is-leaving{
	z-index: 1;
	visibility: visible;
}

.hero__slide--marca{
	background: var(--ee-brand);
}

/* --- Fotografía ----------------------------------------------------------- */

.hero__media{
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	opacity: .38;
}

.hero__slide--marca .hero__media{
	opacity: .2;
}

.hero__media picture,
.hero__media img{
	display: block;
	width: 100%;
	height: 100%;
}

.hero__media img{
	object-fit: cover;
	object-position: center;
}

/*
 * Acercamiento muy lento mientras la diapositiva está a la vista. Termina y
 * se queda quieto: no es un bucle.
 */
.js-motion .hero__media img{
	transform: scale(1.12);
	transition: transform 7s linear;
}

.js-motion .hero__slide.is-shown .hero__media img{
	transform: scale(1.02);
}

.hero__pie{
	display: none;
}

/* --- Panel ---------------------------------------------------------------- */

.hero__body{
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	/* Abajo se reserva el sitio de los controles, que van superpuestos. */
	padding: calc(var(--ee-header-h) + 2.5rem) var(--ee-gutter) 8rem;
}

.hero .eyebrow{
	margin-bottom: 1.5rem;
	color: rgba(255, 255, 255, .78);
}

.hero__title{
	--title-color: #fff;
	margin: 0;
	font-family: var(--ee-font-display);
	font-size: clamp(2.75rem, 12vw, 5rem);
	font-weight: 800;
	line-height: .95;
	text-transform: uppercase;
}

.hero__line{
	display: block;
}

/* Palabra de acento: el mismo relleno, en azul aclarado. */
.hero__title em{
	--title-color: var(--ee-brand-light);
	font-style: normal;
	color: var(--ee-brand-light);
}

.js-motion .hero__slide .hero__title em{
	color: transparent;
	-webkit-text-stroke-color: var(--ee-brand-light);
}

.js-motion .hero__slide.is-shown .hero__title em{
	color: var(--ee-brand-light);
	transition: color .4s var(--ee-ease) 1.2s;
}

.hero__slide--marca .hero__title em{
	--title-color: var(--ee-abyss);
	color: var(--ee-abyss);
}

.js-motion .hero__slide--marca .hero__title em{
	-webkit-text-stroke-color: var(--ee-abyss);
}

.js-motion .hero__slide--marca.is-shown .hero__title em{
	color: var(--ee-abyss);
}

/*
 * Índice numerado bajo el titular. Monoespaciado: se lee como dato.
 */
.hero__index{
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.25rem;
	margin: 1.75rem 0 0;
	padding: 0;
	list-style: none;
	font-size: .875rem;
	font-weight: 500;
	line-height: 1.4;
	color: rgba(255, 255, 255, .78);
}

.hero__index li{
	display: flex;
	align-items: baseline;
	gap: .4375rem;
}

.hero__index li span{
	font-family: var(--ee-font-mono);
	font-size: .625rem;
	color: var(--ee-brand-light);
}

.hero__slide--marca .hero__index,
.hero__slide--marca .hero .eyebrow{
	color: rgba(255, 255, 255, .9);
}

.hero__slide--marca .hero__index li span,
.hero__slide--marca .section-number{
	color: #fff;
}

.hero__text{
	max-width: 30rem;
	margin: 1.75rem 0 0;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, .78);
}

.hero__actions{
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-top: 2.25rem;
}

/* En la diapositiva azul, el principal se invierte: blanco sobre azul. */
.hero__slide--marca .btn-brand{
	--bs-btn-color: var(--ee-ink);
	--bs-btn-bg: #fff;
	--bs-btn-border-color: #fff;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #fff;
	--bs-btn-hover-border-color: #fff;
}

.hero__slide--marca .btn-brand::before{
	background: var(--ee-abyss);
}

/*
 * Entrada escalonada del contenido secundario. Solo con movimiento: sin él,
 * todo está en su sitio desde el principio.
 */
.js-motion .hero__slide .hero__rise{
	opacity: 0;
	transform: translateY(1.125rem);
	transition:
		opacity .8s var(--ee-ease),
		transform .8s var(--ee-ease);
}

.js-motion .hero__slide.is-shown .hero__rise{
	opacity: 1;
	transform: none;
	transition-delay: 1s;
}

.js-motion .hero__slide.is-shown .eyebrow.hero__rise{
	transition-delay: .3s;
}

/* --- Controles ------------------------------------------------------------ */

.hero__controls{
	position: absolute;
	right: var(--ee-gutter);
	bottom: 1.5rem;
	left: var(--ee-gutter);
	z-index: 5;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
}

.hero__controls[hidden]{
	display: none;
}

.hero__arrows{
	display: flex;
	gap: .5rem;
}

.hero__arrow{
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	color: #fff;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .35);
	transition:
		background-color var(--ee-speed) var(--ee-ease),
		border-color var(--ee-speed) var(--ee-ease),
		color var(--ee-speed) var(--ee-ease);
}

.hero__arrow svg{
	width: 1.125rem;
	height: 1.125rem;
}

.hero__arrow:hover,
.hero__arrow:focus-visible{
	color: var(--ee-ink);
	background: #fff;
	border-color: #fff;
}

.hero__pager{
	display: flex;
	gap: 1rem;
}

.hero__dot{
	display: grid;
	gap: .625rem;
	width: 2.75rem;
	padding: .5rem 0 0;
	font-family: var(--ee-font-mono);
	font-size: .75rem;
	letter-spacing: .08em;
	line-height: 1;
	text-align: left;
	color: rgba(255, 255, 255, .55);
	background: none;
	border: 0;
}

.hero__dot[aria-current="true"]{
	color: #fff;
}

.hero__dot-bar{
	position: relative;
	display: block;
	height: 1px;
	overflow: hidden;
	background: rgba(255, 255, 255, .28);
}

.hero__dot-bar::after{
	content: "";
	position: absolute;
	inset: 0;
	background: #fff;
	transform: scaleX(0);
	transform-origin: left center;
}

/*
 * La barra de la diapositiva actual se llena durante el intervalo del pase
 * automático. La duración la pone scripts.js en --hero-intervalo.
 */
.hero__dot[aria-current="true"] .hero__dot-bar::after{
	animation: hero-progreso var(--hero-intervalo, 7s) linear forwards;
}

.hero.is-paused .hero__dot[aria-current="true"] .hero__dot-bar::after{
	animation-play-state: paused;
}

/* Sin pase automático (movimiento reducido), la barra marca la actual. */
.hero.is-static .hero__dot[aria-current="true"] .hero__dot-bar::after{
	animation: none;
	transform: none;
}

@keyframes hero-progreso{
	to{ transform: scaleX(1); }
}

/* Marca de scroll. Solo en escritorio (responsive.css). */
.hero__scroll{
	display: none;
}


/* ==========================================================================
   13. Banda de clientes
   ========================================================================== */

.clientes{
	padding: 3rem 0;
	background: var(--ee-surface);
	border-bottom: 1px solid var(--ee-hairline);
	scroll-margin-top: var(--ee-header-h);
}

.clientes__label{
	margin: 0 0 2rem;
	font-family: var(--ee-font-mono);
	font-size: .6875rem;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ee-ink-muted);
}

.clientes__grid{
	margin-top: 0;
	margin-bottom: 0;
	--bs-gutter-y: 1.75rem;
	align-items: center;
}

/*
 * Logotipos en gris que recuperan color al pasar por encima. En gris los seis
 * se leen como un conjunto; a todo color competirían entre sí y con la página.
 */
.clientes__item img{
	display: block;
	width: 100%;
	max-width: 8.5rem;
	margin-inline: auto;
	/* La proporción se fija aquí y no en el marcado: los logotipos los sube
	   el administrador y entre marcas la proporción cambia. Con contain se
	   ajustan al hueco sin deformarse, y el hueco queda reservado. */
	aspect-ratio: 350 / 120;
	height: auto;
	object-fit: contain;
	filter: grayscale(1);
	opacity: .55;
	/* Los archivos traen fondo blanco incrustado: multiply lo hace
	   desaparecer contra un fondo claro. */
	mix-blend-mode: multiply;
	transition:
		filter var(--ee-speed) var(--ee-ease),
		opacity var(--ee-speed) var(--ee-ease);
}

.clientes__item:hover img{
	filter: grayscale(0);
	opacity: 1;
}


/* ==========================================================================
   14. Introducción
   ========================================================================== */

.intro{
	padding: 5rem 0;
	/* El header es fijo: sin esto, saltar al ancla #siguiente deja el
	   principio de la sección debajo de la barra. */
	scroll-margin-top: var(--ee-header-h);
}

.intro__title{
	font-size: clamp(2.75rem, 12vw, 4.5rem);
}

.intro__aside{
	margin-top: 2.5rem;
}

.intro__text{
	margin: 0 0 1.25rem;
	font-size: 1.125rem;
	line-height: 1.6;
	color: var(--ee-ink-muted);
}

/* El primer párrafo es la definición de EENDA: va en tinta plena. */
.intro__text:first-child{
	font-size: 1.25rem;
	line-height: 1.5;
	letter-spacing: -.015em;
	color: var(--ee-ink);
}

.intro__text:last-of-type{
	margin-bottom: 2rem;
}

/* --- Pruebas -------------------------------------------------------------- */

.intro__proof{
	margin-top: 4rem;
	border-top: 1px solid var(--ee-hairline);
}

.intro__proof-item{
	padding-top: 1.75rem;
	padding-bottom: 1.75rem;
}

/* El filete entre pruebas lo dibuja la regla de «Filetes dentro de una
   columna» (sección 3). */

.intro__proof-title{
	margin: .75rem 0 .5rem;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.015em;
}

.intro__proof-text{
	margin: 0;
	font-size: .9375rem;
	line-height: 1.55;
	color: var(--ee-ink-muted);
}


/* ==========================================================================
   15. Capacidades — índice de servicios
   --------------------------------------------------------------------------
   Franja con veladura. Cada servicio es una fila a todo el ancho con el
   nombre a cuerpo de cartel; al pasar por encima, un fondo abisal sube desde
   abajo y la fila entera se pone en negativo.
   ========================================================================== */

.servicios{
	padding: 5rem 0;
	background: var(--ee-tint);
	scroll-margin-top: var(--ee-header-h);
}

.servicios__title{
	font-size: clamp(2.5rem, 10.5vw, 4.25rem);
}

.servicios__intro{
	margin-top: 1.75rem;
}

.servicios__intro p{
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--ee-ink-muted);
}

.servicios__list{
	margin: 3.5rem 0 0;
	border-top: 1px solid var(--ee-hairline);
}

.servicios__item{
	border-bottom: 1px solid var(--ee-hairline);
}

/*
 * Toda la fila es el objetivo de clic. El fondo del hover sangra hasta el
 * borde de la pantalla con un pseudoelemento de 100vw.
 */
.servicios__link{
	position: relative;
	z-index: 0;
	display: grid;
	grid-template-columns: 2.25rem minmax(0, 1fr) 2.75rem;
	gap: .5rem 1rem;
	align-items: center;
	padding: 1.5rem 0;
	color: inherit;
	text-decoration: none;
}

.servicios__link::before{
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	z-index: -1;
	width: 100vw;
	margin-left: -50vw;
	background: var(--ee-abyss);
	transform: scaleY(0);
	transform-origin: bottom center;
	transition: transform .55s var(--ee-wipe);
}

.servicios__index{
	grid-column: 1;
	grid-row: 1;
	font-family: var(--ee-font-mono);
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .08em;
	color: var(--ee-brand);
	transition: color var(--ee-speed) var(--ee-ease);
}

.servicios__name{
	grid-column: 2;
	grid-row: 1;
	margin: 0;
	font-family: var(--ee-font-display);
	font-size: clamp(1.875rem, 8.5vw, 2.75rem);
	font-weight: 800;
	line-height: 1;
	text-transform: uppercase;
	transition:
		transform .55s var(--ee-wipe),
		color var(--ee-speed) var(--ee-ease);
}

.servicios__text{
	grid-column: 2 / 4;
	grid-row: 2;
	margin: 0;
	font-size: .9375rem;
	line-height: 1.55;
	color: var(--ee-ink-muted);
	transition: color var(--ee-speed) var(--ee-ease);
}

.servicios__arrow{
	grid-column: 3;
	grid-row: 1;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--ee-hairline);
	color: var(--ee-ink);
	transition:
		background-color .4s var(--ee-wipe),
		border-color .4s var(--ee-wipe),
		color .4s var(--ee-wipe);
}

.servicios__arrow .icono-flecha{
	width: 1.125rem;
	height: 1.125rem;
}

.servicios__link:hover::before,
.servicios__link:focus-visible::before{
	transform: scaleY(1);
}

.servicios__link:hover .servicios__name,
.servicios__link:focus-visible .servicios__name{
	color: #fff;
	transform: translateX(.75rem);
}

.servicios__link:hover .servicios__text,
.servicios__link:focus-visible .servicios__text{
	color: var(--ee-on-dark-muted);
}

.servicios__link:hover .servicios__index,
.servicios__link:focus-visible .servicios__index{
	color: var(--ee-brand-light);
}

.servicios__link:hover .servicios__arrow,
.servicios__link:focus-visible .servicios__arrow{
	color: #fff;
	background: var(--ee-brand);
	border-color: var(--ee-brand);
}

.servicios__link:focus-visible{
	outline-offset: -2px;
}


/* ==========================================================================
   16. Resultados
   --------------------------------------------------------------------------
   Franja abisal. Las cifras van a cuerpo de cartel: son lo único de la home
   que se lee antes que el titular.
   ========================================================================== */

.resultados{
	padding: 5rem 0;
	background: var(--ee-abyss);
	color: #fff;
	scroll-margin-top: var(--ee-header-h);
}

.resultados .section-label{
	color: rgba(255, 255, 255, .7);
}

.resultados__title{
	--title-color: #fff;
	font-size: clamp(2.5rem, 10.5vw, 4.25rem);
}

.resultados__aside{
	margin-top: 1.75rem;
}

.resultados__text{
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--ee-on-dark-muted);
}

/* El filete va en un envoltorio y no en la .row: sus márgenes negativos lo
   sacarían media medianera por cada lado. */
.resultados__cifras{
	margin-top: 3.5rem;
	border-top: 1px solid var(--ee-hairline-dark);
}

.resultados__grid{
	margin-bottom: 0;
	--bs-gutter-y: 0;
}

.resultados__item{
	padding-top: 2rem;
	padding-bottom: 2rem;
}

.resultados__item + .resultados__item{
	--col-rule: var(--ee-hairline-dark);
}

/*
 * La cifra manda. Cifras tabulares: sin ellas, los números de distinta
 * anchura descuadran la fila entre columnas.
 */
.resultados__cifra{
	margin: 0;
	font-family: var(--ee-font-display);
	font-size: clamp(4.5rem, 20vw, 6rem);
	font-weight: 800;
	line-height: .85;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.resultados__concepto{
	margin: 1.25rem 0 .5rem;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -.015em;
}

.resultados__detalle{
	margin: 0;
	font-size: .9375rem;
	line-height: 1.55;
	color: var(--ee-on-dark-muted);
}

/* --- Testimonio ----------------------------------------------------------- */

.resultados__cita{
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
	margin: 3rem 0 0;
	padding-top: 2.5rem;
	border-top: 1px solid var(--ee-hairline-dark);
}

.resultados__cita blockquote{
	margin: 0;
}

.resultados__cita blockquote p{
	margin: 0;
	font-size: clamp(1.25rem, 5vw, 1.5rem);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -.02em;
	text-wrap: pretty;
}

.resultados__cita blockquote p::before{
	content: "\201C";
	color: var(--ee-brand-light);
}

.resultados__cita blockquote p::after{
	content: "\201D";
	color: var(--ee-brand-light);
}

.resultados__firma{
	display: block;
	font-size: 1rem;
	font-weight: 600;
}

.resultados__cargo{
	display: block;
	margin-top: .25rem;
	font-family: var(--ee-font-mono);
	font-size: .6875rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ee-on-dark-muted);
}


/* ==========================================================================
   17. Proyectos destacados
   --------------------------------------------------------------------------
   Filas alternas: imagen grande a un lado y texto al otro. El número del
   proyecto va sobre la imagen en modo diferencia, así se lee sobre cualquier
   fotografía sin necesitar una caja detrás.
   ========================================================================== */

.proyectos{
	padding: 5rem 0;
	scroll-margin-top: var(--ee-header-h);
}

.proyectos__title{
	font-size: clamp(2.5rem, 10.5vw, 4.25rem);
}

.proyectos__lista{
	display: grid;
	gap: 4.5rem;
	margin-top: 3.5rem;
}

.proyecto{
	--bs-gutter-y: 2rem;
}

.proyecto__media{
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--ee-tint);
}

.proyecto__media img{
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 65 / 67;
	object-fit: cover;
	transition: transform 1.2s var(--ee-wipe);
}

.proyecto:hover .proyecto__media img{
	transform: scale(1.04);
}

/*
 * Número del proyecto: una pestaña abisal en la esquina de la imagen. Va en
 * caja y no directamente sobre la foto porque las fotografías son de clientes
 * y de cualquier color: sobre una caja propia se lee siempre igual.
 */
.proyecto__index{
	position: absolute;
	top: 0;
	right: 0;
	padding: .75rem 1rem .5rem;
	font-family: var(--ee-font-display);
	font-size: 2.25rem;
	font-weight: 800;
	line-height: 1;
	color: #fff;
	background: var(--ee-abyss);
	pointer-events: none;
}

.proyecto__tipo{
	margin-bottom: 1.25rem;
	color: var(--ee-brand);
}

.proyecto__name{
	font-size: clamp(2.25rem, 10vw, 3.5rem);
}

.proyecto__text{
	margin: 1.25rem 0 1.75rem;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--ee-ink-muted);
}

.proyectos__pie{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	margin-top: 4.5rem;
	padding-top: 2rem;
	border-top: 1px solid var(--ee-hairline);
}

.proyectos__text{
	max-width: 36rem;
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--ee-ink-muted);
}


/* ==========================================================================
   18. Producto propio
   --------------------------------------------------------------------------
   El único bloque en el azul de marca de toda la web. Los nombres van en
   contorno a cuerpo de cartel y se rellenan al pasar por encima.
   ========================================================================== */

.productos{
	padding: 5rem 0;
	background: var(--ee-brand);
	color: #fff;
	scroll-margin-top: var(--ee-header-h);
}

.productos .section-label{
	color: rgba(255, 255, 255, .85);
}

.productos__title{
	--title-color: #fff;
	font-size: clamp(2.5rem, 10.5vw, 4.25rem);
}

.productos__aside{
	margin-top: 1.75rem;
}

.productos__text{
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, .9);
}

.productos__lista{
	margin: 3.5rem 0 0;
	border-top: 1px solid rgba(255, 255, 255, .32);
}

.productos__lista > li{
	border-bottom: 1px solid rgba(255, 255, 255, .32);
}

.producto{
	display: grid;
	grid-template-columns: minmax(0, 1fr) 3rem;
	gap: 1rem 1.5rem;
	align-items: center;
	padding: 1.75rem 0;
	color: #fff;
	text-decoration: none;
}

.producto:hover,
.producto:focus-visible{
	color: #fff;
}

.producto__name{
	grid-column: 1;
	grid-row: 1;
	margin: 0;
	font-family: var(--ee-font-display);
	font-size: clamp(3.25rem, 17vw, 5rem);
	font-weight: 800;
	line-height: .9;
	text-transform: uppercase;
	color: transparent;
	-webkit-text-stroke: 1.5px #fff;
	transition: color .45s var(--ee-wipe);
}

/* El ® del nombre sí va relleno: en contorno, a ese cuerpo, no se lee. */
.producto__name .tm{
	top: -1.1em;
	font-family: var(--ee-font-sans);
	font-size: .3em;
	font-weight: 600;
	color: #fff;
	-webkit-text-stroke: 0;
}

.producto:hover .producto__name,
.producto:focus-visible .producto__name{
	color: #fff;
}

.producto__cuerpo{
	grid-column: 1 / 3;
	grid-row: 2;
	display: block;
}

.producto__categoria{
	display: flex;
	align-items: baseline;
	gap: .75rem;
	margin-bottom: .75rem;
	font-family: var(--ee-font-mono);
	font-size: .6875rem;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .85);
}

.producto__index{
	color: #fff;
}

.producto__text{
	display: block;
	max-width: 34rem;
	font-size: .9375rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, .9);
}

.producto__arrow{
	grid-column: 2;
	grid-row: 1;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border: 1px solid rgba(255, 255, 255, .55);
	transition:
		background-color .4s var(--ee-wipe),
		color .4s var(--ee-wipe);
}

.producto__arrow .icono-flecha{
	width: 1.125rem;
	height: 1.125rem;
}

.producto:hover .producto__arrow,
.producto:focus-visible .producto__arrow{
	color: var(--ee-brand);
	background: #fff;
}


/* ==========================================================================
   19. Trayectoria
   ========================================================================== */

.trayectoria{
	padding: 5rem 0;
	scroll-margin-top: var(--ee-header-h);
}

.trayectoria__title{
	font-size: clamp(2.5rem, 10.5vw, 4.25rem);
}

.trayectoria__list{
	margin-top: 3rem;
	margin-bottom: 0;
	--bs-gutter-y: 2.5rem;
}

/* Filete superior por hito: dibuja la línea de tiempo sin añadir marcado. */
.trayectoria__item{
	padding-top: 1.25rem;
}

.trayectoria__anio{
	display: block;
	font-family: var(--ee-font-display);
	font-size: 2.5rem;
	font-weight: 800;
	line-height: 1;
	color: var(--ee-brand);
	font-variant-numeric: tabular-nums;
}

.trayectoria__hito{
	margin: .875rem 0 .375rem;
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: -.02em;
}

.trayectoria__text{
	margin: 0;
	font-size: .9375rem;
	line-height: 1.55;
	color: var(--ee-ink-muted);
}


/* ==========================================================================
   20. Preguntas frecuentes
   ========================================================================== */

.faq{
	padding: 5rem 0;
	scroll-margin-top: var(--ee-header-h);
}

.faq__title{
	font-size: clamp(2.5rem, 10.5vw, 4.25rem);
}

.faq__list{
	margin-top: 2.5rem;
}

/* Los filetes van en las preguntas y no en la lista, que es una columna de
   Bootstrap: así empiezan y acaban donde el texto. */
.faq__item{
	border-bottom: 1px solid var(--ee-hairline);
}

.faq__item:first-child{
	border-top: 1px solid var(--ee-hairline);
}

/*
 * <summary> trae un marcador propio del navegador que no se puede componer.
 * Se retira y se sustituye por el icono de la derecha.
 */
.faq__pregunta{
	display: grid;
	grid-template-columns: minmax(0, 1fr) 1.75rem;
	gap: 1rem;
	align-items: start;
	padding: 1.5rem 0;
	cursor: pointer;
	list-style: none;
}

.faq__pregunta::-webkit-details-marker{
	display: none;
}

.faq__pregunta:focus-visible{
	outline-offset: -2px;
}

/* Numeración de la home. Donde no la hay, la rejilla sigue en dos columnas. */
.faq__pregunta:has(.faq__num){
	grid-template-columns: 2.25rem minmax(0, 1fr) 1.75rem;
}

.faq__num{
	padding-top: .3125rem;
	font-family: var(--ee-font-mono);
	font-size: .6875rem;
	font-weight: 500;
	color: var(--ee-brand);
}

/*
 * El nivel del encabezado NO es el mismo en todas las FAQ del sitio: en la
 * home cada pregunta es un <h3>; en la ficha de servicio, un <h2>. El tamaño
 * lo decide esta hoja y no puede depender de la etiqueta.
 */
.faq__pregunta :is(h2, h3){
	margin: 0;
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: -.015em;
	transition: color .2s var(--ee-ease);
}

.faq__pregunta:hover :is(h2, h3),
.faq__item[open] .faq__pregunta :is(h2, h3){
	color: var(--ee-brand);
}

/* Cruz de 1px que gira a guion al abrirse: dos filetes, sin iconografía. */
.faq__icono{
	position: relative;
	width: 1.75rem;
	height: 1.75rem;
}

.faq__icono::before,
.faq__icono::after{
	content: "";
	position: absolute;
	top: 50%;
	left: .375rem;
	right: .375rem;
	height: 1.5px;
	background: var(--ee-ink);
	transition: transform var(--ee-speed) var(--ee-wipe);
}

.faq__icono::after{
	transform: rotate(90deg);
}

.faq__item[open] .faq__icono::after{
	transform: rotate(0deg);
}

/*
 * Apertura y cierre animados con ::details-content e interpolate-size. Donde
 * el navegador no lo soporte, el acordeón abre y cierra sin animar.
 */
:root{
	interpolate-size: allow-keywords;
}

.faq__item::details-content{
	block-size: 0;
	overflow: hidden;
	transition:
		block-size var(--ee-speed) var(--ee-ease),
		content-visibility var(--ee-speed) var(--ee-ease);
	transition-behavior: allow-discrete;
}

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

.faq__respuesta{
	padding: 0 2.75rem 1.75rem 0;
}

.faq__pregunta:has(.faq__num) + .faq__respuesta{
	padding-left: 3.25rem;
}

.faq__respuesta a{
	color: var(--ee-ink);
	text-decoration: underline;
	text-decoration-color: var(--ee-brand);
	text-underline-offset: .2em;
}

.faq__respuesta a:hover,
.faq__respuesta a:focus-visible{
	color: var(--ee-brand);
}

.faq__respuesta p{
	max-width: 40rem;
	margin: 0;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--ee-ink-muted);
}


/* ==========================================================================
   21. Contacto
   --------------------------------------------------------------------------
   Cierre de todas las páginas. Titular a cuerpo de cartel y a todo el ancho;
   comparte el abisal con el pie para cerrar como un solo bloque.
   ========================================================================== */

.contacto{
	padding: 5rem 0 3.5rem;
	background: var(--ee-abyss);
	color: #fff;
	scroll-margin-top: var(--ee-header-h);
}

.contacto .section-label{
	color: rgba(255, 255, 255, .7);
}

.contacto__title{
	--title-color: #fff;
	font-size: clamp(3rem, 14vw, 5.5rem);
	line-height: .88;
	/* A cuerpo de cartel el espaciado de la fuente se abre: se cierra un
	   punto para que el bloque se lea compacto. */
	letter-spacing: -.01em;
}

.contacto__fila{
	margin-top: 2.5rem;
	padding-top: 2rem;
	border-top: 1px solid var(--ee-hairline-dark);
}

.contacto__text{
	max-width: 30rem;
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: #c6d0dc;
}

.contacto__vias{
	display: grid;
	gap: 2rem;
	margin-top: 2.5rem;
}

.contacto__vias ul{
	display: grid;
	gap: 1.5rem;
}

.contacto__etiqueta{
	display: block;
	margin-bottom: .5rem;
	font-family: var(--ee-font-mono);
	font-size: .6875rem;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ee-on-dark-muted);
}

.contacto__valor{
	font-family: var(--ee-font-display);
	font-size: clamp(1.75rem, 8vw, 2.25rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: .01em;
	color: #fff;
	text-decoration: none;
	overflow-wrap: anywhere;
	transition: color .2s var(--ee-ease);
}

.contacto__valor:hover,
.contacto__valor:focus-visible{
	color: var(--ee-brand-light);
}

.contacto__accion{
	justify-self: start;
}


/* ==========================================================================
   22. Pie
   ========================================================================== */

.site-footer{
	padding: 3.5rem 0 2rem;
	background: var(--ee-ink);
	color: var(--ee-on-dark-muted);
}

.site-footer__logo{
	width: auto;
	height: 1.5rem;
}

.site-footer__descriptor{
	max-width: 22rem;
	margin: 1.25rem 0 0;
	font-size: .9375rem;
	line-height: 1.6;
}

.site-footer__top{
	--bs-gutter-y: 2.5rem;
}

.site-footer__titulo{
	margin: 0 0 1rem;
	font-family: var(--ee-font-mono);
	font-size: .6875rem;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #fff;
}

.site-footer__lista{
	margin: 0;
}

.site-footer__lista li + li{
	margin-top: .625rem;
}

.site-footer__lista a{
	font-size: .9375rem;
	color: var(--ee-on-dark-muted);
	text-decoration: none;
	overflow-wrap: anywhere;
	transition: color .2s var(--ee-ease);
}

.site-footer__lista a:hover,
.site-footer__lista a:focus-visible{
	color: #fff;
}

.site-footer__redes{
	margin-top: 1.5rem;
}

.site-footer__bottom{
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--ee-hairline-dark);
}

.site-footer__copy{
	margin: 0;
	font-size: .8125rem;
}

.site-footer__legal{
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.5rem;
}

.site-footer__legal li + li{
	margin-top: 0;
}

.site-footer__legal a{
	font-size: .8125rem;
}


/* ==========================================================================
   23. Distintivo de contenido de muestra
   --------------------------------------------------------------------------
   Marca las franjas con datos inventados. Lo controla
   $config['contenido']['borrador'] en require/custom-vars.php.
   ========================================================================== */

.muestra{
	display: inline-block;
	padding: .25rem .5rem;
	font-family: var(--ee-font-mono);
	font-size: .5625rem;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #8a5a00;
	background: #fff4d6;
	border: 1px solid #f0d189;
	white-space: nowrap;
}

/* El filete del rótulo no debe separar el distintivo de su texto. */
.section-label:has(.muestra)::after{
	order: 1;
}

.section-label .muestra{
	order: 2;
}

@media print{
	.muestra{ display: none; }
}


/* ==========================================================================
   24. Páginas de error
   ========================================================================== */

.error{
	display: flex;
	align-items: center;
	min-height: 100svh;
	padding: calc(var(--ee-header-h) + 3rem) 0 4rem;
	background: var(--ee-abyss);
	color: #fff;
}

/* El código, en contorno y enorme: es un dato técnico, no un titular. */
.error__codigo{
	margin: 0 0 1.5rem;
	font-family: var(--ee-font-display);
	font-size: clamp(6rem, 34vw, 12rem);
	font-weight: 800;
	line-height: .85;
	color: transparent;
	-webkit-text-stroke: 1px rgba(255, 255, 255, .4);
}

.error__title{
	--title-color: #fff;
	max-width: 16ch;
	margin: 0 0 1.25rem;
	font-size: clamp(2.5rem, 10vw, 4rem);
}

.error__text{
	max-width: 42ch;
	margin: 0 0 2.5rem;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--ee-on-dark-muted);
}

.error__salidas{
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin: 0;
}


/* ==========================================================================
   25. Cabecera de página interior
   --------------------------------------------------------------------------
   Comparte fotografía y titular de cartel con el hero, pero NO ocupa la
   pantalla completa: una página interior tiene que enseñar contenido sin
   obligar a hacer scroll.
   ========================================================================== */

.pagehead{
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 28rem;
	padding: calc(var(--ee-header-h) + 3.5rem) 0 3.5rem;
	background: var(--ee-abyss);
	color: #fff;
	overflow: hidden;
	isolation: isolate;
}

.pagehead__media{
	position: absolute;
	inset: 0;
	z-index: -2;
}

.pagehead__media img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 40%;
}

.pagehead__scrim{
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(to bottom, rgba(4, 14, 26, .82) 0%, rgba(4, 14, 26, .5) 45%, rgba(4, 14, 26, .92) 100%),
		linear-gradient(to right, rgba(4, 14, 26, .85) 0%, rgba(4, 14, 26, .3) 65%, rgba(4, 14, 26, .1) 100%);
}

.pagehead__inner{
	position: relative;
	z-index: 1;
	width: 100%;
}

.pagehead__seccion{
	margin-bottom: 1.25rem;
	color: rgba(255, 255, 255, .78);
}

.pagehead__title{
	--title-color: #fff;
	max-width: 14ch;
	font-size: clamp(2.75rem, 12vw, 4.5rem);
}

/* Titulares de 30 a 60 caracteres: cartel, pero sin pasar de cuatro líneas. */
.pagehead__title--medio{
	max-width: 20ch;
	font-size: clamp(2.5rem, 10vw, 3.75rem);
}

/*
 * Titulares largos (entradas del blog). Mismo relleno, pero en caja baja y a
 * cuerpo de lectura: en mayúsculas condensadas, 120 caracteres son un muro.
 */
.pagehead__title--largo{
	max-width: 30ch;
	font-family: var(--ee-font-sans);
	font-size: clamp(1.75rem, 7vw, 2.25rem);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -.03em;
	text-transform: none;
}

/* Migas de pan (artículos). */
.pagehead__migas{
	margin-bottom: 1.5rem;
}

.pagehead__migas ol{
	display: flex;
	flex-wrap: wrap;
	gap: .25rem 0;
	margin: 0;
}

.pagehead__migas li{
	display: flex;
	align-items: center;
	font-size: .8125rem;
}

.pagehead__migas li + li::before{
	content: "/";
	margin: 0 .625rem;
	color: rgba(255, 255, 255, .4);
}

.pagehead__migas a{
	color: rgba(255, 255, 255, .78);
	text-decoration: none;
}

.pagehead__migas a:hover,
.pagehead__migas a:focus-visible{
	color: #fff;
	text-decoration: underline;
	text-underline-offset: .2em;
}

/* Línea de datos del artículo: autor, fechas y lectura. */
.pagehead__meta{
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2.5rem;
	margin: 2rem 0 0;
	padding-top: 1.5rem;
	border-top: 1px solid var(--ee-hairline-dark);
}

.pagehead__meta dt{
	margin-bottom: .25rem;
	font-family: var(--ee-font-mono);
	font-size: .625rem;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .6);
}

.pagehead__meta dd{
	margin: 0;
	font-size: .9375rem;
	font-weight: 500;
	color: #fff;
}

/* Teléfonos enlazados dentro de la entradilla (eenda_telefono_enlaces). */
.pagehead__text a{
	color: #fff;
	text-decoration: underline;
	text-decoration-color: var(--ee-brand-light);
	text-underline-offset: .2em;
}

.pagehead__text{
	max-width: 52ch;
	margin: 1.5rem 0 0;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, .8);
}

/*
 * Índice de anclas. Navegación real: deja ver qué hay debajo y saltar a ello.
 */
.pagehead__indice{
	margin-top: 2.25rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--ee-hairline-dark);
}

.pagehead__indice ul{
	display: flex;
	flex-wrap: wrap;
	gap: .625rem 1.75rem;
	margin: 0;
}

.pagehead__indice a{
	display: inline-flex;
	align-items: baseline;
	gap: .5rem;
	font-family: var(--ee-font-mono);
	font-size: .6875rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .8);
	text-decoration: none;
	transition: color .2s var(--ee-ease);
}

.pagehead__indice a span{
	color: var(--ee-brand-light);
}

.pagehead__indice a:hover,
.pagehead__indice a:focus-visible{
	color: #fff;
}


/* ==========================================================================
   26. Catálogo de servicios
   --------------------------------------------------------------------------
   Filas anchas y no tarjetas: en un catálogo el visitante viene a comparar,
   y comparar exige que cada servicio tenga sitio para explicarse.
   ========================================================================== */

.catalogo{
	padding: 5rem 0;
}

.catalogo__list{
	margin-top: 1rem;
	border-top: 1px solid var(--ee-hairline);
}

.catalogo__item{
	padding: 2.5rem 0;
	border-bottom: 1px solid var(--ee-hairline);
	/* El header es fijo: sin esto, saltar desde el índice deja el título
	   debajo de la barra. */
	scroll-margin-top: calc(var(--ee-header-h) + 1rem);
}

.catalogo__index{
	display: block;
	font-family: var(--ee-font-mono);
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .1em;
	color: var(--ee-brand);
}

.catalogo__name{
	margin: .75rem 0 0;
	font-family: var(--ee-font-display);
	font-size: clamp(2.25rem, 10vw, 3.25rem);
	font-weight: 800;
	line-height: .95;
	text-transform: uppercase;
	overflow-wrap: break-word;
}

/* Marca los servicios que se apoyan en software propio de EENDA. */
.catalogo__producto{
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin: 1.25rem 0 0;
	padding: .375rem .75rem;
	font-family: var(--ee-font-mono);
	font-size: .625rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ee-brand);
	border: 1px solid rgba(var(--ee-brand-rgb), .35);
}

.catalogo__producto span{
	font-size: .5rem;
}

.catalogo__cuerpo{
	margin-top: 1.5rem;
}

.catalogo__text{
	margin: 0 0 1.75rem;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--ee-ink-muted);
}

.catalogo__subtitulo{
	margin: 0 0 .875rem;
	font-family: var(--ee-font-mono);
	font-size: .6875rem;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ee-ink-muted);
}

.catalogo__incluye{
	margin: 0 0 2rem;
	columns: 1;
}

.catalogo__incluye li{
	padding: .375rem 0 .375rem .875rem;
	font-size: .9375rem;
	line-height: 1.5;
	color: var(--ee-ink);
	border-left: 1px solid var(--ee-hairline);
	break-inside: avoid;
}


/* ==========================================================================
   27. Ficha de servicio
   ========================================================================== */

.servicio{
	padding: 5rem 0;
}

/*
 * Cuerpo de la ficha. Lo escribe un administrador con el editor del XPanel®,
 * así que se estiliza por etiqueta y no por clase. Lo comparten la ficha de
 * servicio y la de portfolio.
 */
.servicio__texto > p{
	margin: 0 0 1.25rem;
	font-size: 1.125rem;
	line-height: 1.65;
	color: var(--ee-ink-muted);
}

/* La entradilla pesa más: es la frase que decide si se sigue leyendo. */
.servicio__texto > p:first-of-type{
	font-size: 1.3125rem;
	line-height: 1.5;
	letter-spacing: -.015em;
	color: var(--ee-ink);
}

.servicio__texto > h2,
.servicio__texto > h3{
	margin: 2.25rem 0 .75rem;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.02em;
	color: var(--ee-ink);
}

.servicio__texto > h3{
	font-size: 1.0625rem;
}

.servicio__texto ul,
.servicio__texto ol{
	margin: 0 0 1.25rem;
	padding-left: 1.25rem;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--ee-ink-muted);
}

.servicio__texto li + li{
	margin-top: .5rem;
}

.servicio__texto a{
	color: var(--ee-brand);
}

.servicio__texto > *:last-child{
	margin-bottom: 0;
}

/* --- Ficha técnica -------------------------------------------------------- */

.ficha{
	margin: 2.5rem 0 1.5rem;
	border-top: 2px solid var(--ee-ink);
}

.ficha__fila{
	padding: 1rem 0;
	border-bottom: 1px solid var(--ee-hairline);
}

.ficha dt{
	font-family: var(--ee-font-mono);
	font-size: .6875rem;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ee-ink-muted);
}

.ficha dd{
	margin: .375rem 0 0;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.45;
	color: var(--ee-ink);
}

/* --- Qué incluye ---------------------------------------------------------- */

.servicio__incluye{
	margin-top: 4.5rem;
	padding-top: 3rem;
	border-top: 1px solid var(--ee-hairline);
}

.servicio__incluye ul{
	margin-top: 1rem;
	margin-bottom: 0;
	--bs-gutter-y: 2.5rem;
}

.servicio__bloque{
	--col-rule: var(--ee-brand);
	--col-rule-w: 2px;
	padding-top: 1.25rem;
}

.servicio__num{
	display: block;
	font-family: var(--ee-font-mono);
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .1em;
	color: var(--ee-brand);
}

.servicio__bloque-titulo{
	margin: .75rem 0 .5rem;
	font-family: var(--ee-font-display);
	font-size: 1.75rem;
	font-weight: 800;
	line-height: 1;
	text-transform: uppercase;
}

.servicio__bloque-texto{
	margin: 0;
	font-size: .9375rem;
	line-height: 1.6;
	color: var(--ee-ink-muted);
}

/* --- Preguntas del servicio ---------------------------------------------- */

.servicio__faq{
	margin-top: 4.5rem;
	padding-top: 3rem;
	border-top: 1px solid var(--ee-hairline);
}

/* --- Anterior y siguiente (compartido con portfolio) ---------------------- */

.pagenav{
	background: var(--ee-tint);
	border-top: 1px solid var(--ee-hairline);
}

.pagenav .row{
	--bs-gutter-x: 0;
}

.pagenav__item a{
	display: block;
	padding: 2rem 0;
	color: inherit;
	text-decoration: none;
}

.pagenav__item--next{
	text-align: right;
	border-top: 1px solid var(--ee-hairline);
}

.pagenav__label{
	display: block;
	font-family: var(--ee-font-mono);
	font-size: .6875rem;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ee-ink-muted);
}

.pagenav__titulo{
	display: block;
	margin-top: .625rem;
	font-family: var(--ee-font-display);
	font-size: clamp(1.75rem, 8vw, 2.5rem);
	font-weight: 800;
	line-height: 1;
	text-transform: uppercase;
	transition: color var(--ee-speed) var(--ee-ease);
}

.pagenav__item a:hover .pagenav__titulo,
.pagenav__item a:focus-visible .pagenav__titulo{
	color: var(--ee-brand);
}


/* ==========================================================================
   28. Portfolio
   ========================================================================== */

.galeria{
	padding: 5rem 0;
}

.galeria__barra{
	margin-bottom: 2.5rem;
}

/* --- Filtros -------------------------------------------------------------- */

.galeria__filtros{
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-top: 1.25rem;
}

/*
 * Botones, no enlaces: no navegan, cambian el estado de la lista. El contador
 * va dentro para que se vea cuántos hay antes de pulsar.
 */
.filtro{
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .625rem 1rem;
	font-family: var(--ee-font-mono);
	font-size: .6875rem;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ee-ink-muted);
	background: transparent;
	border: 1px solid var(--ee-hairline);
	cursor: pointer;
	transition:
		color var(--ee-speed) var(--ee-ease),
		border-color var(--ee-speed) var(--ee-ease),
		background-color var(--ee-speed) var(--ee-ease);
}

.filtro:hover{
	color: var(--ee-ink);
	border-color: var(--ee-ink);
}

.filtro.is-active{
	color: #fff;
	background: var(--ee-ink);
	border-color: var(--ee-ink);
}

.filtro__total{
	font-size: .5625rem;
	opacity: .6;
}

/* --- Tarjeta -------------------------------------------------------------- */

.galeria__grid{
	margin-bottom: 0;
	--bs-gutter-x: 1.5rem;
	--bs-gutter-y: 3.5rem;
}

/* Al filtrar, lo que se oculta desaparece del flujo y del foco de teclado. */
.galeria__item[hidden]{
	display: none !important;
}

.tarjeta__link{
	display: block;
	color: inherit;
	text-decoration: none;
}

.tarjeta__media{
	display: block;
	overflow: hidden;
	background: var(--ee-tint);
}

.tarjeta__media img{
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 1.2s var(--ee-wipe);
}

.tarjeta__link:hover .tarjeta__media img,
.tarjeta__link:focus-visible .tarjeta__media img{
	transform: scale(1.04);
}

.tarjeta__meta{
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .5rem .875rem;
	margin-top: 1.5rem;
	font-family: var(--ee-font-mono);
	font-size: .6875rem;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.tarjeta__cliente{ color: var(--ee-brand); }
.tarjeta__tipo{ color: var(--ee-ink-muted); }

.tarjeta__titulo{
	margin: .75rem 0 .625rem;
	font-family: var(--ee-font-display);
	font-size: clamp(2rem, 9vw, 2.75rem);
	font-weight: 800;
	line-height: .95;
	text-transform: uppercase;
	transition: color var(--ee-speed) var(--ee-ease);
}

.tarjeta__link:hover .tarjeta__titulo,
.tarjeta__link:focus-visible .tarjeta__titulo{
	color: var(--ee-brand);
}

.tarjeta__texto{
	margin: 0;
	font-size: .9375rem;
	line-height: 1.6;
	color: var(--ee-ink-muted);
}

.galeria__vacio{
	margin: 3rem 0 0;
	font-size: 1rem;
	color: var(--ee-ink-muted);
}


/* ==========================================================================
   29. Ficha de proyecto
   ========================================================================== */

.proyecto-ficha{
	padding: 5rem 0;
}

/* La imagen abre la ficha: es la prueba, va primero. */
.proyecto-ficha__media{
	margin: 0 0 3rem;
	overflow: hidden;
	background: var(--ee-tint);
}

.proyecto-ficha__media img{
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}


/* ==========================================================================
   30. Nosotros
   ========================================================================== */

.manifiesto{
	padding: 5rem 0;
	scroll-margin-top: var(--ee-header-h);
}

/*
 * El manifiesto se compone como una declaración: cuerpo grande, medida corta
 * y tinta plena.
 */
.manifiesto__texto{
	max-width: 30ch;
	margin: 0;
	font-size: clamp(1.5rem, 6vw, 2rem);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -.025em;
	text-wrap: pretty;
}

.manifiesto__texto + .manifiesto__texto{
	max-width: 42ch;
	margin-top: 1.75rem;
	font-size: clamp(1.0625rem, 3.5vw, 1.25rem);
	font-weight: 400;
	line-height: 1.55;
	letter-spacing: -.01em;
	color: var(--ee-ink-muted);
}

/* Es una .row: solo se toca el margen vertical, o se pierden sus márgenes
   negativos y las columnas quedan sangradas respecto al texto de arriba. */
.manifiesto__pruebas{
	margin-top: 4rem;
	margin-bottom: 0;
	padding-top: 2.5rem;
	--bs-gutter-y: 2rem;
}

.manifiesto__prueba-titulo{
	margin: .75rem 0 .5rem;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.015em;
}

.manifiesto__prueba-texto{
	margin: 0;
	font-size: .9375rem;
	line-height: 1.55;
	color: var(--ee-ink-muted);
}

/* --- Valores -------------------------------------------------------------- */

.valores{
	padding: 5rem 0;
	background: var(--ee-abyss);
	color: #fff;
	scroll-margin-top: var(--ee-header-h);
}

.valores .section-label{ color: rgba(255, 255, 255, .7); }

.valores__list{
	margin-top: 1rem;
	margin-bottom: 0;
	--bs-gutter-y: 2.5rem;
}

.valores__item{
	--col-rule: rgba(255, 255, 255, .2);
	padding-top: 1.5rem;
}

.valores__num{
	display: block;
	font-family: var(--ee-font-mono);
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .1em;
	color: var(--ee-brand-light);
}

.valores__titulo{
	margin: 1rem 0 .875rem;
	font-family: var(--ee-font-display);
	font-size: clamp(2.25rem, 10vw, 3rem);
	font-weight: 800;
	line-height: .95;
	text-transform: uppercase;
}

.valores__texto{
	margin: 0;
	font-size: .9375rem;
	line-height: 1.6;
	color: var(--ee-on-dark-muted);
}


/* ==========================================================================
   31. Contacto (página)
   --------------------------------------------------------------------------
   Sin formulario: el teléfono y el correo SON la página, así que se componen
   grandes y como objetivo de clic completo.
   ========================================================================== */

.canales{
	padding: 5rem 0;
	scroll-margin-top: var(--ee-header-h);
}

.canales__list{
	margin-top: 1rem;
	margin-bottom: 0;
	--bs-gutter-x: 1.5rem;
	--bs-gutter-y: 1.5rem;
}

.canal{
	position: relative;
	z-index: 0;
	display: block;
	height: 100%;
	padding: 2rem 1.5rem;
	overflow: hidden;
	border: 1px solid var(--ee-hairline);
	color: inherit;
	text-decoration: none;
	transition: border-color var(--ee-speed) var(--ee-ease), color .45s var(--ee-wipe);
}

/* Mismo barrido que los botones: la tarjeta entera es la acción. */
.canal::before{
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--ee-abyss);
	transform: translateX(-101%);
	transition: transform .55s var(--ee-wipe);
}

.canal:hover,
.canal:focus-visible{
	color: #fff;
	border-color: var(--ee-abyss);
}

.canal:hover::before,
.canal:focus-visible::before{
	transform: none;
}

.canal__etiqueta{
	display: block;
	margin: 0;
	font-family: var(--ee-font-mono);
	font-size: .6875rem;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ee-ink-muted);
	transition: color var(--ee-speed) var(--ee-ease);
}

.canal__valor{
	display: flex;
	align-items: center;
	gap: .75rem;
	margin: .875rem 0 .75rem;
	font-family: var(--ee-font-display);
	font-size: clamp(2rem, 9.5vw, 3rem);
	font-weight: 800;
	line-height: 1;
	color: var(--ee-brand);
	overflow-wrap: anywhere;
	transition: color var(--ee-speed) var(--ee-ease);
}

.canal__valor .icono-flecha{
	width: .75em;
	height: .75em;
}

.canal__apunte{
	display: block;
	font-size: .9375rem;
	line-height: 1.55;
	color: var(--ee-ink-muted);
	transition: color var(--ee-speed) var(--ee-ease);
}

.canal:hover .canal__valor,
.canal:focus-visible .canal__valor{
	color: #fff;
}

.canal:hover .canal__etiqueta,
.canal:hover .canal__apunte,
.canal:focus-visible .canal__etiqueta,
.canal:focus-visible .canal__apunte{
	color: var(--ee-on-dark-muted);
}

/* --- Qué contarnos -------------------------------------------------------- */

/*
 * Bloque abisal dentro de la franja clara: rompe la página en dos tiempos
 * (los canales, arriba; qué contar, aquí) y le da a la lista el peso de una
 * franja. Los puntos van como fichas numeradas, en rejilla de dos.
 */
.canales__apuntes{
	--ee-focus: #fff;
	margin-top: 4rem;
	padding: 2.5rem 1.5rem;
	background: var(--ee-abyss);
	color: #fff;
}

.canales__apuntes .section-label{
	color: rgba(255, 255, 255, .7);
}

.canales__apuntes .section-number{
	color: var(--ee-brand-light);
}

.canales__apuntes-titulo{
	--title-color: #fff;
	font-size: clamp(2.25rem, 9vw, 3rem);
}

.canales__apuntes-texto{
	max-width: 30rem;
	margin: 1.25rem 0 2rem;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: #c6d0dc;
}

.canales__apuntes-texto a{
	color: #fff;
	text-decoration: underline;
	text-decoration-color: var(--ee-brand-light);
	text-underline-offset: .2em;
}

.canales__apuntes-acciones{
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-bottom: 2.5rem;
}

.canales__lista{
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1px;
	margin: 0;
	/* El hueco de 1px entre fichas, sobre este fondo, dibuja la retícula. */
	background: var(--ee-hairline-dark);
	border: 1px solid var(--ee-hairline-dark);
}

.canales__punto{
	display: grid;
	gap: 1rem;
	align-content: start;
	padding: 1.75rem 1.5rem;
	background: var(--ee-abyss);
}

.canales__punto-num{
	font-family: var(--ee-font-display);
	font-size: 3rem;
	font-weight: 800;
	line-height: .85;
	color: transparent;
	-webkit-text-stroke: 1px var(--ee-brand-light);
}

.canales__punto-texto{
	font-size: 1.0625rem;
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: -.01em;
}

/* --- Redes ---------------------------------------------------------------- */

.redes{
	padding: 5rem 0;
	background: var(--ee-tint);
	scroll-margin-top: var(--ee-header-h);
}

.redes__list{
	margin: 1rem 0 0;
	border-top: 1px solid var(--ee-hairline);
}

/*
 * Rejilla y no flex: en móvil el nombre y la flecha comparten la primera
 * fila y el apunte baja a la segunda. Con flex, la flecha caía sola a una
 * línea nueva según la longitud del apunte.
 */
.red{
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: .5rem 1.25rem;
	padding: 1.5rem 0;
	border-bottom: 1px solid var(--ee-hairline);
	color: inherit;
	text-decoration: none;
}

.red__nombre{
	margin: 0;
	font-family: var(--ee-font-display);
	font-size: clamp(2rem, 9vw, 2.75rem);
	font-weight: 800;
	line-height: 1;
	text-transform: uppercase;
	transition:
		transform .5s var(--ee-wipe),
		color var(--ee-speed) var(--ee-ease);
}

.red:hover .red__nombre,
.red:focus-visible .red__nombre{
	color: var(--ee-brand);
	transform: translateX(.625rem);
}

.red__apunte{
	grid-column: 1 / -1;
	grid-row: 2;
	font-family: var(--ee-font-mono);
	font-size: .6875rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ee-ink-muted);
}

.red .icono-flecha{
	grid-column: 2;
	grid-row: 1;
	width: 1.25rem;
	height: 1.25rem;
	color: var(--ee-brand);
}


/* ==========================================================================
   32. Blog — listado
   ========================================================================== */

.blog{
	padding: 5rem 0;
}

.blog__categorias{
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-bottom: 3rem;
}

/* Reutiliza .filtro del portfolio, pero aquí son ENLACES: cada categoría es
   una URL real con su propio listado indexable. */
.blog__categorias .filtro{
	text-decoration: none;
}

.blog__lista{
	margin: 0;
	border-top: 1px solid var(--ee-hairline);
}

.blog__item{
	border-bottom: 1px solid var(--ee-hairline);
}

.entrada{
	display: block;
	padding: 2rem 0;
	color: inherit;
	text-decoration: none;
}

.entrada__meta{
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .5rem 1.25rem;
	font-family: var(--ee-font-mono);
	font-size: .6875rem;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ee-ink-muted);
}

.entrada__categoria{ color: var(--ee-brand); }

/*
 * Los titulares del blog son frases largas: van en Inter, en caja baja. En
 * mayúsculas condensadas, un titular de 120 caracteres sería un muro.
 */
.entrada__titulo{
	margin: .875rem 0 .75rem;
	font-size: clamp(1.25rem, 5vw, 1.625rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.025em;
	text-wrap: balance;
	transition: color var(--ee-speed) var(--ee-ease);
}

.entrada:hover .entrada__titulo,
.entrada:focus-visible .entrada__titulo{
	color: var(--ee-brand);
}

/* La primera entrada de la primera página pesa más: es la portada del blog. */
.blog__item--destacada .entrada__titulo{
	font-size: clamp(1.625rem, 6.5vw, 2.5rem);
	letter-spacing: -.035em;
}

.entrada__extracto{
	max-width: 62ch;
	margin: 0 0 1.25rem;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--ee-ink-muted);
}

.entrada__leer{
	display: inline-flex;
	align-items: center;
	gap: .625rem;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ee-brand);
}

/*
 * Imagen de la entrada. Los archivos miden 980×500: nunca pasan de su tamaño.
 * En móvil encabeza la pieza; desde lg va a una columna estrecha a la derecha.
 */
.entrada--media{
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.25rem;
}

.entrada__media{
	order: -1;
	overflow: hidden;
	background: var(--ee-tint);
	aspect-ratio: 980 / 500;
}

.entrada__media img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1s var(--ee-wipe);
}

.entrada:hover .entrada__media img,
.entrada:focus-visible .entrada__media img{
	transform: scale(1.04);
}

.blog__vacio{
	margin: 0;
	font-size: 1.0625rem;
	color: var(--ee-ink-muted);
}

/* --- Paginación ----------------------------------------------------------- */

.paginacion{
	margin-top: 3rem;
}

.paginacion ul{
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0;
}

.paginacion a,
.paginacion__actual{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	height: 2.75rem;
	padding: 0 .5rem;
	font-family: var(--ee-font-mono);
	font-size: .8125rem;
	border: 1px solid var(--ee-hairline);
	text-decoration: none;
	color: var(--ee-ink-muted);
	transition: color .2s var(--ee-ease), border-color .2s var(--ee-ease);
}

.paginacion a:hover,
.paginacion a:focus-visible{
	color: var(--ee-ink);
	border-color: var(--ee-ink);
}

.paginacion__actual{
	color: #fff;
	background: var(--ee-ink);
	border-color: var(--ee-ink);
}


/* ==========================================================================
   33. Blog — entrada
   --------------------------------------------------------------------------
   Pieza editorial: «En breve» arriba, índice lateral fijo, cuerpo a medida
   corta y firma al final. La lectura manda: medida de ~68 caracteres,
   interlineado amplio y jerarquía clara entre H2, H3 y cuerpo.
   ========================================================================== */

/* Barra de progreso de lectura, pegada al borde inferior del header. */
.progreso{
	position: fixed;
	top: var(--ee-header-h);
	right: 0;
	left: 0;
	z-index: 1029;
	height: 2px;
	pointer-events: none;
}

.progreso span{
	display: block;
	height: 100%;
	background: var(--ee-brand-light);
	transform: scaleX(0);
	transform-origin: left center;
}

.articulo{
	padding: 3.5rem 0 5rem;
}

/* --- Índice lateral ------------------------------------------------------- */

.articulo__lateral{
	margin-bottom: 2.5rem;
}

.articulo__indice{
	border-top: 2px solid var(--ee-ink);
	border-bottom: 1px solid var(--ee-hairline);
}

.articulo__indice-titulo{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 0;
	font-family: var(--ee-font-mono);
	font-size: .6875rem;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ee-ink-muted);
	cursor: pointer;
	list-style: none;
}

.articulo__indice-titulo::-webkit-details-marker{
	display: none;
}

/* En móvil el índice se pliega: la cruz lo dice. */
.articulo__indice-titulo::after{
	content: "+";
	font-size: 1rem;
	line-height: 1;
	color: var(--ee-ink);
}

.articulo__indice[open] .articulo__indice-titulo::after{
	content: "−";
}

.articulo__indice ol{
	margin: 0;
	padding: 0 0 1rem;
}

.articulo__indice li + li{
	margin-top: .125rem;
}

.articulo__indice a{
	position: relative;
	display: flex;
	gap: .75rem;
	padding: .5rem 0 .5rem .875rem;
	font-size: .9375rem;
	line-height: 1.35;
	color: var(--ee-ink-muted);
	text-decoration: none;
	border-left: 1px solid var(--ee-hairline);
	transition: color .2s var(--ee-ease), border-color .2s var(--ee-ease);
}

.articulo__indice a span{
	flex: none;
	padding-top: .125rem;
	font-family: var(--ee-font-mono);
	font-size: .6875rem;
	color: var(--ee-brand);
}

.articulo__indice a:hover,
.articulo__indice a:focus-visible{
	color: var(--ee-ink);
}

/* Apartado que se está leyendo: lo marca scripts.js (initIndice). */
.articulo__indice a.is-active{
	color: var(--ee-ink);
	border-left: 2px solid var(--ee-brand);
	padding-left: calc(.875rem - 1px);
}

/* --- En breve ------------------------------------------------------------- */

.articulo__breve{
	position: relative;
	/* A la medida del cuerpo: es la primera línea de lectura, no un cartel. */
	max-width: 42rem;
	margin: 0 0 2.5rem;
	padding: 1.75rem 1.5rem 1.75rem 1.75rem;
	background: var(--ee-tint);
	border-left: 3px solid var(--ee-brand);
}

.articulo__breve-etiqueta{
	margin: 0 0 .75rem;
	font-family: var(--ee-font-mono);
	font-size: .6875rem;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ee-brand);
}

.articulo__breve-texto{
	margin: 0;
	font-size: clamp(1.125rem, 4.2vw, 1.3125rem);
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -.015em;
	color: var(--ee-ink);
	text-wrap: pretty;
}

/* --- Portada -------------------------------------------------------------- */

.articulo__portada{
	margin: 0 0 2.75rem;
	overflow: hidden;
	background: var(--ee-tint);
}

.articulo__portada img{
	display: block;
	width: 100%;
	height: auto;
}

/* --- Cuerpo --------------------------------------------------------------- */

/*
 * Los H2 se numeran solos con un contador: el mismo 01, 02… del índice
 * lateral, así el lector sabe en qué apartado está sin mirar a un lado.
 */
.articulo__cuerpo{
	max-width: 42rem;
	font-size: 1.125rem;
	line-height: 1.75;
	color: var(--ee-ink);
	overflow-wrap: break-word;
	counter-reset: apartado;
}

.articulo__cuerpo > p:first-child{
	font-size: 1.25rem;
	line-height: 1.65;
	letter-spacing: -.01em;
}

.articulo__cuerpo p{
	margin: 0 0 1.5rem;
}

.articulo__cuerpo h2{
	margin: 3.5rem 0 1.25rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--ee-hairline);
	font-size: clamp(1.5rem, 5vw, 1.875rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.03em;
	text-wrap: balance;
	/* El header es fijo: al saltar desde el índice, el título no queda debajo. */
	scroll-margin-top: calc(var(--ee-header-h) + 1.5rem);
	counter-increment: apartado;
}

.articulo__cuerpo h2::before{
	content: counter(apartado, decimal-leading-zero);
	display: block;
	margin-bottom: .75rem;
	font-family: var(--ee-font-mono);
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .1em;
	color: var(--ee-brand);
}

.articulo__cuerpo h3{
	margin: 2.25rem 0 .75rem;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.02em;
}

.articulo__cuerpo a{
	color: var(--ee-ink);
	text-decoration: underline;
	text-decoration-color: var(--ee-brand);
	text-decoration-thickness: 1px;
	text-underline-offset: .2em;
	transition: color .2s var(--ee-ease);
}

.articulo__cuerpo a:hover,
.articulo__cuerpo a:focus-visible{
	color: var(--ee-brand);
}

.articulo__cuerpo strong{
	font-weight: 650;
}

.articulo__cuerpo ul,
.articulo__cuerpo ol{
	margin: 0 0 1.75rem;
	padding: 0;
	list-style: none;
}

.articulo__cuerpo li{
	position: relative;
	padding: .375rem 0 .375rem 1.75rem;
}

/* Viñeta: un filete corto en azul, el mismo gesto que los rótulos. */
.articulo__cuerpo ul > li::before{
	content: "";
	position: absolute;
	top: 1.2rem;
	left: 0;
	width: .875rem;
	height: 2px;
	background: var(--ee-brand);
}

.articulo__cuerpo ol{
	counter-reset: paso;
}

.articulo__cuerpo ol > li{
	counter-increment: paso;
}

.articulo__cuerpo ol > li::before{
	content: counter(paso) ".";
	position: absolute;
	left: 0;
	font-family: var(--ee-font-mono);
	font-size: .875rem;
	line-height: 2.1;
	color: var(--ee-brand);
}

.articulo__cuerpo blockquote{
	margin: 2.5rem 0;
	padding: 0 0 0 1.5rem;
	border-left: 3px solid var(--ee-brand);
	font-size: clamp(1.25rem, 4.5vw, 1.5rem);
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: -.02em;
}

.articulo__cuerpo blockquote p:last-child{
	margin-bottom: 0;
}

.articulo__cuerpo img{
	max-width: 100%;
	height: auto;
}

.articulo__cuerpo figure{
	margin: 2.5rem 0;
}

.articulo__cuerpo figcaption{
	margin-top: .75rem;
	font-size: .875rem;
	line-height: 1.5;
	color: var(--ee-ink-muted);
}

/* Tablas: filetes, cifras alineadas y scroll propio si no caben. */
.articulo__cuerpo table{
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 2rem 0;
	overflow-x: auto;
	border-collapse: collapse;
	font-size: .9375rem;
	line-height: 1.5;
	font-variant-numeric: tabular-nums;
}

.articulo__cuerpo th,
.articulo__cuerpo td{
	padding: .75rem 1rem .75rem 0;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--ee-hairline);
}

.articulo__cuerpo th{
	font-family: var(--ee-font-mono);
	font-size: .6875rem;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ee-ink-muted);
	border-bottom: 2px solid var(--ee-ink);
}

/* --- Firma ---------------------------------------------------------------- */

.articulo__firma{
	display: grid;
	gap: 1.25rem;
	justify-items: start;
	max-width: 42rem;
	margin-top: 4rem;
	padding-top: 2rem;
	border-top: 2px solid var(--ee-ink);
}

.articulo__firma-logo{
	width: auto;
	height: 1.75rem;
}

.articulo__firma-texto{
	margin: 0;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--ee-ink-muted);
}

/* --- Relacionadas --------------------------------------------------------- */

.relacionadas{
	padding: 5rem 0;
	background: var(--ee-tint);
}

.relacionadas__list{
	margin-top: 1rem;
	margin-bottom: 0;
	--bs-gutter-x: 1.5rem;
	--bs-gutter-y: 2.5rem;
}

.relacionada{
	display: block;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.relacionada__media{
	display: block;
	margin-bottom: 1.25rem;
	overflow: hidden;
	aspect-ratio: 980 / 500;
	background: var(--ee-surface);
}

.relacionada__media img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1s var(--ee-wipe);
}

.relacionada:hover .relacionada__media img,
.relacionada:focus-visible .relacionada__media img{
	transform: scale(1.04);
}

.relacionada__categoria,
.relacionada__fecha{
	display: block;
	font-family: var(--ee-font-mono);
	font-size: .6875rem;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ee-ink-muted);
}

.relacionada__categoria{ color: var(--ee-brand); }

.relacionada__titulo{
	margin: .75rem 0 .875rem;
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.015em;
	text-wrap: balance;
	transition: color var(--ee-speed) var(--ee-ease);
}

.relacionada:hover .relacionada__titulo,
.relacionada:focus-visible .relacionada__titulo{
	color: var(--ee-brand);
}


/* ==========================================================================
   34. Documentos legales
   ========================================================================== */

.legal{
	padding: 5rem 0;
}

.legal__indice{
	margin-bottom: 2.5rem;
}

.legal__indice ol{
	margin: 0;
}

.legal__indice li + li{
	margin-top: .625rem;
}

.legal__indice a{
	display: flex;
	gap: .625rem;
	font-size: .9375rem;
	line-height: 1.35;
	color: var(--ee-ink-muted);
	text-decoration: none;
	transition: color .2s var(--ee-ease);
}

.legal__indice a span{
	flex: none;
	font-family: var(--ee-font-mono);
	font-size: .6875rem;
	line-height: 1.9;
	color: var(--ee-brand);
}

.legal__indice a:hover,
.legal__indice a:focus-visible{
	color: var(--ee-ink);
}

.legal__fecha{
	margin: 0 0 2rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--ee-hairline);
	font-family: var(--ee-font-mono);
	font-size: .6875rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ee-ink-muted);
}

.legal__seccion{
	scroll-margin-top: calc(var(--ee-header-h) + 1rem);
}

.legal__cuerpo h2{
	display: flex;
	align-items: baseline;
	gap: .75rem;
	margin-top: 3rem;
}

.legal__cuerpo .legal__seccion:first-child h2{
	margin-top: 0;
}

.legal__num{
	font-family: var(--ee-font-mono);
	font-size: .75rem;
	font-weight: 500;
	color: var(--ee-brand);
}

.legal__otros{
	margin-top: 3.5rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--ee-hairline);
}

.legal__otros ul{
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin: 0;
}


/* ==========================================================================
   35. Vídeo incrustado — fachada previa al consentimiento
   --------------------------------------------------------------------------
   Lo que se ve antes de pulsar es una imagen nuestra, no un reproductor de
   YouTube: hasta el clic no sale ni una petición a Google. El marcado lo
   compone eenda_video() y el cambio lo hace initVideo() en scripts.js.
   ========================================================================== */

.video{
	margin: 2.5rem 0;
}

.video__marco{
	overflow: hidden;
	background: var(--ee-ink);
}

.video__disparador{
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

/*
 * La portada se posiciona en absoluto y NO como elemento del flex: si fluye
 * dentro del botón empuja el play fuera del encuadre.
 */
.video__portada{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(.78);
	transition: filter var(--ee-speed) var(--ee-ease), transform var(--ee-speed) var(--ee-ease);
}

.video__disparador:hover .video__portada,
.video__disparador:focus-visible .video__portada{
	filter: brightness(.62);
	transform: scale(1.03);
}

.video__titulo{
	position: absolute;
	right: 1.5rem;
	bottom: 1.25rem;
	left: 1.5rem;
	font-size: .875rem;
	font-weight: 500;
	color: rgba(255, 255, 255, .82);
	text-align: left;
}

.video__play{
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
	display: block;
	width: 4.5rem;
	height: 4.5rem;
	background: rgba(255, 255, 255, .94);
	transition: transform var(--ee-speed) var(--ee-ease), background-color var(--ee-speed) var(--ee-ease);
}

/* El triángulo se dibuja con bordes. */
.video__play::after{
	position: absolute;
	top: 50%;
	left: 50%;
	content: "";
	border-color: transparent transparent transparent var(--ee-ink);
	border-style: solid;
	border-width: .6875rem 0 .6875rem 1.125rem;
	transform: translate(-40%, -50%);
}

.video__disparador:hover .video__play,
.video__disparador:focus-visible .video__play{
	background: #fff;
	transform: scale(1.08);
}

.video__aviso{
	margin-top: .75rem;
	font-size: .8125rem;
	line-height: 1.5;
	color: var(--ee-ink-muted);
}

/* Cuando el reproductor ya está puesto, el aviso ha cumplido su función. */
.video__marco:has(iframe) + .video__aviso{
	display: none;
}


/* ==========================================================================
   36. Dirección postal
   --------------------------------------------------------------------------
   Sale de /xpanel/configuracion (eenda_direccion()) y solo se pinta en
   /contacto. <address> trae cursiva por defecto: se endereza, es un dato.
   ========================================================================== */


.canales__direccion{
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem;
	justify-items: start;
	margin-top: 1.5rem;
	padding: 2rem 1.5rem;
	border: 1px solid var(--ee-hairline);
}

.canales__direccion-texto{
	margin: 0;
	font-family: var(--ee-font-display);
	font-size: clamp(1.75rem, 7vw, 2.25rem);
	font-style: normal;
	font-weight: 800;
	line-height: 1.05;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}