/* =============================================================
   LOGAN QEHS · hoja de estilos
   Sistema editorial blanco (ver DESIGN.md). Dos azules con oficios
   distintos: el azul real de marca (#2453E6) para actuar —botones,
   acento del blog— y #169CFF para señalar —enlaces, filetes, foco—.

   Índice
     01  Variables y reinicio
     02  Tipografía y utilidades
     03  Botones
     04  Navegación flotante
     05  Portada (hero)
     06  Servicios
     07  Nosotros
     08  Digitalización
     09  Por qué LOGAN
     10  Clientes
     11  Testimonios
     12  Blog
     13  Llamada final y contacto
     14  Pie
     15  Páginas internas
     16  Responsive
     17  Movimiento reducido
     18  Ajustes finales
     19  Áreas de clic
     20  Cabecera tecnológica y página Nosotros
     21  Hero partido con foto
     22  Página Servicios
     23  Ficha de servicio
     24  Legibilidad sobre imagen
     25  Cabecera del blog (corriente digital)
     26  Variantes de la corriente y página Contacto
     27  Nosotros (composición editorial)
     28  Artículo (lectura larga)
     29  Ficha de servicio (resumen y ritmo)
     30  Servicios (jerarquía de tarjetas)
   ============================================================= */

/* =============================================================
   01. VARIABLES Y REINICIO
   ============================================================= */
:root {
	/* Sistema editorial blanco/azul. Toda la web vive sobre blanco,
	   a propósito — incluido el pie y los bloques de cierre, que se
	   comprometen con el azul mediante un lavado claro, nunca con
	   fondo oscuro. */
	--bg-main:        #FFFFFF;
	--bg-secondary:   #F5F7FA;
	--bg-card:        #FFFFFF;
	--bg-card-solid:  #FFFFFF;

	/* Lavado de acento: para el pie y los bloques que se comprometen
	   con el azul de marca sin salir nunca del blanco. */
	--bg-tint:        #EFF8FF;
	--bg-tint-soft:   #F7FBFF;
	/* Lavado más presente que --bg-tint: para las secciones "capítulo"
	   de portada que se comprometen con el azul a pantalla completa,
	   no solo como fondo de cierre. */
	--bg-tint-medium: #E1F0FF;

	--text-main:      #10161F;   /* titulares y negritas: casi negro, no negro puro */
	--text-body:      #3C4658;   /* párrafos y descripciones que se leen enteros: azul-gris con más presencia, no gris lavado */
	--text-secondary: #57647A;   /* apoyo: etiquetas, metadatos, pies de foto */
	--text-dim:       #9AA3AF;   /* decorativo. Nunca texto que haya que leer */
	--text-on-dark:       #F5F7FA;
	--text-on-dark-body:  #C7D0DA;
	--text-on-dark-dim:   #8391A0;

	--accent:         #169CFF;
	--accent-light:   #6CCBFF;
	--accent-deep:    #0B6BC4;
	--accent-navy:    #0A2F55;   /* azul comprometido de los bloques a página completa */

	--border:         rgba(16, 22, 31, .11);
	--border-soft:    rgba(16, 22, 31, .07);
	--border-accent:  rgba(22, 156, 255, .40);
	--border-on-dark: rgba(255, 255, 255, .12);

	--shadow-card: 0 24px 48px -32px rgba(16, 22, 31, .18);
	--shadow-lift: 0 30px 60px -30px rgba(16, 22, 31, .22);

	--sans:  "Bitter", Georgia, "Times New Roman", serif;
	--serif: "Playfair Display", Georgia, "Times New Roman", serif;

	/* Escala de párrafo, en un solo sitio para no repetirla en cada
	   clase. --fs-parrafo: el texto descriptivo que se lee entero
	   (introducciones, "Quiénes somos", fichas de servicio, artículos)
	   — 16px en móvil, 17-18px en desktop. --fs-parrafo-sm: texto de
	   tarjeta o apoyo, siempre un escalón más chico. */
	--fs-parrafo:    clamp(1rem, .95rem + .2vw, 1.125rem);
	--lh-parrafo:    1.68;
	--fs-parrafo-sm: clamp(.94rem, .9rem + .18vw, 1rem);
	--lh-parrafo-sm: 1.6;

	--maxw: 1280px;
	--gut:  clamp(1.25rem, 4vw, 2.5rem);
	--nav-h: 76px;

	--ease: cubic-bezier(.16, 1, .3, 1);
	--radius: 14px;
}

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--nav-h) + 24px);
}

body {
	margin: 0;
	background: var(--bg-main);
	color: var(--text-main);
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.6;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* clip y no hidden: hidden en body rompe position:sticky */
	overflow-x: clip;
}

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

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }

::selection { background: var(--accent); color: #fff; }

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

.skip-link {
	position: absolute; left: 1rem; top: -100px; z-index: 2000;
	padding: .7rem 1.1rem; border-radius: 999px;
	/* --accent-deep: el blanco sobre #169CFF no llegaba a 4.5:1. */
	background: var(--accent-deep); color: #fff; font-weight: 600; font-size: .9rem;
	transition: top .25s var(--ease);
}
.skip-link:focus { top: 1rem; }


/* =============================================================
   02. TIPOGRAFÍA Y UTILIDADES
   ============================================================= */
.wrap {
	width: 100%; max-width: var(--maxw);
	margin-inline: auto; padding-inline: var(--gut);
}
.wrap-ancho { max-width: 1480px; }

/* Etiqueta pequeña en versales sobre cada sección */
.eyebrow, .sec-label {
	display: inline-flex; align-items: center; gap: .6rem;
	font-size: .72rem; font-weight: 600;
	letter-spacing: .22em; text-transform: uppercase;
	color: var(--text-secondary);
}

/* Titulares de sección */
.sec-title, h2.sec-title {
	font-family: var(--serif);
	font-size: clamp(2rem, 4.2vw, 3.6rem);
	font-weight: 400; line-height: 1.08; letter-spacing: -.01em;
	margin-top: 1.1rem; max-width: 18ch;
}
.sec-title em { font-style: normal; color: var(--text-secondary); }
.sec-title-sm { font-size: clamp(1.75rem, 3.4vw, 2.8rem); max-width: 20ch; }

.sec-intro {
	margin-top: 1.3rem; max-width: 56ch;
	color: var(--text-body); font-size: var(--fs-parrafo); line-height: var(--lh-parrafo); font-weight: 500;
}

.sec-head { margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.sec-head-center { text-align: center; }
.sec-head-center .sec-title,
.sec-head-center .sec-intro { margin-inline: auto; }

/* Cabecera de sección con título a la izquierda y enlace a la derecha */
.sec-head-row {
	display: flex; flex-wrap: wrap; gap: 1.5rem 2rem;
	align-items: flex-end; justify-content: space-between;
	margin-bottom: clamp(2.5rem, 6vw, 4rem);
}
.sec-head-row .sec-title { margin-bottom: 0; }

section { position: relative; }
.seccion { padding: clamp(4.5rem, 11vw, 9rem) 0; }
.seccion-alt { background: var(--bg-secondary); }
/* Capítulo azul: mismo gesto que .seccion-alt, pero comprometido
   con el acento de marca en vez del gris. */
.seccion-blue { background: var(--bg-tint-medium); }

/* Línea divisoria fina entre secciones */
.linea { height: 1px; background: var(--border-soft); border: 0; margin: 0; }

/* Apariciones al hacer scroll */
.reveal {
	opacity: 0; transform: translateY(30px);
	transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }
/* Red de seguridad: si el observador nunca se dispara, el texto
   partido en palabras tiene que verse igual. */
.reveal[data-split] { opacity: 1; transform: none; }

/* Variantes direccionales: mismo .reveal (el observador de app.js
   no distingue), solo cambia de dónde viene. Pensado para grupos de
   tarjetas donde cada una entra desde el lado en el que va a quedar
   (izquierda, derecha) en vez de todas subiendo igual; ".reveal" a
   secas ya cubre "desde abajo", que es el caso por defecto. */
.reveal.reveal-left  { transform: translate3d(-64px, 16px, 0); }
.reveal.reveal-right { transform: translate3d(64px, 16px, 0); }
.reveal.reveal-left.is-in, .reveal.reveal-right.is-in { transform: none; }

.reveal-img { opacity: 0; transform: scale(.96); transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
.reveal-img.is-in { opacity: 1; transform: none; }

/* Palabras y letras */
.split-word, .split-char { display: inline-block; will-change: transform; }
[data-split] .split-word {
	opacity: 0; transform: translateY(26px);
	transition: opacity .8s var(--ease), transform .8s var(--ease);
}
[data-split].is-in .split-word { opacity: 1; transform: none; }


/* =============================================================
   03. BOTONES
   ============================================================= */
/* El padding va SIEMPRE en el propio .btn (sea <a> o <button>), nunca
   en un contenedor: así todo el área visual responde al clic, no solo
   el texto. min-height 44px es el mínimo cómodo para pulsar. */
.btn {
	position: relative;
	display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
	min-height: 44px;
	padding: .8rem 1.6rem; border-radius: 999px;
	font-size: .94rem; font-weight: 600; letter-spacing: -.01em;
	white-space: nowrap; border: 1px solid transparent;
	transition: background-color .35s var(--ease), border-color .35s var(--ease),
	            color .35s var(--ease), transform .45s var(--ease), box-shadow .45s var(--ease),
	            min-height 300ms ease, padding 300ms ease, font-size 300ms ease;
}
/* Los iconos y el spinner no deben interceptar el clic: si el puntero
   cae sobre el SVG, el evento tiene que llegar igual al botón. */
.btn > svg, .btn > .btn-spin { pointer-events: none; }
.btn svg { width: 15px; height: 15px; transition: transform .4s var(--ease); }
.btn:hover svg { transform: translate(3px, -3px); }

/* Fondo con el azul real de la paleta oficial (#2453E6), no con
   --accent (#169CFF): el blanco sobre #169CFF daba un contraste de
   2,9:1 y las palabras del botón apenas se leían. Sobre #2453E6 es
   6,2:1. Hover en el azul profundo de la paleta (#041DB4). */
.btn-primary { background: #2453E6; color: #fff; box-shadow: 0 12px 26px -12px rgba(36, 83, 230, .55); }
.btn-primary:hover { background: #041DB4; color: #fff; transform: translateY(-2px); box-shadow: 0 16px 32px -12px rgba(4, 29, 180, .5); }

.btn-ghost { background: transparent; border-color: var(--border); color: var(--text-main); }
.btn-ghost:hover { border-color: var(--accent); background: rgba(22, 156, 255, .06); color: var(--accent-deep); transform: translateY(-2px); }

/* Variante para botones sobre foto o sobre el pie oscuro */
.btn-light { background: rgba(255, 255, 255, .12); border-color: var(--border-on-dark); color: #fff; }
.btn-light:hover { background: rgba(255, 255, 255, .2); transform: translateY(-2px); }

.btn-sm { padding: .68rem 1.15rem; font-size: .87rem; }
.btn-full { width: 100%; }

.btn-spin {
	width: 15px; height: 15px; border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, .3); border-top-color: #fff;
	display: none; animation: girar .8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
.form.is-sending .btn-spin { display: block; }
.form.is-sending button[type="submit"] { pointer-events: none; opacity: .75; }

/* Enlace con flecha, muy usado en listados */
.enlace {
	display: inline-flex; align-items: center; gap: .45rem;
	font-size: .9rem; font-weight: 600; color: var(--accent);
	transition: gap .3s var(--ease), color .3s;
}
.enlace:hover { gap: .8rem; color: var(--accent-light); }


/* =============================================================
   04. NAVEGACIÓN
   Dos modelos según el scroll. Al bajar 60px (.is-stuck) es una
   barra blanca flotante con canto suave (--radius) y sombra
   difusa; enlaces sueltos con línea de acento bajo el activo y el
   CTA primario en píldora. Antes de eso, en el viewport inicial
   sobre la foto del hero (o la cabecera oscura de páginas
   internas), la barra desaparece: transparente a ancho completo,
   texto claro y CTA en contorno, con el logo en su color real.
   ============================================================= */
.nav {
	position: fixed; top: 0; left: 0; right: 0; z-index: 900;
	padding: 16px var(--gut);
	transition: padding 300ms ease;
}
.nav-in {
	max-width: 1480px; margin-inline: auto;
	display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
	padding: 10px 10px 10px 24px;
	/* Barra blanca con canto suave (el mismo radio de las tarjetas),
	   no una píldora: se lee como una regla del documento, y la
	   sombra —muy difusa, sin trazo de color— solo la despega de lo
	   que pasa por debajo. */
	border: 1px solid var(--border-soft); border-radius: var(--radius);
	background: rgba(255, 255, 255, .94);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	box-shadow: 0 18px 40px -22px rgba(16, 22, 31, .28);
	transition: background-color 300ms ease, border-color 300ms ease,
	            backdrop-filter 300ms ease, box-shadow 300ms ease, padding 300ms ease;
}

/* --- estado fijado al bajar 60px: la misma barra blanca, solo más
   compacta. --- */
.nav.is-stuck { padding-top: 12px; padding-bottom: 12px; }
.nav.is-stuck .nav-in { padding: 7px 7px 7px 18px; }

/* --- marca --- */
.nav-brand {
	display: inline-flex; align-items: center; gap: .7rem; flex: none;
	padding: 0 6px 0 0;   /* el alto lo da el logo, que ya supera 44px */
}
.nav-logos { display: block; line-height: 0; }

/* El logo es un lockup apilado de 1,47:1 (la S sobre LOGAN), así que
   se dimensiona por ALTURA: fijando el ancho, el navbar crecería
   hasta ~110 px. height:auto mantiene su proporción real. Va
   siempre a color, tanto arriba como fijado. */
.nav-logo { height: 58px; width: auto; max-width: 100%; transition: height 300ms ease; }
.nav.is-stuck .nav-logo { height: 40px; }

.nav-brand-tag {
	font-size: .7rem; font-weight: 700; letter-spacing: .28em;
	color: var(--text-dim); padding-left: .7rem;
	border-left: 1px solid var(--border);
	transition: color 300ms ease, border-color 300ms ease;
}
/* --- enlaces ---
   Sueltos, sin cápsula ni fondo: el activo se marca con una línea
   corta de acento bajo la palabra —el mismo tick de las etiquetas,
   girado a horizontal—, no con un relleno. */
.nav-links {
	display: flex; align-items: center; gap: clamp(1.2rem, 2.2vw, 2rem);
}
/* El padding va en el propio <a>: si estuviera en un contenedor,
   solo serían clicables las letras. min-height 44px es el mínimo
   cómodo recomendado para un objetivo táctil. */
.nav-links > a, .nav-drop > a {
	position: relative;
	display: inline-flex; align-items: center;
	min-height: 44px; padding: 0;
	font-size: .89rem; font-weight: 500; color: var(--text-body);
	transition: color 300ms ease, min-height 300ms ease, font-size 300ms ease;
}
.nav-links > a::after, .nav-drop > a::after {
	content: ""; position: absolute; left: 0; right: 100%; bottom: 8px;
	height: 1.5px; border-radius: 2px; background: var(--accent);
	transition: right .35s var(--ease), background-color 300ms ease;
}
.nav-links > a:hover::after, .nav-drop > a:hover::after,
.nav-links > a.is-active::after, .nav-drop > a.is-active::after { right: 0; }
.nav-links > a:hover, .nav-drop > a:hover,
.nav-links a.is-active, .nav-drop > a.is-active { color: var(--text-main); }

/* Compacto al hacer scroll: menos alto, sin bajar de 38px para que
   sigan siendo cómodos de pulsar. */
.nav.is-stuck .nav-links > a, .nav.is-stuck .nav-drop > a { min-height: 38px; font-size: .86rem; }
.nav.is-stuck .nav-links > a::after, .nav.is-stuck .nav-drop > a::after { bottom: 5px; }
.nav.is-stuck .nav-cta { min-height: 38px; padding: 8px 18px; font-size: .84rem; }

/* --- desplegable de servicios --- */
.nav-drop { position: relative; display: inline-flex; }
.nav-drop::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 16px; }
.nav-drop-menu {
	position: absolute; top: calc(100% + 14px); left: 50%;
	transform: translateX(-50%) translateY(-8px);
	min-width: 268px; padding: .5rem;
	display: grid; gap: 2px;
	background: rgba(255, 255, 255, .96); backdrop-filter: blur(18px);
	border: 1px solid var(--border); border-radius: 16px;
	box-shadow: var(--shadow-lift);
	opacity: 0; visibility: hidden; pointer-events: none;
	transition: opacity .3s var(--ease), transform .35s var(--ease), visibility .3s;
	z-index: 20;
}
.nav-drop:hover .nav-drop-menu, .nav-drop:focus-within .nav-drop-menu {
	opacity: 1; visibility: visible; pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}
.nav-drop-menu a {
	padding: .6rem .85rem; border-radius: 10px;
	font-size: .88rem; color: var(--text-body);
	transition: background-color .25s, color .25s;
}
.nav-drop-menu a:hover { background: rgba(22, 156, 255, .09); color: var(--accent-deep); }

.nav-cta { flex: none; }

/* --- hamburguesa --- */
.nav-burger {
	display: none; width: 44px; height: 44px; flex: none;
	border: 1px solid var(--border); border-radius: 999px;
	background: rgba(16, 22, 31, .035);
	place-items: center; gap: 5px;
	transition: border-color .3s, background-color .3s;
}
.nav-burger:hover { border-color: var(--border-accent); }
.nav-burger span {
	display: block; width: 17px; height: 1.5px; border-radius: 2px;
	background: var(--text-main);
	transition: transform .4s var(--ease), opacity .3s, background-color .3s;
}
body.menu-abierto .nav-burger span:first-child { transform: translateY(3.25px) rotate(45deg); }
body.menu-abierto .nav-burger span:last-child  { transform: translateY(-3.25px) rotate(-45deg); }

/* =============================================================
   04b. MODELO DEL VIEWPORT INICIAL (antes de hacer scroll)
   Todo lo de arriba es la cápsula; esto la desmonta pieza por
   pieza solo mientras .nav no lleva .is-stuck, para que la barra
   se integre con la fotografía en vez de flotar sobre ella. El
   logo no cambia: se ve tal cual, a color, en los dos modelos.

   Solo se aplica en páginas con cabecera oscura. Las que empiezan
   sobre fondo claro (ficha de Digitalización, blog y artículos)
   llevan la clase .cabecera-clara en el body: sin esa guarda, el
   texto claro del nav quedaría ilegible ahí desde el primer
   fotograma, antes de que hubiera scroll que lo arreglara.
   ============================================================= */
body:not(.cabecera-clara) .nav:not(.is-stuck) {
	background: linear-gradient(to bottom, rgba(5, 7, 10, .38) 0%, rgba(5, 7, 10, .12) 60%, transparent 100%);
}
body:not(.cabecera-clara) .nav:not(.is-stuck) .nav-in {
	background: transparent; border-color: transparent;
	backdrop-filter: none; -webkit-backdrop-filter: none;
	box-shadow: none;
}
body:not(.cabecera-clara) .nav:not(.is-stuck) .nav-brand-tag { color: var(--text-on-dark-dim); border-left-color: var(--border-on-dark); }

body:not(.cabecera-clara) .nav:not(.is-stuck) .nav-links {
	background: transparent; border-color: transparent;
	backdrop-filter: none; -webkit-backdrop-filter: none;
	gap: 1.9rem; padding: 0;
}
body:not(.cabecera-clara) .nav:not(.is-stuck) .nav-links > a, body:not(.cabecera-clara) .nav:not(.is-stuck) .nav-drop > a {
	padding: 0; border-radius: 0; color: var(--text-on-dark-body);
}
body:not(.cabecera-clara) .nav:not(.is-stuck) .nav-links > a::after, body:not(.cabecera-clara) .nav:not(.is-stuck) .nav-drop > a::after {
	content: ""; position: absolute; left: 0; right: 100%; bottom: 12px;
	height: 1.5px; background: currentColor;
	transition: right .35s var(--ease);
}
body:not(.cabecera-clara) .nav:not(.is-stuck) .nav-links > a:hover::after, body:not(.cabecera-clara) .nav:not(.is-stuck) .nav-drop > a:hover::after,
body:not(.cabecera-clara) .nav:not(.is-stuck) .nav-links > a.is-active::after, body:not(.cabecera-clara) .nav:not(.is-stuck) .nav-drop > a.is-active::after { right: 0; }
body:not(.cabecera-clara) .nav:not(.is-stuck) .nav-links > a:hover, body:not(.cabecera-clara) .nav:not(.is-stuck) .nav-drop > a:hover,
body:not(.cabecera-clara) .nav:not(.is-stuck) .nav-links a.is-active, body:not(.cabecera-clara) .nav:not(.is-stuck) .nav-drop > a.is-active {
	color: #fff; background: transparent;
}

body:not(.cabecera-clara) .nav:not(.is-stuck) .nav-cta {
	border-radius: 999px;
	background: transparent; border: 1px solid rgba(255, 255, 255, .5);
	color: #fff; box-shadow: none;
}
body:not(.cabecera-clara) .nav:not(.is-stuck) .nav-cta:hover { background: rgba(255, 255, 255, .14); border-color: #fff; color: #fff; transform: none; }

body:not(.cabecera-clara) .nav:not(.is-stuck) .nav-burger { border-color: rgba(255, 255, 255, .5); background: transparent; }
body:not(.cabecera-clara) .nav:not(.is-stuck) .nav-burger:hover { border-color: #fff; }
body:not(.cabecera-clara) .nav:not(.is-stuck) .nav-burger span { background: #fff; }

/* --- menú móvil ---
   Vidrio claro, no oscuro: el resto de la cápsula de navegación ya
   vive en tonos claros, y un panel negro aquí dejaría el título y
   los enlaces (en gris oscuro, pensados para fondo blanco)
   prácticamente invisibles. */
.menu {
	position: fixed; inset: 0; z-index: 890;
	background: rgba(255, 255, 255, .98);
	backdrop-filter: blur(20px);
	display: grid; align-content: center;
	padding: calc(var(--nav-h) + 2rem) var(--gut) 2rem;
	opacity: 0; transition: opacity .4s var(--ease);
}
.menu.is-open { opacity: 1; }
.menu-in { display: grid; gap: .35rem; max-width: 520px; margin-inline: auto; width: 100%; }
.menu-in > a {
	display: flex; align-items: baseline; gap: 1rem;
	padding: .75rem 0; border-bottom: 1px solid var(--border-soft);
	font-size: clamp(1.6rem, 7vw, 2.3rem); font-weight: 500; letter-spacing: -.03em;
	color: var(--text-main);
	transition: color .3s, padding-left .35s var(--ease);
}
.menu-in > a:hover, .menu-in > a.is-active { color: var(--accent-deep); padding-left: .6rem; }
.menu-in i {
	font-style: normal; font-size: .7rem; font-weight: 600;
	letter-spacing: .16em; color: var(--accent); flex: none;
}
.menu-foot { margin-top: 2rem; display: grid; gap: .4rem; color: var(--text-body); font-size: .95rem; }
.menu-foot a:hover { color: var(--accent-light); }


/* =============================================================
   05. PORTADA (HERO)
   Foto de fondo con velo (mismo lenguaje que las cabeceras
   internas), a pantalla completa. El texto va arriba, sobre la
   parte más oscura del velo, que se desvanece a blanco hacia el
   final del hero.
   ============================================================= */
.hero {
	position: relative; isolation: isolate;
	background: var(--bg-main);
	min-height: 100vh; min-height: 100svh;
	display: flex; flex-direction: column; justify-content: flex-end;
	padding: calc(var(--nav-h) + 2.5rem) 0 clamp(2.5rem, 6vw, 4rem);
	overflow: hidden;
}

/* Resplandor azul muy tenue sobre el velo */
.hero::before {
	content: ""; position: absolute; inset: 0;
	background: radial-gradient(circle at 50% 46%, rgba(22, 156, 255, .08), transparent 50%);
	z-index: 0;
	pointer-events: none;
}

/* Fondo fotográfico + velo: misma técnica que .phero-bg/.phero-veil
   en las páginas internas, para quedar dentro del mismo sistema.
   Oscuro abajo (donde va el texto), disuelto hacia la foto arriba. */
.hero-bg { position: absolute; inset: 0; z-index: -2; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.hero-veil {
	position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(to top, rgba(5, 7, 10, .65) 0%, rgba(5, 7, 10, .3) 45%, transparent 85%);
	pointer-events: none;
}

/* --- contenido editorial ---
   Composición asimétrica: el texto vive en la mitad izquierda de la
   foto (cielo y montaña, sin sujeto), con margen respecto al borde
   pero sin centrarse. El ancho se limita a poco menos de la mitad
   de la pantalla para no invadir nunca al trabajador protagonista,
   que ocupa la derecha del encuadre. */
.hero-in {
	position: relative; z-index: 3; width: min(560px, 46vw);
	margin-bottom: 18vh;
	margin-left: clamp(1.5rem, 6vw, 6rem);
}
.hero-eyebrow { margin-bottom: 1.5rem; }

.hero-title {
	font-family: var(--serif);
	font-size: clamp(2rem, 4.2vw, 3.6rem);
	font-weight: 400; line-height: 1.05; letter-spacing: -.005em;
	color: var(--text-on-dark);
	margin: 0;
}
/* Mismo gesto que el titular de /nosotros/: las palabras suben
   desde abajo a la vez (.reveal + data-split, ver initSplitText()),
   no letra por letra. */
.hero-title[data-split] .split-word {
	transition-duration: .65s !important;
	transition-delay: .12s !important;
}
@media (prefers-reduced-motion: reduce) {
	.hero-title[data-split] .split-word {
		transition-duration: .28s !important;
		transition-delay: 0ms !important;
	}
}

.hero-sub {
	margin-top: 1.8rem; max-width: 52ch;
	font-family: var(--serif);
	font-weight: 400; letter-spacing: -.005em;
	color: var(--text-on-dark-body); font-size: clamp(1.5rem, 2.8vw, 2rem);
}
.hero-cta { margin-top: 2.4rem; display: flex; flex-wrap: wrap; gap: .75rem; }

/* Los tres bloques entran con retraso propio */
.hero-fade { opacity: 0; transform: translateY(24px); }
.hero.is-listo .hero-fade {
	animation: hero-sube .9s var(--ease) forwards;
	animation-delay: var(--retraso, 0ms);
}
@keyframes hero-sube { to { opacity: 1; transform: none; } }

/* Indicador de scroll */
.hero-scroll {
	position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%);
	z-index: 3; display: grid; justify-items: center; gap: .5rem;
	font-size: .64rem; letter-spacing: .22em; text-transform: uppercase; color: var(--text-on-dark-dim);
	opacity: 0; animation: hero-sube .9s var(--ease) 2200ms forwards;
}
.hero-scroll span { display: block; width: 1px; height: 34px; background: linear-gradient(var(--accent), transparent); }


/* =============================================================
   06. SERVICIOS — tres destacados de portada
   Un bloque líder (foto más grande, título mayor) y dos secundarios
   apilados a su lado: jerarquía editorial, no tres tarjetas iguales.
   El catálogo completo vive en /servicios/, no aquí.
   ============================================================= */
.hsrv-grid { display: grid; gap: clamp(1.1rem, 2.6vw, 1.5rem); }

.hsrv-card {
	position: relative;
	border-radius: var(--radius);
	transition: transform .5s var(--ease);
}
.hsrv-link-area { display: flex; flex-direction: column; height: 100%; }
.hsrv-card:hover { transform: translateY(-3px); }

.hsrv-media {
	position: relative; overflow: hidden; border-radius: var(--radius);
	border: 1px solid var(--border); background: var(--bg-secondary);
	aspect-ratio: 16 / 11;
}
.hsrv-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.hsrv-card:hover .hsrv-media img { transform: scale(1.05); }

.hsrv-body { padding: 1.3rem .1rem 0; flex: 1; display: flex; flex-direction: column; }
.hsrv-tag {
	font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
	color: var(--accent-deep);
}
.hsrv-titulo {
	margin-top: .55rem;
	font-size: clamp(1.22rem, 2vw, 1.4rem);
	font-weight: 500; line-height: 1.14; letter-spacing: -.025em;
	transition: color .35s var(--ease);
}
.hsrv-card:hover .hsrv-titulo { color: var(--accent-deep); }
.hsrv-texto { margin-top: .5rem; color: var(--text-body); font-size: var(--fs-parrafo-sm); line-height: var(--lh-parrafo-sm); max-width: 42ch; }
.hsrv-enlace { margin-top: auto; padding-top: 1rem; }

/* --- el bloque líder: foto y titular más grandes --- */
.hsrv-card-lead .hsrv-media { aspect-ratio: 4 / 3; }
.hsrv-card-lead .hsrv-titulo { font-size: clamp(1.55rem, 2.8vw, 2.15rem); }
.hsrv-card-lead .hsrv-texto { font-size: var(--fs-parrafo); line-height: var(--lh-parrafo); max-width: 48ch; }
/* El bloque de texto va centrado como una sola unidad junto a la
   foto alta: el enlace se queda pegado al texto, no empujado al
   fondo de la columna por el margin-top:auto de la versión apilada. */
.hsrv-card-lead .hsrv-enlace { margin-top: 1.3rem; }

.hsrv-foot { display: flex; justify-content: center; margin-top: clamp(2.4rem, 5vw, 3.4rem); }

@media (min-width: 720px) {
	.hsrv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hsrv-card-lead { grid-column: 1 / -1; }
	.hsrv-card-lead .hsrv-link-area { flex-direction: row; align-items: stretch; gap: clamp(1.5rem, 3vw, 2.5rem); }
	.hsrv-card-lead .hsrv-media { flex: 1 1 56%; aspect-ratio: auto; }
	.hsrv-card-lead .hsrv-body { flex: 1 1 44%; padding-top: 0; justify-content: center; }
}
@media (min-width: 960px) {
	.hsrv-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: clamp(1.4rem, 2.6vw, 2rem); }
	.hsrv-card-lead { grid-column: 1; grid-row: 1 / 3; }
	.hsrv-card:not(.hsrv-card-lead) .hsrv-media { aspect-ratio: 16 / 10; }
}


/* =============================================================
   07. NOSOTROS
   Titular centrado arriba; debajo, dos encuadres escalonados de la
   misma foto (con un sello giratorio entre ambos) a la izquierda y
   texto + pilares + botón a la derecha. Las cifras cierran abajo.
   ============================================================= */
.nos-head { text-align: center; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.nos-titulo {
	font-family: var(--serif);
	font-size: clamp(2rem, 4.2vw, 3.4rem);
	font-weight: 400; line-height: 1.08; letter-spacing: -.01em;
	margin: 1.2rem auto 0; max-width: 20ch; text-wrap: balance;
}
.nos-grid { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }

/* Fotos en escalera: la de arriba (el equipo en la torre) a la
   izquierda, la de abajo (la brigada en el simulacro) corrida a la
   derecha. El hueco que queda a la derecha de la primera lo ocupa el
   sello, justo encima de la segunda. */
.nos-fotos {
	display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: clamp(.75rem, 1.6vw, 1.1rem);
}
.nos-foto { overflow: hidden; border-radius: 20px; background: var(--bg-tint); }
.nos-foto img { width: 100%; height: 100%; object-fit: cover; }
.nos-foto--a { grid-column: 1 / 10; grid-row: 1; aspect-ratio: 4 / 3; }
.nos-foto--a img { object-position: 40% 32%; }
.nos-foto--b { grid-column: 3 / 13; grid-row: 2; aspect-ratio: 16 / 10; }
.nos-foto--b img { object-position: 52% 58%; }

/* Sello: el eslogan en círculo, girando despacio, con el check de
   verificación en el centro. Al costado de la primera foto, apoyado
   sobre el canto superior de la segunda. */
.nos-sello {
	position: relative;
	grid-column: 10 / 13; grid-row: 1;
	align-self: end; justify-self: center;
	width: min(clamp(84px, 10vw, 128px), 100%); aspect-ratio: 1;
	border-radius: 50%;
	background: var(--bg-main);
	border: 1px solid var(--border);
	display: grid; place-items: center;
}
.nos-sello-txt {
	position: absolute; inset: 6%; width: 88%; height: 88%;
	animation: nos-sello-giro 22s linear infinite;
}
.nos-sello-txt text {
	font-family: var(--sans); font-size: 9.4px; font-weight: 600;
	letter-spacing: .14em; fill: var(--text-main);
}
.nos-sello-centro {
	width: 38%; aspect-ratio: 1; border-radius: 50%;
	display: grid; place-items: center;
	background: #2453E6; color: #fff;
}
.nos-sello-centro svg { width: 46%; height: 46%; }
@keyframes nos-sello-giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
	.nos-sello-txt { animation: none; }
}

.nos-texto {
	color: var(--text-body); display: grid; gap: 1.15rem;
	font-size: var(--fs-parrafo); line-height: var(--lh-parrafo); font-weight: 500;
	max-width: 56ch;
}
.nos-texto strong { color: var(--text-main); font-weight: 600; }

/* Pilares en filas: icono de acento, título y una línea de texto,
   separados por filetes finos — el lugar de las barras de la
   referencia, pero con contenido real. */
.nos-pilares { margin-top: clamp(1.8rem, 3.5vw, 2.4rem); border-top: 1px solid var(--border); }
.nos-pilar {
	display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.1rem;
	align-items: start;
	padding: 1.15rem 0; border-bottom: 1px solid var(--border);
}
.nos-pilar-ico {
	width: 44px; height: 44px; border-radius: 50%;
	display: grid; place-items: center;
	background: var(--bg-main); border: 1px solid var(--border-accent);
	color: var(--accent-deep); font-size: 1.25rem; line-height: 1;
	transition: background-color .35s var(--ease), color .35s var(--ease);
}
.nos-pilar:hover .nos-pilar-ico { background: #2453E6; border-color: #2453E6; color: #fff; }
.nos-pilar h3 { font-size: 1.05rem; font-weight: 600; letter-spacing: -.02em; color: var(--text-main); }
.nos-pilar p {
	margin-top: .25rem; color: var(--text-body); max-width: 52ch;
	font-size: var(--fs-parrafo-sm); line-height: var(--lh-parrafo-sm);
}
.nos-cta { margin-top: clamp(1.8rem, 3.5vw, 2.4rem); }

@media (min-width: 960px) {
	.nos-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr); gap: clamp(2.5rem, 4vw, 4rem); }
}
/* En móvil el sello necesita una columna más para que el eslogan
   se siga leyendo. */
@media (max-width: 559px) {
	.nos-foto--a { grid-column: 1 / 9; }
	.nos-sello { grid-column: 9 / 13; width: min(104px, 100%); }
}

/* Al pasar el cursor, la foto crece un poco y se pone por delante
   de la otra. */
.nos-foto { position: relative; z-index: 0; }
.nos-foto:hover { z-index: 1; }
/* Selector reforzado: tiene que ganar a las reglas de entrada
   (.reveal-img.is-in) que dejan transform en none. */
.nos-fotos .nos-foto.reveal-img.is-in:hover {
	transform: scale(1.07);
	box-shadow: var(--shadow-lift);
	transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
	.nos-fotos .nos-foto.reveal-img.is-in:hover { transform: none; }
}

/* Cifras de la portada: fila abierta, sin cajas, como cierre de la
   sección. Cada cifra lleva su check de verificación delante. */
#nosotros .metricas {
	margin-top: clamp(3.5rem, 8vw, 6rem);
	padding-top: clamp(2rem, 4vw, 2.8rem);
	background: none; border: 0; border-top: 1px solid var(--border);
	border-radius: 0; overflow: visible;
	gap: clamp(1.6rem, 3vw, 2.4rem);
}
#nosotros .metrica { background: none; padding: 0; }
#nosotros .metrica-num { font-size: clamp(2.2rem, 4.4vw, 3.2rem); color: var(--text-main); }
#nosotros .metrica-check { color: var(--accent); }
#nosotros .metrica-txt { font-size: .95rem; max-width: 24ch; }

/* Métricas */
.metricas {
	margin-top: clamp(3rem, 7vw, 5rem);
	display: grid; gap: 1px;
	background: var(--border-soft);
	border: 1px solid var(--border-soft); border-radius: var(--radius);
	overflow: hidden;
}
.metrica { background: var(--bg-main); padding: clamp(1.6rem, 3.5vw, 2.4rem); }
.metrica-num-wrap { display: inline-flex; align-items: baseline; gap: .4rem; }
.metrica-num {
	font-size: clamp(2.4rem, 5.5vw, 4rem); font-weight: 500;
	line-height: 1; letter-spacing: -.05em; color: var(--accent);
	font-variant-numeric: tabular-nums;
}
/* Check de verificación: aparece cuando el conteo termina (ver app.js) */
.metrica-check {
	width: 15px; height: 15px; flex: none; color: var(--accent);
	opacity: 0; transform: scale(.6);
	transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.metrica-num.is-counted ~ .metrica-check { opacity: 1; transform: scale(1); }
.metrica-txt { margin-top: .6rem; color: var(--text-secondary); font-size: .92rem; }

/* Los tres pilares */
.pilares { display: grid; gap: 1rem; }
.pilar {
	position: relative; padding: clamp(1.6rem, 3.5vw, 2.2rem);
	background: var(--bg-card); border: 1px solid var(--border);
	border-radius: var(--radius);
	transition: border-color .4s var(--ease), transform .5s var(--ease), background-color .4s;
}
.pilar:hover { border-color: var(--border-accent); transform: translateY(-4px); }
.pilar-n { font-size: .76rem; font-weight: 600; letter-spacing: .18em; color: var(--accent); }
.pilar-ico-font { display: block; font-size: 2rem; line-height: 1; color: var(--accent); margin: 1.3rem 0 1.1rem; }
.pilar h3 { font-size: 1.2rem; font-weight: 600; letter-spacing: -.02em; }
.pilar p { margin-top: .6rem; color: var(--text-body); font-size: var(--fs-parrafo-sm); line-height: var(--lh-parrafo-sm); }


/* =============================================================
   08. DIGITALIZACIÓN (Inicio)
   Referencia: referencias/digitalizacionHQSE-objetivo.png, con el
   teléfono a la IZQUIERDA. El móvil, entero y grande, va rodeado
   por los cuatro módulos como fichas blancas que flotan despacio;
   a la derecha, titular, bajada, botón y la lista de módulos.
   Fondo claro: de blanco a un cielo muy suave, con dos manchas de
   luz del azul de la paleta (#2453E6) en transparencia — sin
   cuadrícula ni puntos. Titulares en #1B146A, texto en #4D4D4D.
   ============================================================= */
.digital {
	/* El naranja de riesgo del teléfono (ver sección 31) vive como
	   variable de la raíz que lo contiene: aquí, esta sección. */
	--dig-naranja: #FF7A29;
	--dig-naranja-deep: #D95E14;
	--dig-naranja-suave: rgba(255, 122, 41, .14);
	position: relative; overflow: hidden; isolation: isolate;
	background: linear-gradient(180deg, var(--bg-main) 0%, rgba(36, 83, 230, .06) 100%);
}
.dig2-luz { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.dig2-luz--1 {
	width: 620px; height: 620px; left: 2%; top: 50%; transform: translateY(-50%);
	background: radial-gradient(closest-side, rgba(36, 83, 230, .2), rgba(36, 83, 230, 0));
}
.dig2-luz--2 {
	width: 380px; height: 380px; right: -100px; bottom: -120px;
	background: radial-gradient(closest-side, rgba(36, 83, 230, .1), rgba(36, 83, 230, 0));
}

.dig2 { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
.digital .eyebrow { color: #1B146A; }
.digital .sec-title { color: #1B146A; max-width: 15ch; }
.digital .sec-title em { color: #2453E6; }
.digital .sec-intro { color: #4D4D4D; max-width: 46ch; }
.dig2-cta { margin-top: 1.8rem; }

.dig2-lista { margin-top: 1.8rem; display: grid; gap: .9rem; }
.dig2-lista li { display: flex; gap: .7rem; align-items: baseline; color: #4D4D4D; font-size: .95rem; line-height: 1.55; }
.dig2-lista li::before {
	content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%;
	background: #2453E6; transform: translateY(-1px);
}
.dig2-lista strong { color: #1B146A; font-weight: 600; }

/* --- Teléfono + fichas ---------------------------------------- */
.dig2-escena { position: relative; display: grid; place-items: center; padding-block: 1rem; }
.dig2-escena .dphone { --dphone-w: clamp(270px, 24vw, 320px); }

.dig2-chip {
	display: flex; align-items: center; gap: .7rem;
	padding: .7rem 1rem .7rem .7rem;
	background: #fff; border-radius: 16px;
	box-shadow: 0 18px 40px -22px rgba(27, 20, 106, .45);
	font-size: .88rem; font-weight: 600; color: #1B146A; white-space: nowrap;
}
.dig2-ico {
	width: 36px; height: 36px; flex: none; border-radius: 11px;
	display: grid; place-items: center; font-size: .95rem;
	background: rgba(36, 83, 230, .1); color: #2453E6;
}
/* En móvil y tableta las fichas se quedan como una fila bajo el
   teléfono; en escritorio flotan alrededor de él. */
.dig2-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 1.4rem; }

@media (min-width: 1024px) {
	.dig2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
/* Las fichas solo flotan desde 1280px: por debajo, las de la
   derecha chocaban con el titular de la otra columna. */
@media (min-width: 1280px) {
	.dig2 { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
	.dig2-escena .dphone { --dphone-w: 300px; }
	/* La escena mide lo mismo que el teléfono: las fichas se anclan
	   a sus cantos y solo pisan el marco, nunca la pantalla. El
	   teléfono se corre a la derecha de su columna lo justo para que
	   quepan las fichas de la izquierda. */
	.dig2-escena { width: fit-content; justify-self: start; margin-left: 11.5rem; }
	.dig2-chips { position: absolute; inset: 0; margin: 0; display: block; pointer-events: none; }
	.dig2-chips .dig2-chip { position: absolute; animation: dig2-flota 6s ease-in-out infinite alternate; }
	.dig2-chips .dig2-chip:nth-child(odd) { right: calc(100% - 14px); }
	.dig2-chips .dig2-chip:nth-child(even) { left: calc(100% - 14px); }
	.dig2-chips .dig2-chip:nth-child(1) { top: 16%; }
	.dig2-chips .dig2-chip:nth-child(2) { top: 34%; animation-delay: -1.5s; }
	.dig2-chips .dig2-chip:nth-child(3) { top: 58%; animation-delay: -3s; }
	.dig2-chips .dig2-chip:nth-child(4) { top: 76%; animation-delay: -4.5s; }
}
@keyframes dig2-flota {
	from { transform: translateY(0); }
	to   { transform: translateY(-12px); }
}
@media (prefers-reduced-motion: reduce) {
	.dig2-chips .dig2-chip { animation: none; }
}

.dig-modulos { margin-top: clamp(2.5rem, 6vw, 4rem); display: grid; gap: clamp(.9rem, 2vw, 1.2rem); }
.dig-mod {
	background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--radius);
	padding: clamp(1.4rem, 3vw, 1.9rem);
	transition: border-color .3s, box-shadow .3s, transform .3s;
}
.dig-mod:hover { border-color: var(--border-accent); box-shadow: var(--shadow-card); transform: translateY(-3px); }
.dig-mod-ico { display: block; font-size: 1.4rem; color: var(--accent); margin-bottom: 1rem; }
.dig-mod h3 { font-size: 1.02rem; font-weight: 600; letter-spacing: -.015em; color: var(--text-main); }
.dig-mod p { margin-top: .45rem; color: var(--text-body); font-size: var(--fs-parrafo-sm); line-height: var(--lh-parrafo-sm); }


/* =============================================================
   09. POR QUÉ LOGAN — carrusel editorial
   Una historia grande (imagen + panel de texto) y tres miniaturas.
   Los mismos cuatro botones .pql-item viajan entre .pql-media y
   .pql-thumbs (JS los reordena); por eso el tamaño de cada uno lo
   da el CONTENEDOR que los envuelve en ese momento, nunca el
   propio botón. Escrito de móvil hacia arriba, como el resto de
   la hoja: aquí abajo es el carrusel horizontal deslizable; el
   panel ancho con imagen grande + miniaturas en fila vive en el
   media query de 860px.
   ============================================================= */
.pql { margin-top: clamp(2.5rem, 6vw, 4rem); }

.pql-stage { display: flex; flex-direction: column; gap: 1rem; }

.pql-media { width: 100%; aspect-ratio: 4 / 5; border-radius: 20px; overflow: hidden; }
.pql-media .pql-item { width: 100%; height: 100%; }

/* Botón-tarjeta: sirve igual de grande que de miniatura, el CSS de
   arriba/abajo decide el tamaño real. */
.pql-item {
	position: relative;
	display: block; width: 100%; height: 100%;
	padding: 0; margin: 0; border: 0; border-radius: 20px;
	overflow: hidden;
	background: var(--bg-secondary);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: transform .62s var(--ease);
}
.pql-thumbs .pql-item { border-radius: 16px; }
.pql-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.pql-item img {
	position: absolute; inset: 0;
	width: 100%; height: 100%; object-fit: cover;
	transition: transform .6s var(--ease);
}
.pql-thumbs .pql-item:hover img, .pql-thumbs .pql-item:focus-visible img { transform: scale(1.045); }

/* Velo + rótulo: solo tienen sentido sobre una miniatura. Sobre la
   imagen grande no va ningún texto encima de la foto. */
.pql-item-velo {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(10, 15, 22, 0) 46%, rgba(8, 12, 18, .82) 100%);
	opacity: .78;
	transition: opacity .45s var(--ease);
}
.pql-thumbs .pql-item:hover .pql-item-velo, .pql-thumbs .pql-item:focus-visible .pql-item-velo { opacity: .92; }

.pql-item-tag {
	position: absolute; left: 0; right: 0; bottom: 0;
	padding: 1.1rem .9rem .95rem;
	display: grid; gap: .3rem;
	color: #fff;
}
.pql-item-tag em {
	font-style: normal; font-size: .68rem; font-weight: 600;
	letter-spacing: .16em; color: rgba(255, 255, 255, .72);
}
.pql-item-tag b {
	font-weight: 600; font-size: .96rem; line-height: 1.2;
	letter-spacing: -.015em;
}

/* El estado activo vive en .pql-media: sin velo, sin rótulo, la
   foto es la protagonista. */
.pql-item.is-active .pql-item-velo,
.pql-item.is-active .pql-item-tag { opacity: 0; pointer-events: none; }

/* --- panel de información ------------------------------------- */
.pql-info-count {
	font-size: .82rem; font-weight: 600; letter-spacing: .06em;
	color: var(--text-secondary); font-variant-numeric: tabular-nums;
}
.pql-info-title {
	margin-top: .8rem;
	font-size: clamp(1.4rem, 5vw, 1.9rem);
	font-weight: 600; line-height: 1.15; letter-spacing: -.02em;
	color: var(--text-main);
}
.pql-info-text {
	margin-top: .8rem;
	color: var(--text-body); font-size: var(--fs-parrafo); line-height: var(--lh-parrafo); font-weight: 500;
	max-width: 46ch;
}
/* Pequeño fade + translateY al cambiar de concepto. */
.pql-info-in { transition: opacity .32s var(--ease), transform .32s var(--ease); }
.pql-info-in.is-changing { opacity: 0; transform: translateY(10px); }

/* --- miniaturas: carrusel horizontal deslizable en móvil -------- */
.pql-thumbs {
	display: flex; gap: .7rem;
	overflow-x: auto; overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x proximity;
	padding-bottom: .2rem; margin-bottom: -.2rem;   /* espacio para el foco sin mover el layout */
}
.pql-thumbs .pql-item { flex: 0 0 clamp(112px, 32vw, 150px); height: auto; aspect-ratio: 3 / 4; scroll-snap-align: start; }

/* --- controles: progreso + flechas -------------------------------- */
.pql-controls {
	margin-top: clamp(1.4rem, 2.6vw, 1.9rem);
	display: flex; align-items: center; gap: 1.5rem;
}
.pql-progress { flex: 1; display: flex; gap: .4rem; }
.pql-seg {
	flex: 1 1 0; height: 3px; border-radius: 999px;
	background: var(--border);
	transition: background-color .4s var(--ease), flex-grow .45s var(--ease);
}
.pql-seg.is-active { background: var(--accent); flex-grow: 2.4; }

.pql-nav { flex: none; display: flex; gap: .5rem; }
.pql-arrow {
	width: 40px; height: 40px; border-radius: 999px;
	display: grid; place-items: center;
	background: transparent; border: 1px solid var(--border);
	color: var(--text-main); cursor: pointer;
	transition: border-color .3s var(--ease), color .3s var(--ease), background-color .3s var(--ease);
}
.pql-arrow svg { width: 15px; height: 15px; pointer-events: none; }
.pql-arrow:hover { border-color: var(--accent); color: var(--accent-deep); background: rgba(22, 156, 255, .06); }
.pql-arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- 860px: la historia grande pasa a fila, con las miniaturas
   como columna estrecha en vez de carrusel táctil. --- */
@media (min-width: 860px) {
	.pql-stage {
		flex-direction: row; align-items: stretch;
		gap: clamp(.9rem, 1.6vw, 1.25rem);
		height: clamp(380px, 32vw, 520px);
	}
	.pql-media { flex: 0 0 37%; min-width: 0; width: auto; aspect-ratio: auto; }

	.pql-info { flex: 0 0 27%; min-width: 0; display: flex; align-items: center; }
	.pql-info-in { width: 100%; }

	.pql-thumbs {
		flex: 1 1 0; min-width: 0;
		overflow-x: visible; scroll-snap-type: none; padding-bottom: 0; margin-bottom: 0;
	}
	.pql-thumbs .pql-item { flex: 1 1 0; min-width: 0; height: 100%; aspect-ratio: auto; }
}


/* =============================================================
   10. CLIENTES — franja de logos
   Una etiqueta breve centrada y una sola fila de logos sueltos (sin
   tarjetas ni nombres) que pasa despacio en bucle infinito, sobre
   blanco. Los extremos de la fila se desvanecen.
   ============================================================= */
.clientes { background: var(--bg-main); overflow: hidden; }

/* Inicio: los titulares de sección van en un solo color, de punta a
   punta. El tramo final (<em>) ya no cambia a azul ni a gris: hereda
   el color del titular de su sección. */
body.page-home .sec-title em { color: inherit; }

.cli-franja { display: grid; justify-items: center; gap: clamp(1.25rem, 2.6vw, 1.75rem); }
.cli-etiqueta { margin: 0; text-align: center; }

/* --- la cinta ------------------------------------------------
   El track lleva la lista DOS veces y se desplaza exactamente la
   mitad de su ancho, así que al reiniciarse cae justo sobre la
   copia y el bucle no da ningún salto. La separación va como
   margin-right de cada logo y NO como gap del flex: con gap, la
   mitad del ancho no coincide con una copia exacta y el bucle pega
   un tironcito en cada vuelta. */
.cli-cinta {
	width: 100%; min-width: 0; overflow: hidden;
	/* Los extremos se desvanecen: los logos entran y salen sin corte. */
	mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
	-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
}
.cli-track {
	display: flex; align-items: center; width: max-content;
	margin: 0; padding: 0; list-style: none;
	animation: desfile 80s linear infinite;
}
@keyframes desfile {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
/* Al pasar el ratón la cinta se para, para poder mirar un logo. */
.cli-cinta:hover .cli-track { animation-play-state: paused; }

/* Logos sueltos: misma caja para todos (los archivos son lienzos
   cuadrados con aire alrededor), sin fondo ni borde. */
.cli-logo {
	flex: none; margin-right: clamp(2rem, 4vw, 3.5rem);
	width: 104px; height: 88px;
	display: grid; place-items: center;
}
.cli-logo img { width: 100%; height: 100%; object-fit: contain; }
/* Con ratón, en reposo los logos van en escala de grises suaves y
   recuperan su color al señalarlos; en táctil se ven siempre a color. */
@media (hover: hover) {
	.cli-logo img {
		filter: grayscale(1); opacity: .72;
		transition: filter .4s var(--ease), opacity .4s var(--ease);
	}
	.cli-logo:hover img { filter: none; opacity: 1; }
}

@media (max-width: 719px) {
	.cli-logo { width: 84px; height: 70px; margin-right: 1.75rem; }
	.cli-track { animation-duration: 60s; }
}

/* Movimiento reducido: la cinta se detiene y se puede recorrer a
   mano. La regla global pone las animaciones a .001ms, que aquí
   dejaría el track saltado al final: hay que anularla. */
@media (prefers-reduced-motion: reduce) {
	.cli-track { animation: none !important; transform: none !important; }
	.cli-cinta { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}


/* =============================================================
   11. TESTIMONIOS
   Tarjetas altas en gris niebla, sin borde duro: foto de la persona
   y píldora con el logo de su empresa arriba, el titular como cita
   grande, el texto completo debajo y la firma tras un filete
   vertical. En Inicio van en carrusel horizontal; en /testimonios/
   en rejilla.
   ============================================================= */
.tgrid { display: grid; gap: clamp(1rem, 2vw, 1.4rem); }

.tcard {
	position: relative;
	display: flex; flex-direction: column;
	padding: clamp(1.4rem, 2.6vw, 1.9rem);
	background: var(--bg-secondary);
	border: 1px solid var(--border-soft);
	border-radius: 20px;
	transition: box-shadow .45s var(--ease), transform .5s var(--ease), background-color .4s;
}
.tcard:hover { background: var(--bg-card); box-shadow: var(--shadow-card); transform: translateY(-4px); }

.tcard-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.tavatar {
	width: 52px; height: 52px; flex: none; border-radius: 50%; overflow: hidden;
	background: var(--bg-main); box-shadow: 0 0 0 3px var(--bg-main), 0 0 0 4px var(--border);
}
.tavatar img { width: 100%; height: 100%; object-fit: cover; }
.tcard-empresa {
	display: inline-flex; align-items: center; gap: .5rem; min-width: 0;
	padding: .3rem .85rem .3rem .3rem;
	background: var(--bg-main); border: 1px solid var(--border);
	border-radius: 999px;
	font-size: .78rem; font-weight: 600; color: var(--text-main);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tcard-empresa img { width: 26px; height: 26px; flex: none; border-radius: 50%; object-fit: contain; background: #fff; }

.tcard-comillas {
	margin-top: clamp(1.8rem, 3.4vw, 2.6rem);
	font-family: var(--serif); font-size: 3.2rem; line-height: .6; height: .45em;
	color: var(--accent);
}
.tcard-titular {
	margin-top: .9rem;
	font-size: clamp(1.3rem, 1.9vw, 1.6rem); font-weight: 500;
	letter-spacing: -.025em; line-height: 1.2; color: var(--text-main);
	max-width: 16ch;
}
.tcard blockquote {
	flex: 1; margin-top: 1rem;
	color: var(--text-body); font-size: var(--fs-parrafo-sm); line-height: 1.6;
}
.tcard-id {
	display: grid; gap: .15rem; min-width: 0;
	margin-top: clamp(1.6rem, 3vw, 2.2rem);
	padding-left: .9rem; border-left: 1px solid var(--border-accent);
}
.tcard-id strong { font-size: .92rem; font-weight: 600; letter-spacing: -.01em; color: var(--text-main); }
.tcard-id span { font-size: .8rem; color: var(--text-secondary); line-height: 1.4; }

/* --- Reseñas de Inicio ----------------------------------------
   Un panel gris niebla con esquinas amplias. A la izquierda, un
   solo marco de foto que se alterna; a la derecha, el testimonio
   con dos flechas. Fotos y testimonios cada 5 s, cada uno con su
   propio reloj (app.js, initResenas). El único naranja es el de
   las comillas y las estrellas: un acento, nunca una superficie. */
.rsn {
	--rsn-naranja: #FF7A29;
}
.rsn-head {
	display: grid; justify-items: center;
	text-align: center;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}
.rsn-head .eyebrow { margin: 0; font-family: var(--sans); }

.rsn-grid { display: grid; gap: clamp(2.4rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 960px) {
	.rsn-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(2.4rem, 4vw, 3.5rem); }
}

/* Fotos: el marco de atrás arriba a la izquierda, el de delante
   abajo a la derecha. Ambos 4:3, la proporción real de las fotos,
   así object-fit apenas recorta. */
.rsn-fotos {
	position: relative;
	width: 100%;
}
/* Un solo marco a todo el ancho de la columna; las fotos se apilan
   dentro y se alternan con un fundido. */
.rsn-marco {
	position: relative; overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: clamp(14px, 1.8vw, 20px);
	background: var(--bg-tint-soft);
}
.rsn-marco img {
	position: absolute; inset: 0;
	width: 100%; height: 100%; object-fit: cover;
	opacity: 0; transform: scale(1.06);
	/* Fundido corto y acercamiento que termina dentro de los 5 s de
	   cada foto. */
	transition: opacity .7s var(--ease), transform 4.5s cubic-bezier(.2, .6, .3, 1);
}
.rsn-marco img.is-activa { opacity: 1; transform: none; }

/* Testimonios: todas las tarjetas en la misma celda. */
.rsn-lado { min-width: 0; }
.rsn-pila { display: grid; }
.rsn-card {
	grid-area: 1 / 1;
	display: flex; flex-direction: column;
	padding: clamp(1.5rem, 3vw, 2.3rem);
	background: var(--bg-card);
	border: 1px solid var(--border-soft);
	border-radius: 20px;
	opacity: 0; visibility: hidden;
	transform: translate3d(0, 14px, 0); filter: blur(4px);
	transition: opacity .55s var(--ease), transform .8s var(--ease), filter .55s var(--ease), visibility 0s linear .8s;
}
.rsn-card.is-activa {
	opacity: 1; visibility: visible; transform: none; filter: none;
	transition-delay: .12s, .12s, .12s, 0s;
}

.rsn-quien { display: flex; align-items: center; gap: 1rem; }
.rsn-id { display: grid; gap: .2rem; min-width: 0; }
.rsn-id strong { font-size: 1rem; font-weight: 600; letter-spacing: -.01em; color: var(--text-main); }
.rsn-id > span { font-size: .84rem; color: var(--text-secondary); line-height: 1.35; }
.rsn-id .rsn-empresa {
	display: inline-flex; align-items: center; gap: .4rem;
	font-weight: 600; color: var(--text-main);
}
.rsn-empresa img { width: 20px; height: 20px; flex: none; border-radius: 50%; object-fit: contain; background: #fff; box-shadow: 0 0 0 1px var(--border); }

.rsn-estrellas { display: flex; gap: .2rem; margin-top: 1rem; }
.rsn-estrellas svg { width: 16px; height: 16px; fill: var(--rsn-naranja); }
.rsn-estrellas svg.is-vacia { fill: var(--border); }

.rsn-card blockquote { margin-top: clamp(1.4rem, 2.6vw, 1.9rem); }
.rsn-card blockquote::before {
	content: "\201C"; display: block;
	font-family: var(--serif); font-size: 3rem; line-height: .6; height: .42em;
	color: var(--rsn-naranja);
}
.rsn-titular {
	margin-top: .9rem;
	font-size: 1.15rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.25;
	color: var(--text-main);
}
.rsn-card blockquote p:not(.rsn-titular) {
	margin-top: .6rem; max-width: 62ch;
	font-size: var(--fs-parrafo-sm); line-height: 1.65; color: var(--text-body);
}

/* Controles: solo las dos flechas, juntas. */
.rsn-ctrl { display: flex; align-items: center; gap: .6rem; margin-top: 1.1rem; }
.rsn-btn {
	width: 40px; height: 40px; flex: none; border-radius: 50%;
	display: grid; place-items: center;
	background: var(--bg-card); color: var(--text-main);
	border: 1px solid var(--border);
	transition: border-color .3s, color .3s, background-color .3s, transform .35s var(--ease);
}
.rsn-btn svg { width: 15px; height: 15px; }
.rsn-btn:hover { border-color: var(--accent); color: var(--accent-deep); background: var(--bg-tint-soft); }
.rsn-btn:active { transform: scale(.94); }
.rsn-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.rsn-mas { margin-top: 1.25rem; }

@media (prefers-reduced-motion: reduce) {
	.rsn-marco img { transform: none; transition: opacity .3s linear; }
	.rsn-card { transform: none; filter: none; transition: opacity .25s linear, visibility 0s linear .25s; }
	.rsn-card.is-activa { transition-delay: 0s; }
}


/* =============================================================
   12. BLOG Y LISTADOS DE TARJETAS
   ============================================================= */
.bgrid { display: grid; gap: clamp(1.2rem, 2.5vw, 2rem); }
.bcard { display: flex; flex-direction: column; }
.bcard-medi {
	position: relative; overflow: hidden; border-radius: 16px;
	border: 1px solid var(--border); background: var(--bg-secondary);
	aspect-ratio: 16 / 10;
}
.bcard-medi img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.bcard:hover .bcard-medi img { transform: scale(1.03); }
.bcard-info { padding: 1.2rem .2rem 0; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.bcard-meta { font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.bcard-info h3 { font-size: 1.15rem; font-weight: 500; letter-spacing: -.025em; line-height: 1.25; transition: color .35s; }
.bcard:hover .bcard-info h3 { color: var(--accent-light); }
.bcard-info p { color: var(--text-body); font-size: var(--fs-parrafo-sm); line-height: var(--lh-parrafo-sm); flex: 1; }
.bcard-link { align-self: flex-start; margin-top: .3rem; display: inline-flex; align-items: center; gap: .4rem; font-size: .86rem; font-weight: 600; color: var(--accent); transition: gap .3s var(--ease); }
.bcard:hover .bcard-link { gap: .75rem; }

/* Filtros de categoría */
.blog-filtros { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.blog-filtros a {
	padding: .5rem 1.05rem; border-radius: 999px;
	border: 1px solid var(--border); background: var(--bg-secondary);
	font-size: .85rem; color: var(--text-secondary);
	transition: border-color .3s, color .3s, background-color .3s;
}
.blog-filtros a:hover { border-color: var(--border-accent); color: var(--accent-light); }
.blog-filtros a.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Estado vacío y paginación */
.vacio { padding: 3.5rem 1.5rem; text-align: center; color: var(--text-body); border: 1px dashed var(--border); border-radius: var(--radius); }
.pagi { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin-top: 3rem; }
.pagi a, .pagi span {
	min-width: 42px; height: 42px; padding-inline: .7rem;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--border); border-radius: 10px; font-size: .9rem;
	transition: border-color .3s, color .3s;
}
.pagi a:hover { border-color: var(--border-accent); color: var(--accent-light); }
.pagi .is-on { background: var(--accent); border-color: var(--accent); color: #fff; }


/* =============================================================
   13. LLAMADA FINAL Y CONTACTO
   ============================================================= */
/* Un panel azul claro que nace del blanco: los cantos superiores
   se disuelven en la página (degradado elíptico que se abre hacia
   arriba) y el centro se tiñe con el azul real de la paleta oficial
   (#2453E6) en transparencia — un lavado, no un fondo sólido. El
   titular va en el marino de la paleta (#1B146A) y la bajada en su
   gris (#4D4D4D). Detrás del texto, una red de nodos (app.js,
   initCtaRed) que se enlaza con el cursor: la consultoría y la
   plataforma conectando cada punto de la operación. */
.cta-final {
	position: relative; text-align: center;
	/* Abajo casi sin aire: el pie arranca en el mismo blanco y su
	   difuminado ya hace de separación. */
	padding: clamp(1.5rem, 4vw, 3rem) 0 clamp(.5rem, 1.5vw, 1rem);
	background: var(--bg-main);
}
.cta-panel {
	position: relative; overflow: hidden; isolation: isolate;
	border-radius: clamp(20px, 2.4vw, 28px);
	background:
		radial-gradient(ellipse 88% 125% at 50% 88%,
			rgba(36, 83, 230, .2) 0%,
			rgba(36, 83, 230, .14) 48%,
			rgba(36, 83, 230, .08) 68%,
			rgba(36, 83, 230, .03) 84%,
			rgba(36, 83, 230, 0) 96%),
		var(--bg-main);
}
.cta-red {
	position: absolute; inset: 0; width: 100%; height: 100%;
	z-index: 0; pointer-events: none;
	/* La red solo vive sobre la zona oscura: se apaga antes de los
	   cantos claros de arriba. */
	-webkit-mask-image: radial-gradient(ellipse 86% 120% at 50% 88%, #000 58%, transparent 76%);
	mask-image: radial-gradient(ellipse 86% 120% at 50% 88%, #000 58%, transparent 76%);
}
.cta-panel-in {
	position: relative; z-index: 1;
	padding: clamp(6rem, 13vw, 10rem) var(--gut) clamp(4.5rem, 10vw, 7.5rem);
	pointer-events: none;
}
.cta-panel-in a { pointer-events: auto; }
.cta-final h2 {
	font-family: var(--serif);
	font-size: clamp(2.2rem, 5.5vw, 4.4rem);
	font-weight: 400; line-height: 1.06; letter-spacing: -.01em;
	max-width: 16ch; margin-inline: auto;
	color: #1B146A;
}
.cta-final p { margin-top: 1.4rem; color: #2E3440; font-size: var(--fs-parrafo); line-height: var(--lh-parrafo); font-weight: 500; max-width: 46ch; margin-inline: auto; }
.cta-final .btn { margin-top: 2.4rem; }

/* --- contacto --- */
.contacto { position: relative; padding: clamp(4.5rem, 11vw, 8rem) 0; }
.contacto-grid { display: grid; gap: clamp(2.5rem, 6vw, 5rem); }

.contacto-lead {
	font-size: clamp(2rem, 4.5vw, 3.4rem); font-weight: 500;
	line-height: 1.03; letter-spacing: -.04em; margin-top: 1.1rem;
}
.contacto-data { margin-top: 2.6rem; display: grid; gap: 0; }
.contacto-data div { display: grid; gap: .2rem; padding: 1.1rem 0; border-top: 1px solid var(--border-soft); }
.contacto-data div:last-child { border-bottom: 1px solid var(--border-soft); }
.contacto-data dt { font-size: .7rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--text-secondary); }
.contacto-data dd { font-size: 1rem; color: var(--text-main); }
.contacto-data a { transition: color .3s; }
.contacto-data a:hover { color: var(--accent-light); }

/* Correo grande como pieza gráfica */
.mailto { display: inline-block; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.mailto-txt {
	font-size: clamp(1.3rem, 3.6vw, 2.6rem); font-weight: 500;
	letter-spacing: -.035em; word-break: break-word;
	transition: color .4s var(--ease);
}
.mailto:hover .mailto-txt { color: var(--accent-light); }
.mailto-line { display: block; height: 1px; margin-top: .7rem; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease); }
.mailto:hover .mailto-line { transform: scaleX(1); }

/* --- formulario: campos con línea inferior, nada de cajas blancas --- */
.form { display: grid; gap: 1.6rem 2rem; grid-template-columns: minmax(0, 1fr); }

.field { position: relative; min-width: 0; }
.field input, .field textarea, .field select {
	width: 100%;
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--border);
	color: var(--text-main);
	padding: 18px 0 12px;
	font-size: 1rem;
	border-radius: 0;
	transition: border-color .35s var(--ease);
}
.field textarea { resize: vertical; min-height: 92px; }
.field select {
	appearance: none; cursor: pointer;
	/* Algo más de aire arriba: la etiqueta de este campo va siempre
	   subida y si no se pisaba con el texto del desplegable. */
	padding-top: 23px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23B2BCC8' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right .2rem center;
}
.field select option { background: var(--bg-card-solid); color: var(--text-main); }

.field input:focus, .field textarea:focus, .field select:focus {
	outline: none; border-color: var(--accent);
}
.field input:-webkit-autofill,
.field input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--text-main);
	-webkit-box-shadow: 0 0 0 1000px var(--bg-main) inset;
	caret-color: var(--text-main);
}

.field label {
	position: absolute; left: 0; top: 18px;
	font-size: 1rem; color: var(--text-secondary); pointer-events: none;
	transform-origin: left top;
	transition: transform .3s var(--ease), color .3s var(--ease);
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label,
.field .label-static {
	transform: translateY(-16px) scale(.76); color: var(--accent);
}
.field.is-error input, .field.is-error textarea, .field.is-error select { border-color: #F04438; }
/* Aviso bajo un campo concreto (RUC): solo ocupa sitio si hay texto. */
.field-msg { margin: .4rem 0 0; font-size: .8rem; line-height: 1.35; color: #FF6A5E; }
.field-msg:empty { display: none; }

.form-note { grid-column: 1 / -1; font-size: .88rem; color: var(--text-body); min-height: 1.2em; }
.form-note.is-ok { color: #35C77E; }
.form-note.is-err { color: #FF6A5E; }
.form > button[type="submit"] { grid-column: 1 / -1; justify-self: start; }

/* Campo trampa contra robots: invisible pero accesible al robot */
.trampa { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.mapa { margin-top: 3rem; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }
.mapa iframe { display: block; width: 100%; height: 340px; border: 0; filter: grayscale(1) invert(.92) contrast(.85); }


/* =============================================================
   14. PIE
   ============================================================= */
/* El pie vive en blanco, pero arranca con un gran panel en
   degradado de acento (lema + contacto): el único bloque del pie
   que se compromete con el azul. Las columnas de debajo vuelven a
   los tokens normales de párrafo sobre blanco. */
.foot {
	position: relative; isolation: isolate; overflow: hidden;
	background: var(--bg-main); padding: clamp(2rem, 5vw, 3.5rem) 0 1.6rem;
}
/* Difuminado de los azules de LOGAN que sube desde abajo, a lo ancho
   de todo el pie, y se apaga hacia arriba: manchas de color
   desenfocadas, sin bordes. Va detrás de todo (z-index -1) y nunca
   recibe el puntero. */
.foot::before {
	content: ""; position: absolute; z-index: -1; pointer-events: none;
	left: -10%; right: -10%; bottom: -8%; height: 108%;
	background:
		radial-gradient(36% 78% at 10% 88%, rgba(36, 83, 230, .6), transparent 75%),
		radial-gradient(34% 74% at 38% 92%, rgba(22, 156, 255, .55), transparent 75%),
		radial-gradient(34% 76% at 64% 90%, rgba(108, 203, 255, .58), transparent 75%),
		radial-gradient(36% 78% at 92% 90%, rgba(36, 83, 230, .5), transparent 75%),
		radial-gradient(70% 40% at 50% 100%, rgba(10, 47, 85, .3), transparent 72%);
	filter: blur(44px);
}
/* Sin panel (páginas que ya cierran con .cta-final): la llamada
   final deja su propio aire, así que las columnas arrancan sin
   hueco extra y con un filete que las separa. */
.foot--sin-panel { padding-top: 0; }
.foot--sin-panel .foot-top { border-top: 1px solid var(--border); }

/* Mismo lenguaje que las secciones claras de la web (clientes,
   llamada final): blanco con luces del azul real de la paleta
   (#2453E6) y del eléctrico (#002CE6) en transparencia, titular en
   el marino de la paleta (#1B146A) y los botones del sitio. */
/* Lavado: el azul entra desde arriba y se disuelve en el blanco de la
   página; sin borde ni esquinas inferiores que corten contra el fondo. */
.foot-panel {
	position: relative; overflow: hidden; isolation: isolate;
	display: grid; gap: 2rem; align-items: end; justify-items: center; text-align: center;
	padding: clamp(3.5rem, 8vw, 6rem) clamp(1.5rem, 5vw, 4rem) clamp(2.5rem, 5vw, 3.5rem);
	border-radius: clamp(20px, 2.4vw, 28px) clamp(20px, 2.4vw, 28px) 0 0;
	background:
		radial-gradient(55% 70% at 50% 0%, rgba(36, 83, 230, .21), transparent 75%),
		linear-gradient(180deg, rgba(225, 240, 255, .7) 0%, rgba(239, 248, 255, .6) 55%, var(--bg-main) 100%);
	color: #1B146A;
}
/* Anillos concéntricos en la esquina: el mismo motivo de medición
   que la cabecera de Nosotros, en el azul de la paleta muy tenue. */
.foot-panel::after {
	content: ""; position: absolute; z-index: -1;
	right: -8%; top: -60%; width: 55%; aspect-ratio: 1; border-radius: 50%;
	border: 1px solid rgba(36, 83, 230, .2);
	box-shadow: 0 0 0 60px rgba(36, 83, 230, .04), 0 0 0 120px rgba(36, 83, 230, .03);
	pointer-events: none;
}
.foot-lema {
	font-family: var(--serif);
	font-size: clamp(2.4rem, 6vw, 4.4rem); font-weight: 400;
	line-height: 1.05; letter-spacing: -.01em;
	max-width: 18ch;
}
.foot-lema em { font-style: normal; color: #2453E6; }


.foot-top { padding-block: clamp(2.5rem, 5vw, 3.5rem); display: grid; gap: 2.4rem; }
.foot-brand img { width: 130px; height: auto; display: block; margin-bottom: 1rem; }
.foot-brand p { color: var(--text-body); font-size: .93rem; max-width: 30ch; }

.foot-red { margin-top: 1.4rem; display: flex; gap: .55rem; }
.foot-red a {
	width: 38px; height: 38px; border-radius: 999px;
	display: grid; place-items: center;
	border: 1px solid var(--border); color: var(--accent-deep);
	transition: border-color .3s, color .3s, background-color .3s, transform .35s var(--ease);
}
.foot-red a:hover { border-color: var(--accent); color: #fff; background: var(--accent); transform: translateY(-3px); }

.foot-col { display: grid; gap: .55rem; align-content: start; }
.foot-col h3 { font-size: .68rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--accent-deep); margin-bottom: .5rem; }
.foot-col a, .foot-col span { font-size: .93rem; color: var(--text-body); transition: color .3s, transform .35s var(--ease); }
.foot-col a:hover { color: var(--accent-deep); transform: translateX(4px); }
.foot-contacto a, .foot-contacto span { color: var(--text-main); font-weight: 500; }

.foot-bottom {
	padding-top: 1.4rem;
	border-top: 1px solid var(--border);
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem;
	color: var(--text-secondary); font-size: .82rem;
}

/* --- Pie con foto (img-footer) ------------------------------------
   Una sola composición con la llamada final: el pie arranca en el
   mismo blanco de la sección anterior, se abre poco a poco al cielo
   de la foto y termina en el azul marino en que la propia foto ya se
   funde por abajo (#00255A), así no hay corte en ningún borde.
   Capas, de arriba abajo:
   1. Velo marino que crece hacia abajo: legibilidad del texto.
   2. Blanco que se disuelve: la costura con la sección anterior.
   3. La foto, anclada a la derecha (los trabajadores) y bajada
      --foot-foto-y para que los cascos asomen pasado el blanco.
      Nunca se estira: ancho fijo mínimo, alto proporcional.
   4. Base: blanco hasta donde empieza la foto y marino de ahí abajo,
      para que lo que la foto no cubra continúe sin costura. */
.foot {
	--foot-marino: 0, 37, 90;
	--foot-fundido: clamp(200px, 21vw, 340px);
	/* La foto empieza dentro del tramo de blanco puro: su borde
	   superior nunca se ve. */
	--foot-foto-y: calc(var(--foot-fundido) * .2);
	padding-top: var(--foot-fundido);
	background-color: rgb(var(--foot-marino));
	background-image:
		linear-gradient(180deg,
			rgba(var(--foot-marino), 0) calc(var(--foot-fundido) * .6),
			rgba(var(--foot-marino), .42) var(--foot-fundido),
			rgba(var(--foot-marino), .72) calc(var(--foot-fundido) + 260px),
			rgba(var(--foot-marino), .9) 100%),
		linear-gradient(180deg,
			#fff 0,
			#fff calc(var(--foot-fundido) * .28),
			rgba(255, 255, 255, .72) calc(var(--foot-fundido) * .5),
			rgba(255, 255, 255, .26) calc(var(--foot-fundido) * .76),
			rgba(255, 255, 255, 0) var(--foot-fundido)),
		url("../img-nuevas/web/img-footer-1983.webp"),
		linear-gradient(180deg,
			#fff 0,
			#fff calc(var(--foot-foto-y) + 1px),
			rgb(var(--foot-marino)) calc(var(--foot-foto-y) + 1px));
	background-repeat: no-repeat;
	background-size: 100% 100%, 100% 100%, max(100%, 1180px) auto, 100% 100%;
	background-position: 0 0, 0 0, right 0 top var(--foot-foto-y), 0 0;
}
.foot--sin-panel { padding-top: var(--foot-fundido); }
/* El difuminado azul de antes ya no aplica: la foto lo reemplaza. */
.foot::before { display: none; }
.foot-top, .foot-panel, .foot-bottom { text-shadow: 0 1px 10px rgba(0, 20, 50, .35); }
.foot-panel { padding-top: clamp(1rem, 3vw, 2rem); }
@media (max-width: 599px) {
	/* En móvil la foto se ve a 1180px de ancho recortada a la derecha:
	   quedan los dos trabajadores del primer plano. */
	.foot { --foot-fundido: 230px; background-position: 0 0, 0 0, 86% var(--foot-foto-y), 0 0; }
}
.foot-panel { background: transparent; color: #fff; }
.foot-panel::after { display: none; }
.foot-lema em { color: var(--accent-light); }
.foot--sin-panel .foot-top { border-top: 0; }
.foot-brand p, .foot-col a, .foot-col span { color: var(--text-on-dark-body); }
.foot-contacto a, .foot-contacto span { color: #fff; }
/* Títulos de columna: azul claro más luminoso y un punto más grandes
   para leerse sobre la foto con velo. */
.foot-col h3 { color: #A9DFFF; font-size: .72rem; }
.foot-col a:hover { color: #fff; }
.foot-red a { border-color: rgba(255, 255, 255, .25); color: #fff; }
.foot-bottom { border-top-color: rgba(255, 255, 255, .16); color: var(--text-on-dark-body); }

@media (min-width: 900px) {
	.foot-panel { grid-template-columns: minmax(0, 1.3fr) auto; }
	.foot-top { grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: 2rem; }
}
@media (min-width: 600px) and (max-width: 899px) {
	.foot-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Panel del pie con las vías de contacto en filas: lema a la
   izquierda; a la derecha asesoría, WhatsApp y correo, cada fila un
   enlace entero separado por filetes blancos sobre la foto. */
.foot-panel.foot-panel--vias { grid-template-columns: 1fr; justify-items: stretch; text-align: left; align-items: end; gap: 2rem; }
@media (min-width: 900px) {
	.foot-panel.foot-panel--vias { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 5vw, 5rem); }
}
.foot-panel--vias .foot-lema { font-size: clamp(2.4rem, 5.6vw, 4.6rem); }
.fp-vias { display: grid; border-top: 1px solid rgba(255, 255, 255, .28); }
.fp-via {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem;
	padding: 1.15rem .25rem; border-bottom: 1px solid rgba(255, 255, 255, .28);
	color: #fff; transition: padding-left .35s var(--ease), color .3s;
}
.fp-via:hover { padding-left: .75rem; color: var(--accent-light); }
.fp-via:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.fp-via-et { display: block; font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.fp-via-val { display: block; margin-top: .3rem; font-family: var(--serif); font-size: clamp(1.25rem, 2vw, 1.55rem); line-height: 1.2; overflow-wrap: anywhere; }
.fp-via svg { width: 18px; height: 18px; flex: none; }
@media (prefers-reduced-motion: reduce) { .fp-via { transition: color .3s; } .fp-via:hover { padding-left: .25rem; } }

/* Botón flotante de WhatsApp */
.wa {
	position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 880;
	width: 52px; height: 52px; border-radius: 999px;
	display: grid; place-items: center;
	background: #1FA855; color: #fff;
	box-shadow: 0 12px 30px -10px rgba(31, 168, 85, .8);
	transition: transform .4s var(--ease);
}
.wa:hover { transform: translateY(-3px) scale(1.05); }
.wa svg { width: 26px; height: 26px; }
.wa span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }


/* =============================================================
   15. PÁGINAS INTERNAS
   ============================================================= */
.page-inner { padding-top: var(--nav-h); }

/* Cabecera de página interna */
.phero { position: relative; padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(2.5rem, 5vw, 3.5rem); overflow: hidden; }
.phero::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: radial-gradient(circle at 22% 30%, rgba(22, 156, 255, .10), transparent 55%);
}
.phero .wrap { position: relative; z-index: 1; }
.phero-bg { position: absolute; inset: 0; z-index: -2; }
.phero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.phero-veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5,7,10,.72), var(--bg-main)); }

.phero-title {
	font-family: var(--serif);
	font-size: clamp(2.4rem, 6vw, 4.6rem);
	font-weight: 400; line-height: 1.04; letter-spacing: -.01em; max-width: 17ch;
}
.phero-title em { font-style: normal; color: var(--text-secondary); }
.phero-sub { margin-top: 1.4rem; max-width: 58ch; color: var(--text-body); font-size: var(--fs-parrafo); line-height: var(--lh-parrafo); font-weight: 500; }

/* .phero-tec, .phero-flujo y .phero-media se comprometen con un
   fondo oscuro (negro azulado, o una foto con velo oscuro encima):
   el título y la bajada necesitan los tokens de texto sobre oscuro,
   nunca los de párrafo normal (pensados para fondo blanco). */
.phero-tec .phero-title, .phero-flujo .phero-title, .phero-media .phero-title { color: var(--text-on-dark); }
.phero-tec .phero-title em, .phero-flujo .phero-title em, .phero-media .phero-title em { color: var(--text-on-dark-dim); }
.phero-tec .phero-sub, .phero-flujo .phero-sub, .phero-media .phero-sub,
.phero-tec .phero-texto, .phero-media .phero-texto { color: var(--text-on-dark-body); }

/* Bloque de detalle (nosotros / servicio) */
.detalle { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(4rem, 9vw, 6.5rem); }
.detalle-in { display: grid; gap: clamp(2rem, 4.5vw, 3.5rem); align-items: start; }
.detalle-media { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }
.detalle-media img { width: 100%; height: auto; }

/* Texto largo escrito en HTML dentro de contenido/ */
.texto { color: var(--text-body); font-size: var(--fs-parrafo); line-height: var(--lh-parrafo); }
.texto p { margin-bottom: 1.05rem; }
.texto strong { color: var(--text-main); font-weight: 600; }
.texto em { font-style: italic; }
.texto h2 { color: var(--text-main); font-family: var(--serif); font-size: clamp(1.45rem, 3vw, 2.1rem); font-weight: 400; letter-spacing: -.01em; margin: 2.2rem 0 .9rem; }
.texto h2:first-child { margin-top: 0; }
.texto h3 { color: var(--text-main); font-size: clamp(1.1rem, 2.2vw, 1.35rem); font-weight: 600; margin: 1.7rem 0 .6rem; }
.texto ul, .texto ol { margin: 0 0 1.2rem 1.2rem; }
.texto ul li { list-style: disc; margin-bottom: .4rem; }
.texto ol li { list-style: decimal; margin-bottom: .45rem; }
.texto li::marker { color: var(--accent); }
.texto a:not(.btn) { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* Bloques con icono */
.bloques { display: grid; gap: 1rem; margin-top: 2.4rem; }
.bloque { padding: 1.4rem 1.5rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px; transition: border-color .4s, transform .45s var(--ease); }
.bloque:hover { border-color: var(--border-accent); transform: translateY(-3px); }
.bloque-head { display: flex; align-items: center; gap: .8rem; margin-bottom: .6rem; }
.bloque-head i { font-size: 1.4rem; color: var(--accent); }
.bloque-head h3 { font-size: 1.05rem; font-weight: 600; letter-spacing: -.02em; }

/* Artículo del blog */
.post { padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(4rem, 9vw, 6.5rem); }
.post-in { max-width: 760px; margin-inline: auto; }
.post-medi { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); margin-bottom: 2.2rem; }
.post-medi figcaption { padding: .75rem 1rem; background: var(--bg-secondary); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-secondary); text-align: center; }
.post-cita {
	margin: 0 0 2rem; padding: 1.3rem 1.6rem;
	border-left: 2px solid var(--accent); background: rgba(22, 156, 255, .06);
	border-radius: 0 14px 14px 0;
	font-size: clamp(1.02rem, 2vw, 1.18rem); font-weight: 500; line-height: 1.5; color: var(--text-main);
}
.post-cont { color: var(--text-body); font-size: var(--fs-parrafo); line-height: var(--lh-parrafo); }
.post-cont p { margin-bottom: 1.15rem; }
.post-cont strong { color: var(--text-main); }
.post-cont h2 { color: var(--text-main); font-family: var(--serif); font-size: clamp(1.4rem, 3vw, 1.95rem); font-weight: 400; letter-spacing: -.01em; margin: 2.2rem 0 .9rem; }
.post-cont h3 { color: var(--text-main); font-size: clamp(1.1rem, 2.3vw, 1.35rem); font-weight: 600; margin: 1.8rem 0 .6rem; }
.post-cont ul, .post-cont ol { margin: 0 0 1.2rem 1.2rem; }
.post-cont ul li { list-style: disc; margin-bottom: .4rem; }
.post-cont ol li { list-style: decimal; margin-bottom: .45rem; }
.post-cont li::marker { color: var(--accent); }
/* :not(.btn): esta regla es para los enlaces del texto. Sin la
   exclusión, al ser más específica que .btn-primary, pintaba el
   texto de los botones del mismo azul que su fondo y desaparecía. */
.post-cont a:not(.btn) { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.post-cont img { border-radius: 14px; margin: 1.5rem 0; }

/* Llamada a la acción dentro de un artículo (<p class="post-acta">):
   panel azul con anillos tenues, titular serif y dos botones
   (asesoría + WhatsApp). Se escribe tal cual en el 'cuerpo' del
   artículo en contenido/blog/. */
.post-cont .post-acta {
	position: relative; overflow: hidden; isolation: isolate;
	display: grid; gap: 1.2rem;
	margin: 1.8rem 0 0; padding: clamp(1.5rem, 4vw, 2.25rem);
	background: #2453E6; color: #fff;
	border-radius: 22px;
}
.post-cont .post-acta::after {
	content: ""; position: absolute; z-index: -1;
	right: -18%; top: -55%; width: 60%; aspect-ratio: 1; border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .22);
	box-shadow: 0 0 0 46px rgba(255, 255, 255, .05), 0 0 0 92px rgba(255, 255, 255, .035);
}
.post-acta-titulo { font-family: var(--serif); font-size: clamp(1.45rem, 3vw, 1.95rem); line-height: 1.12; color: #fff; max-width: 22ch; }
.post-acta-sub { color: rgba(255, 255, 255, .88); font-size: var(--fs-parrafo-sm); line-height: 1.55; max-width: 46ch; }
.post-acta-botones { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: .3rem; }
.post-acta .btn svg { width: 16px; height: 16px; flex: none; }
.post-acta .btn-blanco { background: #fff; color: #10161F; border-color: #fff; }
.post-acta .btn-blanco:hover { background: #EFF8FF; color: #0B6BC4; }
.post-acta .btn-linea { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .5); }
.post-acta .btn-linea:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }
.post-acta a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.post-foot { margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--border-soft); display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; justify-content: space-between; }
.post-foot .btn { max-width: 100%; white-space: normal; text-align: center; }

/* Equipo (oculto mientras no haya integrantes) */
.egrid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); }
.ecard { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: border-color .4s, transform .45s var(--ease); }
.ecard:hover { border-color: var(--border-accent); transform: translateY(-4px); }
.ecard-medi { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--bg-secondary); }
.ecard-medi img { width: 100%; height: 100%; object-fit: cover; }
.ecard-red { position: absolute; right: .7rem; bottom: .7rem; display: flex; gap: .4rem; opacity: 0; transition: opacity .35s; }
.ecard:hover .ecard-red { opacity: 1; }
.ecard-red a { width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center; background: var(--accent); color: #fff; }
.ecard-info { padding: 1.1rem 1.2rem 1.3rem; }
.ecard-info h3 { font-size: 1rem; font-weight: 600; }
.ecard-carg { margin-top: .2rem; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); }

/* Páginas de aviso: gracias y 404 */
.aviso { padding: clamp(5rem, 13vw, 9rem) 0; text-align: center; }
.aviso-in { max-width: 620px; margin-inline: auto; display: grid; gap: 1.1rem; justify-items: center; }
.aviso h1 { font-family: var(--serif); font-size: clamp(2.2rem, 6vw, 3.8rem); font-weight: 400; line-height: 1.06; letter-spacing: -.01em; }
.aviso h1 em { font-style: normal; color: var(--accent); }
.aviso p { color: var(--text-body); font-size: var(--fs-parrafo); line-height: var(--lh-parrafo); font-weight: 500; }
.aviso-cta { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; margin-top: .8rem; }

/* Pies de sección centrados */
.enfoque-foot, .testi-foot { display: flex; justify-content: center; margin-top: clamp(2.2rem, 5vw, 3.2rem); }


/* =============================================================
   16. RESPONSIVE
   Se escribe de móvil hacia arriba.
   ============================================================= */

/* --- hasta 1024px: menú hamburguesa --- */
@media (max-width: 1023px) {
	.nav-links, .nav-cta { display: none; }
	.nav-burger { display: grid; }
	.nav-in { padding: 8px 8px 8px 14px; }

	.hero-title { font-size: clamp(1.7rem, 6vw, 2.2rem); }
	.hero-sub { font-size: clamp(1.15rem, 4vw, 1.5rem); }
	/* El desplazamiento asimétrico es un gesto de escritorio: en
	   pantallas angostas desborda y se come los botones. */
	.hero-in { width: 100%; margin-left: 0; margin-bottom: 8vh; padding-inline: var(--gut); }
	.hero-scroll { display: none; }
}

/* --- 560px --- */
@media (min-width: 560px) {
	.metricas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- 720px --- */
@media (min-width: 720px) {
	.pilares { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.bgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dig-modulos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.field-full { grid-column: 1 / -1; }
}

/* --- 960px --- */
@media (min-width: 960px) {
	.metricas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.dig-modulos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.bgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.contacto-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: start; }
	.detalle-in { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
	.detalle-media { position: sticky; top: calc(var(--nav-h) + 24px); }
	.bloques { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/* Bloques destacados alternos: imagen a un lado, texto al otro */
	.srv-destacado { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.srv-destacado:nth-child(even) .srv-dest-media { order: 2; }
}


/* =============================================================
   17. MOVIMIENTO REDUCIDO
   Quien lo pida en su sistema ve la web quieta, pero completa.
   ============================================================= */
/* Windows trae «mostrar animaciones» apagado en muchas instalaciones,
   y el navegador lo traduce a prefers-reduced-motion. Apagarlo TODO
   con el selector universal dejaba la web muerta para esa gente: sin
   respuesta al pasar el ratón, sin realces, sin nada. Nadie había
   pedido eso; lo puso el sistema.

   Así que se separa: se apaga lo intrusivo —bucles infinitos, deriva
   de fondos, desfiles— y se conserva lo que es respuesta a una
   acción: hover, foco, apariciones al entrar en pantalla. */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	/* Bucles infinitos de decoración: fuera. */
	.cli-track, .wa,
	.ph-respira, .ph-orb, .ph-dial, .ph-curvas,
	.flu-capa, .flu-punto, .flu-halo path, .flu-corriente path,
	.phero-foto::before, .phero-foto-in img {
		animation: none !important;
	}

	/* Las apariciones al entrar en pantalla se acortan, no se anulan:
	   sin ellas el contenido aparece de golpe y se lee peor. */
	.reveal, .reveal-img, .hero-fade,
	[data-split] .split-word, .hero-title .split-char,
	.pql-item, .pql-info-in, .pql-seg {
		transition-duration: .28s !important;
		transition-delay: 0ms !important;
		animation-duration: .28s !important;
	}

	/* Estos no los mueve nadie desde JavaScript: si no se animan hay
	   que dejarlos puestos a mano o no aparecen nunca. */
	.hero-scroll { opacity: 1 !important; transform: none !important; }
	.mailto-line { transform: scaleX(1); }
}


/* =============================================================
   18. AJUSTES FINALES
   ============================================================= */

.hero-h1 { margin: 0; font-weight: inherit; }
.hero-title { display: block; }

/* Red de seguridad: un título partido en palabras que no lleve
   .reveal nunca recibiría .is-in y se quedaría invisible.
   Con esto se muestra igualmente. */
[data-split]:not(.reveal) .split-word { opacity: 1; transform: none; }

/* Los iconos de marca del pie heredan el tamaño de la fuente */
.foot-red i, .ecard-red i { font-size: 1rem; line-height: 1; }

/* min-width:0 evita que un texto largo estire la columna de la
   rejilla y desborde en pantallas medianas. */
.detalle-body { min-width: 0; }

/* El tamaño y el velo de .phero-media viven en la sección 23. */


/* =============================================================
   19. ÁREAS DE CLIC
   Todo lo que parece un botón tiene que responder en toda su
   superficie, no solo sobre el texto.
   ============================================================= */

/* CRÍTICO. El atributo hidden del menú móvil NO surtía efecto:
   .menu{display:grid} del autor le gana a [hidden]{display:none}
   del navegador (misma especificidad, y el autor manda). Resultado:
   una capa fija de pantalla completa, invisible, encima del hero
   que se comía los clics de los dos botones y del de WhatsApp. */
.menu[hidden] { display: none !important; }
.menu { pointer-events: none; }
.menu.is-open { pointer-events: auto; }

/* Enlaces con flecha: el padding en el propio <a> */
.enlace {
	min-height: 44px; padding: .5rem 0;
}
.bcard-link { min-height: 44px; padding: .35rem 0; align-items: center; }
.bcard-link svg, .enlace svg { pointer-events: none; }

/* Iconos sociales del pie, algo más grandes para el dedo */
.foot-red a { width: 42px; height: 42px; }

/* Enlaces del pie: área real, no solo las letras */
.foot-col a { display: inline-flex; align-items: center; min-height: 32px; }

/* Filtros del blog y paginación */
.blog-filtros a { display: inline-flex; align-items: center; min-height: 40px; }

/* Menú móvil: cada entrada ocupa toda la fila */
.menu-in > a { min-height: 56px; }

/* Ninguna decoración debe interceptar el puntero */
.hero-bg, .hero-bg img, .hero-veil,
.hero-scroll, .hero-scroll span,
.srv-flecha, .tstars, .pilar-ico-font,
.mailto-line, .nav-ink { pointer-events: none; }

/* En móvil el objetivo táctil crece un poco más */
@media (max-width: 719px) {
	.btn { min-height: 48px; padding-inline: 1.5rem; }
	.enlace, .bcard-link { min-height: 46px; }
	.nav-burger { width: 46px; height: 46px; }
	.menu-in > a { min-height: 60px; }
}


/* Enlaces del desplegable y de la lista de contacto: también con
   área cómoda, no solo el alto de la línea de texto. */
.nav-drop-menu a { display: flex; align-items: center; min-height: 44px; }
.contacto-data dd a { display: inline-flex; align-items: center; min-height: 44px; }

/* Logo en tablet y móvil: el navbar ahí es más estrecho */
@media (max-width: 1023px) { .nav-logo { height: 46px; } .nav.is-stuck .nav-logo { height: 38px; } }
@media (max-width: 719px)  { .nav-logo { height: 42px; } .nav.is-stuck .nav-logo { height: 36px; } }


/* =============================================================
   20. CABECERA TECNOLÓGICA (.phero-tec) Y PÁGINA NOSOTROS

   Fondo negro azulado dibujado entero con CSS y SVG: ni una
   imagen, ni un vídeo, ni una librería. La idea es instrumento
   de medida, no videojuego: trazos de 1px, tonos azules muy
   apagados y un movimiento tan lento que casi no se ve moverse,
   solo se nota que el fondo "respira".
   ============================================================= */

.phero-tec {
	/* Altura contenida: la cabecera presenta, no ocupa la pantalla. */
	min-height: clamp(248px, 30vh, 330px);
	display: grid;
	align-content: center;
	padding-block: clamp(2.2rem, 4.6vw, 3.4rem) clamp(1.8rem, 3.4vw, 2.5rem);

	background:
		/* degradado radial azul muy tenue, arriba a la derecha */
		radial-gradient(112% 86% at 74% 16%, rgba(8, 120, 201, .11), transparent 56%),
		/* segundo foco, aún más bajo, a media altura por la izquierda */
		radial-gradient(74% 62% at 8% 54%, rgba(24, 169, 255, .05), transparent 60%),
		/* base negro azulada que entrega el color del cuerpo abajo */
		linear-gradient(180deg, #020609 0%, #020609 58%, var(--bg-main) 100%);
}

/* El halo azul genérico de .phero sobra: aquí el fondo ya lo trae. */
.phero-tec::before { content: none; }

/* Menos aire muerto entre miga, titular y bajada. */
.phero-tec .phero-sub   { margin-top: .95rem; font-size: 1.08rem; }

/* --- La capa decorativa ------------------------------------- */
.phero-deco {
	position: absolute; inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;   /* jamás se come un clic */

	/* Se apaga hacia abajo para que ningún trazo acabe cortado
	   en seco contra el borde de la sección. */
	-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 96%);
	        mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 96%);
}
.phero-deco * { pointer-events: none; }

/* Glow azul detrás de la zona del titular */
.ph-halo {
	position: absolute; inset: 0;
	background: radial-gradient(40% 58% at 24% 52%,
		rgba(24, 169, 255, .20),
		rgba(8, 120, 201, .07) 44%,
		transparent 70%);
	filter: blur(10px);
}

/* Trazos: siempre 1px real gracias a non-scaling-stroke, así que
   las líneas no engordan al escalar el SVG. */
.phero-deco svg { position: absolute; fill: none; stroke-width: 1; }
.phero-deco .ph-l1 { stroke: #0878C9; }
.phero-deco .ph-l2 { stroke: #18A9FF; }

/* --- Anillos concéntricos, anclados a la derecha ------------- */
.ph-anillos-svg {
	top: 50%; right: -12%;
	width: min(860px, 104vw); aspect-ratio: 1 / 1;
	transform: translateY(-50%);
}

/* Grupos que giran o respiran: el origen es su propio centro. */
.ph-respira, .ph-orb, .ph-dial {
	transform-box: fill-box;
	transform-origin: 50% 50%;
}

.ph-respira { opacity: .12; animation: ph-respira 34s ease-in-out infinite; }

.ph-orb circle { stroke: #18A9FF; }
.ph-orb        { opacity: .10; }
.ph-orb-a circle { stroke: #0878C9; stroke-dasharray: 260 118 42 118; }
.ph-orb-b circle { stroke-dasharray: 420 210 60 150; }
.ph-orb-c circle { stroke: #0878C9; stroke-dasharray: 610 240 90 190; }

.ph-orb-a { animation: ph-gira     32s linear infinite; }
.ph-orb-b { animation: ph-gira-inv 40s linear infinite; }
.ph-orb-c { animation: ph-gira     26s linear infinite; }

/* Corona de marcas finas: la nota de "instrumento calibrado". */
.ph-dial        { opacity: .07; animation: ph-gira-inv 38s linear infinite; }
.ph-dial circle { stroke: #18A9FF; stroke-dasharray: 2 26; }

/* --- Curvas largas a todo el ancho --------------------------- */
.ph-curvas-svg { inset: 0; width: 100%; height: 100%; }
.ph-curvas     { will-change: transform; }
.ph-curvas-a { opacity: .10; animation: ph-deriva  30s ease-in-out infinite alternate; }
.ph-curvas-b { opacity: .07; animation: ph-deriva2 38s ease-in-out infinite alternate; }
.ph-curvas-c { opacity: .05; animation: ph-deriva2 34s ease-in-out infinite alternate; }

@keyframes ph-gira     { from { transform: rotate(0deg);   } to { transform: rotate(360deg);  } }
@keyframes ph-gira-inv { from { transform: rotate(0deg);   } to { transform: rotate(-360deg); } }

/* "Respirar": una dilatación de un 3,5 %, imperceptible de golpe
   y evidente si te quedas mirando diez segundos. */
@keyframes ph-respira {
	0%, 100% { transform: scale(1);     opacity: .07; }
	50%      { transform: scale(1.035); opacity: .12; }
}

@keyframes ph-deriva  { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-2.4%, -1.1%, 0); } }
@keyframes ph-deriva2 { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(2%, 1.3%, 0);   } }

/* En pantallas estrechas los anillos se retiran hacia fuera para
   no pasar por detrás del texto. */
@media (max-width: 719px) {
	.phero-tec { min-height: clamp(210px, 26vh, 262px); }
	.ph-anillos-svg { right: -34%; width: min(620px, 128vw); }
	.ph-halo { background: radial-gradient(58% 52% at 34% 48%, rgba(24, 169, 255, .15), rgba(8, 120, 201, .05) 48%, transparent 74%); }
}

/* --- Movimiento reducido ------------------------------------
   El dibujo se queda: lo que se detiene es el movimiento. */
@media (prefers-reduced-motion: reduce) {
	.ph-respira, .ph-orb, .ph-dial, .ph-curvas {
		animation: none !important;
		transform: none !important;
	}
	.ph-respira { opacity: .10; }
}


/* =============================================================
   PÁGINA NOSOTROS · ajustes propios
   ============================================================= */

/* Sin hueco muerto entre la cabecera y el cuerpo. El gris del
   texto ya lo fija la paleta global. */
.page-nosotros .detalle { padding-top: clamp(2.1rem, 4.4vw, 3.4rem); }

/* La fotografía del bloque inferior: filo de 1px, esquinas de 20px
   y un resplandor azul apenas insinuado. */
.page-nosotros .detalle-media {
	border: 1px solid var(--border);
	border-radius: 20px;
	box-shadow:
		0 26px 70px -38px rgba(8, 120, 201, .35),
		0 0 40px -14px rgba(24, 169, 255, .10);
}

/* El hero vuelve a ser una fotografía oscura, así que el nav usa el
   mismo tratamiento transparente/claro que Servicios, Blog y
   Contacto (ver 04b), sin ningún ajuste propio: mismo CTA
   transparente con borde y mismo logo a color en las tres. */

/* --- Cabecera de Nosotros: foto de cascos LOGAN a sangre ------
   Reutiliza .phero-media ($titu_img en titulo.php), pero con su
   propio encuadre y velo: la fotografía ya trae una zona azul
   oscura a la izquierda (donde va el texto) y el casco principal
   nítido a la derecha, así que aquí no hace falta el zoom/velo
   pesado que usan las fichas de servicio — solo un degradado muy
   suave que reserve contraste para el texto. Todo va con el
   prefijo body.page-nosotros para ganarle en especificidad a
   .phero-media (que se define más abajo, en la sección 23) sin
   depender del orden de las reglas. */
body.page-nosotros .phero-media {
	min-height: clamp(560px, 76vh, 820px);
}
body.page-nosotros .phero-bg img {
	opacity: 1;
	object-position: 80% 42%;   /* mantiene visible el casco principal de la derecha */
	transform: none;
}
body.page-nosotros .phero-veil {
	background: linear-gradient(90deg,
		rgba(3, 12, 26, .58) 0%,
		rgba(3, 16, 32, .34) 40%,
		rgba(3, 16, 32, .08) 68%,
		rgba(3, 16, 32, 0) 88%);
}
body.page-nosotros .phero-title {
	font-size: clamp(2.75rem, 8.5vw, 6.25rem);
	max-width: none;
}
body.page-nosotros .phero-sub {
	margin-top: 1.1rem;
	font-size: clamp(1.05rem, 1.6vw, 1.35rem);
	max-width: 38ch;
}

/* Línea de acento bajo el titular: el único adorno nuevo del hero. */
body.page-nosotros .phero-title::after {
	content: "";
	display: block;
	width: 64px; height: 3px; margin-top: 1.5rem;
	background: var(--accent); border-radius: 2px;
	transform-origin: left center;
	opacity: 0; transform: scaleX(0);
	animation: nsx-linea .55s var(--ease) .68s forwards;
}

/* --- Secuencia de entrada: fondo → titular → línea → bajada ---
   El titular y la bajada ya usan .reveal (misma mecánica que el
   resto del sitio); aquí solo se afina su ritmo para esta cabecera
   en concreto, sin tocar la regla general de .reveal. */
body.page-nosotros .phero-media .phero-bg,
body.page-nosotros .phero-media .phero-veil {
	opacity: 0;
	animation: nsx-hero-fade .8s var(--ease) forwards;
}
body.page-nosotros .phero-title[data-split] .split-word {
	transition-duration: .65s !important;
	transition-delay: .12s !important;
}
body.page-nosotros .phero-sub.reveal {
	transition-duration: .65s;
	transition-delay: .9s;
}
@keyframes nsx-hero-fade { to { opacity: 1; } }
@keyframes nsx-linea { to { opacity: 1; transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
	body.page-nosotros .phero-media .phero-bg,
	body.page-nosotros .phero-media .phero-veil { animation: none; opacity: 1; }
	body.page-nosotros .phero-title::after { animation: none; opacity: 1; transform: none; }
	/* Los !important de arriba (necesarios para ganarle a la
	   duración/retraso que pone initSplitText() en línea) también
	   le ganarían al acortamiento global de .reveal si no se
	   repiten aquí. */
	body.page-nosotros .phero-title[data-split] .split-word,
	body.page-nosotros .phero-sub.reveal {
		transition-duration: .28s !important;
		transition-delay: 0ms !important;
	}
}

/* --- Móvil: el recorte es mucho más vertical que la foto (2.4:1),
   así que se acerca más hacia la derecha, donde está el casco
   nítido, y el degradado se refuerza un poco para que el titular
   siga leyéndose sobre el cielo claro del fondo. --- */
@media (max-width: 899px) {
	body.page-nosotros .phero-media {
		min-height: clamp(480px, 68vh, 640px);
		align-content: end;
		padding-bottom: clamp(2.2rem, 7vw, 3rem);
	}
	body.page-nosotros .phero-bg img { object-position: 88% 46%; }
	body.page-nosotros .phero-veil {
		background:
			linear-gradient(0deg, rgba(3, 12, 26, .82) 0%, rgba(3, 12, 26, .35) 46%, rgba(3, 12, 26, .12) 100%),
			linear-gradient(90deg, rgba(3, 12, 26, .55) 0%, rgba(3, 16, 32, .22) 56%, rgba(3, 16, 32, 0) 82%);
	}
	body.page-nosotros .phero-sub { max-width: none; }
}


/* =============================================================
   PÁGINA SERVICIOS · cabecera a viewport completo

   Ya no es el hero partido (.phero-tec/.phero-split, más abajo,
   ahora sin uso): la foto real del equipo LOGAN ocupa todo el
   ancho y un velo azul profundo se degrada de izquierda (donde
   vive el texto) a transparente (donde manda la fotografía),
   igual que Nosotros y Contacto pero a la altura del viewport.
   ============================================================= */
.page-servicios .phero-media {
	min-height: 100vh;
	min-height: 100dvh;
	/* La fila única se estira a todo el alto: así el bloque de texto
	   se centra en vertical (dentro de .wrap, más abajo) y la línea
	   Personas · Procesos · Resultados puede apoyarse en el borde
	   inferior sin depender de cuánto mida el titular. */
	align-content: stretch;
	padding-block: calc(var(--nav-h) + clamp(2rem, 5vh, 4rem)) clamp(5.2rem, 11vh, 7rem);
}
/* El texto se alinea con el logo del nav, no con el borde de la
   pantalla: mismo ancho máximo que .nav-in (1480px) más su gutter,
   y los mismos 22px de relleno interior que separan el logo del
   canto de la cápsula. Titular, logo y botones caen en una sola
   vertical, como el margen de un informe. */
.page-servicios .phero-media .wrap {
	max-width: calc(1480px + 2 * var(--gut));
	padding-inline: calc(var(--gut) + 22px);
	display: flex; flex-direction: column; justify-content: center;
}
.page-servicios .phero-media .phero-txt { max-width: 40rem; }

/* La foto se ve entera y con su luz: sin acercamiento, encuadrada
   por arriba para que respire el cielo sobre el grupo, y sin la
   opacidad rebajada del resto de cabeceras con foto. */
.page-servicios .phero-media .phero-bg img {
	opacity: 1;
	object-position: var(--phero-corte, 66%) 30%;
}

/* Velo azul-negro que se compromete con la mitad izquierda —
   incluida la franja del nav— y se apaga antes de llegar al grupo
   de trabajadores. Un segundo degradado oscurece solo el pie
   izquierdo, donde vive la línea Personas · Procesos · Resultados. */
.page-servicios .phero-media .phero-veil {
	background:
		linear-gradient(90deg,
			rgba(6, 14, 26, .94) 0%,
			rgba(7, 17, 31, .88) 20%,
			rgba(8, 22, 40, .68) 34%,
			rgba(8, 26, 48, .34) 46%,
			rgba(8, 26, 48, .1) 56%,
			transparent 64%),
		linear-gradient(0deg, rgba(6, 14, 26, .45) 0%, transparent 22%);
}

/* Titular grande, en blanco entero (nunca el gris apagado de .em):
   el velo, ya acotado a la izquierda, sostiene el contraste. */
.page-servicios .phero-title {
	margin-top: clamp(1.4rem, 3.4vh, 2.4rem);
	font-size: clamp(2.4rem, min(4.1vw, 7.2vh), 4.4rem);
	line-height: 1.1;
	max-width: 9.8em;
}
.page-servicios .phero-title em { color: inherit; font-style: normal; }
.page-servicios .phero-txt { text-shadow: 0 1px 3px rgba(2, 8, 16, .5), 0 4px 20px rgba(2, 8, 16, .35); }
.page-servicios .phero-media .phero-sub {
	margin-top: clamp(1.4rem, 3vh, 2rem);
	max-width: 31em;
	color: rgba(245, 247, 250, .88);
	font-weight: 400;
}

/* Etiqueta: más clara y más abierta que en el resto del sitio,
   porque aquí vive sola sobre el velo, pero con su tick de acento. */
.page-servicios .phero-media .eyebrow {
	font-size: .8rem; font-weight: 500; letter-spacing: .34em;
	color: rgba(245, 247, 250, .86);
}

/* Botones: el primario lleva a los servicios; la asesoría queda
   como contorno blanco, más grande que el tamaño estándar. */
.page-servicios .phero-botones { margin-top: clamp(1.8rem, 4.4vh, 2.8rem); gap: 1rem; }
.page-servicios .phero-botones .btn { padding: 1rem 1.9rem; font-size: .98rem; }
.page-servicios .phero-botones .btn-ghost {
	background: transparent; border-color: rgba(255, 255, 255, .55); color: #fff;
}
.page-servicios .phero-botones .btn-ghost:hover {
	background: rgba(255, 255, 255, .1); border-color: #fff; color: #fff;
}

.phero-media .eyebrow { color: var(--text-on-dark-dim); }

/* Personas · Procesos · Resultados: fuera del bloque de texto,
   anclado al pie izquierdo de la cabecera, casi al borde. */
.phero-tagline {
	margin-top: clamp(1.6rem, 3vw, 2.2rem);
	font-family: var(--sans); font-size: .8rem; font-weight: 500;
	letter-spacing: .24em; text-transform: uppercase;
	color: rgba(245, 247, 250, .78);
	text-shadow: none;
}
.phero-tagline span { margin: 0 1.5em; color: rgba(245, 247, 250, .5); font-weight: 400; }
.page-servicios .phero-media .phero-tagline {
	position: absolute; left: calc(var(--gut) * .25);
	bottom: calc(-1 * clamp(5.2rem, 11vh, 7rem) + clamp(1.8rem, 4.4vh, 3rem));
	margin: 0;
}

/* Rótulo de esquina: solo texto en versales abiertas con una línea
   vertical fina delante; sin placa ni desenfoque. Se apoya en la
   zona oscura inferior de la foto, con sombra suave para leerse. */
.phero-badge {
	position: absolute; z-index: 2;
	right: calc(var(--gut) + 22px); bottom: clamp(1.8rem, 4.4vh, 3rem);
	display: flex; align-items: stretch; gap: 1.5rem;
	max-width: 220px;
}
.phero-badge-linea { flex: none; width: 1px; background: rgba(255, 255, 255, .6); }
.phero-badge-txt {
	max-width: 11em;
	font-family: var(--sans); font-size: .8rem; font-weight: 500;
	letter-spacing: .22em; line-height: 1.8;
	color: #fff; text-transform: uppercase;
	text-shadow: 0 1px 3px rgba(2, 8, 16, .7), 0 2px 14px rgba(2, 8, 16, .5);
}

@media (max-width: 899px) {
	.page-servicios .phero-media { padding-bottom: clamp(2.4rem, 7vw, 3.2rem); }
	.page-servicios .phero-media .wrap { padding-inline: var(--gut); justify-content: flex-end; }
	.page-servicios .phero-media .phero-bg img { object-position: var(--phero-corte, 66%) 50%; }
	.page-servicios .phero-media .phero-veil {
		background: linear-gradient(0deg,
			rgba(6, 14, 26, .92) 0%,
			rgba(6, 14, 26, .72) 45%,
			rgba(6, 14, 26, .35) 75%,
			rgba(6, 14, 26, .5) 100%);
	}
	.page-servicios .phero-title { max-width: none; font-size: clamp(2.1rem, 8vw, 2.8rem); }
	.page-servicios .phero-media .phero-sub { max-width: none; }
	.page-servicios .phero-media .phero-tagline { position: static; margin-top: 1.8rem; }
	.phero-tagline { font-size: .74rem; letter-spacing: .16em; white-space: nowrap; }
	.phero-tagline span { margin: 0 .6em; }
	.phero-badge { display: none; }
}


/* =============================================================
   21. HERO PARTIDO CON FOTO (.phero-split) — sin uso desde que
   Servicios pasó a .phero-media (ver bloque de arriba); se deja
   documentado por si otra cabecera partida lo necesita más
   adelante, no se ha borrado nada de lo que dependía de él.

   Variante de .phero-tec para Nosotros: el texto se queda en la
   columna izquierda, sobre la parte más oscura, y la foto ocupa
   la mitad derecha a sangre. La foto no es un rectángulo pegado
   encima: se funde con el fondo con una máscara degradada por el
   borde izquierdo y un tinte azul por encima.
   ============================================================= */

/* La cabecera arranca en lo alto de la página y la foto pasa por
   detrás de la cápsula flotante del menú. Así se lee como
   continuación del hero de la portada y no como una página interna
   más. La lista es explícita: toda página con hero partido tiene
   que estar aquí, o le queda una franja negra sobre la foto. */
.page-nosotros.page-inner,
.page-servicios.page-inner { padding-top: 0; }

.phero-split {
	min-height: clamp(460px, 66vh, 700px);
	padding-block: calc(var(--nav-h) + clamp(2.4rem, 5vw, 4.2rem)) clamp(2.6rem, 5vw, 4rem);

	background:
		/* el foco azul se va al centro-izquierda: a la derecha manda la foto */
		radial-gradient(88% 96% at 26% 34%, rgba(8, 120, 201, .13), transparent 62%),
		radial-gradient(70% 70% at 4% 84%, rgba(24, 169, 255, .05), transparent 64%),
		linear-gradient(180deg, #020609 0%, #020609 66%, var(--bg-main) 100%);
}

/* Texto por encima de todo lo demás, y en su propia columna:
   la rejilla es lo que impide que una línea larga se meta por
   debajo de la foto en pantallas medianas. */
.phero-split .wrap {
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
}
.phero-split .phero-txt {
	grid-column: 1;
	padding-right: clamp(1rem, 3vw, 2.5rem);
}

/* La cabecera es más alta que la variante sin foto: los arcos del
   fondo pueden llegar más abajo antes de apagarse. */
.phero-split .phero-deco {
	-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 98%);
	        mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 98%);
}

/* Los anillos concéntricos cambian de lado: la foto ya trae los
   suyos por su borde izquierdo, y así los dos juegos de arcos se
   encuentran en el centro del hero en vez de pelearse. */
.phero-split .ph-anillos-svg { left: -30%; right: auto; }

/* --- La foto ------------------------------------------------- */
.phero-foto {
	position: absolute; top: 0; right: 0; bottom: 0;
	z-index: 1;
	width: min(50%, 940px);
	pointer-events: none;

	/* Entrada: hereda la opacidad de .reveal-img y le suma
	   desplazamiento; el desenfoque va en .phero-foto-in. */
	transform: translateY(40px) scale(.96);
	transition:
		opacity 1s var(--ease),
		transform 1.15s var(--ease);
}
.phero-foto.is-in { transform: none; }

/* Resplandor azul detrás del panel, latido muy lento. */
.phero-foto::before {
	content: ""; position: absolute; z-index: -1;
	inset: 6% -12% 6% -22%;
	background: radial-gradient(52% 58% at 46% 50%, rgba(24, 169, 255, .17), transparent 72%);
	filter: blur(26px);
}
.phero-foto.is-in::before { animation: ph-latido 12s ease-in-out 1.2s infinite alternate; }

.phero-foto-in {
	position: relative; height: 100%; overflow: hidden;

	/* La máscara es lo que hace que la foto se funda con el fondo
	   en vez de terminar en un canto recto. */
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.30) 13%, #000 34%);
	        mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.30) 13%, #000 34%);
	-webkit-mask-size: 100% 100%; mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;

	/* El desenfoque comparte elemento con la máscara a propósito:
	   el filtro se aplica antes que el recorte, así que el borrón
	   no se escapa por los bordes. */
	filter: blur(8px);
	transition: filter .95s var(--ease);
}
.phero-foto.is-in .phero-foto-in { filter: blur(0); }

.phero-foto-in img {
	width: 100%; height: 100%;
	object-fit: cover; object-position: 68% 38%;
	transform: scale(1.04);
}
/* Ambiente: una deriva de escala tan lenta que no se ve moverse,
   solo da la sensación de que el plano sigue vivo. */
.phero-foto.is-in .phero-foto-in img {
	animation: ph-plano 24s ease-in-out 1.2s infinite alternate;
}

/* Tinte por encima: oscurece la izquierda del panel, refuerza el
   azul corporativo y apaga el canto inferior contra la sección
   siguiente. */
.phero-foto-tinte {
	position: absolute; inset: 0;
	background:
		/* izquierda más oscura: es donde va el texto */
		linear-gradient(90deg, #020609 0%, rgba(2, 6, 9, .50) 18%, rgba(2, 6, 9, 0) 46%),
		/* cantos superior e inferior apagados contra el fondo */
		linear-gradient(180deg, rgba(2, 6, 9, .42) 0%, rgba(2, 6, 9, 0) 20%, rgba(2, 6, 9, 0) 62%, rgba(2, 6, 9, .94) 100%),
		/* velo azul corporativo, apenas un tinte */
		linear-gradient(122deg, rgba(8, 120, 201, .13), rgba(2, 6, 9, 0) 56%);
}

@keyframes ph-plano  { from { transform: scale(1.04); } to { transform: scale(1.09); } }
@keyframes ph-latido { from { opacity: .75; } to { opacity: 1; } }

/* --- Hasta 899px: la foto se va debajo del texto -------------- */
@media (max-width: 899px) {
	.phero-split .wrap { display: block; }

	.phero-split {
		min-height: 0;
		padding-block: calc(var(--nav-h) + clamp(1.8rem, 6vw, 2.8rem)) 0;
	}

	/* Al volver al flujo normal ocupa el ancho completo de la
	   sección, que ya lleva overflow:hidden: nada se desborda. */
	.phero-foto {
		position: relative; inset: auto;
		width: 100%; aspect-ratio: 16 / 10;
		margin-top: clamp(1.6rem, 5vw, 2.4rem);
	}
	.phero-foto::before { inset: 14% -10% 0 -10%; }

	.phero-foto-in {
		-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 26%);
		        mask-image: linear-gradient(180deg, transparent 0%, #000 26%);
	}
	.phero-foto-in img { object-position: 66% 34%; }
	.phero-foto-tinte {
		background:
			linear-gradient(180deg, #020609 0%, rgba(2, 6, 9, .35) 24%, rgba(2, 6, 9, 0) 52%, #020609 100%),
			linear-gradient(122deg, rgba(8, 120, 201, .12), rgba(2, 6, 9, 0) 60%);
	}

	/* Los anillos vuelven al centro y bajan de intensidad. */
	.phero-split .ph-anillos-svg { left: -46%; }
	.phero-split .ph-halo { opacity: .7; }
}

/* --- Movimiento reducido ------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.phero-foto {
		opacity: 1 !important;
		transform: none !important;
	}
	.phero-foto-in { filter: none !important; }
	.phero-foto::before,
	.phero-foto-in img { animation: none !important; }
	.phero-foto-in img { transform: none; }
}


/* =============================================================
   22. PÁGINA SERVICIOS

   La cabecera reutiliza el layout partido de .phero-tec/.phero-split
   (texto a la izquierda, foto a sangre a la derecha) con un fondo
   azul propio: emparenta con el azul semi-oscuro de Nosotros —misma
   familia de marca, nunca negro puro— pero con su propio barrido
   diagonal y su propio color-grade sobre la foto, para que las dos
   cabeceras se sientan hermanas y no la misma plantilla repetida.
   De ahí en adelante la página vive sobre blanco: composición
   editorial de fotografía grande, numeración y espacio en blanco,
   sin tarjetas ni bordes.
   ============================================================= */

/* --- Apoyo y botones dentro del hero ------------------------- */
.phero-extra { margin-top: 1.5rem; }
.phero-texto {
	max-width: 46ch;
	color: var(--text-on-dark-body); font-size: var(--fs-parrafo); line-height: var(--lh-parrafo); font-weight: 500;
}
.phero-botones {
	margin-top: 1.8rem;
	display: flex; flex-wrap: wrap; gap: .7rem;
}

/* El hero de Servicios respira un poco más: lleva un párrafo de
   apoyo y dos botones que el de Nosotros no tiene. Solo de 900px
   hacia arriba: en móvil manda la altura del contenido. */
@media (min-width: 900px) {
	.page-servicios .phero-split { min-height: clamp(560px, 82vh, 860px); }
}
.page-servicios .srv-metodo { padding-top: clamp(3rem, 7vw, 5.5rem); }

/* --- El azul propio del hero -----------------------------------
   Nosotros vive de una foto con velo recto (oscuro a claro, en
   horizontal). Aquí el fondo es un barrido diagonal dentro de la
   misma familia de azules de marca (--accent-navy → --accent →
   --accent-light), más vivo en la esquina donde no hay foto encima,
   así el hero se lee "de la misma casa" sin ser el mismo recurso. */
.page-servicios .phero-split {
	background:
		radial-gradient(115% 90% at 92% -12%, rgba(24, 169, 255, .32), transparent 55%),
		radial-gradient(85% 85% at 4% 102%, rgba(11, 107, 196, .26), transparent 60%),
		linear-gradient(132deg, #071B33 0%, var(--accent-navy) 40%, #0B4C86 72%, var(--accent-deep) 100%);
}

/* La decoración técnica (anillos, curvas) ya venía calibrada para
   un fondo oscuro: se deja tal cual, solo un pelín más presente
   para que compita con un azul más vivo que el negro azulado
   original. */
.page-servicios .ph-respira  { opacity: .16; }
.page-servicios .ph-orb      { opacity: .15; }
.page-servicios .ph-curvas-a { opacity: .14; }

/* La foto se integra por color, no solo por velo: un color-grade
   azul en modo "multiply" la funde con la paleta de marca sin
   apagarla a negro —conserva su propio brillo y detalle, solo
   cambia de temperatura—, y el degradado direccional sigue
   reservando el contraste que necesita el texto a la izquierda. */
.page-servicios .phero-foto::before {
	background: radial-gradient(55% 60% at 46% 50%, rgba(24, 169, 255, .30), transparent 72%);
}
.page-servicios .phero-foto-tinte {
	mix-blend-mode: multiply;
	background:
		linear-gradient(90deg, var(--accent-navy) 0%, rgba(10, 47, 85, .62) 16%, rgba(10, 47, 85, 0) 44%),
		linear-gradient(180deg, rgba(7, 27, 51, .55) 0%, rgba(7, 27, 51, 0) 22%, rgba(7, 27, 51, 0) 60%, rgba(7, 27, 51, .92) 100%),
		linear-gradient(120deg, rgba(24, 169, 255, .20), rgba(10, 47, 85, 0) 55%);
}


/* --- "Cómo ayudamos": línea de tiempo ----------------------------
   Los cuatro pasos del mismo ciclo cuelgan de una vía continua en
   degradado azul; cada uno con su nodo numerado. En móvil la vía es
   vertical a la izquierda. Debajo, las cifras en grande separadas
   por filetes (app.js → initMetricas las cuenta al aparecer). ---- */
.srv-linea-pasos { position: relative; display: grid; gap: 2rem; margin-top: clamp(2.5rem, 5vw, 3.75rem); padding: 0; }
.srv-linea-pasos::before {
	content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px;
	background: linear-gradient(180deg, #2453E6, var(--accent-light));
}
.srv-linea-paso { position: relative; list-style: none; padding-left: 4.25rem; }
.srv-linea-nodo {
	position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 50%;
	display: grid; place-items: center; background: #2453E6; color: #fff;
	box-shadow: 0 0 0 6px var(--bg-secondary);
	font: 600 .82rem/1 var(--sans); letter-spacing: .04em;
}
.srv-linea-paso h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.35rem, 2vw, 1.6rem); letter-spacing: -.01em; color: var(--text-main); }
.srv-linea-paso p { margin-top: .5rem; max-width: 32ch; color: var(--text-body); font-size: var(--fs-parrafo-sm); line-height: var(--lh-parrafo-sm); }
@media (min-width: 900px) {
	.srv-linea-pasos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem clamp(1.5rem, 3vw, 2.5rem); }
	.srv-linea-pasos::before {
		left: 22px; right: 12.5%; top: 21px; bottom: auto; width: auto; height: 2px;
		background: linear-gradient(90deg, #2453E6, var(--accent-light));
	}
	.srv-linea-paso { padding-left: 0; padding-top: 4.25rem; }
}

.srv-linea-cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(3rem, 6vw, 4.5rem); border-top: 1px solid var(--border); }
.srv-linea-cifras-item { padding: 1.5rem 1rem 0 0; }
.srv-linea-cifras .srv-linea-cifras-num { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(2.4rem, 4.4vw, 3.4rem); line-height: 1; color: #1B146A; }
.srv-linea-cifras .srv-linea-cifras-txt { margin-top: .6rem; max-width: 22ch; color: var(--text-body); font-size: .95rem; line-height: 1.45; }
@media (min-width: 900px) {
	.srv-linea-cifras { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.srv-linea-cifras-item + .srv-linea-cifras-item { padding-left: 1.5rem; border-left: 1px solid var(--border); }
}


/* --- Los seis servicios: índice directo (.srvd) ----------------
   Una fila por servicio con lo justo para decidir: la etiqueta, el
   nombre y una frase de qué resuelve. Toda la fila es el enlace.
   Desde 960px, a la derecha, una sola foto fija que cambia al
   servicio que se señala (app.js → initSrvd). En móvil cada fila
   lleva su miniatura y la foto grande desaparece. -------------- */
.srvd-head { margin-bottom: clamp(2rem, 4.5vw, 3.2rem); }
.srvd-head .sec-title { max-width: 22ch; }
.srvd-grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }

.srvd-lista { border-top: 1px solid var(--border); }
.srvd-lista li { border-bottom: 1px solid var(--border); }
.srvd-fila {
	position: relative;
	display: grid; grid-template-columns: 72px minmax(0, 1fr) auto;
	gap: 1rem 1.2rem; align-items: center;
	padding: 1.15rem .4rem;
	transition: background-color .35s var(--ease), padding .45s var(--ease);
}
.srvd-mini { width: 72px; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--bg-tint); }
.srvd-mini img { width: 100%; height: 100%; object-fit: cover; }
/* El <picture> (que solo decide si se descarga la foto) no cuenta para
   la maquetación: la imagen se coloca igual que si no estuviera. */
.srvd-mini picture, .srvd-vista picture { display: contents; }
.srvd-txt { display: grid; gap: .2rem; min-width: 0; }
.srvd-tag {
	font-size: .7rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
	color: var(--text-secondary);
}
.srvd-nombre {
	font-size: clamp(1.2rem, 1.9vw, 1.5rem); font-weight: 600; letter-spacing: -.025em; line-height: 1.2;
	color: var(--text-main); transition: color .3s var(--ease);
}
.srvd-frase {
	margin-top: .15rem; max-width: 56ch;
	font-size: var(--fs-parrafo-sm); line-height: var(--lh-parrafo-sm); color: var(--text-body);
}
.srvd-flecha {
	width: 44px; height: 44px; border-radius: 50%; flex: none;
	display: grid; place-items: center;
	border: 1px solid var(--border); color: var(--text-main);
	transition: background-color .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease), transform .45s var(--ease);
}
.srvd-flecha svg { width: 15px; height: 15px; }

.srvd-fila:hover, .srvd-fila:focus-visible { background: var(--bg-tint-soft); }
.srvd-fila:hover .srvd-nombre, .srvd-fila:focus-visible .srvd-nombre { color: #1B146A; }
.srvd-fila:hover .srvd-flecha, .srvd-fila:focus-visible .srvd-flecha {
	background: #2453E6; border-color: #2453E6; color: #fff;
}
.srvd-fila:hover .srvd-flecha { transform: rotate(45deg); }
.srvd-fila:focus-visible { outline-offset: -2px; border-radius: 12px; }

/* Foto fija: todas apiladas, solo la activa visible. */
.srvd-vista { display: none; }

@media (min-width: 960px) {
	.srvd-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
	.srvd-fila { grid-template-columns: minmax(0, 1fr) auto; padding: 1.4rem 1rem; }
	.srvd-mini { display: none; }
	/* La fila activa acompaña a la foto: solo tiene sentido donde
	   la foto se ve. */
	.srvd-fila:hover, .srvd-fila.is-activa { padding-left: 1.5rem; }
	.srvd-fila.is-activa { background: var(--bg-tint-soft); }
	.srvd-fila.is-activa .srvd-nombre { color: #1B146A; }
	.srvd-fila.is-activa .srvd-flecha { background: #2453E6; border-color: #2453E6; color: #fff; }
	.srvd-vista {
		display: block; position: sticky; top: calc(var(--nav-h) + 28px);
		aspect-ratio: 4 / 5; border-radius: 20px; overflow: hidden;
		background: var(--bg-tint);
	}
	.srvd-vista img {
		position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
		opacity: 0; transform: scale(1.04);
		transition: opacity .6s var(--ease), transform 1.2s var(--ease);
	}
	.srvd-vista img.is-activa { opacity: 1; transform: none; }
}

@media (max-width: 479px) {
	.srvd-fila { grid-template-columns: 60px minmax(0, 1fr); padding-inline: 0; }
	.srvd-mini { width: 60px; }
	.srvd-flecha { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.srvd-vista img { transition: none; transform: none !important; }
	.srvd-fila:hover .srvd-flecha { transform: none; }
}

/* Cifras dentro de "Cómo ayudamos": cierran la misma sección en vez
   de abrir otra con su propio titular. */


/* --- Franja de cifras: mismo componente que .metricas (sección
   07), reutilizado tal cual para no duplicar el sistema. --------
   (la regla vive en la sección 07; aquí no hace falta nada más) */


/* =============================================================
   23. FICHA DE SERVICIO — cabecera con banner

   Las siete cabeceras de servicio son banners del diseño antiguo:
   azul plano con dibujo de líneas a la izquierda y una fotografía
   (o un collage) incrustada a la derecha. Con opacidad .3 y un velo
   plano encima no se apreciaba nada: quedaba una mancha oscura.

   Aquí la foto sube de opacidad y el velo pasa a ser direccional
   —opaco donde va el texto, casi limpio donde está la fotografía—,
   con un tinte que lleva el azul eléctrico del banner al azul
   profundo del resto de la web.
   ============================================================= */

/* La cabecera arranca en lo alto y el banner pasa por detrás de la
   cápsula del menú. Antes empezaba a 76px (--nav-h) mientras que el
   menú mide 116px de alto: el logo cruzaba el canto y se leía como
   si se saliera de la barra. Solo se anula cuando el servicio trae
   banner propio (.phero-media): un servicio sin foto todavía —como
   Tercerización mientras no tenga una— usa la cabecera de texto
   plano, y esa necesita el hueco normal para no meterse bajo el
   menú fijo. */
.page-ficha.page-inner:has(.phero-media) { padding-top: 0; }

.phero-media {
	min-height: clamp(400px, 56vh, 620px);
	display: grid;
	align-content: center;
	padding-block: calc(var(--nav-h) + clamp(2rem, 4.5vw, 3.6rem)) clamp(2.2rem, 4.5vw, 3.4rem);
}

/* El banner trae la fotografía metida en un recuadro con cantos
   rectos, y a tamaño completo se ve pegada encima del azul. Con un
   acercamiento sobre esa zona los cantos de arriba, abajo y derecha
   se salen del marco (la sección recorta), y solo queda el de la
   izquierda, justo donde el velo está más oscuro. */
.phero-media .phero-bg { overflow: hidden; }
/* object-position antes que el acercamiento: object-fit recorta
   PRIMERO, y en pantallas estrechas ese recorte se quedaba en la
   mitad vacía del banner. Lo que object-fit tira ya no hay zoom que
   lo recupere. */
.phero-media .phero-bg img {
	opacity: .82;
	object-position: var(--phero-corte, 80%) 50%;
	transform: scale(var(--phero-zoom, 1.72));
	transform-origin: var(--phero-foco, 79% 50%);
}

/* Velo direccional. El primer degradado protege la columna de
   texto, el segundo apaga los cantos de arriba y abajo, y el
   tercero tiñe de azul corporativo el violeta del banner. */
.phero-media .phero-veil {
	background:
		linear-gradient(90deg,
			rgba(2, 6, 9, .96) 0%,
			rgba(2, 6, 9, .90) 26%,
			rgba(2, 6, 9, .62) 52%,
			rgba(2, 6, 9, .42) 76%,
			rgba(2, 6, 9, .50) 100%),
		linear-gradient(180deg,
			rgba(2, 6, 9, .52) 0%,
			rgba(2, 6, 9, .10) 22%,
			rgba(2, 6, 9, .10) 58%,
			rgba(2, 6, 9, .90) 92%,
			var(--bg-main) 100%),
		linear-gradient(112deg, rgba(8, 120, 201, .22), rgba(2, 6, 9, 0) 64%);
}

/* Un resplandor azul detrás del titular, como en las otras dos
   cabeceras, para que las tres se lean como la misma familia. */
.phero-media::after {
	content: ""; position: absolute; inset: 0; z-index: 0;
	pointer-events: none;
	background: radial-gradient(38% 56% at 22% 50%,
		rgba(24, 169, 255, .16),
		rgba(8, 120, 201, .05) 46%,
		transparent 72%);
}

/* El texto se queda en la mitad izquierda, sobre la zona protegida. */
.page-ficha .phero-media .wrap { position: relative; z-index: 2; }
.page-ficha .phero-title { max-width: 15ch; }
.page-ficha .phero-sub { max-width: 44ch; }

/* Menos hueco muerto entre la cabecera y el cuerpo. */
.page-ficha .detalle { padding-top: clamp(2rem, 4.4vw, 3.4rem); }

/* La foto del cuerpo, igual que en Nosotros */
.page-ficha .detalle-media {
	border: 1px solid var(--border);
	border-radius: 20px;
	box-shadow:
		0 26px 70px -38px rgba(8, 120, 201, .35),
		0 0 40px -14px rgba(24, 169, 255, .10);
}

/* --- Hasta 899px --------------------------------------------- */
@media (max-width: 899px) {
	.phero-media {
		min-height: clamp(300px, 40vh, 420px);
		padding-block: calc(var(--nav-h) + clamp(1.6rem, 5vw, 2.6rem)) clamp(1.8rem, 4vw, 2.6rem);
	}
	/* En estrecho el banner se recorta muchísimo y la fotografía se
	   queda fuera: mejor centrarlo y bajar el velo lateral, que ahí
	   el texto ya va sobre la parte oscura. */
	/* En estrecho se acerca algo más: la zona útil del banner es
	   mucho más pequeña que el hueco disponible. */
	.phero-media .phero-bg img {
		opacity: .7;
		object-position: var(--phero-corte, 88%) 50%;
		transform: scale(calc(var(--phero-zoom, 1.72) * 1.1));
	}
	.phero-media .phero-veil {
		background:
			linear-gradient(180deg,
				rgba(2, 6, 9, .78) 0%,
				rgba(2, 6, 9, .55) 34%,
				rgba(2, 6, 9, .72) 70%,
				var(--bg-main) 100%),
			linear-gradient(112deg, rgba(8, 120, 201, .20), rgba(2, 6, 9, 0) 70%);
	}
	.page-ficha .phero-title { max-width: none; }
}


/* =============================================================
   24. LEGIBILIDAD SOBRE IMAGEN

   Los velos de las cabeceras ya dejan el lado del texto oscuro,
   pero el fondo de una fotografía nunca es plano: basta con que
   una luz de la planta caiga detrás de una línea para que esa
   línea pierda contraste. Una sombra muy abierta y muy suave
   despega el texto sin que se note que hay sombra.

   Va en el contenedor, no en cada elemento: text-shadow se hereda
   y así no hay que repetirlo. Y va con color, no con opacidad,
   que aclararía también a los hijos.
   ============================================================= */
.hero-in,
.phero-split .phero-txt,
.phero-media .wrap {
	text-shadow: 0 2px 16px rgba(0, 0, 0, .35);
}

/* Los botones llevan su propio fondo sólido: ahí la sombra no
   suma nada y sobre el azul primario solo ensucia el blanco. */
.hero-cta .btn,
.phero-botones .btn,
.phero-extra .btn { text-shadow: none; }


/* =============================================================
   25. CABECERA DEL BLOG — corriente digital (.phero-flujo)

   Tercera variante de cabecera, después de 'tec' (Nosotros) y de la
   foto partida (Servicios). Aquí no hay fotografía que contar: el
   blog es texto, así que el fondo es puro movimiento.

   Qué se mueve y a qué coste:
     · tres capas de color   -> transform + opacity (compositor)
     · seis partículas       -> transform + opacity (compositor)
     · cuatro corrientes     -> stroke-dashoffset, que sí repinta,
                                pero son cuatro trazos de 1,6px en
                                una franja pequeña de la pantalla.
   Las curvas de debajo no se animan: están quietas y dan el lecho
   por el que corre la luz.
   ============================================================= */

/* Como en las otras dos cabeceras, la sección arranca arriba del
   todo y la animación pasa por detrás de la cápsula del menú. */
.page-blog.page-inner { padding-top: 0; }

.phero-flujo {
	min-height: clamp(320px, 44vh, 470px);
	display: grid;
	align-content: center;
	padding-block: calc(var(--nav-h) + clamp(2.2rem, 4.6vw, 3.4rem)) clamp(2.6rem, 5vw, 3.8rem);

	background:
		radial-gradient(104% 88% at 76% 24%, rgba(8, 120, 201, .17), transparent 58%),
		radial-gradient(78% 68% at 10% 74%, rgba(24, 169, 255, .06), transparent 62%),
		linear-gradient(180deg, #020609 0%, #020609 60%, var(--bg-main) 100%);
}
.phero-flujo::before { content: none; }
.phero-flujo .wrap { z-index: 2; }
/* En rem y no en ch: ch se mide con el tamaño de letra del propio
   contenedor, que aquí son 16px, así que 40ch eran 320px y el
   titular se partía en una palabra por línea. */
.phero-flujo .phero-txt { position: relative; max-width: 32rem; }
/* La bajada es el único apoyo del titular en esta página: un punto
   más de cuerpo y algo más de aire por arriba. */
.phero-flujo .phero-sub { margin-top: 1.15rem; font-size: 1.08rem; }

/* --- La capa animada ----------------------------------------- */
.phero-flu {
	position: absolute; inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}
.phero-flu * { pointer-events: none; }

/* --- Capas de color ------------------------------------------ */
/* Degradados radiales, no filtros: un blur de este tamaño habría
   costado bastante más y el resultado es el mismo. */
.flu-capa {
	position: absolute;
	border-radius: 50%;
}
.flu-capa-a {
	width: 58%; aspect-ratio: 1.3; right: -6%; top: -34%;
	background: radial-gradient(closest-side, rgba(24, 169, 255, .30), rgba(24, 169, 255, 0) 72%);
	animation: flu-capa-a 28s ease-in-out infinite alternate;
}
.flu-capa-b {
	width: 48%; aspect-ratio: 1.1; right: 14%; bottom: -40%;
	background: radial-gradient(closest-side, rgba(8, 120, 201, .34), rgba(8, 120, 201, 0) 70%);
	animation: flu-capa-b 34s ease-in-out infinite alternate;
}
.flu-capa-c {
	width: 34%; aspect-ratio: 1; right: 36%; top: 18%;
	background: radial-gradient(closest-side, rgba(108, 203, 255, .16), rgba(108, 203, 255, 0) 68%);
	animation: flu-capa-c 23s ease-in-out infinite alternate;
}

@keyframes flu-capa-a { from { transform: translate3d(0, 0, 0)          scale(1);    } to { transform: translate3d(-7%, 6%, 0)  scale(1.12); } }
@keyframes flu-capa-b { from { transform: translate3d(0, 0, 0)          scale(1.08); } to { transform: translate3d(9%, -8%, 0)  scale(1);    } }
@keyframes flu-capa-c { from { transform: translate3d(0, 0, 0)          scale(.92);  } to { transform: translate3d(-11%, 9%, 0) scale(1.1);  } }

/* --- Las curvas ---------------------------------------------- */
.flu-svg {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	fill: none;
}

/* El lecho: quieto, apenas visible. Es lo que da a entender que la
   luz va POR algún sitio en vez de flotar suelta. */
.flu-lecho path {
	stroke: #0878C9;
	stroke-width: 1;
	opacity: .22;
}

/* La corriente. pathLength="1000" en el HTML normaliza las cuatro
   curvas, así que el guion mide lo mismo y viaja a la misma
   velocidad en todas por muy distinta que sea su longitud real. */
.flu-halo path,
.flu-corriente path {
	stroke: #18A9FF;
	stroke-linecap: round;
	stroke-dasharray: 90 1300;
	animation-name: flu-corre;
	animation-timing-function: cubic-bezier(.45, 0, .55, 1);
	animation-iteration-count: infinite;
}
.flu-corriente path { stroke-width: 1.7; }
/* El halo: mismo recorrido, trazo ancho y casi transparente. Se
   probó antes con filter: drop-shadow() sobre el grupo, pero un
   filtro encima de algo que se mueve obliga a rasterizar toda su
   caja en cada fotograma, y su caja aquí es la cabecera entera. */
.flu-halo path { stroke-width: 7; opacity: .16; }

/* Duraciones distintas y arranques negativos: entran ya desfasadas,
   sin el bloque inicial en el que irían todas a la vez. */
.flu-c1 { animation-duration: 12s;   animation-delay: -1s; }
.flu-c2 { animation-duration: 15s;   animation-delay: -6s;   stroke: #6CCBFF; }
.flu-c3 { animation-duration: 10.5s; animation-delay: -8.5s; }
.flu-c4 { animation-duration: 17s;   animation-delay: -3s;   stroke: #0878C9; stroke-width: 2.2; }

/* 90 + 1300 de patrón: el guion recorre la curva y luego hay una
   pausa antes de que vuelva a entrar. */
@keyframes flu-corre {
	from { stroke-dashoffset: 0; }
	to   { stroke-dashoffset: -1390; }
}

/* --- Partículas ---------------------------------------------- */
.flu-punto {
	position: absolute;
	left: var(--x); top: var(--y);
	width: 3px; height: 3px; border-radius: 50%;
	background: #8FD8FF;
	box-shadow: 0 0 9px 1px rgba(24, 169, 255, .55);
	opacity: 0;
	animation: flu-flota var(--d, 20s) ease-in-out var(--r, 0s) infinite;
}
@keyframes flu-flota {
	0%   { opacity: 0;   transform: translate3d(0, 16px, 0) scale(.5); }
	16%  { opacity: .85; }
	68%  { opacity: .5;  }
	100% { opacity: 0;   transform: translate3d(-14px, -74px, 0) scale(1); }
}

/* --- Velo ----------------------------------------------------
   Lo que garantiza que el titular se lea: oscurece la mitad
   izquierda y apaga el canto de abajo contra la rejilla. */
.flu-velo {
	position: absolute; inset: 0;
	background:
		linear-gradient(90deg,
			#020609 0%,
			rgba(2, 6, 9, .88) 26%,
			rgba(2, 6, 9, .42) 56%,
			rgba(2, 6, 9, .16) 100%),
		linear-gradient(180deg,
			rgba(2, 6, 9, .58) 0%,
			rgba(2, 6, 9, 0) 24%,
			rgba(2, 6, 9, 0) 60%,
			var(--bg-main) 100%);
}

/* --- La rejilla de artículos justo debajo -------------------- */
/* La cabecera ya cierra en el color del cuerpo, así que el listado
   solo necesita su aire; sin esto quedaba un salto. */
.page-blog .blog { padding-top: clamp(2.2rem, 4.6vw, 3.4rem); }

/* --- Hasta 719px --------------------------------------------- */
@media (max-width: 719px) {
	.phero-flujo {
		min-height: clamp(260px, 34vh, 340px);
		padding-block: calc(var(--nav-h) + clamp(1.8rem, 6vw, 2.6rem)) clamp(2rem, 5vw, 2.8rem);
	}
	.phero-flujo .phero-txt { max-width: none; }

	/* En vertical el texto ocupa todo el ancho: el velo deja de ser
	   lateral y pasa a cubrir de arriba abajo. */
	.flu-velo {
		background:
			linear-gradient(180deg,
				rgba(2, 6, 9, .80) 0%,
				rgba(2, 6, 9, .58) 42%,
				rgba(2, 6, 9, .70) 76%,
				var(--bg-main) 100%);
	}
	/* Menos carga en móvil: fuera las partículas y una corriente. */
	.flu-punto { display: none; }
	.flu-halo .flu-c4, .flu-corriente .flu-c4 { display: none; }
	.flu-capa-c { display: none; }
}

/* --- Movimiento reducido -------------------------------------
   El dibujo se queda; lo que se detiene es el movimiento. La
   corriente se para a mitad de recorrido para que no desaparezca. */
@media (prefers-reduced-motion: reduce) {
	.flu-capa, .flu-punto, .flu-halo path, .flu-corriente path {
		animation: none !important;
		transform: none !important;
	}
	.flu-punto { opacity: .5; }
	.flu-halo path, .flu-corriente path { stroke-dashoffset: -480; }
}


/* =============================================================
   26. VARIANTES DE LA CORRIENTE (blog / artículo)

   La corriente del blog es un componente, no un adorno de una
   página: la usa también la ficha de cada artículo. Para que no
   salga calcada en ambas, aquí solo se reencuadra —se refleja, se
   gira, se desplazan las capas—. El marcado y las animaciones son
   exactamente los mismos.
   ============================================================= */

/* Arranca arriba del todo, detrás de la barra flotante. */
.page-articulo.page-inner,
.page-contacto.page-inner { padding-top: 0; }

/* --- Variante B: reflejada ----------------------------------- */
/* scaleX sobre el SVG y no sobre la capa entera: así las capas de
   color y las partículas siguen en su sitio y el resultado no es un
   espejo exacto del original. */
/* Se refleja el SVG, que es lo que cambia el dibujo de las curvas,
   pero las capas de color se quedan a la derecha. Al principio se
   movieron también a la izquierda y la luz acababa justo debajo de
   la parte más opaca del velo: no se veía nada. */
.phero-flujo-b .flu-svg { transform: scaleX(-1); }
.phero-flujo-b .flu-capa-a { right: -16%; top: -22%; }
.phero-flujo-b .flu-capa-b { right: 2%; bottom: -34%; }
.phero-flujo-b .flu-capa-c { right: 28%; top: 42%; }
.phero-flujo-b .flu-c1 { animation-duration: 13.5s; }
.phero-flujo-b .flu-c3 { animation-duration: 16s; }

/* --- Variante C: girada y desplazada ------------------------- */
.phero-flujo-c .flu-svg { transform: rotate(-4deg) scale(1.16) translateX(3%); }
.phero-flujo-c .flu-capa-a { top: -46%; right: 12%; }
.phero-flujo-c .flu-capa-b { right: -4%; bottom: -30%; }
.phero-flujo-c .flu-capa-c { right: 52%; top: 6%; }
.phero-flujo-c .flu-c2 { animation-duration: 11s; }
.phero-flujo-c .flu-c4 { animation-duration: 19s; }

/* --- La cabecera del artículo -------------------------------- */
/* El titular de un artículo es una frase larga, no una palabra: sin
   soltar el ancho se partía en cinco o seis líneas. */
.page-articulo .phero-title {
	max-width: 22ch;
	font-size: clamp(2rem, 4.4vw, 3.4rem);
	line-height: 1.06;
}
.page-articulo .phero-flujo { min-height: clamp(300px, 40vh, 430px); }
.page-articulo .phero-flujo .phero-txt { max-width: 46rem; }
.page-articulo .post { padding-top: clamp(2rem, 4.4vw, 3.2rem); }


/* =============================================================
   CONTACTO

   A sangre completa, como Nosotros y Servicios: la barra flotante
   queda encima de la fotografía (sin franja blanca detrás), y el
   propio hueco de .phero-media (padding-block con --nav-h) es lo
   que la separa del borde superior, no el padding de la página. El
   texto vive dentro de un wrap-ancho (1480px) para alinearse con el
   bloque de 2 columnas y el mapa de más abajo, pero el fondo llega
   hasta los dos bordes de la pantalla. El velo es un degradado
   grafito muy suave, no azul ni blanco: dejamos la fotografía
   respirar con su propio color y solo la apagamos lo justo para
   leer el texto — el mismo lenguaje de velo oscuro que ya usan
   Nosotros y Servicios, pero mucho más ligero, nunca negro casi
   opaco, y con una altura moderada, no la cabecera más alta del
   sitio. */
.page-contacto .phero-media {
	min-height: clamp(460px, 56vh, 640px);
	padding-block: calc(var(--nav-h) + clamp(2.4rem, 5vw, 3.8rem)) clamp(2.6rem, 5vw, 4rem);
}
.page-contacto .phero-media .wrap { max-width: 1480px; }

.page-contacto .phero-bg img {
	opacity: 1;
	object-position: var(--phero-corte, 63%) 22%;
	transform: scale(var(--phero-zoom, 1.14));
	transform-origin: var(--phero-foco, 63% 27%);
}

/* Velo ligero: solo protege la franja del texto, y se disuelve mucho
   antes de llegar a los rostros — la foto debe leerse como una
   reunión de verdad, no como una textura de trajes detrás de un
   filtro. Nada de capa uniforme: es un degradado corto, más una
   niebla que un velo. */
.page-contacto .phero-media .phero-veil {
	background:
		linear-gradient(90deg,
			rgba(12, 15, 20, .38) 0%,
			rgba(12, 15, 20, .24) 20%,
			rgba(12, 15, 20, .11) 36%,
			rgba(12, 15, 20, .03) 48%,
			transparent 58%),
		linear-gradient(180deg,
			rgba(12, 15, 20, .1) 0%,
			transparent 24%,
			transparent 74%,
			rgba(12, 15, 20, .2) 100%);
}
.page-contacto .phero-media::after {
	background: radial-gradient(34% 50% at 16% 40%,
		rgba(24, 169, 255, .12),
		rgba(8, 120, 201, .03) 46%,
		transparent 70%);
}

.page-contacto .phero-title { max-width: 14ch; font-size: clamp(2.4rem, 5.4vw, 4rem); }
.page-contacto .phero-media .phero-sub { max-width: 36ch; }
/* La sombra compartida de la sección 24 (16px de difuminado) es
   demasiado marcada para un velo ya tan ligero: aquí se acorta y se
   aclara — el degradado hace el trabajo de legibilidad, la sombra
   solo despega el borde. */
.page-contacto .phero-media .wrap { text-shadow: 0 1px 8px rgba(0, 0, 0, .22); }

.page-contacto .phero-botones .btn-ghost { border-color: var(--border-on-dark); color: var(--text-on-dark); }
.page-contacto .phero-botones .btn-ghost:hover { border-color: var(--accent-light); background: rgba(255, 255, 255, .1); color: #fff; }

@media (max-width: 899px) {
	.page-contacto .phero-media {
		min-height: clamp(460px, 62vh, 580px);
		align-content: end;
		padding-bottom: clamp(2.2rem, 7vw, 3rem);
	}
	.page-contacto .phero-bg img {
		object-position: 60% 20%;
		transform: scale(1.08);
		transform-origin: 60% 24%;
	}
	.page-contacto .phero-media .phero-veil {
		background:
			linear-gradient(0deg,
				rgba(12, 15, 20, .5) 0%,
				rgba(12, 15, 20, .26) 38%,
				rgba(12, 15, 20, .08) 62%,
				transparent 82%),
			linear-gradient(90deg, rgba(12, 15, 20, .22) 0%, transparent 55%);
	}
	.page-contacto .phero-title { max-width: none; }
	.page-contacto .phero-media .phero-sub { max-width: none; }
}

.ctc { padding: clamp(3rem, 7vw, 5rem) 0 clamp(2.5rem, 5vw, 4rem); }
.ctc-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.2rem, 5vw, 4rem); align-items: start; }

/* --- Columna izquierda --------------------------------------- */
.ctc-titulo {
	font-family: var(--serif);
	font-size: clamp(1.8rem, 3.6vw, 2.8rem);
	font-weight: 400; line-height: 1.1; letter-spacing: -.01em;
	max-width: 16ch;
}
.ctc-texto {
	margin-top: 1.1rem; max-width: 46ch;
	color: var(--text-body); font-size: var(--fs-parrafo); line-height: var(--lh-parrafo); font-weight: 500;
}

.ctc-pasos { margin-top: clamp(2rem, 4vw, 2.8rem); display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
.ctc-paso { display: flex; align-items: flex-start; gap: 1rem; min-width: 0; }

.ctc-ico {
	flex: none;
	width: 42px; height: 42px; border-radius: 13px;
	display: grid; place-items: center;
	color: var(--accent);
	border: 1px solid rgba(24, 169, 255, .22);
	background: rgba(24, 169, 255, .07);
	transition: border-color .4s var(--ease), background-color .4s var(--ease);
}
.ctc-ico svg { width: 19px; height: 19px; }
.ctc-paso:hover .ctc-ico { border-color: rgba(24, 169, 255, .42); background: rgba(24, 169, 255, .13); }

.ctc-paso-txt { display: grid; gap: .18rem; min-width: 0; color: var(--text-secondary); font-size: var(--fs-parrafo-sm); line-height: 1.5; }
.ctc-paso-txt strong { color: var(--text-main); font-weight: 600; font-size: 1rem; letter-spacing: -.015em; }
/* El padding con margen negativo agranda el área de toque (de 23px a
   ~35px de alto) sin mover el texto ni el espacio entre líneas. */
.ctc-paso-txt a {
	justify-self: start; padding-block: .35rem; margin-block: -.35rem;
	color: var(--text-body); transition: color .3s var(--ease); overflow-wrap: anywhere;
}
.ctc-paso-txt a:hover { color: var(--accent-deep); }
/* --text-secondary y no --text-dim: aquí va un teléfono o correo de
   ventas que hay que poder leer, y --text-dim es solo decorativo. */
.ctc-paso-nota { display: block; font-size: .82rem; color: var(--text-secondary); overflow-wrap: anywhere; }

/* --- La tarjeta del formulario --------------------------------
   La página vive sobre blanco: tarjeta clara con borde y sombra
   reales, no un vidrio oscuro pensado para un fondo que ya no está. */
.ctc-card {
	position: relative;
	padding: clamp(1.5rem, 3.2vw, 2.5rem);
	border: 1px solid var(--border);
	border-radius: 22px;
	background:
		radial-gradient(120% 90% at 20% 0%, rgba(8, 120, 201, .05), transparent 56%),
		var(--bg-card);
	box-shadow: var(--shadow-lift);
}
.ctc-card-titulo {
	font-size: 1.22rem; font-weight: 600; letter-spacing: -.02em;
	margin-bottom: 1.6rem;
	padding-bottom: 1.1rem;
	border-bottom: 1px solid var(--border-soft);
}

/* Dentro de la tarjeta el formulario va a una columna: en el ancho
   que le queda, dos columnas dejaban los campos demasiado cortos. */
.ctc-card .form { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.ctc-card .form > button[type="submit"] { margin-top: .4rem; }

/* --- Mapa: título discreto + tarjeta ancha, integrado con el
   resto de la página en vez de un iframe genérico pegado abajo. --- */
.ctc-mapa-sec { padding: 0 0 clamp(4.5rem, 9vw, 7rem); }
.ctc-mapa-titulo {
	font-family: var(--serif);
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	font-weight: 400; letter-spacing: -.01em;
	margin-bottom: 1.25rem;
}
.mapa-ctc {
	margin-top: 0;
	border-radius: 26px;
	border: 1px solid var(--border);
	box-shadow: var(--shadow-card);
}
/* A color: el gris con velo invertido queda bien sobre fondo claro,
   pero encima de un hero fotográfico se sentía otro apagón más. El
   mapa es la única pieza de la página con permiso para traer su
   propio color — es información, no una superficie de marca. */
.mapa-ctc iframe { height: clamp(420px, 52vh, 560px); filter: none; }

/* --- De 940px hacia arriba: las dos columnas ----------------- */
@media (min-width: 940px) {
	.ctc-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: clamp(2.5rem, 5vw, 4.5rem); }
	/* El lado izquierdo acompaña al formulario mientras se rellena. */
	.ctc-lado { position: sticky; top: calc(var(--nav-h) + 32px); }
}

/* Solo cuando la tarjeta es de verdad ancha vuelven las dos
   columnas del formulario. */
@media (min-width: 1240px) {
	.ctc-card .form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1.6rem; }
}

/* --- Movimiento reducido ------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.ctc-lado { position: static; }
}


/* =============================================================
   27. NOSOTROS — composición editorial

   Antes esta página era lo mismo que las demás: una columna de
   texto con h2 seguidos, cuatro cajas y una foto pegada al lado.
   Aquí el contenido no es una oferta que se compara, es una
   declaración que se lee de arriba abajo, así que la página va por
   franjas de ancho distinto y sin una sola rejilla de tarjetas.
   ============================================================= */

/* --- Entradilla ---------------------------------------------- */
.nsx-lead { padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2rem, 4vw, 3rem); }
.nsx-lead-txt {
	max-width: 22ch;
	font-size: clamp(1.45rem, 3.2vw, 2.5rem);
	font-weight: 400; line-height: 1.28; letter-spacing: -.025em;
	color: var(--text-main);
}
/* El ancho se da en ch sobre el propio párrafo, que aquí sí tiene el
   tamaño de letra correcto. */
@media (min-width: 900px) { .nsx-lead-txt { max-width: 30ch; } }

/* --- Propósito / misión / visión ----------------------------- */
.nsx-casa { padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }

.nsx-pilar {
	display: grid;
	gap: .5rem 2.5rem;
	padding: clamp(1.8rem, 4vw, 2.8rem) 0;
	border-top: 1px solid var(--border-soft);
}
.nsx-pilar:last-child { border-bottom: 1px solid var(--border-soft); }

.nsx-pilar-n {
	font-size: .8rem; font-weight: 600;
	letter-spacing: .18em;
	color: var(--accent);
}
.nsx-pilar-clave {
	font-family: var(--serif);
	font-size: clamp(1.5rem, 3vw, 2.2rem);
	font-weight: 400; line-height: 1.1; letter-spacing: -.01em;
	color: var(--text-main);
}
.nsx-pilar-txt {
	color: var(--text-body);
	font-size: var(--fs-parrafo); line-height: var(--lh-parrafo); font-weight: 500;
	max-width: 58ch;
}

@media (min-width: 860px) {
	/* Numeral y rótulo a la izquierda, enunciado a la derecha: el ojo
	   baja por la columna de claves y el texto queda a su altura. */
	.nsx-pilar { grid-template-columns: 4rem minmax(0, 15rem) minmax(0, 1fr); align-items: start; }
	.nsx-pilar-n { padding-top: .45rem; }
	.nsx-pilar-txt { padding-top: .2rem; }
}

/* --- La foto a sangre ---------------------------------------- */
.nsx-foto {
	position: relative;
	margin: clamp(1rem, 3vw, 2rem) 0 0;
	aspect-ratio: 21 / 9;
	overflow: hidden;
	display: grid; align-items: end;
}
.nsx-foto img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover; object-position: center 32%;
}
.nsx-foto-velo {
	position: absolute; inset: 0;
	background:
		linear-gradient(180deg, var(--bg-main) 0%, rgba(2, 6, 9, .18) 22%, rgba(2, 6, 9, .30) 52%, rgba(2, 6, 9, .92) 100%),
		linear-gradient(104deg, rgba(8, 120, 201, .20), rgba(2, 6, 9, 0) 58%);
}
.nsx-foto-pie { position: relative; z-index: 1; padding-bottom: clamp(1.4rem, 3.4vw, 2.6rem); }
.nsx-foto-pie p {
	max-width: 34ch;
	font-size: clamp(.95rem, 1.7vw, 1.12rem);
	/* Blanco: el pie cae sobre el tramo más oscuro del velo. */
	line-height: 1.45; color: #fff; font-weight: 500;
	text-shadow: 0 2px 16px rgba(0, 0, 0, .45);
}

@media (max-width: 719px) {
	.nsx-foto { aspect-ratio: 4 / 3; }
	.nsx-foto img { object-position: center 28%; }
}

/* --- Carrusel automático de la foto a sangre -------------------
   Todas las fotos apiladas; la activa aparece en fundido y se
   acerca muy despacio mientras está en pantalla. El pase lo lleva
   app.js (initNsxCar) cada --nsx-t; cada punto se rellena en ese
   mismo tiempo para que se vea cuánto falta para la siguiente. */
.nsx-foto { --nsx-t: 6s; }
[data-nsx-car] img {
	opacity: 0; transform: scale(1.06);
	transition: opacity 1.2s var(--ease), transform calc(var(--nsx-t) + 1.2s) linear;
}
[data-nsx-car] img.is-activa { opacity: 1; transform: scale(1); }

.nsx-car-ctrl {
	position: absolute; z-index: 2;
	right: var(--gut); bottom: clamp(1.2rem, 3.2vw, 2.4rem);
	display: flex; align-items: center; gap: .35rem;
}
.nsx-car-punto {
	width: 38px; height: 32px;
	display: grid; align-items: center;
}
.nsx-car-punto span {
	position: relative; display: block; height: 3px; border-radius: 3px;
	background: rgba(255, 255, 255, .35); overflow: hidden;
}
.nsx-car-punto span::after {
	content: ""; position: absolute; inset: 0; border-radius: inherit;
	background: #fff; transform: scaleX(0); transform-origin: left center;
}
.nsx-car-punto:hover span { background: rgba(255, 255, 255, .6); }
.nsx-car-punto.is-activa span::after { animation: nsx-avance var(--nsx-t) linear forwards; }
[data-nsx-pausado] .nsx-car-punto.is-activa span::after { animation: none; transform: scaleX(1); }
@keyframes nsx-avance { to { transform: scaleX(1); } }

.nsx-car-pausa {
	width: 36px; height: 36px; margin-left: .4rem; border-radius: 50%;
	display: grid; place-items: center;
	background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .35);
	color: #fff; transition: background-color .3s;
}
.nsx-car-pausa:hover { background: rgba(255, 255, 255, .26); }
.nsx-car-pausa svg { width: 14px; height: 14px; }
.nsx-ico-play { display: none; }
[data-nsx-pausado] .nsx-ico-pausa { display: none; }
[data-nsx-pausado] .nsx-ico-play { display: block; }

@media (max-width: 719px) {
	.nsx-car-punto { width: 26px; }
}
@media (prefers-reduced-motion: reduce) {
	[data-nsx-car] img { transition: opacity .3s; transform: none !important; }
}

/* --- Valores -------------------------------------------------- */
.nsx-valores { padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(3rem, 6vw, 4.5rem); }
.nsx-valores-in { display: grid; gap: clamp(2rem, 4.5vw, 3.5rem); align-items: start; }

.nsx-valores-tit {
	margin-top: 1rem;
	font-family: var(--serif);
	font-size: clamp(1.8rem, 3.6vw, 2.9rem);
	font-weight: 400; line-height: 1.08; letter-spacing: -.01em;
	max-width: 14ch;
}

/* Filetes en vez de cajas: cuatro afirmaciones seguidas se leen
   mejor en columna que repartidas en una rejilla de rectángulos. */
.nsx-lista { display: grid; }
.nsx-valor {
	display: grid;
	gap: .45rem;
	padding: clamp(1.3rem, 2.6vw, 1.9rem) 0;
	border-top: 1px solid var(--border-soft);
	transition: border-color .45s var(--ease);
}
.nsx-valor:last-child { border-bottom: 1px solid var(--border-soft); }
.nsx-valor:hover { border-top-color: rgba(24, 169, 255, .30); }

.nsx-valor-ico { font-size: 1.4rem; color: var(--accent); line-height: 1; }
.nsx-valor-tit { font-size: 1.08rem; font-weight: 600; letter-spacing: -.02em; color: var(--text-main); }
.nsx-valor-txt { color: var(--text-body); font-size: var(--fs-parrafo-sm); line-height: var(--lh-parrafo-sm); max-width: 62ch; }

@media (min-width: 900px) {
	.nsx-valores-in { grid-template-columns: minmax(0, .8fr) minmax(0, 1.35fr); gap: clamp(3rem, 6vw, 5rem); }
	.nsx-valores-head { position: sticky; top: calc(var(--nav-h) + 34px); }
	.nsx-valor { grid-template-columns: 2.4rem minmax(0, 1fr); column-gap: 1.1rem; }
	.nsx-valor-ico { grid-row: span 2; padding-top: .2rem; }
}


/* =============================================================
   28. ARTÍCULO — lectura larga

   Una ficha de servicio se ojea; un artículo se lee entero. Así
   que aquí no hay tarjetas ni rejillas: columna estrecha, entradilla
   a mayor cuerpo, la foto saliéndose del ancho de lectura y una
   barra que dice cuánto queda.
   ============================================================= */

/* --- Barra de lectura ---------------------------------------- */
.lee-barra {
	position: fixed; top: 0; left: 0; right: 0;
	height: 2px; z-index: 1200;
	pointer-events: none;
	background: var(--border-soft);
}
.lee-barra span {
	display: block; height: 100%;
	transform: scaleX(0); transform-origin: left center;
	background: linear-gradient(90deg, var(--accent-deep), var(--accent), var(--accent-light));
}
/* Sin JS la barra vacía sería una raya gris cruzando la pantalla. */
.no-js .lee-barra { display: none; }

/* --- Cabecera del texto -------------------------------------- */
.post { padding-bottom: clamp(3rem, 7vw, 5rem); }
.post-in { max-width: 720px; margin-inline: auto; }

.post-firma {
	display: flex; flex-wrap: wrap; align-items: center;
	gap: .4rem 1.5rem;
	padding-bottom: 1.4rem;
	border-bottom: 1px solid var(--border-soft);
	font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
	color: var(--text-secondary);
}
/* inline-flex + min-height: el enlace medía 20px de alto, poco para
   el dedo; así crece el área de toque sin mover la línea. */
.post-firma-cat { display: inline-flex; align-items: center; min-height: 32px; color: var(--accent); font-weight: 600; transition: color .3s; }
.post-firma-cat:hover { color: var(--accent-light); }

/* --- La foto --------------------------------------------------
   Se probó sacándola a 1000px, más ancha que la columna, que es lo
   que haría una revista. Pero los originales son de 720px: al
   ampliarlos se emborronaba la única imagen del artículo. Se queda
   al ancho del texto y el empaque lo dan el marco y el pie. */
.post-medi {
	width: min(720px, calc(100% - 2 * var(--gut)));
	margin: clamp(1.8rem, 4vw, 2.8rem) auto clamp(2rem, 4.5vw, 3rem);
	border-radius: var(--radius); overflow: hidden;
	border: 1px solid var(--border);
	box-shadow: 0 30px 80px -50px rgba(8, 120, 201, .35);
}
.post-medi img { width: 100%; height: auto; display: block; }
/* El pie va como crédito de foto, alineado a la izquierda, no como
   una barra centrada en versales cruzando la imagen. */
.post-medi figcaption {
	padding: .8rem 1.1rem;
	background: var(--bg-secondary);
	border-top: 1px solid var(--border-soft);
	font-size: .8rem; letter-spacing: 0; text-transform: none;
	color: var(--text-secondary); text-align: left; line-height: 1.45;
}

/* --- El cuerpo ------------------------------------------------ */
/* La primera frase entra a mayor cuerpo: marca dónde empieza el
   texto y da el tono. Es lo que hace cualquier revista. */
.post-cont > p:first-of-type {
	font-size: clamp(1.12rem, 2.1vw, 1.3rem);
	line-height: 1.58;
	color: var(--text-main);
	margin-bottom: 1.6rem;
}

/* Un filete azul corto antes de cada apartado: da ritmo a un texto
   largo sin meter más cajas. */
.post-cont h2 { position: relative; padding-top: 1.1rem; }
.post-cont h2::before {
	content: ""; position: absolute; top: 0; left: 0;
	width: 34px; height: 2px; border-radius: 2px;
	background: var(--accent);
}

/* Los títulos heredaban el interlineado de párrafo (1.68) y el h3
   quedaba casi a la misma distancia del párrafo de arriba que del
   suyo: se leía como otro párrafo en negrita. Interlineado de
   titular, más aire encima que debajo y un escalón claro sobre el
   cuerpo para los subapartados («Paso 1…», «Funciones de…»). */
.post-cont h2, .post-cont h3 { line-height: 1.22; text-wrap: balance; }
.post-cont h3 {
	font-size: clamp(1.15rem, 1rem + .6vw, 1.35rem);
	margin: 2.3rem 0 .55rem;
}
.post-cont h2 + h3 { margin-top: 1.2rem; }

.post-foot { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

/* --- Siguiente lectura ---------------------------------------- */
.sigue {
	padding: clamp(3rem, 7vw, 5rem) 0 clamp(4rem, 9vw, 6.5rem);
	border-top: 1px solid var(--border-soft);
	background: radial-gradient(72% 110% at 82% 0%, rgba(8, 120, 201, .09), transparent 60%);
}
.sigue-in { max-width: 880px; margin-inline: auto; }
.sigue-lista { margin-top: 1.6rem; display: grid; }

.sigue-item { border-top: 1px solid var(--border-soft); }
.sigue-item:last-child { border-bottom: 1px solid var(--border-soft); }
.sigue-item a {
	display: grid;
	grid-template-columns: 3rem minmax(0, 1fr) 2.4rem;
	align-items: center;
	gap: 1rem;
	padding: clamp(1.1rem, 2.4vw, 1.6rem) .2rem;
	transition: padding-left .45s var(--ease);
}
.sigue-item a:hover { padding-left: 1rem; }

.sigue-n {
	font-size: .82rem; font-weight: 600; letter-spacing: .14em;
	color: var(--accent);
}
.sigue-txt { display: grid; gap: .25rem; min-width: 0; }
.sigue-cat {
	font-size: .72rem; font-weight: 600;
	letter-spacing: .18em; text-transform: uppercase;
	color: var(--text-secondary);
}
.sigue-tit {
	font-size: clamp(1.02rem, 2vw, 1.24rem);
	font-weight: 500; letter-spacing: -.02em; line-height: 1.3;
	color: var(--text-main);
	transition: color .35s var(--ease);
}
/* --accent-deep y no --accent-light: el celeste sobre blanco quedaba
   en 1,9:1 y el título desaparecía justo al señalarlo. */
.sigue-item a:hover .sigue-tit { color: var(--accent-deep); }

.sigue-flecha {
	justify-self: end;
	width: 34px; height: 34px; border-radius: 999px;
	display: grid; place-items: center;
	border: 1px solid var(--border);
	color: var(--text-secondary);
	transition: border-color .35s, color .35s, background-color .35s, transform .45s var(--ease);
}
.sigue-flecha svg { width: 14px; height: 14px; }
.sigue-item a:hover .sigue-flecha {
	border-color: var(--border-accent);
	background: rgba(22, 156, 255, .1);
	color: var(--accent-light);
	transform: translateX(3px);
}

@media (max-width: 599px) {
	.sigue-item a { grid-template-columns: 2.2rem minmax(0, 1fr); gap: .8rem; }
	.sigue-flecha { display: none; }
	.sigue-item a:hover { padding-left: .2rem; }
}


/* =============================================================
   29. FICHA DE SERVICIO — resumen de entrada y ritmo del cuerpo

   Una ficha se ojea antes de leerse: quien llega quiere saber en
   diez segundos si es lo que busca. De ahí el resumen de arriba,
   con la frase de venta a cuerpo grande y los cuatro puntos al
   lado. El cuerpo largo va después, para quien ya decidió.
   ============================================================= */

.fsv-resumen { padding: clamp(2.4rem, 5vw, 3.8rem) 0 clamp(1.4rem, 3vw, 2.2rem); }
.fsv-resumen-in { display: grid; gap: clamp(1.8rem, 4vw, 3rem); align-items: start; }

.fsv-pitch {
	font-size: clamp(1.25rem, 2.6vw, 1.85rem);
	font-weight: 400; line-height: 1.34; letter-spacing: -.022em;
	color: var(--text-main);
	max-width: 26ch;
}

.fsv-incluye {
	padding: clamp(1.2rem, 2.4vw, 1.7rem) clamp(1.3rem, 2.6vw, 1.8rem);
	border: 1px solid var(--border);
	border-radius: 18px;
	background:
		radial-gradient(120% 100% at 10% 0%, rgba(8, 120, 201, .06), transparent 58%),
		var(--bg-card);
}
.fsv-incluye-et {
	display: block; margin-bottom: .9rem;
	font-size: .66rem; font-weight: 600;
	letter-spacing: .2em; text-transform: uppercase;
	color: var(--accent-light);
}
.fsv-incluye-lista { display: grid; gap: .6rem; }
.fsv-incluye-lista li {
	position: relative; padding-left: 1.5rem;
	font-size: .94rem; line-height: 1.5; color: var(--text-body);
}
/* Misma marca de verificación que las tarjetas de /servicios/: es el
   mismo tipo de dato y conviene que se lea igual. */
.fsv-incluye-lista li::before {
	content: ""; position: absolute; left: 0; top: .42em;
	width: 9px; height: 5px;
	border-left: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent);
	transform: rotate(-45deg);
}

@media (min-width: 900px) {
	.fsv-resumen-in { grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); gap: clamp(2.5rem, 5vw, 4.5rem); }
}

/* --- Ritmo del cuerpo largo ----------------------------------
   .texto ya solo lo usa esta página (Nosotros dejó de usarlo al
   pasar a composición editorial), así que se puede tratar como lo
   que es: el desarrollo técnico de un servicio. */
.texto h2 { position: relative; padding-top: 1.2rem; }
.texto h2::before {
	content: ""; position: absolute; top: 0; left: 0;
	width: 34px; height: 2px; border-radius: 2px;
	background: var(--accent);
}
.detalle { padding-top: clamp(1rem, 2.5vw, 1.8rem); }


/* =============================================================
   30. SERVICIOS — jerarquía entre las tarjetas

   Siete bloques del mismo tamaño se leen como una lista, no como
   una oferta: nada destaca y el ojo se cansa a la tercera. La
   primera tarjeta crece y las demás se quedan como estaban. Es el
   recurso de portada de cualquier revista: una pieza de apertura y
   el resto a un cuerpo menor.
   ============================================================= */
@media (min-width: 860px) {
	.srvx-lista:not(.srvx-resto) > .srvx-card:first-child {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
		padding: clamp(1.8rem, 3.2vw, 2.6rem);
	}
	.srvx-lista:not(.srvx-resto) > .srvx-card:first-child .srvx-media { aspect-ratio: 5 / 4; }
	.srvx-lista:not(.srvx-resto) > .srvx-card:first-child .srvx-titulo { font-size: clamp(2rem, 3.8vw, 2.9rem); }
	.srvx-lista:not(.srvx-resto) > .srvx-card:first-child .srvx-texto { font-size: 1.08rem; max-width: 40ch; }
	.srvx-lista:not(.srvx-resto) > .srvx-card:first-child .srvx-num { font-size: 2rem; }
}


/* =============================================================
   31. DIGITALIZACIÓN — SMARTPHONE IPERC

   El teléfono es un mockup HTML/CSS puro (sin imagen): así se ve
   nítido a cualquier resolución y escala con --dphone-w, la única
   variable que cambia entre la versión grande de la ficha de
   servicio y la compacta del bloque de Inicio.

   EXCEPCIÓN DE COLOR ACOTADA — Regla del Acento Único (DESIGN.md):
   el naranja (--dig-naranja) es el único lugar de todo el sitio
   donde compite con el azul, y a propósito: es el color universal
   de "riesgo alto" en señalética de seguridad industrial, el mismo
   idioma visual que ya usa la cinta de peligro o un chaleco. Vive
   solo dentro de .dig-hero/.dig-modulos — como variable de esas
   dos raíces, ningún otro selector puede heredarlo por accidente.
   ============================================================= */
.dig-hero, .dig-modulos, .fsv-fono {
	--dig-naranja: #FF7A29;
	--dig-naranja-deep: #D95E14;
	--dig-naranja-suave: rgba(255, 122, 41, .14);
}

.dig-hero { padding-block: clamp(2.5rem, 6vw, 4rem); }
.dig-hero-in {
	display: grid; gap: clamp(2.4rem, 6vw, 3rem);
	align-items: center;
}
.dig-hero-texto { max-width: 42rem; }
.dig-hero-texto .phero-title,
.dig-hero-texto .sec-title { max-width: 15ch; }
.dig-hero-fono { display: flex; justify-content: center; }

@media (min-width: 860px) {
	.dig-hero-in { grid-template-columns: minmax(0, 1.1fr) minmax(0, .8fr); gap: clamp(3rem, 6vw, 5rem); }
	.dig-hero--grande .dig-hero-in { grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); }
	.dig-hero-fono { justify-content: flex-end; }
}

.dig-modulos-sec { padding: clamp(1rem, 3vw, 2rem) 0 clamp(3rem, 6vw, 4.5rem); }

/* --- El teléfono ------------------------------------------------
   Todas las medidas cuelgan de --dphone-w: la pantalla es la misma
   en las dos variantes, solo cambia la escala. */
.dphone {
	--dphone-w: clamp(230px, 30vw, 296px);
	--dphone-marino: var(--accent-navy);
	/* Escala de riesgo en el idioma de la señalética industrial:
	   rojo alto, naranja medio, verde bajo. Solo existe dentro del
	   teléfono (variables de .dphone, nunca de :root). */
	--dphone-rojo: #E5372B;
	--dphone-verde: #1FA84F;
	width: var(--dphone-w);
}
.dphone--compacta { --dphone-w: clamp(176px, 34vw, 228px); }

/* Marco: canto plateado fino alrededor de un bisel negro, como un
   teléfono real, en vez del bloque de grafito anterior. */
.dphone-frame {
	position: relative; width: var(--dphone-w); aspect-ratio: 9 / 19.3;
	background: #0b0d10;
	border-radius: calc(var(--dphone-w) * .165);
	padding: calc(var(--dphone-w) * .03);
	box-shadow:
		0 0 0 calc(var(--dphone-w) * .011) #c9ced6,
		0 0 0 calc(var(--dphone-w) * .016) #9aa2ad,
		0 46px 90px -34px rgba(10, 15, 25, .48),
		0 12px 26px -14px rgba(10, 15, 25, .32);
}
.dphone-screen {
	position: relative; width: 100%; height: 100%;
	background: #E9EDF2;
	border-radius: calc(var(--dphone-w) * .135);
	overflow: hidden;
	display: flex; flex-direction: column;
	font-family: var(--sans);
}
.dphone-notch {
	position: absolute; top: calc(var(--dphone-w) * .045); left: 50%; transform: translateX(-50%);
	width: 30%; height: calc(var(--dphone-w) * .042);
	background: #050608; border-radius: 999px; z-index: 5;
}

/* Cabecera marino: cubre la barra de estado y el título. */
.dphone-top { background: var(--dphone-marino); color: #fff; flex-shrink: 0; }
.dphone-bar {
	display: flex; align-items: center; justify-content: space-between;
	padding: calc(var(--dphone-w) * .06) calc(var(--dphone-w) * .09) 0;
	font-weight: 600; font-size: calc(var(--dphone-w) * .042);
}
.dphone-bar-icons { display: flex; align-items: flex-end; gap: calc(var(--dphone-w) * .016); }
.dphone-bar-senal, .dphone-bar-wifi, .dphone-bar-bateria { display: block; background: #fff; opacity: .9; }
.dphone-bar-senal { width: calc(var(--dphone-w) * .028); height: calc(var(--dphone-w) * .028); border-radius: 1px; clip-path: polygon(0 100%, 35% 100%, 35% 45%, 0 45%, 65% 100%, 65% 20%, 100% 100%, 100% 0, 0 0); }
.dphone-bar-wifi { width: calc(var(--dphone-w) * .034); height: calc(var(--dphone-w) * .028); border-radius: 1px; }
.dphone-bar-bateria { width: calc(var(--dphone-w) * .06); height: calc(var(--dphone-w) * .028); border-radius: 2px; opacity: .6; }

.dphone-head {
	display: flex; align-items: center; justify-content: space-between;
	padding: calc(var(--dphone-w) * .075) calc(var(--dphone-w) * .09) calc(var(--dphone-w) * .07);
}
.dphone-head h4 { font-weight: 700; font-size: calc(var(--dphone-w) * .068); color: #fff; letter-spacing: -.01em; }
.dphone-buscar { width: calc(var(--dphone-w) * .065); height: calc(var(--dphone-w) * .065); color: #fff; }

/* Pestañas: la activa es un bloque de acento con texto blanco y una
   línea corta debajo, sobre una franja blanca. */
.dphone-tabs {
	display: flex; gap: calc(var(--dphone-w) * .02);
	padding: calc(var(--dphone-w) * .03) calc(var(--dphone-w) * .045) calc(var(--dphone-w) * .035);
	background: #fff;
	box-shadow: 0 1px 0 rgba(16, 22, 31, .06);
	flex-shrink: 0;
}
.dphone-tab {
	position: relative; flex: 1; text-align: center;
	font-weight: 600; font-size: calc(var(--dphone-w) * .04);
	color: var(--text-main);
	padding: calc(var(--dphone-w) * .03) 0;
	border-radius: calc(var(--dphone-w) * .018);
}
.dphone-tab.is-active { background: var(--accent); color: #fff; }
.dphone-tab.is-active::after {
	content: ""; position: absolute; left: 50%; transform: translateX(-50%);
	bottom: calc(var(--dphone-w) * -.03);
	width: 38%; height: calc(var(--dphone-w) * .007); border-radius: 2px;
	background: var(--accent);
}

.dphone-app { flex: 1; display: flex; flex-direction: column; padding: calc(var(--dphone-w) * .045) calc(var(--dphone-w) * .045) 0; position: relative; min-height: 0; }

/* La última tarjeta se apaga en degradado: nunca se corta en seco
   contra el borde de la pantalla. */
.dphone-cards {
	flex: 1; overflow: hidden; position: relative;
	-webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 99%);
	mask-image: linear-gradient(180deg, #000 82%, transparent 99%);
}
.dphone-cards-track { display: flex; flex-direction: column; gap: calc(var(--dphone-w) * .04); }
.dphone-card {
	background: #fff;
	border-radius: calc(var(--dphone-w) * .03);
	padding: calc(var(--dphone-w) * .055) calc(var(--dphone-w) * .055) calc(var(--dphone-w) * .05);
	box-shadow: 0 8px 18px -14px rgba(16, 22, 31, .35);
	color: var(--text-main);
}
.dphone-card h5 { font-weight: 600; font-size: calc(var(--dphone-w) * .05); line-height: 1.22; margin-top: calc(var(--dphone-w) * .03); }

/* Destacada: marino, texto blanco, riesgo en una placa roja. */
.dphone-card--destacada { background: var(--dphone-marino); color: #fff; box-shadow: 0 14px 26px -16px rgba(10, 47, 85, .7); }
.dphone-card--destacada h5 { margin-top: 0; font-size: calc(var(--dphone-w) * .048); }
.dphone-card--destacada .dphone-estado { margin-top: calc(var(--dphone-w) * .03); }
.dphone-nivel-linea {
	display: flex; align-items: center; flex-wrap: wrap; gap: calc(var(--dphone-w) * .02);
	margin-top: calc(var(--dphone-w) * .025);
	font-weight: 700; font-size: calc(var(--dphone-w) * .052); line-height: 1.2;
}
.dphone-alto {
	background: var(--dphone-rojo); color: #fff;
	padding: calc(var(--dphone-w) * .008) calc(var(--dphone-w) * .025);
	border-radius: calc(var(--dphone-w) * .012);
	text-transform: uppercase; font-size: calc(var(--dphone-w) * .06);
}

.dphone-estado {
	display: inline-block;
	font-weight: 600; font-size: calc(var(--dphone-w) * .033);
	padding: calc(var(--dphone-w) * .01) calc(var(--dphone-w) * .025);
	border-radius: calc(var(--dphone-w) * .012);
	color: #fff;
}
.dphone-estado--proceso { background: #fff; color: var(--dphone-marino); }
.dphone-estado--completado { background: var(--dphone-verde); }
.dphone-estado--pendiente { background: var(--dig-naranja); }

.dphone-nivel {
	margin-top: calc(var(--dphone-w) * .012);
	font-weight: 700; font-size: calc(var(--dphone-w) * .075); line-height: 1.1;
	text-transform: uppercase; letter-spacing: .01em;
}
.dphone-nivel--bajo { color: var(--dphone-verde); }
.dphone-nivel--medio { color: var(--dig-naranja); }

.dphone-card-pie {
	display: flex; align-items: center; justify-content: space-between; gap: calc(var(--dphone-w) * .02);
	margin-top: calc(var(--dphone-w) * .045);
}
.dphone-fecha { font-size: calc(var(--dphone-w) * .033); color: var(--text-dim); white-space: nowrap; }
.dphone-card--destacada .dphone-fecha { color: rgba(255, 255, 255, .78); }
.dphone-abrir {
	flex: none;
	font-weight: 700; font-size: calc(var(--dphone-w) * .036);
	color: var(--dphone-marino); background: #fff;
	border: 1px solid var(--border);
	padding: calc(var(--dphone-w) * .014) calc(var(--dphone-w) * .045);
	border-radius: calc(var(--dphone-w) * .014);
}
.dphone-card--destacada .dphone-abrir { border-color: transparent; }

/* Botón flotante de nuevo registro: naranja de la escala de riesgo,
   con anillo blanco para despegarse de la tarjeta de debajo. */
.dphone-fab {
	position: absolute; right: calc(var(--dphone-w) * .05); bottom: calc(var(--dphone-w) * .08);
	width: calc(var(--dphone-w) * .2); height: calc(var(--dphone-w) * .2);
	border-radius: 50%;
	background: linear-gradient(155deg, #FF9A3D, var(--dig-naranja) 45%, var(--dphone-rojo));
	border: calc(var(--dphone-w) * .012) solid #fff;
	color: #fff;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 14px 26px -10px rgba(217, 94, 20, .6);
}
.dphone-fab svg { width: 46%; height: 46%; }
.dphone-home {
	position: absolute; left: 50%; bottom: calc(var(--dphone-w) * .022); transform: translateX(-50%);
	width: 30%; height: calc(var(--dphone-w) * .01);
	border-radius: 999px; background: var(--text-main); opacity: .35;
}


/* =============================================================
   32. BLOG CLARO — cabecera con foto, tarjetas y cabecera de
   artículo. Sin tono oscuro: todo vive sobre blanco y sobre los
   colores de la paleta oficial (referencias/paletas.png):
   #1B146A marino (titulares), #2453E6 azul real (acentos),
   #4D4D4D y #808080 (texto y metadatos).
   ============================================================= */
.page-blog, .page-articulo {
	--bl-marino: #1B146A;
	--bl-azul: #2453E6;
	--bl-texto: #4D4D4D;
	--bl-meta: #808080;
}

/* --- Cabecera del listado ------------------------------------
   Banda compacta (no ocupa la pantalla: el blog empieza enseguida)
   con la foto a sangre, encuadrada hacia los dos supervisores.
   Encima, una capa gris de la paleta (#4D4D4D) para que el nav
   transparente y el texto blanco se lean igual que en el resto de
   cabeceras con foto. */
.bhero {
	position: relative; overflow: hidden; isolation: isolate;
	min-height: clamp(340px, 44vh, 440px);
	display: grid; align-content: center;
	padding-block: calc(var(--nav-h) + clamp(1.6rem, 3.5vw, 2.6rem)) clamp(2rem, 4vw, 3rem);
}
.bhero-bg { position: absolute; inset: 0; z-index: -1; }
.bhero-bg img {
	width: 100%; height: 100%; object-fit: cover;
	/* Encuadre algo por debajo del centro: en una banda baja, así
	   entran los cascos y los chalecos de los dos supervisores. */
	object-position: 62% 60%;
}
/* Capa gris: más densa a la izquierda (donde va el texto) y arriba
   (donde va el nav), casi nada sobre los supervisores. */
.bhero::after {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background:
		linear-gradient(90deg, rgba(77, 77, 77, .72) 0%, rgba(77, 77, 77, .55) 30%, rgba(77, 77, 77, .25) 55%, rgba(77, 77, 77, .12) 100%),
		linear-gradient(180deg, rgba(77, 77, 77, .45) 0%, rgba(77, 77, 77, 0) 28%);
}
.bhero-in { position: relative; text-shadow: 0 1px 3px rgba(0, 0, 0, .35), 0 4px 22px rgba(0, 0, 0, .25); }
.bhero-titulo {
	margin-top: 1.1rem;
	font-family: var(--serif); font-weight: 400;
	font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1; letter-spacing: -.015em;
	color: #fff;
	max-width: 12ch;
}
.page-blog .bhero .eyebrow { color: rgba(255, 255, 255, .88); }
.page-blog .bhero .eyebrow::before { background: #fff; }
.bhero-sub {
	margin-top: 1.3rem; max-width: 34ch;
	font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem); line-height: 1.55; font-weight: 500;
	color: rgba(255, 255, 255, .92);
}
.bhero-dato {
	margin-top: 1.6rem;
	display: inline-flex; align-items: center; gap: .55rem; flex-wrap: wrap;
	padding: .55rem 1rem .55rem .7rem;
	background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 999px;
	font-size: .86rem; color: #fff; text-shadow: none;
	backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.bhero-dato strong {
	display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding-inline: .4rem;
	border-radius: 999px; background: var(--bl-azul); color: #fff; font-size: .82rem;
}
.bhero-dato a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.bhero-dato a:hover { color: rgba(255, 255, 255, .8); }

/* Miga de pan (listado por categoría y artículo). */
.bhero-miga {
	display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
	font-size: .82rem; font-weight: 500; color: var(--bl-meta);
}
.bhero-miga a { color: var(--bl-azul); display: inline-flex; align-items: center; min-height: 32px; }
.bhero-miga a:hover { color: var(--bl-marino); }
.bhero-miga span:last-child { color: var(--bl-marino); }
/* Sobre la foto de la cabecera del listado, la miga va en blanco. */
.bhero .bhero-miga { color: rgba(255, 255, 255, .7); }
.bhero .bhero-miga a, .bhero .bhero-miga span:last-child { color: #fff; }
.bhero .bhero-miga a:hover { color: rgba(255, 255, 255, .75); }

/* Categoría: el nombre es una frase larga, el titular baja un
   escalón para no partirse en cinco líneas. */
.page-blog .bhero-miga + .bhero-titulo { font-size: clamp(2.3rem, 5.4vw, 4.2rem); line-height: 1.05; max-width: 18ch; }

/* --- Filtros ------------------------------------------------- */
.page-blog .blog { padding-top: clamp(1rem, 2.5vw, 1.8rem); }
.page-blog .blog-filtros a { background: #fff; border-color: rgba(36, 83, 230, .2); color: var(--bl-texto); }
.page-blog .blog-filtros a:hover { border-color: var(--bl-azul); color: var(--bl-azul); }
.page-blog .blog-filtros a.is-on { background: var(--bl-marino); border-color: var(--bl-marino); color: #fff; }

/* --- Tarjetas de artículo ------------------------------------
   Tarjeta blanca con la foto enmarcada dentro (no a sangre), la
   categoría en píldora, la fecha en gris y un botón circular de
   flecha abajo. Toda la tarjeta es clicable: el enlace del título
   se estira con un ::after sobre toda la superficie. */
.bposts { display: grid; gap: clamp(1.2rem, 2.4vw, 1.8rem); }
.bpost {
	position: relative;
	display: flex; flex-direction: column;
	padding: .7rem;
	background: #fff;
	border: 1px solid rgba(36, 83, 230, .14);
	border-radius: 22px;
	transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s;
}
.bpost:hover { transform: translateY(-5px); border-color: rgba(36, 83, 230, .35); box-shadow: 0 30px 50px -34px rgba(27, 20, 106, .45); }
.bpost-medi {
	position: relative; overflow: hidden;
	aspect-ratio: 16 / 10; border-radius: 16px;
	background: rgba(36, 83, 230, .06);
}
.bpost-medi img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.bpost:hover .bpost-medi img { transform: scale(1.05); }
.bpost-info { display: flex; flex-direction: column; gap: .7rem; flex: 1; padding: 1.2rem .8rem .8rem; }
.bpost-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; font-size: .78rem; color: var(--bl-meta); }
.bpost-cat {
	padding: .3rem .7rem; border-radius: 999px;
	background: rgba(36, 83, 230, .1); color: var(--bl-azul);
	font-weight: 600; font-size: .72rem;
	max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bpost-titulo { font-family: var(--serif); font-size: clamp(1.1rem, 1.5vw, 1.25rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.28; color: var(--bl-marino); }
.bpost-titulo a { color: inherit; }
.bpost-titulo a::after { content: ""; position: absolute; inset: 0; border-radius: 22px; }
.bpost-titulo a:focus-visible { outline: none; }
.bpost:focus-within { outline: 2px solid var(--bl-azul); outline-offset: 3px; }
.bpost-resumen { flex: 1; font-size: var(--fs-parrafo-sm); line-height: 1.6; color: var(--bl-texto); }
.bpost-leer {
	margin-top: .4rem;
	display: flex; align-items: center; justify-content: space-between;
	padding-top: 1rem; border-top: 1px solid rgba(36, 83, 230, .12);
	font-size: .86rem; font-weight: 600; color: var(--bl-marino);
}
.bpost-flecha {
	width: 38px; height: 38px; border-radius: 50%;
	display: grid; place-items: center;
	background: rgba(36, 83, 230, .1); color: var(--bl-azul);
	transition: background-color .3s, color .3s, transform .45s var(--ease);
}
.bpost-flecha svg { width: 15px; height: 15px; }
.bpost:hover .bpost-flecha { background: var(--bl-azul); color: #fff; transform: rotate(45deg); }

@media (min-width: 720px) { .bposts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
	.bposts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	/* El primer artículo abre la rejilla a todo el ancho. */
	.bposts > .bpost:first-child {
		grid-column: 1 / -1;
		display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		gap: clamp(1rem, 2.5vw, 2rem); align-items: stretch;
	}
	.bposts > .bpost:first-child .bpost-medi { aspect-ratio: auto; min-height: 340px; height: 100%; }
	.bposts > .bpost:first-child .bpost-info { padding: clamp(1.4rem, 3vw, 2.4rem) clamp(1rem, 2.5vw, 2rem); justify-content: center; }
	.bposts > .bpost:first-child .bpost-titulo { font-family: var(--serif); font-weight: 400; font-size: clamp(1.8rem, 2.8vw, 2.5rem); line-height: 1.12; letter-spacing: -.01em; }
	.bposts > .bpost:first-child .bpost-resumen { flex: 0 1 auto; font-size: var(--fs-parrafo); }
}

/* --- Cabecera del artículo ----------------------------------- */
.ahero {
	position: relative; overflow: hidden; isolation: isolate;
	padding-block: calc(var(--nav-h) + clamp(2.8rem, 6vw, 4.5rem)) clamp(1.2rem, 3vw, 2rem);
	background:
		radial-gradient(70% 90% at 85% 0%, rgba(36, 83, 230, .16), transparent 65%),
		linear-gradient(180deg, rgba(36, 83, 230, .07), #fff 92%);
}
/* Retícula de puntos en azul de la paleta, solo arriba a la derecha. */
.ahero::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background-image: radial-gradient(rgba(36, 83, 230, .28) 1.1px, transparent 1.5px);
	background-size: 22px 22px;
	-webkit-mask-image: radial-gradient(ellipse 55% 75% at 100% 0%, #000, transparent 72%);
	mask-image: radial-gradient(ellipse 55% 75% at 100% 0%, #000, transparent 72%);
}
.ahero-in { max-width: 720px; margin-inline: auto; }
.ahero-titulo {
	margin-top: 1.2rem;
	font-family: var(--serif); font-weight: 400;
	font-size: clamp(2.1rem, 4.6vw, 3.5rem); line-height: 1.08; letter-spacing: -.01em;
	color: var(--bl-marino);
}
.ahero-titulo em { font-style: normal; color: var(--bl-azul); }
.page-articulo .ahero .post-firma { margin-top: 1.6rem; color: var(--bl-meta); }
.page-articulo .post-firma-cat { color: var(--bl-azul); }
.page-articulo .post-firma-cat:hover { color: var(--bl-marino); }
.page-articulo .post { padding-top: 0; }

/* --- Cabecera con banner de foto (.ahero--foto) ----------------
   La foto grande de la categoría a todo el ancho; un velo marino
   de la paleta, denso a la izquierda (texto) y arriba (nav), casi
   limpio a la derecha. El texto se apoya abajo, como en una
   portada de reportaje. */
.ahero--foto {
	min-height: clamp(440px, 62vh, 620px);
	display: grid; align-content: end;
	padding-block: calc(var(--nav-h) + 3rem) clamp(2.4rem, 5vw, 3.6rem);
	background: #0B1530;
}
.ahero--foto::before { display: none; }
.ahero-bg { position: absolute; inset: 0; z-index: -2; }
/* Mismo encuadre que la cabecera del listado (.bhero-bg img). */
.ahero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 60%; }
.ahero--foto::after {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background:
		linear-gradient(90deg, rgba(11, 18, 48, .86) 0%, rgba(11, 18, 48, .7) 38%, rgba(11, 18, 48, .25) 72%, rgba(11, 18, 48, .1) 100%),
		linear-gradient(0deg, rgba(11, 18, 48, .55) 0%, rgba(11, 18, 48, 0) 45%),
		linear-gradient(180deg, rgba(11, 18, 48, .5) 0%, rgba(11, 18, 48, 0) 30%);
}
/* El texto se alinea con el contenedor, no con la columna de 720px:
   así queda a la izquierda, sobre la zona del velo. */
.ahero--foto .ahero-in { max-width: var(--maxw); }
.ahero--foto .ahero-titulo {
	color: #fff; max-width: 20ch;
	font-size: clamp(2.2rem, 4.8vw, 3.9rem);
	text-shadow: 0 2px 24px rgba(0, 0, 0, .25);
}
.ahero--foto .ahero-titulo em { color: inherit; }
.ahero--foto .bhero-miga { color: rgba(255, 255, 255, .7); }
.ahero--foto .bhero-miga a { color: #fff; }
.ahero--foto .bhero-miga a:hover { color: var(--accent-light); }
.page-articulo .ahero--foto .post-firma {
	color: rgba(255, 255, 255, .82);
	border-bottom-color: rgba(255, 255, 255, .22);
	max-width: 720px;
}
.page-articulo .ahero--foto .post-firma-cat { color: var(--accent-light); }
.page-articulo .ahero--foto .post-firma-cat:hover { color: #fff; }
@media (max-width: 719px) {
	.ahero--foto { min-height: clamp(420px, 72vh, 560px); }
	.ahero--foto::after {
		background:
			linear-gradient(0deg, rgba(11, 18, 48, .88) 0%, rgba(11, 18, 48, .6) 55%, rgba(11, 18, 48, .35) 100%);
	}
}

/* --- Banner del servicio relacionado (.abanner) ----------------
   Pausa a mitad del artículo. Sale de la columna de 720px hasta
   1040px como máximo, sobre el lavado de azul de la marca: foto del
   servicio a la izquierda, texto y dos acciones a la derecha. */
.abanner {
	--abanner-w: min(1040px, calc(100vw - 2 * var(--gut)));
	width: var(--abanner-w);
	margin: clamp(2.4rem, 5vw, 3.4rem) 0 clamp(2.6rem, 5vw, 3.6rem) calc(50% - var(--abanner-w) / 2);
	display: grid; overflow: hidden;
	background: var(--bg-tint);
	border: 1px solid rgba(36, 83, 230, .14);
	border-radius: 20px;
}
.abanner-foto { aspect-ratio: 16 / 9; overflow: hidden; }
.abanner-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.abanner:hover .abanner-foto img { transform: scale(1.04); }
.abanner-txt { padding: clamp(1.6rem, 3.5vw, 2.6rem); align-self: center; }
.abanner .eyebrow { color: var(--bl-marino); }
.abanner .eyebrow::before { background: var(--bl-azul); }
.abanner-titulo {
	margin-top: .9rem;
	font-family: var(--serif); font-weight: 400;
	font-size: clamp(1.6rem, 2.8vw, 2.25rem); line-height: 1.1; letter-spacing: -.01em;
	color: var(--bl-marino); text-wrap: balance;
}
.abanner-resumen {
	margin-top: .9rem; max-width: 46ch;
	color: var(--text-body); font-size: var(--fs-parrafo); line-height: var(--lh-parrafo); font-weight: 500;
}
.abanner-acciones { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .65rem; }
.abanner .btn-ghost { background: #fff; }
@media (min-width: 820px) {
	.abanner { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
	/* La foto acompaña el alto del texto: va en absoluto para que una
	   foto vertical (Digitalización, Sistemas) no estire el banner. */
	.abanner-foto { position: relative; aspect-ratio: auto; min-height: 320px; }
	.abanner-foto img { position: absolute; inset: 0; }
}

/* La segunda mitad del cuerpo no repite la entradilla grande. */
.post-cont--sigue > p:first-of-type {
	font-size: inherit; line-height: inherit; color: inherit; margin-bottom: 1.15rem;
}


/* =============================================================
   33. CABECERA CLARA DE SERVICIOS (.shero)
   La usan /servicios/ (variante --grande) y cada ficha de servicio
   (salvo Digitalización, que abre con el teléfono). Sin velo
   oscuro: fondo blanco con dos luces del azul de la paleta en
   transparencia, texto a la izquierda y la foto real a la derecha
   en un marco redondeado, con una ficha blanca encima.
   Colores: paleta oficial — #1B146A titulares, #2453E6 acentos,
   #4D4D4D texto, #808080 metadatos.
   ============================================================= */
.page-servicios.page-inner,
.page-ficha.page-inner:has(.shero) { padding-top: 0; }

.shero {
	position: relative; overflow: hidden; isolation: isolate;
	padding-block: calc(var(--nav-h) + clamp(2.6rem, 5.5vw, 4.2rem)) clamp(3rem, 6vw, 4.8rem);
	background:
		radial-gradient(45% 65% at 8% 12%, rgba(36, 83, 230, .16), transparent 70%),
		radial-gradient(40% 60% at 96% 92%, rgba(0, 44, 230, .1), transparent 70%),
		var(--bg-main);
}
.shero-in { display: grid; gap: clamp(2.2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 1024px) {
	.shero-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
	.shero--grande { min-height: clamp(620px, 92vh, 860px); display: grid; align-content: center; }
}

.shero .eyebrow { color: #1B146A; }
.shero .eyebrow::before { background: #2453E6; }
.shero-miga {
	display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
	font-size: .82rem; font-weight: 500; color: #808080;
}
.shero-miga a { color: #2453E6; display: inline-flex; align-items: center; min-height: 32px; }
.shero-miga a:hover { color: #1B146A; }
.shero-miga span:last-child { color: #1B146A; }

.shero-titulo {
	margin-top: 1.1rem;
	font-family: var(--serif); font-weight: 400;
	font-size: clamp(2.4rem, 4.4vw, 3.9rem); line-height: 1.06; letter-spacing: -.01em;
	color: #1B146A; max-width: 16ch;
}
.shero--grande .shero-titulo { font-size: clamp(2.4rem, 4.2vw, 4.1rem); max-width: 17ch; }
.shero-titulo em { font-style: normal; color: #2453E6; }
.shero-sub {
	margin-top: 1.3rem; max-width: 44ch;
	color: #4D4D4D; font-size: var(--fs-parrafo); line-height: var(--lh-parrafo); font-weight: 500;
}
.shero-botones { margin-top: clamp(1.8rem, 3.6vw, 2.4rem); display: flex; flex-wrap: wrap; gap: .8rem; }
.shero-botones .btn-ghost { border-color: rgba(27, 20, 106, .3); color: #1B146A; }
.shero-botones .btn-ghost:hover { border-color: #2453E6; color: #2453E6; background: rgba(36, 83, 230, .06); }
.shero-tagline {
	margin-top: clamp(1.8rem, 3.6vw, 2.4rem);
	font-size: .78rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
	color: #808080;
}
.shero-tagline span { margin: 0 1em; color: rgba(128, 128, 128, .5); font-weight: 400; }

/* Foto en marco redondeado, a su proporción natural (4:3 en la de
   Servicios; las de cada servicio se recortan a la misma medida). */
.shero-media {
	position: relative; margin: 0;
	border-radius: clamp(22px, 2.6vw, 32px); overflow: hidden;
	aspect-ratio: 4 / 3;
	background: rgba(36, 83, 230, .08);
	box-shadow: 0 40px 80px -50px rgba(27, 20, 106, .45);
}
.shero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Ficha blanca sobre la foto, abajo a la izquierda. */
.shero-chip {
	position: absolute; left: clamp(.8rem, 2vw, 1.3rem); bottom: clamp(.8rem, 2vw, 1.3rem);
	display: inline-flex; align-items: center; gap: .7rem; max-width: calc(100% - 2rem);
	padding: .65rem 1.1rem .65rem .8rem;
	background: rgba(255, 255, 255, .94); border-radius: 999px;
	backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
	font-size: .84rem; font-weight: 600; color: #1B146A;
}
.shero-chip-linea { flex: none; width: 18px; height: 2px; border-radius: 2px; background: #2453E6; }
.shero-chip-num {
	flex: none; display: grid; place-items: center; min-width: 30px; height: 30px; padding-inline: .3rem;
	border-radius: 999px; background: #2453E6; color: #fff; font-size: .78rem;
}

/* =============================================================
   33b. CABECERA DE /servicios/ A PANTALLA COMPLETA (.svh)
   La foto del equipo en campo cubre todo el primer pantallazo bajo
   un velo negro al 50 % (más denso abajo, donde va el texto). Es el
   caso permitido de fondo oscuro: fotografía con velo, nunca un
   bloque sólido. Tres composiciones: --1 portada con fila de
   servicios, --2 mosaico de servicios, --3 tarjeta blanca flotante.
   ============================================================= */
/* En /servicios/ los párrafos y metadatos de las secciones claras
   van un escalón más oscuros para que se lean con más presencia. */
.page-servicios main { --text-body: #2A3342; --text-secondary: #46536A; }

.svh {
	--svh-velo: .5;
	position: relative; overflow: hidden; isolation: isolate;
	min-height: 100vh; min-height: 100svh;
	display: grid; grid-template-rows: 1fr auto;
	color: #fff; background: #0B0F16;
}
.svh-foto { position: absolute; inset: 0; z-index: -2; }
.svh-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; display: block; }
.svh::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background:
		linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, transparent 22%),
		linear-gradient(0deg, rgba(0, 0, 0, .55) 0%, transparent 55%),
		rgba(0, 0, 0, var(--svh-velo));
}
.svh-in {
	align-self: end; width: 100%;
	padding-top: calc(var(--nav-h) + clamp(1.5rem, 5vh, 3.5rem));
	padding-bottom: clamp(2rem, 6vh, 4.5rem);
}
.svh .eyebrow { color: rgba(255, 255, 255, .86); }
.svh .eyebrow::before { background: #6CCBFF; }
.svh-titulo {
	margin-top: 1.1rem;
	font-family: var(--serif); font-weight: 400;
	font-size: clamp(2.3rem, min(5vw, 8vh), 4.8rem); line-height: 1.04; letter-spacing: -.01em;
	max-width: min(100%, 12.5em); text-wrap: balance;
}
.svh-titulo em { font-style: normal; color: inherit; }
.svh-sub {
	margin-top: 1.3rem; max-width: 52ch;
	color: rgba(255, 255, 255, .94); font-size: var(--fs-parrafo); line-height: var(--lh-parrafo); font-weight: 500;
}
.svh-botones { margin-top: clamp(1.6rem, 3.4vw, 2.2rem); display: flex; flex-wrap: wrap; gap: .8rem; }
.svh-botones .btn-light { border-color: rgba(255, 255, 255, .45); }
.svh-botones .btn-light:hover { border-color: #fff; color: #fff; }
.svh a:focus-visible { outline: 2px solid #6CCBFF; outline-offset: 3px; }

/* --1 · Fila de servicios al pie, separada por filetes finos. */
.svh-fila { border-top: 1px solid rgba(255, 255, 255, .2); background: rgba(0, 0, 0, .28); }
.svh-fila-in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.svh-fila-item {
	display: grid; gap: .35rem; align-content: start;
	padding: 1.1rem 1rem 1.2rem 0;
	border-top: 1px solid rgba(255, 255, 255, .12);
	color: #fff; transition: color .3s, background-color .3s;
}
.svh-fila-item:nth-child(-n+2) { border-top: 0; }
.svh-fila-tag { font-size: .66rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.svh-fila-nombre { display: inline-flex; align-items: center; gap: .45rem; font-size: .98rem; font-weight: 600; line-height: 1.25; }
.svh-fila-nombre svg { flex: none; width: 13px; height: 13px; opacity: .6; transition: transform .35s var(--ease), opacity .3s; }
.svh-fila-item:hover { color: #6CCBFF; }
.svh-fila-item:hover svg { opacity: 1; transform: translate(2px, -2px); }
@media (min-width: 1024px) {
	.svh-fila-in { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.svh-fila-item { border-top: 0; padding: 1.5rem 1.2rem 1.6rem; border-left: 1px solid rgba(255, 255, 255, .14); }
	.svh-fila-item:first-child { border-left: 0; padding-left: 0; }
}

/* --2 · Mosaico: los servicios como bloques junto al texto. */
.svh--2 { grid-template-rows: 1fr; }
.svh--2 .svh-in { align-self: center; display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: end; }
.svh--2 .svh-titulo { font-size: clamp(2.2rem, min(4.2vw, 7.4vh), 4.1rem); max-width: min(100%, 11em); }
.svh-mosaico { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.svh-bloque {
	position: relative; display: grid; align-content: space-between; gap: 1.6rem;
	min-height: clamp(120px, 15vh, 160px); padding: 1.1rem 1.2rem;
	border-radius: 18px; border: 1px solid rgba(255, 255, 255, .16);
	background: rgba(8, 12, 20, .55); color: #fff;
	transition: background-color .35s, border-color .35s, transform .4s var(--ease);
}
.svh-bloque-nombre { font-size: 1.05rem; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; padding-right: 1.4rem; }
.svh-bloque svg { position: absolute; top: 1.1rem; right: 1.1rem; width: 14px; height: 14px; opacity: .6; transition: transform .35s var(--ease), opacity .3s; }
.svh-bloque:hover { background: #2453E6; border-color: #2453E6; transform: translateY(-3px); }
.svh-bloque:hover .svh-fila-tag { color: rgba(255, 255, 255, .85); }
.svh-bloque:hover svg { opacity: 1; transform: translate(2px, -2px); }
@media (min-width: 1024px) {
	.svh--2 .svh-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
	.svh-mosaico { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --3 · Tarjeta blanca flotante sobre la foto. */
.svh--3 { grid-template-rows: 1fr; }
.svh--3 .svh-in { display: grid; gap: 1.4rem; align-items: end; }
.svh-tarjeta {
	max-width: 680px; padding: clamp(1.6rem, 4vh, 2.8rem) clamp(1.6rem, 3.4vw, 2.8rem);
	border-radius: clamp(20px, 2.4vw, 28px);
	background: #fff; color: #1B146A;
	box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .55);
}
.svh-tarjeta .eyebrow { color: #1B146A; }
.svh-tarjeta .eyebrow::before { background: #2453E6; }
.svh-tarjeta .svh-titulo { margin-top: .8rem; font-size: clamp(2rem, min(3.4vw, 6.2vh), 3.2rem); color: #1B146A; }
.svh-tarjeta .svh-sub { margin-top: 1rem; }
.svh-tarjeta .svh-botones { margin-top: 1.4rem; }
.svh-tarjeta .svh-sub { color: #2E3440; }
.svh-tarjeta .btn-ghost { border-color: rgba(27, 20, 106, .3); color: #1B146A; }
.svh-tarjeta .btn-ghost:hover { border-color: #2453E6; color: #2453E6; background: rgba(36, 83, 230, .06); }
.svh-tarjeta a:focus-visible { outline-color: #2453E6; }
.svh-pie {
	display: inline-flex; align-items: center; gap: .7rem;
	font-size: .84rem; font-weight: 600; color: rgba(255, 255, 255, .9);
}
.svh-pie span { width: 18px; height: 2px; border-radius: 2px; background: #6CCBFF; }
@media (min-width: 1024px) {
	.svh--3 .svh-in { grid-template-columns: minmax(0, 1fr) auto; }
	.svh-pie { justify-self: end; }
}

/* Colores del texto sacados de la propia foto:
   --4 niebla (blanco nube + azul de los cascos sobre velo azul noche),
   --5 alta visibilidad (amarillo de la cuerda y el bolso de rescate),
   --6 duotono (la foto virada al azul de marca). */

/* --4 · Niebla de montaña: velo azul noche, texto centrado. */
.svh--4 { grid-template-rows: 1fr; text-align: center; }
/* Velo más ligero: la foto se ve más. La sombra concentrada detrás
   del texto (radial) es la que sostiene la lectura del titular. */
.svh--4::before {
	background:
		radial-gradient(60% 52% at 50% 52%, rgba(6, 16, 32, .38), transparent 80%),
		linear-gradient(180deg, rgba(6, 16, 32, .34) 0%, rgba(8, 22, 44, .26) 50%, rgba(5, 12, 26, .55) 100%);
}
.svh--4 .svh-in { align-self: center; }
.svh--4 .svh-txt { display: grid; justify-items: center; }
.svh--4 .eyebrow { color: #B9CDE0; }
.svh--4 .eyebrow::before { background: #5FB0FF; }
.svh--4 .svh-titulo { color: #fff; max-width: min(100%, 13em); font-size: clamp(2.4rem, min(5.4vw, 8.6vh), 5.2rem); }
.svh--4 .svh-sub { color: #E8EEF5; max-width: 58ch; }
.svh--4 .svh-botones { justify-content: center; }

/* --5 · Alta visibilidad: el amarillo del equipo de rescate. */
.svh--5 { --svh-amarillo: #FFC93C; }
.svh--5::before {
	background:
		linear-gradient(90deg, rgba(10, 10, 8, .62) 0%, rgba(10, 10, 8, .25) 65%, transparent 100%),
		linear-gradient(0deg, rgba(10, 10, 8, .6) 0%, transparent 50%),
		rgba(10, 10, 8, .38);
}
.svh--5 .eyebrow { color: #F1EBDD; }
.svh--5 .eyebrow::before { background: var(--svh-amarillo); }
.svh--5 .svh-titulo { color: #fff; }
.svh--5 .svh-sub { color: #F3EFE7; }
.svh--5 .btn-primary { background: var(--svh-amarillo); border-color: var(--svh-amarillo); color: #14120C; box-shadow: none; }
.svh--5 .btn-primary:hover { background: #FFD966; border-color: #FFD966; color: #14120C; box-shadow: 0 24px 44px -24px rgba(0, 0, 0, .7); }
.svh--5 .svh-fila { background: rgba(10, 10, 8, .45); border-top-color: rgba(255, 201, 60, .35); }
.svh--5 .svh-fila-tag { color: rgba(255, 220, 130, .85); }
.svh--5 .svh-fila-item:hover { color: var(--svh-amarillo); }
.svh--5 a:focus-visible { outline-color: var(--svh-amarillo); }

/* --6 · Duotono azul: la foto en grises teñida con el azul de marca. */
.svh--6 { grid-template-rows: 1fr; background: #06122B; }
.svh--6 .svh-foto img { filter: grayscale(1) contrast(1.12) brightness(.95); }
.svh--6 .svh-foto::after {
	content: ""; position: absolute; inset: 0;
	background: #1B3FCC; mix-blend-mode: color;
}
.svh--6::before {
	background:
		linear-gradient(0deg, rgba(4, 10, 30, .82) 0%, rgba(4, 10, 30, .3) 55%, rgba(4, 10, 30, .45) 100%),
		rgba(0, 0, 0, .3);
}
.svh--6 .eyebrow { color: #C4D3FF; }
.svh--6 .eyebrow::before { background: #8FD3FF; }
.svh--6 .svh-titulo { color: #fff; max-width: min(100%, 15em); font-size: clamp(2.5rem, min(6vw, 9.6vh), 6rem); line-height: 1; }
.svh6-pie { margin-top: clamp(1.4rem, 3.4vh, 2.2rem); padding-top: clamp(1.2rem, 3vh, 1.8rem); border-top: 1px solid rgba(196, 211, 255, .25); display: grid; gap: 1.2rem; align-items: center; }
.svh--6 .svh-sub { margin-top: 0; color: #E8EDFB; }
.svh--6 .svh-botones { margin-top: 0; }
@media (min-width: 1024px) {
	.svh6-pie { grid-template-columns: minmax(0, 1fr) auto; gap: 3rem; }
}

/* Ficha sin foto de detalle (la misma ya abre la cabecera): el texto
   largo ocupa una sola columna de lectura. */
.detalle-in--solo { display: block; }
.detalle-in--solo .detalle-body { max-width: 760px; }

/* =============================================================
   33c. FICHA DE SERVICIO — cabecera a pantalla completa y desarrollo
   con listas en tarjetas. La cabecera reutiliza .svh (/servicios/);
   la franja del pie lleva lo que incluye el servicio en vez de enlaces.
   El cuerpo largo sale tal cual de contenido/ (p, h2, ul, ol), así que
   todo el tratamiento cuelga de esas etiquetas.
   ============================================================= */
.page-ficha.page-inner:has(.svh) { padding-top: 0; }

.svh-miga {
	display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
	font-size: .84rem; font-weight: 500; color: rgba(255, 255, 255, .78);
}
.svh-miga a { color: #fff; display: inline-flex; align-items: center; min-height: 32px; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .4); text-underline-offset: 4px; }
.svh-miga a:hover { text-decoration-color: #fff; }
.svh-miga span:last-child { color: #fff; }

/* Ficha: la foto centrada y un velo más ligero que en /servicios/,
   con el oscurecimiento concentrado abajo, donde va el texto. */
.svh--ficha { grid-template-rows: 1fr; }
.svh--ficha .svh-foto img { object-position: 50% 50%; }
/* 'cabecera_espejo' en contenido/servicios.php: foto volteada para
   que las personas no queden debajo del texto. */
.svh--ficha .svh-foto img.is-espejo { transform: scaleX(-1); }
.svh--ficha::before {
	background:
		linear-gradient(180deg, rgba(0, 0, 0, .28) 0%, transparent 20%),
		linear-gradient(0deg, rgba(0, 0, 0, .45) 0%, transparent 55%),
		rgba(0, 0, 0, .3);
}
.svh--ficha .svh-titulo { max-width: min(100%, 14em); }

/* Desarrollo sobre gris niebla: las tarjetas blancas se despegan. */
.page-ficha .fsv-detalle { background: var(--bg-secondary); padding: clamp(3.5rem, 8vw, 6rem) 0; }
.fsv-detalle .detalle-in--solo .detalle-body { max-width: none; }
.fsv-detalle .texto > p { max-width: 70ch; }
.fsv-detalle .texto > p:first-child {
	font-size: clamp(1.15rem, 1.6vw, 1.35rem); font-weight: 500; line-height: 1.6;
	color: #1B146A; max-width: 62ch; margin-bottom: 1.4rem;
}
.fsv-detalle .texto h2 { margin-top: clamp(2.8rem, 6vw, 4rem); font-size: clamp(1.7rem, 3.2vw, 2.5rem); color: #1B146A; }
.fsv-detalle .texto h2::before { background: #2453E6; width: 44px; height: 3px; }

/* Listas en rejilla de tarjetas: viñeta = check en círculo azul. */
.fsv-detalle .texto ul, .fsv-detalle .texto ol {
	margin: 1.4rem 0 0; padding: 0;
	display: grid; gap: .8rem; grid-template-columns: minmax(0, 1fr);
}
.fsv-detalle .texto ul li, .fsv-detalle .texto ol li {
	list-style: none; position: relative; margin: 0;
	padding: 1.1rem 1.2rem 1.15rem 3.6rem;
	background: #fff; border: 1px solid var(--border-soft); border-radius: 16px;
	font-size: var(--fs-parrafo-sm); line-height: 1.55; color: var(--text-body);
	transition: border-color .3s, box-shadow .35s var(--ease), transform .35s var(--ease);
}
.fsv-detalle .texto li:hover { border-color: rgba(36, 83, 230, .35); box-shadow: var(--shadow-card); transform: translateY(-2px); }
.fsv-detalle .texto ul li::before {
	content: ""; position: absolute; left: 1.1rem; top: 1.05rem;
	width: 28px; height: 28px; border-radius: 999px;
	background: #E8EEFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%232453E6' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat;
}
/* Pasos numerados: el número en círculo azul lleno. */
.fsv-detalle .texto ol { counter-reset: fsv-paso; }
.fsv-detalle .texto ol li { counter-increment: fsv-paso; }
.fsv-detalle .texto ol li::before {
	content: counter(fsv-paso); position: absolute; left: 1.1rem; top: 1.05rem;
	width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center;
	background: #2453E6; color: #fff; font-size: .8rem; font-weight: 700;
}
/* El primer <strong> de cada ítem es su rótulo: cifra, norma o fase. */
.fsv-detalle .texto li > strong:first-child {
	display: block; margin-bottom: .2rem;
	color: #1B146A; font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em;
}
.fsv-detalle .enfoque-foot { margin-top: clamp(2.4rem, 5vw, 3.2rem); }

@media (min-width: 700px) {
	.fsv-detalle .detalle-in--solo .texto ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fsv-detalle .detalle-in--solo .texto ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.fsv-detalle .detalle-in--solo .texto ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Digitalización: el teléfono acompaña el desarrollo, fijo al bajar. */
.fsv-fono { justify-content: center; }
/* Teléfono y, debajo, el botón del brochure: columna centrada. */
.fsv-fono:has(.fsv-brochure) { flex-direction: column; align-items: center; gap: 1.6rem; }
.fsv-brochure { background: #fff; }
.fsv-brochure svg { transition: transform .4s var(--ease); }
.fsv-brochure:hover svg { transform: translateY(2px); }
.fsv-brochure-meta {
	padding-left: .55rem; margin-left: .1rem;
	border-left: 1px solid var(--border);
	font-size: .78rem; font-weight: 500; color: var(--text-secondary);
}
@media (min-width: 860px) {
	.fsv-fono { position: sticky; top: calc(var(--nav-h) + 2rem); }
}


/* =============================================================
   34. CABECERA DE TESTIMONIOS (.thero)
   Banner de color de la paleta del logo (#1B146A marino, #041DB4
   eléctrico, #2453E6 azul real) con dos luces que derivan despacio
   y una comilla gigante de fondo. A la derecha, las fotos de las
   personas que firman los testimonios giran en una órbita lenta
   (cada cara se contrarrota para quedar siempre derecha). La cita
   de la izquierda rota con app.js → initThero.
   ============================================================= */
/* El banner arranca en lo alto, por detrás del menú transparente. */
.page-testimonios.page-inner { padding-top: 0; }
/* Sobre el azul, el logo a color se pierde: en blanco mientras el
   menú está encima del banner; al bajar (is-stuck) vuelve a color. */
.page-testimonios .nav:not(.is-stuck) .nav-logo { filter: brightness(0) invert(1); }
.page-testimonios .nav:not(.is-stuck) .nav-brand-tag { color: rgba(255, 255, 255, .75); }
/* Aire entre el banner y la rejilla de tarjetas (antes iban pegados). */
.page-testimonios .testi { padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(4rem, 9vw, 6.5rem); }
.thero {
	position: relative; overflow: hidden; isolation: isolate;
	min-height: clamp(560px, 86vh, 780px);
	display: grid; align-items: center;
	padding-block: calc(var(--nav-h) + clamp(2.5rem, 6vw, 4rem)) clamp(3rem, 7vw, 5rem);
	color: #fff;
	background: linear-gradient(128deg, #1B146A 0%, #041DB4 52%, #2453E6 100%);
}
.thero-fondo { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.thero-fondo::after {
	/* Retícula de puntos muy tenue, solo hacia la derecha. */
	content: ""; position: absolute; inset: 0;
	background-image: radial-gradient(rgba(255, 255, 255, .22) 1px, transparent 1.4px);
	background-size: 24px 24px;
	-webkit-mask-image: radial-gradient(ellipse 60% 80% at 85% 50%, #000, transparent 70%);
	mask-image: radial-gradient(ellipse 60% 80% at 85% 50%, #000, transparent 70%);
}
.thero-luz {
	position: absolute; border-radius: 50%;
	width: 62vmax; height: 62vmax;
	will-change: transform;
}
.thero-luz--a {
	left: -18vmax; top: -24vmax;
	background: radial-gradient(closest-side, rgba(108, 203, 255, .45), transparent);
	animation: thero-deriva-a 18s ease-in-out infinite alternate;
}
.thero-luz--b {
	right: -22vmax; bottom: -30vmax;
	background: radial-gradient(closest-side, rgba(0, 44, 230, .7), transparent);
	animation: thero-deriva-b 22s ease-in-out infinite alternate;
}
@keyframes thero-deriva-a { to { transform: translate(14vmax, 10vmax) scale(1.15); } }
@keyframes thero-deriva-b { to { transform: translate(-12vmax, -8vmax) scale(.9); } }

.thero-comilla {
	position: absolute; left: 38%; top: 50%;
	font-family: var(--serif); font-size: clamp(22rem, 46vw, 40rem); line-height: 1;
	color: rgba(255, 255, 255, .06);
	transform: translate(-50%, -38%);
	animation: thero-flota 9s ease-in-out infinite alternate;
}
@keyframes thero-flota { to { transform: translate(-50%, -44%) rotate(-3deg); } }

.thero-in { display: grid; gap: clamp(2.5rem, 6vw, 4rem); align-items: center; }

.thero .eyebrow { color: rgba(255, 255, 255, .82); }
.thero .eyebrow::before { background: var(--accent-light); }
.thero-titulo {
	margin-top: 1.1rem;
	font-family: var(--serif); font-weight: 400;
	font-size: clamp(3rem, 8vw, 6rem); line-height: 1; letter-spacing: -.015em;
}
.thero-sub {
	margin-top: 1.2rem; max-width: 38ch;
	font-size: var(--fs-parrafo); line-height: var(--lh-parrafo); font-weight: 500;
	color: rgba(255, 255, 255, .86);
}

/* Cita rotatoria: todas apiladas en la misma celda; la activa entra
   desde abajo y la saliente se va hacia arriba. */
.thero-citas {
	display: grid; margin-top: clamp(2rem, 4vw, 2.8rem); max-width: 34rem;
	padding: 1.3rem 1.5rem 1.35rem;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .22); border-radius: 20px;
	backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.thero-cita {
	grid-area: 1 / 1;
	opacity: 0; transform: translateY(14px);
	transition: opacity .6s var(--ease), transform .7s var(--ease);
}
.thero-cita.is-activa { opacity: 1; transform: none; }
.thero-cita.is-saliendo { opacity: 0; transform: translateY(-14px); }
.thero-cita blockquote {
	font-family: var(--serif); font-size: clamp(1.35rem, 2.4vw, 1.75rem); line-height: 1.2;
	color: #fff;
}
.thero-cita figcaption { margin-top: .6rem; font-size: .86rem; color: rgba(255, 255, 255, .78); }
.thero-cita figcaption strong { color: #fff; font-weight: 600; }

/* --- Órbita de personas --- */
.thero-orbita {
	--r: clamp(118px, 15vw, 190px);
	position: relative; justify-self: center;
	width: calc(var(--r) * 2 + 120px); aspect-ratio: 1;
	display: grid; place-items: center;
}
.thero-anillo {
	position: absolute; border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .22);
}
.thero-anillo--a { inset: 60px; }
.thero-anillo--b {
	inset: calc(60px + var(--r) * .45);
	border-style: dashed; border-color: rgba(255, 255, 255, .16);
	animation: thero-gira 80s linear infinite reverse;
}
.thero-giro { position: absolute; inset: 0; animation: thero-gira 48s linear infinite; }
.thero-persona {
	--a: calc(360deg / var(--n) * var(--i) - 90deg);
	position: absolute; left: 50%; top: 50%;
	width: 0; height: 0;
	transform: rotate(var(--a)) translate(var(--r)) rotate(calc(var(--a) * -1));
}
.thero-cara {
	position: absolute; left: -46px; top: -46px;
	width: 92px; height: 92px;
	animation: thero-gira 48s linear infinite reverse;
}
.thero-cara > img:first-child {
	width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
	border: 3px solid rgba(255, 255, 255, .9);
	box-shadow: 0 18px 36px -16px rgba(5, 8, 40, .7);
}
.thero-logo {
	position: absolute; right: -6px; bottom: -4px;
	width: 38px; height: 38px; border-radius: 50%; object-fit: contain;
	background: #fff; border: 2px solid #fff;
}
@keyframes thero-gira { to { transform: rotate(360deg); } }

.thero-centro {
	position: relative; z-index: 1;
	width: calc(var(--r) * .9); aspect-ratio: 1; border-radius: 50%;
	display: grid; place-content: center; text-align: center;
	background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .25);
	backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
	font-size: clamp(2.6rem, 5vw, 3.6rem); font-weight: 500; letter-spacing: -.04em; line-height: 1;
}
.thero-centro small {
	display: block; margin-top: .4rem;
	font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; line-height: 1.35;
	color: rgba(255, 255, 255, .8);
}

@media (min-width: 960px) {
	.thero-in { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
}
@media (max-width: 559px) {
	.thero-orbita { --r: 112px; }
	.thero-cara { left: -36px; top: -36px; width: 72px; height: 72px; }
	.thero-logo { width: 30px; height: 30px; }
}

@media (prefers-reduced-motion: reduce) {
	.thero-luz, .thero-comilla, .thero-giro, .thero-cara, .thero-anillo--b { animation: none !important; }
	.thero-cita { transition: opacity .3s; transform: none !important; }
}


/* =============================================================
   31. SERVICIOS DE PORTADA — PROPUESTAS TEMPORALES (?servicios=1…4)
   Cuatro estructuras para los tres servicios destacados de Inicio.
   Al elegir una se borra el resto de esta sección y su rama en
   index.php. Todas usan solo los tokens del sistema.
   ============================================================= */

/* --- 1 · Índice editorial ------------------------------------ */
.hidx .sec-head-row .sec-title { max-width: 22ch; }
.hidx-lista { border-top: 1px solid var(--border); }
.hidx-fila { border-bottom: 1px solid var(--border); }
.hidx-link {
	display: grid; gap: 1rem 2rem; align-items: center;
	grid-template-columns: minmax(0, 1fr) auto;
	padding: clamp(1.6rem, 3.4vw, 2.6rem) 0;
}
.hidx-cab { display: grid; gap: .55rem; }
.hidx-tag {
	font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
	color: var(--accent-deep);
}
.hidx-titulo {
	font-family: var(--serif); font-weight: 400;
	font-size: clamp(1.9rem, 4vw, 3.2rem); line-height: 1.04; letter-spacing: -.01em;
	transition: color .4s var(--ease);
}
.hidx-texto {
	grid-column: 1 / -1;
	color: var(--text-body); font-size: var(--fs-parrafo-sm); line-height: var(--lh-parrafo-sm); max-width: 46ch;
}
.hidx-foto {
	grid-column: 1 / -1; grid-row: 1;
	display: block; overflow: hidden; border-radius: var(--radius);
	aspect-ratio: 16 / 9; background: var(--bg-secondary);
}
.hidx-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.hidx-flecha {
	grid-column: 2; grid-row: 2;
	display: grid; place-items: center; width: 52px; height: 52px; border-radius: 999px;
	border: 1px solid var(--border); color: var(--text-main);
	transition: background-color .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease);
}
.hidx-flecha svg { width: 16px; height: 16px; transition: transform .45s var(--ease); }
.hidx-link:hover .hidx-titulo, .hidx-link:focus-visible .hidx-titulo { color: var(--accent-deep); }
.hidx-link:hover .hidx-flecha, .hidx-link:focus-visible .hidx-flecha { background: #2453E6; border-color: #2453E6; color: #fff; }
.hidx-link:hover .hidx-flecha svg { transform: translate(2px, -2px); }
.hidx-link:hover .hidx-foto img { transform: scale(1.05); }

@media (min-width: 900px) {
	.hidx-link { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) auto auto; gap: 2.5rem; }
	.hidx-texto { grid-column: 2; }
	.hidx-foto {
		grid-column: 3; grid-row: 1;
		width: 132px; aspect-ratio: 4 / 3;
		transition: width .7s var(--ease);
	}
	.hidx-flecha { grid-column: 4; grid-row: 1; }
	.hidx-link:hover .hidx-foto, .hidx-link:focus-visible .hidx-foto { width: 220px; }
}

/* --- 2 · Paneles que se abren -------------------------------- */
.hpan-fila { display: grid; gap: 1rem; }
.hpan-panel {
	position: relative; overflow: hidden; isolation: isolate;
	display: flex; align-items: flex-end;
	min-height: 360px; border-radius: 20px; background: var(--accent-navy);
	color: #fff;
	container-type: inline-size;
}
.hpan-panel > img {
	position: absolute; inset: 0; z-index: -2;
	width: 100%; height: 100%; object-fit: cover;
	transition: transform 1.2s var(--ease);
}
.hpan-velo {
	position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(180deg, rgba(10, 47, 85, 0) 18%, rgba(10, 47, 85, .62) 48%, rgba(6, 20, 38, .94) 100%);
}
@media (max-width: 859px) { .hpan-panel { min-height: 440px; } }
@media (min-width: 860px) {
	.hpan-velo { background: linear-gradient(180deg, rgba(10, 47, 85, 0) 30%, rgba(10, 47, 85, .55) 62%, rgba(6, 20, 38, .9) 100%); }
}
.hpan-txt { padding: clamp(1.4rem, 2.6vw, 2.2rem); width: 100%; }
.hpan-tag {
	font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
	color: var(--accent-light);
}
.hpan-titulo {
	margin-top: .5rem;
	font-family: var(--serif); font-weight: 400;
	/* Crece con el ancho del propio panel: cerrado no se corta, abierto llega a 2.4rem. */
	font-size: clamp(1.35rem, 8.5cqi, 2.4rem); line-height: 1.06; letter-spacing: -.01em;
	color: #fff;
}
.hpan-mas { display: grid; margin-top: .9rem; }
.hpan-mas-in { display: grid; gap: 1rem; justify-items: start; }
.hpan-texto { color: var(--text-on-dark-body); font-size: var(--fs-parrafo-sm); line-height: var(--lh-parrafo-sm); max-width: 40ch; }
.hpan-enlace { display: inline-flex; align-items: center; gap: .5rem; font-size: .92rem; font-weight: 600; color: #fff; }
.hpan-enlace svg { width: 15px; height: 15px; transition: transform .4s var(--ease); }
.hpan-panel:hover .hpan-enlace svg { transform: translate(3px, -3px); }
.hpan-panel:hover > img { transform: scale(1.04); }

@media (min-width: 860px) {
	.hpan-fila { display: flex; gap: 1rem; height: clamp(440px, 62vh, 580px); }
	.hpan-panel { flex: 1 1 0; min-width: 0; min-height: 0; transition: flex-grow .8s var(--ease); }
	/* Abierto: el primero por defecto; el señalado cuando hay puntero o foco. */
	.hpan-panel:first-child { flex-grow: 2.6; }
	.hpan-fila:has(.hpan-panel:is(:hover, :focus-visible)) .hpan-panel { flex-grow: 1; }
	.hpan-fila:has(.hpan-panel:is(:hover, :focus-visible)) .hpan-panel:is(:hover, :focus-visible) { flex-grow: 2.6; }

	.hpan-mas {
		grid-template-rows: 0fr; opacity: 0; margin-top: 0;
		transition: grid-template-rows .7s var(--ease), opacity .5s var(--ease), margin-top .7s var(--ease);
	}
	.hpan-mas-in { min-height: 0; overflow: hidden; }
	.hpan-panel:first-child .hpan-mas { grid-template-rows: 1fr; opacity: 1; margin-top: .9rem; }
	.hpan-fila:has(.hpan-panel:is(:hover, :focus-visible)) .hpan-panel .hpan-mas { grid-template-rows: 0fr; opacity: 0; margin-top: 0; }
	.hpan-fila:has(.hpan-panel:is(:hover, :focus-visible)) .hpan-panel:is(:hover, :focus-visible) .hpan-mas { grid-template-rows: 1fr; opacity: 1; margin-top: .9rem; transition-delay: .15s; }
}

/* --- 3 · Columna fija y fichas ------------------------------- */
.hfix-in { display: grid; gap: clamp(2.5rem, 6vw, 4rem); }
.hfix-lado .sec-title { max-width: 14ch; }
.hfix-todos { margin-top: 2rem; }
.hfix-fichas { border-top: 1px solid var(--border); }
.hfix-ficha { border-bottom: 1px solid var(--border); }
.hfix-link { display: grid; gap: 1.4rem; padding: clamp(1.8rem, 3.6vw, 2.8rem) 0; }
.hfix-foto {
	display: block; overflow: hidden; border-radius: var(--radius);
	aspect-ratio: 16 / 10; background: var(--bg-secondary);
}
.hfix-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.hfix-cuerpo { display: flex; flex-direction: column; }
.hfix-tag {
	font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
	color: var(--accent-deep);
}
.hfix-titulo {
	margin-top: .55rem;
	font-size: clamp(1.35rem, 2.2vw, 1.7rem); font-weight: 600; line-height: 1.14; letter-spacing: -.02em;
	transition: color .35s var(--ease);
}
.hfix-texto { margin-top: .6rem; color: var(--text-body); font-size: var(--fs-parrafo-sm); line-height: var(--lh-parrafo-sm); max-width: 46ch; }
.hfix-checks { display: grid; gap: .55rem; margin-top: 1.1rem; }
.hfix-check {
	display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: .6rem; align-items: start;
	font-size: .92rem; line-height: 1.45; color: var(--text-main); font-weight: 500;
}
.hfix-check svg {
	width: 20px; height: 20px; padding: 3px; margin-top: 1px;
	border-radius: 999px; background: var(--bg-tint); color: var(--accent-deep);
}
.hfix-enlace { margin-top: .9rem; align-self: flex-start; }
.hfix-enlace svg { width: 14px; height: 14px; }
.hfix-link:hover .hfix-titulo { color: var(--accent-deep); }
.hfix-link:hover .hfix-foto img { transform: scale(1.05); }

@media (min-width: 720px) {
	.hfix-link { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 3vw, 2.4rem); align-items: center; }
	.hfix-foto { aspect-ratio: 4 / 3; }
}
@media (min-width: 1080px) {
	.hfix-in { grid-template-columns: minmax(0, .78fr) minmax(0, 1.5fr); align-items: start; gap: clamp(3rem, 6vw, 6rem); }
	.hfix-lado { position: sticky; top: calc(var(--nav-h) + 3rem); }
}

/* --- 4 · Lista y visor --------------------------------------- */
.hvis-in { display: grid; gap: 2rem; }
.hvis-lista { border-top: 1px solid var(--border); }
.hvis-item { border-bottom: 1px solid var(--border); }
.hvis-link { display: grid; gap: .5rem; padding: 1.6rem 0; }
.hvis-foto-movil {
	display: block; overflow: hidden; border-radius: var(--radius);
	aspect-ratio: 16 / 10; margin-bottom: .6rem; background: var(--bg-main);
}
.hvis-foto-movil img { width: 100%; height: 100%; object-fit: cover; }
.hvis-tag {
	font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
	color: var(--accent-deep);
}
.hvis-titulo {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	font-family: var(--serif); font-weight: 400;
	font-size: clamp(1.8rem, 3.6vw, 2.9rem); line-height: 1.05; letter-spacing: -.01em;
	color: var(--text-main); transition: color .4s var(--ease);
}
.hvis-titulo svg {
	flex: none; width: 18px; height: 18px; color: var(--accent-deep);
	transition: transform .45s var(--ease);
}
.hvis-mas { display: grid; }
.hvis-texto { color: var(--text-body); font-size: var(--fs-parrafo-sm); line-height: var(--lh-parrafo-sm); max-width: 44ch; }
.hvis-visor { display: none; }
.hvis-pie { margin-top: clamp(2.2rem, 5vw, 3rem); }

@media (min-width: 960px) {
	.hvis-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(3rem, 6vw, 5.5rem); align-items: center; }
	.hvis-foto-movil { display: none; }

	/* Estado "atenuado" para los no señalados; el primero manda por defecto. */
	.hvis-titulo { color: var(--text-dim); }
	.hvis-item[data-i="0"] .hvis-titulo { color: var(--text-main); }
	.hvis-lista:has(.hvis-item:is(:hover, :focus-within)) .hvis-item .hvis-titulo { color: var(--text-dim); }
	.hvis-lista:has(.hvis-item:is(:hover, :focus-within)) .hvis-item:is(:hover, :focus-within) .hvis-titulo { color: var(--text-main); }
	.hvis-item:is(:hover, :focus-within) .hvis-titulo svg { transform: translate(3px, -3px); }

	.hvis-mas { grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .6s var(--ease), opacity .45s var(--ease); }
	.hvis-texto { min-height: 0; overflow: hidden; }
	.hvis-item[data-i="0"] .hvis-mas { grid-template-rows: 1fr; opacity: 1; }
	.hvis-lista:has(.hvis-item:is(:hover, :focus-within)) .hvis-item .hvis-mas { grid-template-rows: 0fr; opacity: 0; }
	.hvis-lista:has(.hvis-item:is(:hover, :focus-within)) .hvis-item:is(:hover, :focus-within) .hvis-mas { grid-template-rows: 1fr; opacity: 1; }

	.hvis-visor {
		display: block; position: relative; overflow: hidden;
		aspect-ratio: 1 / 1; max-height: 560px; width: 100%;
		border-radius: 20px; background: var(--bg-main);
	}
	.hvis-visor img {
		position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
		opacity: 0; transform: scale(1.06);
		transition: opacity .7s var(--ease), transform 1.2s var(--ease);
	}
	.hvis-visor img[data-i="0"] { opacity: 1; transform: none; }
	.hvis-in:has(.hvis-item:is(:hover, :focus-within)) .hvis-visor img { opacity: 0; transform: scale(1.06); }
	.hvis-in:has(.hvis-item[data-i="0"]:is(:hover, :focus-within)) .hvis-visor img[data-i="0"],
	.hvis-in:has(.hvis-item[data-i="1"]:is(:hover, :focus-within)) .hvis-visor img[data-i="1"],
	.hvis-in:has(.hvis-item[data-i="2"]:is(:hover, :focus-within)) .hvis-visor img[data-i="2"] { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.hidx-foto, .hidx-foto img, .hpan-panel, .hpan-panel > img, .hpan-mas,
	.hfix-foto img, .hvis-mas, .hvis-visor img { transition: none !important; }
}


/* =============================================================
   32. PORTADA CORRIDA (body.home-tm)
   Portada con el texto a la izquierda. Después, un solo lienzo
   blanco, con fondo gris azulado solo en algunas secciones. Los tres servicios
   van como destacado + índice (foto enmarcada y texto sobre blanco).
   La llamada final se funde con la foto del pie.
   Todo cuelga de .home-tm: sin esa clase vuelve lo anterior.
   ============================================================= */

/* --- Portada: texto a la izquierda -----------------------------
   El texto se alinea con el logo del menú (mismo ancho máximo que
   .nav-in) y deja libre la mitad derecha, donde está la persona con
   la chaqueta de LOGAN. */
.home-tm .hero {
	justify-content: flex-end; align-items: stretch; text-align: left;
	padding-top: calc(var(--nav-h) + 2.5rem); padding-bottom: 0;
}
.home-tm .hero-veil {
	background:
		linear-gradient(90deg, rgba(5, 7, 10, .66) 0%, rgba(5, 7, 10, .42) 38%, rgba(5, 7, 10, .08) 72%, rgba(5, 7, 10, 0) 100%),
		linear-gradient(0deg, rgba(5, 7, 10, .45) 0%, rgba(5, 7, 10, 0) 30%);
}
.home-tm .hero-in {
	width: 100%; max-width: 1480px;
	margin: auto auto clamp(3.5rem, 12vh, 7rem);
	padding-inline: 25px var(--gut);
}
.home-tm .hero-h1 { max-width: 760px; }
.home-tm .hero-h1::after {
	content: ""; display: block; width: 56px; height: 3px; border-radius: 2px;
	margin: 1.5rem 0 0; background: var(--accent);
}
@media (min-width: 720px) { .home-tm .hero-title { font-size: clamp(2.4rem, 5vw, 4.4rem); } }
.home-tm .hero-sub { margin-inline: 0; margin-top: 1.3rem; }
.home-tm .hero-cta { justify-content: flex-start; }
@media (max-width: 719px) {
	.home-tm .hero-in { margin-bottom: 3rem; padding-inline: var(--gut); }
}

/* --- Portada: fondo de planta + trabajador recortado ----------------
   El fondo (img-fondo-header) se acerca despacio al cargar; el
   trabajador (recorte con transparencia) entra desde abajo a la
   derecha, de desenfocado a nítido, y se queda delante del velo para
   no oscurecerse. Un solo momento de entrada: fondo → trabajador →
   textos (los textos ya llevan su propio retraso, desde 900 ms). */
/* Las fotos van dentro de <picture> (una por tamaño de pantalla): el
   envoltorio no debe romper el alto al 100% de las imágenes. */
.home-tm .hero-bg picture { display: block; height: 100%; }
.home-tm .hero-trabajador picture { display: contents; }
.home-tm .hero-bg img {
	object-position: 38% 50%;
	animation: hero-fondo-entra 2.4s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes hero-fondo-entra {
	from { transform: scale(1.08); }
	to   { transform: none; }
}

.home-tm .hero-trabajador {
	/* Pegado al borde derecho: la foto viene recortada justo en el
	   hombro/brazo y ese corte debe coincidir con el borde de la
	   pantalla, no quedar a la vista en medio de la portada. */
	position: absolute; z-index: 1; bottom: 0; right: 0;
	height: min(calc(100% - var(--nav-h) - 1rem), 69vw);
	pointer-events: none;
	/* Sombra suave hacia la izquierda: separa el recorte del cielo
	   claro sin dibujarle un borde. */
	filter: drop-shadow(-24px 10px 40px rgba(5, 12, 24, .35));
}
.home-tm .hero-trabajador img {
	display: block; height: 100%; width: auto; max-width: none;
	transform-origin: 60% 100%;
	animation: hero-trabajador-entra 1.5s cubic-bezier(.16, 1, .3, 1) .35s both;
}
/* app.js pausa la entrada mientras la foto no ha cargado, para que
   no ocurra con la imagen todavía vacía. */
.home-tm .hero-trabajador.is-esperando img { animation-play-state: paused; }
@keyframes hero-trabajador-entra {
	from { opacity: 0; transform: translate(7%, 12%) scale(1.05); filter: blur(10px); }
	55%  { opacity: 1; filter: blur(0); }
	to   { opacity: 1; transform: none; filter: blur(0); }
}

/* Los textos no deben pasar por encima del trabajador. Un 52vw fijo no
   bastaba: el recorte se dimensiona por ALTO (ver .hero-trabajador), así
   que en pantallas altas para su ancho —tablets en horizontal, 1024 a
   1366px— el trabajador ocupaba más de la mitad y el título, el párrafo
   y el botón claro se le montaban encima. Aquí el ancho del texto sale
   del ancho real del recorte (alto × 2/3, la proporción de la foto),
   menos el margen izquierdo y un respiro de 2.5rem. */
@media (min-width: 1024px) {
	.home-tm .hero {
		--trab-ancho: calc(min(100svh - var(--nav-h) - 1rem, 69vw) * .667);
		--texto-ancho: calc(100vw - var(--trab-ancho) - 25px - 2.5rem);
	}
	.home-tm .hero-h1,
	.home-tm .hero-sub,
	.home-tm .hero-desc,
	.home-tm .hero-cta { max-width: min(760px, 52vw, var(--texto-ancho)); }
}

/* Móvil y tablet (hasta 1023px, el mismo corte que el menú
   hamburguesa): la foto a pantalla completa y el texto encima, abajo,
   como en escritorio. La foto es img-hero-header (el <picture> la
   cambia), que ya trae al trabajador integrado, así que el recorte se
   oculta. En vez del velo lateral de escritorio, uno de abajo hacia
   arriba: casi opaco donde va el texto, se disuelve antes de llegar a
   la cara del trabajador; y uno corto arriba para la navegación. */
@media (max-width: 1023px) {
	.home-tm .hero {
		min-height: 100vh; min-height: 100svh;
		padding: calc(var(--nav-h) + 1.5rem) 0 0;
		background: var(--accent-navy);
	}
	.home-tm .hero::before,
	.home-tm .hero-trabajador { display: none; }
	/* La foto ocupa solo la parte de arriba de la portada: así la cara
	   del trabajador queda por encima del titular en vez de detrás. Lo
	   que queda debajo es el marino de base bajo el velo, del mismo tono
	   que el velo sobre la foto: no se ve el corte. */
	.home-tm .hero-bg {
		inset: 0 0 auto; height: 74%;
		-webkit-mask-image: linear-gradient(180deg, #000 72%, transparent);
		mask-image: linear-gradient(180deg, #000 72%, transparent);
	}
	.home-tm .hero-bg img { object-position: 74% 30%; }
	.home-tm .hero-veil {
		background:
			linear-gradient(0deg, rgba(5, 12, 24, .92) 0%, rgba(5, 12, 24, .82) 34%, rgba(5, 12, 24, .38) 58%, rgba(5, 12, 24, 0) 76%),
			linear-gradient(180deg, rgba(5, 12, 24, .5) 0, rgba(5, 12, 24, 0) calc(var(--nav-h) + 3rem));
	}
	.home-tm .hero-in { margin: 0; padding: 0 var(--gut) clamp(2.25rem, 7svh, 3.5rem); }
}
/* Teléfono en horizontal: la portada es más ancha que alta, el texto
   llega hasta arriba (sobre el cielo claro) y el velo de abajo no lo
   alcanza. Vuelve el velo lateral de escritorio, la foto ocupa todo el
   alto y el texto se queda en la mitad izquierda, lejos del trabajador. */
@media (max-width: 1023px) and (orientation: landscape) and (max-height: 560px) {
	.home-tm .hero-bg { height: 100%; -webkit-mask-image: none; mask-image: none; }
	.home-tm .hero-bg img { object-position: 70% 30%; }
	.home-tm .hero-veil {
		background:
			linear-gradient(90deg, rgba(5, 12, 24, .88) 0%, rgba(5, 12, 24, .7) 45%, rgba(5, 12, 24, .1) 75%, rgba(5, 12, 24, 0) 100%),
			linear-gradient(180deg, rgba(5, 12, 24, .5) 0, rgba(5, 12, 24, 0) calc(var(--nav-h) + 3rem));
	}
	.home-tm .hero-h1,
	.home-tm .hero-sub,
	.home-tm .hero-desc,
	.home-tm .hero-cta { max-width: 56vw; }
}

@media (prefers-reduced-motion: reduce) {
	.home-tm .hero-bg img { animation: none; }
	.home-tm .hero-trabajador img { animation: hero-trabajador-aparece .6s ease .2s both; }
}
@keyframes hero-trabajador-aparece { from { opacity: 0; } to { opacity: 1; } }

/* --- Lienzo corrido ------------------------------------------- */
/* overflow-x: clip (no hidden) para que las entradas laterales no
   ensanchen la página en móvil sin romper los position: sticky. */
.home-tm .hcorrido { position: relative; background: var(--bg-main); overflow-x: clip; }
.home-tm .hcorrido > section { z-index: 1; }
/* Las secciones dejan de pintar su propio fondo: el lienzo es uno. */
.home-tm .hcorrido .seccion,
.home-tm .hcorrido .seccion-alt,
.home-tm .hcorrido .digital,
.home-tm .hcorrido .clientes { background: transparent; }
/* Un solo ritmo vertical para toda la portada. */
.home-tm .hcorrido .seccion { padding-block: clamp(4rem, 7.5vw, 7rem); }
/* Todas las secciones de la portada van sobre blanco, de la primera a
   la llamada final (que se funde con la foto del pie). Los capítulos se
   separan por el aire entre ellos, no por cambios de fondo. */
.home-tm .hcorrido > .seccion:first-child { padding-top: clamp(3.5rem, 6vw, 5.5rem); }
/* El botón "Todos los servicios" cierra su sección sin dejar un
   tramo blanco vacío debajo. */
.home-tm #servicios { padding-bottom: clamp(3rem, 5.5vw, 4.75rem); }

/* --- Jerarquía común de titulares ---------------------------------
   Todas las secciones hablan a la misma escala: un único tamaño de
   titular (serif) y el mismo aire entre etiqueta, titular y bajada. */
.home-tm h2.sec-title,
.home-tm .nos-titulo {
	font-size: clamp(2.1rem, 3.7vw, 3.3rem);
	line-height: 1.08; text-wrap: balance;
}
.home-tm .sec-head,
.home-tm .nos-head { margin-bottom: clamp(2.5rem, 4.5vw, 3.75rem); }
.home-tm .sec-head .sec-title,
.home-tm .nos-titulo { margin-top: 1rem; }
.home-tm .sec-head .sec-intro { margin-top: 1.1rem; }
/* "Por qué LOGAN" se centra como Servicios, Nosotros y Reseñas: el
   titular deja de partirse en cuatro líneas contra el borde. */
.home-tm #porque .sec-head { text-align: center; }
.home-tm #porque .sec-title { max-width: 26ch; margin-inline: auto; }
.home-tm #porque .pqb { margin-top: 0; }
/* Clientes es una franja blanca y baja. */
.home-tm .hcorrido #clientes { padding-block: clamp(2.5rem, 4.5vw, 3.5rem); }
.home-tm .dig2-luz { display: none; }

/* --- Servicios: destacado + índice --------------------------------
   Sobre blanco, sin velos ni fotos a sangre: la foto acompaña y el
   texto manda. Encabezado partido (titular a la izquierda, bajada a
   la derecha). Debajo, Auditorías como pieza principal a la izquierda
   (foto 4:3 enmarcada y su texto debajo) y, a la derecha, los otros
   dos servicios como fichas horizontales (miniatura + texto)
   separadas por un filete, con "Todos los servicios" al pie de esa
   columna. Todo visible sin hover; el hover solo acerca la foto,
   azula el título y adelanta la flecha. */
.home-tm #servicios .sec-head {
	display: grid; gap: 1rem 3rem; align-items: end;
	text-align: left;
	margin-bottom: clamp(2.25rem, 4.5vw, 3.5rem);
}
.home-tm #servicios .sec-head .sec-title,
.home-tm #servicios .sec-head .sec-intro { margin-inline: 0; }
.home-tm #servicios .sec-head .sec-intro { max-width: 46ch; }
@media (min-width: 960px) {
	.home-tm #servicios .sec-head { grid-template-columns: var(--hsrv-cols); column-gap: var(--hsrv-col-gap); }
	.home-tm #servicios .sec-head .eyebrow { grid-column: 1; }
	.home-tm #servicios .sec-head .sec-title { grid-column: 1; }
	.home-tm #servicios .sec-head .sec-intro { grid-column: 2; grid-row: 2; justify-self: start; margin-top: 0; }
}

/* Contenedor un poco más ancho que el resto de la portada para que las
   dos columnas respiren. Columnas casi parejas, con la del índice algo
   más ancha: Auditorías encabeza sin dominar. */
.home-tm #servicios {
	--hsrv-cols: minmax(0, .92fr) minmax(0, 1.08fr);
	--hsrv-col-gap: clamp(2.5rem, 4vw, 4rem);
}
.home-tm #servicios > .wrap { max-width: 1400px; }
.home-tm .hsrv-grid {
	display: grid; gap: clamp(2rem, 4vw, 3rem);
	grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 960px) {
	.home-tm .hsrv-grid {
		grid-template-columns: var(--hsrv-cols);
		/* Las dos fichas se apilan arriba con un intervalo fijo; si la
		   pieza principal resulta más alta, el sobrante queda debajo
		   de la segunda ficha y no entre ellas. */
		grid-template-rows: auto 1fr;
		column-gap: var(--hsrv-col-gap); row-gap: 0;
	}
	.home-tm .hsrv-card-lead { grid-column: 1; grid-row: 1 / 3; }
	.home-tm .hsrv-card:not(.hsrv-card-lead) { grid-column: 2; align-self: start; }
	.home-tm .hsrv-card-lead .hsrv-media { aspect-ratio: 3 / 2; }
}

.home-tm .hsrv-card { position: relative; min-width: 0; }
.home-tm .hsrv-card:hover { transform: none; }
.home-tm .hsrv-link-area { display: flex; flex-direction: column; height: auto; color: inherit; }
.home-tm .hsrv-link-area:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 22px; }

/* Fotos: siempre enmarcadas, nunca de fondo. */
.home-tm .hsrv-media {
	position: relative; overflow: hidden; margin: 0;
	aspect-ratio: 4 / 3; border-radius: 20px; border: 0;
	background: var(--bg-tint);
}
/* Gana a las reglas base de las fichas (16:10) y del destacado (flex). */
.home-tm .hsrv-card:not(.hsrv-card-lead) .hsrv-media { aspect-ratio: 4 / 3; }
.home-tm .hsrv-card-lead .hsrv-media { flex: none; }
.home-tm .hsrv-media img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform 1.1s var(--ease);
}
.home-tm .hsrv-card:hover .hsrv-media img { transform: scale(1.04); }

/* Texto sobre blanco. */
.home-tm .hsrv-body { display: flex; flex-direction: column; padding: 1.4rem 0 0; }
.home-tm .hsrv-tag {
	font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
	color: var(--accent-deep);
}
.home-tm .hsrv-titulo {
	margin-top: .55rem;
	font-size: clamp(1.3rem, 1.7vw, 1.5rem); font-weight: 600;
	line-height: 1.2; letter-spacing: -.02em; color: var(--text-main);
	transition: color .3s;
}
.home-tm .hsrv-card:hover .hsrv-titulo { color: var(--accent-deep); }
.home-tm .hsrv-texto {
	margin-top: .6rem; max-width: 46ch;
	color: var(--text-body); font-size: var(--fs-parrafo-sm); line-height: var(--lh-parrafo-sm);
}
.home-tm .hsrv-enlace { margin-top: 1rem; padding: 0; min-height: 0; align-self: flex-start; }
.home-tm .hsrv-enlace svg { width: 14px; height: 14px; transition: transform .35s var(--ease); }
.home-tm .hsrv-card:hover .hsrv-enlace svg { transform: translateX(4px); }

/* Pieza principal: más grande y con más aire. */
.home-tm .hsrv-card-lead .hsrv-media { border-radius: 24px; }
.home-tm .hsrv-card-lead .hsrv-body { padding-top: 1.75rem; }
.home-tm .hsrv-card-lead .hsrv-titulo { font-size: clamp(1.65rem, 2.6vw, 2.15rem); line-height: 1.12; }
.home-tm .hsrv-card-lead .hsrv-texto { font-size: var(--fs-parrafo); line-height: var(--lh-parrafo); max-width: 48ch; }
.home-tm .hsrv-card-lead .hsrv-enlace { margin-top: 1.25rem; }

/* Fichas del índice: foto 4:3 grande (algo más de la mitad de la
   ficha) a la izquierda y el texto a la derecha, centrado en altura
   con la foto. Un filete fino y un intervalo corto las separan. Bajo
   560px la foto vuelve arriba, también en 4:3. */
@media (min-width: 560px) {
	.home-tm .hsrv-card:not(.hsrv-card-lead) .hsrv-link-area {
		display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		gap: clamp(1.1rem, 2vw, 1.6rem); align-items: center;
	}
	.home-tm .hsrv-card:not(.hsrv-card-lead) .hsrv-media { border-radius: 18px; }
	.home-tm .hsrv-card:not(.hsrv-card-lead) .hsrv-body { padding-top: 0; }
	.home-tm .hsrv-card:not(.hsrv-card-lead) .hsrv-texto { max-width: 34ch; }
}
.home-tm .hsrv-card:not(.hsrv-card-lead) + .hsrv-card:not(.hsrv-card-lead) {
	padding-top: clamp(1.25rem, 2.2vw, 1.6rem);
	border-top: 1px solid var(--border-soft);
}
@media (min-width: 960px) {
	.home-tm .hsrv-card:not(.hsrv-card-lead):nth-child(2) { padding-bottom: clamp(1.25rem, 2.2vw, 1.6rem); }
}

/* Sin columnas, la foto principal no debe comerse la pantalla: marco
   apaisado en tableta y móvil. */
@media (max-width: 959px) {
	.home-tm .hsrv-card-lead .hsrv-media { aspect-ratio: 16 / 9; }
}

/* "Todos los servicios" cierra la columna del índice. */
.home-tm #servicios .hsrv-foot { margin-top: clamp(2rem, 4vw, 2.75rem); justify-content: flex-start; }
@media (min-width: 960px) {
	.home-tm #servicios .hsrv-foot {
		display: grid; grid-template-columns: var(--hsrv-cols);
		column-gap: var(--hsrv-col-gap);
	}
	.home-tm #servicios .hsrv-foot .btn { grid-column: 2; justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
	.home-tm .hsrv-media img, .home-tm .hsrv-enlace svg { transition: none; }
	.home-tm .hsrv-card:hover .hsrv-media img { transform: none; }
}

.home-tm { --ease-lado: cubic-bezier(.25, .7, .3, 1); }

/* --- Inicio: etiquetas más grandes y titulares en negro ---------
   Todas las etiquetas de sección de la portada un escalón más
   grandes, iguales entre sí (la de Digitalización deja su marino).
   Titulares, sus segundas líneas y bajadas en el casi-negro del
   sitio, también en Digitalización y en la llamada final. */
.home-tm .eyebrow { font-size: .84rem; gap: .75rem; }
.home-tm .eyebrow::before { width: 28px; }
.home-tm .digital .eyebrow { color: var(--text-secondary); }
.home-tm .digital .eyebrow::before { background: var(--accent); }
.home-tm .sec-title,
.home-tm .sec-title em,
.home-tm .digital .sec-title,
.home-tm .digital .sec-title em,
.home-tm .cta-final h2 { color: var(--text-main); }
.home-tm .sec-intro,
.home-tm .digital .sec-intro,
.home-tm .cta-final p { color: var(--text-main); }
/* --- Entradas laterales al bajar --------------------------------
   Como en una maqueta a dos columnas: lo que vive a la izquierda
   (fotos, títulos de sección) entra desde la izquierda y lo que vive
   a la derecha (textos, carruseles, cifras) desde la derecha. Usa el
   mismo observador de .reveal / .reveal-img de app.js; solo cambia
   de dónde viene cada pieza y cuánto recorre. */
.home-tm .nos-fotos .reveal-img,
.home-tm .dig2-escena.reveal-img,
.home-tm #porque .sec-head .reveal:not([data-split]),
.home-tm .rsn-fotos.reveal {
	opacity: 0; transform: translate3d(-110px, 0, 0);
	transition: opacity 1s var(--ease-lado), transform 1.25s var(--ease-lado);
}
.home-tm .nos-cuerpo.reveal,
.home-tm .dig2-texto .reveal:not([data-split]),
.home-tm .pql.reveal,
.home-tm .cli-cinta.reveal,
.home-tm .rsn-lado.reveal {
	opacity: 0; transform: translate3d(110px, 0, 0);
	transition: opacity 1s var(--ease-lado), transform 1.25s var(--ease-lado);
}
.home-tm .nos-fotos .reveal-img.is-in,
.home-tm .dig2-escena.reveal-img.is-in,
.home-tm #porque .sec-head .reveal:not([data-split]).is-in,
.home-tm .rsn-fotos.reveal.is-in,
.home-tm .nos-cuerpo.reveal.is-in,
.home-tm .dig2-texto .reveal:not([data-split]).is-in,
.home-tm .pql.reveal.is-in,
.home-tm .cli-cinta.reveal.is-in,
.home-tm .rsn-lado.reveal.is-in { opacity: 1; transform: none; }
/* La segunda foto de "Quiénes somos" llega un poco después. */
.home-tm .nos-fotos .nos-foto--b.reveal-img { transition-delay: .15s; }
/* Paneles de servicios: los de los extremos desde su lado, el del
   centro desde abajo. */
.home-tm .hsrv-card.reveal-left  { transform: translate3d(-110px, 0, 0); }
.home-tm .hsrv-card.reveal-right { transform: translate3d(110px, 0, 0); }
.home-tm .hsrv-card.reveal.is-in { transform: none; }
@media (prefers-reduced-motion: reduce) {
	.home-tm .nos-fotos .reveal-img, .home-tm .dig2-escena.reveal-img,
	.home-tm #porque .sec-head .reveal, .home-tm .rsn-fotos.reveal,
	.home-tm .nos-cuerpo.reveal, .home-tm .dig2-texto .reveal, .home-tm .pql.reveal,
	.home-tm .rsn-lado.reveal, .home-tm .cli-cinta.reveal,
	.home-tm .hsrv-card.reveal-left, .home-tm .hsrv-card.reveal-right { transform: none; }
}

/* --- Quiénes somos: fotos más grandes y más a la izquierda ---
   Misma escalera de siempre; solo se abre el ancho de la sección, la
   columna de fotos gana espacio al texto y se corre hacia el borde. */
.home-tm #nosotros > .wrap { max-width: 1480px; }
@media (min-width: 960px) {
	.home-tm .nos-grid { grid-template-columns: minmax(0, 1.22fr) minmax(0, .9fr); }
}
@media (min-width: 1200px) {
	.home-tm .nos-fotos { margin-left: calc(-1 * clamp(1rem, 3vw, 3.5rem)); }
}
/* Más aire entre las dos fotos (en vertical y en horizontal). */
.home-tm .nos-fotos { gap: clamp(1.25rem, 2.6vw, 2.25rem); }

/* --- Por qué LOGAN: mosaico ----------------------------------
   El primer valor ocupa la columna izquierda a toda la altura; a la
   derecha, dos arriba y uno ancho abajo. Título y texto en blanco
   sobre la foto, con un velo oscuro solo en la parte baja. */
.pqb {
	display: grid; gap: clamp(.75rem, 1.4vw, 1.1rem);
	margin-top: clamp(2.5rem, 6vw, 4rem);
}
@media (min-width: 900px) {
	.pqb {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr);
		grid-template-rows: repeat(2, minmax(360px, auto));
	}
	.pqb-item--1 { grid-column: 1; grid-row: 1 / 3; }
	.pqb-item--2 { grid-column: 2; grid-row: 1; }
	.pqb-item--3 { grid-column: 3; grid-row: 1; }
	.pqb-item--4 { grid-column: 2 / 4; grid-row: 2; }
}
.pqb-item {
	position: relative; overflow: hidden; isolation: isolate;
	display: flex; align-items: flex-end;
	min-height: 300px; border-radius: 20px;
	background: var(--accent-navy);
}
.pqb-item--1 { min-height: 420px; }
.pqb-item img {
	position: absolute; inset: 0; z-index: -2;
	width: 100%; height: 100%; object-fit: cover;
	transition: transform 1.2s var(--ease);
}
.pqb-item:hover img { transform: scale(1.05); }
.pqb-velo {
	position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(180deg, rgba(8, 12, 18, 0) 30%, rgba(8, 12, 18, .55) 62%, rgba(8, 12, 18, .88) 100%);
}
/* Las piezas pequeñas llevan el mismo texto en menos alto: el velo
   empieza antes para que el título no caiga sobre zonas claras. */
.pqb-item:not(.pqb-item--1) .pqb-velo {
	background: linear-gradient(180deg, rgba(8, 12, 18, .1) 0%, rgba(8, 12, 18, .6) 38%, rgba(8, 12, 18, .9) 100%);
}
.pqb-txt { padding: clamp(1.3rem, 2.4vw, 2rem); color: #fff; }
.pqb-titulo {
	font-size: clamp(1.2rem, 1.8vw, 1.45rem); font-weight: 600;
	line-height: 1.15; letter-spacing: -.02em; color: #fff;
}
.pqb-item--1 .pqb-titulo { font-size: clamp(1.6rem, 2.8vw, 2.3rem); }
.pqb-texto {
	margin-top: .6rem; max-width: 52ch;
	color: rgba(255, 255, 255, .88);
	font-size: var(--fs-parrafo-sm); line-height: var(--lh-parrafo-sm);
}
.pqb-item--1 .pqb-texto { font-size: var(--fs-parrafo); line-height: var(--lh-parrafo); max-width: 44ch; }
/* Entradas: el grande desde la izquierda, los demás desde la derecha. */
.home-tm .pqb-item.reveal-left  { transform: translate3d(-110px, 0, 0); }
.home-tm .pqb-item.reveal-right { transform: translate3d(110px, 0, 0); }
.home-tm .pqb-item.reveal { transition: opacity 1s var(--ease-lado), transform 1.25s var(--ease-lado); }
.home-tm .pqb-item.reveal.is-in { transform: none; }
.pqb-item--3.reveal { transition-delay: .1s; }
.pqb-item--4.reveal { transition-delay: .2s; }
@media (prefers-reduced-motion: reduce) {
	.pqb-item img { transition: none; }
	.home-tm .pqb-item.reveal-left, .home-tm .pqb-item.reveal-right { transform: none; }
}

/* --- Llamada final: sobre blanco, sin banda de color --- */
.home-tm .cta-final {
	background: var(--bg-main);
	padding: clamp(3.5rem, 7vw, 6rem) 0 0;
}
.home-tm .cta-panel { background: transparent; border-radius: 0; overflow: visible; }
.home-tm .cta-panel-in { padding-block: clamp(2rem, 6vw, 4rem); }

/* Servicios: la misma llamada final abierta que Inicio, para que se
   funda con el pie (la foto arranca en este mismo blanco). */
.page-servicios .cta-final { padding: clamp(4rem, 9vw, 7rem) 0 0; }
.page-servicios .cta-panel { background: transparent; border-radius: 0; overflow: visible; }
.page-servicios .cta-panel-in { padding-block: clamp(2rem, 6vw, 4rem); }
.page-servicios .cta-final h2,
.page-servicios .cta-final p { color: var(--text-main); }


/* =============================================================
   INICIO · COMPOSICIÓN COHESIVA
   Botones con un solo protagonista por tramo, cifras editoriales,
   orden de lectura en móvil y un cierre con más presencia. Todo
   cuelga de .home-tm: el resto de páginas no cambia.
   ============================================================= */

/* --- Jerarquía de botones -----------------------------------------
   Primarios (relleno azul) solo para las acciones de negocio: hero,
   "Ver la plataforma" y la llamada final. Los de navegación interna
   ("Conoce a LOGAN", "Ver todos los testimonios") pasan a contorno,
   con fondo blanco para no perderse sobre el gris y el azul suave. */
.home-tm .nos-cta,
.home-tm .rsn-mas { background: var(--bg-main); }
.home-tm .nos-cta:hover,
.home-tm .rsn-mas:hover { background: var(--bg-tint-soft); }
.home-tm .rsn-mas { margin-top: 1.4rem; }

/* --- Cifras editoriales (Nosotros) --------------------------------
   Una banda blanca sobre el gris de la sección: cuatro cifras en la
   serif de los titulares, cada una con la línea-tick azul encima
   (la misma firma de las etiquetas) y separadas por filetes finos.
   La precisión de una auditoría, sin parecer una tabla. */
.home-tm #nosotros .metricas {
	margin-top: clamp(3rem, 6vw, 4.5rem);
	padding: clamp(1.6rem, 3vw, 2.6rem) clamp(.4rem, 1.5vw, 1.2rem);
	background: var(--bg-main);
	border: 1px solid var(--border-soft);
	border-radius: 24px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
}
.home-tm #nosotros .metrica {
	padding: clamp(.9rem, 2vw, 1.2rem) clamp(1rem, 2.4vw, 2rem);
}
.home-tm #nosotros .metrica::before {
	content: ""; display: block;
	width: 22px; height: 2px; border-radius: 2px;
	background: var(--accent);
	margin-bottom: clamp(.9rem, 1.6vw, 1.2rem);
}
.home-tm #nosotros .metrica-num-wrap { align-items: flex-start; gap: .35rem; }
.home-tm #nosotros .metrica-num {
	font-family: var(--serif); font-weight: 400;
	font-size: clamp(2.5rem, 4.4vw, 3.8rem); line-height: 1;
	letter-spacing: -.01em; color: var(--text-main);
}
.home-tm #nosotros .metrica-check { width: 16px; height: 16px; margin-top: .3rem; }
.home-tm #nosotros .metrica-txt {
	margin-top: .75rem; max-width: 22ch;
	color: var(--text-body); font-size: .95rem; line-height: 1.45;
}
/* Filetes: en 2×2 una vertical al centro y una horizontal entre filas;
   en una fila de cuatro, solo verticales. */
.home-tm #nosotros .metrica:nth-child(even) { border-left: 1px solid var(--border-soft); }
.home-tm #nosotros .metrica:nth-child(n+3) { border-top: 1px solid var(--border-soft); }
@media (min-width: 960px) {
	.home-tm #nosotros .metricas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.home-tm #nosotros .metrica:nth-child(n+3) { border-top: 0; }
	.home-tm #nosotros .metrica + .metrica { border-left: 1px solid var(--border-soft); }
}


/* --- Blog en Inicio: riel de artículos ------------------------------
   Inspirado en "Be in the know" de EcoOnline. Titular en dos tonos
   (la segunda mitad en azul) y, a la derecha, flechas + "Ver todos".
   Debajo, un riel de tarjetas que arranca en el margen del contenido
   y sale por el borde derecho de la pantalla: fotos grandes casi
   cuadradas con una insignia blanca, título y la línea fecha |
   categoría. Sin cajas: la foto hace de tarjeta. */
.home-tm .hblog-head {
	display: flex; flex-wrap: wrap; gap: 1.25rem 2.5rem;
	align-items: flex-end; justify-content: space-between;
	margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}
.home-tm .hblog-titular {
	margin-top: 1rem; max-width: 22ch;
	font-family: var(--serif); font-weight: 400;
	font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1.08; letter-spacing: -.01em;
	color: var(--text-main); text-wrap: balance;
}
.home-tm .hblog-titular em { font-style: normal; color: #2453E6; }
.home-tm .hblog-acciones { display: flex; align-items: center; gap: .75rem; }
.home-tm .hblog-todos { background: var(--bg-main); }
.home-tm .hblog-flechas { display: flex; gap: .5rem; }
.home-tm .hblog-flechas[hidden] { display: none; }
.home-tm .hblog-flecha {
	width: 44px; height: 44px; border-radius: 50%;
	display: grid; place-items: center;
	background: var(--bg-main); color: var(--text-main);
	border: 1px solid var(--border);
	transition: border-color .3s, color .3s, background-color .3s, opacity .3s;
}
.home-tm .hblog-flecha svg { width: 16px; height: 16px; }
.home-tm .hblog-flecha:hover { border-color: var(--accent); color: var(--accent-deep); background: var(--bg-tint-soft); }
.home-tm .hblog-flecha:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.home-tm .hblog-flecha[disabled] { opacity: .35; pointer-events: none; }

/* El riel se sale del contenedor por la derecha hasta el borde de la
   ventana (el lienzo .hcorrido recorta el sobrante horizontal). */
.home-tm .hblog-riel {
	--hblog-ancho: clamp(250px, 24vw, 340px);
	--hblog-gap: clamp(1rem, 1.6vw, 1.5rem);
	display: grid; grid-auto-flow: column; grid-auto-columns: var(--hblog-ancho);
	gap: var(--hblog-gap);
	margin-right: calc((100% - 100vw) / 2);
	padding: .25rem max(var(--gut), calc((100vw - 100%) / 2)) 1rem 0;
	overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
	scrollbar-width: none;
}
.home-tm .hblog-riel::-webkit-scrollbar { display: none; }
.home-tm .hblog-riel:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 12px; }
.home-tm .hblog-card { scroll-snap-align: start; min-width: 0; }

.home-tm .hblog-link { display: flex; flex-direction: column; height: 100%; color: inherit; }
.home-tm .hblog-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 18px; }
.home-tm .hblog-media {
	position: relative; margin: 0; overflow: hidden;
	aspect-ratio: 20 / 19; border-radius: 16px; background: var(--bg-tint);
}
.home-tm .hblog-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.home-tm .hblog-link:hover .hblog-media img { transform: scale(1.04); }
.home-tm .hblog-insignia {
	position: absolute; top: .75rem; left: .75rem;
	padding: .3rem .6rem; border-radius: 6px;
	background: var(--bg-main); color: var(--text-main);
	font-size: .74rem; font-weight: 600; line-height: 1;
}
.home-tm .hblog-titulo {
	margin-top: 1.1rem;
	font-size: clamp(1.1rem, 1.3vw, 1.3rem); font-weight: 500;
	line-height: 1.3; letter-spacing: -.015em; color: var(--text-main);
	transition: color .3s;
}
.home-tm .hblog-link:hover .hblog-titulo { color: var(--accent-deep); }
.home-tm .hblog-meta {
	display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem;
	margin-top: .8rem;
	font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
	color: var(--text-secondary);
}
.home-tm .hblog-sep { color: var(--border); }
.home-tm .hblog-cat { color: var(--accent-deep); }

@media (max-width: 719px) {
	.home-tm .hblog-riel { --hblog-ancho: min(78vw, 300px); }
}
@media (prefers-reduced-motion: reduce) {
	.home-tm .hblog-media img { transition: none; }
	.home-tm .hblog-link:hover .hblog-media img { transform: none; }
}

/* --- Reseñas: mientras carga una foto, el marco ya tiene tono de
   foto (no un recuadro vacío). */
.home-tm .rsn-marco { background: linear-gradient(135deg, #DCE6F1 0%, #C7D5E5 100%); }

/* --- Llamada final con presencia ----------------------------------
   Mismo texto y estructura. Detrás del titular, un halo azul muy
   suave bajo la red interactiva de siempre; se desvanece antes de
   los bordes, así el blanco inferior sigue fundiéndose con el pie. */
.home-tm .cta-final { overflow: hidden; }
.home-tm .cta-panel { isolation: isolate; }
.home-tm .cta-panel::before {
	content: ""; position: absolute; z-index: -1; pointer-events: none;
	left: 50%; top: 50%; width: min(980px, 120vw); height: 120%;
	transform: translate(-50%, -50%);
	background: radial-gradient(50% 50% at 50% 50%, rgba(22, 156, 255, .13), rgba(22, 156, 255, 0) 72%);
}
.home-tm .cta-final h2 { font-size: clamp(2.4rem, 5.4vw, 4.5rem); }
.home-tm .cta-final p { font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); }
.home-tm .cta-final .btn { margin-top: 2.2rem; padding: 1rem 2.1rem; font-size: 1rem; }

/* --- Hero en móvil: el titular manda ------------------------------
   Bajo 720px el H1 quedaba en 27px, por debajo de los títulos de
   sección (34px). Ahora siempre es el más grande de la página. */
@media (max-width: 719px) {
	.home-tm .hero-title { font-size: clamp(2.3rem, 10.5vw, 2.9rem); line-height: 1.04; }
}

/* --- Por qué LOGAN: el título manda, el texto acompaña -------------
   Mismos textos y fotos. Títulos más presentes, párrafos un punto
   más pequeños y con ancho de lectura, y un velo más firme para que
   la lectura no dependa de la zona de la foto. */
.home-tm .pqb-titulo { font-size: clamp(1.3rem, 1.9vw, 1.6rem); }
.home-tm .pqb-item--1 .pqb-titulo { font-size: clamp(1.75rem, 3vw, 2.5rem); }
.home-tm .pqb-texto {
	margin-top: .55rem; max-width: 40ch;
	font-size: .94rem; line-height: 1.55; color: rgba(255, 255, 255, .9);
}
.home-tm .pqb-item--1 .pqb-texto { max-width: 38ch; font-size: 1rem; line-height: 1.6; }
.home-tm .pqb-velo {
	background: linear-gradient(180deg, rgba(8, 12, 18, 0) 22%, rgba(8, 12, 18, .6) 55%, rgba(8, 12, 18, .9) 100%);
}
.home-tm .pqb-item:not(.pqb-item--1) .pqb-velo {
	background: linear-gradient(180deg, rgba(8, 12, 18, .15) 0%, rgba(8, 12, 18, .66) 40%, rgba(8, 12, 18, .92) 100%);
}


/* =============================================================
   INICIO · REDISEÑO (referencias: Mitti y EcoOnline)
   Ritmo de la página: foto del hero → logos sobre blanco → Servicios
   en azul hielo → Nosotros en blanco con una foto grande → Por qué
   LOGAN dentro de un bloque azul grisáceo → Blog en blanco → Reseñas
   en azul hielo → llamada final en panel azul → foto del pie.
   Las bandas de color entran y salen con un fundido corto desde el
   blanco: nunca hay un escalón seco entre secciones.
   ============================================================= */
.home-tm {
	--hielo: #EEF6FD;
	--grisazul: #E6EDF5;
	--banda-gris: #EEF1F5;
	--banda-azul: #DCEBFA;
	--fundido: clamp(56px, 7vw, 110px);
	--naranja-acento: #FF7A29;
}

/* --- Hero: línea descriptiva bajo el lema --------------------------- */
.home-tm .hero-desc {
	margin-top: 1rem; max-width: 48ch;
	color: rgba(255, 255, 255, .9);
	font-size: var(--fs-parrafo); line-height: 1.6; font-weight: 500;
	text-shadow: 0 1px 14px rgba(0, 0, 0, .3);
}
.home-tm .hero-cta { margin-top: 2rem; }

/* --- Bandas de color con corte recto ---------------------------------
   Cada sección es un rectángulo de color liso a todo el ancho, sin
   fundidos: Clientes blanco · Servicios gris · Nosotros blanco ·
   Por qué LOGAN azul · Blog gris · Reseñas blanco. */
.home-tm .hcorrido #servicios,
.home-tm .hcorrido #blog { background: var(--banda-gris); }
.home-tm .hcorrido #porque { background: var(--banda-azul); }
.home-tm .hcorrido #nosotros,
.home-tm .hcorrido #testimonios { background: var(--bg-main); }

/* --- Servicios: pestañas + bloque texto / imagen (EcoOnline) -------- */
.home-tm #servicios { padding-block: clamp(4rem, 7.5vw, 7rem); }
.home-tm .hsvc-head {
	display: grid; gap: 1.25rem 3rem; align-items: end;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 960px) {
	.home-tm .hsvc-head { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}
.home-tm .hsvc-head .sec-title { margin-top: 1rem; max-width: 21ch; }
.home-tm .hsvc-head-lado { display: grid; gap: 1.25rem; justify-items: start; }
.home-tm .hsvc-head-lado .sec-intro { margin: 0; max-width: 44ch; }
.home-tm .hsvc-head-lado .btn { background: var(--bg-main); }

.home-tm .hsvc-tabs {
	display: flex; gap: .35rem;
	width: fit-content; max-width: 100%;
	margin-bottom: clamp(1rem, 2vw, 1.4rem); padding: .35rem;
	background: var(--bg-main); border: 1px solid var(--border-soft); border-radius: 999px;
	overflow-x: auto; scrollbar-width: none;
}
.home-tm .hsvc-tabs::-webkit-scrollbar { display: none; }
.home-tm .hsvc-tabs[hidden] { display: none; }
.home-tm .hsvc-tab {
	flex: none; min-height: 44px; padding: .6rem 1.35rem;
	border: 0; border-radius: 999px; background: transparent; cursor: pointer;
	font: 600 .95rem/1.2 var(--sans); letter-spacing: -.01em; color: var(--text-body);
	transition: background-color .3s var(--ease), color .3s var(--ease);
}
.home-tm .hsvc-tab:hover { color: var(--accent-deep); background: var(--hielo); }
.home-tm .hsvc-tab[aria-selected="true"] { background: #2453E6; color: #fff; }
.home-tm .hsvc-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.home-tm .hsvc-panel {
	display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center;
	padding: clamp(1.1rem, 3vw, 2.5rem);
	background: var(--bg-main); border: 1px solid var(--border-soft);
	border-radius: clamp(20px, 2.4vw, 30px);
}
.home-tm .hsvc-panel[hidden] { display: none; }
.home-tm .hsvc-caja:not(.is-pestanas) .hsvc-panel + .hsvc-panel { margin-top: 1.25rem; }
.home-tm .hsvc-panel:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.home-tm .is-pestanas .hsvc-panel:not([hidden]) { animation: hsvc-entra .55s var(--ease) both; }
@keyframes hsvc-entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (min-width: 960px) {
	.home-tm .hsvc-panel {
		grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
		padding: clamp(2rem, 3.4vw, 3rem);
	}
	.home-tm .hsvc-texto { padding-left: clamp(0rem, 1vw, 1rem); }
}

.home-tm .hsvc-tag {
	display: inline-flex; align-items: center; gap: .55rem;
	font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
	color: var(--accent-deep);
}
/* El único naranja de la sección: un punto, como señal de estado. */
.home-tm .hsvc-tag::before {
	content: ""; width: 7px; height: 7px; border-radius: 50%;
	background: var(--naranja-acento);
}
.home-tm .hsvc-titulo {
	margin-top: .9rem;
	font-family: var(--serif); font-weight: 400;
	font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1.08; letter-spacing: -.01em;
	color: var(--text-main);
}
.home-tm .hsvc-pitch {
	margin-top: 1rem; max-width: 46ch;
	color: var(--text-body); font-size: var(--fs-parrafo); line-height: var(--lh-parrafo); font-weight: 500;
}
.home-tm .hsvc-lista { margin-top: 1.4rem; display: grid; gap: .7rem; }
.home-tm .hsvc-lista li {
	display: flex; gap: .7rem; align-items: flex-start;
	color: var(--text-main); font-size: .97rem; line-height: 1.45;
}
.home-tm .hsvc-lista svg {
	flex: none; width: 22px; height: 22px; padding: 4px; margin-top: -.05rem;
	border-radius: 50%; background: var(--hielo); color: var(--accent-deep);
}
.home-tm .hsvc-cta { margin-top: 1.8rem; }

/* Imagen dentro de un panel tintado, con una ficha flotante. */
.home-tm .hsvc-visual {
	position: relative;
	padding: clamp(.75rem, 1.8vw, 1.25rem);
	border-radius: clamp(18px, 2vw, 24px);
	background: linear-gradient(145deg, #E4F0FC 0%, #D2E4F7 100%);
}
.home-tm .hsvc-foto { margin: 0; overflow: hidden; border-radius: clamp(12px, 1.4vw, 16px); aspect-ratio: 4 / 3; }
.home-tm .hsvc-foto img { width: 100%; height: 100%; object-fit: cover; }
.home-tm .hsvc-ficha {
	position: absolute; left: clamp(1.4rem, 3vw, 2.25rem); bottom: clamp(1.4rem, 3vw, 2.25rem);
	display: inline-flex; align-items: center; gap: .65rem;
	max-width: calc(100% - 3rem);
	padding: .6rem 1.1rem .6rem .6rem;
	background: var(--bg-main); border-radius: 14px;
	box-shadow: 0 18px 40px -20px rgba(16, 22, 31, .4);
	font-size: .86rem; font-weight: 600; line-height: 1.3; color: var(--text-main);
}
.home-tm .hsvc-ficha-ico {
	flex: none; width: 30px; height: 30px; border-radius: 9px;
	display: grid; place-items: center; background: #2453E6; color: #fff;
}
.home-tm .hsvc-ficha-ico svg { width: 16px; height: 16px; }

/* Digitalización: la foto de campo a la derecha y el teléfono IPERC
   delante, a la izquierda (el naranja de riesgo vive solo aquí). */
.home-tm .hsvc-panel--digitalizacion .hsvc-visual {
	--dig-naranja: #FF7A29;
	--dig-naranja-deep: #D95E14;
	--dig-naranja-suave: rgba(255, 122, 41, .14);
}
.home-tm .hsvc-panel--digitalizacion .hsvc-foto { width: 70%; margin-left: auto; aspect-ratio: 4 / 5; }
.home-tm .hsvc-panel--digitalizacion .hsvc-foto img { object-position: 50% 30%; }
.home-tm .hsvc-telefono {
	position: absolute; z-index: 1;
	left: clamp(.75rem, 4%, 2.5rem); top: 50%; transform: translateY(-50%);
	filter: drop-shadow(0 30px 40px rgba(10, 47, 85, .28));
}
.home-tm .hsvc-telefono .dphone { --dphone-w: clamp(136px, 14.5vw, 192px); }
.home-tm .hsvc-captura {
	position: absolute; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem);
	width: 52%; margin: 0; overflow: hidden; border-radius: 12px;
	box-shadow: 0 24px 50px -24px rgba(10, 47, 85, .45);
}
.home-tm .hsvc-captura img { width: 100%; height: auto; display: block; }

@media (max-width: 559px) {
	.home-tm .hsvc-tabs { width: 100%; }
	.home-tm .hsvc-ficha { left: 1.25rem; bottom: 1.25rem; font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
	.home-tm .is-pestanas .hsvc-panel:not([hidden]) { animation: none; }
}

/* --- Nosotros: encabezado partido + foto grande con cifras ---------- */
.home-tm .nos-head--partido {
	display: grid; gap: 1.5rem 3.5rem; align-items: end;
	text-align: left;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 960px) {
	.home-tm .nos-head--partido { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.home-tm .nos-head--partido .nos-titulo { margin: 1rem 0 0; max-width: 21ch; }
.home-tm .nos-head--partido .nos-texto { max-width: 56ch; }

.home-tm .nos-escenario {
	position: relative; isolation: isolate; overflow: hidden;
	border-radius: clamp(20px, 2.6vw, 32px);
	background: var(--accent-navy);
}
.home-tm .nos-escenario-foto { margin: 0; aspect-ratio: 16 / 9; }
.home-tm .nos-escenario-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
@media (min-width: 1100px) {
	.home-tm .nos-escenario-foto { aspect-ratio: 21 / 9; }
}
.home-tm .nos-escenario::after {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background: linear-gradient(180deg, rgba(10, 47, 85, 0) 34%, rgba(10, 47, 85, .58) 64%, rgba(7, 27, 51, .9) 100%);
}
.home-tm .nos-escenario .nos-sello {
	position: absolute; z-index: 2;
	top: clamp(1rem, 2.4vw, 1.75rem); right: clamp(1rem, 2.4vw, 1.75rem);
	width: clamp(84px, 8.5vw, 116px);
	grid-column: auto; grid-row: auto; align-self: auto; justify-self: auto;
}
/* Cifras sobre la foto, en blanco, separadas por filetes claros. */
.home-tm #nosotros .nos-escenario .metricas {
	position: absolute; z-index: 1; left: 0; right: 0; bottom: 0;
	margin: 0; padding: clamp(1.25rem, 3vw, 2.25rem) clamp(.75rem, 2.5vw, 2rem);
	background: none; border: 0; border-radius: 0;
	grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
}
.home-tm #nosotros .nos-escenario .metrica { padding: 0 clamp(.75rem, 2vw, 1.75rem); border: 0; }
.home-tm #nosotros .nos-escenario .metrica + .metrica { border-left: 1px solid rgba(255, 255, 255, .24); }
.home-tm #nosotros .nos-escenario .metrica::before { background: var(--accent-light); }
.home-tm #nosotros .nos-escenario .metrica-num { color: #fff; font-size: clamp(2rem, 3.6vw, 3.4rem); }
.home-tm #nosotros .nos-escenario .metrica-check { color: var(--accent-light); }
.home-tm #nosotros .nos-escenario .metrica-txt { color: rgba(255, 255, 255, .88); }
/* En móvil la foto no cabe con cuatro cifras encima: van debajo,
   en el mismo bloque marino, en 2×2. */
@media (max-width: 719px) {
	.home-tm .nos-escenario-foto { aspect-ratio: 4 / 3; }
	.home-tm .nos-escenario::after { display: none; }
	.home-tm #nosotros .nos-escenario .metricas {
		position: static; grid-template-columns: repeat(2, minmax(0, 1fr));
		padding: 1.25rem .5rem 1.5rem; row-gap: 1.25rem;
	}
	.home-tm #nosotros .nos-escenario .metrica + .metrica { border-left: 0; }
	.home-tm #nosotros .nos-escenario .metrica:nth-child(even) { border-left: 1px solid rgba(255, 255, 255, .24); }
}

.home-tm .nos-fila {
	display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center;
	margin-top: clamp(2rem, 4vw, 3.5rem);
}
@media (min-width: 960px) {
	.home-tm .nos-fila { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
}
.home-tm .nos-fila-foto { margin: 0; overflow: hidden; border-radius: clamp(18px, 2vw, 24px); aspect-ratio: 4 / 3; }
.home-tm .nos-fila-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 52% 58%; }
.home-tm .nos-fila .nos-pilares { margin-top: 0; }

/* --- Por qué LOGAN: lista desplegable + visor de fotos ---------------
   Banda azul a todo el ancho. Izquierda: los principios como filas
   separadas por un filete; la abierta enseña su texto. Derecha: una
   foto grande que cambia con la fila abierta, con su rótulo. Nada de
   texto largo sobre foto. En móvil el visor se oculta y cada fila
   abierta lleva su foto debajo del texto. */
.home-tm #porque > .wrap { max-width: 1480px; }
/* La banda azul la pinta la sección entera; el bloque ya no lleva fondo
   propio ni esquinas redondeadas. */
.home-tm .pq-bloque { padding: 0; background: transparent; border-radius: 0; }

.home-tm .pqv { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
@media (min-width: 960px) {
	.home-tm .pqv { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
}

.home-tm .pqv-lista { border-top: 1px solid rgba(16, 40, 80, .16); }
.home-tm .pqv-item { border-bottom: 1px solid rgba(16, 40, 80, .16); }
.home-tm .pqv-cab { margin: 0; font: inherit; }
.home-tm .pqv-boton {
	display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
	width: 100%; min-height: 44px; padding: clamp(1.1rem, 2vw, 1.5rem) 0;
	text-align: left; cursor: pointer;
}
.home-tm .pqv-titulo {
	font-family: var(--serif); font-weight: 400;
	font-size: clamp(1.55rem, 2.4vw, 2.15rem); line-height: 1.1; letter-spacing: -.01em;
	color: var(--text-main);
	transition: color .3s;
}
.home-tm .pqv-signo {
	flex: none; width: 40px; height: 40px; border-radius: 50%;
	display: grid; place-items: center;
	border: 1px solid rgba(16, 40, 80, .2); color: var(--text-main);
	transition: transform .45s var(--ease), background-color .3s, border-color .3s, color .3s;
}
.home-tm .pqv-signo svg { width: 15px; height: 15px; }
.home-tm .pqv-boton:hover .pqv-titulo { color: var(--accent-deep); }
.home-tm .pqv-boton:hover .pqv-signo { border-color: var(--accent-deep); color: var(--accent-deep); }
.home-tm .pqv-boton:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
.home-tm .pqv-item.is-abierta .pqv-signo {
	transform: rotate(45deg);
	background: #2453E6; border-color: #2453E6; color: #fff;
}

/* Cuerpo plegable: grid 0fr → 1fr anima la altura real del texto. */
.home-tm .pqv-cuerpo {
	display: grid; grid-template-rows: 1fr;
	transition: grid-template-rows .5s var(--ease);
}
.home-tm .pqv-cuerpo-in { min-height: 0; overflow: hidden; }
.home-tm .pqv.is-js .pqv-item:not(.is-abierta) .pqv-cuerpo { grid-template-rows: 0fr; }
.home-tm .pqv-texto {
	max-width: 50ch; padding-bottom: clamp(1.25rem, 2.2vw, 1.75rem);
	color: var(--text-body); font-size: var(--fs-parrafo); line-height: var(--lh-parrafo); font-weight: 500;
}
.home-tm .pqv-foto-movil {
	margin: 0 0 1.5rem; overflow: hidden; aspect-ratio: 16 / 10;
	border-radius: 16px; background: var(--bg-tint);
}
.home-tm .pqv-foto-movil img { width: 100%; height: 100%; object-fit: cover; }

/* Visor: las fotos apiladas; solo la activa es visible. */
.home-tm .pqv-visor {
	position: relative; overflow: hidden; isolation: isolate;
	aspect-ratio: 5 / 4;
	border-radius: clamp(20px, 2.4vw, 30px); background: #C7D5E5;
}
.home-tm .pqv-visor img {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
	opacity: 0; transform: scale(1.04);
	transition: opacity .6s var(--ease), transform 1.2s var(--ease);
}
.home-tm .pqv-visor img.is-activa { opacity: 1; transform: none; }
.home-tm .pqv-rotulo {
	position: absolute; z-index: 1; left: clamp(1rem, 2vw, 1.5rem); bottom: clamp(1rem, 2vw, 1.5rem);
	padding: .55rem 1rem; border-radius: 999px;
	background: var(--bg-main); color: var(--text-main);
	font-size: .85rem; font-weight: 600; letter-spacing: -.01em;
	box-shadow: 0 14px 30px -18px rgba(10, 30, 60, .5);
}

@media (max-width: 959px) {
	.home-tm .pqv-visor { display: none; }
}
@media (min-width: 960px) {
	.home-tm .pqv-foto-movil { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.home-tm .pqv-cuerpo, .home-tm .pqv-signo, .home-tm .pqv-visor img { transition: none; }
}

.home-tm .pq-head {
	display: grid; gap: 1.25rem 3rem; align-items: end;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 960px) {
	.home-tm .pq-head { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
}
.home-tm #porque .pq-head .sec-title { margin: 1rem 0 0; max-width: 24ch; text-align: left; }
.home-tm .pq-head .sec-intro { margin: 0; max-width: 40ch; }

/* --- Reseñas: sin tarjeta blanca; la cita directa sobre el hielo ----- */
.home-tm .rsn-card { background: transparent; border: 0; padding: 0; }
.home-tm .rsn-titular {
	margin-top: .6rem;
	font-family: var(--serif); font-weight: 400;
	font-size: clamp(1.5rem, 2.3vw, 2rem); line-height: 1.15; letter-spacing: -.01em;
}
.home-tm .rsn-card blockquote::before { font-size: 4rem; }
.home-tm .rsn-card blockquote p:not(.rsn-titular) { font-size: var(--fs-parrafo); line-height: 1.65; }
.home-tm .rsn-btn { background: var(--bg-main); }

/* --- Llamada final: panel azul corporativo redondeado (Mitti) -------
   Sirve en cualquier página: <div class="cta-panel cta-panel--azul"
   data-cta-red data-cta-tono="claro">. El doble selector
   (.cta-panel.cta-panel--azul) gana a los ajustes de .home-tm. */
.cta-panel.cta-panel--azul {
	overflow: hidden; isolation: isolate;
	border-radius: clamp(24px, 3vw, 40px);
	background:
		radial-gradient(60% 90% at 88% 10%, rgba(108, 203, 255, .38), rgba(108, 203, 255, 0) 62%),
		linear-gradient(135deg, #2453E6 0%, #0B6BC4 58%, #0A55A8 100%);
}
.cta-panel.cta-panel--azul::before { display: none; }
.cta-panel.cta-panel--azul .cta-red { mask-image: none; -webkit-mask-image: none; opacity: .7; }
.cta-panel.cta-panel--azul .cta-panel-in { padding: clamp(3.5rem, 8vw, 6rem) var(--gut); }
.cta-panel.cta-panel--azul h2 { color: #fff; font-size: clamp(2.4rem, 5.4vw, 4.5rem); }
.cta-panel.cta-panel--azul p { color: rgba(255, 255, 255, .9); font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); }
.cta-panel.cta-panel--azul .btn { margin-top: 2.2rem; padding: 1rem 2.1rem; font-size: 1rem; }
.cta-panel.cta-panel--azul .btn-primary {
	background: #fff; color: #0B4FA8;
	box-shadow: 0 16px 32px -16px rgba(0, 20, 60, .55);
}
.cta-panel.cta-panel--azul .btn-primary:hover { background: var(--bg-tint); color: #083F86; }
.cta-panel.cta-panel--azul .btn-primary:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.home-tm .cta-final { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }


/* =============================================================
   35. SELECTOR DE IDIOMA (ES | EN | PT)
   Tres siglas sueltas separadas por un filete, del mismo gris que
   los enlaces del menú; la activa en el color del texto principal
   con el mismo tick de acento que marca el enlace activo. En
   escritorio va junto al botón de asesoría (.nav-acciones agrupa
   los dos para que la barra conserve su reparto de siempre); en
   tablet y móvil, dentro del menú desplegable.
   ============================================================= */
.nav-acciones { display: flex; align-items: center; gap: clamp(.9rem, 1.4vw, 1.3rem); flex: none; }

.lang-sw { display: flex; align-items: center; gap: .15rem; }
.lang-sw a {
	position: relative;
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 30px; min-height: 44px; padding: 0 .3rem;
	font-size: .76rem; font-weight: 600; letter-spacing: .12em;
	color: var(--text-secondary);
	transition: color 300ms ease, min-height 300ms ease;
}
.lang-sw a::after {
	content: ""; position: absolute; left: .3rem; right: calc(100% - .3rem); bottom: 8px;
	height: 1.5px; border-radius: 2px; background: var(--accent);
	transition: right .35s var(--ease), background-color 300ms ease;
}
.lang-sw a:hover { color: var(--text-main); }
.lang-sw a.is-on { color: var(--text-main); }
.lang-sw a.is-on::after { right: .3rem; }
.lang-sw a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.lang-sw-sep { width: 1px; height: 11px; background: var(--border); flex: none; }

.nav.is-stuck .lang-sw a { min-height: 38px; }
.nav.is-stuck .lang-sw a::after { bottom: 5px; }

/* Viewport inicial sobre foto oscura: mismo tratamiento que los
   enlaces del menú (claro, el activo en blanco). */
body:not(.cabecera-clara) .nav:not(.is-stuck) .lang-sw a { color: var(--text-on-dark-body); }
body:not(.cabecera-clara) .nav:not(.is-stuck) .lang-sw a:hover,
body:not(.cabecera-clara) .nav:not(.is-stuck) .lang-sw a.is-on { color: #fff; }
body:not(.cabecera-clara) .nav:not(.is-stuck) .lang-sw a::after { background: currentColor; }
body:not(.cabecera-clara) .nav:not(.is-stuck) .lang-sw-sep { background: var(--border-on-dark); }

/* Menú móvil: más grande y a la izquierda, sobre el correo. */
.lang-sw--menu { margin: 0 0 .8rem -.3rem; }
.lang-sw--menu a { min-height: 48px; min-width: 44px; font-size: .9rem; }
.lang-sw--menu a::after { bottom: 10px; }
.lang-sw--menu .lang-sw-sep { height: 14px; }

@media (max-width: 1023px) {
	.nav-acciones { display: none; }
}


/* =============================================================
   PRIVACIDAD Y COOKIES
   Un aviso legal que se lee como el resto del sitio: cabecera clara
   con tres datos clave, índice lateral fijo y cada apartado en su
   propia tarjeta blanca sobre gris niebla. Nada oscuro. El texto
   legal es el de lang/<idioma>.php; privacidad.php solo lo reparte.
   ============================================================= */
.page-privacidad .phero {
	background: linear-gradient(180deg, var(--bg-tint-soft) 0%, var(--bg-main) 100%);
	border-bottom: 1px solid var(--border-soft);
}
.page-privacidad .phero::before {
	background:
		radial-gradient(circle at 18% 22%, rgba(22, 156, 255, .12), transparent 52%),
		radial-gradient(circle at 92% 8%, rgba(36, 83, 230, .07), transparent 40%);
}
.page-privacidad .phero .eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--accent); }
.page-privacidad .phero-title { margin-top: 1rem; }

/* Tres datos clave bajo la bajada */
.priv-datos { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.7rem; }
.priv-datos li {
	display: inline-flex; align-items: center; gap: .5rem;
	padding: .5rem .95rem; border-radius: 999px;
	background: var(--bg-card-solid); border: 1px solid var(--border);
	font-size: .84rem; font-weight: 500; color: var(--text-main);
}
.priv-datos svg { width: 15px; height: 15px; flex: none; color: var(--accent-deep); }

/* Cuerpo: índice + apartados */
.priv { background: var(--bg-secondary); padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(4.5rem, 10vw, 7.5rem); }
/* minmax(0, 1fr) y min-width: 0: sin ellos, la fila de píldoras del
   índice en móvil ensancha la columna y las tarjetas se salen. */
.priv-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.priv-indice { min-width: 0; }

.priv-indice .eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--accent); }
.priv-indice ol { margin-top: 1rem; display: flex; flex-direction: column; gap: .15rem; }
.priv-indice a {
	display: flex; align-items: baseline; gap: .85rem;
	padding: .6rem .85rem; border-radius: 10px;
	font-size: .92rem; line-height: 1.35; color: var(--text-body);
	transition: background-color .3s var(--ease), color .3s var(--ease);
}
.priv-indice a span {
	flex: none; font-size: .72rem; font-weight: 600; letter-spacing: .12em;
	color: var(--accent-deep); font-variant-numeric: tabular-nums;
}
.priv-indice a:hover { background: var(--bg-card-solid); color: var(--text-main); }
.priv-indice a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.priv-cuerpo { min-width: 0; display: flex; flex-direction: column; gap: 1.25rem; }

.priv-sec {
	background: var(--bg-card-solid);
	border: 1px solid var(--border-soft); border-radius: 20px;
	padding: clamp(1.5rem, 3.6vw, 2.6rem) clamp(1.35rem, 3.8vw, 2.9rem);
	scroll-margin-top: calc(var(--nav-h) + 1.5rem);
}
.priv-sec > :last-child { margin-bottom: 0; }
.priv-num {
	display: flex; align-items: center; gap: .6rem;
	font-size: .72rem; font-weight: 600; letter-spacing: .22em; color: var(--accent-deep);
	margin-bottom: .7rem;
}
.priv-num::before { content: ""; width: 22px; height: 1px; background: var(--accent); }
.texto.priv-sec h2 { margin: 0 0 1rem; font-size: clamp(1.4rem, 2.4vw, 1.85rem); line-height: 1.2; }
/* El número ya lleva su filete: el del <h2> de .texto sobra aquí. */
.texto.priv-sec h2::before { content: none; display: none; }
.priv-sec p { max-width: 68ch; }

/* «Etiqueta: valor» como ficha de datos (responsable, cookie) */
.texto ul.priv-ficha {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
	gap: .7rem; margin: .4rem 0 1.3rem;
}
.texto ul.priv-ficha li {
	list-style: none; margin: 0;
	padding: .95rem 1.1rem; border-radius: 14px;
	background: var(--bg-tint-soft); border: 1px solid rgba(22, 156, 255, .16);
	font-size: .95rem; line-height: 1.5; color: var(--text-body);
	overflow-wrap: anywhere;
}
.texto ul.priv-ficha li strong {
	display: block; margin-bottom: .3rem;
	font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
	color: var(--text-secondary);
}

/* Cierre: a quién escribir */
.priv-ayuda {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem 2rem;
	padding: clamp(1.5rem, 3.6vw, 2.4rem) clamp(1.35rem, 3.8vw, 2.9rem);
	border-radius: 20px; background: var(--bg-tint-medium);
	border: 1px solid rgba(36, 83, 230, .12);
}
.priv-ayuda > div { max-width: 46ch; }
.priv-ayuda-t { font-family: var(--serif); font-size: clamp(1.35rem, 2.3vw, 1.75rem); line-height: 1.2; color: var(--text-main); }
.priv-ayuda p:not(.priv-ayuda-t) { margin-top: .5rem; color: var(--text-body); font-size: var(--fs-parrafo-sm); line-height: 1.6; }
.priv-ayuda .btn { white-space: normal; text-align: left; }

/* Móvil: el índice pasa a una fila de píldoras desplazable */
@media (max-width: 959px) {
	.priv-indice { margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); }
	.priv-indice ol {
		flex-direction: row; gap: .5rem; overflow-x: auto; padding-bottom: .4rem;
		scroll-snap-type: x proximity; scrollbar-width: none;
	}
	.priv-indice ol::-webkit-scrollbar { display: none; }
	.priv-indice li { flex: none; scroll-snap-align: start; }
	.priv-indice a {
		white-space: nowrap; padding: .55rem .95rem; border-radius: 999px;
		background: var(--bg-card-solid); border: 1px solid var(--border-soft);
		font-size: .86rem;
	}
}

/* Escritorio: índice fijo a la izquierda */
@media (min-width: 960px) {
	.priv-in { grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); }
	.priv-indice { position: sticky; top: calc(var(--nav-h) + 1.75rem); }
}