/* ==========================================================================
   ANUNXIA — Landing de categoría
   HU-01: tokens de marca · HU-05: presupuesto de rendimiento

   Colores tomados del Manual de Identidad Corporativa (sección 5.5 RGB,
   que el manual define como el modo obligatorio para uso digital).

   Este archivo es autocontenido: no depende de Bootstrap ni de style.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tipografía — Georama
   El manual define Cooper Black solo para el imagotipo (no se carga como
   webfont) y Georama para todo texto. Los .woff2 ya existen en el tema.
   -------------------------------------------------------------------------- */

@font-face {
	font-family: 'Georama';
	src: url('../../fonts/Georama-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Georama';
	src: url('../../fonts/Georama-SemiBold.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Georama';
	src: url('../../fonts/Georama-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */

.anx-landing {
	/* Colores de marca — RGB del manual */
	--anx-morado: #BD539A;   /* RGB 189, 83, 154 · Pantone 2405 U */
	--anx-dorado: #AA731C;   /* RGB 170, 115, 28 · Pantone 139 U  */
	--anx-verde:  #00828B;   /* RGB 0, 130, 139  · Pantone 3135 U */

	/* Variantes oscuras para hover.
	   Morado y dorado usan los "sólidos" del manual (sección 5.1),
	   que ya son colores oficiales de marca. */
	--anx-morado-dark: #A55395;
	--anx-dorado-dark: #9B7328;
	--anx-verde-dark:  #006F76;

	/* Neutros */
	--anx-texto:        #1F2328;
	--anx-texto-suave:  #5A6470;
	--anx-borde:        #E3E7EB;
	--anx-fondo:        #FFFFFF;
	--anx-fondo-alt:    #F6F8F9;

	/* ------------------------------------------------------------------
	   CONTRASTE — restricción de accesibilidad medida sobre estos colores.
	   Ratio de cada color de marca contra texto blanco:

	     verde  #00828B  4.60:1  -> AA texto normal   OK
	     morado #BD539A  4.31:1  -> AA solo texto GRANDE
	     dorado #AA731C  4.06:1  -> AA solo texto GRANDE

	   "Texto grande" = 24px+, o 18.66px+ en negrita.

	   Por eso: --anx-verde es el unico apto para texto blanco pequeño
	   (botones chicos, etiquetas). Morado y dorado solo con texto blanco
	   grande (H1 del hero, botones grandes) o como acento/borde.
	   ------------------------------------------------------------------ */

	/* Escala tipográfica — fluida, sin media queries */
	--anx-text-xs:  0.8125rem;                          /* 13px */
	--anx-text-sm:  0.875rem;                           /* 14px */
	--anx-text-md:  1rem;                               /* 16px */
	--anx-text-lg:  clamp(1.125rem, 0.5vw + 1rem, 1.25rem);
	--anx-text-xl:  clamp(1.375rem, 1vw + 1.1rem, 1.75rem);
	--anx-text-2xl: clamp(1.75rem, 2vw + 1.2rem, 2.5rem);
	--anx-text-3xl: clamp(2rem, 3.5vw + 1.2rem, 3.25rem);   /* H1 hero */

	/* Espaciado */
	--anx-space-1: 0.25rem;
	--anx-space-2: 0.5rem;
	--anx-space-3: 0.75rem;
	--anx-space-4: 1rem;
	--anx-space-5: 1.5rem;
	--anx-space-6: 2rem;
	--anx-space-7: 3rem;
	--anx-space-8: 4rem;

	--anx-radius:    10px;
	--anx-radius-sm: 6px;
	--anx-shadow:    0 1px 3px rgba(31, 35, 40, 0.08);
	--anx-ancho-max: 1200px;

	font-family: 'Georama', system-ui, -apple-system, 'Segoe UI', sans-serif;
	color: var(--anx-texto);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

.anx-landing img {
	max-width: 100%;
	height: auto;
}

.anx-contenedor {
	width: 100%;
	max-width: var(--anx-ancho-max);
	margin-inline: auto;
	padding-inline: var(--anx-space-4);
}

.anx-seccion {
	padding-block: var(--anx-space-7);
}

.anx-seccion--alt {
	background: var(--anx-fondo-alt);
}

.anx-titulo-seccion {
	font-size: var(--anx-text-xl);
	font-weight: 700;
	margin: 0 0 var(--anx-space-5);
	line-height: 1.25;
}

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */

.anx-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--anx-space-2);
	/* min-height 48px: area tactil comoda en movil (WCAG pide 44px minimo) */
	min-height: 48px;
	padding: var(--anx-space-3) var(--anx-space-6);
	border: 2px solid transparent;
	border-radius: var(--anx-radius);
	font-family: inherit;
	font-size: var(--anx-text-md);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* Primario en verde: el unico color de marca que cumple AA con texto
   blanco en tamaño normal. Ver bloque CONTRASTE arriba. */
.anx-btn--primario {
	background: var(--anx-verde);
	color: #FFFFFF;
}

.anx-btn--primario:hover,
.anx-btn--primario:focus-visible {
	background: var(--anx-verde-dark);
	color: #FFFFFF;
}

/* Secundario en morado: se usa a partir de 18.66px en negrita, que es el
   tamaño de los CTA. A ese tamaño el 4.31:1 cumple AA para texto grande. */
.anx-btn--secundario {
	background: var(--anx-morado);
	color: #FFFFFF;
	font-size: var(--anx-text-lg);
}

.anx-btn--secundario:hover,
.anx-btn--secundario:focus-visible {
	background: var(--anx-morado-dark);
	color: #FFFFFF;
}

.anx-btn--linea {
	background: transparent;
	border-color: var(--anx-verde);
	color: var(--anx-verde-dark);
}

.anx-btn--linea:hover,
.anx-btn--linea:focus-visible {
	background: var(--anx-verde);
	color: #FFFFFF;
}

/* Foco visible siempre — requisito de navegación por teclado (HU-13) */
.anx-landing a:focus-visible,
.anx-landing button:focus-visible,
.anx-landing input:focus-visible,
.anx-landing select:focus-visible {
	outline: 3px solid var(--anx-dorado);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Accesibilidad
   -------------------------------------------------------------------------- */

.anx-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* El brief pide explicitamente evitar animaciones innecesarias.
   Igual respetamos la preferencia del sistema para las transiciones que hay. */
@media (prefers-reduced-motion: reduce) {
	.anx-landing * {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* ==========================================================================
   BLOQUES
   ========================================================================== */

/* --------------------------------------------------------------------------
   HU-06 · Hero

   Fondo en --anx-morado-dark (#A55395, el "sólido" del manual): medido da
   4.92:1 contra blanco, así que el texto normal cumple AA. El #BD539A pleno
   da 4.31:1 y solo serviría para texto grande.
   -------------------------------------------------------------------------- */

.anx-hero {
	position: relative;
	background: var(--anx-morado-dark);
	color: #FFFFFF;
	overflow: hidden;
}

.anx-hero__fondo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.22;
}

.anx-hero__inner {
	position: relative;
	padding-block: var(--anx-space-7) var(--anx-space-8);
	max-width: 760px;
	margin-inline: auto;
	text-align: center;
}

.anx-breadcrumb {
	font-size: var(--anx-text-sm);
	margin-bottom: var(--anx-space-5);
	color: rgba(255, 255, 255, 0.85);
}

.anx-breadcrumb a {
	color: #FFFFFF;
	text-decoration: underline;
}

.anx-breadcrumb span {
	margin-inline: var(--anx-space-2);
}

.anx-hero__titulo {
	font-size: var(--anx-text-3xl);
	font-weight: 700;
	line-height: 1.15;
	margin: 0 0 var(--anx-space-4);
	text-wrap: balance;
}

.anx-hero__texto {
	font-size: var(--anx-text-lg);
	line-height: 1.55;
	margin: 0 0 var(--anx-space-6);
	color: rgba(255, 255, 255, 0.95);
}

/* Botón del hero: blanco sobre morado. Máximo contraste posible. */
.anx-btn--hero {
	background: #FFFFFF;
	color: var(--anx-morado-dark);
	font-size: var(--anx-text-lg);
	padding-inline: var(--anx-space-7);
}

.anx-btn--hero:hover,
.anx-btn--hero:focus-visible {
	background: var(--anx-fondo-alt);
	color: var(--anx-morado-dark);
}

/* --------------------------------------------------------------------------
   HU-07 · Buscador
   -------------------------------------------------------------------------- */

.anx-buscador-seccion {
	padding-block: var(--anx-space-6);
}

.anx-buscador {
	display: flex;
	flex-wrap: wrap;
	gap: var(--anx-space-3);
	align-items: center;
	background: var(--anx-fondo);
	padding: var(--anx-space-4);
	border: 1px solid var(--anx-borde);
	border-radius: var(--anx-radius);
	box-shadow: var(--anx-shadow);
	/* Sube sobre el hero para unir visualmente ambos bloques */
	margin-top: calc(var(--anx-space-7) * -1);
	position: relative;
}

.anx-buscador__campo {
	flex: 1 1 260px;
	min-width: 0;
}

.anx-buscador__campo--ubicacion {
	flex: 0 1 220px;
}

.anx-buscador input[type="search"],
.anx-buscador select {
	width: 100%;
	min-height: 48px;
	padding: var(--anx-space-3) var(--anx-space-4);
	border: 1px solid var(--anx-borde);
	border-radius: var(--anx-radius-sm);
	font-family: inherit;
	font-size: var(--anx-text-md);
	color: var(--anx-texto);
	background: var(--anx-fondo);
}

.anx-buscador .anx-btn {
	flex: 0 0 auto;
}

.anx-buscador__limpiar {
	flex: 0 0 auto;
	font-size: var(--anx-text-sm);
	color: var(--anx-texto-suave);
}

/* --------------------------------------------------------------------------
   HU-11 · Subcategorías
   -------------------------------------------------------------------------- */

.anx-seccion--compacta {
	padding-block: var(--anx-space-5);
}

.anx-titulo-seccion--sm {
	font-size: var(--anx-text-lg);
	margin-bottom: var(--anx-space-4);
}

.anx-titulo-seccion--centrado {
	text-align: center;
}

.anx-titulo-seccion__n {
	display: inline-block;
	margin-left: var(--anx-space-2);
	font-size: var(--anx-text-sm);
	font-weight: 600;
	color: var(--anx-texto-suave);
	vertical-align: middle;
}

.anx-subcategorias {
	display: flex;
	flex-wrap: wrap;
	gap: var(--anx-space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.anx-subcategorias a {
	display: inline-flex;
	align-items: center;
	gap: var(--anx-space-2);
	min-height: 44px;
	padding: var(--anx-space-2) var(--anx-space-4);
	border: 1px solid var(--anx-borde);
	border-radius: 999px;
	background: var(--anx-fondo);
	color: var(--anx-texto);
	font-size: var(--anx-text-sm);
	font-weight: 600;
	text-decoration: none;
}

.anx-subcategorias a:hover,
.anx-subcategorias a:focus-visible {
	border-color: var(--anx-verde);
	color: var(--anx-verde-dark);
}

.anx-subcategorias__n {
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--anx-fondo-alt);
	font-size: var(--anx-text-xs);
	color: var(--anx-texto-suave);
}

/* --------------------------------------------------------------------------
   HU-08 · Grilla de anuncios
   1 col en móvil · 2 en tablet · 4 en escritorio. Sin carrusel.
   -------------------------------------------------------------------------- */

.anx-grilla {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--anx-space-5);
}

@media (min-width: 560px) {
	.anx-grilla { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
	.anx-grilla { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1100px) {
	.anx-grilla { grid-template-columns: repeat(4, 1fr); }
}

.anx-card {
	border: 1px solid var(--anx-borde);
	border-radius: var(--anx-radius);
	overflow: hidden;
	background: var(--anx-fondo);
}

.anx-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
	height: 100%;
}

.anx-card:hover {
	border-color: var(--anx-verde);
}

.anx-card__img {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--anx-fondo-alt);
}

.anx-card__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.anx-card__sinimg {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: var(--anx-borde);
	font-weight: 700;
	font-size: var(--anx-text-lg);
	letter-spacing: 0.05em;
}

.anx-card__etiqueta {
	position: absolute;
	top: var(--anx-space-2);
	left: var(--anx-space-2);
	z-index: 1;
	padding: 4px 10px;
	border-radius: var(--anx-radius-sm);
	background: var(--anx-verde);
	color: #FFFFFF;
	font-size: var(--anx-text-xs);
	font-weight: 700;
}

.anx-card__body {
	padding: var(--anx-space-4);
}

.anx-card__titulo {
	font-size: var(--anx-text-md);
	font-weight: 600;
	line-height: 1.35;
	margin: 0 0 var(--anx-space-2);
	/* Dos líneas máximo para que las tarjetas queden parejas */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.anx-card__precio {
	margin: 0 0 var(--anx-space-1);
	font-size: var(--anx-text-lg);
	font-weight: 700;
	color: var(--anx-verde-dark);
}

.anx-card__lugar {
	margin: 0;
	font-size: var(--anx-text-sm);
	color: var(--anx-texto-suave);
}

/* Paginación ---------------------------------------------------------- */

.anx-paginacion {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--anx-space-2);
	margin-top: var(--anx-space-6);
}

.anx-paginacion .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding-inline: var(--anx-space-3);
	border: 1px solid var(--anx-borde);
	border-radius: var(--anx-radius-sm);
	color: var(--anx-texto);
	font-size: var(--anx-text-sm);
	font-weight: 600;
	text-decoration: none;
}

.anx-paginacion .page-numbers.current {
	background: var(--anx-verde);
	border-color: var(--anx-verde);
	color: #FFFFFF;
}

.anx-paginacion .page-numbers:hover:not(.current) {
	border-color: var(--anx-verde);
	color: var(--anx-verde-dark);
}

/* Estado vacío -------------------------------------------------------- */

.anx-vacio {
	text-align: center;
	padding: var(--anx-space-7) var(--anx-space-4);
	border: 1px dashed var(--anx-borde);
	border-radius: var(--anx-radius);
	background: var(--anx-fondo-alt);
}

.anx-vacio__titulo {
	font-size: var(--anx-text-lg);
	font-weight: 700;
	margin: 0 0 var(--anx-space-2);
}

.anx-vacio p {
	margin: 0 0 var(--anx-space-4);
	color: var(--anx-texto-suave);
}

/* --------------------------------------------------------------------------
   HU-09 · Beneficios
   -------------------------------------------------------------------------- */

.anx-beneficios {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--anx-space-5);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 600px) {
	.anx-beneficios { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 992px) {
	.anx-beneficios { grid-template-columns: repeat(4, 1fr); }
}

.anx-beneficio {
	text-align: center;
	padding: var(--anx-space-4);
}

.anx-beneficio__icono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: var(--anx-space-4);
	border-radius: 50%;
	color: #FFFFFF;
}

/* Los iconos son gráficos, no texto: acá el color de marca pleno va bien. */
.anx-beneficio__icono--verde  { background: var(--anx-verde); }
.anx-beneficio__icono--morado { background: var(--anx-morado); }
.anx-beneficio__icono--dorado { background: var(--anx-dorado); }

.anx-beneficio__titulo {
	font-size: var(--anx-text-md);
	font-weight: 700;
	margin: 0 0 var(--anx-space-2);
}

.anx-beneficio__texto {
	margin: 0;
	font-size: var(--anx-text-sm);
	line-height: 1.55;
	color: var(--anx-texto-suave);
}

/* --------------------------------------------------------------------------
   HU-10 · CTA final
   -------------------------------------------------------------------------- */

.anx-cta {
	background: var(--anx-verde);
	color: #FFFFFF;
}

.anx-cta__inner {
	padding-block: var(--anx-space-7);
	text-align: center;
}

.anx-cta__titulo {
	font-size: var(--anx-text-2xl);
	font-weight: 700;
	margin: 0 0 var(--anx-space-2);
	text-wrap: balance;
}

.anx-cta__texto {
	margin: 0 0 var(--anx-space-5);
	font-size: var(--anx-text-lg);
	color: rgba(255, 255, 255, 0.95);
}

.anx-btn--cta {
	background: #FFFFFF;
	color: var(--anx-verde-dark);
	font-size: var(--anx-text-lg);
	padding-inline: var(--anx-space-7);
}

.anx-btn--cta:hover,
.anx-btn--cta:focus-visible {
	background: var(--anx-fondo-alt);
	color: var(--anx-verde-dark);
}

/* --------------------------------------------------------------------------
   Texto SEO al pie

   Medida de línea acotada (65ch) porque es el único bloque de lectura
   corrida de la página. Tipografía algo menor que el cuerpo: acompaña al
   posicionamiento sin competir visualmente con los anuncios ni los CTA.
   -------------------------------------------------------------------------- */

.anx-seo {
	border-top: 1px solid var(--anx-borde);
}

.anx-seo__inner {
	max-width: 72ch;
}

.anx-seo__titulo {
	font-size: var(--anx-text-lg);
	font-weight: 700;
	margin: 0 0 var(--anx-space-4);
}

.anx-seo__texto {
	font-size: var(--anx-text-sm);
	line-height: 1.7;
	color: var(--anx-texto-suave);
}

.anx-seo__texto p {
	margin: 0 0 var(--anx-space-4);
}

.anx-seo__texto p:last-child {
	margin-bottom: 0;
}

.anx-seo__texto h3,
.anx-seo__texto h4 {
	font-size: var(--anx-text-md);
	font-weight: 700;
	color: var(--anx-texto);
	margin: var(--anx-space-5) 0 var(--anx-space-2);
}

.anx-seo__texto ul,
.anx-seo__texto ol {
	margin: 0 0 var(--anx-space-4);
	padding-left: var(--anx-space-5);
}

.anx-seo__texto li {
	margin-bottom: var(--anx-space-1);
}

.anx-seo__texto a {
	color: var(--anx-verde-dark);
	text-decoration: underline;
}