/* =========================================================
   Addons Web — hoja de estilos base
   Cada elemento nuevo suma su bloque de estilos acá abajo,
   identificado con un comentario "=== nombre del elemento ===".
   ========================================================= */

/* Fallback de tokens de marca por si el inline <style> de wp_head
   todavía no cargó (edge case en algunos cachés de página). Los
   valores reales siempre los pisa includes/class-aw-loader.php. */
:root {
	--aw-color-cream: #FFF9ED;
	--aw-color-navy: #022345;
	--aw-color-blue: #0100B4;
	--aw-color-red: #EB2D12;
	--aw-color-cyan: #00ADE5;
	--aw-color-lavender: #C8D5FF;
	--aw-font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* === Mobile safety: corridos/rotaciones decorativos ===
   Varios elementos (Texto Resaltado, Ícono de Fondo, Tarjetas con Ícono,
   Imagen Sticker, Tabla Comparativa) dejan que Mati corra/rote un
   elemento en px fijos para lograr un efecto "sticker" — pensado con
   valores de pantalla grande. En una pantalla angosta ese mismo corrido
   en px puede empujar el elemento fuera del viewport (el reporte de
   Mati: "algunos elementos... me quedan por fuera de la pág").
   --aw-decor-scale es la variable compartida que cada uno de esos sitios
   usa dentro de un calc() para escalar su corrido; achica el corrido
   automáticamente en tablet/mobile sin que haya que tocar los valores
   que Mati ya cargó por elemento. Se define en :root (no en cada
   wrapper) para que aplique a todos por igual sin tener que enumerar
   cada clase acá. La rotación (grados) NO se escala a propósito: un
   ángulo no "desborda" la página de la misma forma que un corrido en
   px, y cambiarlo alteraría el look del efecto más de lo necesario. */
@media (max-width: 900px) {
	:root { --aw-decor-scale: .75; }
}
@media (max-width: 600px) {
	:root { --aw-decor-scale: .5; }
}

/* Nota: hasta v1.24.x había acá un "cinturón de seguridad" con
   overflow-x:hidden en estos mismos 5 wrappers, como backstop extra para
   cuando un corrido muy grande empujaba algo fuera del viewport aun ya
   escalado por --aw-decor-scale. Se sacó en v1.25.0: Mati reportó que
   terminaba recortando contenido real con un corte feo y prefiere
   controlar el tamaño él mismo a que el plugin recorte nada
   automáticamente ("no quiero que se corten los elementos, prefiero
   achicarlos yo manualmente"). --aw-decor-scale sigue escalando los
   corridos hacia abajo en mobile/tablet; si algún valor cargado a mano
   sigue siendo demasiado grande para el ancho disponible, ahora se va a
   VER (en vez de recortarse solo), para que se pueda ajustar el valor. */

/* === Animación de entrada compartida (aw-reveal) ===
   Convención reutilizable por cualquier elemento en grilla/fila: el
   contenedor lleva las clases "aw-reveal aw-anim-{tipo}" y cada ítem
   adentro lleva "aw-reveal-item" + un --aw-i (índice) inline para el
   escalonado. assets/js/addons-web.js observa ".aw-reveal" y agrega
   "aw-in" cuando entra en pantalla; la clase aw-anim-{tipo} define
   qué transición corre. */

.aw-reveal.aw-anim-fade .aw-reveal-item {
	opacity: 0;
	transition: opacity .9s ease;
	transition-delay: calc(var(--aw-i, 0) * 150ms);
}
.aw-reveal.aw-anim-fade.aw-in .aw-reveal-item { opacity: 1; }

.aw-reveal.aw-anim-up .aw-reveal-item {
	opacity: 0;
	transform: translateY(34px);
	transition: opacity .9s ease, transform .9s cubic-bezier(.22, 1, .36, 1);
	transition-delay: calc(var(--aw-i, 0) * 150ms);
}
.aw-reveal.aw-anim-up.aw-in .aw-reveal-item { opacity: 1; transform: translateY(0); }

.aw-reveal.aw-anim-zoom .aw-reveal-item {
	opacity: 0;
	transform: scale(.8);
	transition: opacity .8s ease, transform .8s cubic-bezier(.22, 1, .36, 1);
	transition-delay: calc(var(--aw-i, 0) * 150ms);
}
.aw-reveal.aw-anim-zoom.aw-in .aw-reveal-item { opacity: 1; transform: scale(1); }

.aw-reveal.aw-anim-none .aw-reveal-item { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	.aw-reveal .aw-reveal-item {
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}

/* === AW – Texto Resaltado (aw_highlight_text) === */

.aw-hl-block {
	display: flex;
	flex-direction: column;
	gap: var(--aw-gap, 10px);
	font-family: var(--aw-font);
}

.aw-hl-block.aw-align-left { align-items: flex-start; text-align: left; }
.aw-hl-block.aw-align-center { align-items: center; text-align: center; }
.aw-hl-block.aw-align-right { align-items: flex-end; text-align: right; }

.aw-hl-line {
	position: relative;
	display: inline-block;
	padding: var(--aw-pad-v, 4px) var(--aw-pad-h, 14px);
	font-size: var(--aw-fs, 32px);
	line-height: 1.2;
	box-sizing: border-box;
	/* El corrido (offset_x/offset_y) se guarda en px "de desktop" desde
	   PHP; --aw-decor-scale (definido más abajo, según ancho de pantalla)
	   lo escala hacia abajo en mobile/tablet para que un corrido pensado
	   para una pantalla grande no empuje la línea fuera del viewport en
	   una angosta. La rotación no se escala (un ángulo no "desborda" la
	   página de la misma forma que un corrido en px). Se arma UNA vez acá
	   en --aw-static (reusando el nombre de variable de siempre) para que
	las animaciones de abajo lo combinen sin repetir el calc(). */
	--aw-static: translate(calc(var(--aw-hl-offset-x, 0px) * var(--aw-decor-scale, 1)), calc(var(--aw-hl-offset-y, 0px) * var(--aw-decor-scale, 1))) rotate(var(--aw-hl-rotation, 0deg));
	transform: var(--aw-static, none);
}

.aw-hl-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--aw-bg);
	border-radius: var(--aw-radius, 0px);
	transform-origin: left center;
}

/* Tamaño de fuente y padding responsive (opcionales, por eso el fallback en
   cascada): si Mati no cargó los campos "...en Tablet/Mobile", cada
   breakpoint hereda el del breakpoint más ancho sin ningún cambio de
   comportamiento. El padding responsive existe sobre todo para poder
   achicarlo en mobile cuando el tamaño de fuente mobile es grande — si no,
   una fuente grande con el mismo padding "de escritorio" puede cortar
   palabras feo al saltar de línea. */
@media (max-width: 900px) {
	.aw-hl-line {
		font-size: var(--aw-fs-tablet, var(--aw-fs, 32px));
		padding: var(--aw-pad-v-tablet, var(--aw-pad-v, 4px)) var(--aw-pad-h-tablet, var(--aw-pad-h, 14px));
		/* Ancho máximo (v1.27.0: solo mobile ≤600px — v1.32.0: Mati pidió
		   que "arranque desde antes" y "en tablet también", después de ver
		   en varios anchos de celular reales (iPhone SE, Galaxy Fold, etc.)
		   que el corte/wrap raro que Caro le señaló seguía apareciendo).
		   Ahora el tope entra ACÁ, en los 900px (tablet + mobile juntos, un
		   solo ajuste general en vez de un campo por breakpoint) — en
		   escritorio la línea sigue estirándose libre según su propio texto
		   (comportamiento original, sin cambios). Cascada de 3 pasos:
		   primero el ancho propio de ESTA línea (--aw-hl-line-max-w-mobile,
		   campo "Ancho máximo en Mobile" de esa línea puntual dentro de
		   "Líneas"); si esa línea no tiene el suyo, el general del wrapper
		   (--aw-hl-line-max-w, campo "...— general" más abajo, aplica a
		   todas las líneas por igual); si tampoco hay general, sin tope. */
		max-width: var(--aw-hl-line-max-w-mobile, var(--aw-hl-line-max-w, none));
		/* Corrido en tablet (v1.33.0, opcional, por línea): si Mati cargó
		   "Correr horizontal/vertical en Tablet" para esta línea puntual,
		   se usa ese valor TAL CUAL (sin aplicarle --aw-decor-scale — es un
		   valor que él ya pensó para este ancho de pantalla). Si no cargó
		   nada, cae en el cálculo de siempre: el corrido de escritorio
		   escalado por --aw-decor-scale (.75 acá). */
		--aw-static: translate(var(--aw-hl-offset-x-tablet, calc(var(--aw-hl-offset-x, 0px) * var(--aw-decor-scale, 1))), var(--aw-hl-offset-y-tablet, calc(var(--aw-hl-offset-y, 0px) * var(--aw-decor-scale, 1)))) rotate(var(--aw-hl-rotation, 0deg));
	}
}
@media (max-width: 600px) {
	.aw-hl-line {
		font-size: var(--aw-fs-mobile, var(--aw-fs-tablet, var(--aw-fs, 32px)));
		padding: var(--aw-pad-v-mobile, var(--aw-pad-v-tablet, var(--aw-pad-v, 4px))) var(--aw-pad-h-mobile, var(--aw-pad-h-tablet, var(--aw-pad-h, 14px)));
		/* Corrido en mobile (opcional, por línea): si Mati cargó
		   "Correr horizontal/vertical en Mobile" para esta línea puntual,
		   se usa ese valor TAL CUAL. Si no cargó nada, cae en cascada al de
		   Tablet de arriba (si tampoco hay, al de escritorio escalado por
		   --aw-decor-scale, .5 acá) — mismo patrón de cascada que
		   tamaño de fuente/padding. */
		--aw-static: translate(var(--aw-hl-offset-x-mobile, var(--aw-hl-offset-x-tablet, calc(var(--aw-hl-offset-x, 0px) * var(--aw-decor-scale, 1)))), var(--aw-hl-offset-y-mobile, var(--aw-hl-offset-y-tablet, calc(var(--aw-hl-offset-y, 0px) * var(--aw-decor-scale, 1))))) rotate(var(--aw-hl-rotation, 0deg));
	}
}

.aw-hl-text {
	position: relative;
	z-index: 1;
	display: inline-block;
	color: var(--aw-fg);
	font-weight: var(--aw-weight, 800);
}

/* --- Animación: pincelada (el fondo "pinta" de izquierda a derecha,
   el texto aparece justo después) --- */
.aw-anim-sweep .aw-hl-bg {
	transform: scaleX(0);
	transition: transform .55s cubic-bezier(.65, 0, .35, 1);
	transition-delay: calc(var(--aw-i, 0) * 110ms);
}
.aw-anim-sweep .aw-hl-text {
	opacity: 0;
	transition: opacity .35s ease;
	transition-delay: calc(var(--aw-i, 0) * 110ms + .18s);
}
.aw-anim-sweep.aw-in .aw-hl-bg { transform: scaleX(1); }
.aw-anim-sweep.aw-in .aw-hl-text { opacity: 1; }

/* --- Animación: deslizar + fundido (toda la línea entra desde la
   izquierda, el fondo ya está pintado) --- */
.aw-anim-slide .aw-hl-line {
	opacity: 0;
	transform: var(--aw-static, none) translateX(-32px);
	transition: opacity .5s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
	transition-delay: calc(var(--aw-i, 0) * 110ms);
}
.aw-anim-slide.aw-in .aw-hl-line { opacity: 1; transform: var(--aw-static, none); }

/* --- Animación: fundido simple --- */
.aw-anim-fade .aw-hl-line {
	opacity: 0;
	transition: opacity .5s ease;
	transition-delay: calc(var(--aw-i, 0) * 110ms);
}
.aw-anim-fade.aw-in .aw-hl-line { opacity: 1; }

/* --- Sin animación: todo visible de entrada --- */
.aw-anim-none .aw-hl-bg { transform: scaleX(1); }
.aw-anim-none .aw-hl-text { opacity: 1; }

/* Accesibilidad: si el visitante pidió menos movimiento, mostramos
   todo de una sin transiciones. */
@media (prefers-reduced-motion: reduce) {
	/* Se desactiva la animación de entrada, pero se respeta la rotación
	   y el corrido "fijo" de cada línea (--aw-static): eso es estilo,
	   no movimiento. */
	.aw-hl-bg, .aw-hl-text, .aw-hl-line { transition: none !important; }
	.aw-hl-bg { transform: scaleX(1) !important; }
	.aw-hl-text { opacity: 1 !important; }
	.aw-hl-line { opacity: 1 !important; transform: var(--aw-static, none) !important; }
}

/* === AW – Ícono de Fondo (aw_icon_label) === */

.aw-icon-label-wrap { display: flex; font-family: var(--aw-font); }
.aw-icon-label-wrap.aw-align-left { justify-content: flex-start; }
.aw-icon-label-wrap.aw-align-center { justify-content: center; }
.aw-icon-label-wrap.aw-align-right { justify-content: flex-end; }

.aw-icon-label {
	position: relative;
	display: inline-flex;
	align-items: center;
	font-size: var(--aw-fs, 14px);
	letter-spacing: var(--aw-ls, 1px);
	font-weight: var(--aw-weight, 700);
	color: var(--aw-fg);
	line-height: 1;
	padding: 0.6em 0.2em;
}

.aw-icon-label-icon {
	position: absolute;
	z-index: 0;
	left: 50%;
	top: 50%;
	width: var(--aw-icon-size, 70px);
	height: var(--aw-icon-size, 70px);
	margin-left: calc(var(--aw-icon-size, 70px) / -2);
	margin-top: calc(var(--aw-icon-size, 70px) / -2);
	color: var(--aw-icon-color);
	/* Corrido escalable en mobile (ver --aw-decor-scale) — mismo criterio
	   que en AW – Texto Resaltado. */
	transform: translate(calc(var(--aw-il-offset-x, 0px) * var(--aw-decor-scale, 1)), calc(var(--aw-il-offset-y, 0px) * var(--aw-decor-scale, 1))) rotate(var(--aw-il-rotation, 0deg));
	pointer-events: none;
}
.aw-icon-label-icon polygon,
.aw-icon-label-icon path,
.aw-icon-label-icon circle {
	fill: currentColor;
}
.aw-icon-label-icon--img {
	-o-object-fit: contain;
	object-fit: contain;
}

.aw-icon-label-text {
	position: relative;
	z-index: 1;
	white-space: nowrap;
}

/* === AW – Tarjetas (aw_cards) === */

.aw-cards-grid {
	display: grid;
	grid-template-columns: repeat(var(--aw-cols, 2), 1fr);
	gap: var(--aw-gap, 16px);
	font-family: var(--aw-font);
}
@media (max-width: 640px) {
	.aw-cards-grid {
		grid-template-columns: 1fr;
	}
}

.aw-card-item {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	background: var(--aw-bg, transparent);
	color: var(--aw-fg, inherit);
	border-radius: var(--aw-radius, 20px);
	padding: var(--aw-pad, 28px);
	box-sizing: border-box;
	font-weight: 600;
	line-height: 1.4;
}

.aw-card-check {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--aw-check-bg, currentColor);
	color: var(--aw-check-fg, #fff);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 0.15em;
}
.aw-card-check svg {
	width: 16px;
	height: 16px;
}

.aw-card-body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-width: 0;
	position: relative;
	z-index: 1; /* por encima de la comilla decorativa */
}
.aw-card-text {
	display: block;
}
.aw-card-stars {
	display: flex;
	align-items: center;
	gap: 2px;
	margin-bottom: 10px;
}
.aw-card-star {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	color: var(--aw-card-stars-color, var(--aw-color-blue));
	opacity: .28;
}
.aw-card-star.is-filled {
	opacity: 1;
}
.aw-card-star svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
	display: block;
}
.aw-card-author {
	display: block;
	font-weight: 700;
	margin-top: 10px;
	font-size: .92em;
}
.aw-card-quote-icon {
	position: absolute;
	top: 2px;
	right: 18px;
	font-size: 64px;
	line-height: 1;
	font-family: Georgia, 'Times New Roman', serif;
	color: var(--aw-card-quote-color, currentColor);
	opacity: .16;
	pointer-events: none;
	user-select: none;
	z-index: 0;
}

/* === AW – Pills (aw_pills) === */

.aw-pills-group {
	display: flex;
	flex-wrap: wrap;
	gap: var(--aw-gap, 10px);
	font-family: var(--aw-font);
}
.aw-pills-group.aw-align-left { justify-content: flex-start; }
.aw-pills-group.aw-align-center { justify-content: center; }
.aw-pills-group.aw-align-right { justify-content: flex-end; }

.aw-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--aw-bg, transparent);
	color: var(--aw-fg, inherit);
	border-radius: var(--aw-radius, 999px);
	padding: var(--aw-pad-v, 8px) var(--aw-pad-h, 16px);
	font-size: var(--aw-fs, 14px);
	font-weight: var(--aw-weight, 700);
	line-height: 1.2;
	white-space: nowrap;
}

.aw-pill-icon {
	flex: 0 0 auto;
	width: 1em;
	height: 1em;
	display: inline-flex;
}
.aw-pill-icon svg,
.aw-pill-icon img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
}

/* === AW – Tarjetas con Ícono (aw_cards_icon) === */

.aw-cardsi-grid {
	display: grid;
	grid-template-columns: repeat(var(--aw-cols, 4), 1fr);
	column-gap: var(--aw-gap, 20px);
	row-gap: var(--aw-row-gap, var(--aw-gap, 20px));
	font-family: var(--aw-font);
}
@media (max-width: 900px) {
	.aw-cardsi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.aw-cardsi-grid { grid-template-columns: 1fr; }
	.aw-cardsi-grid .aw-cardsi-wide { grid-column: auto; }
}

.aw-cardsi-item {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--aw-bg, transparent);
	color: var(--aw-fg, inherit);
	border-radius: var(--aw-radius, 18px);
	border: var(--aw-border-w, 1.5px) solid var(--aw-border-color, transparent);
	padding: var(--aw-pad, 28px);
	box-sizing: border-box;
}
.aw-cardsi-item.aw-cardsi-wide {
	grid-column: span 2;
}

.aw-cardsi-icon {
	display: inline-flex;
	flex: 0 0 auto;
	width: var(--aw-icon-size, 40px);
	height: var(--aw-icon-size, 40px);
	margin-bottom: 16px;
}
.aw-cardsi-icon svg,
.aw-cardsi-icon img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
}
.aw-cardsi-icon--badge {
	border-radius: 50%;
	background: var(--aw-icon-badge-bg, transparent);
	color: #fff;
	box-sizing: border-box;
	width: calc(var(--aw-icon-size, 40px) * 1.6);
	height: calc(var(--aw-icon-size, 40px) * 1.6);
	padding: calc(var(--aw-icon-size, 40px) * 0.3);
}

/* Ícono grande "asomando" en una esquina de la tarjeta, tipo sticker/
   ilustración, en vez de arriba centrado en el flujo normal. Se ubica
   con position:absolute (la tarjeta es su position:relative) y puede
   sobresalir del borde con corridos negativos: la tarjeta no recorta
   contenido (no tiene overflow:hidden), así que el ícono se ve entero
   aunque "pise" el borde. */
.aw-cardsi-icon--corner {
	position: absolute;
	margin-bottom: 0;
	z-index: 2;
	transform: rotate(var(--aw-icon-rotation, 0deg));
}
/* Los 4 corridos de acá abajo se escalan con --aw-decor-scale en mobile
   (ver el bloque "Mobile safety" al final del archivo), para que un
   corrido pensado para desktop no empuje el ícono fuera del viewport en
   una tarjeta angosta. */
.aw-cardsi-icon--corner-bl { left: calc(var(--aw-icon-offset-x, -10px) * var(--aw-decor-scale, 1)); bottom: calc(var(--aw-icon-offset-y, -10px) * var(--aw-decor-scale, 1)); }
.aw-cardsi-icon--corner-br { right: calc(var(--aw-icon-offset-x, -10px) * var(--aw-decor-scale, 1)); bottom: calc(var(--aw-icon-offset-y, -10px) * var(--aw-decor-scale, 1)); }
.aw-cardsi-icon--corner-tl { left: calc(var(--aw-icon-offset-x, -10px) * var(--aw-decor-scale, 1)); top: calc(var(--aw-icon-offset-y, -10px) * var(--aw-decor-scale, 1)); }
.aw-cardsi-icon--corner-tr { right: calc(var(--aw-icon-offset-x, -10px) * var(--aw-decor-scale, 1)); top: calc(var(--aw-icon-offset-y, -10px) * var(--aw-decor-scale, 1)); }

.aw-cardsi-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	padding: 6px 14px;
	border-radius: var(--aw-badge-radius, 14px);
	background: var(--aw-badge-bg, currentColor);
	color: var(--aw-badge-fg, #fff);
	font-weight: 700;
	font-size: var(--aw-badge-font-size, .8em);
	letter-spacing: .02em;
	margin-bottom: 16px;
}
/* WordPress convierte automáticamente un emoji de texto en <img class="emoji">
   y le fuerza 1em de ancho/alto por CSS del core — por eso el tamaño del badge
   tiene que salir del font-size de este contenedor (arriba) y no de --aw-icon-size
   directamente: la imagen del emoji hereda ese font-size y con eso el 1em de
   WordPress termina dando el tamaño real que se pidió. */

/* Badge/emoji "asomando" en una esquina: mismo mecanismo que .aw-cardsi-icon--corner
   (posición absoluta + variables --aw-icon-*), pero de tamaño fijo y sin padding
   para que un emoji quede centrado y pueda pisar el borde de la tarjeta. */
.aw-cardsi-badge--corner {
	position: absolute;
	z-index: 2;
	width: var(--aw-icon-size, 64px);
	height: var(--aw-icon-size, 64px);
	padding: 0;
	margin-bottom: 0;
	font-size: calc(var(--aw-icon-size, 64px) * .62);
	line-height: 1;
	transform: rotate(var(--aw-icon-rotation, 0deg));
}
.aw-cardsi-badge--corner-bl { left: calc(var(--aw-icon-offset-x, -10px) * var(--aw-decor-scale, 1)); bottom: calc(var(--aw-icon-offset-y, -10px) * var(--aw-decor-scale, 1)); }
.aw-cardsi-badge--corner-br { right: calc(var(--aw-icon-offset-x, -10px) * var(--aw-decor-scale, 1)); bottom: calc(var(--aw-icon-offset-y, -10px) * var(--aw-decor-scale, 1)); }
.aw-cardsi-badge--corner-tl { left: calc(var(--aw-icon-offset-x, -10px) * var(--aw-decor-scale, 1)); top: calc(var(--aw-icon-offset-y, -10px) * var(--aw-decor-scale, 1)); }
.aw-cardsi-badge--corner-tr { right: calc(var(--aw-icon-offset-x, -10px) * var(--aw-decor-scale, 1)); top: calc(var(--aw-icon-offset-y, -10px) * var(--aw-decor-scale, 1)); }
.aw-cardsi-title {
	display: block;
	font-weight: 700;
	font-size: 1.05em;
	margin-bottom: 6px;
}
.aw-cardsi-kicker {
	display: block;
	color: var(--aw-kicker-color, inherit);
	font-weight: 700;
	font-size: .72em;
	letter-spacing: .06em;
	text-transform: uppercase;
	margin-bottom: 10px;
}
.aw-cardsi-text {
	display: block;
	opacity: .72;
	font-size: .92em;
	line-height: 1.5;
}
.aw-cardsi-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;
}
.aw-cardsi-tag {
	display: inline-flex;
	align-items: center;
	background: var(--aw-tags-bg, #C8D5FF);
	color: var(--aw-tags-fg, #022345);
	border-radius: var(--aw-tags-radius, 999px);
	padding: 6px 12px;
	font-size: .78em;
	font-weight: 700;
	white-space: nowrap;
}

/* === AW – Imagen Sticker (aw_img_sticker) === */

.aw-img-sticker-wrap {
	display: flex;
	/* Aire a los costados: la foto de acá adentro se rota (efecto
	   Polaroid) y una forma rotada siempre "abulta" un poco más ancho que
	   su rectángulo original — sin este margen, con la foto al 100% del
	   ancho, la rotación por defecto ya la hacía sobresalir de su columna
	   (Mati: "sigue haciendo ese corte", con línea de recorte visible en
	   mobile). No es un parche de mobile: rotar una foto a ancho completo
	   desborda un poco en cualquier tamaño de pantalla, así que el aire
	   queda siempre, no solo en un media query. */
	padding: 0 4%;
	box-sizing: border-box;
}
.aw-img-sticker-wrap.aw-align-left { justify-content: flex-start; }
.aw-img-sticker-wrap.aw-align-center { justify-content: center; }
.aw-img-sticker-wrap.aw-align-right { justify-content: flex-end; }

.aw-img-sticker {
	position: relative;
	width: var(--aw-width, 100%);
	max-width: var(--aw-max-w, none);
}

/* Ancho responsive (opcional): si Mati carga "Ancho en Tablet/Mobile"
   además del ancho de siempre, se puede achicar la foto a mano en
   pantallas angostas — sin esto, ya no hay ningún recorte automático
   (ver nota "Mobile safety" al principio del archivo), así que si una
   rotación grande sigue sobresaliendo en mobile, éste es el control para
   arreglarlo manualmente en vez de que el plugin la recorte solo. */
@media (max-width: 900px) {
	.aw-img-sticker { width: var(--aw-width-tablet, var(--aw-width, 100%)); }
}
@media (max-width: 600px) {
	.aw-img-sticker { width: var(--aw-width-mobile, var(--aw-width-tablet, var(--aw-width, 100%))); }
}

.aw-img-sticker-backing {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--aw-bg, transparent);
	border-radius: var(--aw-b-radius, 18px);
	/* El corrido se escala con --aw-decor-scale en mobile — ver bloque
	   "Mobile safety" al final del archivo. */
	transform: rotate(var(--aw-b-rotation, 0deg)) translate(calc(var(--aw-b-offset-x, 0px) * var(--aw-decor-scale, 1)), calc(var(--aw-b-offset-y, 0px) * var(--aw-decor-scale, 1)));
}

.aw-img-sticker-photo {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: auto;
	box-sizing: border-box;
	border-style: solid;
	border-width: var(--aw-border, 10px);
	border-color: var(--aw-border-color, #fff);
	border-radius: var(--aw-radius, 18px);
	transform: rotate(var(--aw-rotation, -4deg));
	box-shadow: var(--aw-shadow, none);
}

.aw-img-sticker-badge {
	position: absolute;
	z-index: 2;
	width: var(--aw-badge-size, 90px);
	height: auto;
	transform: translate(calc(var(--aw-badge-offset-x, 0px) * var(--aw-decor-scale, 1)), calc(var(--aw-badge-offset-y, 0px) * var(--aw-decor-scale, 1))) rotate(var(--aw-badge-rotation, 0deg));
	pointer-events: none;
}
.aw-badge-top-left { top: 0; left: 0; }
.aw-badge-top-right { top: 0; right: 0; }
.aw-badge-bottom-left { bottom: 0; left: 0; }
.aw-badge-bottom-right { bottom: 0; right: 0; }

/* === AW – Tabla Comparativa === */
.aw-ctbl {
	position: relative;
	background: var(--aw-ctbl-bg, var(--aw-color-navy));
	color: var(--aw-ctbl-fg, var(--aw-color-cream));
	border-radius: var(--aw-ctbl-radius, 24px);
	padding: 10px 6px;
	font-family: var(--aw-font);
	/* Sin overflow:hidden a propósito: los stickers decorativos (más abajo)
	   están pensados para asomar/sobresalir del borde de la tabla. */
}
.aw-ctbl-head,
.aw-ctbl-row {
	display: grid;
	grid-template-columns: minmax(200px, 1.6fr) repeat(3, 1fr);
	gap: 12px;
	align-items: center;
	padding: 18px 26px;
}
.aw-ctbl-h {
	font-size: .72em;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: .55;
	/* Antes esto era un lavanda fijo: se veía bien sobre navy (el fondo
	   default) pero quedaba casi invisible sobre un fondo claro (lavanda
	   sobre crema = casi sin contraste). Ahora sigue el color de texto ya
	   resuelto (con contraste automático) en vez de un color fijo. */
	color: var(--aw-ctbl-fg, var(--aw-color-lavender));
}
.aw-ctbl-row {
	position: relative;
	border-top: 1px solid color-mix(in srgb, var(--aw-ctbl-fg, #fff) 12%, transparent);
	border-left: var(--aw-ctbl-accent-width, 4px) solid var(--aw-ctbl-accent, var(--aw-color-lavender));
	border-top-left-radius: 6px;
	border-bottom-left-radius: 6px;
}
.aw-ctbl-cell-program {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}
.aw-ctbl-icon {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	display: inline-flex;
}
.aw-ctbl-icon svg,
.aw-ctbl-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.aw-ctbl-title-wrap {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.aw-ctbl-title {
	font-weight: 700;
}
.aw-ctbl-subtitle {
	font-size: .82em;
	opacity: .65;
}
.aw-ctbl-badge {
	display: inline-flex;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--aw-color-lavender);
	color: var(--aw-color-navy);
	font-weight: 700;
	font-size: .82em;
	line-height: 1.3;
}
.aw-ctbl-badge--destacada {
	background: var(--aw-color-red);
	color: var(--aw-color-cream);
}
.aw-ctbl-cell-duration,
.aw-ctbl-cell-ideal {
	font-size: .92em;
	opacity: .9;
}
.aw-ctbl-featured {
	position: absolute;
	top: -11px;
	right: 22px;
	background: var(--aw-color-red);
	color: var(--aw-color-cream);
	padding: 5px 14px;
	border-radius: 999px;
	font-size: .72em;
	font-weight: 700;
	letter-spacing: .03em;
	transform: rotate(-4deg);
	box-shadow: 0 2px 6px rgba(0, 0, 0, .14);
	z-index: 2;
	white-space: nowrap;
}
@media (max-width: 720px) {
	.aw-ctbl-head { display: none; }
	.aw-ctbl-row {
		grid-template-columns: 1fr;
		gap: 8px;
		padding: 22px 20px;
	}
	.aw-ctbl-cell-badge,
	.aw-ctbl-cell-duration,
	.aw-ctbl-cell-ideal {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 12px;
	}
	.aw-ctbl-cell-badge::before,
	.aw-ctbl-cell-duration::before,
	.aw-ctbl-cell-ideal::before {
		content: attr(data-label);
		font-size: .68em;
		text-transform: uppercase;
		letter-spacing: .06em;
		opacity: .55;
		font-weight: 700;
		flex: 0 0 auto;
	}
	.aw-ctbl-cell-ideal { text-align: right; }
	.aw-ctbl-featured { top: -10px; right: 16px; }
	/* En mobile los stickers de esquina se achican: en una tabla angosta
	   uno grande sobresaliendo tapa contenido. */
	.aw-ctbl-sticker {
		font-size: 13px !important;
		padding: .3em .6em;
	}
}

/* Sticker decorativo (texto o emoji) asomando en una esquina de la tabla,
   mismo mecanismo que los íconos/badges en esquina de "Tarjetas con
   Ícono": posición absoluta + variables, deliberadamente sin recortar. */
.aw-ctbl-sticker {
	position: absolute;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--aw-sticker-bg, transparent);
	color: var(--aw-sticker-fg, inherit);
	font-size: var(--aw-sticker-size, 20px);
	font-weight: 700;
	line-height: 1.2;
	padding: .35em .7em;
	border-radius: 999px;
	white-space: nowrap;
	transform: rotate(var(--aw-sticker-rotation, 10deg));
	box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
	pointer-events: none;
}
/* Los 4 corridos de acá se escalan con --aw-decor-scale en mobile — ver
   bloque "Mobile safety" al final del archivo. Esta tabla a propósito NO
   tiene overflow:hidden (los stickers están pensados para sobresalir del
   borde), así que sin este escalado un corrido pensado para desktop
   podía terminar empujando el sticker fuera del viewport en mobile. */
.aw-ctbl-sticker--tl { top: calc(var(--aw-sticker-offset-y, -16px) * var(--aw-decor-scale, 1)); left: calc(var(--aw-sticker-offset-x, -16px) * var(--aw-decor-scale, 1)); }
.aw-ctbl-sticker--tr { top: calc(var(--aw-sticker-offset-y, -16px) * var(--aw-decor-scale, 1)); right: calc(var(--aw-sticker-offset-x, -16px) * var(--aw-decor-scale, 1)); }
.aw-ctbl-sticker--bl { bottom: calc(var(--aw-sticker-offset-y, -16px) * var(--aw-decor-scale, 1)); left: calc(var(--aw-sticker-offset-x, -16px) * var(--aw-decor-scale, 1)); }
.aw-ctbl-sticker--br { bottom: calc(var(--aw-sticker-offset-y, -16px) * var(--aw-decor-scale, 1)); right: calc(var(--aw-sticker-offset-x, -16px) * var(--aw-decor-scale, 1)); }

/* Variante imagen/SVG propia: sin fondo/padding/sombra de "pill" — el
   sticker es la imagen en sí, tamaño controlado por --aw-sticker-size. */
.aw-ctbl-sticker--img {
	background: transparent;
	padding: 0;
	box-shadow: none;
	border-radius: 0;
}
.aw-ctbl-sticker--img img {
	display: block;
	width: var(--aw-sticker-size, 60px);
	height: auto;
}

/* === AW – Tarjetas de Ubicación (aw_location_cards) === */
.aw-loc-grid {
	display: grid;
	grid-template-columns: repeat(var(--aw-loc-cols, 4), 1fr);
	gap: var(--aw-loc-gap, 20px);
	font-family: var(--aw-font);
}
@media (max-width: 900px) {
	.aw-loc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.aw-loc-grid { grid-template-columns: 1fr; }
}
.aw-loc-item {
	display: flex;
	flex-direction: column;
	background: var(--aw-loc-bg, var(--aw-color-navy));
	border-radius: var(--aw-loc-radius, 18px);
	overflow: hidden; /* la foto tiene que quedar recortada a las esquinas redondeadas de arriba */
	box-sizing: border-box;
}
.aw-loc-img {
	width: 100%;
	height: var(--aw-loc-img-h, 160px);
	overflow: hidden;
	flex: 0 0 auto;
}
.aw-loc-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.aw-loc-body {
	display: flex;
	flex-direction: column;
	padding: var(--aw-loc-pad, 20px);
}
.aw-loc-title {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--aw-loc-title, #D9B872);
	font-weight: 700;
	font-size: 1.1em;
	margin-bottom: 8px;
}
.aw-loc-pin {
	width: .9em;
	height: .9em;
	flex: 0 0 auto;
	color: var(--aw-loc-title, #D9B872);
}
.aw-loc-text {
	display: block;
	color: var(--aw-loc-text, var(--aw-color-cream));
	opacity: .82;
	font-size: .92em;
	line-height: 1.5;
}
.aw-loc-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;
}
.aw-loc-tag {
	display: inline-flex;
	align-items: center;
	background: var(--aw-loc-tags-bg, transparent);
	color: var(--aw-loc-tags-fg, inherit);
	border: var(--aw-loc-tags-border-w, 1.5px) solid var(--aw-loc-tags-fg, currentColor);
	border-radius: 999px;
	padding: 5px 12px;
	font-size: .68em;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* === AW – Paso a Paso (aw_steps) === */
.aw-steps {
	position: relative;
	display: grid;
	grid-template-columns: repeat(var(--aw-steps-cols, 5), 1fr);
	gap: var(--aw-steps-gap, 24px);
	font-family: var(--aw-font);
}
.aw-steps-item {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	min-width: 0;
}
.aw-steps-num {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--aw-circle-size, 56px);
	height: var(--aw-circle-size, 56px);
	border-radius: var(--aw-circle-radius, 999px);
	background: var(--aw-steps-circle, var(--aw-color-navy));
	color: var(--aw-steps-item-number, var(--aw-steps-number, var(--aw-color-cream)));
	font-weight: 700;
	font-size: calc(var(--aw-circle-size, 56px) * .32);
	flex: 0 0 auto;
	margin-bottom: 16px;
}
.aw-steps-title {
	display: block;
	color: var(--aw-steps-title, var(--aw-color-navy));
	font-weight: 700;
	font-size: .98em;
	margin-bottom: 6px;
}
.aw-steps-text {
	display: block;
	color: var(--aw-steps-text, var(--aw-color-navy));
	opacity: .72;
	font-size: .86em;
	line-height: 1.5;
}
/* El tramo de línea que va de este paso al siguiente vive DENTRO del <div>
   de este paso (se estira más allá de su propio ancho, cruzando el gap,
   con calc(100% + gap) — ver comentario abajo) en vez de ser una única
   franja absoluta sobre todo el contenedor. Así cada tramo puede tener su
   propio color (por defecto el general, o el que se resuelva por paso) y
   además el círculo puede moverse libremente con la alineación elegida:
   sea cual sea el "left" de abajo, el ancho cancela matemáticamente contra
   el "left" del próximo ítem (misma fórmula en los dos), así que
   calc(100% + gap) alcanza al centro del círculo siguiente en los 3 modos. */
.aw-steps-connector {
	position: absolute;
	top: calc(var(--aw-circle-size, 56px) / 2);
	left: 50%; /* modo "Centro" (default): el círculo está centrado en su columna */
	width: calc(100% + var(--aw-steps-gap, 24px));
	height: var(--aw-steps-line-w, 2px);
	transform: translateY(-50%);
	background: var(--aw-steps-connector, var(--aw-steps-line, var(--aw-color-navy)));
	z-index: 0;
	pointer-events: none;
}
/* Alineación del título/texto — el círculo se mueve junto con ellos (pedido
   de Mati: "los iconos deberían empezar donde empieza el texto"), así que
   el conector también recalcula su punto de partida para seguir naciendo
   del centro del círculo en los 3 modos. */
.aw-steps-align-left .aw-steps-item {
	align-items: flex-start;
	text-align: left;
}
.aw-steps-align-left .aw-steps-connector {
	left: calc(var(--aw-circle-size, 56px) / 2);
}
.aw-steps-align-right .aw-steps-item {
	align-items: flex-end;
	text-align: right;
}
.aw-steps-align-right .aw-steps-connector {
	left: calc(100% - var(--aw-circle-size, 56px) / 2);
}
@media (max-width: 720px) {
	.aw-steps {
		grid-template-columns: 1fr;
		gap: 28px;
	}
	.aw-steps-connector {
		display: none; /* una línea horizontal no traduce bien a una lista apilada */
	}
	/* Número a la izquierda (ocupando las 2 filas de contenido), título +
	   texto apilados a la derecha — en vez de todo centrado en columna.
	   Selector ".aw-steps .aw-steps-item" (en vez de solo ".aw-steps-item")
	   a propósito: empata en especificidad con las variantes de alineación
	   de arriba (.aw-steps-align-left/right .aw-steps-item) y, al venir
	   después en el archivo, gana el empate — así en mobile siempre se ve
	   apilado a la izquierda sin importar la alineación elegida en desktop. */
	.aw-steps .aw-steps-item {
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 16px;
		row-gap: 4px;
		align-items: start;
		text-align: left;
	}
	.aw-steps-num {
		grid-row: 1 / 3;
		margin-bottom: 0;
	}
}

/* === AW – Marca en Texto ===
   Desde v1.6.0 esto ya no es un bloque de reglas fijo acá: cada estilo
   (aw-mark-1, aw-mark-2...) se genera dinámicamente en PHP a partir de
   wp-admin → Addons Web → Ajustes (ver includes/aw-mark-styles.php,
   impreso por class-aw-loader.php → print_mark_styles_css()), porque
   cada uno necesita quedar 100% autocontenido y configurable sin
   tocar código. */