/*
 * AROIL · Combustibles y Precios — estilos de front
 * Medidas y tipografía según el handoff de diseño (Propuesta 1 · Estación).
 *
 * COLOR: cada token toma el valor de la paleta de las Opciones Globales de Avada
 * (`var(--awb-colorN)`) y lleva como respaldo el HEX del handoff, que es el mismo
 * valor. Así el plugin sigue a la paleta del tema y, donde esa paleta no existe
 * (wp-admin, otro tema, Avada sin paleta), se ve exactamente igual que antes.
 *
 *   --awb-color1 #FFFFFF Fondo base    --awb-color6 #5C6473 Texto
 *   --awb-color3 #E2E6ED Linea         --awb-color7 #14181F Titular
 *   --awb-color4 #204791 Primary azul  --awb-color8 #FD700D Acento naranja
 *   --awb-custom_color_4 #B64C02 Naranja texto (naranja legible sobre fondo claro)
 *
 * Las rampas de opacidad del ticker (bordes y textos secundarios sobre la banda)
 * se quedan en `rgba(255,255,255,…)` a propósito: derivarlas con `color-mix()` a
 * partir de un token obliga a resolver `var()`, y en un motor sin `color-mix` la
 * declaración de respaldo NO protege — se descarta en tiempo de cálculo y el borde
 * cae a `currentColor` (blanco opaco) y la sombra a `none`. Comprobado en Chrome.
 */

/* ==========================================================================
   1. Ticker de precios
   ========================================================================== */

.aroil-tick {
	--aroil-tick-bg: var(--awb-color4, #204791);
	--aroil-tick-badge: var(--awb-color8, #FD700D);
	--aroil-tick-fg: var(--awb-color1, #FFFFFF);
	/* Sobre la pastilla naranja la etiqueta va en el titular oscuro: el blanco
	   sólo contrasta 2,80:1 y color7 sube a 6,35:1 (regla de contraste AROIL). */
	--aroil-tick-badge-fg: var(--awb-color7, #14181F);
	--aroil-tick-dur: 42s;
	--aroil-tick-h: 40px;

	position: relative;
	overflow: hidden;
	width: 100%;
	background: var(--aroil-tick-bg);
	color: var(--aroil-tick-fg);
	border-top: 1px solid rgba(255, 255, 255, .12);
	font-family: inherit;
	line-height: 1;
}

.aroil-tick__in {
	display: flex;
	align-items: center;
	height: var(--aroil-tick-h);
}

.aroil-tick__label {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 9px;
	height: var(--aroil-tick-h);
	padding: 0 18px 0 40px;
	background: var(--aroil-tick-badge);
	color: var(--aroil-tick-badge-fg);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	white-space: nowrap;
}

.aroil-tick__pulse {
	width: 7px;
	height: 7px;
	flex: 0 0 auto;
	border-radius: 999px;
	background: currentColor;
	animation: aroil-pulse 1.8s infinite;
}

@keyframes aroil-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: .25; }
}

.aroil-tick__track {
	flex: 1 1 auto;
	overflow: hidden;
	min-width: 0;
}

.aroil-tick__row {
	display: flex;
	width: max-content;
	animation: aroil-slide var(--aroil-tick-dur) linear infinite;
	will-change: transform;
}

.aroil-tick__group {
	display: flex;
	flex: 0 0 auto;
}

@keyframes aroil-slide {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

.aroil-tick__track:hover .aroil-tick__row,
.aroil-tick__track:focus-within .aroil-tick__row {
	animation-play-state: paused;
}

.aroil-tick--nopause .aroil-tick__track:hover .aroil-tick__row {
	animation-play-state: running;
}

.aroil-tick__i {
	display: flex;
	align-items: baseline;
	gap: 10px;
	height: var(--aroil-tick-h);
	padding: 0 24px;
	line-height: var(--aroil-tick-h);
	border-right: 1px solid rgba(255, 255, 255, .12);
	white-space: nowrap;
}

.aroil-tick__name {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .81);
}

.aroil-tick__price {
	font-size: 15px;
	font-weight: 700;
	color: var(--aroil-tick-fg);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
}

.aroil-tick__unit {
	font-size: 11px;
	color: rgba(255, 255, 255, .55);
}

@media (max-width: 760px) {
	.aroil-tick__label { padding: 0 14px; letter-spacing: .12em; }
	.aroil-tick__i     { padding: 0 18px; }
}

/* Sin animación: la pista se recorre a mano y se oculta el grupo duplicado. */
@media (prefers-reduced-motion: reduce) {
	.aroil-tick__row   { animation: none; }
	.aroil-tick__pulse { animation: none; }
	.aroil-tick__track { overflow-x: auto; }
	.aroil-tick__group[aria-hidden="true"] { display: none; }
}

/* ==========================================================================
   2. Tarjetas de precios
   ========================================================================== */

.aroil-prices-wrap {
	--aroil-blue: var(--awb-color4, #204791);
	--aroil-orange: var(--awb-color8, #FD700D);
	--aroil-line: var(--awb-color3, #E2E6ED);
	--aroil-muted: var(--awb-color6, #5C6473);
	--aroil-surface: var(--awb-color1, #FFFFFF);
	/* Etiqueta sobre el azul: blanco. Sobre el naranja: titular oscuro. */
	--aroil-on-blue: var(--awb-color1, #FFFFFF);
	--aroil-on-orange: var(--awb-color7, #14181F);
	/* Naranja como TEXTO sobre fondo claro (5,22:1 sobre blanco). */
	--aroil-orange-text: var(--awb-custom_color_4, #B64C02);
	/* Estado, no marca: la paleta de Avada no tiene slot para subida/bajada. */
	--aroil-up: #B3261E;
	--aroil-down: #1B6E3C;
	--aroil-cols: 3;

	font-family: inherit;
}

.aroil-prices {
	display: grid;
	grid-template-columns: repeat(var(--aroil-cols), minmax(0, 1fr));
	gap: 20px;
}

.aroil-price-slide {
	display: flex;
	min-width: 0;
}

.aroil-price-slide > .aroil-price {
	flex: 1 1 auto;
}

.aroil-price {
	display: grid;
	gap: 10px;
	justify-items: center;
	padding: 28px;
	text-align: center;
	background: var(--aroil-surface);
	border: 1px solid var(--aroil-line);
	border-radius: 10px;
	transition: transform .18s ease, box-shadow .18s ease;
}

.aroil-price:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 34px rgba(13, 30, 66, .08);
}

.aroil-price__tag {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 999px;
	background: var(--aroil-blue);
	color: var(--aroil-on-blue);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -.02em;
}

.aroil-price--featured .aroil-price__tag {
	background: var(--aroil-orange);
	color: var(--aroil-on-orange);
}

.aroil-price__name {
	margin: 0;
	font-size: 24px;
	font-weight: 800;
	line-height: 1.15;
	color: var(--aroil-blue);
}

.aroil-price--featured .aroil-price__name { color: var(--aroil-orange-text); }

.aroil-price__sub {
	margin: 0;
	min-height: 20px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--aroil-muted);
}

.aroil-price__val {
	margin: 0;
	font-size: 46px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.04em;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
}

.aroil-price__val small {
	font-size: 17px;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--aroil-muted);
}

.aroil-price__var {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.aroil-price__var--up   { color: var(--aroil-up); }
.aroil-price__var--down { color: var(--aroil-down); }
.aroil-price__var--flat { color: var(--aroil-muted); font-weight: 500; }

.aroil-prices__note,
.aroil-prices__stamp {
	margin: 8px 0 0;
	text-align: center;
	font-size: 13px;
	line-height: 1.5;
	color: var(--aroil-muted);
}

.aroil-prices__stamp {
	font-weight: 600;
}

/* El bloque de pie se separa de la rejilla, sea la nota o el sello lo primero
   que venga detrás. Entre nota y sello se mantienen los 8px de arriba. */
.aroil-prices + .aroil-prices__note,
.aroil-prices + .aroil-prices__stamp {
	margin-top: 40px;
}

@media (max-width: 1100px) {
	.aroil-prices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   2.1 Móvil: las tarjetas pasan a slider horizontal

   Lo monta el snippet HScroll del sitio (WPCode → HTML Snippet, footer): busca
   los `.hscroll-item`, los envuelve en un `.hscroll-track` a sangre y añade los
   dots. Aquí sólo se prepara el terreno, con el MISMO breakpoint que el snippet
   (800px), para que el plugin se comporte igual que el resto de columnas de
   Avada en lugar de traer su propio slider.

   La rejilla deja de ser rejilla: el track a sangre (`width:100vw` con
   `margin-left: calc(50% - 50vw)`) es un truco de flujo en bloque y dentro de
   una celda de grid se comporta de forma impredecible. Si el snippet no
   estuviera instalado, las tarjetas quedan apiladas como hasta ahora.
   -------------------------------------------------------------------------- */
@media (max-width: 800px) {
	.aroil-prices {
		display: block;
	}

	.aroil-price-slide + .aroil-price-slide {
		margin-top: 20px;
	}

	/* Dentro del track manda el snippet: él pone los 20px laterales en la
	   diapositiva y anula sus márgenes. */
	.hscroll-track .aroil-price-slide + .aroil-price-slide {
		margin-top: 0;
	}

	/* Con slider, el track ya trae 28px de aire por debajo y los dots otros 18. */
	.aroil-prices:has(.hscroll-dots) + .aroil-prices__note,
	.aroil-prices:has(.hscroll-dots) + .aroil-prices__stamp {
		margin-top: 16px;
	}
}

@media (max-width: 640px) {
	.aroil-price      { padding: 24px; }
	.aroil-price__val { font-size: 40px; }
}

/* ==========================================================================
   3. Utilidades
   ========================================================================== */

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