/*
Theme Name: EcomExperts 2026
Theme URI: https://ecomexperts.com
Author: EcomExperts
Description: Tema de bloques propio para EcomExperts. Paleta cerrada y bloques bloqueados: el contenido se edita, la estructura y la marca no se rompen.
Version: 0.2.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ecomexperts
*/

/* ---------------------------------------------------------------
   Los colores vienen de theme.json. Aquí solo se nombran por función,
   para que el CSS diga qué hace un color y no cuál es.
   --------------------------------------------------------------- */
:root {
	--ee-tinta:      var(--wp--preset--color--contraste);
	--ee-papel:      var(--wp--preset--color--base);
	--ee-accion:     var(--wp--preset--color--azul);
	--ee-sincro:     var(--wp--preset--color--menta);
	/* El menta de marca sobre blanco da 1,74:1: sirve de relleno pero no como
	   texto ni como trazo fino. Esta versión oscurecida da 4,74:1 y es la que
	   usan el estado «Sincronizado» del panel y las flechas de los diagramas. */
	--ee-sincro-oscuro: #12805f;
	--ee-cta:        var(--wp--preset--color--accion);
	/* El degradado de marca oscurecido hasta que TODO su recorrido cumpla con
	   texto blanco: 6,61:1 en su peor punto. El original falla en los dos
	   extremos, 4,42:1 en el azul y 3,96:1 en el magenta. */
	--ee-grad:       linear-gradient(90deg, #3f3d8f 0%, #a82a63 100%);
	/* Los tres colores de marca, para la regla de la cabecera. Aquí no hay
	   texto encima, así que van en su versión original y saturada. */
	--ee-grad-marca: linear-gradient(90deg, #5e76b7 0%, #31d19d 50%, #e73b7b 100%);
	/* Los mismos tres colores de marca, pero oscurecidos hasta que sirvan
	   como texto. El saturado cae a 1,96:1 en el verde y un titular necesita
	   3:1; este da 4,91:1 en su peor punto. */
	--ee-grad-texto: linear-gradient(100deg, #3062ab 0%, #12805f 48%, #a82a63 100%);
	--ee-alerta:     var(--wp--preset--color--magenta);
	--ee-superficie: var(--wp--preset--color--violeta);
	--ee-linea:      #e4e8f0;
	--ee-linea-viva: #ccd4e4;
	--ee-apagado:    #667089;
	--ee-fondo:      var(--wp--preset--color--gris-suave);
	--ee-cabecera:   68px;
}

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

body { -webkit-font-smoothing: antialiased; }

:where(a):focus-visible,
:where(button):focus-visible {
	outline: 2px solid var(--ee-accion);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ===============================================================
   CABECERA
   =============================================================== */
/* El sticky va en el contenedor que genera WordPress, no en la cabecera.
   Un elemento sticky solo se pega dentro de los límites de su padre, y ese
   contenedor mide exactamente lo mismo que la cabecera: sin recorrido donde
   pegarse, no se pega nunca. */
header.wp-block-template-part:has(> .ee-cabecera) {
	position: sticky;
	top: 0;
	z-index: 50;
}

.ee-cabecera {
	position: relative;
	background: var(--ee-papel);
}
/* Regla de degradado en lugar del filete gris: es lo primero que se ve al
   entrar y ocupa el lugar donde los siete competidores ponen una línea gris. */
.ee-cabecera::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 2px;
	background: var(--ee-grad);
}

.ee-cabecera__barra {
	max-width: var(--ee-riel);
	margin: 0 auto;
	padding: 0 var(--ee-costado);
	height: var(--ee-cabecera);
	display: flex;
	align-items: center;
	gap: 32px;
}

.ee-marca { display: flex; align-items: center; flex: 0 0 auto; }
.ee-marca img { display: block; height: 36px; width: auto; }

/* ---- navegación ---- */
/* La navegación se estira a toda la altura de la cabecera. Sin esto, el
   desplegable simple se posiciona respecto de un ítem más bajo que la barra
   y arranca a media altura, superponiéndose a la regla de degradado. */
.ee-nav { display: flex; align-self: stretch; align-items: stretch; gap: 2px; margin-right: auto; }

.ee-nav__item { position: static; display: flex; align-items: center; }

.ee-nav__enlace {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 14px;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--ee-tinta);
	text-decoration: none;
	border-radius: 4px;
	background: none;
	border: 0;
	cursor: pointer;
	font-family: inherit;
}
.ee-nav__enlace:hover { background: var(--ee-fondo); }

.ee-nav__flecha {
	width: 9px; height: 9px;
	border-right: 1.5px solid var(--ee-apagado);
	border-bottom: 1.5px solid var(--ee-apagado);
	transform: translateY(-2px) rotate(45deg);
	transition: transform .16s ease;
}
.ee-nav__item:hover .ee-nav__flecha,
.ee-nav__item:focus-within .ee-nav__flecha { transform: translateY(1px) rotate(225deg); }

/* ---- menú extendido ----
   Abre con el cursor y también con el foco del teclado: sin :focus-within
   el menú sería inaccesible para quien navega con tabulador. */
.ee-mega {
	position: absolute;
	left: 0; right: 0;
	top: 100%;
	background: var(--ee-papel);
	border-bottom: 1px solid var(--ee-linea);
	box-shadow: 0 18px 40px -24px rgba(31, 42, 60, .28);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.ee-nav__item:hover > .ee-mega,
.ee-nav__item:focus-within > .ee-mega {
	opacity: 1; visibility: visible; transform: translateY(0);
}

.ee-mega__interior {
	max-width: var(--ee-riel);
	margin: 0 auto;
	padding: 28px var(--ee-costado) 32px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px 28px;
}

.ee-mega__ficha {
	display: grid;
	grid-template-columns: 40px 1fr;
	gap: 14px;
	padding: 14px;
	border-radius: 6px;
	text-decoration: none;
	border: 1px solid transparent;
}
.ee-mega__ficha:hover { background: var(--ee-fondo); border-color: var(--ee-linea); }

.ee-mega__icono {
	width: 40px; height: 40px;
	display: grid; place-items: center;
	border: 1px solid var(--ee-linea-viva);
	border-radius: 5px;
	background: var(--ee-papel);
}
.ee-mega__titulo {
	display: block;
	font-weight: 700;
	color: var(--ee-tinta);
	font-size: 0.9375rem;
	margin-bottom: 3px;
}
.ee-mega__desc {
	display: block;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--ee-apagado);
}
.ee-mega__pie {
	grid-column: 1 / -1;
	border-top: 1px solid var(--ee-linea);
	margin-top: 8px;
	padding-top: 16px;
	display: flex;
	gap: 24px;
	font-size: 0.8125rem;
}
.ee-mega__pie a { color: var(--ee-accion); font-weight: 600; text-decoration: none; }
.ee-mega__pie a:hover { text-decoration: underline; }

/* ---- acciones de la derecha ---- */
.ee-acciones { display: flex; align-items: center; gap: 18px; flex: 0 0 auto; }

.ee-pais {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 0.8125rem; font-weight: 600; color: var(--ee-apagado);
	text-decoration: none; letter-spacing: .04em;
}
.ee-ingresar {
	font-size: 0.9375rem; font-weight: 600;
	color: var(--ee-tinta); text-decoration: none;
}
.ee-ingresar:hover { color: var(--ee-accion); }

/* Magenta de acción con texto blanco: 5,25:1.
   Es el magenta de marca oscurecido hasta que cumpla accesibilidad — el
   original da 3,96:1 y el botón mide 15 px, así que no califica como texto
   grande por ningún lado. No se usa el menta aquí: el menta significa
   "sincronizado" en el panel del hero y dos cosas distintas del mismo color
   se leen como la misma cosa. */
.ee-boton {
	display: inline-flex; align-items: center;
	padding: 11px 20px;
	background: var(--ee-cta);
	background-image: var(--ee-grad);
	color: #ffffff;
	font-weight: 800;
	font-size: 0.9375rem;
	text-decoration: none;
	border-radius: 4px;
	border: 0;
	/* Los degradados no interpolan en una transición, así que el estado de
	   hover se resuelve con brillo, que sí lo hace. */
	transition: transform .12s ease, filter .12s ease;
}
.ee-boton:hover { filter: brightness(.9); transform: translateY(-1px); }
.ee-boton--grande { padding: 16px 30px; font-size: 1.0625rem; }

/* ===============================================================
   PORTADA
   =============================================================== */
/* WordPress le pone 24 px de margen al main por su separación de bloques.
   Sumados a los 76 del hero daban 109 px de vacío entre la cabecera y el
   primer texto, que es el espacio más caro de la página. */
.wp-site-blocks > main { margin-top: 0; }
/* 28 y no 34: el alto arriba del pliegue es lo más caro de la página. Medido,
   deja 37 px entre el borde del menú y la tinta del titular; con 22 quedaban
   31 y se veía apretado. Lo que de verdad achicó el hero fue recortar el
   lienzo vacío del circuito, no este relleno. */
.ee-hero { padding: 28px var(--ee-costado) 0; }
.ee-hero__interior {
	max-width: var(--ee-ancho); margin: 0 auto;
	/* 42/58 y no 56/44: el diagrama de la derecha está dibujado sobre un lienzo
	   de 760 y cuanto más ancho entre, más grande queda su tipografía. El
	   titular, que es lo que pedía la columna ancha, necesita 449 px a 51 y le
	   quedan 470. */
	display: grid; grid-template-columns: .84fr 1.16fr;
	gap: 56px; align-items: center;
}

.ee-antetitulo {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 0.75rem; font-weight: 800;
	letter-spacing: .11em; text-transform: uppercase;
	color: var(--ee-accion);
	margin-bottom: 20px;
}
.ee-antetitulo::before {
	content: ""; width: 22px; height: 2px; background: var(--ee-sincro);
}

.ee-hero h1 {
	/* El tope baja de 3,9rem a 3,2 para dejarle ancho al diagrama. Sigue siendo
	   el texto más grande del sitio: los h2 de sección están en 2,5. */
	font-size: clamp(2.4rem, 1.6rem + 2.6vw, 3.2rem);
	line-height: 1.04;
	letter-spacing: -.022em;
	font-weight: 800;
	margin: 0 0 22px;
	text-wrap: balance;
	/* 17ch deja entrar «¡integra tus canales!» en un renglón; con 15
	   partía en dos y el titular se iba a cuatro. */
	max-width: 17ch;
}
/* Sin nowrap: las frases que se escriben llegan a 730 px y la columna
   tiene 652, así que tienen que poder partir en dos renglones. */
.ee-hero h1 em { font-style: normal; color: var(--ee-accion); display: block; }
/* La palabra que se escribe lleva el degradado de marca recortado sobre el
   texto. Va dentro de @supports porque sin recorte el texto quedaría
   transparente, o sea invisible. */
@supports (-webkit-background-clip: text) or (background-clip: text) {
	.ee-hero h1 em {
		background: var(--ee-grad-texto);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
		/* El interlineado del titular es 1.04, más apretado que el alto
		   natural de la fuente: los glifos sobresalen unos 6 px arriba y
		   abajo de su caja. Con el degradado recortado sobre el texto, lo
		   que cae fuera de la caja no se pinta, y como el color es
		   transparente desaparece: la cola de la «g» de «integra» quedaba
		   cortada. El relleno agranda la caja que se pinta y el margen
		   negativo lo devuelve, así que no se mueve nada. */
		padding-block: .18em;
		margin-block: -.18em;
	}
	/* El cursor tomaba currentColor, que ahora es transparente. */
	.ee-tipeo.escribiendo::after { background: #a82a63; }
}

/* Cursor del tipeo. Solo aparece mientras la animación corre: el estado
   final del titular no lleva cursor. */
.ee-tipeo.escribiendo::after {
	content: "";
	display: inline-block;
	width: 3px; height: .82em;
	margin-left: 3px;
	vertical-align: -.06em;
	background: currentColor;
	animation: ee-parpadeo 1s steps(2, start) infinite;
}
@keyframes ee-parpadeo { to { visibility: hidden; } }

/* Quien pidió menos movimiento ve el titular terminado, sin animación. */
@media (prefers-reduced-motion: reduce) {
	.ee-tipeo.escribiendo::after { display: none; animation: none; }
}

.ee-hero__bajada {
	font-size: 1.1875rem; line-height: 1.6;
	color: #46516b; max-width: 34rem; margin: 0 0 32px;
}

.ee-hero__acciones { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.ee-hero__nota { font-size: 0.875rem; color: var(--ee-apagado); }
.ee-hero__secundario {
	display: block; margin-top: 22px; font-size: 0.9375rem;
	color: var(--ee-accion); font-weight: 600; text-decoration: none;
}
.ee-hero__secundario:hover { text-decoration: underline; }

/* ---- prueba ---- */
/* La franja de confianza es una sección propia y no parte del hero: así se
   puede agregar y quitar logos desde el editor, que dentro del hero quedaba
   bloqueado por la estructura de esa sección. */
.ee-confianza { padding: 0 0 56px; }

.ee-prueba {
	max-width: var(--ee-riel); margin: 0 auto; padding: 30px var(--ee-costado) 0;
	border-top: 1px solid var(--ee-linea);
	display: flex; align-items: center; gap: 30px; flex-wrap: wrap;
}
.ee-prueba__texto {
	font-size: 0.8125rem; font-weight: 700; letter-spacing: .06em;
	text-transform: uppercase; color: var(--ee-apagado);
}
.ee-prueba figure { margin: 0; }
.ee-prueba img { height: 40px; width: auto; object-fit: contain; }
.ee-prueba__grupo { display: flex; align-items: center; gap: 26px; }

@media (max-width: 980px) {
	.ee-hero__interior { grid-template-columns: 1fr; gap: 44px; }
	/* Sin tope, en una sola columna la pieza del hero se estiraba a 852 px
	   —más que en un monitor de 1920, donde mide 512— y habría que exportar
	   la imagen para el caso más ancho, que es el más chico de pantalla. */
	/* El «width» hace falta: con «margin-inline: auto» un ítem de grid deja de
	   estirarse y pasa a medir su contenido, que son 519 px, no los 560. */
	.ee-panel { width: 100%; max-width: 560px; margin-inline: auto; }
	.ee-nav, .ee-pais { display: none; }
}

/* ---- panel de canales del hero: muestra el mecanismo, no lo describe ---- */
/* ---- Diagrama animado del hero ----
   La escena mide 760x500 fijos: son tarjetas ubicadas a mano contra las curvas
   del SVG, y rehacerlas en unidades relativas las despegaría de su hilo. Se
   achica entera con «scale» contra el ancho del contenedor, medido en cqw, que
   es lo que evita tener que calcularlo con JavaScript. */
.ee-circuito { margin: 0; container-type: inline-size; }
.ee-circuito__escena {
	width: 760px; height: 500px; position: relative;
	--ee-k: calc(100cqw / 760px);
	transform: scale(var(--ee-k));
	transform-origin: top left;
	/* Dos correcciones en los márgenes. La primera: lo que ocupa de verdad es
	   el alto escalado, no los 500 del lienzo. La segunda: el dibujo no llega
	   a los bordes del lienzo —arriba sobran 70 unidades y abajo 36, que el
	   render calcula porque cambian con el país— y ese aire era alto del hero
	   sin nada dibujado. */
	margin-top: calc(var(--ee-tope, 0) * -1px * var(--ee-k));
	margin-bottom: calc(500px * var(--ee-k) - 500px - var(--ee-piso, 0) * 1px * var(--ee-k));
	font-size: 10px; line-height: 1.25;
}
.ee-circuito__hilos { position: absolute; inset: 0; width: 760px; height: 500px; }
.ee-circuito__hilos g { stroke: #dfe2f0; stroke-width: 2; stroke-dasharray: 6 6; fill: none; }
.ee-circuito__pulsos { position: absolute; inset: 0; }
.ee-circuito__pulso {
	position: absolute; left: 0; top: 0; width: 32px; height: 32px;
	border-radius: 50%; display: grid; place-items: center;
	box-shadow: 0 3px 8px rgba(44, 46, 91, .25);
	z-index: 0; will-change: transform;
	animation-timing-function: linear; animation-fill-mode: forwards;
}
.ee-circuito__caja {
	position: absolute; transform: translate(-50%, -50%);
	background: #fff; border: 1.5px solid #e3e7f5; border-radius: 18px;
	box-shadow: 0 10px 26px rgba(44, 46, 91, .16);
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 7px; z-index: 1;
}
/* El alto lo pone el render: depende de cuántas píldoras tenga el país. */
.ee-circuito__caja--mk     { left: 150px; top: 192px; width: 216px; gap: 8px; padding: 22px 0; }
.ee-circuito__caja--tienda { left: 150px; top: 406px; width: 208px; height: 116px; gap: 8px; }
/* El alto lo pone el render en las tres: depende de cuántas píldoras haya en
   ese país. Las de la derecha son más angostas porque el nombre más largo que
   les entra es «Mercado Envíos». */
.ee-circuito__caja--log    { left: 650px; top: 130px; width: 196px; gap: 8px; padding: 18px 0; }
.ee-circuito__caja--fis    { left: 650px; top: 370px; width: 196px; gap: 8px; padding: 18px 0; }
.ee-circuito__caja--log .ee-circuito__chip,
.ee-circuito__caja--fis .ee-circuito__chip { width: 164px; }
/* Cuando el país todavía no tiene el rubro, la píldora lo dice en vez de que
   la tarjeta desaparezca: el circuito perdería una de sus cuatro patas. */
.ee-circuito__chip--pronto {
	justify-content: center; color: #9a9db8; font-style: italic;
	background: transparent; border: 1px dashed #d5d9e8;
}
.ee-circuito__caja--hub {
	left: 400px; top: 245px; width: 126px; height: 126px;
	border: 0; border-radius: 50%; gap: 4px; z-index: 2;
	box-shadow: 0 10px 28px rgba(44, 46, 91, .18);
}
.ee-circuito__marca { width: 92px; height: auto; }

.ee-circuito__rubro {
	margin: 0; font-size: 9.5px; font-weight: 700; letter-spacing: 1px;
	text-transform: uppercase;
}
.ee-circuito__chip {
	display: flex; align-items: center; gap: 8px;
	width: 184px; height: 34px; border-radius: 17px;
	background: #f5f6fb; padding: 0 12px; box-sizing: border-box;
	font-size: 10px; font-weight: 600; color: #2C2E5B; white-space: nowrap;
}
.ee-circuito__chip img { width: 18px; height: 18px; object-fit: contain; flex: 0 0 auto; }
.ee-circuito__mas { margin: 0; font-size: 10px; font-weight: 600; color: #7a7d9c; }
/* La rueda de plataformas. Se ven dos píldoras y la tira sube de a dos cada
   2,6 s. No es un fundido cruzado: dos logos distintos superpuestos a media
   opacidad se ven sucios, y una tira que sube se lee como «hay más abajo»,
   que es justo lo que quiere decir. */
.ee-circuito__ventana { height: 34px; overflow: hidden; width: 176px; }
.ee-circuito__rueda {
	display: flex; flex-direction: column; gap: 8px;
	transition: transform .5s cubic-bezier(.65, 0, .35, 1);
	will-change: transform;
}
.ee-circuito__caja--tienda .ee-circuito__chip { width: 176px; }
.ee-circuito__redondo {
	width: 34px; height: 34px; border-radius: 50%; background: #f5f6fb;
	display: grid; place-items: center; flex: 0 0 auto;
}
.ee-circuito__redondo--grande { width: 44px; height: 44px; }
.ee-circuito__redondo--grande img { width: 70%; height: 70%; object-fit: contain; }
.ee-circuito__redondo img { object-fit: contain; }

.ee-circuito__halo {
	position: absolute; left: 400px; top: 245px; width: 150px; height: 150px;
	border-radius: 50%; background: radial-gradient(circle, rgba(138, 86, 201, .18), transparent 70%);
	transform: translate(-50%, -50%);
	/* Promovido a capa propia: sin esto el degradado radial se vuelve a
	   rasterizar en cada cuadro, que era el grueso del costo de CPU. */
	will-change: transform, opacity;
	animation: ee-circuito-halo 2.8s ease-out infinite;
}
@keyframes ee-circuito-halo {
	from { transform: translate(-50%, -50%) scale(.9); opacity: .5; }
	to   { transform: translate(-50%, -50%) scale(1.35); opacity: 0; }
}
.ee-circuito__caja.ee-circuito--late { animation: ee-circuito-late .5s ease; }
.ee-circuito__chip.ee-circuito--late { animation: ee-circuito-late-chip .5s ease; }
@keyframes ee-circuito-late {
	0%, 100% { transform: translate(-50%, -50%) scale(1); }
	40%      { transform: translate(-50%, -50%) scale(1.13); }
}
@keyframes ee-circuito-late-chip { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.12); } }

/* Los seis textos están en el marcado para que los lea un buscador o un
   modelo; se muestra el del paso activo. */
.ee-circuito__pie { margin: 14px 0 0; min-height: 3em; }
.ee-circuito__texto { display: none; margin: 0; font-size: 0.9375rem; text-align: center; text-wrap: balance; }
.ee-circuito__texto[data-activo] { display: block; }
.ee-circuito__texto b { font-weight: 700; margin-right: 6px; }
.ee-circuito__pasos { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; }
.ee-circuito__paso {
	border: 0; padding: 8px 18px; border-radius: 999px; cursor: pointer;
	background: #eef0f6; color: #7a7d9c;
	font: inherit; font-size: 0.8125rem; font-weight: 600;
	transition: background .18s ease, color .18s ease;
}
.ee-circuito__paso[data-activo] { background: var(--ee-paso-color); color: #fff; }
.ee-circuito__paso:focus-visible { outline: 2px solid var(--ee-accion); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
	.ee-circuito__halo, .ee-circuito__pulso, .ee-circuito__caja, .ee-circuito__chip { animation: none; }
}

/* En pantalla chica el circuito entero no se muestra. El dibujo no entra —la
   escena mide 760 y en un teléfono se achica a 0,44: los rótulos quedan en
   4,2 px— y los seis textos solos, sin el dibujo que explican, quedaban
   colgados debajo del botón.

   Se ocultan con «display: none» y no se sacan del marcado: el HTML es el
   mismo en todos los anchos, así que un buscador o un modelo siguen leyendo
   los seis pasos. */
@media (max-width: 760px) {
	.ee-circuito { display: none; }
}

/* La pieza del hero: hoy una imagen de ejemplo, mañana lo que se ponga en su
   lugar desde el editor. Misma caja que el panel de canales —esquinas y sombra
   iguales— para que cambiar una por otra no mueva nada alrededor. */
.ee-hero__pieza { margin: 0; }
.ee-hero__pieza img {
	display: block; width: 100%; height: auto;
	border-radius: 8px;
	box-shadow: 0 24px 48px -32px rgba(31, 42, 60, .35);
}
/* El tope va acá y no junto al del panel: las media queries no suman
   especificidad, así que allá arriba el «margin: 0» de la línea anterior le
   ganaba al «auto» y la imagen quedaba pegada a la izquierda. */
@media (max-width: 980px) {
	.ee-hero__pieza { max-width: 560px; margin-inline: auto; }
}

.ee-panel {
	border: 1px solid var(--ee-linea-viva);
	border-radius: 8px;
	background: var(--ee-papel);
	box-shadow: 0 24px 48px -32px rgba(31, 42, 60, .35);
	overflow: hidden;
}
.ee-panel__cabeza {
	display: flex; align-items: center; justify-content: space-between;
	padding: 13px 18px;
	border-bottom: 1px solid var(--ee-linea);
	background: var(--ee-fondo);
	font-size: 0.75rem; font-weight: 800;
	letter-spacing: .08em; text-transform: uppercase; color: var(--ee-apagado);
}
.ee-panel__sku {
	display: grid; grid-template-columns: 46px 1fr auto;
	gap: 14px; align-items: center;
	padding: 18px;
	border-bottom: 2px solid var(--ee-tinta);
}
.ee-panel__miniatura {
	width: 46px; height: 46px; border-radius: 5px;
	background: linear-gradient(150deg, var(--ee-superficie), var(--ee-alerta));
}
.ee-panel__nombre { font-weight: 700; font-size: 0.9375rem; }
.ee-panel__codigo { font-size: 0.75rem; color: var(--ee-apagado); font-variant-numeric: tabular-nums; }
.ee-panel__stock {
	font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums;
	line-height: 1;
}
.ee-panel__stock small { display: block; font-size: 0.6875rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ee-apagado); margin-top: 4px; }

.ee-canal {
	display: grid; grid-template-columns: 18px 1fr auto auto;
	gap: 14px; align-items: center;
	padding: 13px 18px;
	border-bottom: 1px solid var(--ee-linea);
	font-size: 0.9375rem;
}
.ee-canal:last-child { border-bottom: 0; }
.ee-canal__rama {
	justify-self: center; width: 1px; height: 100%;
	background: var(--ee-sincro); position: relative;
}
.ee-canal__rama::after {
	content: ""; position: absolute; left: 0; top: 50%;
	width: 9px; height: 1px; background: var(--ee-sincro);
}
.ee-canal__numero { font-variant-numeric: tabular-nums; font-weight: 700; }
.ee-canal__estado {
	display: inline-flex; align-items: center; gap: 5px;
	font-size: 0.6875rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
	color: var(--ee-sincro-oscuro);
}
.ee-canal__punto { width: 7px; height: 7px; border-radius: 50%; background: var(--ee-sincro); }
.ee-panel__pie {
	padding: 12px 18px; background: var(--ee-fondo);
	border-top: 1px solid var(--ee-linea);
	font-size: 0.8125rem; color: var(--ee-apagado);
}

/* ---- desplegable simple: para listas cortas de enlaces sin descripción ---- */
.ee-nav__item--simple { position: relative; }

.ee-drop {
	position: absolute;
	/* +2 px para pasar por debajo de la regla de degradado de la cabecera. */
	top: calc(100% + 2px);
	left: 0;
	min-width: 210px;
	padding: 8px;
	background: var(--ee-papel);
	border: 1px solid var(--ee-linea);
	border-radius: 6px;
	box-shadow: 0 16px 34px -22px rgba(31, 42, 60, .34);
	opacity: 0; visibility: hidden; transform: translateY(-6px);
	transition: opacity .14s ease, transform .14s ease, visibility .14s;
}
.ee-nav__item--simple:hover > .ee-drop,
.ee-nav__item--simple:focus-within > .ee-drop {
	opacity: 1; visibility: visible; transform: translateY(0);
}
.ee-drop a {
	display: block;
	padding: 9px 12px;
	border-radius: 4px;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--ee-tinta);
	text-decoration: none;
}
.ee-drop a:hover { background: var(--ee-fondo); color: var(--ee-accion); }

/* Recurso anunciado pero todavía sin URL. Mismo renglón que sus vecinos para
   que la lista no se desalinee, en gris y sin cursor de mano: se lee que
   existe y se lee que todavía no se puede tocar. */
.ee-pendiente {
	display: flex; align-items: baseline; gap: 7px;
	padding: 9px 12px;
	font-size: 0.9375rem; font-weight: 600;
	color: var(--ee-apagado);
	cursor: default;
}
.ee-pendiente small {
	font-size: 0.6875rem; font-weight: 800;
	letter-spacing: .06em; text-transform: uppercase;
	color: var(--ee-papel);
	background: var(--ee-apagado);
	border-radius: 3px; padding: 2px 5px;
}

/* ---- iconos de aplicaciones integradas: logos oficiales de cada marca ----
   Recuadro blanco con filete, para que cada logo aporte su propio color sin
   que le impongamos un fondo que su manual de marca no autoriza. */
.ee-app {
	width: 36px; height: 36px;
	border: 1px solid var(--ee-linea);
	border-radius: 7px;
	display: grid; place-items: center;
	padding: 5px;
	flex: 0 0 auto;
	background: var(--ee-papel);
}
.ee-app img { width: 24px; height: 24px; object-fit: contain; display: block; }
.ee-mega__ficha--app { grid-template-columns: 36px 1fr; }

/* ---- selector de país ---- */
.ee-pais-menu { position: relative; }
.ee-pais {
	background: none; border: 1px solid var(--ee-linea);
	border-radius: 4px; padding: 7px 10px;
	cursor: pointer; font-family: inherit;
}
.ee-pais:hover { border-color: var(--ee-linea-viva); }
.ee-pais .ee-nav__flecha { width: 7px; height: 7px; }

.ee-pais-lista {
	position: absolute; top: calc(100% + 6px); right: 0;
	min-width: 170px; padding: 6px;
	background: var(--ee-papel);
	border: 1px solid var(--ee-linea);
	border-radius: 6px;
	box-shadow: 0 16px 34px -22px rgba(31, 42, 60, .34);
	opacity: 0; visibility: hidden; transform: translateY(-6px);
	transition: opacity .14s ease, transform .14s ease, visibility .14s;
	z-index: 2;
}
.ee-pais-menu:hover > .ee-pais-lista,
.ee-pais-menu:focus-within > .ee-pais-lista {
	opacity: 1; visibility: visible; transform: translateY(0);
}
.ee-pais-lista a {
	display: flex; align-items: center; gap: 9px;
	padding: 8px 10px; border-radius: 4px;
	font-size: 0.875rem; font-weight: 600;
	color: var(--ee-tinta); text-decoration: none;
}
.ee-pais-lista a:hover { background: var(--ee-fondo); }
.ee-pais-lista a[aria-current="true"] { color: var(--ee-accion); }
.ee-pais-lista__codigo {
	font-size: 0.6875rem; font-weight: 800; letter-spacing: .06em;
	color: var(--ee-apagado); margin-left: auto;
}
.ee-pais-lista__nota {
	border-top: 1px solid var(--ee-linea);
	margin-top: 6px; padding: 9px 10px 4px;
	font-size: 0.75rem; line-height: 1.45; color: var(--ee-apagado);
}

/* dos columnas cuando el menú extendido lleva ocho ítems */
.ee-mega__interior--ocho { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1180px) { .ee-mega__interior--ocho { grid-template-columns: repeat(3, 1fr); } }

/* ---- menú de integraciones agrupado por categoría ---- */
.ee-mega__interior--grupos { grid-template-columns: 1.05fr 1.05fr .9fr; gap: 0; }

.ee-mega__grupo { padding: 0 26px; border-left: 1px solid var(--ee-linea); }
.ee-mega__grupo:first-child { padding-left: 0; border-left: 0; }
.ee-mega__grupo:last-child { padding-right: 0; }

.ee-mega__rubro {
	font-size: 0.6875rem; font-weight: 800;
	letter-spacing: .1em; text-transform: uppercase;
	color: var(--ee-apagado);
	margin: 0 0 10px 14px;
}
.ee-mega__grupo .ee-mega__ficha { padding: 11px 14px; }

/* Los organismos fiscales son logotipos horizontales y cambian por país:
   en vez de meterlos en un recuadro cuadrado donde entran apretados, van
   como filas con el código de país adelante. */
.ee-fiscal {
	display: grid; grid-template-columns: 34px 1fr;
	gap: 12px; align-items: center;
	padding: 10px 14px; border-radius: 6px;
	text-decoration: none; border: 1px solid transparent;
}
.ee-fiscal:hover { background: var(--ee-fondo); border-color: var(--ee-linea); }
.ee-fiscal__pais {
	display: grid; place-items: center;
	height: 26px; border-radius: 4px;
	background: var(--ee-fondo); border: 1px solid var(--ee-linea);
	font-size: 0.6875rem; font-weight: 800; letter-spacing: .05em;
	color: var(--ee-apagado);
}
.ee-fiscal__nombre { font-weight: 700; font-size: 0.9375rem; color: var(--ee-tinta); }
.ee-fiscal__desc { display: block; font-size: 0.8125rem; color: var(--ee-apagado); margin-top: 1px; }
.ee-fiscal--activo .ee-fiscal__pais {
	background: #eaf6f1; border-color: #b7e5d3; color: #12805f;
}

.ee-mega__nota {
	margin: 10px 14px 0;
	font-size: 0.75rem; line-height: 1.5; color: var(--ee-apagado);
}
@media (max-width: 1080px) {
	.ee-mega__interior--grupos { grid-template-columns: 1fr 1fr; }
	.ee-mega__grupo:nth-child(3) { grid-column: 1 / -1; border-left: 0; padding-left: 0; border-top: 1px solid var(--ee-linea); padding-top: 18px; margin-top: 14px; }
}

/* ===============================================================
   PIE
   =============================================================== */
.ee-pie { border-top: 1px solid var(--ee-linea); background: var(--ee-papel); }
.ee-pie__interior {
	max-width: var(--ee-riel); margin: 0 auto; padding: 54px var(--ee-costado) 36px;
	display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 40px;
}
.ee-pie__marca img { height: 28px; width: auto; display: block; margin-bottom: 16px; }
.ee-pie__lema { font-size: 0.875rem; line-height: 1.6; color: var(--ee-apagado); max-width: 24ch; }

.ee-pie__rubro {
	font-size: 0.6875rem; font-weight: 800; letter-spacing: .1em;
	text-transform: uppercase; color: var(--ee-apagado); margin: 0 0 14px;
}
.ee-pie__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.ee-pie__lista a { font-size: 0.875rem; color: var(--ee-tinta); text-decoration: none; }
/* El botón de preferencias de cookies vive entre los enlaces legales del
   pie y tiene que verse igual que ellos. */
.ee-pie__cookies {
	font: inherit; background: none; border: 0; padding: 0; cursor: pointer;
	color: inherit; text-align: left;
}
.ee-pie__cookies:hover { text-decoration: underline; }
.ee-pie__lista a:hover { color: var(--ee-accion); text-decoration: underline; }

.ee-pie__barra {
	border-top: 1px solid var(--ee-linea);
	max-width: var(--ee-riel); margin: 0 auto; padding: 20px var(--ee-costado) 34px;
	display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
	font-size: 0.8125rem; color: var(--ee-apagado);
}
.ee-pie__fiscal { margin-left: auto; text-align: right; line-height: 1.5; }

/* ---- selector de país, al pie: se despliega hacia arriba ---- */
.ee-selector { position: relative; }
.ee-selector__boton {
	display: inline-flex; align-items: center; gap: 9px;
	padding: 9px 13px; background: var(--ee-papel);
	border: 1px solid var(--ee-linea-viva); border-radius: 5px;
	font-family: inherit; font-size: 0.875rem; font-weight: 600;
	color: var(--ee-tinta); cursor: pointer;
}
.ee-selector__boton:hover { border-color: var(--ee-accion); }
.ee-selector__boton .ee-nav__flecha { transform: translateY(1px) rotate(225deg); width: 8px; height: 8px; }

.ee-selector__lista {
	position: absolute; bottom: calc(100% + 8px); left: 0;
	min-width: 220px; padding: 6px;
	background: var(--ee-papel); border: 1px solid var(--ee-linea);
	border-radius: 6px; box-shadow: 0 -14px 34px -20px rgba(31, 42, 60, .36);
	opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity .14s ease, transform .14s ease, visibility .14s;
	z-index: 3;
}
.ee-selector:hover > .ee-selector__lista,
.ee-selector:focus-within > .ee-selector__lista { opacity: 1; visibility: visible; transform: translateY(0); }
.ee-selector__lista a {
	display: flex; align-items: center; gap: 10px;
	padding: 9px 11px; border-radius: 4px;
	font-size: 0.875rem; font-weight: 600; color: var(--ee-tinta); text-decoration: none;
}
.ee-selector__lista a:hover { background: var(--ee-fondo); }
.ee-selector__lista a[aria-current="true"] { color: var(--ee-accion); }
/* El globo del «Global»: mismo hueco que las banderas, para que los renglones
   del selector arranquen todos en la misma columna. */
.ee-selector__globo {
	width: 20px; height: 14px; flex: 0 0 auto; border-radius: 2px;
	background: var(--ee-fondo); border: 1px solid var(--ee-linea-viva);
	position: relative;
}
.ee-selector__globo::before {
	content: ""; position: absolute; inset: 3px 6px;
	border: 1px solid var(--ee-apagado); border-radius: 50%;
}
.ee-selector__cod {
	margin-left: auto; font-size: 0.6875rem; font-weight: 800;
	letter-spacing: .05em; color: var(--ee-apagado);
}
.ee-selector__otros {
	border-top: 1px solid var(--ee-linea); margin-top: 6px; padding: 10px 11px 5px;
	font-size: 0.75rem; line-height: 1.5; color: var(--ee-apagado);
}
.ee-selector__otros a { display: inline; padding: 0; color: var(--ee-accion); }

@media (max-width: 1020px) {
	.ee-pie__interior { grid-template-columns: 1fr 1fr; gap: 34px; }
	.ee-pie__fiscal { margin-left: 0; text-align: left; }
}

/* ===============================================================
   BARRA DE SUGERENCIA DE PAÍS
   Sugiere, no impone. Nunca redirige: una redirección por IP le sirve
   siempre la misma versión a Googlebot, que rastrea desde Estados Unidos,
   y las secciones por país podrían no indexarse nunca.
   =============================================================== */
/* En el degradado de marca y no en el gris de fondo: sobre gris casi blanco
   la barra no se distinguía del sitio y nadie la veía. El degradado aguanta
   6,61:1 con texto blanco en su peor punto, así que resalta sin dejar de
   cumplir. Es además lo más reconocible que tiene el sitio. */
.ee-geo {
	background: var(--ee-grad);
	color: #fff;
	font-size: 0.875rem;
}
.ee-geo__interior {
	position: relative;
	/* Los 68 de costado dejan lugar al botón de cerrar, que va absoluto. El
	   contenido va centrado, así que esta caja no pisa el riel. */
	max-width: var(--ee-ancho); margin: 0 auto; padding: 12px 68px;
	display: flex; align-items: center; justify-content: center;
	gap: 14px; flex-wrap: wrap;
}
.ee-geo__texto { color: #fff; }
.ee-geo__texto strong { font-weight: 800; }
.ee-geo__ir {
	flex: 0 0 auto;
	display: inline-flex; align-items: center; gap: 8px;
	background: #fff; color: #3f3d8f;
	font-weight: 800; font-size: 0.8125rem; text-decoration: none;
	padding: 7px 14px; border-radius: 6px;
	transition: transform .15s ease;
}
/* La bandera dentro del botón: sobre blanco necesita un borde propio, o las
   franjas blancas de Argentina y Uruguay se pierden con el fondo. */
.ee-geo__bandera { display: inline-flex; }
.ee-geo__bandera svg {
	display: block; border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(31, 42, 60, .22);
}
.ee-geo__ir:hover { color: #3f3d8f; transform: translateY(-1px); }
/* Fuera del flujo, para que el texto y el botón queden centrados respecto de
   la barra y no desplazados por el ancho de este. */
.ee-geo__cerrar {
	position: absolute; right: 24px; top: 50%; transform: translateY(-50%);
	background: none; cursor: pointer;
	border: 1px solid rgba(255, 255, 255, .45); border-radius: 6px;
	font-family: inherit; font-size: 0.8125rem; font-weight: 700;
	color: #fff; padding: 6px 12px;
}
.ee-geo__cerrar:hover { background: rgba(255, 255, 255, .14); border-color: #fff; }
.ee-geo__ir:focus-visible, .ee-geo__cerrar:focus-visible {
	outline: 3px solid #fff; outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
	.ee-geo__ir { transition: none; }
	.ee-geo__ir:hover { transform: none; }
}
@media (max-width: 680px) {
	/* Deja lugar a la ✕ de la derecha. */
	.ee-geo__interior { padding: 12px 52px 12px 16px; gap: 10px; }

	/* «Seguir aquí» pasa a ser una ✕ en la esquina. Como texto volvía al
	   flujo y se comía un tercer renglón entero —unos 60 px de alto, que en un
	   teléfono es lo más caro que hay—. Sigue siendo el mismo botón, hace lo
	   mismo y un lector de pantalla lo sigue anunciando «Seguir aquí»: lo
	   único que cambia es que dejó de empujar el contenido hacia abajo.
	   No se borra: es la única manera de que la barra no vuelva a aparecer. */
	.ee-geo__cerrar {
		position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
		width: 44px; height: 44px; padding: 0; border: 0;
		display: grid; place-items: center;
		font-size: 0;
	}
	.ee-geo__cerrar::before {
		content: "✕"; font-size: 17px; line-height: 1; font-weight: 700;
	}
	.ee-geo__cerrar:hover { background: rgba(255, 255, 255, .14); }

	/* Con el pulgar hacen falta unos 44 px de alto para no errarle. */
	.ee-geo__ir { padding-top: 12px; padding-bottom: 12px; }
}

/* Marca los países que todavía comparten la versión regional. */
.ee-selector__regional {
	font-size: 0.625rem; font-weight: 700; letter-spacing: .05em;
	text-transform: uppercase; color: var(--ee-apagado);
	background: var(--ee-fondo); border: 1px solid var(--ee-linea);
	border-radius: 3px; padding: 2px 5px; margin-left: 7px;
}
.ee-selector__lista { min-width: 250px; }

/* Bandera del selector: filete suave para que las blancas no se pierdan sobre blanco. */
.ee-bandera {
	display: block; flex: 0 0 auto;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(31, 42, 60, .14);
}

/* ---- menú de integraciones en formato compacto ----
   Con 24 integraciones, una descripción por ítem convierte el panel en una
   pared. Solo la destacada la conserva; el resto va como fila de logo y
   nombre, que es lo que el visitante escanea. */
.ee-mega__interior--compacto { grid-template-columns: repeat(4, 1fr); gap: 0; }

.ee-fila {
	display: grid; grid-template-columns: 26px 1fr;
	gap: 11px; align-items: center;
	padding: 7px 12px; border-radius: 5px;
	text-decoration: none; color: var(--ee-tinta);
	font-size: 0.875rem; font-weight: 600;
}
.ee-fila:hover { background: var(--ee-fondo); color: var(--ee-accion); }
.ee-fila__logo {
	width: 26px; height: 26px; border-radius: 5px;
	border: 1px solid var(--ee-linea);
	display: grid; place-items: center; padding: 3px; background: var(--ee-papel);
}
/* place-self: stretch además de object-fit. Con place-items: center el
   contenedor no estira al hijo, así que height: 100% queda indefinido y el
   navegador cae en la proporción natural: un logo más alto que ancho se pasa
   de la caja y la rejilla lo desplaza, que es lo que lo dejaba pegado abajo.
   Los cuadrados disimulaban el fallo porque su proporción daba el mismo
   número por casualidad.

   object-fit: contain en vez de max-width y max-height en porcentaje.
   Con porcentajes la imagen puede desbordar la caja por décimas y la rejilla
   la desplaza en lugar de centrarla, que es lo que hacía que un logo se viera
   pegado a un borde. object-fit escala respetando la proporción y centra
   dentro de la caja, sin depender de cómo resuelva el contenedor. */
.ee-fila__logo img {
	/* Medidas explícitas y no porcentajes: dentro de un contenedor con
	   place-items: center el porcentaje de altura no resuelve y el navegador
	   cae en la proporción natural de la imagen, que desborda la caja.
	   Con object-fit, la imagen se ajusta y se centra dentro de estos 18 px. */
	width: 18px; height: 18px;
	object-fit: contain;
	display: block;
}
.ee-fila__inicial {
	font-size: 0.6875rem; font-weight: 800; color: var(--ee-apagado);
	line-height: 1;
}
/* Logos apaisados. En una caja cuadrada de 18 px el alto que le queda a un
   logotipo es 18/proporción: ARCA, de 3,64, quedaba en 4,9 px y DGI, de 1,66,
   en 10,9. Por debajo de 12 px un logotipo compuesto por letras deja de
   leerse, así que a partir de ~1,5 de proporción se le da ancho y se le saca
   el recuadro. Los pictogramas aguantan más: Mercado Libre es 1,45 y se lee
   bien porque es un dibujo, no palabras. */
.ee-fila--ancho { grid-template-columns: 54px 1fr; }
.ee-fila--ancho .ee-fila__logo {
	width: 54px; height: 18px;
	border: 0; padding: 0; background: none;
}
.ee-fila--ancho .ee-fila__logo img {
	width: 54px; height: 18px;
	object-position: left center;
}
/* En los logos apaisados el propio logotipo dice el nombre, así que
   repetirlo al lado sobra: "ARCA ARCA". Se oculta a la vista pero se
   mantiene para lectores de pantalla y para cuando la imagen no carga. */
.ee-fila--ancho > span:not(.ee-fila__logo) {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip-path: inset(50%);
	white-space: nowrap; border: 0;
}
.ee-fila--ancho { position: relative; grid-template-columns: 54px 1fr; }

.ee-fila--destacada {
	grid-template-rows: auto auto;
	align-items: start; padding: 11px 12px; margin-bottom: 4px;
	border: 1px solid var(--ee-linea); background: var(--ee-fondo);
}
.ee-fila--destacada .ee-fila__desc {
	grid-column: 2; font-size: 0.8125rem; font-weight: 400;
	line-height: 1.45; color: var(--ee-apagado); margin-top: 3px;
}
@media (max-width: 1120px) { .ee-mega__interior--compacto { grid-template-columns: repeat(2, 1fr); } }

/* WhatsApp como canal de contacto: por ahora reemplaza al formulario. */
.ee-wa {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 8px 14px; border-radius: 5px;
	border: 1px solid #b9e6cd; background: #f0faf5;
	color: #12805f; font-weight: 700; font-size: 0.8125rem;
	text-decoration: none;
}
.ee-wa:hover { background: #e3f5ec; border-color: #8fd8b3; }

/* Isologos de las soluciones: ya traen su propio cuadrado redondeado,
   así que van sin recuadro contenedor. */
.ee-mega__iso { width: 38px; height: 38px; flex: 0 0 auto; }
.ee-mega__iso img { width: 100%; height: 100%; display: block; }
.ee-mega__ficha:has(.ee-mega__iso) { grid-template-columns: 38px 1fr; }

/* ===============================================================
   MENÚ MÓVIL
   Debajo de 980 px la navegación de escritorio se oculta y aparece
   el panel. No es una reducción del menú grande: es el principal,
   porque la mayoría del tráfico de este público llega desde el celular.
   =============================================================== */
/* Estado por defecto en escritorio: ambos ocultos. Tienen que estarlo aquí y
   no solo dentro de la media query — si los estilos del panel viven únicamente
   dentro de ella, arriba del punto de quiebre el elemento queda sin reglas y
   se dibuja como un bloque cualquiera en medio de la página. */
.ee-hamburguesa,
.ee-movil { display: none; }

@media (max-width: 980px) {
	.ee-cabecera__barra { gap: 14px; }

	/* En un teléfono los tres elementos de la barra no entran: el logo se
	   llevaba 167 px de los 375 y el flex resolvía encogiendo la hamburguesa
	   a la mitad de su zona táctil. Se achica el logo, que sigue siendo
	   legible a 30 px de alto, y con eso los tres entran de verdad. */
	.ee-marca img { height: 30px; }
	.ee-acciones .ee-ingresar { display: none; }
	.ee-boton { padding: 9px 14px; font-size: 0.875rem; }

	/* Flex con separación explícita: con grid y place-items las filas se
	   reparten solas y el desplazamiento de la X deja de ser calculable. */
	.ee-hamburguesa {
		display: flex; flex-direction: column;
		align-items: center; justify-content: center;
		gap: 5px;
		/* flex-shrink 0 y no solo width: es un elemento flexible dentro de la
		   barra y el reparto lo encogía a 22 px de ancho. Medido en el sitio:
		   la CSS decía 40 y el navegador daba 22×40, la mitad de la zona
		   táctil que recomienda cualquier guía —44×44— para el único control
		   de navegación que hay en el teléfono. Las barras de adentro no
		   cambian: crece el área de toque, no el dibujo. */
		flex: 0 0 44px;
		width: 44px; height: 44px; margin-left: auto;
		background: none; border: 1px solid var(--ee-linea);
		border-radius: 5px; cursor: pointer; padding: 0;
	}
	.ee-hamburguesa span {
		display: block; width: 18px; height: 2px;
		background: var(--ee-tinta); border-radius: 2px;
		transition: transform .18s ease, opacity .14s ease;
	}
	/* 2 px de barra + 5 px de separación = 7 px hasta la barra del medio. */
	[data-ee-abierto] .ee-hamburguesa span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	[data-ee-abierto] .ee-hamburguesa span:nth-child(2) { opacity: 0; }
	[data-ee-abierto] .ee-hamburguesa span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

	/* El panel ocupa lo que queda de pantalla bajo la barra. */
	.ee-movil {
		display: block;
		position: fixed;
		top: var(--ee-cabecera); left: 0; right: 0; bottom: 0;
		background: var(--ee-papel);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 18px 16px 40px;
		transform: translateX(100%);
		transition: transform .22s ease;
		z-index: 40;
	}
	[data-ee-abierto] .ee-movil { transform: translateX(0); }
	[data-ee-abierto] { overflow: hidden; }

	.ee-movil__cta { display: block; text-align: center; margin-bottom: 8px; }

	.ee-movil details { border-bottom: 1px solid var(--ee-linea); }
	.ee-movil summary {
		display: flex; align-items: center; justify-content: space-between;
		padding: 16px 4px; font-size: 1.0625rem; font-weight: 700;
		cursor: pointer; list-style: none;
	}
	.ee-movil summary::-webkit-details-marker { display: none; }
	.ee-movil summary::after {
		content: ""; width: 9px; height: 9px;
		border-right: 1.8px solid var(--ee-apagado);
		border-bottom: 1.8px solid var(--ee-apagado);
		transform: translateY(-3px) rotate(45deg);
		transition: transform .16s ease;
	}
	.ee-movil details[open] summary::after { transform: translateY(1px) rotate(225deg); }

	.ee-movil__lista { padding: 0 4px 14px; display: grid; gap: 2px; }
	.ee-movil__lista a {
		display: flex; align-items: center; gap: 11px;
		padding: 11px 8px; border-radius: 5px;
		color: var(--ee-tinta); text-decoration: none;
		font-size: 0.9375rem; font-weight: 600;
	}
	.ee-movil__lista a:active { background: var(--ee-fondo); }
	.ee-movil__lista img { width: 24px; height: 24px; object-fit: contain; flex: 0 0 auto; }
	.ee-movil__rubro {
		font-size: 0.6875rem; font-weight: 800; letter-spacing: .09em;
		text-transform: uppercase; color: var(--ee-apagado);
		margin: 14px 8px 6px;
	}
	.ee-movil__pie {
		margin-top: 22px; padding-top: 18px;
		border-top: 1px solid var(--ee-linea);
		display: grid; gap: 4px;
	}
	.ee-movil__pie a { padding: 11px 8px; font-weight: 700; color: var(--ee-tinta); text-decoration: none; }
}

/* ===============================================================
   SECCIONES DE LA PORTADA
   =============================================================== */
.ee-seccion { padding: var(--ee-aire) var(--ee-costado); }
.ee-seccion__interior { max-width: var(--ee-ancho); margin: 0 auto; }
.ee-seccion--gris { background: var(--ee-fondo); }

.ee-seccion__rubro {
	display: inline-flex; align-items: center; gap: 9px;
	font-size: 0.75rem; font-weight: 800;
	letter-spacing: .11em; text-transform: uppercase;
	color: var(--ee-accion); margin: 0 0 16px;
}
.ee-seccion__rubro::before { content: ""; width: 22px; height: 2px; background: var(--ee-sincro); }

.ee-seccion h2 {
	font-size: clamp(1.85rem, 1.3rem + 1.7vw, 2.6rem);
	line-height: 1.12; letter-spacing: -.02em; font-weight: 800;
	margin: 0 0 14px; max-width: 34ch; text-wrap: balance;
}
.ee-seccion__bajada {
	font-size: 1.0625rem; line-height: 1.6; color: #46516b;
	max-width: 72ch; margin: 0 0 48px;
}

/* ---- 1. El problema en tres síntomas ---- */
.ee-sintomas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.ee-sintoma {
	padding: 0 32px;
	border-left: 1px solid var(--ee-linea);
}
.ee-sintoma:first-child { padding-left: 0; border-left: 0; }
.ee-sintoma:last-child { padding-right: 0; }

.ee-sintoma__num {
	font-size: 3.25rem; font-weight: 800; line-height: 1;
	letter-spacing: -.04em; margin-bottom: 18px;
	background: var(--ee-grad); -webkit-background-clip: text;
	background-clip: text; color: transparent;
}
.ee-sintoma h3 {
	font-size: 1.1875rem; font-weight: 800; line-height: 1.3;
	margin: 0 0 10px; letter-spacing: -.01em;
}
.ee-sintoma p { font-size: 0.9375rem; line-height: 1.6; color: #55607a; margin: 0 0 14px; }
.ee-sintoma__costo {
	display: block; font-size: 0.8125rem; font-weight: 700;
	color: var(--ee-alerta); line-height: 1.5;
}

/* ---- 2. Cómo funciona en tres pasos ---- */
.ee-pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; position: relative; }
.ee-pasos::before {
	content: ""; position: absolute;
	top: 19px; left: 12%; right: 12%; height: 2px;
	background: var(--ee-grad); opacity: .28;
}
.ee-paso { position: relative; }
.ee-paso__num {
	width: 38px; height: 38px; border-radius: 50%;
	display: grid; place-items: center;
	background: var(--ee-grad); color: #fff;
	font-weight: 800; font-size: 0.9375rem;
	margin-bottom: 20px; position: relative;
	box-shadow: 0 0 0 6px var(--ee-papel);
}
.ee-seccion--gris .ee-paso__num { box-shadow: 0 0 0 6px var(--ee-fondo); }
.ee-paso h3 { font-size: 1.125rem; font-weight: 800; margin: 0 0 8px; letter-spacing: -.01em; }
.ee-paso p { font-size: 0.9375rem; line-height: 1.6; color: #55607a; margin: 0 0 10px; }
.ee-paso__tiempo {
	display: inline-block; font-size: 0.75rem; font-weight: 800;
	letter-spacing: .05em; text-transform: uppercase;
	color: #12805f; background: #eaf6f1; border: 1px solid #b7e5d3;
	border-radius: 3px; padding: 3px 8px;
}

/* ---- 3. Apartado de Mercado Libre ---- */
/* El logo va arriba y no al lado: en fila empujaba el rubro y el «h2» 68 px a
   la derecha, y quedaban desalineados con la bajada y la grilla, que arrancan
   en el borde de la sección. Además el logo se centraba contra las dos líneas
   de texto juntas, así que nunca coincidía con el «h2». */
.ee-ml__cabeza { margin-bottom: 16px; }
.ee-ml__logo {
	width: 52px; height: 52px; margin-bottom: 14px; border-radius: 10px;
	border: 1px solid var(--ee-linea-viva); background: var(--ee-papel);
	display: grid; place-items: center; padding: 8px; flex: 0 0 auto;
}
.ee-ml__logo img { width: 34px; height: 34px; object-fit: contain; display: block; }

.ee-ml__grilla {
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: 1px; background: var(--ee-linea);
	border: 1px solid var(--ee-linea); border-radius: 8px; overflow: hidden;
	margin-top: 40px;
}
.ee-ml__item { background: var(--ee-papel); padding: 24px 22px; }
/* Las tarjetas son bloques que se agregan y se borran desde el editor, y con
   tres columnas cualquier cantidad que no sea múltiplo de tres deja celdas
   vacías: como los surcos de 1 px dejan ver el fondo del contenedor, esas
   celdas se ven como un bloque gris. La última se estira para tapar el hueco,
   sea cual sea la cantidad. */
/* Va acotado a partir de 901 px porque abajo de eso la grilla es de una sola
   columna, y ahí un «span 3» le crearía dos columnas implícitas y se saldría
   de la pantalla. */
@media (min-width: 901px) {
	.ee-ml__item:last-child:nth-child(3n + 1) { grid-column: span 3; }
	.ee-ml__item:last-child:nth-child(3n + 2) { grid-column: span 2; }
	/* La tarjeta estirada mide 1170 px: sin tope el renglón pasa los 150
	   caracteres y se vuelve incómodo de leer. */
	.ee-ml__item:last-child:nth-child(3n + 1) p,
	.ee-ml__item:last-child:nth-child(3n + 2) p { max-width: 74ch; }
}
.ee-ml__item h3 {
	font-size: 1rem; font-weight: 800; margin: 0 0 7px;
	display: flex; align-items: center; gap: 9px; letter-spacing: -.01em;
}
.ee-ml__item p { font-size: 0.875rem; line-height: 1.55; color: #55607a; margin: 0; }

.ee-ml__contraste {
	margin-top: 34px; padding: 22px 26px;
	border-left: 3px solid transparent;
	border-image: var(--ee-grad) 1;
	background: var(--ee-fondo);
	font-size: 1.0625rem; line-height: 1.55; color: var(--ee-tinta);
	max-width: 62ch;
}
.ee-ml__contraste strong { font-weight: 800; }

/* ---- 4. Las seis funcionalidades destacadas ----
   Sin recuadro, a diferencia de la grilla de Mercado Libre de aquí arriba: dos
   grillas encajonadas seguidas se leen como una sola tabla larga. Aquí el
   fondo gris de la sección ya separa, y el único recuadro es el del icono. */
.ee-funcs {
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: 38px 40px;
}
.ee-func__icono {
	display: grid; place-items: center;
	width: 44px; height: 44px; margin-bottom: 14px;
	border-radius: 9px;
	border: 1px solid var(--ee-linea-viva);
	background: var(--ee-papel);
}
.ee-func h3 {
	font-size: 1.0625rem; font-weight: 800;
	letter-spacing: -.01em; margin: 0 0 8px;
}
.ee-func p {
	font-size: 0.9375rem; line-height: 1.6; color: #55607a;
	margin: 0; max-width: 34ch;
}
.ee-funcs__pie { margin: 44px 0 0; }
.ee-funcs__pie a {
	font-size: 0.9375rem; font-weight: 700;
	color: var(--ee-accion); text-decoration: none;
}
.ee-funcs__pie a:hover { text-decoration: underline; }

@media (max-width: 1040px) {
	.ee-funcs { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
	.ee-sintomas, .ee-pasos, .ee-ml__grilla { grid-template-columns: 1fr; }
	.ee-funcs { grid-template-columns: 1fr; gap: 30px; }
	.ee-func p { max-width: none; }
	.ee-sintoma { padding: 26px 0; border-left: 0; border-top: 1px solid var(--ee-linea); }
	.ee-sintoma:first-child { padding-top: 0; border-top: 0; }
	.ee-pasos::before { display: none; }
}

/* ==========================================================================
   Páginas de funcionalidad
   ========================================================================== */

.ee-oculto {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip-path: inset(50%); white-space: nowrap; border: 0;
}

.ee-miga {
	max-width: var(--ee-riel); margin: 0 auto; padding: 20px var(--ee-costado) 0;
	font-size: 0.8125rem; color: var(--ee-apagado);
}
.ee-miga a { color: var(--ee-apagado); text-decoration: none; }
.ee-miga a:hover { color: var(--ee-accion); text-decoration: underline; }
.ee-miga span[aria-hidden] { margin: 0 5px; color: var(--ee-linea-viva); }

.ee-func-hero { max-width: var(--ee-riel); margin: 0 auto; padding: 24px var(--ee-costado) var(--ee-aire); }
.ee-func-hero h1 {
	font-size: clamp(2.2rem, 1.5rem + 2.3vw, 3.4rem);
	line-height: 1.05; letter-spacing: -.022em; font-weight: 800;
	margin: 0 0 20px; max-width: 20ch; text-wrap: balance;
}
/* Ancho de lectura corto a propósito: son las dos frases que decide leer
   quien tiene apuro, y una línea larga las hace parecer un párrafo más. */
.ee-func-hero__respuesta {
	font-size: 1.1875rem; line-height: 1.6; color: #46516b;
	max-width: 60ch; margin: 0 0 30px;
}

/* ---- La interfaz del producto, rehecha en HTML ----
   Mantiene los colores propios de EcomGestión y no los del sitio: es una
   representación del sistema, y si le impusiéramos la paleta de la web
   dejaría de parecerse a lo que el visitante va a ver cuando entre. */
.ee-panelui { margin: 0; }
/* Acotado a 980. El mockup está compuesto para 920 de ancho: estirado a los
   1220 de la sección, las filas de modificadores quedan con medio renglón de
   aire muerto y la pieza deja de parecerse a la pantalla real. */
.ee-panelui__marco {
	max-width: 980px; margin-inline: auto;
	border-radius: 8px; overflow: hidden;
	box-shadow: 0 18px 44px -20px rgba(31, 42, 60, .38);
	background: #f2f2f2;
	container-type: inline-size;
}
.ee-panelui__barra {
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px; padding: 12px 18px;
	background: linear-gradient(90deg, #ee4482 0%, #b32a55 100%);
}
.ee-panelui__titulo { font-size: 1rem; font-weight: 700; color: #fff; }
.ee-panelui__paso { font-size: 0.6875rem; font-weight: 700; color: rgba(255,255,255,.85); }

.ee-panelui__cuerpo { display: grid; grid-template-columns: 1.55fr 1fr; gap: 16px; padding: 18px; }
.ee-panelui__izq { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ee-panelui__caja { background: #fff; border-radius: 5px; padding: 13px 15px; }

.ee-panelui__campos { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ee-panelui__campos label { display: block; min-width: 0; }
.ee-panelui__rotulo { display: block; font-size: 0.8125rem; font-weight: 700; color: #3e3e3e; }
.ee-panelui__rotulo em { font-style: normal; font-weight: 400; color: #888; }
.ee-panelui__input {
	display: flex; align-items: center; margin-top: 6px;
	height: 32px; padding: 0 10px;
	border: 1px solid #d9d9d9; border-radius: 4px; background: #fff;
	font-size: 0.8125rem; font-weight: 600; color: #3e3e3e;
}
.ee-panelui__input--select::after {
	content: ""; margin-left: auto;
	border: 5px solid transparent; border-top-color: #888; border-bottom: 0;
}

.ee-panelui__seccion { font-size: 0.875rem; font-weight: 700; color: #3e3e3e; margin: 0; }
.ee-panelui__ayuda { font-size: 0.71875rem; line-height: 1.45; color: #888; margin: 4px 0 0; }
.ee-panelui__ayuda--centro { text-align: center; }

.ee-panelui__mods { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.ee-panelui__mods li {
	display: flex; align-items: center; gap: 12px;
	padding: 10px 12px; border-radius: 4px;
	border: 1px solid #ececec; background: #fafafa;
	font-size: 0.78125rem; font-weight: 700; color: #3e3e3e; line-height: 1.35;
}
.ee-panelui__mods b { color: #ee4482; }
/* Los seis puntos del agarre: es lo que comunica que se pueden reordenar. */
.ee-panelui__agarre {
	flex: 0 0 auto; width: 9px; height: 15px;
	background-image: radial-gradient(#c1c1c1 1.5px, transparent 1.6px);
	background-size: 6px 6px; background-position: 0 2px;
}

.ee-panelui__radio {
	display: flex; align-items: center; gap: 9px; margin: 8px 0 0;
	font-size: 0.78125rem; color: #3e3e3e;
}
.ee-panelui__punto {
	flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%;
	border: 1.5px solid #c1c1c1;
}
.ee-panelui__punto--on { border: 4px solid #ee4482; }

.ee-panelui__der {
	background: #fff; border-radius: 5px; padding: 18px; min-width: 0;
}
.ee-panelui__simtitulo {
	font-size: 1.125rem; font-weight: 700; color: #ee4482;
	text-align: center; margin: 0;
}
.ee-panelui__sim { width: 100%; border-collapse: collapse; margin-top: 20px; }
.ee-panelui__sim th, .ee-panelui__sim td {
	padding: 5px 0; font-size: 0.78125rem; text-align: right;
	font-variant-numeric: tabular-nums;
}
.ee-panelui__sim th { text-align: left; font-weight: 400; color: #888; }
.ee-panelui__delta { color: #2dd36e; font-weight: 600; padding-left: 10px; }
.ee-panelui__parcial { color: #3e3e3e; font-weight: 700; padding-left: 10px; }
.ee-panelui__sim tfoot th, .ee-panelui__sim tfoot td {
	border-top: 1px solid #ececec; padding-top: 14px;
	font-size: 1.0625rem; font-weight: 800; color: #ee4482;
}
.ee-panelui figcaption,
.ee-panelui__pie {
	max-width: 980px; margin: 16px auto 0;
	font-size: 0.875rem; line-height: 1.6; color: var(--ee-apagado);
}

/* El panel se arma para 900 px de ancho. Debajo de eso las dos columnas se
   apilan: comprimirlas haría el texto de la interfaz ilegible, que es
   justamente lo que esta pieza tiene para mostrar. */
@container (max-width: 760px) {
	.ee-panelui__cuerpo { grid-template-columns: 1fr; }
	.ee-panelui__campos { grid-template-columns: 1fr; gap: 12px; }
}

/* ---- Listado de detalle ---- */
.ee-listado {
	margin: 0; display: grid; grid-template-columns: repeat(2, 1fr);
	gap: 1px; background: var(--ee-linea);
	border: 1px solid var(--ee-linea); border-radius: 8px; overflow: hidden;
}
.ee-listado__item { background: var(--ee-papel); padding: 20px 22px; }
.ee-listado dt,
.ee-listado h3 { font-size: 0.9375rem; font-weight: 800; margin: 0 0 6px; letter-spacing: -.01em; }
.ee-listado dd,
.ee-listado p { margin: 0; font-size: 0.875rem; line-height: 1.55; color: #55607a; }

/* ---- Lista de señales de «para quién es» ---- */
.ee-marcas { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-width: 74ch; }
.ee-marcas li {
	position: relative; padding-left: 30px;
	font-size: 1rem; line-height: 1.6; color: #46516b;
}
.ee-marcas li::before {
	content: ""; position: absolute; left: 2px; top: .55em;
	width: 11px; height: 6px;
	border-left: 2px solid var(--ee-sincro); border-bottom: 2px solid var(--ee-sincro);
	transform: rotate(-45deg);
}

/* ---- Preguntas frecuentes ---- */
.ee-faq { max-width: 78ch; border-top: 1px solid var(--ee-linea); }
.ee-faq__item { border-bottom: 1px solid var(--ee-linea); }
.ee-faq__item summary {
	cursor: pointer; list-style: none;
	display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
	padding: 19px 0; font-size: 1.0625rem; font-weight: 700; color: var(--ee-tinta);
}
.ee-faq__item summary::-webkit-details-marker { display: none; }
.ee-faq__item summary::after {
	content: ""; flex: 0 0 auto; margin-top: .45em;
	width: 10px; height: 10px;
	border-right: 2px solid var(--ee-accion); border-bottom: 2px solid var(--ee-accion);
	transform: rotate(45deg); transition: transform .18s ease;
}
.ee-faq__item[open] summary::after { transform: rotate(-135deg); }
.ee-faq__item p { margin: 0 0 20px; font-size: 1rem; line-height: 1.65; color: #46516b; max-width: 66ch; }

/* ---- Cierre ---- */
.ee-cierre { padding: var(--ee-aire) var(--ee-costado); background: var(--ee-fondo); border-top: 1px solid var(--ee-linea); }
.ee-cierre__interior { max-width: var(--ee-ancho); margin: 0 auto; }
.ee-cierre h2 {
	font-size: clamp(1.85rem, 1.3rem + 1.7vw, 2.6rem);
	line-height: 1.12; letter-spacing: -.02em; font-weight: 800;
	margin: 0 0 14px; max-width: 20ch;
}
.ee-cierre p { font-size: 1.0625rem; line-height: 1.6; color: #46516b; max-width: 56ch; margin: 0 0 30px; }

@media (max-width: 900px) {
	.ee-func-hero { padding-top: 20px; }
	.ee-listado { grid-template-columns: 1fr; }
}

/* ---- Índice de funcionalidades ---- */
.ee-indice { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.ee-indice a {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 8px 14px 8px 11px; border-radius: 999px;
	border: 1px solid var(--ee-linea-viva); background: var(--ee-papel);
	font-size: 0.875rem; font-weight: 700; color: var(--ee-tinta);
	text-decoration: none;
}
.ee-indice a:hover { border-color: var(--ee-accion); color: var(--ee-accion); }
.ee-indice svg { flex: 0 0 auto; }

/* El ancla no puede quedar debajo de la cabecera pegajosa, que mide 68 px.
   Sin esto el enlace del menú lleva al bloque correcto pero con el título
   escondido atrás del menú, y parece que no hubiera pasado nada. */
.ee-ficha { scroll-margin-top: calc(var(--ee-cabecera) + 24px); }

.ee-fichas {
	display: grid; grid-template-columns: repeat(2, 1fr);
	gap: 1px; background: var(--ee-linea);
	border: 1px solid var(--ee-linea); border-radius: 8px; overflow: hidden;
}
.ee-ficha { background: var(--ee-papel); padding: 28px 26px; }
.ee-ficha h2 {
	font-size: 1.25rem; font-weight: 800; letter-spacing: -.015em;
	margin: 0 0 8px; max-width: none;
}
.ee-ficha__detalle { font-size: 0.9375rem; line-height: 1.6; color: #46516b; margin: 0 0 16px; }
.ee-ficha__puntos { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.ee-ficha__puntos li {
	position: relative; padding-left: 20px;
	font-size: 0.875rem; line-height: 1.55; color: #55607a;
}
.ee-ficha__puntos li::before {
	content: ""; position: absolute; left: 0; top: .62em;
	width: 6px; height: 6px; border-radius: 50%; background: var(--ee-sincro);
}
.ee-ficha__enlace { margin: 18px 0 0; }
.ee-ficha__enlace a {
	font-size: 0.875rem; font-weight: 700;
	color: var(--ee-accion); text-decoration: none;
}
.ee-ficha__enlace a:hover { text-decoration: underline; }

@media (max-width: 900px) {
	.ee-fichas { grid-template-columns: 1fr; }
	.ee-ficha { padding: 24px 20px; }
}

/* ---- 5. Franja de integraciones ----
   Franja y no sección: el trabajo es responder «¿está el canal que uso?» de
   un vistazo. Por eso van con nombre al lado del logo — a un logo chico de
   una marca que no es Shopify nadie lo reconoce— y sin agrupar por rubro,
   que es lo que hace el megamenú. */
.ee-franja { padding: var(--ee-aire) var(--ee-costado); border-top: 1px solid var(--ee-linea); }
.ee-franja__interior {
	max-width: var(--ee-ancho); margin: 0 auto;
	display: grid; grid-template-columns: minmax(0, 340px) 1fr; gap: 56px;
	align-items: start;
}
.ee-franja h2 {
	font-size: 1.5rem; font-weight: 800; letter-spacing: -.018em;
	margin: 0 0 12px; text-wrap: balance;
}
.ee-franja__bajada { font-size: 0.9375rem; line-height: 1.6; color: #55607a; margin: 0 0 18px; }
.ee-franja__enlace { font-size: 0.9375rem; font-weight: 700; color: var(--ee-accion); text-decoration: none; }
.ee-franja__enlace:hover { text-decoration: underline; }

.ee-franja__logos {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: 8px;
}
.ee-franja__logos li {
	display: inline-flex; align-items: center; gap: 9px;
	padding: 6px 13px 6px 6px; border-radius: 999px;
	border: 1px solid var(--ee-linea); background: var(--ee-papel);
	font-size: 0.8125rem; font-weight: 600; color: var(--ee-tinta);
}
.ee-franja__logos .ee-fila__logo {
	width: 24px; height: 24px; border-radius: 50%; padding: 2px;
	border-color: transparent;
}
.ee-franja__logos img { width: 20px; height: 20px; }

@media (max-width: 900px) {
	.ee-franja { padding-block: 44px; }
	.ee-franja__interior { grid-template-columns: 1fr; gap: 26px; }
}

/* ---- 6. Atención humana ----
   Una sola columna de texto y no una grilla de tarjetas: es el argumento más
   humano de la página y trocearlo en cajitas lo vuelve corporativo, que es
   justo lo contrario de lo que dice. */
.ee-humanos { display: grid; grid-template-columns: minmax(0, 62ch); }
/* En la portada el testimonio salió, así que la medida de 62ch dejaba
   la sección usando la mitad del ancho. Aquí ocupa todo y las dos
   columnas las arma ee-humanos__texto. */
.ee-seccion--atencion .ee-humanos { grid-template-columns: minmax(0, 1fr); }

/* ---- Índice de integraciones ----
   Tarjetas sin recuadro sobre el fondo de la sección, con el logo en su
   propio cuadro blanco. Cada logo trae su color de marca y encajonarlos a
   todos juntos convertiría la grilla en un tablero de ajedrez de colores. */
.ee-integraciones {
	display: grid; grid-template-columns: repeat(4, 1fr);
	gap: 34px 30px;
}
.ee-integracion { scroll-margin-top: calc(var(--ee-cabecera) + 24px); min-width: 0; }
.ee-integracion__logo {
	display: grid; place-items: center;
	width: 52px; height: 52px; margin-bottom: 14px;
	border-radius: 10px;
	border: 1px solid var(--ee-linea-viva);
	background: var(--ee-papel);
	padding: 9px;
}
.ee-integracion__logo img { width: 32px; height: 32px; object-fit: contain; display: block; }
.ee-integracion__inicial {
	font-size: 0.9375rem; font-weight: 800; color: var(--ee-apagado); line-height: 1;
}
/* Los apaisados —ARCA, DGI— no entran en un cuadrado: se les da ancho y se
   les saca el recuadro, igual que en el menú. */
.ee-integracion__logo--ancho {
	width: 96px; height: 34px; border: 0; padding: 0; background: none;
	place-items: center start;
}
.ee-integracion__logo--ancho img { width: 96px; height: 34px; object-position: left center; }

.ee-integracion h3 {
	font-size: 1rem; font-weight: 800; letter-spacing: -.01em; margin: 0 0 6px;
}
.ee-integracion p { font-size: 0.875rem; line-height: 1.55; color: #55607a; margin: 0; }

.ee-indice a small {
	font-size: 0.6875rem; font-weight: 800; color: var(--ee-apagado);
	background: var(--ee-fondo); border-radius: 999px; padding: 2px 7px;
}

@media (max-width: 1040px) { .ee-integraciones { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .ee-integraciones { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; } }
@media (max-width: 520px)  { .ee-integraciones { grid-template-columns: 1fr; } }

/* ---- Bifurcación de autodiagnóstico ----
   Dos tarjetas grandes y clicables enteras: la pregunta es la primera
   decisión del visitante y tiene que poder tomarla sin buscar el enlace. */
.ee-bifurcacion { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.ee-rama {
	display: grid; align-content: start; gap: 10px;
	padding: 26px 28px; border-radius: 10px;
	border: 1px solid var(--ee-linea-viva); background: var(--ee-papel);
	text-decoration: none; color: inherit;
	transition: border-color .18s ease, box-shadow .18s ease;
}
.ee-rama:hover {
	border-color: var(--ee-accion);
	box-shadow: 0 14px 30px -22px rgba(31, 42, 60, .5);
}
.ee-rama__respuesta {
	font-size: 0.9375rem; font-weight: 700; color: var(--ee-apagado);
	padding-bottom: 12px; border-bottom: 1px solid var(--ee-linea);
}
.ee-rama__respuesta::before { content: "«"; }
.ee-rama__respuesta::after  { content: "»"; }
.ee-rama__nombre { font-size: 1.375rem; font-weight: 800; letter-spacing: -.015em; }
.ee-rama__desc { font-size: 0.9375rem; line-height: 1.6; color: #55607a; }
.ee-rama__enlace { font-size: 0.9375rem; font-weight: 700; color: var(--ee-accion); }

/* ---- Los dos flujos ---- */
.ee-flujo { margin: 0 0 30px; }
.ee-flujo figcaption,
.ee-flujo__pie {
	font-size: 0.75rem; font-weight: 800; letter-spacing: .09em;
	text-transform: uppercase; color: var(--ee-apagado); margin-bottom: 12px;
}
/* El diagrama se lee a partir de unos 640 px. Debajo de eso no se encoge:
   se desplaza dentro de su propio marco, porque un esquema con texto de 6 px
   no comunica nada y además rompe el ancho de la página. */
.ee-flujo__marco { overflow-x: auto; overscroll-behavior-x: contain; }
.ee-diagrama {
	display: block; width: 100%; min-width: 640px; height: auto;
	font-family: inherit;
}

/* ---- Tabla comparativa ---- */
.ee-tabla { overflow-x: auto; }
.ee-tabla table {
	width: 100%; border-collapse: collapse; min-width: 620px;
	background: var(--ee-papel);
	border: 1px solid var(--ee-linea); border-radius: 8px;
}
.ee-tabla th, .ee-tabla td {
	padding: 16px 18px; text-align: left; vertical-align: top;
	/* El bloque de tabla nativo le pone borde a las cuatro caras de cada
	   celda. Aquí la comparativa se lee por renglones, no en cuadrícula. */
	border: 0; border-bottom: 1px solid var(--ee-linea);
	font-size: 0.9375rem; line-height: 1.55;
}
.ee-tabla thead th {
	font-size: 0.75rem; font-weight: 800; letter-spacing: .08em;
	text-transform: uppercase; color: var(--ee-apagado);
	background: var(--ee-fondo);
}
.ee-tabla tbody th,
.ee-tabla tbody td:first-child { font-weight: 800; color: var(--ee-tinta); width: 26%; }
.ee-tabla td { color: #55607a; }
.ee-tabla tbody tr:last-child th, .ee-tabla tbody tr:last-child td { border-bottom: 0; }
/* El bloque nativo envuelve la tabla en <figure class="wp-block-table">; sin
   esto el pie de esa figura y los márgenes propios del bloque descolocan la
   comparativa. */
.ee-tabla.wp-block-table { margin: 0; }
.ee-tabla td:not(:first-child) { color: #55607a; }

@media (max-width: 900px) {
	.ee-bifurcacion { grid-template-columns: 1fr; }
}

/* ---- Blog ---- */
.ee-notas { display: grid; gap: 1px; background: var(--ee-linea);
	border: 1px solid var(--ee-linea); border-radius: 8px; overflow: hidden; }
.ee-nota {
	background: var(--ee-papel); padding: 24px 28px;
	display: grid; grid-template-columns: 168px 1fr; gap: 26px; align-items: start;
}
/* La portada es decorativa: la tarjeta ya tiene dos enlaces con el mismo
   destino, así que este queda fuera del recorrido de teclado. */
.ee-nota__portada { display: block; border-radius: 6px; overflow: hidden; }
.ee-portada { display: block; width: 100%; height: auto; }
.ee-nota:hover .ee-portada { opacity: .88; }
@media (max-width: 660px) {
	.ee-nota { grid-template-columns: 1fr; gap: 16px; }
	.ee-nota__portada { max-width: 200px; }
}
.ee-nota h2 { font-size: 1.375rem; font-weight: 800; letter-spacing: -.018em; margin: 0 0 8px; max-width: 40ch; }
.ee-nota h2 a { color: var(--ee-tinta); text-decoration: none; }
.ee-nota h2 a:hover { color: var(--ee-accion); }
.ee-nota__resumen { font-size: 0.9375rem; line-height: 1.6; color: #55607a; margin: 0 0 12px; max-width: 72ch; }
.ee-nota__pie { display: flex; align-items: center; gap: 16px; margin: 0; font-size: 0.875rem; }
.ee-nota__lectura { color: var(--ee-apagado); }
.ee-nota__pie a { font-weight: 700; color: var(--ee-accion); text-decoration: none; }
.ee-nota__pie a:hover { text-decoration: underline; }

/* La nota entera vive en una columna angosta: son textos de tres minutos y un
   renglón de 110 caracteres se abandona a la mitad. */
.ee-articulo { max-width: 720px; margin: 0 auto; padding: 0 24px var(--ee-aire); }
.ee-articulo .ee-miga { padding-left: 0; padding-right: 0; }
.ee-articulo__cabeza { padding: 24px 0 34px; border-bottom: 1px solid var(--ee-linea); margin-bottom: 34px; }
.ee-articulo__cabeza h1 {
	font-size: clamp(1.9rem, 1.3rem + 2vw, 2.7rem); line-height: 1.12;
	letter-spacing: -.02em; font-weight: 800; margin: 0 0 14px; text-wrap: balance;
}
.ee-articulo__datos { font-size: 0.875rem; color: var(--ee-apagado); margin: 0; }
.ee-articulo__cuerpo { font-size: 1.0625rem; line-height: 1.75; color: #2c3648; }
.ee-articulo__cuerpo p { margin: 0 0 22px; }
.ee-articulo__cuerpo h2 {
	font-size: 1.5rem; font-weight: 800; letter-spacing: -.018em;
	margin: 40px 0 14px; max-width: none;
}
.ee-articulo__cuerpo h3 { font-size: 1.1875rem; font-weight: 800; margin: 30px 0 10px; }
.ee-articulo__cuerpo strong { font-weight: 800; color: var(--ee-tinta); }
.ee-articulo__cuerpo a { color: var(--ee-accion); }
.ee-articulo__cuerpo hr {
	border: 0; height: 1px; background: var(--ee-linea); margin: 40px 0 30px;
}
.ee-articulo__cuerpo em { color: var(--ee-apagado); }
.ee-articulo__cierre {
	margin-top: 44px; padding: 30px 32px;
	background: var(--ee-fondo); border-radius: 10px;
	border-left: 3px solid transparent; border-image: var(--ee-grad) 1;
}
.ee-articulo__cierre h2 { font-size: 1.375rem; font-weight: 800; margin: 0 0 10px; }
.ee-articulo__cierre p { font-size: 0.9375rem; line-height: 1.6; color: #55607a; margin: 0 0 20px; }

@media (max-width: 900px) {
	.ee-articulo { padding-left: 20px; padding-right: 20px; }
	.ee-nota { padding: 22px 20px; }
}

/* ---- Logos de clientes ----
   Alto fijo con object-fit y tope de ancho: los nueve tienen proporciones muy
   distintas —newsan es 8:1 y MEXX casi cuadrado— y normalizar solo por alto
   dejaría a los logotipos largos ocupando el triple que el resto. */
/* Rótulo a la izquierda y logos a la derecha, en un solo renglón. Antes iba
   el rótulo arriba y los logos abajo, con una línea de separación encima: sobre
   la banda oscura de partners esa línea no separaba nada —el cambio de color ya
   lo hace— y entre el margen, el relleno y el rótulo apilado la tira medía 93 px
   para mostrar logos de 30. */
.ee-clientes {
	--ee-tope-an: 120px; --ee-tope-al: 44px;
	max-width: var(--ee-riel); margin: 0 auto; padding: 0 var(--ee-costado);
	display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr);
	align-items: center; gap: 0 34px;
}
.ee-clientes__texto {
	font-size: 0.6875rem; font-weight: 800; letter-spacing: .1em;
	text-transform: uppercase; color: var(--ee-apagado); margin: 0;
	line-height: 1.45;
}
/* Grilla y no flex con huecos: con flex, que los nueve entren en un renglón
   dependía de afinar el hueco al píxel, y cualquier logo nuevo o cualquier
   cambio de ancho volvía a dejar uno solo abajo. Nueve columnas iguales
   entran siempre y además quedan parejas. */
/* La fila desfila. Dos copias en una pista con desborde oculto: cuando la
   primera termina de salir, la segunda está justo donde estaba la primera, así
   que el corte no se ve. El clon lo arma desfile.js para que quien edita siga
   viendo una sola lista.
   Se anima «transform», que el compositor mueve sin repintar. Medido con la
   página cargada doce segundos: 16 % de un núcleo contra 10,7 % con el desfile
   apagado, o sea unos cinco puntos. El diagrama del hero, que repinta un SVG,
   cuesta treinta por una superficie más chica. */
.ee-clientes__pista {
	display: flex; gap: 44px; overflow: hidden; min-width: 0;
	mask-image: linear-gradient(to right, transparent 0, #000 40px,
		#000 calc(100% - 40px), transparent 100%);
}
.ee-clientes__lista {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex: 0 0 auto; gap: 44px; align-items: center;
	animation: ee-desfile var(--ee-desfile, 40s) linear infinite;
}
/* El frenado lo hace desfile.js bajando la velocidad de a poco. Con
   «animation-play-state: paused» la fila cortaba en seco, que es lo que se
   veía raro: nada en la página arranca ni para de golpe. */
.ee-clientes__pista .ee-clientes__lista { will-change: transform; }
@keyframes ee-desfile { to { transform: translateX(calc(-100% - 44px)); } }
/* Si entran todos sin desbordar, moverlos dejaría un hueco recorriendo la
   fila. En ese caso quedan quietos y centrados. */
.ee-clientes__pista--quieta { mask-image: none; }
.ee-clientes__pista--quieta .ee-clientes__lista { animation: none; }
.ee-clientes__pista--quieta .ee-clientes__lista--clon { display: none; }
@media (prefers-reduced-motion: reduce) {
	.ee-clientes__pista { mask-image: none; overflow-x: auto; }
	.ee-clientes__lista { animation: none; }
	.ee-clientes__lista--clon { display: none; }
}
/* Celda de tamaño fijo. Igualar el alto dejaba a SKINFREE en 242 px de ancho y
   a PCRegistrada en 40: con la misma altura, el área va con la proporción. Acá
   todos ocupan la misma caja y cada uno crece hasta donde entra. */
.ee-clientes__lista figure { display: block; margin: 0; flex: 0 0 auto; }
/* El selector repite «figure» a propósito: WordPress imprime
   «.wp-block-image img { height: auto }» después de esta hoja, y con la misma
   especificidad le ganaba por orden. Los logos altos se salían de la celda. */
.ee-clientes__lista figure img {
	/* Se mantiene con las imágenes dentro de <figure>, que es lo que crea el editor. */
	/* Sin «max-width»: antes cada logo vivía en una celda de grilla que le
	   recortaba el ancho, y los apaisados se achicaban hasta la mitad del alto
	   nominal. En la fila que desfila cada uno ocupa lo que mide. */
	/* Topes y no medidas fijas. Con la celda fija el logo se centraba adentro y
	   el lienzo que le sobraba se sumaba al hueco: entre dos apaisados quedaban
	   44 px y entre PCRegistrada y su vecino, 44 + 46 + lo del otro lado. Con
	   topes la caja mide lo que mide el logo y el hueco es siempre el mismo.
	   Van en píxeles y no en porcentaje: como ítem de grilla el porcentaje no
	   resolvía contra el área y el logo se salía de la caja. */
	max-width: var(--ee-tope-an); max-height: var(--ee-tope-al);
	width: auto; height: auto;
	object-fit: contain; display: block;
	/* En escala de grises y algo apagados: son prueba social, no son la marca
	   protagonista de la página. Recuperan su color al pasar el mouse. */
	filter: grayscale(1); opacity: .62;
	transition: filter .18s ease, opacity .18s ease;
}
.ee-clientes__lista figure:hover img { filter: none; opacity: 1; }

/* Ya no hace falta una regla por logo. La celda de tamaño fijo reserva el hueco
   antes de que baje la imagen, así que la fila no salta al cargar, y el
   «object-fit» la encaja adentro sea cual sea su proporción. Antes había doce
   renglones con la proporción de cada uno y había que acordarse de sumar el
   suyo al agregar un logo nuevo. */

@media (prefers-reduced-motion: reduce) {
	.ee-clientes__lista figure img { transition: none; }
}
@media (max-width: 1040px) {
	/* Dos renglones de logos al lado de un rótulo de un renglón queda desparejo:
	   por debajo de esta medida el rótulo vuelve arriba. */
	.ee-clientes { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 640px) {
	.ee-clientes__pista, .ee-clientes__lista { gap: 32px; }
	@keyframes ee-desfile { to { transform: translateX(calc(-100% - 32px)); } }
	.ee-clientes { --ee-tope-an: 100px; --ee-tope-al: 38px; }
}

/* ---- Testimonio ----
   Sin comillas gigantes ni foto redonda: la frase se sostiene sola o no
   sirve, y el adorno le baja credibilidad en vez de subírsela. */
.ee-testimonio {
	margin: 30px 0 0; padding: 24px 0 0;
	border: 0; border-top: 1px solid var(--ee-linea);
	max-width: 62ch;
}
.ee-testimonio p {
	font-size: 1.125rem; line-height: 1.6; color: var(--ee-tinta);
	margin: 0 0 14px;
}
.ee-testimonio cite {
	display: block; font-style: normal;
	font-size: 0.875rem; font-weight: 700; color: var(--ee-apagado);
}

/* ---- Documentos legales ----
   Medida corta a propósito: un contrato con renglones largos no se lee, se
   hojea.

   Va acotado a su propia plantilla y no a .wp-block-post-content a secas. Con
   el selector amplio, la regla de tamaño de párrafo alcanzaba a TODAS las
   páginas —la portada incluida— y dejaba el antetítulo, los rubros y las
   líneas de costo en 16 px en vez de sus 12 a 14. Se veía como si el diseño
   estuviera mal calibrado. */
.page-template-documento .wp-block-post-content > * { margin-bottom: 18px; }
.page-template-documento .wp-block-post-content h2 {
	font-size: 1.375rem; font-weight: 800; letter-spacing: -.015em;
	margin: 40px 0 12px; padding-top: 18px; border-top: 1px solid var(--ee-linea);
}
.page-template-documento .wp-block-post-content h3 { font-size: 1.0625rem; font-weight: 800; margin: 28px 0 8px; }
.page-template-documento .wp-block-post-content h4 { font-size: 0.9375rem; font-weight: 800; margin: 22px 0 6px; }
.page-template-documento .wp-block-post-content p,
.page-template-documento .wp-block-post-content li { font-size: 1rem; line-height: 1.7; color: #2c3648; }
.page-template-documento .wp-block-post-content ul { padding-left: 22px; }
.page-template-documento .wp-block-post-content li { margin-bottom: 8px; }
.page-template-documento .wp-block-post-content a { color: var(--ee-accion); }
.page-template-documento .wp-block-post-content code {
	font-size: 0.875em; background: var(--ee-fondo);
	border: 1px solid var(--ee-linea); border-radius: 3px; padding: 1px 5px;
}
/* Los avisos de «esto falta completar» quedan visibles a propósito mientras
   el documento sea un borrador: son para quien lo revisa, no para el
   visitante, y esconderlos es cómo se publica un borrador sin querer. */
.ee-aviso {
	margin: 24px 0; padding: 16px 20px; border: 0;
	background: #fff6e5; border-left: 3px solid #c47f17; border-radius: 4px;
}
.ee-aviso p { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: #6b4708; }

/* ---- Panel de una sola columna ----
   La pantalla de reglas de stock no tiene simulador al costado, así que el
   panel ocupa todo el ancho en vez de dejar media caja vacía. */
.ee-panelui__cuerpo--simple { grid-template-columns: 1fr; }

.ee-panelui__reglas { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.ee-panelui__reglas li {
	padding: 12px 14px; border-radius: 4px;
	border: 1px solid #ececec; background: #fafafa;
	font-size: 0.8125rem; line-height: 1.9; color: #3e3e3e;
}
.ee-panelui__reglas b { color: #ee4482; font-weight: 800; }
/* Las pastillas imitan los desplegables de la pantalla real: el visitante
   tiene que ver de un vistazo qué partes de la frase se eligen. */
.ee-panelui__pastilla {
	display: inline-block; padding: 3px 9px; margin: 0 2px;
	background: #fff; border: 1px solid #d9d9d9; border-radius: 4px;
	font-weight: 700; white-space: nowrap;
}

.ee-subtitulo {
	font-size: 1.0625rem; font-weight: 800; letter-spacing: -.01em;
	margin: 34px 0 14px; color: var(--ee-tinta);
}

/* ---- Especificidad tras el paso a bloques ----
   Al convertir la portada a bloques nativos, varios elementos que eran <span>
   o <div> pasaron a ser <p>: es lo único que el editor sabe crear para un
   texto suelto. Con eso, reglas genéricas como «.ee-sintoma p» empezaron a
   ganarle a las específicas por un punto de especificidad.
   
   El síntoma más visible eran los números 01 02 03, que declaran 3,25 rem y
   se estaban dibujando a 15 px. Repetir el ancestro alcanza para invertirlo. */
.ee-sintoma .ee-sintoma__num {
	font-size: 3.25rem; line-height: 1; margin-bottom: 18px;
	/* Sin esto el degradado recortado sobre el texto queda tapado por el
	   color gris de «.ee-sintoma p» y el número se dibuja plano. */
	color: transparent;
}
.ee-sintoma .ee-sintoma__costo { font-size: 0.8125rem; line-height: 1.5; }
/* El número del paso va blanco sobre el círculo con degradado; «.ee-paso p»
   lo pintaba gris sobre violeta, que es ilegible. */
.ee-paso .ee-paso__num { color: #fff; line-height: 1; margin: 0 0 20px; }
.ee-paso .ee-paso__tiempo { font-size: 0.75rem; }
.ee-cierre .ee-hero__secundario { font-size: 0.9375rem; }

/* ---- Fichas de facturación por país ---- */
.ee-emisiones {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1px; background: var(--ee-linea);
	border: 1px solid var(--ee-linea); border-radius: 8px; overflow: hidden;
}
/* Con una sola ficha, la grilla la estiraría a todo el ancho y el texto
   quedaría en renglones de cien caracteres. */
.ee-emisiones--una { grid-template-columns: minmax(0, 620px); }
.ee-emision { background: var(--ee-papel); padding: 22px 24px; }
.ee-emision__cabeza { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.ee-emision h3 { font-size: 1.0625rem; font-weight: 800; margin: 0; letter-spacing: -.015em; }
.ee-emision__organismo {
	margin: 0; font-size: 0.6875rem; font-weight: 800; letter-spacing: .08em;
	text-transform: uppercase; color: #fff; background: var(--ee-grad);
	border-radius: 20px; padding: 3px 10px;
}
.ee-emision__comprobantes { flex: 1 1 100%; margin: 0; font-size: 0.8125rem; color: var(--ee-apagado); }
.ee-emision__puntos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ee-emision__puntos li {
	position: relative; padding-left: 20px;
	font-size: 0.875rem; line-height: 1.55; color: #55607a;
}
.ee-emision__puntos li::before {
	content: ""; position: absolute; left: 0; top: 8px;
	width: 7px; height: 7px; border-radius: 50%; background: var(--ee-sincro);
}

/* ---- Ilustraciones de las notas del blog ---- */
.ee-ilu__marco {
	margin: 6px 0 30px;
	/* Debajo de unos 560 px el dibujo se desplaza dentro de su marco en vez de
	   encogerse: un esquema con texto de 7 px no comunica nada. */
	overflow-x: auto; overscroll-behavior-x: contain;
}
.ee-ilu {
	display: block; width: 100%; min-width: 560px; height: auto;
	font-family: inherit;
}

/* El aviso de que el dibujo sigue. El marco mide lo que la pantalla menos los
   20 de costado de cada lado, así que desborda por debajo de 600: 600 - 40 son
   los 560 del min-width de arriba. Sin esto, en un celular queda el 40 % del
   esquema afuera y nada lo dice. */
@media (max-width: 599px) {
	/* Respaldo sin línea de tiempo: degradado fijo a la derecha, y 40 px de
	   relleno al final para que al terminar el recorrido caiga sobre espacio
	   vacío. Los contenedores con desplazamiento incluyen su relleno final en
	   el recorrido; hace falta porque los cinco esquemas dejan solo entre 17 y
	   34 px de margen propio a la derecha. */
	.ee-ilu__marco {
		padding-right: 40px;
		mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent 100%);
	}
	/* Con línea de tiempo el degradado sigue al dedo: aparece del lado que
	   queda por recorrer y se va del que ya se recorrió, así que no hace falta
	   el relleno. Las dos medidas van registradas con @property porque una
	   variable sin registrar no interpola y la animación saltaría. */
	@supports (animation-timeline: scroll()) {
		.ee-ilu__marco {
			padding-right: 0;
			mask-image: linear-gradient(to right,
				transparent 0, #000 var(--ee-ilu-izq),
				#000 calc(100% - var(--ee-ilu-der)), transparent 100%);
			animation: ee-ilu-bordes linear both;
			animation-timeline: scroll(self inline);
		}
	}
}
@property --ee-ilu-izq { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --ee-ilu-der { syntax: "<length>"; inherits: false; initial-value: 40px; }
@keyframes ee-ilu-bordes {
	0%   { --ee-ilu-izq: 0px;  --ee-ilu-der: 40px; }
	10%  { --ee-ilu-izq: 40px; }
	90%  { --ee-ilu-der: 40px; }
	100% { --ee-ilu-izq: 40px; --ee-ilu-der: 0px; }
}
.ee-ilu__falta {
	margin: 6px 0 30px; padding: 14px 16px; border-radius: 8px;
	background: var(--ee-fondo); border: 1px dashed var(--ee-linea-viva);
	font-size: 0.875rem; color: var(--ee-apagado);
}

/* ---- Banda de partners ---- */
.ee-partners {
	position: relative; isolation: isolate;
	background: var(--ee-tinta) url("assets/img/banda-certificados.webp") center / cover no-repeat;
}
/* La foto sola deja el texto blanco entre 3,0 y 4,6 : 1 según la zona, que
   alcanza para un titular pero no para la bajada. El velo oscurece el lado
   donde va el texto y deja respirar el resto. */
.ee-partners::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(95deg,
		rgba(20, 27, 42, .70) 0%, rgba(20, 27, 42, .52) 44%, rgba(20, 27, 42, .10) 80%);
}
.ee-partners__interior {
	max-width: var(--ee-riel); margin: 0 auto; padding: 46px var(--ee-costado);
	display: grid; grid-template-columns: minmax(0, 1fr) auto;
	gap: 34px; align-items: center;
}
.ee-partners__texto h2 {
	margin: 0 0 10px; color: #fff; max-width: 30ch;
	font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.15rem);
	line-height: 1.14; letter-spacing: -.02em; font-weight: 800;
}
.ee-partners__texto p {
	margin: 0; color: rgba(255, 255, 255, .88); max-width: 46ch;
	font-size: 1rem; line-height: 1.6;
}
/* Los logos van sobre blanco: cada marca tiene su color y sobre la foto se
   ensucian entre ellos. */
.ee-partners__logos {
	display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
	background: #fff; border-radius: 10px; padding: 18px 24px;
	box-shadow: 0 10px 30px rgba(12, 18, 32, .22);
}
.ee-partners__logo { display: grid; justify-items: center; gap: 6px; }
.ee-partners__logos img { display: block; width: auto; height: 40px; }
/* Solo Mercado Libre tiene nivel, y es el que más pesa: la chapa lo dice sin
   robarle protagonismo a los otros tres. */
.ee-partners__nivel {
	font-style: normal; font-size: 0.5625rem; font-weight: 800;
	letter-spacing: .1em; text-transform: uppercase;
	color: #544611; background: linear-gradient(90deg, #f4e4a8 0%, #e8cf7a 100%);
	border-radius: 20px; padding: 2px 8px; white-space: nowrap;
}

@media (max-width: 900px) {
	.ee-partners__interior { grid-template-columns: 1fr; gap: 24px; padding: 38px var(--ee-costado); }
	.ee-partners__logos { justify-content: space-between; gap: 16px; padding: 16px 18px; }
	.ee-partners__logos img { height: 32px; }
}

/* ---- Selector de país en la cabecera ---- */
/* Compacto: bandera y código nada más. El nombre completo lo lleva el del
   pie, donde hay lugar; aquí compite con «Probar gratis». */
.ee-selector--cabecera .ee-selector__boton {
	gap: 7px; padding: 7px 10px;
	font-size: 0.8125rem; font-weight: 700;
	border-color: var(--ee-linea);
}
.ee-selector--cabecera .ee-selector__boton .ee-bandera { border-radius: 2px; box-shadow: 0 0 0 1px rgba(31,42,60,.14); }
/* La lista del pie se abre hacia arriba; esta, hacia abajo. */
.ee-selector--cabecera .ee-selector__lista {
	bottom: auto; top: calc(100% + 8px); left: auto; right: 0;
	box-shadow: 0 16px 34px -18px rgba(31, 42, 60, .38);
	transform: translateY(-6px);
}
.ee-selector--cabecera:hover > .ee-selector__lista,
.ee-selector--cabecera:focus-within > .ee-selector__lista { transform: translateY(0); }
.ee-selector--cabecera .ee-selector__boton .ee-nav__flecha { transform: translateY(-2px) rotate(45deg); }

/* En pantallas donde el menú ya está apretado, el selector sale de la barra:
   vive en el menú móvil y en el pie. */
@media (max-width: 1080px) {
	.ee-selector--cabecera { display: none; }
}

/* ===============================================================
   RITMO DE LA PORTADA
   Las secciones habían quedado con tres paddings distintos —76, 56 y
   uno asimétrico de 0/56— y dos bloques blancos seguidos que se leían
   como uno solo de mil píxeles. Aquí se unifica.
   =============================================================== */

/* Un solo valor para el aire vertical de todas las secciones.
   Estaba en 76 y, sumado a los 24 px de separación que WordPress pone entre
   bloques, cada costura medía 176 px de tinta a tinta. Contra la tira de
   clientes —que es una banda baja— el salto se notaba todavía más: 121 px de
   nada entre los logos y «Funcionalidades principales». */
:root { --ee-aire: 60px; }
/* El riel horizontal. El sitio arma el contenedor de dos maneras: el padding
   en un elemento de afuera y el max-width en uno de adentro, o los dos en el
   mismo elemento. En la segunda hay que sumarle el padding al max-width —con
   border-box se lo come— o el borde queda 24 px más adentro. Eso tenía al logo
   del encabezado, al pie, a la banda de partners y a la tira de clientes
   corridos 24 px respecto del hero y de todas las secciones. */
:root { --ee-ancho: 1220px; --ee-costado: 24px; }
/* En pantalla chica el costado se angosta. Un solo lugar: antes el
   encabezado bajaba a 16 en 980, el cuerpo a 20 en 900, y el pie y la tira
   de clientes se quedaban en 24. Tres rieles distintos en la misma pantalla. */
@media (max-width: 980px) { :root { --ee-costado: 20px; } }
:root { --ee-riel: calc(var(--ee-ancho) + var(--ee-costado) * 2); }
/* El aire de cada banda se declara en su propia regla, más arriba. Antes se
   repetía acá porque las tres traían valores distintos —76, 76 y 56— y este
   bloque los pisaba; ahora las tres piden el token y no hay nada que pisar. */
/* La de clientes iba 0 arriba y 56 abajo. Es una tira baja, así que
   lleva su propia medida, pero pareja —tiene que quedar pareja para que los
   logos se lean centrados, que es como se corrigió en su momento. */
.ee-confianza { padding: 18px 0; }

/* Las bandas se tocan. Los 24 px que WordPress mete entre bloques se sumaban
   a los dos paddings en cada costura, y además dejaban una tira del color del
   cuerpo entre un fondo gris y el siguiente. Sin ellos el borde cae donde
   tiene que caer y la línea divisoria de más abajo se apoya justo ahí.
   Va por clase y no sobre todos los hijos de .entry-content porque en las
   páginas legales esos mismos 24 px son la separación entre párrafos. */
.ee-hero, .ee-partners, .ee-confianza, .ee-func-hero, .ee-func-pagina,
.ee-seccion, .ee-franja, .ee-cierre { margin-block-start: 0; }
/* El hero se apoyaba en esa separación para no pegar el dibujo del circuito
   contra la banda de partners: ahora el aire es suyo y está declarado. */
.ee-hero { padding-bottom: 28px; }
/* El pie llega envuelto en un template-part que traía los mismos 24 px. Como
   el pie abre con un filete, esos 24 px lo dejaban flotando por debajo del
   borde del bloque de cierre en vez de apoyado contra él. */
.wp-site-blocks > footer { margin-block-start: 0; }

@media (max-width: 780px) {
	:root { --ee-aire: 44px; }
	.ee-confianza { padding: 20px 0; }
}

/* ---- Preguntas frecuentes: encabezado a un lado, preguntas al otro ----
   La lista mide 796 px dentro de un contenedor de 1220 y quedaba con
   400 px de vacío a la derecha. En dos columnas el ancho se usa y el
   bloque sigue el mismo patrón que el resto: encabezado a la izquierda,
   contenido a la derecha. */
.ee-seccion--preguntas .ee-seccion__interior {
	display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
	gap: 30px 56px; align-items: start;
}
.ee-seccion--preguntas .ee-seccion__interior { grid-template-rows: auto auto 1fr; }
.ee-seccion--preguntas .ee-seccion__rubro { grid-area: 1 / 1; margin-bottom: 10px; }
.ee-seccion--preguntas h2 { grid-area: 2 / 1; margin-bottom: 14px; max-width: none; }
.ee-seccion--preguntas .ee-faq__enlace { grid-area: 3 / 1; margin: 0; align-self: start; }
.ee-seccion--preguntas .ee-faq { grid-area: 1 / 2 / 4 / 3; max-width: none; }

@media (max-width: 900px) {
	.ee-seccion--preguntas .ee-seccion__interior { grid-template-columns: 1fr; grid-template-rows: none; gap: 16px; }
	.ee-seccion--preguntas .ee-seccion__rubro,
	.ee-seccion--preguntas h2,
	.ee-seccion--preguntas .ee-faq,
	.ee-seccion--preguntas .ee-faq__enlace { grid-area: auto; }
	/* En una columna el enlace va al final, después de las preguntas. */
	.ee-seccion--preguntas .ee-faq__enlace { order: 9; }
}

/* ---- Cierre: centrado ----
   El título medía 499 y el texto 571 dentro de 1220, todo pegado a la
   izquierda: se leía como una sección a medio terminar. */
.ee-cierre { text-align: center; }
.ee-cierre__interior { max-width: 720px; }
/* Sin balance el corte dejaba «lados.» solo en el segundo renglón. */
.ee-cierre h2 { max-width: none; margin-left: auto; margin-right: auto; text-wrap: balance; }
.ee-cierre p  { max-width: 54ch; margin-left: auto; margin-right: auto; }
.ee-cierre .ee-hero__acciones { justify-content: center; }

/* La lista de países del 404. Va acá y no en el bloque de cierre porque es lo
   único que la usa: quien escribió «/chile» a mano —que es de donde salió
   este error— encuentra el enlace bueno sin tener que buscarlo en el menú. */
.ee-404__paises {
	margin: 30px auto 0; max-width: 54ch;
	font-size: 0.9375rem; color: var(--ee-apagado);
}
.ee-404__paises a { color: var(--ee-accion); font-weight: 600; white-space: nowrap; }

/* Dos secciones del mismo color seguidas se leen como un solo bloque de mil
   píxeles. La regla dice eso —«si la anterior tenía tu mismo fondo, marcá el
   límite»— en vez de poner el borde a mano en una sección concreta, que
   quedaría mal el día que se reordenen. */
.ee-seccion:not(.ee-seccion--gris) + .ee-seccion:not(.ee-seccion--gris),
.ee-seccion:not(.ee-seccion--gris) + .ee-franja,
.ee-franja + .ee-seccion:not(.ee-seccion--gris),
.ee-seccion--gris + .ee-seccion--gris,
.ee-seccion--gris + .ee-cierre {
	border-top: 1px solid var(--ee-linea);
}

/* ---- Atención: en dos columnas ----
   Con el testimonio afuera quedó una columna angosta y muy alta. El texto a
   un lado y las marcas al otro la bajan a la mitad. */
/* La rejilla va en ee-humanos__texto y no en el interior de la sección: el
   interior tiene un solo hijo, así que ahí el grid no hace nada. Los cuatro
   elementos —rubro, título, bajada y marcas— cuelgan de este. */
.ee-seccion--atencion .ee-humanos__texto {
	/* 460 px es lo que necesita «Del otro lado hay una persona» para entrar
	   en dos renglones al tamaño de título de sección. Con menos parte en
	   tres, que es justo lo que había que evitar. */
	display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
	grid-template-rows: auto auto 1fr;
	gap: 10px 64px; align-items: start;
}
.ee-seccion--atencion .ee-seccion__rubro  { grid-area: 1 / 1; margin-bottom: 0; }
.ee-seccion--atencion .ee-humanos__texto h2 { grid-area: 2 / 1; margin: 0 0 6px; }
.ee-seccion--atencion .ee-seccion__bajada { grid-area: 3 / 1; margin-bottom: 0; align-self: start; }
.ee-seccion--atencion .ee-marcas { grid-area: 1 / 2 / 4 / 3; align-self: center; }

@media (max-width: 900px) {
	.ee-seccion--atencion .ee-humanos__texto {
		grid-template-columns: 1fr; grid-template-rows: none; gap: 12px;
	}
	.ee-seccion--atencion .ee-seccion__rubro,
	.ee-seccion--atencion .ee-humanos__texto h2,
	.ee-seccion--atencion .ee-seccion__bajada,
	.ee-seccion--atencion .ee-marcas { grid-area: auto; }
}

/* El enlace a la página completa, debajo del título de preguntas. */
.ee-faq__enlace a { font-weight: 700; color: var(--ee-accion); text-decoration: none; }
.ee-faq__enlace a:hover { text-decoration: underline; }