/* GENERADO por scripts/wp-ds-sync.mjs desde design/ds/: no editar aquí */

/* ===== tokens.css ===== */
:root {
	--wp--preset--color--navy: #012A49;
	--wp--preset--color--action: #0055AA;
	--wp--preset--color--light-blue: #009CEB;
	--wp--preset--color--sky: #BAE8FF;
	--wp--preset--color--tint-blue: #E5F5FD;
	--wp--preset--color--dark-blue: #134169;
	--wp--preset--color--dark-gray: #53565A;
	--wp--preset--color--panel: #F2F3F4;
	--wp--preset--color--gray: #EEEEEE;
	--wp--preset--color--line: #DADCDE;
	--wp--preset--color--white: #FFFFFF;
	--wp--preset--font-family--body: 'Roboto', Arial, sans-serif;
	--wp--preset--font-size--h-1: 68px;
	--wp--preset--font-size--h-2: 54px;
	--wp--preset--font-size--h-2-banda: 46px;
	--wp--preset--font-size--h-3: 32px;
	--wp--preset--font-size--lead-hero: 20px;
	--wp--preset--font-size--lead: 18px;
	--wp--preset--font-size--tarjeta: 20px;
	--wp--preset--font-size--body: 16px;
	--wp--preset--font-size--small: 14px;
	--wp--preset--font-size--cifra: 68px;
	--wp--preset--spacing--sec: clamp(3rem, 2.74rem + 3.24vw, 6rem);
	--wp--preset--spacing--head: 56px;
	--wp--preset--spacing--gap: 24px;
	--wp--preset--spacing--pad: 32px;
	--wp--style--global--content-size: 760px;
	--wp--style--global--wide-size: 1280px;
	--wp--custom--radio: 4px;
	--wp--custom--gutter--escritorio: 80px;
	--wp--custom--gutter--tablet: 40px;
	--wp--custom--gutter--movil: 20px;
	--wp--custom--accion-hover: #00478F;
	--wp--custom--velo: #021A2D;
	--wp--custom--texto-oscuro: rgba(255, 255, 255, .85);
	--wp--custom--lista-oscuro: rgba(255, 255, 255, .92);
	--wp--custom--boton--alto: 48px;
	--wp--custom--boton--alto-sm: 44px;
	--wp--custom--boton--padding: 20px;
	--wp--custom--logo--cliente: 72px;
	--wp--custom--logo--tarjeta: 44px;
	--wp--custom--logo--sello: 64px;
	--wp--custom--logo--integracion: 48px;
	--wp--custom--icono--eyebrow: 32px;
	--wp--custom--icono--lista: 40px;
	--wp--custom--icono--destacado: 48px;
	--wp--custom--icono--beneficio: 56px;
	--wp--custom--icono--cifra: 49px;
	--wp--custom--pila--uno: #E5F5FD;
	--wp--custom--pila--dos: #B3E1FA;
	--wp--custom--pila--tres: #66C4F3;
	--wp--custom--pila--cuatro: #003F7F;
	--wp--custom--pila--cinco: #134169;
	--wp--custom--pila--seis: #53565A;
	--wp--custom--movimiento--rapida: .2s;
	--wp--custom--movimiento--media: .45s;
	--wp--custom--movimiento--lenta: .7s;
	--wp--custom--movimiento--salida: cubic-bezier(.2, .7, .2, 1);
}
@media (max-width: 781px) {
	:root {
		--wp--preset--font-size--h-1: 48px;
		--wp--preset--font-size--h-2: 44px;
		--wp--preset--font-size--h-2-banda: 32px;
		--wp--preset--font-size--h-3: 24px;
		--wp--preset--font-size--lead-hero: 18px;
		--wp--preset--font-size--lead: 16px;
		--wp--preset--font-size--tarjeta: 18px;
		--wp--preset--font-size--cifra: 44px;
		--wp--preset--spacing--head: 36px;
		--wp--preset--spacing--gap: 16px;
		--wp--preset--spacing--pad: 24px;
		--wp--custom--logo--cliente: 52px;
		--wp--custom--logo--sello: 52px;
		--wp--custom--logo--integracion: 30px;
	}
}

/* ===== base.css ===== */
/*
 * Design system Drivin, base (2026-10-23). Sale de las 3 URLs aprobadas por el cliente (home, demo e industria base),
 * reescritas sin las 3 propuestas de origen: docs/design-system/analisis-urls-base.md.
 * Lo compartido por todos los componentes: contexto claro/oscuro, reset, tipografía por rol, botones, superficies,
 * contenedor, íconos, carrusel, franja de logos y entrada al aparecer. Cada componente vive en c/<id>.css.
 * Los tokens salen de tokens.css (generado desde theme.json): aquí no hay valores sueltos que no sean de layout.
 */

/* ===== Alias cortos de los tokens (los usan todos los componentes) ===== */
:root {
	--ink: var(--wp--preset--color--navy);
	--text: var(--wp--preset--color--dark-gray);
	--blue: var(--wp--preset--color--action);
	--acento: var(--wp--preset--color--light-blue);
	--sky: var(--wp--preset--color--sky);
	--r: var(--wp--custom--radio);
	--pad: var(--wp--preset--spacing--pad);
	--gap: var(--wp--preset--spacing--gap);
	--t-rapida: var(--wp--custom--movimiento--rapida);
	--t-media: var(--wp--custom--movimiento--media);
	--t-lenta: var(--wp--custom--movimiento--lenta);
	--e-salida: var(--wp--custom--movimiento--salida);
	--gutter: var(--wp--custom--gutter--escritorio);
	/* La única capa sobre una foto con texto encima (hero de 3gtms.com): velo opaco en el borde del texto */
	--velo-foto: linear-gradient(103deg, rgb(2, 26, 45) -4.17%, rgba(2, 26, 45, 0) 77.94%);
	--velo-pie: linear-gradient(0deg, rgb(2, 26, 45) -4.17%, rgba(2, 26, 45, 0) 77.94%);
	--velo-top: linear-gradient(180deg, rgb(2, 26, 45) -4.17%, rgba(2, 26, 45, 0) 77.94%);
	/* Diagonal de Descartes (scripts/diag-plana.mjs): línea a 391 px del borde y 32°, fundido al color de fondo */
	--diag-navy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='1002' viewBox='0 0 1440 1002' preserveAspectRatio='xMaxYMin slice'%3E%3Cpath fill='%23009CEB' fill-opacity='.16' d='M242.2 0H1440V1002H-383.9z'/%3E%3C/svg%3E");
	--diag-azul: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='1002' viewBox='0 0 1440 1002' preserveAspectRatio='xMaxYMin slice'%3E%3Cpath fill='%23fff' fill-opacity='.1' d='M242.2 0H1440V1002H-383.9z'/%3E%3C/svg%3E");
	--diag-sec-azul: linear-gradient(#0055AA00 calc(min(75%, 560px) / 2), #0055AA min(75%, 560px)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6000' height='4000' viewBox='0 0 6000 4000' preserveAspectRatio='xMinYMin meet'%3E%3Cdefs%3E%3CradialGradient id='b' cx='0' cy='0' r='1' gradientUnits='userSpaceOnUse' gradientTransform='matrix(935.65945 -395.7712 136.463 322.61794 932.916 37.358)'%3E%3Cstop stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='c' cx='0' cy='0' r='1' gradientUnits='userSpaceOnUse' gradientTransform='rotate(-17 3650.38 -4463.413) scale(240.093)'%3E%3Cstop stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg transform='translate(2506.83 0) scale(1.58782)'%3E%3Cpath fill='url(%23b)' fill-opacity='.2' d='M787.386-872.442h1245.2v1846.08h-1245.2z' transform='rotate(32 787.386 -872.442)'/%3E%3Cpath fill='url(%23c)' fill-opacity='.12' d='M1463.88 282.043h705.746v1046.31H1463.88z' transform='rotate(32 1463.88 282.043)'/%3E%3C/g%3E%3C/svg%3E");
	--diag-sec-gris: linear-gradient(#EEEEEE00 calc(min(75%, 560px) / 2), #EEEEEE min(75%, 560px)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6000' height='4000' viewBox='0 0 6000 4000' preserveAspectRatio='xMinYMin meet'%3E%3Cdefs%3E%3CradialGradient id='b' cx='0' cy='0' r='1' gradientUnits='userSpaceOnUse' gradientTransform='matrix(935.65945 -395.7712 136.463 322.61794 932.916 37.358)'%3E%3Cstop stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='c' cx='0' cy='0' r='1' gradientUnits='userSpaceOnUse' gradientTransform='rotate(-17 3650.38 -4463.413) scale(240.093)'%3E%3Cstop stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg transform='translate(2506.83 0) scale(1.58782)'%3E%3Cpath fill='url(%23b)' fill-opacity='.9' d='M787.386-872.442h1245.2v1846.08h-1245.2z' transform='rotate(32 787.386 -872.442)'/%3E%3Cpath fill='url(%23c)' fill-opacity='.6' d='M1463.88 282.043h705.746v1046.31H1463.88z' transform='rotate(32 1463.88 282.043)'/%3E%3C/g%3E%3C/svg%3E");
	/* Celeste (todo lo de casos de éxito, Joaquín 2026-10-29): la diagonal de la gris en blanco más suave (.3 y .2) */
	--diag-sec-celeste: linear-gradient(#BAE8FF00 calc(min(75%, 560px) / 2), #BAE8FF min(75%, 560px)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6000' height='4000' viewBox='0 0 6000 4000' preserveAspectRatio='xMinYMin meet'%3E%3Cdefs%3E%3CradialGradient id='b' cx='0' cy='0' r='1' gradientUnits='userSpaceOnUse' gradientTransform='matrix(935.65945 -395.7712 136.463 322.61794 932.916 37.358)'%3E%3Cstop stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='c' cx='0' cy='0' r='1' gradientUnits='userSpaceOnUse' gradientTransform='rotate(-17 3650.38 -4463.413) scale(240.093)'%3E%3Cstop stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg transform='translate(2506.83 0) scale(1.58782)'%3E%3Cpath fill='url(%23b)' fill-opacity='.3' d='M787.386-872.442h1245.2v1846.08h-1245.2z' transform='rotate(32 787.386 -872.442)'/%3E%3Cpath fill='url(%23c)' fill-opacity='.2' d='M1463.88 282.043h705.746v1046.31H1463.88z' transform='rotate(32 1463.88 282.043)'/%3E%3C/g%3E%3C/svg%3E");
	--diag-sec-navy: linear-gradient(#012A4900 calc(min(75%, 560px) / 2), #012A49 min(75%, 560px)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6000' height='4000' viewBox='0 0 6000 4000' preserveAspectRatio='xMinYMin meet'%3E%3Cdefs%3E%3CradialGradient id='b' cx='0' cy='0' r='1' gradientUnits='userSpaceOnUse' gradientTransform='matrix(935.65945 -395.7712 136.463 322.61794 932.916 37.358)'%3E%3Cstop stop-color='%23009CEB'/%3E%3Cstop offset='1' stop-color='%23005885' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='c' cx='0' cy='0' r='1' gradientUnits='userSpaceOnUse' gradientTransform='rotate(-17 3650.38 -4463.413) scale(240.093)'%3E%3Cstop stop-color='%23009CEB'/%3E%3Cstop offset='1' stop-color='%23005885' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg transform='translate(2506.83 0) scale(1.58782)'%3E%3Cpath fill='url(%23b)' fill-opacity='.24' d='M787.386-872.442h1245.2v1846.08h-1245.2z' transform='rotate(32 787.386 -872.442)'/%3E%3Cpath fill='url(%23c)' fill-opacity='.14' d='M1463.88 282.043h705.746v1046.31H1463.88z' transform='rotate(32 1463.88 282.043)'/%3E%3C/g%3E%3C/svg%3E");
}
@media (max-width: 1100px) { :root { --gutter: var(--wp--custom--gutter--tablet); } }
@media (max-width: 781px) { :root { --gutter: var(--wp--custom--gutter--movil); } }

/* ===== Contexto: los colores de texto y de botón salen del fondo, no del componente =====
   Claro → título navy, texto gris, botón azul. Oscuro (.on-dark) → título blanco, texto blanco al 85 % (N5), botón blanco.
   Sobre navy o foto el relleno vuelve a azul (groundcloud); el blanco queda para el azul, el header y el footer.
   Una tarjeta blanca dentro de una banda oscura vuelve a los colores de claro (.claro) */
:root, .claro {
	--c-tit: var(--ink); --c-txt: var(--text); --c-link: var(--blue); --c-hl: var(--blue);
	--btn-bg: var(--blue); --btn-fg: #fff; --btn-hover: var(--wp--custom--accion-hover); --btn-borde: var(--blue); --btn-velo: rgba(0, 85, 170, .08);
}
.on-dark {
	--c-tit: #fff; --c-txt: var(--wp--custom--texto-oscuro); --c-link: #fff; --c-hl: var(--sky);
	--btn-bg: #fff; --btn-fg: var(--blue); --btn-hover: var(--wp--preset--color--tint-blue); --btn-borde: #fff; --btn-velo: rgba(255, 255, 255, .12);
}
:is(.sec--navy, .sobre-foto) { --btn-bg: var(--blue); --btn-fg: #fff; --btn-hover: var(--wp--custom--accion-hover); }
.on-dark, .claro { color: var(--c-txt); }

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; }
html { background: #fff; }
body { margin: 0; font: 400 var(--wp--preset--font-size--body)/1.4 var(--wp--preset--font-family--body); color: var(--text); background: #fff; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; }

/* ===== Tipografía por rol (escala de groundcloud.com, aprobada). El tag sigue la semántica; la clase fija el rol =====
   .h1 todo hero · .h2 sección de contenido (centrado) · .h2 dentro de banda/caja y .h2--banda (también el H3 de una fila)
   · .h4 ítem de banda, frase de logos, pregunta · .h-tarjeta título de tarjeta · .lead bajada · .lead--hero bajada de hero */
.h1, .h2, .h3, .h4, .h-tarjeta { color: var(--c-tit); text-wrap: balance; font-weight: 700; }
.h1 { font-size: var(--wp--preset--font-size--h-1); line-height: 1.2; letter-spacing: -.02em; overflow-wrap: anywhere; }
.h2 { font-size: var(--wp--preset--font-size--h-2); line-height: 1.16; letter-spacing: -.02em; }
.h2--banda, :is(.sec--navy, .sec--azul, .caja) .h2 { font-size: var(--wp--preset--font-size--h-2-banda); line-height: 1.2; letter-spacing: -.01em; }
.h3 { font-size: var(--wp--preset--font-size--h-3); line-height: 1.24; letter-spacing: -.01em; } /* heading-4 de groundcloud: 32/700, móvil 24 */
.h4 { font-size: var(--wp--preset--font-size--tarjeta); line-height: 1.3; letter-spacing: -.01em; }
.h-tarjeta { font-size: var(--wp--preset--font-size--tarjeta); line-height: 1.3; font-weight: 500; letter-spacing: -.01em; }
.lead { font-size: var(--wp--preset--font-size--lead); line-height: 1.4; }
.lead--hero { font-size: var(--wp--preset--font-size--lead-hero); line-height: 1.3; letter-spacing: -.01em; }
.small { font-size: var(--wp--preset--font-size--small); }
/* Eyebrow: sólo sobre títulos alineados a la izquierda, nunca sobre un H2 centrado (N1: 16/500) */
.eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 16px; line-height: 1.3; font-weight: 500; color: var(--c-hl); }
.eyebrow img { width: var(--wp--custom--icono--eyebrow); height: var(--wp--custom--icono--eyebrow); }
/* Etiqueta (N4: 14) */
.tag { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--r); background: var(--wp--preset--color--tint-blue); font-size: 14px; font-weight: 500; color: var(--blue); }
.tag--gris { background: var(--wp--preset--color--panel); color: var(--ink); }
.tag--blanco { background: #fff; color: var(--ink); } /* sobre celeste: el tinte azul no se distingue */

/* ===== Botones: 3 (relleno, outline de 1 px, texto con flecha), radio 4, sin sombra. El color lo pone el fondo (N8) ===== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--wp--custom--boton--alto); padding: 0 var(--wp--custom--boton--padding); border: 1px solid transparent; border-radius: var(--r); font: 500 16px/1 var(--wp--preset--font-family--body); white-space: nowrap; cursor: pointer; transition: background var(--t-rapida), border-color var(--t-rapida), color var(--t-rapida); }
.btn .i { font-size: 18px; transition: transform var(--t-rapida) var(--e-salida); }
.btn--sm { height: var(--wp--custom--boton--alto-sm); }
.btn--bloque { width: 100%; }
.btn--primario { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg); }
.btn--secundario { border-color: var(--btn-borde); background: transparent; color: var(--btn-borde); }
.btn:active { transform: scale(.98); }
.link { display: inline-flex; align-items: center; gap: 8px; padding-bottom: 4px; border-bottom: 1px solid currentColor; font-weight: 500; line-height: 1.2; color: var(--c-link); }
.link .i { font-size: 18px; transition: transform var(--t-rapida); }
.ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
:is(.btn, .link, button, summary, [role="button"]):focus-visible, .is-foco { outline: 2px solid var(--acento); outline-offset: 3px; }
@media (hover: hover) {
	.btn--primario:is(:hover, .is-hover) { background: var(--btn-hover); border-color: var(--btn-hover); }
	.btn--secundario:is(:hover, .is-hover) { background: var(--btn-velo); }
	.btn:is(:hover, .is-hover) .i, .link:is(:hover, .is-hover) .i { transform: translateX(3px); }
}

/* ===== Íconos: .i interfaz (sprite, trazo 2), .ib redes (trazo 1,6). Los de contenido son <img> de la librería Descartes ===== */
.i { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ib { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ===== Superficies y layout =====
   .sec: padding único arriba y abajo. Fondos: blanco (default), .sec--gris (tarjetas blancas encima), .sec--navy y
   .sec--azul con la diagonal. .sec--contenida: banda a 12 px del borde con radio (alterna con las de todo el ancho).
   .caja: el bloque de color con el ancho del contenedor dentro de una sección blanca; no suma padding propio a la sección */
.sec { padding: var(--wp--preset--spacing--sec) 0; }
.sec--gris { background: var(--wp--preset--color--gray); }
/* Celeste (casos de éxito): contexto claro con el texto en navy, no en gris (Joaquín, 2026-10-29) */
.sec--celeste { --c-txt: var(--ink); color: var(--c-txt); background: var(--diag-sec-celeste) left -2500px top / 6000px 4000px no-repeat, var(--wp--preset--color--sky); }
.sec--navy { background: var(--diag-sec-navy) left -2500px top / 6000px 4000px no-repeat, var(--ink); }
.sec--azul { background: var(--diag-sec-azul) left -2500px top / 6000px 4000px no-repeat, var(--blue); }
.sec--contenida { margin: 12px; border-radius: var(--r); }
.sec--sin-padding { padding: 0; }
.caja { border-radius: var(--r); background: var(--diag-sec-azul) left -2500px top / 6000px 4000px no-repeat, var(--blue); }
/* Caja angosta (tarjeta, muestra, columna): la diagonal arriba al 22 % del ancho y no a 391 px, que en una caja de
   menos de ~1300 la deja al final. La línea está en x 2891,4 de la imagen de 6000: calc(22% - 1571,4px) la deja en 0,22 W */
.diag-prop { background-position: calc(22% - 1571.4px) top; }
/* Una sección sin padding no tiene aire propio: junto a una con fondo de color se separa con margen, en los dos órdenes */
.sec--sin-padding + .sec:is(.sec--contenida, .sec--gris, .sec--celeste, .sec--navy, .sec--azul),
.sec:is(.sec--gris, .sec--celeste, .sec--navy, .sec--azul):not(.sec--contenida) + .sec--sin-padding { margin-top: var(--wp--preset--spacing--sec); }
.w { max-width: calc(var(--wp--style--global--wide-size) + 2 * var(--wp--custom--gutter--escritorio)); margin: 0 auto; padding: 0 var(--gutter); }
.head { display: grid; gap: 16px; justify-items: center; max-width: 860px; margin: 0 auto var(--wp--preset--spacing--head); text-align: center; }
.head .lead { max-width: 620px; }

/* ===== Carrusel: grilla horizontal con snap; flechas y puntos los arma ds.js. .m-carrusel: grilla que en móvil pasa a carrusel ===== */
.carrusel { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * var(--gap)) / 3); gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.carrusel--2 { grid-auto-columns: calc((100% - var(--gap)) / 2); }
.carrusel::-webkit-scrollbar { display: none; }
.carrusel > * { scroll-snap-align: start; }
.carrusel-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 24px; }
.carrusel-nav--puntos { justify-content: center; }
.carrusel-nav[hidden] { display: none; }
.dots { display: flex; gap: 8px; }
.dots i { width: 8px; height: 8px; border-radius: 4px; background: #C3C7CC; cursor: pointer; transition: width .3s var(--e-salida), background .3s; }
.dots i.on { width: 24px; background: var(--blue); }
.sec--azul .dots i.on { background: #fff; } /* sobre azul el activo azul no se ve */
.flechas { display: flex; gap: 8px; }
.flechas span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r); border: 1px solid var(--wp--preset--color--line); color: var(--ink); font-size: 20px; cursor: pointer; transition: background var(--t-rapida), border-color var(--t-rapida), color var(--t-rapida), opacity var(--t-rapida); }
.flechas span[aria-disabled="true"] { opacity: .35; pointer-events: none; }
@media (hover: hover) {
	.carrusel { cursor: grab; } .carrusel.arrastra { cursor: grabbing; scroll-snap-type: none; user-select: none; } .carrusel.arrastra * { pointer-events: none; }
	.flechas span:is(:hover, .is-hover) { border-color: var(--blue); background: var(--blue); color: #fff; }
}

/* ===== Franja de logos: avanza sola (una vuelta cada 40 s), se detiene con el mouse. A color sobre claro (clientes/),
   blancos sobre oscuro (clientes-blanco/). Los SVG vienen en un lienzo común con su aire: el alto es el del lienzo ===== */
.franja { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.franja-track { display: flex; width: max-content; animation: franja 40s linear infinite; }
.franja:hover .franja-track { animation-play-state: paused; }
.franja-track img { height: var(--wp--custom--logo--cliente); width: auto; margin: 0 12px; }
@keyframes franja { to { transform: translateX(-50%); } }

/* ===== Entrada al aparecer: sube 24 px y se funde, una vez, 80 ms entre hermanos (ds.js marca .ap y observa) ===== */
.js-ap .ap:not(.visto) { opacity: 0; }
.js-ap .ap.visto { animation: ap var(--t-lenta) var(--e-salida) calc(var(--i, 0) * 80ms) both; }
@keyframes ap { from { opacity: 0; translate: 0 24px; } }

@media (prefers-reduced-motion: reduce) {
	.btn, .btn .i, .link, .link .i, .flechas span, .dots i { transition: none; }
	.franja-track { animation: none !important; }
}

/* ===== Móvil: lo secundario sale (la segunda frase la marca el build con .m-oculto), botones a todo el ancho,
   grillas de 3 o más a carrusel con la siguiente asomando ===== */
@media (max-width: 781px) {
	.m-oculto { display: none !important; }
	.btn { width: 100%; }
	.carrusel { grid-auto-columns: 85%; }
	.franja-track img { margin: 0 6px; }
	.m-carrusel { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 85%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
	.m-carrusel::-webkit-scrollbar { display: none; }
	.m-carrusel > * { scroll-snap-align: start; }
}

/* ===== c/c01-header.css ===== */
/* C01 Header (catálogo S01): barra de arriba navy (anuncio, Ingresar, idioma) y barra principal navy con la diagonal de
   Descartes (logo, menú con mega menú, Agendar demo). Pegado arriba; al bajar (.abajo, js/c01-header.js) la barra pasa a
   azul con un fundido. Sobre un hero de color ([data-hero-color]) es transparente hasta que se baja.
   Variante --demo: sin menú ni accesos; el anuncio va centrado y se va con el scroll (sólo la barra queda pegada).
   Bajo 1240 el menú pasa a un botón que abre un panel blanco a pantalla completa (con el idioma al pie) */

/* ===== Contenedor pegado arriba ===== */
.hdr { --hdr-dx: 64px; position: sticky; top: 0; z-index: 50; }

/* ===== Barra de arriba: anuncio a la izquierda, accesos a la derecha ===== */
.hdr-top { background: var(--ink); font-size: 14px; line-height: 1.4; color: var(--wp--preset--color--line); }
.hdr-top > .w { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 36px; }
.hdr-top a { transition: color var(--t-rapida); }
.hdr-anuncio { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hdr-anuncio a { margin-left: 8px; font-weight: 500; color: #fff; text-decoration: underline; text-underline-offset: 3px; } /* link de texto sobre oscuro: blanco */
.hdr-accesos { display: flex; align-items: center; gap: 12px; margin-left: auto; white-space: nowrap; }
.hdr-accesos .i { margin-right: 6px; font-size: 15px; vertical-align: -2px; }
.hdr-accesos li + li::before { content: "|"; margin-right: 12px; color: rgba(255, 255, 255, .4); }
/* Idiomas: el actual marcado con aria-current; en WordPress cada uno lleva a la traducción de la página (blocks/header) */
.hdr-idiomas a + a { margin-left: 10px; }
.hdr-idiomas a:not([aria-current]), .hdr-panel-idioma a:not([aria-current]) { opacity: .6; }
.hdr-idiomas a:hover, .hdr-panel-idioma a:hover { opacity: 1; }
.hdr-idiomas a[aria-current], .hdr-panel-idioma a[aria-current] { font-weight: 600; }

/* ===== Barra principal. La diagonal cruza la barra al medio entre el logo y el menú: --hdr-dx lo calcula el JS
   (la imagen va anclada a la derecha, de ancho max(100%, 1440)). El azul de .abajo es una capa encima que aparece con
   un fundido: entre dos fondos con imagen el navegador no interpola ===== */
.hdr-bar { position: relative; isolation: isolate; background: var(--diag-navy) right calc(-1 * var(--hdr-dx)) top / max(100%, 1440px) auto no-repeat, var(--ink); }
.hdr-bar::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--diag-azul) right calc(-1 * var(--hdr-dx)) top / max(100%, 1440px) auto no-repeat, var(--blue); opacity: 0; transition: opacity var(--t-media); }
.hdr.abajo .hdr-bar::before { opacity: 1; }
.hdr-bar > .w { display: flex; align-items: stretch; gap: 40px; height: 82px; }
.hdr-logo { display: flex; flex-shrink: 0; align-items: center; } /* sin esto el flex aplasta el logo cuando el menú queda justo */
.hdr-logo img { width: auto; height: 38px; } /* lockup Descartes Drivin (4:1), 38 de alto (Joaquín, 05-11); a 104 de ancho la tríada no se leía */

/* ===== Menú: cada ítem ocupa todo el alto de la barra, así el mouse baja al desplegable sin salir ===== */
.hdr-nav { display: flex; align-items: stretch; gap: 4px; margin: 0 auto 0 88px; }
.hdr-nav > li { display: flex; align-items: center; }
.hdr-nav > li > a, .hdr-item { display: inline-flex; align-items: center; height: 44px; padding: 0 14px; border-radius: var(--r); font: 500 16px/1 var(--wp--preset--font-family--body); color: #fff; transition: background var(--t-rapida); }
/* Ítem con submenú: el texto es un enlace a su página y la flecha el botón del desplegable (toque y teclado); sin espacio entre ambos, mide lo mismo que un solo botón */
.hdr-item { padding: 0; }
.hdr-item > a { display: inline-flex; align-items: center; height: 100%; padding-left: 14px; color: inherit; }
.hdr-item > button { display: inline-flex; align-items: center; height: 100%; padding: 0 14px 0 4px; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.hdr-item > button .i { font-size: 16px; transition: transform var(--t-media) var(--e-salida); }
.hdr-nav > li > a.on, .hdr-item > a.on { text-decoration: underline 2px var(--acento); text-underline-offset: 8px; }
.hdr-nav > li:is(:hover, :focus-within, .is-open) > :is(a, .hdr-item) { background: rgba(255, 255, 255, .12); }
.hdr-nav > li:is(:hover, :focus-within, .is-open) .hdr-item > button .i { transform: rotate(180deg); }

/* ===== Mega menú: panel blanco a todo el ancho bajo la barra (contexto .claro en el marcado).
   Links en columnas (--cols en el marcado) y a la derecha una tarjeta con foto y una promo ===== */
.menu { position: absolute; left: 0; right: 0; top: 100%; padding: 40px 0 48px; line-height: 1.4; background: #fff; border-bottom: 1px solid var(--wp--preset--color--line);
	opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--t-rapida), transform var(--t-media) var(--e-salida), visibility 0s var(--t-media); }
.hdr-nav > li:is(:hover, :focus-within, .is-open) > .menu { opacity: 1; visibility: visible; transform: none; transition: opacity var(--t-rapida), transform var(--t-media) var(--e-salida); }
.menu-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 48px; }
.menu-grid--solo { grid-template-columns: minmax(0, 1fr); }
.menu-links { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 4px 32px; align-content: start; }
.menu-col { display: grid; align-content: start; gap: 4px; }
.menu-col > small { margin: 0 0 8px 12px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8A9099; } /* rótulo de columna: gris medio fuera de la paleta, sólo aquí */
.menu-a { display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 2px 16px; padding: 12px; border-radius: var(--r); transition: background var(--t-rapida); }
.menu-a img { grid-row: span 2; width: 40px; height: 40px; padding: 5px; border-radius: var(--r); background: var(--wp--preset--color--panel); }
.menu-a b { font-size: 16px; font-weight: 700; color: var(--ink); }
.menu-a span { font-size: var(--wp--preset--font-size--small); line-height: 1.4; color: var(--text); }
.menu-a:not(:has(img)) { grid-template-columns: 1fr; padding: 9px 12px; }
.menu-a:not(:has(img)) b { font-weight: 500; }
.menu-a:is(:hover, :focus-visible) { background: var(--wp--preset--color--panel); }
.menu-dest { display: grid; gap: 16px; align-content: start; }
.menu-card { --c-link: #fff; position: relative; isolation: isolate; display: grid; align-content: end; gap: 14px; justify-items: start; min-height: 230px; padding: 24px; border-radius: var(--r); overflow: hidden; color: #fff; }
.menu-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--velo-pie); }
.menu-card img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-lenta) var(--e-salida); }
.menu-card b { max-width: 260px; font-size: var(--wp--preset--font-size--tarjeta); line-height: 1.3; font-weight: 700; }
.menu-card:hover img { transform: scale(1.04); }
.menu-promo { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px; border-radius: var(--r); background: var(--wp--preset--color--panel); }
.menu-promo p { font-weight: 700; line-height: 1.3; color: var(--ink); }

/* ===== Acciones y botón del menú móvil ===== */
.hdr-act { display: flex; align-items: center; gap: 16px; }
.hdr-burger { display: none; width: 44px; height: 44px; place-items: center; border: 0; border-radius: var(--r); background: none; color: #fff; font-size: 22px; cursor: pointer; }
.hdr-panel { display: none; }

@media (hover: hover) { .hdr-top a:hover { color: #fff; } }

/* ===== Variante --demo: anuncio centrado con flecha y una barra sólo con el logo. El anuncio no se queda pegado:
   el header sube su alto (top negativo) y queda sólo la barra ===== */
.hdr--demo { top: -36px; }
.hdr--demo .hdr-top > .w { display: grid; grid-template-columns: 1fr minmax(0, auto) 1fr; }
.hdr--demo .hdr-anuncio { grid-column: 2; display: flex; justify-content: center; align-items: center; gap: 14px; }
.hdr--demo .hdr-accesos { grid-column: 3; justify-self: end; }
.hdr--demo .hdr-anuncio a { display: inline-flex; align-items: center; gap: 4px; margin: 0; }
.hdr--demo .hdr-anuncio .i { font-size: 14px; }

/* ===== Header transparente sobre un hero de color: el JS marca .sobre-hero y le pone .hero-bajo-menu al hero, que sube
   detrás (el fondo del hero, con la diagonal continuada, lo pone su componente con --hdr-h y --hero-dx). Sólo la barra
   del menú: la franja de arriba queda navy siempre, también sobre un hero azul (Joaquín 2026-10-26) ===== */
/* La base queda transparente también abajo: el azul de .abajo (::before) aparece con un fundido y, si la base volviera a
   navy al instante, se veía navy durante el fundido */
.hdr.sobre-hero .hdr-bar { background: transparent; }
.hero-bajo-menu { margin-top: calc(-1 * var(--hdr-h, 0px)); }
/* Sobre un hero claro (celeste, data-hero-color="claro"): logo a color y menú en navy mientras está transparente; al bajar
   vuelve al azul con todo en blanco. El botón queda blanco con texto azul, que sobre celeste se lee igual */
.hdr.sobre-claro:not(.abajo, .abierto) .hdr-logo img { content: url("../ds/marca/logo-full.svg?v=4"); }
.hdr.sobre-claro:not(.abajo, .abierto) :is(.hdr-nav > li > :is(a, .hdr-item), .hdr-burger) { color: var(--ink); }
.hdr.sobre-claro:not(.abajo, .abierto) .hdr-nav > li:is(:hover, :focus-within, .is-open) > :is(a, .hdr-item) { background: rgba(1, 42, 73, .08); }

/* Entre 1241 y 1339 el menú completo no cabía junto al logo y "Agendar demo" (a 1101 se montaba 31 px con el logo
   anterior y 93 con el de Descartes Drivin; en PT, hasta 1290): el menú pasa a hamburguesa bajo 1240 y en este tramo
   se acortan el margen del menú, el gap de la barra y el padding de cada ítem */
@media (max-width: 1339px) {
	.hdr-bar > .w { gap: 24px; }
	.hdr-nav { margin-left: 32px; }
	.hdr-nav > li > a { padding: 0 10px; }
	.hdr-item > a { padding-left: 10px; }
	.hdr-item > button { padding-right: 10px; }
}

/* ===== Tablet y móvil: el menú pasa a un panel blanco a pantalla completa (barra con logo y X, y el panel) ===== */
@media (max-width: 1240px) {
	.hdr-nav, .hdr-act .btn, .hdr-anuncio { display: none; }
	.hdr-burger { display: grid; }
	.hdr-bar > .w { justify-content: space-between; align-items: center; height: 68px; }
	.hdr.abierto { z-index: 100; }
	.hdr.abierto .hdr-top { display: none; }
	.hdr-panel { position: fixed; inset: 0; top: var(--hdr-h, 104px); z-index: 49; display: none; overflow-y: auto; padding: 8px 20px 32px; background: #fff; line-height: 1.4; }
	.hdr.abierto .hdr-panel { display: grid; align-content: start; gap: 0; }
	.hdr-panel details, .hdr-panel > a { border-bottom: 1px solid var(--wp--preset--color--line); }
	.hdr-panel summary, .hdr-panel > a { display: flex; align-items: center; justify-content: space-between; padding: 18px 4px; font-size: 18px; font-weight: 500; color: var(--ink); list-style: none; cursor: pointer; }
	.hdr-panel summary::-webkit-details-marker { display: none; }
	.hdr-panel summary .i { transition: transform var(--t-media); }
	.hdr-panel details[open] summary .i { transform: rotate(180deg); }
	.hdr-panel details > div { display: grid; gap: 2px; padding: 0 0 16px; }
	.hdr-panel details > div a { padding: 10px 4px; font-size: 16px; color: var(--text); }
	/* Título con submenú: el texto lleva a su página (alto de toque de toda la fila) y el resto de la fila abre el submenú */
	.hdr-panel summary a { margin: -18px 0; padding: 18px 0; color: inherit; }
	.hdr-panel-pie { display: grid; gap: 12px; margin-top: 24px; }
	.hdr-panel-pie .btn { width: 100%; }
	.hdr-panel-idioma { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 0; font-size: 16px; color: var(--ink); }
	/* --demo: el anuncio sigue a la vista y la barra mantiene su alto hasta el corte de móvil */
	.hdr--demo .hdr-anuncio { display: flex; }
	.hdr--demo .hdr-bar > .w { height: 82px; }
}
/* --demo: sin espacio para el anuncio junto al selector, la barra de arriba queda sólo con el selector */
@media (max-width: 880px) { .hdr--demo .hdr-anuncio { display: none; } }
@media (max-width: 781px) {
	.hdr-top { font-size: 13px; }
	.hdr-top > .w { height: 32px; }
	.hdr-logo img { height: 30px; }
	.hdr--demo { top: -32px; }
	.hdr--demo .hdr-bar > .w { height: 68px; }
	.hdr--demo .hdr-logo img { width: auto; height: 32px; } /* la Demo aprobada lleva el logo a 32 de alto (69 de ancho), no a 88 de ancho */
}
@media (prefers-reduced-motion: reduce) {
	.hdr-bar::before, .hdr-nav > li > :is(a, .hdr-item), .hdr-item > button .i, .menu, .menu-a, .menu-card img, .hdr-panel summary .i { transition: none; }
}

/* ===== c/c02-hero-slider.css ===== */
/* C02 Hero slider (catálogo S02a): hero del Home. Fotos a todo el ancho con el velo de 3gtms.com, H1, bajada y CTA a la
   izquierda; 3 slides que se funden cada 7 s, puntos para saltar, pausa con el mouse o el foco (js/c02-hero-slider.js).
   En móvil el texto va abajo y centrado, con el velo desde el pie. Lleva data-sin-ap: la entrada es la del slide */

/* ===== Los slides se apilan en la misma celda y se funden ===== */
.hero-slider { position: relative; display: grid; background: var(--ink); overflow: hidden; }
.slide { position: relative; grid-area: 1 / 1; isolation: isolate; display: grid; align-items: center; min-height: 640px; padding: 96px 0 120px;
	opacity: 0; visibility: hidden; transition: opacity .9s var(--e-salida), visibility 0s .9s; } /* fundido lento entre fotos, más largo que la escala de movimiento */
.slide.is-on { opacity: 1; visibility: visible; transition: opacity .9s var(--e-salida); }
.slide::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--velo-foto); }
.slide > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.slide > .w { width: 100%; } /* como ítem de grilla, la .w con margen auto se encogía al texto */

/* ===== 2 columnas: texto y .hero-media. Vacía no ocupa lugar y el slide queda como el aprobado; con una imagen o un
   mockup de la app el texto va a la izquierda y la imagen a la derecha ===== */
.slide-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: center; }
.slide-cols:has(.hero-media :is(img, video)) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.hero-media:not(:has(img, video)) { display: none; }
.hero-media :is(img, video) { display: block; width: 100%; height: auto; max-height: 440px; object-fit: contain; }
.hero-media figure { margin: 0; }

/* ===== Texto: entra con el slide (título, bajada y CTA escalonados 80 ms) ===== */
.slide .hero-txt { display: grid; gap: 24px; justify-items: start; max-width: 640px; }
.slide .hero-txt .lead--hero { max-width: 540px; }
.slide.is-on .hero-txt > * { animation: ap var(--t-lenta) var(--e-salida) both; }
.slide.is-on .hero-txt > :nth-child(2) { animation-delay: 80ms; }
.slide.is-on .hero-txt > :nth-child(3) { animation-delay: 160ms; }
html.quieto .slide.is-on .hero-txt > * { animation: none; }

/* ===== Puntos: abajo a la izquierda, blancos sobre la foto ===== */
.slider-nav { position: absolute; left: 0; right: 0; bottom: 40px; z-index: 2; }
.hero-slider .dots i { background: rgba(255, 255, 255, .35); }
.hero-slider .dots i.on { background: #fff; }

@media (max-width: 781px) {
	.slide { min-height: 560px; padding: 64px 0 96px; align-items: end; }
	.slide::before { background: var(--velo-pie); }
	.hero-slider :is(.h1, .lead--hero) { margin-inline: auto; text-align: center; }
	.slide .hero-txt .ctas { width: 100%; justify-content: center; }
	.slide-cols:has(.hero-media :is(img, video)) { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.hero-media :is(img, video) { max-height: 240px; margin-inline: auto; }
	.slider-nav { bottom: 28px; }
}
@media (prefers-reduced-motion: reduce) {
	.slide, .slide.is-on { transition: none; }
}

/* ===== c/c03-hero-interior.css ===== */
/* C03 Hero interior (catálogo S02c): navy con la diagonal, etiqueta, H1, bajada, dos CTA (botón y link), foto cuadrada a
   la derecha y una fila de 4 íconos Solid WHITE al pie, separada por líneas. Es el hero de las páginas interiores
   (Industria). En móvil todo se centra y la foto pasa a 4:3 debajo del texto */
.hero { padding: 72px 0 32px; } /* abajo 32: la fila de íconos cierra la sección */
.hero > .w:first-child { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: center; }
.hero-txt { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; justify-items: start; max-width: 600px; }
.hero-txt .tag { margin-bottom: -8px; } /* la etiqueta va más pegada al H1 que el resto del ritmo */
.hero-txt .lead { max-width: 540px; }

/* Foto: cuadrada, alineada al borde derecho del contenedor */
.hero .media { justify-self: end; width: 100%; max-width: 620px; }
.hero .media-foto { overflow: hidden; aspect-ratio: 1 / 1; border-radius: var(--r); }
.hero .media-foto img { width: 100%; height: 100%; object-fit: cover; }
.js-ap .hero .media.ap.visto .media-foto img { animation: hero-foto 1.4s var(--e-salida) calc(var(--i, 0) * 80ms) both; }
@keyframes hero-foto { from { scale: 1.08; } }

/* Fila de íconos al pie: 4 columnas con divisor, ícono destacado (N9: 48) */
.beneficios { --bd: rgba(255, 255, 255, .24); display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 72px; border-top: 1px solid var(--bd); }
.beneficios li { display: flex; align-items: center; gap: 16px; padding: 28px 24px; font-weight: 500; line-height: 1.35; color: var(--c-tit); }
.beneficios li:first-child { padding-left: 0; }
.beneficios li + li { border-left: 1px solid var(--bd); }
/* 3 ítems (industrias que traen 3 íconos): tres columnas y cada ítem centrado en la suya, sin el hueco de la cuarta */
.beneficios:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
.beneficios:has(> li:nth-child(3):last-child) li { justify-content: center; padding-left: 24px; }
.beneficios img { flex: none; width: var(--wp--custom--icono--destacado); height: var(--wp--custom--icono--destacado); }

/* Hero de color bajo el header (contrato con c01-header): el JS del header le pone .hero-bajo-menu, le suma su alto al
   padding y publica --hdr-h y --hero-dx. El hero sube detrás del header transparente y la diagonal de sección se corre
   para seguir la línea del header: --hero-dx es dónde cae en el borde de abajo del header y sube tan(32°) = 0,62487
   por cada px de header (el margin-top negativo lo pone c01). Sin el script queda en -169 px. Misma regla en c04 */
[data-hero-color] { background: var(--diag-sec-navy) calc(var(--hero-dx, -169px) + .62487 * var(--hdr-h, 0px) - 2500px) top / 6000px 4000px no-repeat, var(--ink); }

@media (max-width: 1100px) {
	.hero > .w:first-child { gap: 48px; }
	.beneficios { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 781px) {
	.hero { padding-top: 40px; }
	/* minmax(0): una palabra larga del H1 (PT "regulamentações.") no ensancha la columna; se corta con overflow-wrap: anywhere del .h1 */
	.hero > .w:first-child { grid-template-columns: minmax(0, 1fr); }
	/* Centrado, como groundcloud en móvil: etiqueta, título, bajada y CTA */
	.hero-txt .tag { display: table; margin-left: auto; margin-right: auto; }
	.hero-txt :is(.h1, .lead) { margin-left: auto; margin-right: auto; text-align: center; }
	.hero-txt .ctas { justify-content: center; width: 100%; }
	.hero .media { justify-self: stretch; }
	.hero .media-foto { aspect-ratio: 4 / 3; }
	.beneficios, .beneficios:has(> li:nth-child(3):last-child) { grid-template-columns: 1fr; margin-top: 40px; }
	.beneficios li, .beneficios:has(> li:nth-child(3):last-child) li { justify-content: flex-start; padding: 16px 0; }
	.beneficios li + li { border-left: 0; border-top: 1px solid var(--bd); }
	.beneficios img { width: var(--wp--custom--icono--lista); height: var(--wp--custom--icono--lista); }
}

/* ===== Variantes del hero interior (catálogo S02, nuevas: no están en las 3 URLs base). Reusan la estructura de arriba
   (.hero-txt, .media, .media-foto) y sólo agregan lo que difiere =====
   --blanco (Soluciones, Plan Smart): sobre blanco, con migas en vez de etiqueta, la foto en su color y apaisada (5:4).
     El header queda en su color: no es un hero de color. Cierra con el padding de sección (no lleva la fila de íconos).
   --centrado (Industrias, Blog): azul con la diagonal, migas, H1, bajada y un botón, centrado y sin foto. Es hero de
     color: lleva data-hero-color y sube bajo el header transparente, con la diagonal azul continuada */

/* Migas: lo mismo que la etiqueta, más pegadas al H1. Link en el color de link del contexto, la página actual en texto */
.migas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: -8px; font-size: var(--wp--preset--font-size--small); line-height: 1.4; }
.migas a { color: var(--c-link); }
.migas .i { font-size: 14px; opacity: .6; }

.hero--blanco { padding-bottom: var(--wp--preset--spacing--sec); }
.hero--blanco .media-foto { aspect-ratio: 5 / 4; }
/* --solo (Partners, Referidos, Sostenibilidad): el navy con foto de Industria sin la fila de íconos: cierra con el padding de sección */
.hero--solo { padding-bottom: var(--wp--preset--spacing--sec); }
.hero--solo .media-foto { aspect-ratio: 5 / 4; }

.hero--centrado { padding-bottom: var(--wp--preset--spacing--sec); }
.hero--centrado > .w:first-child { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.hero--centrado .hero-txt { justify-items: center; max-width: 860px; }
.hero--centrado .hero-txt .lead { max-width: 620px; }
.hero--centrado[data-hero-color] { background: var(--diag-sec-azul) calc(var(--hero-dx, -169px) + .62487 * var(--hdr-h, 0px) - 2500px) top / 6000px 4000px no-repeat, var(--blue); }

@media (max-width: 781px) {
	.hero-txt .migas { justify-content: center; width: 100%; }
	.hero--blanco .media-foto { aspect-ratio: 4 / 3; }
}

/* --autor (archivo de autor F14): sin foto; LinkedIn con el compartir de borde de C22 */
.hero--centrado .hero-txt .hero-autor-redes { display: flex; justify-content: center; }
.hero-autor-redes a { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #fff; border-radius: var(--r); color: #fff; font-size: 22px; }

/* --video (S26 Hero con video: Por qué elegir Drivin, Go to Market): el --centrado con el video grande bajo el texto, la
   miniatura en su color y el play circular de C09 (80, azul; 56 en móvil) */
.hero--video .hero-video { position: relative; display: grid; place-items: center; width: 100%; max-width: 960px; margin-top: 56px; padding: 0; border: 0; border-radius: var(--r); overflow: hidden; aspect-ratio: 16 / 9; background: var(--ink); cursor: pointer; }
.hero-video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-video .play { position: relative; display: grid; place-items: center; width: 80px; height: 80px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 28px; transition: transform var(--t-media) var(--e-salida); }
.hero-video .play .i { fill: currentColor; margin-left: 4px; }
.hero-video iframe, .hero-video video { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; border: 0; background: #000; }
@media (hover: hover) { .hero-video:is(:hover, .is-hover) .play { transform: scale(1.06); } }
@media (max-width: 781px) {
	.hero--video .hero-video { margin-top: 40px; }
	.hero-video .play { width: 56px; height: 56px; font-size: 20px; }
}

/* --academy (Drivin Academy): el logo del programa sobre el H1, en blanco */
.hero-logo { width: 240px; height: auto; margin-bottom: 8px; }
.hero--centrado.hero--navy[data-hero-color] { background: var(--diag-sec-navy) calc(var(--hero-dx, -169px) + .62487 * var(--hdr-h, 0px) - 2500px) top / 6000px 4000px no-repeat, var(--ink); }

/* --celeste (índice de casos F11, Joaquín 2026-10-29): el fondo celeste del hero de groundcloud.com/solutions/driver-safety
   con la diagonal (.sec--celeste de base), texto en navy y la foto a 4:3. Es hero de color claro (data-hero-color="claro"): sube bajo el header transparente, que pasa a
   su versión clara (c01) */
.hero--celeste { padding-bottom: var(--wp--preset--spacing--sec); }
.hero--celeste[data-hero-color] { background: var(--diag-sec-celeste) calc(var(--hero-dx, -169px) + .62487 * var(--hdr-h, 0px) - 2500px) top / 6000px 4000px no-repeat, var(--wp--preset--color--sky); }
.hero--celeste .media-foto { aspect-ratio: 4 / 3; }

/* --recurso (ebook, webinar y podcast F12): la portada directamente en el espacio de la columna, sin marco y sin recortar */
.hero--recurso .media-foto { aspect-ratio: auto; }
.hero--recurso .media-foto img { height: auto; }
@media (max-width: 781px) { .hero--recurso .media-foto { aspect-ratio: auto; } }

/* ===== c/c04-form.css ===== */
/* C04 Formularios (catálogo S17b y S17a): navy con la diagonal, texto a la izquierda y el formulario en su caja
   blanca a la derecha (540 px). Tres variantes con la misma base:
   · --hero (Demo): es el hero de la página. H1, bajada, 4 ítems con ícono en 2 columnas y la franja de logos blancos al
     pie (c05 .logos--hero, por eso se importa su CSS). Va bajo el header transparente (data-hero-color, ver c03).
   · --agenda (Industria): sección con H2 de banda, bajada, "Te ayudamos a:" y 3 ítems en una columna. Sin eyebrow:
     sobre navy y azul no va (sólo sobre claro).
   · --centrado (ronda 4, 2026-10-26): banda navy contenida con la diagonal, H2 y bajada centrados y el formulario en
     una columna de 720 px directo sobre el fondo, con campos blancos.
   En móvil el formulario muestra nombre, apellido y email y el botón "Ver más campos" despliega el resto (js/c04-form.js) */

.con-form { position: relative; overflow: hidden; }
.con-form > .w:first-child { display: grid; grid-template-columns: 1fr 540px; gap: 72px; align-items: start; }
.con-form-txt { display: grid; }
.con-form-txt .lead { max-width: 560px; }
.con-form-items { display: grid; gap: 20px 32px; }
.con-form-items li { display: grid; grid-template-columns: auto 1fr; align-content: start; align-items: center; gap: 14px; font-weight: 500; line-height: 1.4; color: var(--c-tit); }
.con-form-items img { width: var(--wp--custom--icono--lista); height: var(--wp--custom--icono--lista); }

/* --hero: el padding de arriba lo pone el JS del header (su alto); el de la grilla deja aire bajo el menú */
.con-form--hero > .w:first-child { padding-top: 32px; padding-bottom: 88px; }
.con-form--hero .con-form-txt { gap: 28px; padding-top: 40px; }
.con-form--hero .con-form-items { grid-template-columns: 1fr 1fr; margin-top: 8px; }

/* --agenda: sección propia, sin el padding de .sec (el de la grilla es el de la P2 aprobada) */
.con-form--agenda > .w:first-child { padding-top: 100px; padding-bottom: 100px; }
.con-form--agenda .con-form-txt { gap: 24px; padding-top: 24px; }
.con-form-sub { margin-top: 8px; font-weight: 500; color: var(--c-tit); } /* subtítulo de la lista: blanco pleno, no el 85 % del párrafo */

/* Hero de color bajo el header: la misma regla que c03 (la diagonal sigue la línea del header) */
[data-hero-color] { background: var(--diag-sec-navy) calc(var(--hero-dx, -169px) + .62487 * var(--hdr-h, 0px) - 2500px) top / 6000px 4000px no-repeat, var(--ink); }

/* ===== Formulario: caja blanca (contexto .claro), 2 columnas; .campo--ancho ocupa las dos ===== */
.form-demo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: var(--pad); border: 1px solid #fff; border-radius: var(--r); background: #fff; line-height: 1.4; }
.form-demo > label { display: grid; gap: 6px; min-width: 0; font-size: var(--wp--preset--font-size--small); font-weight: 500; color: var(--c-tit); }
.form-demo input:not([type="checkbox"]), .form-demo select, .form-demo textarea { width: 100%; min-width: 0; height: 46px; padding: 0 14px; border: 1px solid var(--wp--preset--color--line); border-radius: var(--r); background: var(--wp--preset--color--panel); font: 400 var(--wp--preset--font-size--body)/1.4 var(--wp--preset--font-family--body); color: var(--c-txt); }
.form-demo ::placeholder { color: #8A9099; } /* el gris de placeholder de la guía y de P2; no hay token (ver reporte) */
.form-demo select { appearance: none; padding-right: 40px; }
.form-demo textarea { height: auto; padding: 10px 14px; resize: vertical; }
.campo--ancho { grid-column: 1 / -1; }
.campo-sel { position: relative; display: block; }
.campo-sel .i { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--c-tit); pointer-events: none; }
.form-legal { display: grid; gap: 8px; font-size: var(--wp--preset--font-size--small); line-height: 1.4; }
.form-check { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--c-tit); }
.form-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--blue); }
.form-demo .btn { margin-top: 4px; }
/* --centrado: sin caja, los campos blancos van sobre el navy; el texto de los campos vuelve a tinta */
.form-centrado .form-demo { max-width: 720px; margin: 0 auto; }
.form-demo--oscuro { gap: 20px 16px; padding: 0; border: 0; background: none; }
.form-demo--oscuro input:not([type="checkbox"]), .form-demo--oscuro select, .form-demo--oscuro textarea { border-color: #fff; background: #fff; color: var(--ink); }
.form-demo--oscuro .campo-sel .i { color: var(--ink); }
.form-demo--oscuro > .btn { justify-self: center; min-width: 240px; }
/* Rótulo de un grupo de campos (Referidos: tus datos y los del referido), como el grupo del FAQ */
.form-grupo { margin-top: 8px; font-size: var(--wp--preset--font-size--small); font-weight: 700; line-height: 1.4; letter-spacing: .06em; text-transform: uppercase; color: var(--c-tit); }
.form-grupo:first-child { margin-top: 0; }
/* "Ver más campos": sólo en móvil */
.form-mas { display: none; }

@media (max-width: 1100px) {
	.con-form > .w:first-child { grid-template-columns: 1fr; gap: 48px; }
	.con-form--hero .con-form-txt { padding-top: 16px; }
}
@media (max-width: 781px) {
	.con-form > .w:first-child { gap: 40px; }
	.con-form--hero > .w:first-child { padding-top: 24px; padding-bottom: 56px; }
	.con-form--agenda > .w:first-child { padding-top: 64px; padding-bottom: 64px; }
	/* El hero se centra, como el resto de los heros en móvil; los ítems quedan con el ícono arriba del texto */
	.con-form--hero .con-form-txt :is(.h1, .lead) { margin-left: auto; margin-right: auto; text-align: center; }
	.con-form--hero .con-form-items li { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
	.form-demo { grid-template-columns: 1fr; padding: var(--pad) 20px; }
	.form-demo--oscuro { padding: 0; }
	.form-demo--oscuro > .btn { width: 100%; }
	.form-demo input:not([type="checkbox"]), .form-demo select, .form-demo textarea { padding-left: 12px; }
	/* 3 campos a la vista: todo lo que sigue al botón se esconde hasta que se abre */
	.form-mas { display: flex; align-items: center; justify-content: center; gap: 8px; height: var(--wp--custom--boton--alto); border: 1px solid var(--blue); border-radius: var(--r); background: #fff; color: var(--blue); font: 500 16px/1 var(--wp--preset--font-family--body); cursor: pointer; }
	.form-mas:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
	.form-demo:not(.abierto) > .form-mas ~ * { display: none; }
	.form-demo.abierto > .form-mas { display: none; }
	.form-demo.abierto > .form-mas ~ * { animation: form-abre .35s var(--e-salida) both; }
}
@keyframes form-abre { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .form-demo.abierto > * { animation: none; } }

/* --descarga (ebook F12): dos columnas iguales, sin formulario (título, bajada y botón; lo que trae el recurso). Los ítems
   llevan el check del sprite en vez de un ícono de Descartes, en el tamaño de lista */
@media (min-width: 1101px) { .con-form--descarga > .w:first-child { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } }
.con-form--descarga .con-form-txt { padding-top: 0; }
.con-form--descarga .con-form-sub { margin-top: 0; }
.con-form-items > li > .i { width: var(--wp--custom--icono--lista); height: var(--wp--custom--icono--lista); color: var(--acento); }

/* ===== Foto de contacto en el texto (Drivin Academy): en su color, 4:3, en lugar de la lista "Te ayudamos a" ===== */
.con-form-foto { margin-top: 16px; aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; }
.con-form-foto img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 781px) { .con-form-foto { display: none; } }

/* ===== c/c05-logos.css ===== */
/* C05 Franja de logos (catálogo S03): una frase corta 20/700 centrada y los logos de cliente en movimiento (.franja de la
   base). Una sola pieza para los tres lugares donde va: sola bajo el hero de la Home (.logos, frase como <p>), como
   sección con título en Industria (.logos--titulo, frase como H3) y al pie del hero con formulario de la Demo
   (.logos--hero, dentro de c04, sobre navy con los logos de clientes-blanco/). La frase usa el rol .h4 */
.logos:not(.sec) { padding: 64px 0 120px; }
.logos-frase { margin-bottom: 32px; text-align: center; }


/* Al pie del hero con formulario (Demo). La frase es un título: sobre oscuro va blanca (--c-tit), como lo aprobado */
.logos.logos--hero { padding-bottom: 96px; }

@media (max-width: 781px) {
	.logos:not(.sec) { padding-bottom: 72px; }
	.logos.logos--hero { padding-bottom: 64px; }
}

/* Franja de una sola imagen con varios logos (Drivin Academy: instituciones educativas): más alta que un logo suelto */
.franja--ancha .franja-track img { height: 56px; margin: 0 32px; }
@media (max-width: 781px) { .franja--ancha .franja-track img { height: 40px; margin: 0 16px; } }

/* --alianzas (Sostenibilidad, S04 con botón): cada aliado en una tarjeta de panel con su logo a 56 de alto y el link
   "Descubre más". 5 en una fila; 3 bajo 1100 y 2 en móvil */
.alianzas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap); }
.alianzas li { display: grid; justify-items: center; gap: 20px; padding: 32px 20px 28px; border-radius: var(--r); background: var(--wp--preset--color--panel); }
.alianzas img { width: 100%; max-width: 180px; height: 56px; object-fit: contain; }
@media (max-width: 1100px) { .alianzas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 781px) { .alianzas { grid-template-columns: 1fr 1fr; } .alianzas li { padding: 24px 12px 20px; } }

/* --casos (Retoma): la franja con título de sección (H2 + bajada) y el enlace a los casos de éxito al pie */
.logos-ctas { justify-content: center; margin-top: 48px; }

/* ===== c/c06-modulos.css ===== */
/* C06 Grilla de módulos (catálogo S05a): banda navy con diagonal, H2 de sección centrado (54, no el de banda) con bajada
   y 6 tarjetas 3×2: foto en marco celeste, título de tarjeta, texto y "Conoce más". En móvil la grilla pasa a carrusel
   con puntos (.m-carrusel de la base) y salen la bajada y el texto de cada tarjeta. Se usa para presentar la plataforma
   por módulos */

/* La banda navy achica el H2 al de banda (46); aquí el título es el de una sección de contenido */
.modulos .h2 { font-size: var(--wp--preset--font-size--h-2); line-height: 1.16; letter-spacing: -.02em; }

.modulos-grilla { display: grid; gap: var(--gap); }
@media (min-width: 782px) { .modulos-grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 782px) and (max-width: 1100px) { .modulos-grilla { grid-template-columns: 1fr 1fr; } }

/* Tarjeta: blanca dentro de la banda oscura (contexto .claro), la foto arriba y el texto llenando el resto */
.modulo { display: grid; grid-template-rows: auto 1fr; border-radius: var(--r); overflow: hidden; background: #fff; }
/* Marco celeste: la foto entra con 28 de aire y se corta abajo (8 px de más, para que suba en el hover sin mostrar el fondo) */
.modulo-foto { display: block; aspect-ratio: 16 / 10; padding: 28px 28px 0; overflow: hidden; background: var(--sky); }
.modulo-foto img { width: 100%; height: calc(100% + 8px); border-radius: var(--r) var(--r) 0 0; object-fit: cover; transition: transform var(--t-lenta) var(--e-salida); }
.modulo-texto { display: grid; grid-template-rows: auto auto 1fr; align-content: start; gap: 10px; justify-items: start; padding: 24px 24px 28px; }
.modulo-texto .link { align-self: end; margin-top: 10px; }
.modulo:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
@media (hover: hover) {
	.modulo:is(:hover, .is-hover) .modulo-foto img { transform: translateY(-8px); }
	.modulo:is(:hover, .is-hover) .link .i { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) { .modulo-foto img, .modulo .link .i { transition: none; } }

@media (max-width: 781px) {
	.modulos .head .lead, .modulo-texto p { display: none; }
}

/* ===== Variante --vinetas (catálogo S05b, Soluciones): la misma banda navy y tarjeta blanca, con el ícono de línea
   Descartes de 56 en vez de la foto. A la vista sólo ícono, título y "Ver más"; la lista de viñetas se despliega con
   el mouse sobre la tarjeta (o el foco) y en táctil con un toque en "Ver más" (js/c06-modulos.js). Botón centrado al
   pie. Sin link por tarjeta ===== */
.modulos--vinetas .modulos-grilla { align-items: start; }
.modulos--vinetas .modulo { grid-template-rows: 1fr; }
.modulos--vinetas .modulo-texto { grid-template-rows: auto auto auto auto; gap: 16px; padding: var(--pad); }
.modulo-ico { width: var(--wp--custom--icono--beneficio); height: var(--wp--custom--icono--beneficio); }
/* "Ver más": el .link de la base hecho botón; la flecha baja gira al abrir */
.modulo-mas-btn { display: inline-flex; align-items: center; gap: 8px; padding: 0 0 4px; border: 0; border-bottom: 1px solid currentColor; background: none; font: 500 16px/1.2 var(--wp--preset--font-family--body); color: var(--c-link); cursor: pointer; }
.modulo-mas-btn .i { font-size: 18px; transition: transform var(--t-media) var(--e-salida); }
/* Despliegue: la fila de la grilla pasa de 0fr a 1fr (anima el alto real, sin max-height adivinado) y el contenido
   entra con un leve desplazamiento */
.modulo-mas { display: grid; grid-template-rows: 0fr; align-self: start; margin-top: -16px; transition: grid-template-rows var(--t-lenta) var(--e-salida), margin-top var(--t-lenta) var(--e-salida); }
.modulo-mas > div { min-height: 0; overflow: hidden; }
.modulo-mas .modulo-vinetas { opacity: 0; transform: translateY(-8px); transition: opacity var(--t-media) var(--e-salida), transform var(--t-lenta) var(--e-salida); }
.modulo.is-abierto .modulo-mas, .modulo:has(:focus-visible) .modulo-mas { grid-template-rows: 1fr; margin-top: 0; }
.modulo.is-abierto .modulo-vinetas, .modulo:has(:focus-visible) .modulo-vinetas { opacity: 1; transform: none; transition-delay: .1s; }
.modulo.is-abierto .modulo-mas-btn .i, .modulo:has(:focus-visible) .modulo-mas-btn .i { transform: rotate(180deg); }
@media (hover: hover) {
	.modulos--vinetas .modulo:is(:hover, .is-hover) .modulo-mas { grid-template-rows: 1fr; margin-top: 0; }
	.modulos--vinetas .modulo:is(:hover, .is-hover) .modulo-vinetas { opacity: 1; transform: none; transition-delay: .1s; }
	.modulos--vinetas .modulo:is(:hover, .is-hover) .modulo-mas-btn .i { transform: rotate(180deg); }
}
@media (prefers-reduced-motion: reduce) { .modulo-mas, .modulo-mas .modulo-vinetas, .modulo-mas-btn .i { transition: none; } }
/* Viñeta: el check de la pila (c13) en su versión para claro, círculo tint-blue con el trazo navy */
.modulo-vinetas { display: grid; align-content: start; gap: 10px; padding-top: 16px; border-top: 1px solid var(--wp--preset--color--line); }
.modulo-vinetas li { position: relative; padding-left: 28px; line-height: 1.4; }
.modulo-vinetas li::before { content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--wp--preset--color--tint-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23012A49' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat; }
.modulos-grilla ~ .ctas { justify-content: center; margin-top: 56px; }

/* ===== Variante --sin-foto (catálogo S05c, Plan Smart): 4 tarjetas blancas 2×2 sobre gris, ícono de línea de 56 a la
   izquierda y título y texto a su lado; sin link. Va sobre gris porque en Plan Smart la siguen la caja azul y la
   precede una sección blanca (ritmo de fondos). En móvil carrusel con puntos, ícono arriba y el texto visible
   (la segunda frase sale con .m-oculto) ===== */
@media (min-width: 782px) { .modulos--sin-foto .modulos-grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.modulos--sin-foto .modulo { grid-template-rows: 1fr; }
/* Sobre blanco (Plan Smart, cuando la sección anterior va en gris) las tarjetas pasan a panel, como el FAQ */
.sec:not(.sec--gris).modulos--sin-foto .modulo { background: var(--wp--preset--color--panel); }
.modulos--sin-foto .modulo-texto { grid-template-columns: var(--wp--custom--icono--beneficio) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 8px 24px; padding: var(--pad); }
.modulos--sin-foto .modulo-ico { grid-row: span 2; }

@media (max-width: 781px) {
	.modulo-ico { width: 48px; height: 48px; }
	.modulos--sin-foto .modulo-texto { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; gap: 16px; }
	.modulos--sin-foto .modulo-ico { grid-row: auto; }
	.modulos--sin-foto .modulo-texto p { display: block; }
}

/* Enlaces de un módulo sin foto (Sostenibilidad, "Te acompañamos en cada paso"): las funcionalidades de la etapa, una
   por línea, con el link de texto; ocupan la fila del párrafo */
.modulo-links { display: grid; gap: 8px; align-content: start; }
/* --impar (Retoma: 5 tarjetas en el 2×2): la última, si queda sola, ocupa la fila entera */
@media (min-width: 782px) { .modulos--impar .modulo:last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* ===== c/c07-filas.css ===== */
/* C07 Filas alternadas (catálogo S25): H2 de sección centrado y filas foto/texto que alternan de lado. El texto lleva
   eyebrow, título de fila (el H3 con el rol .h2--banda), párrafo y link; sobre cada foto va una pieza de detalle: una mini
   interfaz de la plataforma andando (rutas, soporte, torre de control, integraciones). Sirve para argumentar por razones */

.fila { display: grid; grid-template-columns: 1fr 1fr; gap: 96px; align-items: center; }
.fila + .fila { margin-top: 112px; }
.fila--inv .fila-texto { order: 2; }
.fila-texto { display: grid; gap: 20px; justify-items: start; max-width: 500px; }
.fila-texto > .eyebrow { margin-bottom: -10px; } /* el eyebrow va pegado al título: 10 px, no el gap de 20 */

/* Foto 4:3 con el detalle encima, que sobresale 32 px de la foto hacia afuera de la fila */
.fila .media { position: relative; }
.fila .media-foto { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; }
.fila .media-foto img { width: 100%; height: 100%; object-fit: cover; }
.js-ap .fila .media.ap.visto .media-foto img { animation: fila-foto 1.4s var(--e-salida) calc(var(--i, 0) * 80ms) both; }
@keyframes fila-foto { from { scale: 1.08; } }

/* ===== Detalle: tarjeta blanca de interfaz (texto de UI de 13, bajo la escala de contenido a propósito) ===== */
.detalle { position: absolute; z-index: 1; display: grid; gap: 8px; width: 240px; padding: 16px; border-radius: var(--r); background: #fff; font-size: 13px; line-height: 1.6; }
.detalle--sd { right: -32px; top: 32px; }
.detalle--bi { left: -32px; bottom: 32px; }
.detalle-h { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--ink); }
.detalle-h img { width: var(--wp--custom--icono--eyebrow); height: var(--wp--custom--icono--eyebrow); }
.detalle-h .vivo { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--text); }
.detalle-row { display: flex; justify-content: space-between; gap: 8px; }
.detalle-row em { font-style: normal; font-weight: 500; color: var(--ink); }
.prog { display: block; height: 6px; border-radius: 99px; background: var(--wp--preset--color--line); overflow: hidden; }
.prog > i { display: block; height: 100%; border-radius: 99px; background: var(--blue); }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 56px; }
.bars i { flex: 1; border-radius: 2px 2px 0 0; background: var(--blue); }
.bars i:nth-child(odd) { background: var(--acento); }

/* Punto "en vivo": late con un anillo que se abre */
.vivo { display: inline-flex; align-items: center; gap: 8px; }
.vivo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--acento); animation: fila-vivo 1.6s ease-out infinite; }
@keyframes fila-vivo { 0% { box-shadow: 0 0 0 0 rgba(0, 156, 235, .6); } 100% { box-shadow: 0 0 0 8px rgba(0, 156, 235, 0); } }

/* Rutas optimizadas: las barras oscilan cada una a su ritmo y el estado alterna "4 min" con "Calculando" */
.det-rutas .bars i { transform-origin: bottom; animation: fila-oscila var(--o, 1.8s) ease-in-out var(--od, 0s) infinite alternate; }
.det-rutas .bars i:nth-child(1) { --o: 1.7s; --od: -.4s; --m: .45; }
.det-rutas .bars i:nth-child(2) { --o: 2.3s; --od: -1.1s; --m: .6; }
.det-rutas .bars i:nth-child(3) { --o: 1.5s; --od: -.7s; --m: .35; }
.det-rutas .bars i:nth-child(4) { --o: 2.1s; --od: -1.6s; --m: .55; }
.det-rutas .bars i:nth-child(5) { --o: 1.9s; --od: -.2s; --m: .4; }
.det-rutas .bars i:nth-child(6) { --o: 2.5s; --od: -1.3s; --m: .65; }
@keyframes fila-oscila { from { transform: scaleY(1); } to { transform: scaleY(var(--m, .5)); } }
.det-estado { display: grid; justify-items: end; }
.det-estado span { grid-area: 1 / 1; font-weight: 500; color: var(--ink); animation: fila-estado-a 6s infinite; }
.det-estado .b { color: var(--blue); animation-name: fila-estado-b; }
@keyframes fila-estado-a { 0%, 68%, 90%, 100% { opacity: 1; } 72%, 86% { opacity: 0; } }
@keyframes fila-estado-b { 0%, 68%, 90%, 100% { opacity: 0; } 72%, 86% { opacity: 1; } }

/* Soporte local: 4 canales conectados al centro; cada nodo se enciende por turno y la onda del centro responde */
.det-red { width: 270px; }
.det-red svg { display: block; width: 100%; height: auto; overflow: visible; }
.det-red .linea { fill: none; stroke: #C3C7CC; stroke-width: 1.5; stroke-dasharray: 3 4; }
.det-red .nodo > circle { fill: #fff; stroke: #C3C7CC; stroke-width: 1.5; animation: fila-nodo 6s var(--d) infinite; }
.det-red .ui { fill: none; stroke: var(--blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.det-red .centro { fill: var(--wp--preset--color--tint-blue); }
.det-red .onda { fill: none; stroke: var(--acento); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: fila-onda 1.5s 1.08s ease-out infinite; opacity: 0; }
.det-red .paq { fill: var(--acento); }
@keyframes fila-nodo { 0%, 22%, 100% { stroke: #C3C7CC; } 2%, 16% { stroke: var(--blue); stroke-width: 2.5; } }
@keyframes fila-onda { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } }

/* Torre de Control (.anima): al verse, las barras de avance se llenan (ds.js le pone .en-vista) */
.anima.en-vista .prog > i { animation: fila-llena .9s .2s var(--e-salida) both; transform-origin: left; }
@keyframes fila-llena { from { transform: scaleX(0); } }

/* Tus sistemas, conectados: lista de integraciones con su punto vivo desfasado */
.det-con { width: 260px; }
.det-con ul { display: grid; gap: 8px; }
.det-con li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: var(--r); background: var(--wp--preset--color--panel); font-weight: 500; color: var(--ink); }
.det-con li span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 400; color: var(--blue); }
.det-con li span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--acento); animation: fila-vivo 1.6s ease-out infinite; animation-delay: var(--d, 0s); }

@media (prefers-reduced-motion: reduce) {
	.anima.en-vista .prog > i, .det-rutas .bars i, .det-estado span, .det-red *, .vivo::before, .det-con li span::before { animation: none !important; }
	.det-estado .b { display: none; }
}

@media (max-width: 1100px) { .fila { gap: 48px; } }
@media (max-width: 781px) {
	.fila { grid-template-columns: 1fr; gap: 32px; }
	.fila + .fila { margin-top: 64px; }
	.fila--inv .fila-texto { order: 0; }
	/* El detalle se mete dentro de la foto y la pisa por arriba o por abajo */
	.detalle { width: 200px; }
	.det-red, .det-rutas { width: 230px; }
	.det-con { width: 260px; }
	.detalle--sd { right: 12px; top: -20px; }
	.detalle--bi { left: 12px; bottom: -24px; }
	.fila .media:has(.det-red) .media-foto { aspect-ratio: 1; } /* el detalle de soporte es alto: la foto también, para que se siga viendo */
}

/* ===== Filas de texto + imagen (S27: Nosotros, Drivin Academy): la fila sin pieza de detalle. --contener muestra la
   imagen entera sobre panel (el mapa no se recorta a 4:3); .fila-lista es la lista del texto con viñeta azul ===== */
.fila .media-foto--contener { background: var(--wp--preset--color--panel); }
.fila .media-foto--contener img { object-fit: contain; padding: 24px; }
.fila-lista { display: grid; gap: 10px; padding-left: 22px; list-style: disc; line-height: 1.4; }
.fila-lista li::marker { color: var(--blue); }

/* ===== c/c08-cifras.css ===== */
/* C08 Cifras (catálogo S08): H2 de sección, 3 cifras planas en light blue que cuentan al verse, cada una con su ícono de
   línea recortado a 49 de alto a la izquierda y el texto que la nombra debajo, y un botón centrado. Como "Numbers that
   drive confidence" de groundcloud.com. En móvil no pasan a carrusel: son tres datos que se leen juntos y van apiladas */

.cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: 1100px; margin: 0 auto; }
.cifra { display: flex; justify-content: center; align-items: center; gap: 24px; }
/* El dibujo recortado (descartes-recorte/) a 49 de alto, el ancho por su proporción con tope 60 (regla 88.4) */
.cifra .ico { flex: none; width: auto; max-width: 60px; height: var(--wp--custom--icono--cifra); }
.cifra > div { display: grid; }
.cifra b { font-size: var(--wp--preset--font-size--cifra); line-height: 1.14; font-weight: 700; letter-spacing: -.02em; color: var(--acento); }
.cifra p { font-size: var(--wp--preset--font-size--body); line-height: 1.4; color: var(--c-txt); }
/* La frase que algunas páginas ponen antes del número ("Economize até 20%", driv.in/pt): el mismo cuerpo que el texto */
.cifra-pre { font-size: var(--wp--preset--font-size--body); line-height: 1.4; color: var(--c-txt); }
@media (min-width: 782px) { .cifras:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; } } /* dos cifras: centradas */
.cifras + .ctas { justify-content: center; margin-top: 56px; }

/* En tablet siguen 3 en fila (medido: a 800 px entran sin desbordar); pasar a 2 dejaba la tercera sola en su fila.
   Sólo 4 o más cifras bajan a 2 */
@media (max-width: 1100px) { .cifras:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 781px) {
	/* Un bloque angosto (el ancho de la fila más larga) centrado, con las filas alineadas entre sí: centrar cada fila
	   por separado dejaba las cifras en escalera */
	.cifras { grid-template-columns: minmax(0, 1fr); gap: 32px; width: fit-content; }
	.cifra { display: grid; grid-template-columns: 64px auto; justify-content: flex-start; }
	/* 44/56 es la proporción 49/68 de escritorio. El ícono ocupa 2 filas: la segunda, vacía, suma 24 de aire bajo el
	   texto y el ícono queda centrado en el bloque entero (así se aprobó) */
	.cifra .ico { grid-row: span 2; justify-self: end; max-width: 64px; height: 44px; }
	.cifra b { font-size: 56px; } /* la cifra del ROI baja a 56, no a la de 44 del token */
	.cifra p { width: 9.5em; text-wrap: balance; } /* ancho fijo: el texto en dos líneas y el bloque no cambia de ancho */
}

/* ===== Variante --oscuro (catálogo S08b, Soluciones): las mismas cifras en fila de 4 sobre la banda azul con su
   diagonal (Joaquín 2026-10-26: azul en vez de navy). El ícono es el Solid WHITE
   recortado (descartes-recorte-blanco/, mismo recorte que el de línea) y la cifra toma el realce de oscuro (sky).
   La bajada sale en móvil (.m-oculto) ===== */
.cifras--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; }
.on-dark .cifra b { color: var(--c-hl); }
/* Con 4 en fila un texto puede ir en 2 líneas: las cifras se alinean arriba y el ícono queda centrado en la cifra
   (alto de línea 77,5 − 49 = 28,5 → 14) */
@media (min-width: 782px) { .cifras--4 .cifra { align-items: flex-start; } .cifras--4 .cifra .ico { margin-top: 14px; } }
@media (max-width: 1100px) { .cifras--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 781px) { .cifras--4 { grid-template-columns: minmax(0, 1fr); } }

/* ===== c/c09-caja-azul.css ===== */
/* C09 Caja azul (catálogo S04 + S10 + S16): el bloque azul con diagonal (.caja de la base) del ancho del contenedor,
   dentro de una sección blanca sin padding propio (.sec--sin-padding). Dos variantes:
   --mapa (Home): título, bajada y botón a la izquierda, mapa My Maps de 440×330 a la derecha y abajo la fila
   "se conecta con tu ERP" con los logos en tarjetas blancas.
   --video (Demo): H2 centrado, tarjeta blanca con el texto y la miniatura del video con el play, y el botón centrado.
   --producto (Plan Smart, nueva): el texto de --mapa a la izquierda y a la derecha una foto real, sin marco (Joaquín,
   2026-10-23), con la pieza "Tus sistemas, conectados" encima: nunca captura de la plataforma (Ronda 05).
   Llamado de eficiencia que mezcla prueba (dónde operamos, con qué se integra, el video) con la acción */

/* Base de las dos: el botón va blanco sobre el azul y en el hover pasa a celeste con texto navy */
@media (hover: hover) { .caja-azul .btn--primario:is(:hover, .is-hover) { background: var(--sky); border-color: var(--sky); color: var(--ink); } }

/* ===== --mapa: texto | mapa, y la fila de ERPs a todo el ancho con su divisor ===== */
.caja-azul--mapa .caja { display: grid; grid-template-columns: 1fr 660px; align-items: center; gap: 24px; padding: 64px 0 64px 72px; }
.caja-texto { display: grid; justify-items: start; gap: 20px; }
.caja-texto .lead { max-width: 520px; }
.caja-texto .btn { margin-top: 8px; }
/* El mapa queda más chico que su columna (440 en la de 660) para no quitarle protagonismo al texto */
.caja-mapa { justify-self: center; width: 440px; height: 330px; margin-right: 72px; border-radius: var(--r); overflow: hidden; background: #fff; }
.caja-mapa iframe { display: block; width: 100%; height: 100%; border: 0; }
.caja-mapa img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Zonas: títulos con su texto bajo el H2, cuando la caja lleva una imagen en lugar del mapa interactivo */
.caja-zonas { display: grid; gap: 20px; max-width: 520px; }
.caja-zonas h3 { margin-bottom: 4px; }
.caja-erp { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 32px; margin: 16px 72px 0 0; padding-top: 32px; border-top: 1px solid rgba(255, 255, 255, .22); }
.caja-erp p { max-width: 260px; font-size: var(--wp--preset--font-size--lead); line-height: 1.4; font-weight: 500; color: #fff; }
.caja-erp-logos { display: flex; gap: 12px; }
.caja-erp-logos span { display: grid; place-items: center; width: 116px; height: 60px; padding: 12px 18px; border-radius: var(--r); background: #fff; }
.caja-erp-logos img { width: 100%; height: 100%; object-fit: contain; }

/* ===== --video: H2 centrado, tarjeta blanca texto | miniatura, botón centrado ===== */
.caja-azul--video .caja { padding: 64px 72px; }
.caja-video { display: grid; grid-template-columns: 1fr auto; align-items: center; max-width: 960px; margin: 0 auto 56px; padding: 40px 32px 40px 56px; border-radius: var(--r); background: #fff; }
.caja-video .lead { padding-right: 32px; color: var(--ink); }
.caja-video .h3 { color: var(--ink); } /* H3 de la escala: un paso bajo el H2 de la caja (46 → 32, móvil 32 → 24) */
.caja-video-foto { position: relative; display: grid; place-items: center; width: 400px; aspect-ratio: 3 / 2; border-radius: var(--r); overflow: hidden; }
.caja-video-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* El play es un círculo (como el avatar, la otra excepción al radio de 4) */
.caja-video-foto iframe, .caja-video-foto video { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; border: 0; background: #000; }
.caja-video .play { position: relative; display: grid; place-items: center; width: 80px; height: 80px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 28px; }
.caja-video .play .i { fill: currentColor; margin-left: 4px; }
.caja-video:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
.caja-azul--video .ctas { justify-content: center; margin-top: 40px; }

/* ===== --producto: texto | foto con la pieza de integraciones encima ===== */
.caja-azul--producto .caja { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; gap: 64px; padding: 64px 104px 64px 72px; }
.caja-producto { position: relative; }
/* La foto sola, en su color (no es hero), sin el marco celeste de C06 */
.caja-producto-foto { aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; }
.caja-producto-foto img { width: 100%; height: 100%; object-fit: cover; }
/* Pieza de interfaz: la de "Tus sistemas, conectados" de C07 (texto de UI de 13, bajo la escala a propósito, como allá).
   Copia acotada a esta variante mientras .detalle no suba a la base: sobresale 32 px del marco hacia afuera */
.caja-det { position: absolute; z-index: 1; right: -32px; top: 32px; display: grid; gap: 8px; width: 260px; padding: 16px; border-radius: var(--r); background: #fff; font-size: 13px; line-height: 1.6; }
.caja-det-h { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--ink); }
.caja-det-h img { width: var(--wp--custom--icono--eyebrow); height: var(--wp--custom--icono--eyebrow); }
.caja-det ul { display: grid; gap: 8px; }
.caja-det li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: var(--r); background: var(--wp--preset--color--panel); font-weight: 500; color: var(--ink); }
.caja-det li span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 400; color: var(--blue); }
.caja-det li span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--acento); animation: caja-vivo 1.6s ease-out var(--d, 0s) infinite; }
@keyframes caja-vivo { 0% { box-shadow: 0 0 0 0 rgba(0, 156, 235, .6); } 100% { box-shadow: 0 0 0 8px rgba(0, 156, 235, 0); } }
@media (prefers-reduced-motion: reduce) { .caja-det li span::before { animation: none; } }
html.quieto .caja-det li span::before { animation: none; }

@media (max-width: 1100px) {
	.caja-azul--mapa .caja { grid-template-columns: 1fr; gap: 40px; padding: 56px 40px 40px; }
	.caja-mapa { margin-right: 0; }
	.caja-erp { flex-direction: column; align-items: flex-start; margin: 0; }
	.caja-erp p { max-width: none; }
	.caja-erp-logos { flex-wrap: wrap; }
	.caja-video { grid-template-columns: 1fr; gap: 32px; }
	.caja-video-foto { justify-self: center; width: 100%; max-width: 400px; }
	.caja-azul--producto .caja { grid-template-columns: 1fr; gap: 56px; padding: 56px 40px 40px; }
	.caja-det { right: 16px; top: -24px; }
}
@media (max-width: 781px) {
	.caja-azul--mapa .caja { padding: 40px 24px 28px; }
	.caja-mapa { width: 100%; height: 280px; }
	.caja-erp-logos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
	.caja-erp-logos span { width: auto; height: 52px; padding: 10px 12px; }
	.caja-azul--video .caja { padding: 40px 20px; }
	.caja-video { grid-template-columns: minmax(0, 1fr); margin-bottom: 40px; padding: 28px 24px 24px; }
	.caja-video .play { width: 56px; height: 56px; font-size: 20px; }
	/* La pieza (4 filas) baja a su lugar bajo la foto, montada 48 px sobre ella: encima la tapaba entera */
	.caja-azul--producto .caja { gap: 48px; padding: 40px 24px 24px; }
	.caja-det { position: relative; right: auto; top: auto; width: 248px; margin: -48px 12px 0 auto; }
}

/* ===== Variante --app (Go to Market): el --producto con un mockup recortado en vez de la foto con detalle: va entero y
   sin marco, centrado en su columna ===== */
.caja-app { display: grid; place-items: center; }
.caja-app img { width: 100%; max-width: 420px; height: auto; }
@media (max-width: 781px) { .caja-app img { max-width: 300px; } }
/* La caja --app va antes del formulario (navy): lleva el aire de sección abajo para no quedar pegada a la banda */
.caja-azul--app { padding-bottom: var(--wp--preset--spacing--sec); }

/* ===== c/c10-seguridad.css ===== */
/* C10 Banda de seguridad (catálogo S12a): banda navy contenida con diagonal. A la izquierda el H2 de banda, el sello
   ISO y el botón de descarga; a la derecha 3 ítems con ícono Solid WHITE de Descartes (48, destacado, N9), título y
   párrafo. En móvil se apila y el párrafo de cada ítem sale (.m-oculto) */
.segur { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 80px; align-items: center; }
.segur-txt { display: grid; gap: 24px; justify-items: start; }
/* Sello: el SVG va sobre su placa blanca de 56 (el sello no se lee sobre navy) */
.segur-sello { display: flex; align-items: center; gap: 16px; line-height: 1.4; }
.segur-sello img { width: 56px; height: 56px; padding: 6px; border-radius: var(--r); background: #fff; }
.segur-sello b { display: block; font-weight: 500; color: var(--c-tit); }
/* Ítems: ícono en una columna de 64 que ocupa las dos filas (título y párrafo), divisores blancos al 18 % */
.segur-lista li { display: grid; grid-template-columns: 64px 1fr; gap: 6px 24px; align-items: start; padding: 28px 0; border-top: 1px solid rgba(255, 255, 255, .18); }
.segur-lista li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .18); }
.segur-ico { grid-row: span 2; width: var(--wp--custom--icono--destacado); height: var(--wp--custom--icono--destacado); margin: 8px; object-fit: contain; }
@media (max-width: 1100px) { .segur { gap: 48px; } }
@media (max-width: 781px) {
	.segur { grid-template-columns: 1fr; }
	.segur-lista li { grid-template-columns: 56px 1fr; gap: 4px 16px; padding: 22px 0; }
	.segur-ico { margin: 4px; }
}

/* ===== c/c11-reviews.css ===== */
/* C11 Reviews (catálogo S13 + S14): H2 centrado, carrusel de testimonios de 2 por vista con puntos y flechas, botón a
   los casos de éxito y los verificados (título de banda y sellos a la izquierda, 2 reseñas con estrellas a la derecha).
   Es la misma sección en Home, Demo e Industria. Las tarjetas van en panel sobre blanco y en blanco sobre gris */

/* ===== Testimonio: logo del cliente, cita y pie con avatar ===== */
.testi { display: grid; grid-template-rows: 48px 1fr auto; gap: 24px; padding: var(--pad); border-radius: var(--r); background: var(--wp--preset--color--panel); }
.testi > img { height: var(--wp--custom--logo--tarjeta); width: auto; max-width: 150px; object-fit: contain; object-position: left center; }
/* Título propio del testimonio, cuando la página de origen lo trae */
.testi--titulo { grid-template-rows: 48px auto 1fr auto; }
.testi-tit { font-size: var(--wp--preset--font-size--tarjeta); font-weight: 700; line-height: 1.4; color: var(--ink); }
.testi blockquote { font-size: 18px; line-height: 1.55; color: var(--ink); }
.testi footer { display: flex; align-items: center; gap: 14px; padding-top: 20px; line-height: 1.4; border-top: 1px solid var(--wp--preset--color--line); font-size: var(--wp--preset--font-size--small); }
.testi footer img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.testi footer b { display: block; font-size: 16px; color: var(--ink); }
.reviews-casos { display: flex; justify-content: center; margin-top: 40px; }

/* ===== Verificados: cabecera (título y sellos) más ancha que cada reseña ===== */
.verif { display: grid; grid-template-columns: minmax(0, 1.2fr) 1fr 1fr; gap: var(--gap); align-items: stretch; margin-top: 96px; }
/* Sin testimonios arriba (industrias que no tienen) los verificados abren la sección: sin el margen de separación */
.w > .verif:first-child { margin-top: 0; }
/* Sin reseñas (versiones PT/EN, que en driv.in sólo muestran los sellos): título y sellos en una fila */
.verif:not(:has(.cita)) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; }
.verif:not(:has(.cita)) .verif-head { display: contents; }
.verif-head { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 28px; padding-right: 32px; }
.sellos { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.sellos img { height: var(--wp--custom--logo--sello); width: auto; }
/* Las reseñas comparten filas (subgrid): estrellas, cita y firma parten a la misma altura aunque una firma ocupe 2 líneas */
.verif-head { grid-row: span 3; }
.cita { display: grid; grid-row: span 3; grid-template-rows: subgrid; gap: 16px; padding: var(--pad); border-radius: var(--r); background: var(--wp--preset--color--panel); }
.estrellas { display: flex; align-items: center; gap: 3px; color: var(--acento); font-size: 20px; }
.estrellas .i { fill: currentColor; stroke: none; }
.estrellas span { margin-left: 8px; line-height: 1.4; font-size: var(--wp--preset--font-size--small); font-weight: 500; color: var(--ink); }
.cita blockquote { font-size: 18px; line-height: 1.5; color: var(--ink); }
.cita footer { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; line-height: 1.4; font-size: var(--wp--preset--font-size--small); }
.cita footer b { color: var(--ink); }
.sec--gris :is(.testi, .cita) { background: #fff; }

@media (max-width: 1100px) {
	.verif { grid-template-columns: 1fr 1fr; }
	.verif-head { grid-column: 1 / -1; grid-row: auto; padding-right: 0; margin-bottom: 8px; }
}
@media (max-width: 781px) {
	.verif { grid-template-columns: 1fr; margin-top: 64px; }
	.verif-head { gap: 20px; }
	.sellos { gap: 16px; }
}

/* ===== c/c12-cta.css ===== */
/* C12 Banda CTA (catálogo S09a): navy a todo el ancho con diagonal, H2 de banda centrado, bajada y un botón.
   Va al final de la página, antes del footer */
.cta { display: grid; gap: 20px; justify-items: center; text-align: center; }
.cta .lead { max-width: 620px; }

/* --foto (Industrias, nueva): la última invitación antes del footer sobre una foto con el tratamiento Descartes (llamado
   sobre foto), a todo el ancho, con el velo de 3gtms.com desde la izquierda y el texto encima a la izquierda, como el
   hero. Botón relleno azul (sobre foto). En móvil el velo sube desde el pie y el texto va abajo y centrado */
.cta-banda--foto { position: relative; isolation: isolate; display: grid; align-items: center; min-height: 480px; background: var(--ink); overflow: hidden; }
.cta-banda--foto > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.cta-banda--foto::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--velo-foto); }
.cta-banda--foto > .w { width: 100%; } /* como ítem de grilla, la .w con margen auto se encogía al texto */
.cta--izq { justify-items: start; max-width: 560px; text-align: left; }

@media (max-width: 781px) {
	.cta-banda--foto { min-height: 520px; align-items: end; } /* con 420 el texto quedaba sobre la parte clara de la foto, fuera del velo */
	.cta-banda--foto::before { background: var(--velo-pie); }
	.cta--izq { justify-items: center; max-width: none; text-align: center; }
}

/* ===== c/c13-pila.css ===== */
/* C13 Pila de tabs (catálogo S07, "Te ayudamos a obtener"): banda azul con diagonal. A la izquierda el H2 de banda,
   el botón blanco y una foto por tab (cambia con el tab abierto); a la derecha la pila de 6 tarjetas superpuestas en
   los tonos --wp--custom--pila--* (claro a oscuro: el 4° es #003F7F, un tono más oscuro que la banda).
   Una tarjeta abierta a la vez: js/c13-pila.js. En móvil: título, foto, pila (sólo la frase del tab) y botón */
.tabs { --btn-hover: var(--sky); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 620px); column-gap: 80px; align-items: start; }
.tabs-izq { display: grid; gap: 28px; justify-items: start; }

/* ===== Foto por tab: todas apiladas en la misma zona, sólo la .is-on se ve (sube 14 px y se funde) ===== */
.mock-zona { position: relative; width: 100%; aspect-ratio: 4 / 3; }
.mock { position: absolute; inset: 0; border-radius: var(--r); overflow: hidden; opacity: 0; transform: translateY(14px); transition: opacity .35s, transform .5s var(--e-salida); pointer-events: none; }
.mock.is-on { opacity: 1; transform: none; pointer-events: auto; }
.mock img { width: 100%; height: 100%; object-fit: cover; }

/* ===== Pila: cada tarjeta sube 18 px sobre la anterior. --c fondo, --t título, --tl lista, --bd divisor ===== */
.pila-item { --c: var(--wp--custom--pila--uno); --t: var(--ink); --tl: var(--text); --bd: rgba(1, 42, 73, .18); position: relative; margin-top: -18px; border-radius: var(--r); background: var(--c); color: var(--t); transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.pila-item:first-child { margin-top: 0; }
.pila-item:not(:last-child) { padding-bottom: 18px; } /* la tarjeta siguiente tapa estos 18 px */
.pila-item:nth-child(2) { --c: var(--wp--custom--pila--dos); }
.pila-item:nth-child(3) { --c: var(--wp--custom--pila--tres); }
.pila-item:nth-child(4) { --c: var(--wp--custom--pila--cuatro); }
.pila-item:nth-child(5) { --c: var(--wp--custom--pila--cinco); }
.pila-item:nth-child(6) { --c: var(--wp--custom--pila--seis); }
.pila-item:nth-child(-n+3) { --tl: var(--ink); }
.pila-item:nth-child(n+4) { --t: #fff; --tl: var(--wp--custom--lista-oscuro); --bd: rgba(255, 255, 255, .28); }
/* Cabecera del tab: título 20/700 también en móvil (N3, como lo aplica el gate) y la flecha en su cuadro blanco, que gira al abrir */
.pila-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 18px 18px 18px 28px; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; font: 700 var(--wp--preset--font-size--tarjeta)/1.2 var(--wp--preset--font-family--body); letter-spacing: -.015em; }
.pila-head b { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: var(--r); background: #fff; color: var(--blue); font-size: 20px; transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.pila-head:focus-visible { outline-offset: -4px; border-radius: var(--r); }
.pila-item.is-open .pila-head { cursor: default; }
.pila-item.is-open .pila-head b { transform: rotate(90deg); }
/* Cuerpo: se abre animando la fila de la grilla de 0fr a 1fr */
.pila-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--e-salida); }
.pila-body > div { min-height: 0; overflow: hidden; padding: 0 28px; opacity: 0; transition: opacity .25s, padding .55s; }
.pila-item.is-open .pila-body { grid-template-rows: 1fr; }
.pila-item.is-open .pila-body > div { padding-top: 4px; padding-bottom: 30px; opacity: 1; transition: opacity .35s .15s, padding .55s; }
.pila-lead { font-size: 18px; line-height: 1.4; font-weight: 500; color: var(--t); text-wrap: balance; }
.pila-body p + p { margin-top: 8px; }
.pila ul { display: grid; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--bd); }
.pila li { position: relative; padding-left: 26px; line-height: 1.4; color: var(--tl); }
.pila li::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23012A49' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 10px no-repeat; }

@media (hover: hover) { .pila-item:not(.is-open):is(:hover, .is-hover) { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .mock, .pila-item, .pila-head b, .pila-body, .pila-body > div { transition: none; } }
@media (max-width: 1100px) { .tabs { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); column-gap: 48px; } }
@media (max-width: 781px) {
	.tabs { grid-template-columns: 1fr; row-gap: 24px; }
	.tabs-izq { display: contents; }
	.tabs .btn { order: 3; }
	.mock-zona { aspect-ratio: 1; }
	.pila-head { padding: 14px 14px 14px 20px; }
	.pila-head b { width: 38px; height: 38px; font-size: 18px; }
	.pila-body > div { padding: 0 20px; }
	.pila-item.is-open .pila-body > div { padding-top: 2px; padding-bottom: 24px; }
	.pila ul { display: none; }
}

/* ===== c/c14-beneficios.css ===== */
/* C14 Beneficios con íconos (catálogo S15a): H2 y botón a la izquierda (quedan fijos al bajar en escritorio), lista
   de beneficios con ícono de línea Descartes de 56 (N9) en 2 columnas a la derecha. En móvil se apila, una columna e
   íconos de 48 */
.benef { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 80px; align-items: start; }
.benef-txt { position: sticky; top: 150px; display: grid; gap: 24px; justify-items: start; } /* 150: bajo el header fijo */
.benef-lista { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 48px; }
.benef-lista li { display: grid; grid-template-columns: var(--wp--custom--icono--beneficio) 1fr; gap: 6px 18px; align-items: center; line-height: 1.4; }
.benef-lista img { grid-row: span 2; width: var(--wp--custom--icono--beneficio); height: var(--wp--custom--icono--beneficio); }
.benef-lista b { font-size: var(--wp--preset--font-size--tarjeta); font-weight: 500; line-height: 1.3; color: var(--c-tit); }
@media (max-width: 1100px) { .benef { gap: 48px; } }
@media (max-width: 781px) {
	.benef { grid-template-columns: 1fr; }
	.benef-txt { position: static; }
	.benef-lista { grid-template-columns: 1fr; gap: 24px; }
	.benef-lista li { grid-template-columns: 48px 1fr; }
	.benef-lista img { width: 48px; height: 48px; }
}

/* ===== Variante --texto (catálogo S15b, Plan Smart): a la izquierda H2, bajada y botón (fijos al bajar); a la derecha
   3 ítems en una columna, cada uno con ícono de 56, título de tarjeta y su texto. El ícono se alinea con el título,
   no con el centro del bloque ===== */
.benef--texto .benef-lista { grid-template-columns: minmax(0, 1fr); gap: 40px; }
.benef--texto .benef-lista li { align-items: start; }
.benef--texto .benef-lista p { color: var(--c-txt); }
.benef--texto .benef-lista li > .link { grid-column: 2; justify-self: start; } /* un enlace bajo el texto del ítem, no en la columna del ícono */
@media (max-width: 781px) { .benef--texto .benef-lista { gap: 32px; } }

/* ===== Variante --cajas (propuesta para reemplazar --texto en Plan Smart, Joaquín 2026-10-26): H2 de sección y
   bajada centrados, las 3 ventajas en cajas de 3 columnas y el botón centrado al pie. En móvil carrusel con puntos.
   Es la tarjeta de C18 sobre gris (foto en su color en el marco celeste, título y texto) ===== */
.benef-grilla { display: grid; gap: var(--gap); }
@media (min-width: 782px) { .benef-grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.benef-cajas .benef-grilla ~ .ctas { justify-content: center; margin-top: 56px; }
/* Variante --pasos (S27, Partners): las mismas cajas, 4 en fila con la etiqueta del paso sobre el título (2 por fila
   entre 782 y 1100) */
@media (min-width: 1101px) { .benef-grilla--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 782px) and (max-width: 1100px) { .benef-grilla--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.benef-caja-txt .tag { justify-self: start; }
.benef-caja { display: grid; grid-template-rows: auto 1fr; border-radius: var(--r); overflow: hidden; background: #fff; }
.benef-foto { display: block; aspect-ratio: 16 / 10; padding: 28px 28px 0; overflow: hidden; background: var(--sky); }
.benef-foto img { width: 100%; height: calc(100% + 8px); border-radius: var(--r) var(--r) 0 0; object-fit: cover; transition: transform var(--t-lenta) var(--e-salida); }
.benef-caja-txt { display: grid; align-content: start; gap: 10px; padding: 24px 24px 28px; }
.benef-caja-txt p { line-height: 1.4; }

@media (hover: hover) {
	.benef-caja:is(:hover, .is-hover) .benef-foto img { transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) { .benef-foto img { transition: none; } }

/* ===== Variante --detalle (Nosotros, beneficios del equipo): la grilla de 2 columnas con el texto de cada ítem bajo el
   título; el ícono se alinea con el título, como en --texto ===== */
.benef--detalle .benef-lista li { align-items: start; }
.benef--detalle .benef-lista p { color: var(--c-txt); }

/* ===== c/c15-contenido.css ===== */
/* C15 Más contenido (catálogo S24): sección gris con tarjetas blancas. Cabecera con eyebrow, H2 a la izquierda y el
   link "Ver todos" a la derecha; 2 videos con play y 3 tarjetas de recurso (foto, etiqueta, título y "Leer").
   En móvil todo va en una columna y las tarjetas pasan a carrusel con puntos (.m-carrusel, ds.js).
   --leer (Artículo, "Continúa leyendo"): la misma sección sin los videos; no suma reglas */
.contenido-head { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: var(--wp--preset--spacing--head); }
.contenido-head > div { display: grid; gap: 16px; max-width: 780px; }
.contenido-head .eyebrow { margin-bottom: 10px; }

/* ===== Videos: miniatura tratada con el play al centro de la foto (no del cuadro: 48 % / 52,5 %) ===== */
.contenido-videos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin-bottom: var(--gap); }
.contenido-video { position: relative; display: block; aspect-ratio: 16 / 8.55; border-radius: var(--r); overflow: hidden; }
.contenido-video img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.contenido-video .play { position: absolute; left: 48%; top: 52.5%; width: 25%; aspect-ratio: 1; transform: translate(-50%, -50%); display: grid; place-items: center; border-radius: 50%; background: var(--blue); color: #fff; font-size: 32px; transition: transform .3s; }
.contenido-video .play .i { fill: currentColor; margin-left: 4px; }

/* ===== Tarjeta de recurso: la foto con zoom de 1,27 dentro de su marco 4:3 ===== */
.recursos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.recurso { display: grid; grid-template-rows: auto auto 1fr auto; gap: 14px; justify-items: start; padding: 16px 16px 24px; border-radius: var(--r); background: #fff; }
.recurso-img { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; }
.recurso-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.27); }
/* Etiqueta y link de P2: un poco más alta (30) y con el ícono más cerca (6) que la .tag y el .link de la base */
.recurso .tag { margin: 6px 8px 0; }
.recurso .h-tarjeta { margin: 0 8px; }
.recurso .link { margin: 0 8px; }

@media (hover: hover) {
	.contenido-video:is(:hover, .is-hover) .play { transform: translate(-50%, -50%) scale(1.06); }
}
@media (max-width: 1100px) { .recursos { grid-template-columns: 1fr 1fr; } }
@media (max-width: 781px) {
	.contenido-head { flex-direction: column; align-items: flex-start; }
	.contenido-videos { grid-template-columns: 1fr; }
	.recursos { grid-template-columns: none; } /* las columnas las pone .m-carrusel (85 %) */
	.contenido-video .play { font-size: 22px; }
}

/* ===== c/c16-faq.css ===== */
/* C16 FAQ (catálogo S18): H2 centrado, preguntas agrupadas bajo un título de grupo en mayúsculas, acordeón con
   <details> (abre y cierra solo, sin JS) y el botón "Escríbenos" al pie. Lista de 1040 de ancho.
   Fondo blanco o azul con diagonal (--azul) según el ritmo de la página: nunca dos bandas iguales seguidas.
   Tarjetas en panel sobre blanco y en blanco sobre gris, navy o azul. Pregunta 20/700 (N2), respuesta 16/1,4 (N6) */
.faq-lista { display: grid; gap: 12px; max-width: 1040px; margin: 0 auto; }
.faq-grupo { margin: 28px 0 4px; font-size: var(--wp--preset--font-size--small); font-weight: 700; line-height: 1.4; letter-spacing: .06em; text-transform: uppercase; color: var(--c-hl); }
.faq-grupo:first-child { margin-top: 0; }
.on-dark .faq-grupo { color: var(--c-tit); } /* sobre azul, blanco: el celeste no va (2026-10-26) */
.faq details { overflow: hidden; border-radius: var(--r); background: var(--wp--preset--color--panel); }
:is(.sec--gris, .sec--navy, .sec--azul) .faq details { background: #fff; }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 24px; font-size: var(--wp--preset--font-size--tarjeta); font-weight: 700; line-height: 1.35; color: var(--ink); cursor: pointer; list-style: none; border-radius: var(--r); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .i { font-size: 24px; color: var(--text); transition: transform var(--t-media) var(--e-salida); }
.faq details[open]:not(.cerrando) summary .i { transform: rotate(180deg); }
.faq details p { max-width: 860px; padding: 0 24px 24px; color: var(--text); line-height: 1.4; }
/* Grupo desplegable: varias preguntas numeradas dentro de una tarjeta (Solución) */
.faq details .faq-preg { padding-bottom: 6px; color: var(--ink); }
.faq > .ctas { justify-content: center; margin-top: var(--wp--preset--spacing--head); }
@media (prefers-reduced-motion: reduce) { .faq summary .i { transition: none; } }
@media (max-width: 781px) {
	.faq summary { padding: 18px 20px; }
	.faq details p { padding: 0 20px 20px; }
	.faq > .ctas { margin-top: 56px; }
}

/* ===== c/c17-footer.css ===== */
/* C17 Footer (catálogo S19): banda azul a todo el ancho al final de toda página. La frase y la suscripción al blog de
   arriba salieron (Drivin, 2026-10-29): arriba va la marca (logo, texto, redes de línea del sprite) y 3 columnas
   de links con títulos celestes; abajo la fila legal. Uno solo para todas las páginas, también la Demo (Joaquín, 2026-10-29).
   Contexto .on-dark: texto blanco al 85 %, botón blanco con texto azul (blanco sobre azul, guía) */
.pie { background: var(--blue); }
.pie > .w { padding-top: 48px; } /* + los 48 de cada columna: el texto arranca a 96, como antes con la suscripción */

/* Botón blanco; al pasar el mouse, celeste con texto navy (como la caja azul) */
.pie .btn--primario { --btn-hover: var(--sky); }
@media (hover: hover) { .pie .btn--primario:is(:hover, .is-hover) { color: var(--ink); } }

/* ===== Al medio: marca + 3 columnas separadas por líneas ===== */
.pie-mid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; border-bottom: 1px solid rgba(255, 255, 255, .24); }
.pie-mid > div { padding: 48px 0 56px 40px; }
.pie-mid > .pie-marca { display: grid; gap: 20px; align-content: start; padding-left: 0; border-right: 1px solid rgba(255, 255, 255, .24); }
.pie-logo { width: auto; height: 38px; }
.pie-marca p { max-width: 340px; line-height: 1.4; }
.redes { display: flex; gap: 4px; margin-left: -8px; }
.redes a { display: grid; place-items: center; width: 40px; height: 40px; color: var(--wp--custom--texto-oscuro); font-size: 22px; transition: color var(--t-rapida); }
.pie h4 { margin-bottom: 18px; font-size: 18px; line-height: 1.4; font-weight: 700; color: var(--sky); }
.pie ul { display: grid; gap: 12px; line-height: 1.4; color: #fff; }

/* ===== Fila legal ===== */
.pie-legal { padding: 24px 0 32px; text-align: center; font-size: var(--wp--preset--font-size--small); line-height: 1.4; }

@media (hover: hover) { .redes a:hover { color: #fff; } .pie ul a:hover { text-decoration: underline; text-underline-offset: 3px; } }
@media (max-width: 1100px) {
	.pie-mid { grid-template-columns: 1fr 1fr 1fr; }
	.pie-mid > .pie-marca { grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .24); }
	.pie-mid > div:nth-child(2) { padding-left: 0; }
}
@media (max-width: 781px) {
	.pie > .w { padding-top: 28px; }
	.pie-mid { grid-template-columns: 1fr 1fr; column-gap: 20px; }
	.pie-mid > div { padding: 36px 0 40px; }
	.pie-mid > div:last-child { grid-column: 1 / -1; padding-top: 0; }
	.pie-marca p, .pie ul { font-size: var(--wp--preset--font-size--small); }
	.redes { margin-left: -10px; }
}
@media (prefers-reduced-motion: reduce) { .redes a { transition: none; } }

/* ===== c/c18-industrias.css ===== */
/* C18 Grilla de industrias (catálogo S06): sobre gris, H2 de sección centrado y 8 tarjetas en 4 columnas. Siete son
   la tarjeta con enlace de C06 (foto de la industria en su color dentro del marco celeste, título de tarjeta, frase y
   "Conoce más"); la octava es la salida para quien no se encuentra: navy con la diagonal proporcional, ícono Solid
   WHITE de 48 sin caja, título, frase y el botón principal. 2 columnas bajo 1100; en móvil carrusel con puntos y
   sin la frase de las tarjetas con foto. Va en el índice de Industrias, entre el hero azul y la banda CTA navy */

.indus-grilla { display: grid; gap: var(--gap); }
@media (min-width: 782px) { .indus-grilla { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 782px) and (max-width: 1100px) { .indus-grilla { grid-template-columns: 1fr 1fr; } }

/* Tarjeta con foto: la misma de C06 (.modulo), con su nombre para no cargar c06 en esta página */
.indus { display: grid; grid-template-rows: auto 1fr; border-radius: var(--r); overflow: hidden; background: #fff; }
.indus-foto { display: block; aspect-ratio: 16 / 10; padding: 28px 28px 0; overflow: hidden; background: var(--sky); }
.indus-foto img { width: 100%; height: calc(100% + 8px); border-radius: var(--r) var(--r) 0 0; object-fit: cover; transition: transform var(--t-lenta) var(--e-salida); }
.indus-texto { display: grid; grid-template-rows: auto auto 1fr; align-content: start; gap: 10px; justify-items: start; padding: 24px 24px 28px; }
.indus-texto :is(.link, .btn) { align-self: end; margin-top: 10px; }
.indus:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }

/* Tarjeta de contacto: navy con la diagonal al 22 % (la de .sec--navy + .diag-prop, repetida porque .indus pone el fondo
   blanco después de la base). El ícono ocupa el alto de la foto de las demás, así los títulos quedan en la misma línea */
.indus--contacto { background: var(--diag-sec-navy) calc(22% - 1571.4px) top / 6000px 4000px no-repeat, var(--ink); }
.indus-ico { display: flex; align-items: flex-end; aspect-ratio: 16 / 10; padding: 28px 24px 0; }
.indus-ico img { width: var(--wp--custom--icono--destacado); height: var(--wp--custom--icono--destacado); }

@media (hover: hover) {
	a.indus:is(:hover, .is-hover) .indus-foto img { transform: translateY(-8px); }
	a.indus:is(:hover, .is-hover) .link .i { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) { .indus-foto img, .indus .link .i { transition: none; } }

@media (max-width: 781px) {
	a.indus .indus-texto p { display: none; }
}

/* ===== c/c19-tarjetas-cta.css ===== */
/* C19 Tarjetas CTA (catálogo S11): dos fotos con el tratamiento Descartes a la par (llamados sobre foto), cada una un
   enlace entero con el H2 de banda, una línea de texto y un botón encima, sobre el velo de 3gtms.com desde el pie. La
   que lleva a la demo usa el botón relleno (azul: va sobre foto); la que lleva a contenido propio es --simple (gris con
   diagonal, sin foto) con el secundario. Con el mouse la foto se acerca. En móvil se apilan: son dos, no pasan a carrusel. Va en Soluciones */

.tcta-par { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.tcta-par:has(> :only-child) { grid-template-columns: 1fr; } /* una sola tarjeta: la página no trae la de contenido */

/* Tarjeta: la foto llena la caja y el texto se apoya abajo; el velo oscurece desde el pie para que el texto se lea */
.tcta { position: relative; isolation: isolate; display: grid; align-content: end; min-height: 440px; border-radius: var(--r); overflow: hidden; background: var(--ink); }
.tcta > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-lenta) var(--e-salida); }
.tcta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--velo-pie); }
.tcta-txt { display: grid; gap: 16px; justify-items: start; padding: 40px; }
.tcta-txt p { max-width: 440px; }
.tcta-txt .btn { margin-top: 8px; }
/* --simple (Drivin, 2026-10-29): sin foto, gris con la diagonal de sección, para que no compita con la de la demo. Texto
   de contexto claro (título navy, párrafo gris) y el botón secundario con borde azul */
.tcta--simple { background: var(--diag-sec-gris) calc(22% - 1571.4px) top / 6000px 4000px no-repeat, var(--wp--preset--color--gray); } /* la diagonal al 22 %, como toda caja angosta (.diag-prop) */
.tcta--simple::before { content: none; }
.tcta:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
@media (hover: hover) {
	.tcta:is(:hover, .is-hover) > img { transform: scale(1.04); }
	.tcta:is(:hover, .is-hover) .btn--primario { background: var(--btn-hover); border-color: var(--btn-hover); }
	.tcta:is(:hover, .is-hover) .btn--secundario { background: var(--btn-velo); }
}
@media (prefers-reduced-motion: reduce) { .tcta > img { transition: none; } }

@media (max-width: 781px) {
	.tcta-par { grid-template-columns: 1fr; }
	.tcta { min-height: 380px; }
	.tcta-txt { justify-items: center; padding: 28px 24px; text-align: center; }
}

/* ===== c/c21-blog.css ===== */
/* C21 Blog (catálogo S20-22): el archivo del blog en dos bandas. Arriba, en blanco, el último artículo en grande (foto
   16:10 en su color: por ahora el blog va sin tratamiento (Joaquín, 2026-10-23); etiquetas, título de banda, bajada, autor y "Leer artículo").
   Abajo, en gris, las categorías (una a la vez) con el buscador, la grilla de 3 con la tarjeta de recurso de C15 (foto
   4:3 en su color, etiqueta, título, autor y "Leer más") y la paginación. Con el mouse la foto se acerca y la flecha avanza.
   En móvil la grilla se apila en una columna: es una lista paginada para recorrer, no un carrusel (un carrusel de 6
   escondería 5 y la paginación ya divide el largo). Filtro y buscador: js/c21-blog.js */

/* ===== Post destacado: foto | texto, la foto un poco más ancha ===== */
.blog-dest { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.blog-dest-media { display: block; aspect-ratio: 16 / 10; border-radius: var(--r); overflow: hidden; }
.blog-dest-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-lenta) var(--e-salida); }
.blog-dest-txt { display: grid; gap: 20px; justify-items: start; }
.blog-tags { display: flex; flex-wrap: wrap; gap: 8px; }
/* Autor arriba y "Leer artículo" abajo, los dos alineados a la izquierda con el texto (cliente, 2026-10-27: jerarquía) */
.blog-dest-pie { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; width: 100%; margin-top: 4px; padding-top: 20px; border-top: 1px solid var(--wp--preset--color--line); }

/* Autor: avatar redondo (la excepción al radio de 4), nombre 16/500 y rol 14 */
.blog-autor { display: flex; align-items: center; gap: 12px; font-size: var(--wp--preset--font-size--small); line-height: 1.3; color: var(--c-txt); }
.blog-autor img { flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.blog-autor b { display: block; font-size: var(--wp--preset--font-size--body); font-weight: 500; color: var(--c-tit); }
.blog-autor--sm img { width: 32px; height: 32px; }
.blog-autor--sm { font-weight: 500; color: var(--c-tit); }

/* ===== Filtro: categorías a la izquierda, buscador a la derecha. La categoría elegida va en relleno azul (el botón
   relleno sobre claro); las demás en blanco con borde, como un secundario ===== */
.blog-filtros { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-bottom: 48px; }
.blog-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.blog-chips button { height: 40px; padding: 0 16px; border: 1px solid var(--wp--preset--color--line); border-radius: var(--r); background: #fff; font: 500 var(--wp--preset--font-size--small)/1 var(--wp--preset--font-family--body); color: var(--ink); cursor: pointer; transition: background var(--t-rapida), border-color var(--t-rapida), color var(--t-rapida); }
.blog-chips button[aria-pressed="true"] { border-color: var(--blue); background: var(--blue); color: #fff; }
/* --select (índice de casos): dos selects uno al lado del otro, país e industria, con su rótulo arriba; el buscador a la derecha */
.blog-filtros--select { display: grid; grid-template-columns: repeat(2, 240px) minmax(0, 1fr); align-items: end; }
.blog-filtros--select .blog-buscar { justify-self: end; width: 320px; }
.blog-selects { display: contents; } /* WordPress: los selects van en su formulario, ?pais=&industria= */
.blog-select { position: relative; display: grid; gap: 8px; }
.blog-select-t { font-size: var(--wp--preset--font-size--small); font-weight: 700; line-height: 1.4; color: var(--ink); }
.blog-select select { appearance: none; width: 100%; min-width: 0; height: 46px; padding: 0 40px 0 14px; border: 1px solid var(--wp--preset--color--line); border-radius: var(--r); background: #fff; font: 400 var(--wp--preset--font-size--body)/1.4 var(--wp--preset--font-family--body); color: var(--ink); text-overflow: ellipsis; cursor: pointer; }
.blog-select select:focus { outline: 2px solid var(--acento); outline-offset: 0; border-color: var(--blue); }
.blog-select .i { position: absolute; right: 14px; bottom: 14px; font-size: 18px; color: var(--text); pointer-events: none; }
/* Etiquetas de la tarjeta en fila (país en azul, industria en gris) */
.blog-posts .recurso .blog-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 8px 0; }
.blog-posts .recurso .blog-tags .tag { margin: 0; }
/* Fecha de la tarjeta (noticias y recursos, que no muestran autor) */
.blog-fecha { display: inline-flex; align-items: center; gap: 8px; margin: 0 8px; font-size: var(--wp--preset--font-size--small); line-height: 1.3; }
.blog-fecha .i { font-size: 16px; }
/* Buscador: el campo del formulario (C04) con la lupa adentro; en blanco porque va sobre gris. La lupa va después del
   input en el markup: en la captura a Figma el orden de capas es el del DOM y el fondo blanco del campo la tapaba */
.blog-buscar { position: relative; flex: 0 1 320px; }
.blog-buscar input { width: 100%; height: 46px; padding: 0 14px 0 44px; border: 1px solid var(--wp--preset--color--line); border-radius: var(--r); background: #fff; font: 400 var(--wp--preset--font-size--body)/1.4 var(--wp--preset--font-family--body); color: var(--ink); }
.blog-buscar input::placeholder { color: var(--text); }
.blog-buscar input:focus { outline: 2px solid var(--acento); outline-offset: 0; border-color: var(--blue); }
.blog-buscar .i { position: absolute; z-index: 1; left: 16px; top: 50%; translate: 0 -50%; font-size: 18px; color: var(--text); pointer-events: none; }

/* ===== Grilla: la tarjeta de recurso de C15 (mismas medidas: padding 16/16/24, gap 14, foto 4:3, márgenes de 8 del
   texto), copiada aquí con el scope de la grilla porque la página del blog no carga c15. Propuesta: subirla a base.css.
   A diferencia de C15, la foto no lleva el zoom de 1,27 (ese es del recorte de las miniaturas de Industria) ===== */
.blog-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.blog-posts .recurso { display: grid; grid-template-rows: auto auto 1fr auto auto; gap: 14px; justify-items: start; padding: 16px 16px 24px; border-radius: var(--r); background: #fff; }
.blog-posts .recurso-img { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; }
.blog-posts .recurso-img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-lenta) var(--e-salida); }
.blog-posts .recurso :is(.tag, .h-tarjeta, .link) { margin: 0 8px; }
/* El autor con padding, no margin: la captura a Figma envolvía el margin en un frame de 100 px y centraba adentro el
   autor (150), que quedaba 25 px fuera de la tarjeta (cliente, 2026-10-27) */
.blog-posts .recurso .blog-autor { padding: 0 8px; }
.blog-posts .recurso .tag { margin-top: 6px; }
.blog-posts .recurso .h-tarjeta { align-self: start; }
.blog-posts .recurso[hidden] { display: none; }
/* ===== Centro de recursos (--centro): filas de 3 tarjetas separadas por una línea. La cabecera repite la de C15 con su
   scope (la página no carga c15) y en móvil cada fila pasa a carrusel: 5 filas apiladas serían 15 tarjetas seguidas ===== */
.centro-fila + .centro-fila { margin-top: var(--wp--preset--spacing--head); padding-top: var(--wp--preset--spacing--head); border-top: 1px solid var(--wp--preset--color--line); }
.centro-head { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 32px; }
.centro-head > div { display: grid; gap: 8px; }
.blog-vacio { padding: 48px 0; text-align: center; }
.blog-vacio[hidden] { display: none; }

/* ===== Paginación: cuadros de 44 (el target táctil), la actual en relleno azul, las flechas con el borde de .flechas ===== */
.blog-pag { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: var(--wp--preset--spacing--head); }
.blog-pag[hidden] { display: none; }
.blog-pag :is(a, span) { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 8px; border-radius: var(--r); font-weight: 500; color: var(--ink); transition: background var(--t-rapida), border-color var(--t-rapida), color var(--t-rapida); }
.blog-pag [aria-current] { background: var(--blue); color: #fff; }
.blog-pag .blog-pag-f { border: 1px solid var(--wp--preset--color--line); background: #fff; font-size: 20px; }

@media (hover: hover) {
	.blog-chips button:not([aria-pressed="true"]):is(:hover, .is-hover) { border-color: var(--blue); color: var(--blue); }
	.blog-pag a:not(.blog-pag-f):is(:hover, .is-hover) { background: #fff; }
	.blog-pag .blog-pag-f:is(:hover, .is-hover) { border-color: var(--blue); background: var(--blue); color: #fff; }
	:is(.blog-dest, .blog-posts .recurso):is(:hover, .is-hover) img { transform: scale(1.04); }
	:is(.blog-dest, .blog-posts .recurso):is(:hover, .is-hover) .link .i { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
	.blog-dest-media img, .blog-posts .recurso-img img, .blog-chips button { transition: none; }
}
@media (max-width: 1100px) {
	.blog-dest { gap: 48px; }
	.blog-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.centro-fila .blog-posts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 781px) {
	.blog-dest { grid-template-columns: 1fr; gap: 32px; }
	.blog-dest-media { aspect-ratio: 4 / 3; }
	.blog-filtros { flex-direction: column; align-items: stretch; margin-bottom: 32px; }
	.blog-buscar { flex-basis: auto; }
	.blog-posts { grid-template-columns: 1fr; }
	.centro-fila .blog-posts { grid-template-columns: none; } /* las columnas las pone .m-carrusel (85 %) */
	.centro-head { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 24px; }
	.blog-filtros--select { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.blog-filtros--select .blog-buscar { grid-column: 1 / -1; order: -1; justify-self: stretch; width: auto; }
}

/* --autor: cuántos artículos tiene, sobre la grilla (sin filtros: son pocos) */
.blog-cuenta { margin-bottom: 32px; font-weight: 500; color: var(--ink); }
.blog-fecha--dest { margin: 0; }
.hero-txt > .blog-buscar { width: 100%; max-width: 420px; color: var(--ink); }

/* ===== c/c22-articulo.css ===== */
/* C22 Artículo (catálogo S23): el hero azul centrado de C03 (--centrado) que sube bajo el header: migas, categoría, H1,
   autor, fecha y "Escúchalo", sin foto. La portada en su color abre el texto y justo después va el resumen ejecutivo
   (Joaquín 2026-10-26). Debajo, en blanco, 3 columnas: índice y compartir
   fijos a la izquierda (el índice marca dónde vas), el texto al ancho de lectura (760) y autor + demo fijos a la derecha.
   El cuerpo trae todo lo que usa un texto largo: narración en audio, resumen ejecutivo, H2/H3 de cuerpo, listas, tabla,
   cita, video y CTA dentro del texto. Botones: blanco en el CTA dentro del texto (blanco sobre oscuro) y transparente
   con borde en el lateral, para que el lateral no compita con el del texto. Esa escala de lectura (cuerpo 18, H2 32, H3 20, ancho 760, medida contra el blog
   de groundcloud) sirve también a la pillar, los legales y los boletines. Compartir: cuadros azules sobre claro y borde
   blanco sobre el hero. Bajo 1100 sale la columna derecha y va al pie del texto; en móvil el hero se centra, compartir
   va en fila bajo el título y el índice arriba del texto. Índice activo y audio: js/c22-articulo.js */

/* ===== Escala de lectura. Tokens nuevos por proponer en theme.json: --lec-h2 (32 en los dos anchos). El cuerpo es
   el preset lead (18/16) y el H3 el de tarjeta (20/18); el ancho, content-size (760) ===== */
.art-cuerpo, .art-hero { --lec-h2: 32px; --art-top: calc(var(--hdr-h, 118px) + 32px); }

/* ===== Hero: el de C03 --centrado (azul con la diagonal, una columna centrada de 860, sin foto) ===== */
.art-hero { padding: 72px 0 var(--wp--preset--spacing--sec); }
.art-hero > .w { display: grid; justify-items: center; text-align: center; }
.art-hero[data-hero-color] { background: var(--diag-sec-azul) calc(var(--hero-dx, -169px) + .62487 * var(--hdr-h, 0px) - 2500px) top / 6000px 4000px no-repeat, var(--blue); }
.art-hero-txt { display: grid; gap: 24px; justify-items: center; max-width: 860px; }
.art-hero :is(.art-migas, .art-meta) { justify-content: center; }
/* Etiquetas: todas las de la entrada, en fila, cada una con enlace a su archivo */
.art-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: -8px; }
.art-tags a.tag { text-decoration: none; }
.art-migas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--wp--preset--font-size--small); line-height: 1.4; color: var(--c-txt); }
.art-migas a { color: var(--c-link); text-decoration: underline; text-underline-offset: 3px; }
.art-migas .i { font-size: 14px; opacity: .6; }
.art-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; font-size: var(--wp--preset--font-size--small); line-height: 1.3; }
.art-meta > span { display: inline-flex; align-items: center; gap: 8px; }
.art-meta > span > .i { font-size: 18px; }
/* Portada: abre el texto, en su color, 16:9 al ancho de lectura */
.art-portada { aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; }
.art-portada img { width: 100%; height: 100%; object-fit: cover; }

/* Autor: avatar redondo (la excepción al radio), nombre 16/500 y rol 14 */
.art-autor-m { display: flex; align-items: center; gap: 12px; }
.art-autor-m img { flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.art-autor-m b { display: block; font-size: var(--wp--preset--font-size--body); font-weight: 500; color: var(--c-tit); }

/* ===== Compartir: 5 redes en cuadros de 40 con el ícono de 22. --azul relleno azul sobre claro (hover navy),
   --borde borde blanco sobre oscuro (hover relleno blanco). Rótulo como el grupo del FAQ: 14/700 en mayúsculas ===== */
.compartir { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.art-rotulo { font-size: var(--wp--preset--font-size--small); font-weight: 700; line-height: 1.4; letter-spacing: .06em; text-transform: uppercase; color: var(--c-tit); }
.compartir .art-rotulo { width: 100%; margin-bottom: 4px; }
.compartir a { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid transparent; border-radius: var(--r); font-size: 22px; cursor: pointer; transition: background var(--t-rapida), border-color var(--t-rapida), color var(--t-rapida); }
.compartir--azul a { background: var(--blue); color: #fff; }
.compartir--borde a { border-color: #fff; color: #fff; }
.art-hero .compartir { display: none; } /* en escritorio compartir vive en la columna izquierda */

/* ===== Cuerpo: índice | texto | autor y demo. 224 + 760 + 232 + 2 × 32 = 1280, el contenedor (224: las 5 redes en una fila) ===== */
.art-cuerpo > .w { display: grid; grid-template-columns: 224px minmax(0, var(--wp--style--global--content-size)) 232px; justify-content: space-between; gap: 32px; align-items: start; }
.art-izq, .art-der { position: sticky; top: var(--art-top); display: grid; gap: 40px; }

/* Índice: línea gris a la izquierda; el ítem activo la pinta de azul y pasa a 500 */
.art-indice .art-rotulo { margin-bottom: 12px; }
.art-indice ul { display: grid; border-left: 2px solid var(--wp--preset--color--line); }
.art-indice a { display: block; margin-left: -2px; padding: 6px 0 6px 16px; border-left: 2px solid transparent; font-size: var(--wp--preset--font-size--small); line-height: 1.4; color: var(--text); transition: color var(--t-rapida), border-color var(--t-rapida); }
.art-indice a.on { border-color: var(--blue); font-weight: 500; color: var(--blue); }

/* Columna derecha: tarjeta de autor (panel) y llamado a la demo (navy con la diagonal proporcional) */
.art-autor { display: grid; gap: 16px; justify-items: start; padding: 24px; border-radius: var(--r); background: var(--wp--preset--color--panel); }
.art-autor .art-autor-m img { width: 56px; height: 56px; }
.art-autor p { font-size: var(--wp--preset--font-size--small); line-height: 1.4; }
.art-demo { display: grid; gap: 16px; justify-items: start; padding: 24px; border-radius: var(--r); }
.art-demo .btn { width: 100%; }

/* ===== Prosa: cuerpo 18/1,4 (groundcloud: 18/25,2), bloques separados por 24, títulos con aire arriba ===== */
.prosa { font-size: var(--wp--preset--font-size--lead); line-height: 1.4; color: var(--text); }
.prosa > * + * { margin-top: 24px; }
.prosa h2 { margin-top: 56px; scroll-margin-top: var(--art-top); font-size: var(--lec-h2); line-height: 1.2; font-weight: 700; letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.prosa h3 { margin-top: 40px; scroll-margin-top: var(--art-top); font-size: var(--wp--preset--font-size--tarjeta); line-height: 1.3; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.prosa :is(h2, h3) + * { margin-top: 16px; }
.prosa :is(ul, ol) { display: grid; gap: 10px; padding-left: 24px; }
.prosa ul { list-style: disc; }
.prosa ol { list-style: decimal; }
.prosa li { padding-left: 4px; }
.prosa li::marker { color: var(--blue); font-weight: 500; }
.prosa strong { font-weight: 500; color: var(--ink); }
.prosa a:not(.btn) { color: var(--blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Narración en audio (rehace la de HubSpot): panel con el play azul de 48, título, barra de avance y duración */
.art-audio { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: var(--r); background: var(--wp--preset--color--panel); font-size: var(--wp--preset--font-size--body); }
.art-audio button { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border: 0; border-radius: var(--r); background: var(--blue); color: #fff; font-size: 18px; cursor: pointer; transition: background var(--t-rapida); }
.art-audio button .i { fill: currentColor; stroke: none; }
.art-audio > div { display: grid; flex: 1; gap: 8px; }
.art-audio b { font-weight: 500; color: var(--ink); }
.art-audio-prog { display: block; height: 4px; border-radius: 2px; background: var(--wp--preset--color--line); overflow: hidden; }
.art-audio-prog i { display: block; height: 100%; background: var(--blue); }
.art-audio em { font-style: normal; font-variant-numeric: tabular-nums; }

/* Resumen ejecutivo: plano, marcado por una línea a la izquierda (azul acción: el light blue es sólo de cifras y estrellas) */
.art-resumen { padding: 4px 0 4px 28px; border-left: 3px solid var(--blue); scroll-margin-top: var(--art-top); }
.prosa .art-resumen h2 { margin: 0 0 12px; font-size: var(--wp--preset--font-size--tarjeta); line-height: 1.3; letter-spacing: -.01em; }
.art-resumen p + p { margin-top: 16px; }

/* Imagen a un lado del texto (las flotadas de HubSpot pasan a core/image alineada, con su ancho): 24 px hacia el texto,
   que la rodea. Un H2 (otra sección) empieza debajo; un H3 la rodea, como en el original */
.prosa .wp-block-image.alignleft { float: left; margin: 6px 24px 16px 0; }
.prosa .wp-block-image.alignright { float: right; margin: 6px 0 16px 24px; }
.prosa :is(.alignleft, .alignright) + * { margin-top: 0; }
.prosa h2 { clear: both; }
.prosa :is(.alignleft, .alignright) + h3 { margin-top: 40px; }
.prosa .wp-block-image:is(.alignleft, .alignright):has(+ h3) { margin-top: 46px; }

/* Tabla: encabezado en panel, filas separadas por la línea, texto 16. Ancho fijo de columnas: nunca scroll lateral */
.prosa table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--wp--preset--font-size--body); line-height: 1.4; }
.prosa caption { margin-bottom: 12px; font-size: var(--wp--preset--font-size--small); text-align: left; }
.prosa :is(th, td) { padding: 14px 16px; border-bottom: 1px solid var(--wp--preset--color--line); text-align: left; vertical-align: top; }
.prosa thead th { background: var(--wp--preset--color--panel); font-weight: 700; color: var(--ink); }
.prosa thead th:first-child { border-top-left-radius: var(--r); }
.prosa thead th:last-child { border-top-right-radius: var(--r); }
.prosa tbody th { font-weight: 500; color: var(--ink); }

/* Cita: entre dos líneas, en el tamaño de tarjeta (20/500 navy) y la fuente en 14 */
.prosa blockquote { padding: 32px 0; border-block: 1px solid var(--wp--preset--color--line); }
.prosa blockquote p { font-size: var(--wp--preset--font-size--tarjeta); line-height: 1.4; font-weight: 500; letter-spacing: -.01em; color: var(--ink); }
.prosa blockquote cite { display: block; margin-top: 16px; font-size: var(--wp--preset--font-size--small); font-style: normal; }

/* Video dentro del texto: la miniatura en su color con el play circular de C09 (80, azul); el reproductor lo carga ds.js */
.art-video { position: relative; display: grid; place-items: center; width: 100%; padding: 0; border: 0; border-radius: var(--r); overflow: hidden; aspect-ratio: 16 / 9; background: var(--ink); cursor: pointer; }
.art-video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-lenta) var(--e-salida); }
.art-video .play { position: relative; display: grid; place-items: center; width: 80px; height: 80px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 28px; transition: transform var(--t-media) var(--e-salida); }
.art-video .play .i { fill: currentColor; margin-left: 4px; }
.art-video iframe { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; border: 0; }

/* CTA dentro del texto: caja navy con la diagonal proporcional, frase 20/700 y el botón blanco (blanco sobre oscuro;
   .sec--navy de la base lo deja azul) */
.art-banda { --btn-bg: #fff; --btn-fg: var(--blue); --btn-hover: var(--wp--preset--color--tint-blue); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px; padding: var(--pad); border-radius: var(--r); }
.prosa .art-banda p { font-size: var(--wp--preset--font-size--tarjeta); line-height: 1.3; font-weight: 700; color: #fff; }

@media (hover: hover) {
	.art-indice a:not(.on):is(:hover, .is-hover) { color: var(--ink); }
	.compartir--azul a:is(:hover, .is-hover) { background: var(--ink); }
	.compartir--borde a:is(:hover, .is-hover) { background: #fff; color: var(--blue); }
	.art-audio button:is(:hover, .is-hover) { background: var(--wp--custom--accion-hover); }
	.art-video:is(:hover, .is-hover) img { transform: scale(1.03); }
	.art-video:is(:hover, .is-hover) .play { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
	.compartir a, .art-indice a, .art-video img, .art-video .play { transition: none; }
}
@media (max-width: 1100px) {
	/* Sin columna derecha: autor y demo van al pie del texto, lado a lado */
	.art-cuerpo > .w { grid-template-columns: 224px minmax(0, 1fr); }
	.art-der { position: static; grid-column: 2; grid-template-columns: 1fr 1fr; gap: var(--gap); }
}
@media (max-width: 781px) {
	.art-cuerpo, .art-hero { --art-top: calc(var(--hdr-h, 64px) + 16px); }
	.art-hero { padding: 40px 0 56px; }
	.art-hero .compartir { display: flex; justify-content: center; }
	.art-cuerpo > .w { grid-template-columns: 1fr; gap: 40px; }
	.art-izq { position: static; }
	.art-izq .compartir { display: none; }
	.art-der { grid-column: auto; grid-template-columns: 1fr; }
	.prosa h2 { margin-top: 48px; }
	.art-resumen { padding-left: 20px; }
	.art-banda { grid-template-columns: 1fr; }
	.prosa :is(th, td) { padding: 12px 10px; }
	/* En móvil no hay ancho para texto al lado: la imagen va sola, sobre el texto */
	.prosa .wp-block-image:is(.alignleft, .alignright), .prosa .wp-block-image:is(.alignleft, .alignright):has(+ h3) { float: none; margin: 0; }
	.prosa :is(.alignleft, .alignright) + * { margin-top: 24px; }
	.art-video .play { width: 60px; height: 60px; font-size: 22px; }
}

/* ===== --caso (caso de éxito F10) =====
   Foto dentro del texto al ancho de lectura, con el radio. La cita del cliente abre el texto: el tamaño del H2 de
   lectura en 500, con la línea azul del resumen ejecutivo, y la firma en dos niveles (nombre y cargo). La ficha del
   cliente reemplaza a la tarjeta de autor: mismo panel, el nombre en tarjeta y los datos en pares rótulo/valor */
.prosa figure img { width: 100%; height: auto; border-radius: var(--r); }
.prosa .caso-cita { padding: 4px 0 4px 28px; border: 0; border-left: 3px solid var(--blue); }
.prosa .caso-cita p { font-size: 24px; line-height: 1.35; }
.prosa .caso-cita cite { display: grid; gap: 2px; margin-top: 20px; font-size: var(--wp--preset--font-size--small); }
.caso-cita cite b { font-size: var(--wp--preset--font-size--body); font-weight: 500; color: var(--ink); }
.caso-ficha { display: grid; gap: 12px; padding: 24px; border-radius: var(--r); background: var(--wp--preset--color--panel); }
.caso-ficha-nombre { font-size: var(--wp--preset--font-size--tarjeta); font-weight: 700; line-height: 1.3; color: var(--ink); }
.caso-ficha dl { display: grid; gap: 12px; }
.caso-ficha dl > div:has(dd:empty) { display: none; } /* no todos los casos traen flota u operación */
.caso-ficha dl > div { display: grid; gap: 2px; padding-top: 12px; border-top: 1px solid var(--wp--preset--color--line); }
.caso-ficha dt { font-size: var(--wp--preset--font-size--small); line-height: 1.4; }
.caso-ficha dd { font-weight: 500; line-height: 1.4; color: var(--ink); }
@media (max-width: 781px) {
	.prosa .caso-cita p { font-size: 20px; }
}

/* ===== --pillar (pillar page F15) =====
   Hero partido: texto a la izquierda (alineado a la izquierda, como el hero --blanco) y la foto 3:2 en su color a la
   derecha, sobre el azul con la diagonal. Índice en dos niveles: el segundo entra 16 px y en 14 sin peso. Columna
   derecha: la portada de la guía (panel, la portada en 3:4) sobre el llamado a la demo. Señales: ícono de 24 en azul
   y texto (título 500 navy + bajada), en 2 columnas. Lista de chequeo: cuadro vacío de 20 con borde, en panel */
.art-hero--partido > .w { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; justify-items: stretch; text-align: left; }
.art-hero--partido .art-hero-txt { justify-items: start; max-width: 600px; }
.art-hero--partido .art-migas { justify-content: flex-start; }
.art-hero-foto { aspect-ratio: 3 / 2; border-radius: var(--r); overflow: hidden; }
.art-hero-foto img { width: 100%; height: 100%; object-fit: cover; }
.art-indice ul ul { border-left: 0; }
.art-indice ul ul a { padding-left: 32px; font-size: 13px; }
.pillar-guia { display: grid; gap: 16px; justify-items: start; padding: 24px; border-radius: var(--r); background: var(--wp--preset--color--panel); }
.pillar-guia img { width: 120px; height: auto; }
.pillar-guia b { font-weight: 500; line-height: 1.4; color: var(--ink); }
.prosa .pillar-senales { grid-template-columns: 1fr 1fr; gap: 24px 32px; padding: 0; list-style: none; }
.prosa .pillar-senales li { display: grid; grid-template-columns: auto 1fr; gap: 16px; padding: 0; }
.pillar-senales .i { font-size: 24px; color: var(--blue); }
.pillar-senales b { display: block; margin-bottom: 4px; font-size: var(--wp--preset--font-size--body); font-weight: 500; line-height: 1.4; color: var(--ink); }
.pillar-senales p { font-size: var(--wp--preset--font-size--body); }
.prosa .pillar-check { gap: 12px; padding: 24px; border-radius: var(--r); background: var(--wp--preset--color--panel); list-style: none; }
.prosa .pillar-check li { display: flex; align-items: center; gap: 12px; padding: 0; font-size: var(--wp--preset--font-size--body); }
.pillar-check li::before { content: ""; flex: none; width: 20px; height: 20px; border: 1.5px solid var(--blue); border-radius: 4px; background: #fff; }

/* ===== --legal (texto legal F17): hero azul sólo con el título y la fecha; cuerpo en 2 columnas (índice | texto) y los
   H2 numerados en el tamaño de tarjeta: un legal se recorre por secciones, no por títulos de banda ===== */
.art-hero--legal { padding-bottom: 72px; }
.art-cuerpo--legal > .w { grid-template-columns: 224px minmax(0, var(--wp--style--global--content-size)); justify-content: start; gap: 32px 96px; }
.prosa--legal h2 { margin-top: 48px; font-size: var(--wp--preset--font-size--tarjeta); line-height: 1.3; }
.prosa--legal :is(p, li) { font-size: var(--wp--preset--font-size--body); }

@media (max-width: 1100px) {
	.art-hero--partido > .w { gap: 40px; }
	.art-cuerpo--legal > .w { grid-template-columns: 1fr; }
	.art-cuerpo--legal .art-izq { position: static; }
}
@media (max-width: 781px) {
	.art-hero--partido > .w { grid-template-columns: 1fr; justify-items: center; text-align: center; }
	.art-hero--partido .art-hero-txt { justify-items: center; }
	.art-hero--partido .art-migas { justify-content: center; }
	.prosa .pillar-senales { grid-template-columns: 1fr; }
}

/* ===== --boletin (F26 Drivin News): el artículo con lo propio del boletín. Cada tema es un H2 con su número en azul;
   la firma usa el avatar del autor; la bienvenida, personas en fila (foto redonda de 96, nombre y cargo); la galería,
   2 fotos cuadradas lado a lado con el pie (lugar y evento) debajo; prensa, tarjetas de panel con la imagen del medio
   a la izquierda. La columna derecha lleva las ediciones anteriores como chips del filtro del blog ===== */
.bol-num { margin-right: 12px; color: var(--blue); font-variant-numeric: tabular-nums; }
.prosa .bol-firma { display: flex; align-items: center; gap: 16px; padding-top: 24px; border-top: 1px solid var(--wp--preset--color--line); }
.bol-firma img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.bol-firma b { display: block; font-weight: 500; color: var(--ink); }
.bol-firma span span { font-size: var(--wp--preset--font-size--small); }
.bol-personas { display: flex; flex-wrap: wrap; gap: 32px; }
.bol-persona { display: grid; justify-items: center; gap: 4px; text-align: center; font-size: var(--wp--preset--font-size--small); }
.bol-persona img { width: 96px; height: 96px; margin-bottom: 8px; border-radius: 50%; object-fit: cover; }
.bol-persona b { font-size: var(--wp--preset--font-size--body); font-weight: 500; color: var(--ink); }
.bol-galeria { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bol-galeria img { width: 100%; aspect-ratio: 1; border-radius: var(--r); object-fit: cover; }
.bol-galeria figcaption { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-size: var(--wp--preset--font-size--small); font-weight: 500; color: var(--ink); }
.bol-galeria figcaption .i { color: var(--blue); }
.prosa .bol-prensa { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 0; list-style: none; }
.bol-prensa li { padding: 0; }
.prosa .bol-prensa a { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: start; height: 100%; padding: 16px; border-radius: var(--r); background: var(--wp--preset--color--panel); color: var(--text); text-decoration: none; }
.bol-prensa img { width: 96px; height: 96px; border-radius: var(--r); object-fit: cover; }
.bol-prensa a > span { display: grid; gap: 6px; font-size: var(--wp--preset--font-size--small); line-height: 1.4; }
.bol-prensa b { font-size: var(--wp--preset--font-size--body); font-weight: 500; color: var(--ink); }
.bol-prensa .link { margin-top: 4px; }
.prosa .ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.bol-ediciones .art-rotulo { margin-bottom: 12px; }
.bol-ediciones ul { display: flex; flex-wrap: wrap; gap: 8px; }
.bol-ediciones a { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border: 1px solid var(--wp--preset--color--line); border-radius: var(--r); background: #fff; font-size: var(--wp--preset--font-size--small); font-weight: 500; color: var(--ink); transition: border-color var(--t-rapida), color var(--t-rapida); }
@media (hover: hover) { .bol-ediciones a:hover { border-color: var(--blue); color: var(--blue); } }
@media (max-width: 781px) {
	.prosa .bol-prensa { grid-template-columns: 1fr; }
	.bol-galeria { gap: 8px; }
}

/* --caso: el hero en celeste como todo lo de casos de éxito (Joaquín, 2026-10-29), con la diagonal del header y la
   distribución del hero de recursos (c03 --recurso): dos columnas con 80 de separación y la foto entera en la suya */
@media (min-width: 1101px) { .art-hero--caso > .w { gap: 80px; } }
@media (min-width: 782px) { .art-hero--caso :is(.art-tags, .art-meta) { justify-content: flex-start; } }
.art-hero--caso .art-hero-foto { aspect-ratio: auto; }
.art-hero--caso .art-hero-foto img { height: auto; }
.art-hero.sec--celeste[data-hero-color] { background: var(--diag-sec-celeste) calc(var(--hero-dx, -169px) + .62487 * var(--hdr-h, 0px) - 2500px) top / 6000px 4000px no-repeat, var(--wp--preset--color--sky); }
.art-hero.sec--celeste .compartir--borde a { border-color: var(--blue); color: var(--blue); } /* sobre celeste el borde blanco no se ve */

/* ===== c/c23-resultados.css ===== */
/* C23 Resultados en carrusel (catálogo S26): la "Carousel Box Section" de GroundCloud (Ajuste 02, lámina 7). Banda dark
   blue con la diagonal, H2 de sección centrado con bajada y dos filas de cajas de 400 × 248 que avanzan solas en
   sentidos opuestos (el movimiento de la franja de logos de la base) y se detienen con el mouse o el foco. Tres tipos:
   cita sobre navy plano (más oscuro que la banda, como "Proven results"), cifra sobre blanco con el logo del cliente si
   es suya y cifra sobre foto en su color (el tratamiento Descartes queda sólo para el hero con slider). Cifras y citas reales de driv.in. Propuesta para Home o Soluciones: puede
   reemplazar a cifras (C08) + testimonios (C11) donde convivan. Con ?estatico o "reducir movimiento" las cajas quedan
   quietas en grilla, sin las copias */

/* Banda dark blue: la diagonal de .sec--navy (mismo SVG de base.css) con el fundido al dark blue y no al navy */
.resultados { overflow: hidden; background: linear-gradient(#13416900 calc(min(75%, 560px) / 2), #134169 min(75%, 560px)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6000' height='4000' viewBox='0 0 6000 4000' preserveAspectRatio='xMinYMin meet'%3E%3Cdefs%3E%3CradialGradient id='b' cx='0' cy='0' r='1' gradientUnits='userSpaceOnUse' gradientTransform='matrix(935.65945 -395.7712 136.463 322.61794 932.916 37.358)'%3E%3Cstop stop-color='%23009CEB'/%3E%3Cstop offset='1' stop-color='%23005885' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='c' cx='0' cy='0' r='1' gradientUnits='userSpaceOnUse' gradientTransform='rotate(-17 3650.38 -4463.413) scale(240.093)'%3E%3Cstop stop-color='%23009CEB'/%3E%3Cstop offset='1' stop-color='%23005885' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg transform='translate(2506.83 0) scale(1.58782)'%3E%3Cpath fill='url(%23b)' fill-opacity='.24' d='M787.386-872.442h1245.2v1846.08h-1245.2z' transform='rotate(32 787.386 -872.442)'/%3E%3Cpath fill='url(%23c)' fill-opacity='.14' d='M1463.88 282.043h705.746v1046.31H1463.88z' transform='rotate(32 1463.88 282.043)'/%3E%3C/g%3E%3C/svg%3E") left -2500px top / 6000px 4000px no-repeat, var(--wp--preset--color--dark-blue); }
/* Como en C06, el título es el de una sección de contenido (54), no el de banda */
.resultados .h2 { font-size: var(--wp--preset--font-size--h-2); line-height: 1.16; letter-spacing: -.02em; }

/* ===== Filas: cada pista lleva las cajas dos veces y recorre la mitad (keyframes franja de la base) ===== */
.res { display: grid; gap: 16px; }
.res-fila { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.res-track { display: flex; gap: 16px; width: max-content; padding-right: 16px; animation: franja 70s linear infinite; }
.res-fila--inv .res-track { animation-direction: reverse; }
.res-fila:is(:hover, :focus-within) .res-track { animation-play-state: paused; }

/* ===== Caja: texto arriba y pie abajo ===== */
.res-box { position: relative; isolation: isolate; flex: none; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; width: 400px; height: 248px; padding: 24px 24px 20px; border-radius: var(--r); overflow: hidden; color: var(--c-txt); }
.res-box--cita { background: var(--ink); }
.res-box--blanco { background: #fff; }
.res-box blockquote { font-size: var(--wp--preset--font-size--lead); line-height: 1.4; font-weight: 700; color: var(--c-tit); }
.res-box footer { font-size: var(--wp--preset--font-size--small); line-height: 1.4; }
.res-box footer b { display: block; font-weight: 700; color: var(--c-tit); }
/* Cifra plana en light blue (el color de las cifras de C08) con lo que mide debajo */
.res-cifra b { display: block; font-size: var(--wp--preset--font-size--h-2-banda); line-height: 1.14; font-weight: 700; letter-spacing: -.02em; color: var(--acento); }
.res-cifra span { display: block; margin-top: 8px; font-size: var(--wp--preset--font-size--body); line-height: 1.4; }
.res-logo { align-self: flex-end; height: var(--wp--custom--logo--tarjeta); width: auto; max-width: 150px; object-fit: contain; }
/* Foto en su color (?v=o) con el velo desde arriba, donde va la cifra */
.res-foto { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.res-box--foto::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--velo-top); }
.res-box--foto .res-cifra span { color: #fff; }
/* Galería (S30): la foto sin cifra y el país abajo como bandera de 36 (Joaquín, 2026-10-29), con el velo desde abajo */
.res-box--pais { justify-content: flex-end; }
.res-box--pais::before { background: var(--velo-pie); }
.res-bandera { width: 36px; height: 24px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(255, 255, 255, .5); }
.res-pais { font-size: var(--wp--preset--font-size--h-3); line-height: 1.24; font-weight: 500; color: #fff; }

.resultados .ctas { justify-content: center; margin-top: 56px; }

/* ===== Quieto: sin movimiento, las 8 cajas en una sola grilla centrada (las dos filas se funden) y sin las copias ===== */
html.quieto .res { display: flex; flex-wrap: wrap; justify-content: center; padding: 0 var(--gutter); }
html.quieto :is(.res-fila, .res-track) { display: contents; }
html.quieto .res-box[aria-hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
	.res { display: flex; flex-wrap: wrap; justify-content: center; padding: 0 var(--gutter); }
	:is(.res-fila, .res-track) { display: contents; }
	.res-box[aria-hidden] { display: none; }
}

@media (max-width: 781px) {
	.res-box { width: 300px; height: 228px; padding: 20px 20px 16px; }
}

/* ===== c/c25-montos.css ===== */
/* C25 Tarjetas de montos (catálogo S28, Referidos "¿Cuánto puedes ganar?"): H2 centrado y 3 tarjetas en fila, cada
   una con la etiqueta del tramo, la frase y el monto en la cifra del sistema. El tramo más alto va en azul (Joaquín, 2026-10-27) con la
   diagonal proporcional, como la tarjeta de contacto de C18. Al pie, botón y requisitos centrados. En móvil carrusel */
.montos { display: grid; gap: var(--gap); max-width: 1080px; margin: 0 auto; }
@media (min-width: 782px) { .montos { grid-template-columns: repeat(3, minmax(0, 1fr)); } .montos:has(> :nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; } } /* en móvil manda .m-carrusel */
.monto { display: grid; justify-items: center; align-content: start; gap: 14px; padding: 40px var(--pad); border-radius: var(--r); background: var(--wp--preset--color--panel); text-align: center; }
.monto--destacado { background: var(--diag-sec-azul) calc(22% - 1571.4px) top / 6000px 4000px no-repeat, var(--blue); }
.monto--destacado .tag { background: rgba(255, 255, 255, .12); color: #fff; }
.monto p { margin-top: 10px; }
.monto-cifra { font-size: var(--wp--preset--font-size--cifra); line-height: 1; font-weight: 700; letter-spacing: -.02em; color: var(--c-tit); }
.monto-cifra small { font-size: .45em; font-weight: 500; letter-spacing: 0; }
.montos-ctas { flex-direction: column; justify-content: center; margin-top: 48px; }
.montos-ctas .link { padding-bottom: 0; }
@media (max-width: 781px) {
	.montos-ctas { margin-top: 32px; }
}

/* ===== c/c26-equipo.css ===== */
/* C26 Equipo (catálogo S29, Nosotros "¿Quiénes lideran Drivin?"): H2 centrado y una tarjeta por persona en 4
   columnas, en el formato de S06: la foto cuadrada dentro del marco celeste (28 de aire y llega al borde de abajo),
   nombre, cargo y el enlace a LinkedIn. 2 columnas bajo 1100; en móvil carrusel con puntos */
.equipo { display: grid; gap: var(--gap); }
@media (min-width: 782px) { .equipo { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* en móvil manda .m-carrusel */
.persona { display: grid; grid-template-rows: auto 1fr; border-radius: var(--r); overflow: hidden; background: var(--wp--preset--color--panel); }
.persona-foto { display: block; padding: 28px 28px 0; background: var(--sky); }
.persona-foto img { width: 100%; aspect-ratio: 1 / 1; border-radius: var(--r) var(--r) 0 0; object-fit: cover; }
.persona-txt { display: grid; grid-template-rows: auto auto 1fr; justify-items: start; gap: 6px; padding: 24px 24px 28px; }
.persona-in { display: grid; place-items: center; align-self: end; width: 40px; height: 40px; margin-top: 12px; border: 1px solid var(--wp--preset--color--line); border-radius: var(--r); font-size: 18px; color: var(--blue); transition: background var(--t-rapida), border-color var(--t-rapida), color var(--t-rapida); }
.persona-in .i { fill: currentColor; stroke: none; }
.sec--gris .persona { background: #fff; }
@media (hover: hover) {
	.persona-in:is(:hover, .is-hover) { border-color: var(--blue); background: var(--blue); color: #fff; }
}
@media (min-width: 782px) and (max-width: 1100px) { .equipo { grid-template-columns: 1fr 1fr; } }

/* ===== c/c28-vacantes.css ===== */
/* C28 Listado de vacantes (catálogo S31, Oportunidades laborales): H2 y bajada centrados y una tarjeta blanca por
   cargo en 3 columnas sobre gris: cargo, área y lugar con ícono, descripción y las acciones al pie (Postular y Más
   info). La última es la postulación abierta, en navy con la diagonal. 2 columnas bajo 1100 y 1 en móvil */
.vacantes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.vacante { display: grid; grid-template-rows: auto auto 1fr auto; gap: 14px; padding: var(--pad); border-radius: var(--r); background: #fff; }
.vacante p { line-height: 1.4; }
.vacante-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--wp--preset--font-size--small); font-weight: 500; color: var(--c-tit); }
.vacante-meta span { display: inline-flex; align-items: center; gap: 6px; }
.vacante-meta .i { font-size: 16px; color: var(--c-hl); }
.vacante .ctas { margin-top: 10px; gap: 12px 24px; }
.vacante--abierta { background: var(--diag-sec-navy) calc(22% - 1571.4px) top / 6000px 4000px no-repeat, var(--ink); }
@media (max-width: 1100px) { .vacantes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 781px) {
	.vacantes { grid-template-columns: 1fr; }
	.vacante .btn { width: auto; }
}

/* ===== c/c30-confirmacion.css ===== */
/* C30 Confirmación (catálogo S34): la página de gracias de un formulario. Navy con la diagonal que sube bajo el header
   (data-hero-color, como los heros de color) y una tarjeta blanca centrada de 640 con el check en un cuadro azul de 64,
   el título (H2: la página es una sola frase), la bajada y una acción. --evento suma los datos del evento (fecha y
   horarios por país) y el aviso del correo en panel. En móvil la tarjeta va al ancho con el padding de 20 */

.confirma { padding: 72px 0 var(--wp--preset--spacing--sec); }
.confirma[data-hero-color] { background: var(--diag-sec-navy) calc(var(--hero-dx, -169px) + .62487 * var(--hdr-h, 0px) - 2500px) top / 6000px 4000px no-repeat, var(--ink); }
.confirma-caja { display: grid; gap: 24px; justify-items: center; max-width: 640px; margin: 0 auto; padding: 56px 48px; border-radius: var(--r); background: #fff; text-align: center; }
.confirma-ico { display: grid; place-items: center; width: 64px; height: 64px; border-radius: var(--r); background: var(--blue); color: #fff; font-size: 32px; }
.confirma-caja .lead b { font-weight: 500; color: var(--c-tit); }

/* --evento: fecha y horarios en filas con su ícono, alineados a la izquierda dentro de la tarjeta */
.confirma-datos { display: grid; gap: 16px; width: 100%; padding: 24px 0; border-block: 1px solid var(--wp--preset--color--line); text-align: left; }
.confirma-datos > div { display: grid; grid-template-columns: 120px 1fr; gap: 16px; }
.confirma-datos dt { display: flex; align-items: center; gap: 8px; align-self: start; font-weight: 500; color: var(--c-tit); }
.confirma-datos dt .i { color: var(--blue); }
.confirma-datos ul { display: grid; gap: 6px; }
.confirma-datos b { font-weight: 500; color: var(--c-tit); font-variant-numeric: tabular-nums; }
.confirma-aviso { display: flex; gap: 12px; padding: 16px 20px; border-radius: var(--r); background: var(--wp--preset--color--panel); font-size: var(--wp--preset--font-size--small); line-height: 1.4; text-align: left; }
.confirma-aviso .i { flex: none; margin-top: 2px; font-size: 20px; color: var(--blue); }
.confirma-aviso b { font-weight: 500; color: var(--c-tit); }

@media (max-width: 781px) {
	.confirma { padding-top: 40px; }
	.confirma-caja { padding: 40px 20px; }
	.confirma-datos > div { grid-template-columns: 1fr; gap: 8px; }
}

/* --protegida (F28): el candado en el cuadro y el formulario de contraseña de WordPress en una fila: el campo de C04
   (46 de alto, borde de línea, foco azul) y el botón primario a su lado; en móvil, uno bajo el otro */
.confirma-clave { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 12px; width: 100%; text-align: left; }
.confirma-clave label { display: grid; gap: 6px; font-size: var(--wp--preset--font-size--small); font-weight: 500; color: var(--c-tit); }
.confirma-clave input { width: 100%; height: 46px; padding: 0 14px; border: 1px solid var(--wp--preset--color--line); border-radius: var(--r); font: 400 var(--wp--preset--font-size--body)/1.4 var(--wp--preset--font-family--body); color: var(--ink); }
.confirma-clave input:focus { outline: 2px solid var(--acento); outline-offset: 0; border-color: var(--blue); }
@media (max-width: 781px) {
	.confirma-clave { grid-template-columns: 1fr; }
}

/* ===== c/c31-aviso.css ===== */
/* C31 Aviso emergente (catálogo S33): los popups del sitio actual con piezas del design system. Dos variantes:
   --salida: modal centrado: foto a la izquierda y el panel navy con la diagonal de las secciones (sec--navy:
   la línea al 35 % del ancho del panel, 32° y su brillo) que se pierde abajo, con título, bajada y botón azul. Fondo
   navy al 55 %. Se cierra con la X, con Esc o con un clic fuera.
   --tarjeta: la tarjeta de recurso (C15) flotando abajo a la izquierda, con sombra y su X. No bloquea la página y no
   choca con el botón de WhatsApp, que va abajo a la derecha.
   Las reglas (dónde, cuándo y cada cuánto) las lleva el <dialog> en data-*: js/c31-aviso.js. En la guía se muestran abiertos */

.aviso { padding: 0; border: 0; background: transparent; color: var(--text); overflow: visible; }
.aviso:focus { outline: none; } /* el modal recibe el foco al abrir; el anillo queda para la X y el botón con teclado */
.aviso-cerrar { position: absolute; top: 12px; right: 12px; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--r); background: transparent; color: #fff; font-size: 22px; cursor: pointer; transition: background var(--t-rapida); }
.aviso-cerrar:is(:hover, .is-hover) { background: rgba(255, 255, 255, .14); }

/* ===== --salida: foto | panel navy con diagonal ===== */
.aviso--salida { width: min(760px, calc(100% - 2 * var(--gutter))); max-width: none; }
.aviso--salida::backdrop { background: rgba(1, 42, 73, .55); }
.aviso-caja { display: grid; grid-template-columns: 300px minmax(0, 1fr); border-radius: var(--r); overflow: hidden; background: var(--ink); }
.aviso-img { position: relative; min-height: 340px; }
.aviso-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.aviso-txt { display: grid; align-content: center; justify-items: start; gap: 20px; padding: 56px 48px 48px 40px; }
/* La diagonal de las secciones se funde a navy entre 280 y 560 px: en un panel de 340 de alto la línea llegaba entera al
   borde de abajo. El velo la funde dentro del panel, como se pierde en una sección */
/* En una caja chica la línea de las secciones (a 391 px) tapa medio panel: parte al 35 % del ancho, sobre la "r" de
   "Descubre" (Joaquín, 2026-11-05: medido 159 de 460 px y 114 de 318 en móvil). La línea está en x 2891,4
   de la imagen de 6000, así que calc(35% - 791,4px) la deja en 0,35 W para cualquier ancho */
.aviso-txt.sec--navy { position: relative; isolation: isolate; background-position: calc(35% - 791.4px) top; }
.aviso-txt.sec--navy::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(1, 42, 73, 0) 35%, var(--ink) 92%); }
.aviso-txt .btn { margin-top: 8px; }

/* ===== --tarjeta: la tarjeta de recurso suelta, abajo a la izquierda ===== */
.aviso--tarjeta { position: fixed; inset: auto auto 28px 28px; z-index: 41; width: 300px; margin: 0; }
.aviso--tarjeta .recurso { box-shadow: 0 8px 28px rgba(1, 42, 73, .22); }
.aviso--tarjeta .recurso-img { aspect-ratio: 16 / 9; }
.aviso--tarjeta .recurso-img img { transform: none; }
.aviso--tarjeta .aviso-cerrar { top: 22px; right: 22px; width: 32px; height: 32px; background: rgba(1, 42, 73, .6); font-size: 18px; }
.aviso--tarjeta .aviso-cerrar:is(:hover, .is-hover) { background: var(--ink); }

/* Entrada: sube y aparece (la misma curva de salida del resto) */
.aviso[open] { animation: aviso-entra var(--t-media) var(--e-salida); }
.aviso--salida[open]::backdrop { animation: aviso-velo var(--t-media) ease; }
@keyframes aviso-entra { from { opacity: 0; transform: translateY(16px); } }
@keyframes aviso-velo { from { opacity: 0; } }

/* Guía de estilos: abiertos y en su lugar, sobre gris para que se lea el borde */
.aviso-muestra .aviso { position: relative; inset: auto; margin: 0 auto; }

@media (max-width: 781px) {
	.aviso-caja { grid-template-columns: none; }
	.aviso-img { min-height: 0; aspect-ratio: 16 / 9; }
	.aviso-txt { padding: 32px 24px 28px; }
	.aviso--salida .aviso-cerrar { background: rgba(1, 42, 73, .6); } /* la X cae sobre la foto */
	.aviso--tarjeta { inset: auto 88px 20px 16px; width: auto; max-width: 300px; } /* 88: el WhatsApp de 52 a 16 del borde */
}
@media (prefers-reduced-motion: reduce) {
	.aviso[open], .aviso--salida[open]::backdrop { animation: none; }
}

/* ===== theme/drivin-ds/wp.css ===== */
/*
 * Lo que la estructura de WordPress obliga a ajustar sobre el CSS del design system (design/ds/). Va al final de
 * assets/css/ds.css (scripts/wp-ds-sync.mjs). Cada regla dice qué diferencia de markup corrige.
 */

/* Las secciones van a todo el ancho: el contenedor es .w de cada sección, no el layout de WordPress */
.wp-site-blocks > main, .wp-block-post-content { margin: 0; }
.wp-site-blocks > * + * { margin-block-start: 0; }

/* Template parts y el contenido de la página envuelven al header, a las secciones y al footer en un div o header
   propio. Sin caja, el header sticky se pega al body (como en el DS) y no a su envoltorio, que mide lo mismo que él */
.wp-site-blocks > .wp-block-template-part,
.wp-site-blocks > main,
.wp-block-post-content { display: contents; }

/* Blog (drivin/blog): en WordPress las etiquetas del filtro son enlaces a su archivo, no botones que filtran en el
   navegador (decisión 2 de docs/wordpress/mapeo-bloques.md). Mismo aspecto que .blog-chips button de c21; la actual
   va en relleno azul */
.blog-chips a { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border: 1px solid var(--wp--preset--color--line); border-radius: var(--r); background: #fff; font: 500 var(--wp--preset--font-size--small)/1 var(--wp--preset--font-family--body); color: var(--ink); text-decoration: none; transition: background var(--t-rapida), border-color var(--t-rapida), color var(--t-rapida); }
.blog-chips a[aria-current] { border-color: var(--blue); background: var(--blue); color: #fff; }
@media (hover: hover) { .blog-chips a:not([aria-current]):hover { border-color: var(--blue); color: var(--blue); } }

/* Hero de color bajo el header (c01): la regla de WordPress `:root :where(.is-layout-flow) > * { margin-block: 0 }`
   pesa lo mismo que .hero-bajo-menu y carga después, así que le ganaba y el hero no subía detrás del header */
:root .hero-bajo-menu { margin-top: calc(-1 * var(--hdr-h, 0px)); }

/* Formulario de demo dentro del texto de un artículo (el "Form CTA" de HubSpot, scripts/blog/importar.mjs): la versión
   oscura del DS en una caja navy como .art-banda, con las variables de .on-dark y el botón de .sec--navy */
.prosa > .form-demo--oscuro { --c-tit: #fff; --c-txt: var(--wp--custom--texto-oscuro); --c-link: #fff; --btn-bg: var(--blue); --btn-fg: #fff; --btn-hover: var(--wp--custom--accion-hover);
	padding: var(--pad); border-radius: var(--r); background: var(--diag-sec-navy) left -2500px top / 6000px 4000px no-repeat, var(--ink); color: var(--c-txt); }
.prosa > .form-demo--oscuro a { color: #fff; }

/* Imagen centrada en el texto (align:center de core/image; el theme no carga el CSS de bloques de core) */
.prosa .wp-block-image.aligncenter { width: fit-content; max-width: 100%; margin-inline: auto; }

/* Color de fondo por slide del hero (inc/fondo-slide.php). Sin foto: el color, sin velo. Con foto, la foto manda.
   .slide--claro: el color pide texto oscuro (lo decide el contraste en PHP) */
.slide--color { background: var(--slide-bg); }
.slide--color:not(:has(> img))::before { background: none; }
.slide--claro {
	--c-tit: var(--ink); --c-txt: var(--ink); --c-link: var(--blue); --c-hl: var(--blue);
	--btn-bg: var(--blue); --btn-fg: #fff; --btn-hover: var(--wp--custom--accion-hover); --btn-borde: var(--blue); --btn-velo: rgba(0, 85, 170, .08);
	color: var(--c-txt);
}
.hero-slider:has(.slide--claro.is-on) .dots i { background: rgba(2, 26, 45, .25); }
.hero-slider:has(.slide--claro.is-on) .dots i.on { background: var(--ink); }