/*
 * Micrositio ELEXIO.
 *
 * Todo cuelga de .elexio porque el sitio carga common.css / inner.css / mobile.css
 * en todas las paginas y sin scope se pisan los titulos y las listas.
 *
 * Los valores estan medidos sobre el micrositio de IONIQ 9 en produccion, que es
 * el que define el lenguaje. Los cortes son los suyos: 768 y 1024.
 */

@font-face {
	font-family: "HyundaiSansHeadPro";
	src: url("../fonts/HyundaiSansHeadPro-Medium.woff2") format("woff2");
	font-weight: 500;
	font-display: swap;
}
@font-face {
	font-family: "HyundaiSansHeadPro";
	src: url("../fonts/HyundaiSansHeadPro-Bold.woff2") format("woff2");
	font-weight: 700;
	font-display: swap;
}
@font-face {
	font-family: "HyundaiSansTextPro";
	src: url("../fonts/HyundaiSansTextPro-Regular.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: "HyundaiSansTextPro";
	src: url("../fonts/HyundaiSansTextPro-Medium.woff2") format("woff2");
	font-weight: 500;
	font-display: swap;
}

.elexio {
	--paper: #F6F3F2;
	--h: #333;
	--ev: #0090B2;
	/* --colors-interaction-interactive del tema EV. No es el mismo celeste que --ev:
	   va en la barra del slider, los bordes de los datos y los hr. */
	--inter: #007994;
	--line: #DDD;
	--navy: #002C5F;
	--head: "HyundaiSansHeadPro", Arial, Helvetica, sans-serif;
	--copy: "HyundaiSansTextPro", Arial, Helvetica, sans-serif;

	/* margen lateral de la pagina y espaciado vertical entre bloques */
	--m: 20px;
	--pad: 56px;

	background: #fff;
	color: #000;
	font-family: var(--copy);
	-webkit-font-smoothing: antialiased;
}

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

.elexio h1,
.elexio h2,
.elexio h3,
.elexio h4 {
	margin: 0;
	font-family: var(--head);
	font-weight: 500;
	line-height: 1;
	text-transform: none;
	letter-spacing: 0;
}
.elexio p { margin: 0; }
.elexio img { display: block; max-width: 100%; }
.elexio picture { display: block; }
/* el CSS global del sitio le pone display a los p, asi que [hidden] necesita ayuda.
   Acotado a este caso: en el nav el [hidden] lo levanta la regla de escritorio. */
.elexio .ex-form__error[hidden] { display: none; }
.elexio a { color: var(--navy); }

.elexio .ex-wrap { padding-left: var(--m); padding-right: var(--m); }

/* --------------------------------------------------------------- tipografia */
.elexio .ex-h1 { font-family: var(--head); font-weight: 500; font-size: 34px; line-height: 34px; }
.elexio .ex-h2 { font-size: 38px; line-height: 38px; color: var(--h); max-width: 800px; }
.elexio .ex-h3 { font-size: 28px; line-height: 30px; }
.elexio .ex-sub { font-family: var(--head); font-weight: 500; font-size: 20px; line-height: 24px; max-width: 800px; }
.elexio .ex-subhero { font-family: var(--head); font-weight: 500; font-size: 20px; line-height: 22px; }
.elexio .ex-copy { font-family: var(--copy); font-weight: 400; font-size: 16px; line-height: 19.2px; }
.elexio .ex-copy-s { font-family: var(--copy); font-weight: 400; font-size: 14px; line-height: 16.8px; }
.elexio .ex-disc { font-family: var(--copy); font-weight: 400; font-size: 12px; line-height: 16px; color: #666; }
.elexio .ex-num { font-family: var(--head); font-weight: 500; font-size: 30px; line-height: 30px; }
.elexio .ex-acc { color: var(--ev); font-style: italic; }

/* --------------------------------------------------------------------- nav */
/* Fuera de .elexio a proposito: el Contacto es del header del sitio y esta hoja solo carga
   en el micrositio. Aca el contacto es el Estoy interesado, que va al formulario del ELEXIO. */
#header li:has(> .url_contacto) { display: none; }
/* Abajo de 1024 el nav es la seccion activa desplegable, como el small-menu de IONIQ 9. */
/* El nav es sticky, asi que al caer en #ex-contacto taparia el arranque del formulario.
   El margen es donde termina el nav pegado: 100px hasta 1000 (93 de alto desde top 7). */
.elexio #ex-contacto { scroll-margin-top: 108px; }
/* Abajo de 1000 el #header del sitio es fixed de 55px y tapa la primera fila del nav pegado.
   Con top 7 esa fila (14 de padding + 34 del CTA) termina justo en el borde del header y a la
   seccion le quedan 12px arriba; con top 0 le quedaban 5. */
.elexio .ex-nav {
	background: var(--paper);
	padding: 14px var(--m) 16px;
	position: sticky;
	top: 7px;
	z-index: 20;
	box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
}
.elexio .ex-nav__fila {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.elexio .ex-nav__modelo { font-family: var(--head); font-weight: 700; font-size: 15px;
	line-height: 1; color: inherit; text-decoration: none; }
.elexio .ex-nav__cta {
	display: inline-flex;
	align-items: center;
	height: 34px;
	padding: 0 16px;
	border: 1px solid var(--navy);
	color: var(--navy);
	font-family: var(--copy);
	font-size: 13px;
	text-decoration: none;
	white-space: nowrap;
}
.elexio .ex-nav__cta:hover { background: var(--navy); color: #fff; }
.elexio .ex-nav__desplegable { width: 100%; order: 3; position: relative; }
.elexio .ex-nav__cta { order: 2; }
.elexio .ex-nav__resumen {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	font-family: var(--head);
	font-weight: 700;
	font-size: 17px;
	line-height: 1;
	color: #000;
	text-align: left;
}
.elexio .ex-nav__flecha { flex: none; transition: transform .2s ease; }
.elexio .ex-nav__resumen[aria-expanded="true"] .ex-nav__flecha { transform: rotate(180deg); }
.elexio .ex-nav__lista {
	list-style: none;
	margin: 0;
	padding: 0;
}
.elexio .ex-nav__desplegable .ex-nav__lista {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 14px);
	background: var(--paper);
	box-shadow: 0 8px 16px rgba(0, 0, 0, .1);
	padding: 8px 0;
	z-index: 2;
}
.elexio .ex-nav__lista[hidden] { display: none; }
.elexio .ex-nav__lista a {
	display: block;
	padding: 12px var(--m);
	font-family: var(--copy);
	font-size: 15px;
	color: #000;
	text-decoration: none;
}
.elexio .ex-nav__lista a:hover { background: rgba(0, 0, 0, .04); }
.elexio .ex-nav__lista .is-activa a { font-weight: 700; }
/* Abajo de 1000 el #header del sitio es fixed y tapa la fila del nav sticky que tiene el CTA.
   Este lo reemplaza mientras el otro esta tapado; lo prende elexio.js. */
.elexio .ex-flotante {
	position: fixed;
	right: var(--m);
	bottom: calc(20px + env(safe-area-inset-bottom, 0px));
	z-index: 20;
	display: inline-flex;
	align-items: center;
	height: 45px;
	padding: 0 22px;
	background: var(--navy);
	color: #fff;
	font-family: var(--copy);
	font-size: 14px;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
	opacity: 0;
	visibility: hidden;
	transform: translateY(16px);
	transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}
.elexio .ex-flotante.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}
.elexio .ex-flotante:hover { background: #004489; color: #fff; }

/* -------------------------------------------------------------------- hero */
.elexio .ex-hero { position: relative; }
/* La caja del banner lleva la misma proporcion que el archivo que se sirve en ese ancho,
   asi el cover no recorta. Si una foto nueva no viene en proporcion, recortarla en
   gen_variantes.sh y no cambiar esto.
   Tres proporciones, una por archivo: el -m viene 1:1 (640x640), el -t 16:9 y el -d
   2,1557 (1440x668). En movil el 16:9 daba 211px de alto y encima del banner van el
   titulo y la banda de datos; a 1:1 da 375, que es lo mas alto que
   aguantan estas fotos apaisadas sin cortar el auto. De 1024 para arriba el
   16:9 a ancho completo daba 810 y era demasiado.
   El corte de caja tiene que moverse junto con el recorte del asset, nunca uno solo. */
.elexio .ex-hero__foto { position: relative; overflow: hidden; aspect-ratio: 1 / 1; }
.elexio .ex-hero__foto img { width: 100%; height: 100%; object-fit: cover; }
/* En movil el velo es parejo, no degrade: con el titulo arriba y la banda de datos
   abajo el texto ocupa del 8% al 93% del alto, y no queda ventana para aclarar el medio.
   0,55 es el minimo medido que pasa las dos bandas sobre los cinco heroes (titulo 5,36
   y datos 4,74, contra 4,5 de WCAG); con 0,52 los datos caen a 4,29.
   De 768 para arriba vuelve el degrade, que ahi alcanza. */
.elexio .ex-hero__velo {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .55);
	pointer-events: none;
}
/* El titulo va sobre la foto en todos los anchos, a sangre. El degrade lo sostiene.
   Ojo: en movil la foto mide 211px de alto contra los 672 que usa IONIQ 9, asi que el
   texto cae sobre mucho menos aire. El contraste lo aguanta el velo, no el encuadre. */
.elexio .ex-hero__texto {
	position: absolute;
	left: var(--m);
	/* sin el right el titulo largo se sale de pantalla: al ser absoluto ya no lo
	   frena el padding que tenia cuando iba en flujo */
	right: var(--m);
	top: 24px;
	padding: 0;
	color: #fff;
	z-index: 2;
}
.elexio .ex-hero__texto .ex-subhero { margin-top: 12px; }
/* Los datos van sobre la foto en todos los anchos. En movil entran porque el -m es
   1:1: 375px de alto contra los 211 del 16:9, donde la banda sola ya media 216. */
.elexio .ex-hero__datos {
	position: absolute;
	left: var(--m);
	right: var(--m);
	bottom: 20px;
	color: #fff;
	margin: 0;
	padding: 0;
	z-index: 2;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}
.elexio .ex-hero__datos dt,
.elexio .ex-hero__datos dd { margin: 0; }
/* En movil van los tres en una fila (pedido de Fidocar del 05/10). El rotulo reserva dos
   lineas para que las cifras queden a la misma altura aunque el de airbags no tenga, y la
   cifra baja con el ancho: a 22px fijos "9 airbags" no entra en la columna de un celular
   de 320. De 768 vuelven los tamanos de siempre. */
.elexio .ex-hero__dato-rotulo { font-family: var(--copy); font-size: 13px; line-height: 15.6px; min-height: 31.2px; }
.elexio .ex-hero__dato-cifra { display: flex; align-items: baseline; gap: 5px; margin-top: 6px; }
.elexio .ex-hero__datos .ex-num { font-size: min(22px, 5.6vw); line-height: 1; }
/* La reserva queda en flujo y fija el ancho del valor final; el valor cuenta
   encima, absoluto, para que el bloque no se mueva al cambiar de digitos. */
.elexio .ex-cifra { position: relative; }
.elexio .ex-cifra__valor { position: absolute; left: 0; }
.elexio .ex-cifra__reserva { opacity: 0; }
/* sin transparencia en movil: sobre el velo, el .85 dejaba la nota en 4,47 y el
   umbral es 4,5. De 768 vuelve, que ahi la foto es mas grande y sobra contraste. */
.elexio .ex-hero__dato-nota { margin-top: 6px; font-size: 12px; line-height: 14.4px; }

/* ------------------------------------------------------- foto a sangre suelta */
.elexio .ex-foto-sangre { overflow: hidden; aspect-ratio: 16 / 9; }
.elexio .ex-foto-sangre img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------- titulares */
.elexio .ex-titular { padding-top: var(--pad); padding-bottom: var(--pad); }
.elexio .ex-titular--paper { background: var(--paper); }
/* cuando el titular es de un bloque que viene pegado abajo */
.elexio .ex-titular--pegado { padding-bottom: 24px; }
.elexio .ex-titular--corto { padding-bottom: 32px; }
.elexio .ex-titular .ex-sub { margin-top: 24px; }
/* Cada linea del titular entra con mascara y desplazamiento, la bajada con fundido.
   El clip-path es la mascara: las variables las mueve el JS de 0 a 100%.
   El estado escondido cuelga de .elexio-anima, que el script de assets pone en el html
   antes de dibujar. Sin JS, o con menos movimiento pedido, no se pone y el titular
   queda visible y quieto: nunca un titulo invisible por un script que no cargo. */
.elexio .ex-linea { display: block; }
.elexio .ex-titular__caja { overflow: hidden; }
.elexio-anima .elexio .ex-linea {
	clip-path: polygon(0 var(--ex-alto, 0), 100% var(--ex-alto, 0),
		100% var(--ex-bajo, 0), 0 var(--ex-bajo, 0));
	opacity: 0;
}
.elexio-anima .elexio .ex-aparece { opacity: 0; }
/* El titulo del banner entra aparte: el hero de IONIQ 9 no usa el mecanismo de las
   lineas sino un animate() que sube 20px destapando de arriba hacia abajo. Arranca
   solo, sin scroll de por medio, porque el banner ya esta a la vista. */
.elexio-anima .elexio .ex-hero__texto .ex-h1,
.elexio-anima .elexio .ex-hero__texto .ex-subhero { opacity: 0; }

/* Entrada de los bloques de contenido: suben 16px y funden al asomar. IONIQ 9 no anima
   estos bloques (solo el banner, el titular y las cifras), asi que esto es propio: un
   gesto unico y corto, para que acompane y no compita con los tres de arriba. Fuera
   quedan a proposito el calculador, el selector de color y el formulario: son controles,
   y demorar algo con lo que el visitante va a interactuar es molestarlo, no decorarlo.
   El escalonado lo pone el JS y solo entre hermanos del mismo bloque. */
.elexio-anima .elexio .ex-entra {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 420ms ease-out, transform 420ms ease-out;
}
.elexio-anima .elexio .ex-entra--visible { opacity: 1; transform: none; }

/* ------------------------------------------------------- bloques de a tres */
.elexio .ex-specs { padding-bottom: var(--pad); }
.elexio .ex-specs--paper { background: var(--paper); }
.elexio .ex-specs__grilla { display: grid; grid-template-columns: 1fr; gap: 36px; }
.elexio .ex-specs__foto img { aspect-ratio: 3 / 2; width: 100%; height: auto; object-fit: cover; }
.elexio .ex-specs__titulo { font-family: var(--head); font-weight: 500; font-size: 18px; line-height: 21.6px; margin-top: 28px; }
.elexio .ex-specs__texto { margin-top: 8px; max-width: 42ch; }

/* ------------------------------------------------------- mosaico de 4 fotos */
.elexio .ex-mosaico { display: grid; grid-template-columns: 1fr; gap: 4px; padding-bottom: 70px; }
.elexio .ex-mosaico img { width: 100%; height: 240px; object-fit: cover; }

/* -------------------------------------------------------------- calculador */
/* Grilla de dos columnas: los controles a la izquierda y a la derecha el dato, con la
   foto debajo de su texto. Abajo de 768 se apila entero. */
.elexio .ex-calc { padding-top: var(--pad); }
.elexio .ex-calc__fila { display: grid; gap: 36px; }
.elexio .ex-calc__controles .ex-h3 { margin-bottom: 30px; }
.elexio .ex-calc__controles .ex-copy { margin-bottom: 40px; }
.elexio .ex-calc__dato {
	border-left: 1px solid var(--inter);
	padding-left: 15px;
	padding-right: 14px;
	max-width: 180px;
}
.elexio .ex-calc__modelo { font-family: var(--copy); font-size: 20px; line-height: 27px; margin-top: -6px; }
.elexio .ex-calc__label { font-family: var(--head); font-weight: 500; font-size: 18px; line-height: 21.6px; }
.elexio .ex-calc__foto { width: 76%; margin: 0 auto; pointer-events: none; }
.elexio .ex-calc__pie { padding-bottom: var(--pad); }
.elexio .ex-calc__pie > div { max-width: 100%; margin: 42px auto 0; }
.elexio .ex-calc__pie hr { border: 0; border-top: 1px solid var(--inter); margin-top: 20px; }
.elexio .ex-calc__pie .ex-copy-s { margin-top: 20px; }

.elexio .ex-slider { background: #535356; height: 4px; margin-top: 30px; position: relative; }
.elexio .ex-slider__input {
	position: absolute;
	inset: -14px 0;
	width: 100%;
	margin: 0;
	opacity: 0;
	cursor: ew-resize;
	z-index: 2;
}
.elexio .ex-slider__riel {
	background: var(--inter);
	display: flex;
	height: 4px;
	justify-content: flex-end;
	position: absolute;
	width: var(--ex-progreso, 0%);
}
.elexio .ex-slider__valor {
	display: block;
	position: absolute;
	right: 0;
	top: -32px;
	transform: translate(50%);
	text-align: center;
	min-width: 44px;
	white-space: nowrap;
	font-family: var(--copy);
	font-size: 16px;
	font-weight: 500;
}
.elexio .ex-slider__pulgar {
	display: block;
	height: 32px;
	width: 32px;
	line-height: 0;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translate(50%, -50%);
	pointer-events: none;
}
.elexio .ex-slider__input:focus-visible + .ex-slider__riel .ex-slider__pulgar {
	outline: 2px solid var(--navy);
	outline-offset: 2px;
	border-radius: 50%;
}

/* ------------------------------------------------------- selector de color */
.elexio .ex-colores { padding-top: var(--pad); padding-bottom: var(--pad); }
.elexio .ex-colores__col { padding-left: var(--m); padding-right: var(--m); }
.elexio .ex-colores__nombre { font-family: var(--head); font-weight: 500; font-size: 24px; line-height: 28px; margin-top: 40px; transition: opacity 150ms ease; }
.elexio .ex-colores__texto { margin-top: 12px; max-width: 42ch; }
.elexio .ex-colores__muestras { display: flex; gap: 18px; flex-wrap: wrap; margin: 32px 0 0; padding: 0; list-style: none; }
.elexio .ex-colores__muestras li { display: flex; }
.elexio .ex-colores__muestra {
	display: block;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 0;
	padding: 0;
	cursor: pointer;
	box-shadow: 0 0 0 1px var(--line);
}
.elexio .ex-colores__muestra[aria-pressed="true"] { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--inter); }
.elexio .ex-colores__disc { margin-top: 28px; max-width: 44ch; }
.elexio .ex-colores__foto { margin-top: 32px; position: relative; }
.elexio .ex-colores__foto img { display: block; width: 100%; height: 240px; object-fit: contain; }
/* Copia de la foto que sale, encima de la que entra. Los 300ms ease son los
   del image-switch de IONIQ 9 (ioniq9/css/theme-ev.e17d3e04.css), el unico
   cruce de fotos que tiene el sitio. Hereda la caja de la regla de arriba,
   asi que sigue sola los tres altos del breakpoint. */
.elexio .ex-colores__fantasma {
	position: absolute; top: 0; left: 0;
	opacity: 0; pointer-events: none;
	transition: opacity 300ms ease;
}
.elexio .ex-colores__fantasma--puesto { opacity: 1; transition: none; }

/* --------------------------------------------------------------- versiones */
.elexio .ex-versiones__caja { padding-bottom: var(--pad); }
.elexio .ex-versiones { width: 100%; border-collapse: collapse; }
.elexio .ex-versiones caption { text-align: left; color: #666; padding-bottom: 14px; }
.elexio .ex-versiones th,
.elexio .ex-versiones td {
	font-family: var(--head);
	font-weight: 500;
	font-size: 16px;
	line-height: 20px;
	text-align: left;
	padding: 14px 16px 14px 0;
	border-bottom: 1px solid var(--line);
}
.elexio .ex-versiones thead th { color: #666; border-bottom-color: #000; }
.elexio .ex-versiones tbody th { white-space: nowrap; }
.elexio .ex-versiones td { font-family: var(--copy); font-weight: 400; }

/* ------------------------------------------------------------- dimensiones */
/* El recorte es 16:9 y las lineas van en porcentajes de esa caja: techo 17.39%,
   piso 60.29%, morro 18.47%, cola 81.52% y centros de rueda 30.34% y 69.58%. */
.elexio .ex-dim { position: relative; aspect-ratio: 16 / 9; }
.elexio .ex-dim img { width: 100%; height: 100%; }
.elexio .ex-dim__linea { position: absolute; background: #B9B9B9; }
.elexio .ex-dim__letra {
	position: absolute;
	font-family: var(--head);
	font-weight: 500;
	font-size: 14px;
	line-height: 1;
	color: var(--h);
}
.elexio .ex-dim__alto { left: 11%; top: 17.39%; width: 1px; height: 42.90%; }
.elexio .ex-dim__tope { left: calc(11% - 4px); top: 17.39%; width: 8px; height: 1px; }
.elexio .ex-dim__piso { left: calc(11% - 4px); top: 60.29%; width: 8px; height: 1px; }
.elexio .ex-dim__ejes { left: 30.34%; top: 66.6%; width: 39.24%; height: 1px; }
.elexio .ex-dim__largo { left: 18.47%; top: 75.1%; width: 63.05%; height: 1px; }
.elexio .ex-dim__ancho {
	left: 84.5%;
	top: 60.5%;
	width: 8%;
	height: 1px;
	transform: rotate(30deg);
	transform-origin: left center;
}
.elexio .ex-dim__letra--d { left: 5.2%; top: 35.4%; }
.elexio .ex-dim__letra--b { left: 0; top: 68.6%; width: 100%; text-align: center; }
.elexio .ex-dim__letra--a { left: 0; top: 77.1%; width: 100%; text-align: center; }
.elexio .ex-dim__letra--c { left: 92.8%; top: 56.4%; }

.elexio .ex-medidas { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 20px; margin: 0; padding-top: 8px; padding-bottom: var(--pad); }
.elexio .ex-medidas dt,
.elexio .ex-medidas dd { margin: 0; }
.elexio .ex-medidas__rotulo { color: #666; }
.elexio .ex-medidas__cifra { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; }
.elexio .ex-medidas__unidad { font-family: var(--head); font-weight: 500; font-size: 18px; line-height: 1; }

/* ---------------------------------------------------------------- descarga */
.elexio .ex-descarga {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 20px 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	text-decoration: none;
	max-width: 800px;
}
.elexio .ex-descarga__titulo { display: block; font-family: var(--head); font-weight: 500; font-size: 16px; line-height: 1.22; color: #000; }
.elexio .ex-descarga__meta { display: block; color: #666; margin-top: 6px; }
.elexio .ex-descarga__icono { flex: none; width: 26px; height: 26px; }

/* ----------------------------------------------------- etiquetas eficiencia */
.elexio .ex-etiquetas { display: grid; grid-template-columns: 1fr; gap: 28px; padding-bottom: var(--pad); }
.elexio .ex-etiquetas figure { margin: 0 auto; max-width: 480px; width: 100%; }
.elexio .ex-etiquetas a { display: block; }
.elexio .ex-etiquetas img { width: 100%; height: auto; border: 1px solid #E1E1E1; box-shadow: 0 6px 20px rgba(0, 0, 0, .08); }
.elexio .ex-etiquetas figcaption { margin-top: 14px; text-align: center; font-weight: 600; color: var(--h); }
/* Mientras no llegan las etiquetas se reserva el hueco con la proporcion real (1679x2382). */
.elexio .ex-etiquetas__hueco { aspect-ratio: 1679 / 2382; background: #fff; border: 1px solid var(--line); }

/* ---------------------------------------------------------------- garantia */
.elexio .ex-garantia { padding: 0 0 var(--pad); }
.elexio .ex-garantia__caja {
	background: linear-gradient(135deg, #002C5F 0%, #013A63 55%, #05141F 100%);
	border-top: 4px solid #00AAD2;
	border-radius: 12px;
	padding: 28px 20px;
	color: #fff;
}
.elexio .ex-garantia__caja h3 { font-size: 22px; line-height: 1.2; color: #fff; }
.elexio .ex-garantia__caja p {
	font-family: var(--head);
	font-weight: 500;
	font-size: 14px;
	line-height: 1.5;
	margin-top: 14px;
	max-width: 70ch;
}

/* ------------------------------------------------------------------- forma */
.elexio .ex-form { background: var(--paper); padding-bottom: 72px; }
.elexio .ex-form__error { color: #B02A12; margin-bottom: 24px; }
.elexio .ex-form__campos { display: grid; grid-template-columns: 1fr; gap: 24px; }
.elexio .ex-form label { display: block; margin-bottom: 8px; }
.elexio .ex-form input[type="text"],
.elexio .ex-form input[type="email"],
.elexio .ex-form input[type="tel"],
.elexio .ex-form select,
.elexio .ex-form textarea {
	width: 100%;
	border: 1px solid var(--line);
	background: #fff;
	padding: 12px 14px;
	font-family: var(--copy);
	font-size: 16px;
	color: #000;
}
.elexio .ex-form select { height: 45px; border-radius: 0; }
.elexio .ex-form textarea { height: 104px; resize: vertical; }
.elexio .ex-form__acepto { display: flex; align-items: flex-start; gap: 12px; margin-top: 24px; }
.elexio .ex-form__acepto input { margin-top: 2px; flex: none; }
.elexio .ex-form__boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 50px;
	padding: 0 30px;
	margin-top: 28px;
	width: 100%;
	background: var(--navy);
	color: #fff;
	font-family: var(--copy);
	font-size: 16px;
	border: 0;
	cursor: pointer;
}
.elexio .ex-form__boton:hover { background: #004489; }

.elexio .ex-modal {
	width: calc(100% - 2 * var(--m));
	max-width: 480px;
	padding: 0;
	border: 0;
	background: #fff;
	color: #000;
	box-shadow: 0 16px 40px rgba(0, 0, 0, .2);
}
.elexio .ex-modal::backdrop { background: rgba(0, 0, 0, .5); }
.elexio .ex-modal[open] { animation: ex-modal-entra .3s ease; }
.elexio .ex-modal[open]::backdrop { animation: ex-modal-fondo .3s ease; }
@keyframes ex-modal-entra { from { opacity: 0; transform: translateY(16px); } }
@keyframes ex-modal-fondo { from { opacity: 0; } }
.elexio .ex-modal__caja { position: relative; padding: 48px 32px 32px; }
.elexio .ex-modal__caja .ex-copy { margin-top: 16px; }
.elexio .ex-modal__cerrar {
	position: absolute;
	top: 8px;
	right: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

/* ======================================================= 768px: tablet ==== */
@media (min-width: 768px) {
	.elexio { --m: 40px; --pad: 76px; }

	.elexio .ex-h1 { font-size: 44px; line-height: 44px; }
	.elexio .ex-h2 { font-size: 48px; line-height: 48px; }
	.elexio .ex-h3 { font-size: 34px; line-height: 36px; }
	.elexio .ex-sub { font-size: 24px; line-height: 29px; }
	.elexio .ex-subhero { font-size: 26px; line-height: 26px; }
	.elexio .ex-num { font-size: 34px; line-height: 34px; }

	/* de 768 se sirve el -t, que es 16:9 */
	.elexio .ex-hero__foto { aspect-ratio: 16 / 9; }
	/* de 768 la foto es bastante mas alta y el texto no necesita tanto velo */
	.elexio .ex-hero__velo {
		background: linear-gradient(180deg, rgba(0, 0, 0, .42) 0%, rgba(0, 0, 0, .12) 34%,
			rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, .30) 78%, rgba(0, 0, 0, .52) 100%);
	}
	.elexio .ex-hero__dato-nota { opacity: .85; margin-top: 10px; font-size: 14px; line-height: 16.8px; }
	.elexio .ex-hero__dato-rotulo { font-size: 16px; line-height: 19.2px; min-height: 19.2px; }
	.elexio .ex-hero__dato-cifra { gap: 10px; margin-top: 10px; }
	.elexio .ex-hero__datos .ex-num { font-size: 34px; line-height: 34px; }
	.elexio .ex-hero__texto { top: 48px; }
	/* sobre 768 los datos vuelven a la foto, abajo a la izquierda */
	.elexio .ex-hero__datos {
		position: absolute;
		left: calc(var(--m) + 16px);
		/* el right lo pone la base para que en movil la grilla ocupe el ancho;
		   aca vuelve a ancho ajustado, que es como estaba */
		right: auto;
		bottom: 44px;
		padding: 0;
		display: flex;
		gap: 44px;
		align-items: flex-start;
	}

	.elexio .ex-titular--pegado { padding-bottom: 32px; }
	.elexio .ex-titular--corto { padding-bottom: 42px; }
	.elexio .ex-specs__grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
	.elexio .ex-mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.elexio .ex-mosaico img { height: 300px; }

	.elexio .ex-calc__fila { grid-template-columns: 40% 1fr; column-gap: 0; row-gap: 0; }
	/* El auto mira a la derecha y su techo trasero ocupa la esquina de arriba a la
	   izquierda de la foto, que es donde caia el texto del dato cuando la foto se montaba
	   encima. Ahora el auto va debajo del texto y el dato ocupa las dos filas, asi que la
	   linea mide lo que miden juntos el texto y el auto, sin cuentas aparte en vw.
	   El margen de abajo corta la linea en las ruedas y no en el piso: el 4% de la
	   columna es cerca del 9% del alto del auto. */
	.elexio .ex-calc__dato {
		grid-column: 2;
		grid-row: 1 / span 2;
		margin: 20px 0 4% 8.3%;
	}
	/* El margin-top deja el auto unos 20px debajo del texto del dato (20 de su margen
	   y 100 de texto). El izquierdo lo alinea con ese texto: margen del dato, linea y
	   padding. Con el 8% de la derecha el auto mide de alto lo mismo que el anterior
	   (44,6% del bloque con una foto de 1,63:1), y el max-width es ese mismo tope de
	   alto, 478px, sobre la proporcion de esta foto, 1,76:1. */
	.elexio .ex-calc__foto {
		grid-column: 2;
		grid-row: 1 / span 2;
		align-self: start;
		width: auto;
		max-width: 842px;
		margin: 140px 8% 0 calc(8.3% + 16px);
	}
	.elexio .ex-calc__pie > div { margin-top: 48px; }

	.elexio .ex-colores__fila { display: grid; grid-template-columns: 1fr 1.15fr; gap: 36px; align-items: center; }
	.elexio .ex-colores__col { padding-right: 0; }
	.elexio .ex-colores__foto { margin-top: 0; }
	.elexio .ex-colores__foto img { height: 380px; }

	.elexio .ex-dim__letra { font-size: 20px; }
	.elexio .ex-dim__tope, .elexio .ex-dim__piso { left: calc(11% - 5px); width: 10px; }
	.elexio .ex-medidas { grid-template-columns: repeat(4, minmax(0, 1fr)); }

	.elexio .ex-descarga { padding: 22px 0; }
	.elexio .ex-descarga__titulo { font-size: 17px; }
	.elexio .ex-descarga__icono { width: 28px; height: 28px; }

	.elexio .ex-etiquetas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }

	.elexio .ex-garantia { padding-left: calc(var(--m) - 24px); padding-right: calc(var(--m) - 24px); }
	.elexio .ex-garantia__caja { padding: 36px 24px; }
	.elexio .ex-garantia__caja h3 { font-size: 28px; }
	.elexio .ex-garantia__caja p { font-size: 16px; }

	.elexio .ex-form__campos { grid-template-columns: 1fr 1fr; }
	.elexio .ex-form__boton { width: auto; }
}

/* ============================ 1000px: el #header del sitio deja de ser fixed == */
@media (min-width: 1000px) {
	.elexio .ex-nav { top: 0; }
}

/* ===================================================== 1024px: escritorio == */
@media (min-width: 1024px) {
	.elexio { --m: 112px; --pad: 120px; }

	.elexio .ex-h1 { font-size: 57.6px; line-height: 57.6px; }
	.elexio .ex-h2 { font-size: 64px; line-height: 64px; }
	.elexio .ex-h3 { font-size: 40px; line-height: 40px; }
	.elexio .ex-sub { font-size: 28px; line-height: 33.6px; }
	.elexio .ex-subhero { font-size: 32px; line-height: 32px; }
	.elexio .ex-num { font-size: 40px; line-height: 40px; }

	/* el nav vuelve a ser la fila de pestanas */
	.elexio .ex-nav { padding: 16px var(--m); }
	.elexio .ex-nav__fila { justify-content: flex-start; gap: 24px; }
	.elexio .ex-nav__desplegable { width: auto; order: 2; flex: 1; }
	.elexio .ex-nav__resumen { display: none; }
	.elexio .ex-nav__cta { order: 3; margin-left: auto; height: 40px; padding: 0 22px; font-size: 14px; }
	.elexio .ex-nav__desplegable .ex-nav__lista {
		position: static;
		display: flex;
		gap: 24px;
		background: none;
		box-shadow: none;
		padding: 0;
	}
	.elexio .ex-nav__lista[hidden] { display: flex; }
	.elexio .ex-nav__lista a {
		padding: 0;
		font-size: 14px;
		line-height: 1;
		text-decoration: underline;
		text-underline-offset: 5px;
		white-space: nowrap;
	}
	.elexio .ex-nav__lista a:hover { background: none; }

	/* el -d del hero viene recortado a 2,1557; la caja lo acompana */
	.elexio #ex-contacto { scroll-margin-top: 80px; }
	.elexio .ex-hero__foto { aspect-ratio: 1440 / 668; }
	.elexio .ex-hero__texto { top: 64px; }
	.elexio .ex-hero__datos { left: calc(var(--m) + 24px); bottom: 56px; }
	.elexio .ex-hero__datos .ex-num { font-size: 40px; line-height: 40px; }

	.elexio .ex-titular--pegado { padding-bottom: 40px; }
	.elexio .ex-titular--corto { padding-bottom: 64px; }
	.elexio .ex-specs__grilla { gap: 24px; }
	.elexio .ex-mosaico { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.elexio .ex-mosaico img { height: 380px; }

	.elexio .ex-calc__pie > div { max-width: 720px; margin-top: 76px; }

	.elexio .ex-colores__fila { grid-template-columns: 1fr 1.35fr; gap: 64px; }
	.elexio .ex-colores__foto img { height: 520px; }

	.elexio .ex-dim__letra { font-size: 32px; }
	.elexio .ex-dim__tope, .elexio .ex-dim__piso { left: calc(11% - 7px); width: 15px; }

	.elexio .ex-descarga { padding: 26px 0; }
	.elexio .ex-descarga__titulo { font-size: 18px; }
	.elexio .ex-descarga__icono { width: 32px; height: 32px; }

	.elexio .ex-etiquetas { gap: 40px; }

	.elexio .ex-garantia { padding-left: calc(var(--m) - 40px); padding-right: calc(var(--m) - 40px); }
	.elexio .ex-garantia__caja { padding: 48px 40px; }
	.elexio .ex-garantia__caja h3 { font-size: 32px; }
	.elexio .ex-garantia__caja p { font-size: 18px; }

	.elexio .ex-form__interior { max-width: 920px; }
}

@media (prefers-reduced-motion: reduce) {
	.elexio * { transition: none !important; }
	.elexio .ex-modal[open],
	.elexio .ex-modal[open]::backdrop { animation: none; }
}