/**
 * Jarrucheo · Las dos bases de fondo y los componentes compartidos.
 *
 * Decisión de sistema del informe: el sitio tiene dos bases, no dos
 * librerías. Los componentes son los mismos y solo heredan otro juego de
 * variables semánticas.
 *
 * En Elementor la base se aplica poniendo `base-oscura` o `base-crema` en el
 * campo "Clases CSS" del contenedor de sección. Es lo único que hay que
 * recordar al montar una página.
 */

:root,
.base-oscura{
	--j-fondo:var(--j-burdeos);
	--j-texto:var(--j-crema);
	--j-texto-suave:color-mix(in srgb, var(--j-crema) 72%, transparent);
	--j-titulo:var(--j-lima);
	--j-acento:var(--j-lima);
	--j-borde:color-mix(in srgb, var(--j-oliva) 55%, transparent);
	--j-superficie:color-mix(in srgb, var(--j-crema) 6%, transparent);

	--j-btn1-fondo:var(--j-lima);
	--j-btn1-texto:var(--j-burdeos);
	--j-btn2-texto:var(--j-lima);
	--j-btn2-borde:var(--j-lima);
	--j-foco:var(--j-lima);
}

.base-crema{
	--j-fondo:var(--j-crema);
	--j-texto:var(--j-burdeos);
	--j-texto-suave:color-mix(in srgb, var(--j-burdeos) 70%, transparent);
	--j-titulo:var(--j-burdeos);
	--j-acento:var(--j-oliva);
	--j-borde:color-mix(in srgb, var(--j-burdeos) 25%, transparent);
	--j-superficie:var(--j-blanco);

	--j-btn1-fondo:var(--j-burdeos);
	--j-btn1-texto:var(--j-lima);
	--j-btn2-texto:var(--j-burdeos);
	--j-btn2-borde:var(--j-burdeos);
	--j-foco:var(--j-burdeos);
}

.base-oscura,
.base-crema{
	background-color:var(--j-fondo);
	color:var(--j-texto);
}

/* -------------------------------------------------------------------------
 * Contenedor. Elementor trae el suyo, pero el ancho lo fija el diseño y no
 * el panel: así no hay dos anchos distintos según quién montó la sección.
 * ---------------------------------------------------------------------- */
.j-contenedor{
	width:min(100% - var(--j-gutter)*2, var(--j-contenedor));
	margin-inline:auto;
}

/* -------------------------------------------------------------------------
 * Botones. Las tres variantes del diseño, en CSS y no en el panel.
 *
 * IMPORTANTE: no usar el widget Botón de Elementor para los CTA del diseño.
 * Si cada botón se estiliza en su panel, a los tres meses hay siete botones
 * distintos y ninguno es el del diseño. Los widgets propios ya los pintan
 * así, y para los sueltos se usa el widget Botón con la clase j-btn.
 * ---------------------------------------------------------------------- */
.j-btn{
	display:inline-flex;align-items:center;justify-content:center;
	min-height:46px;padding:0 38px;
	font-family:var(--j-fuente-texto);
	font-size:17px;font-weight:700;letter-spacing:.04em;line-height:1;
	text-transform:uppercase;text-decoration:none;
	border:1px solid transparent;border-radius:0;cursor:pointer;
	transition:background-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.j-btn--primario{
	background:var(--j-btn1-fondo);color:var(--j-btn1-texto);
	border-color:var(--j-btn1-fondo);box-shadow:var(--j-relieve);
}
.j-btn--primario:hover{box-shadow:none;transform:translate(2px,2px)}
.j-btn--secundario{
	background:transparent;color:var(--j-btn2-texto);
	border-color:var(--j-btn2-borde);box-shadow:var(--j-relieve);
}
.j-btn--secundario:hover{background:var(--j-btn2-borde);color:var(--j-fondo);box-shadow:none;transform:translate(2px,2px)}

/* -------------------------------------------------------------------------
 * Estados. No venían diseñados: propuesta a validar con María.
 * ---------------------------------------------------------------------- */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
	outline:2px solid var(--j-foco);
	outline-offset:3px;
}
.j-btn[disabled],.j-btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}
.j-btn.is-cargando{pointer-events:none;opacity:.7}
.j-campo--error{border-color:var(--j-error)}
.j-campo__error{color:var(--j-error);font-size:var(--j-t-sm)}
.j-producto--agotado .j-producto__foto{filter:grayscale(.7);opacity:.65}

/* -------------------------------------------------------------------------
 * Cabeceras de sección — el patrón de dos capas que el informe pidió
 * extender al resto de la página: antetítulo descriptivo + titular de marca.
 * ---------------------------------------------------------------------- */
.j-seccion{padding-block:var(--j-e-50) var(--j-e-60)}
.j-seccion__antetitulo{
	margin:0 0 16px;
	font-size:var(--j-t-antetitulo);letter-spacing:.04em;
	text-transform:uppercase;color:var(--j-texto);
}
.j-seccion__titulo{
	margin:0 0 50px;
	font-family:var(--j-fuente-titulos);font-weight:400;
	font-size:var(--j-t-h2);line-height:1.15;letter-spacing:.02em;
	text-transform:uppercase;color:var(--j-titulo);
	text-wrap:balance;
}
.j-seccion--centrada .j-seccion__antetitulo,
.j-seccion--centrada .j-seccion__titulo{text-align:center}

/* Marquesina y carruseles automáticos respetan la preferencia del sistema */
@media (prefers-reduced-motion:reduce){
	.j-marquesina__pista,
	.j-carrusel--auto .j-carrusel__pista{animation:none!important;transition:none!important}
}

/* -------------------------------------------------------------------------
 * Reset de subrayado.
 *
 * Hello Elementor subraya todos los <a> y nuestras tarjetas y botones son
 * enlaces, así que el subrayado se colaba dentro.
 *
 * Va con !important, y no por pereza. Lo intenté dos veces sin él:
 *   1. Con :where() — falla, porque :where() tiene especificidad CERO y
 *      pierde contra el `a` del tema.
 *   2. Con clases normales (0-1-0) — también falla, así que la regla del
 *      tema es más específica que una clase suelta.
 *
 * Un componente que es semánticamente un botón no puede quedar a merced de
 * cómo estilice los enlaces el tema de turno. Esto es exactamente para lo
 * que existe !important: un reset defensivo contra CSS de terceros, en el
 * sistema y en un solo sitio. Si aparece un !important en el CSS de un
 * componente concreto, eso sí sería un problema.
 * ---------------------------------------------------------------------- */
.j-btn,
.j-btn:hover,
.j-btn:focus,
.j-atino__tarjeta,
.j-atino__tarjeta:hover,
.j-atino__tarjeta:focus,
.j-marquesina a{
	text-decoration:none !important;
}