/*
Theme Name: YG INTI — Tema hijo de Blocksy
Theme URI: https://intilenceria.com
Description: Identidad visual de INTI Lencería aplicada sobre Blocksy. Dirección "Sol": el logotipo es un sol, así que el sitio es el sol — azul noche, rayos rosas de fondo y fotos recortadas en arco. Incluye el sistema completo de WooCommerce: tienda, producto, carrito, checkout y mi cuenta.
Author: Yuval Gilad
Template: blocksy
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: yg-inti-blocksy-child
Tags: woocommerce, custom-colors, custom-logo, e-commerce, two-columns
*/


/* ==========================================================================
   1. TOKENS — DIRECCIÓN "SOL"
   Una sola fuente de verdad. Todo lo que sigue se define contra estos valores;
   si mañana cambia un color de marca, se cambia acá y nada más.
   ========================================================================== */

:root {

	/* --- Azules ----------------------------------------------------------
	   --inti-azul es el del logotipo. --inti-noche es el suelo de las zonas
	   ricas: hero, banda de packs, footer. No es negro: es el mismo azul
	   bajado en luminosidad, así la marca no se parte en dos.
	   --------------------------------------------------------------------- */
	--inti-azul:       #2D5A86;
	--inti-azul-hover: #234870;
	--inti-noche:      #16324F;
	--inti-noche-alt:  #1B3D60;

	/* --- Rosas -----------------------------------------------------------
	   El rosa es la LUZ del sol: va sobre el azul, nunca sobre crema, donde
	   no tiene contraste suficiente para texto.
	   --------------------------------------------------------------------- */
	--inti-rosa:       #FFBDC2;
	--inti-rosa-hover: #F7A7AE;
	--inti-rosa-hondo: #E9909A;

	/* --- Neutros cálidos --------------------------------------------------
	   Nunca blanco puro: el catálogo tiene muchas fotos sobre fondo blanco y
	   un fondo crema les da un borde natural sin necesidad de dibujarlo.
	   --------------------------------------------------------------------- */
	--inti-crema:  #FBF5F0;
	--inti-arena:  #F1E7DF;
	--inti-borde:  #E8DCD3;
	--inti-borde2: #D9C8BC;

	/* --- Texto -----------------------------------------------------------
	   Contrastes medidos sobre --inti-crema:
	   tinta 12,6:1 · gris 4,8:1 · tenue 3,1:1 (solo para códigos y metadatos,
	   nunca para texto que haya que leer de corrido).
	   --------------------------------------------------------------------- */
	--inti-tinta: #16324F;
	--inti-gris:  #6E7F92;
	--inti-tenue: #93A3B4;
	--inti-sobre-noche:     #B7C8D8;
	--inti-sobre-noche-alt: #C8D6E4;

	/* --- Semánticos (aparte del acento de marca) -------------------------- */
	--inti-ok-bg:    rgba(45, 90, 134, 0.10);
	--inti-ok-fg:    #2D5A86;
	--inti-aviso-bg: #FFF6F1;
	--inti-aviso-fg: #7A5438;
	--inti-aviso-bd: #F0DCCE;
	--inti-error:    #C0424F;
	--inti-oferta:   #C0424F;

	/* --- Tipografía ------------------------------------------------------
	   Tenor Sans para títulos: geométrica, de asta fina y caja abierta, es la
	   más cercana a las letras del logotipo. Hanken Grotesk para todo lo que
	   haya que leer. Parisienne vive SOLO en el logotipo.
	   --------------------------------------------------------------------- */
	--inti-font-body:    'Hanken Grotesk', 'Segoe UI', system-ui, -apple-system, sans-serif;
	--inti-font-display: 'Tenor Sans', 'Optima', 'Palatino Linotype', Georgia, serif;
	--inti-font-script:  'Parisienne', 'Segoe Script', cursive;

	--inti-fs-display: clamp(2.6rem, 6vw, 5.5rem);
	--inti-fs-h1:      clamp(2.3rem, 4.6vw, 3.4rem);
	--inti-fs-h2:      clamp(1.9rem, 3.6vw, 3.375rem);
	--inti-fs-h3:      clamp(1.5rem, 2.2vw, 1.75rem);
	--inti-fs-body:    1rem;
	--inti-fs-lede:    1.15rem;
	--inti-fs-small:   0.90625rem;
	--inti-fs-micro:   0.6875rem;

	--inti-lh-display: 1.06;
	--inti-lh-body:    1.65;
	--inti-ls-display: -0.005em;
	--inti-ls-wide:    0.24em;
	--inti-ls-nav:     0.13em;

	/* --- Forma -----------------------------------------------------------
	   Dos radios y nada más: píldora para todo lo que se toca, y un radio
	   suave para lo que contiene. El arco del sol es aparte.
	   --------------------------------------------------------------------- */
	--inti-r-pill: 999px;
	--inti-r-sm:   12px;
	--inti-r-md:   16px;
	--inti-r-lg:   20px;
	--inti-r-xl:   28px;
	--inti-r-arco: 280px 280px 0 0;

	--inti-control-h: 3.5rem;
	--inti-tap-min:   44px;

	--inti-sombra: 0 1px 2px rgba(22, 50, 79, 0.04), 0 8px 24px rgba(22, 50, 79, 0.06);
}


/* --------------------------------------------------------------------------
   1.1 PUENTE CON LA PALETA DE BLOCKSY
   Blocksy pinta botones, enlaces y acentos con --theme-palette-color-1..8.
   Reasignarlos acá hace que el tema se vea bien apenas se activa, sin entrar
   al personalizador.

   Si preferís manejar los colores desde Apariencia → Personalizar → Colores,
   borrá este bloque entero: los mismos valores están anotados en el readme.
   -------------------------------------------------------------------------- */

:root {
	--theme-palette-color-1: var(--inti-azul);   /* acento, botones, enlaces  */
	--theme-palette-color-2: var(--inti-rosa);   /* acento secundario         */
	--theme-palette-color-3: var(--inti-gris);   /* texto secundario          */
	--theme-palette-color-4: var(--inti-tinta);  /* títulos y texto fuerte    */
	--theme-palette-color-5: var(--inti-arena);  /* fondos de tarjeta         */
	--theme-palette-color-6: var(--inti-borde);  /* bordes y separadores      */
	--theme-palette-color-7: var(--inti-crema);  /* fondo del sitio           */
	--theme-palette-color-8: #FFFFFF;            /* blanco puro, casi sin uso */

	--theme-text-color:          var(--inti-tinta);
	--theme-link-initial-color:  var(--inti-azul);
	--theme-link-hover-color:    var(--inti-noche);
	--theme-border-color:        var(--inti-borde);
	--theme-content-spacing:     1.5em;
	--theme-button-border-radius: var(--inti-r-pill);
	--theme-button-min-height:    var(--inti-control-h);
	--theme-form-field-border-radius: var(--inti-r-sm);
}


/* ==========================================================================
   2. EL MOTIVO DEL SOL
   Dos usos y nada más: los rayos van de fondo, siempre por debajo del 20 % de
   opacidad; el arco recorta fotos. Fuera de eso el sol vive solo en el logo.
   ========================================================================== */

/* Fondo profundo con rayos. El degradado cónico dibuja los rayos sin una sola
   imagen, así que escala a cualquier ancho y no pesa nada. */
.inti-rayos {
	position: relative;
	background-color: var(--inti-noche);
	isolation: isolate;
}

.inti-rayos::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -35%;
	width: 130%;
	aspect-ratio: 1;
	transform: translateX(-50%);
	pointer-events: none;
	z-index: -1;
	opacity: 0.16;
	background: repeating-conic-gradient(
		from 184deg at 50% 50%,
		var(--inti-rosa) 0deg 0.55deg,
		transparent 0.55deg 11deg
	);
	-webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 78%);
	        mask-image: radial-gradient(closest-side, #000 30%, transparent 78%);
}

/* Variante tenue, para secciones intermedias que no deben competir. */
.inti-rayos--suave::before {
	opacity: 0.09;
}

/* Todo lo que va adentro de una zona con rayos hereda el texto claro. */
.inti-rayos,
.inti-rayos p,
.inti-rayos li {
	color: var(--inti-sobre-noche);
}

.inti-rayos h1,
.inti-rayos h2,
.inti-rayos h3,
.inti-rayos h4,
.inti-rayos strong {
	color: var(--inti-crema);
}

.inti-rayos a:not(.wp-block-button__link) {
	color: var(--inti-rosa);
}

.inti-rayos a:not(.wp-block-button__link):hover {
	color: #FFFFFF;
}

/* El arco: medio sol que recorta una foto. Sobre el hero y las categorías. */
.inti-arco img,
img.inti-arco {
	border-radius: var(--inti-r-arco);
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* El aro fino que acompaña al arco del hero. */
.inti-arco-aro {
	position: relative;
}

.inti-arco-aro::before {
	content: "";
	position: absolute;
	inset: -26px -26px 0 -26px;
	border: 1px solid rgba(255, 189, 194, 0.4);
	border-bottom: 0;
	border-radius: 300px 300px 0 0;
	pointer-events: none;
}


/* ==========================================================================
   3. BASE
   ========================================================================== */

body {
	font-family: var(--inti-font-body);
	font-size: var(--inti-fs-body);
	line-height: var(--inti-lh-body);
	color: var(--inti-tinta);
	background-color: var(--inti-crema);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4,
.entry-title,
.ct-module-title,
.woocommerce-loop-product__title {
	font-family: var(--inti-font-display);
	font-weight: 400;
	line-height: var(--inti-lh-display);
	letter-spacing: var(--inti-ls-display);
	color: var(--inti-tinta);
	text-wrap: pretty;
}

h1, .entry-title { font-size: var(--inti-fs-h1); }
h2 { font-size: var(--inti-fs-h2); }
h3 { font-size: var(--inti-fs-h3); }
h4 { font-size: 1.125rem; font-family: var(--inti-font-body); font-weight: 600; }

/* Titular de portada. Solo para el hero y los cierres de página. */
.inti-display {
	font-family: var(--inti-font-display);
	font-size: var(--inti-fs-display);
	line-height: var(--inti-lh-display);
	letter-spacing: var(--inti-ls-display);
}

/* Volanta: la etiqueta chiquita arriba de un título. */
.inti-eyebrow {
	font-size: var(--inti-fs-micro);
	font-weight: 600;
	letter-spacing: var(--inti-ls-wide);
	text-transform: uppercase;
	color: var(--inti-azul);
	margin-bottom: 0.75rem;
}

.inti-rayos .inti-eyebrow {
	color: var(--inti-rosa);
}

/* Bajada: el párrafo que sigue al título. */
.inti-lede {
	font-size: var(--inti-fs-lede);
	line-height: 1.65;
	color: var(--inti-gris);
	max-width: 34em;
}

.inti-rayos .inti-lede {
	color: var(--inti-sobre-noche);
}

/* Texto de apoyo y letra chica. */
.inti-small {
	font-size: var(--inti-fs-small);
	color: var(--inti-gris);
}

a {
	color: var(--inti-azul);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

a:hover {
	color: var(--inti-noche);
}

::selection {
	background: var(--inti-rosa);
	color: var(--inti-noche);
}

/* Foco visible en todo lo que se pueda enfocar. No se saca nunca. */
:focus-visible {
	outline: 2px solid var(--inti-azul);
	outline-offset: 3px;
	border-radius: 4px;
}

.inti-rayos :focus-visible {
	outline-color: var(--inti-rosa);
}

hr,
.wp-block-separator {
	border: 0;
	border-top: 1px solid var(--inti-borde);
	opacity: 1;
}


/* ==========================================================================
   4. CABECERA Y NAVEGACIÓN
   ========================================================================== */

.ct-header [data-row="top"] {
	background-color: var(--inti-noche);
}

.ct-header [data-row="top"],
.ct-header [data-row="top"] a {
	color: var(--inti-sobre-noche-alt);
	font-size: 0.78125rem;
	letter-spacing: 0.02em;
}

.ct-header [data-row="top"] a:hover {
	color: var(--inti-rosa);
}

.ct-header [data-row="middle"] {
	background-color: var(--inti-crema);
	border-bottom: 1px solid var(--inti-borde);
}

/* Menú principal: versalitas espaciadas, igual que en la maqueta. */
.header-menu-1 > li > a,
.ct-header [data-id="menu"] .ct-menu-link {
	font-family: var(--inti-font-body);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: var(--inti-ls-nav);
	text-transform: uppercase;
	color: var(--inti-tinta);
}

.header-menu-1 > li > a:hover,
.header-menu-1 > li.current-menu-item > a {
	color: var(--inti-azul);
}

/* Subrayado que crece desde el centro. */
.header-menu-1 > li > a::after {
	content: "";
	display: block;
	height: 1px;
	margin-top: 3px;
	background: var(--inti-azul);
	transform: scaleX(0);
	transition: transform 0.22s ease;
}

.header-menu-1 > li > a:hover::after,
.header-menu-1 > li.current-menu-item > a::after {
	transform: scaleX(1);
}

/* Buscador de la cabecera: 364 artículos hacen que buscar sea la puerta
   principal, así que se ve como un campo, no como una lupa suelta. */
.ct-header [data-id="search"] .ct-search-box,
.inti-buscador {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	height: 2.875rem;
	padding: 0 1.125rem;
	border-radius: var(--inti-r-pill);
	background: var(--inti-arena);
	color: var(--inti-tenue);
	font-size: 0.90625rem;
	min-width: 15rem;
}

/* Carrito y cuenta: dos círculos del mismo tamaño, el carrito relleno. */
.ct-header [data-id="cart"] .ct-cart-item,
.ct-header [data-id="account"] .ct-account-item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--inti-tap-min);
	height: var(--inti-tap-min);
	border-radius: var(--inti-r-pill);
}

.ct-header [data-id="account"] .ct-account-item {
	border: 1px solid var(--inti-borde2);
}

.ct-header [data-id="cart"] .ct-cart-item {
	background: var(--inti-azul);
	color: var(--inti-crema);
}

.ct-header [data-id="cart"] .ct-cart-count,
.ct-cart-content .ct-cart-count {
	background: var(--inti-rosa);
	color: var(--inti-noche);
	font-weight: 700;
}

/* Panel lateral del menú en mobile. */
#offcanvas .ct-panel-inner {
	background-color: var(--inti-noche);
}

#offcanvas .ct-menu-link {
	color: var(--inti-crema);
	font-family: var(--inti-font-display);
	font-size: 1.375rem;
	letter-spacing: 0.04em;
	text-transform: none;
	min-height: var(--inti-tap-min);
	display: flex;
	align-items: center;
}


/* ==========================================================================
   5. BOTONES
   Tres, y se usan siempre igual:
   · azul relleno   → la acción principal sobre fondo claro
   · rosa relleno   → la acción principal sobre fondo azul
   · contorno       → la alternativa, nunca dos rellenos juntos
   ========================================================================== */

.wp-block-button__link,
.wp-element-button,
button,
input[type="submit"],
.button,
.ct-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	min-height: var(--inti-control-h);
	padding: 0 2.125rem;
	border: 1px solid transparent;
	border-radius: var(--inti-r-pill);
	background-color: var(--inti-azul);
	color: var(--inti-crema);
	font-family: var(--inti-font-body);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.wp-block-button__link:hover,
.wp-element-button:hover,
button:hover,
input[type="submit"]:hover,
.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	background-color: var(--inti-azul-hover);
	color: #FFFFFF;
}

/* Rosa: la acción principal cuando el fondo es azul. */
.is-style-inti-rosa .wp-block-button__link,
.inti-btn-rosa,
.inti-rayos .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background-color: var(--inti-rosa);
	color: var(--inti-noche);
}

.is-style-inti-rosa .wp-block-button__link:hover,
.inti-btn-rosa:hover,
.inti-rayos .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background-color: var(--inti-rosa-hover);
	color: var(--inti-noche);
}

/* Contorno. */
.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline > .wp-block-button__link,
.inti-btn-linea {
	background-color: transparent;
	border-color: var(--inti-azul);
	color: var(--inti-azul);
	font-weight: 600;
}

.is-style-outline .wp-block-button__link:hover,
.inti-btn-linea:hover {
	background-color: var(--inti-azul);
	color: var(--inti-crema);
}

.inti-rayos .is-style-outline .wp-block-button__link,
.inti-rayos .inti-btn-linea {
	border-color: rgba(251, 245, 240, 0.45);
	color: var(--inti-crema);
}

.inti-rayos .is-style-outline .wp-block-button__link:hover,
.inti-rayos .inti-btn-linea:hover {
	background-color: var(--inti-crema);
	color: var(--inti-noche);
}

/* Deshabilitado y sin stock. */
button[disabled],
.button.disabled,
.woocommerce button.button:disabled,
.woocommerce a.button.disabled {
	background-color: #C9D3DD;
	color: var(--inti-crema);
	cursor: not-allowed;
	opacity: 1;
}

/* Enlace con flecha, para "Ver planes →" y similares. */
.inti-link-flecha {
	display: inline-flex;
	align-items: center;
	gap: 0.4375rem;
	font-weight: 600;
	color: var(--inti-azul);
	text-decoration: none;
	min-height: var(--inti-tap-min);
}

.inti-link-flecha::after {
	content: "→";
	transition: transform 0.2s ease;
}

.inti-link-flecha:hover::after {
	transform: translateX(3px);
}


/* ==========================================================================
   6. BLOQUES DE LA HOME
   ========================================================================== */

/* Tira de razones bajo el hero. */
.inti-razones {
	background: var(--inti-azul);
	color: var(--inti-crema);
}

.inti-razones .wp-block-column {
	padding: 2.125rem 2.75rem;
	border-right: 1px solid rgba(251, 245, 240, 0.18);
}

.inti-razones .wp-block-column:last-child {
	border-right: 0;
}

.inti-razones h4,
.inti-razones strong {
	color: var(--inti-crema);
	font-size: 1.03125rem;
	font-weight: 700;
	margin-bottom: 0.4375rem;
}

.inti-razones p {
	color: var(--inti-sobre-noche-alt);
	font-size: 0.90625rem;
	line-height: 1.5;
	margin: 0;
}

/* Mosaico de categorías. Cada baldosa es una foto con el nombre encima. */
.inti-categoria {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--inti-r-lg);
	background: var(--inti-arena);
	min-height: 21.25rem;
	text-decoration: none;
}

.inti-categoria img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}

.inti-categoria:hover img {
	transform: scale(1.04);
}

/* El velo que garantiza que el nombre se lea sobre cualquier foto. */
.inti-categoria::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 11.875rem;
	background: linear-gradient(to top, rgba(22, 50, 79, 0.86), rgba(22, 50, 79, 0));
	pointer-events: none;
}

.inti-categoria-nombre {
	position: absolute;
	left: 1.75rem;
	bottom: 1.625rem;
	right: 1.75rem;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.inti-categoria-nombre > span:first-child {
	font-family: var(--inti-font-display);
	font-size: 2.25rem;
	line-height: 1.05;
	color: var(--inti-crema);
}

.inti-categoria-nombre > span + span {
	font-size: 0.90625rem;
	color: var(--inti-sobre-noche-alt);
}

/* Baldosa sin foto todavía. Se ve que falta, a propósito. */
.inti-categoria--pendiente {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 1.75rem;
	border: 1px dashed var(--inti-borde2);
	background: var(--inti-arena);
}

.inti-categoria--pendiente::after {
	display: none;
}

.inti-categoria--pendiente .inti-categoria-nombre {
	position: static;
	left: auto;
	bottom: auto;
	right: auto;
}

.inti-categoria--pendiente .inti-categoria-nombre > span:first-child {
	color: var(--inti-tinta);
}

/* Banda oscura de packs. */
.inti-banda {
	border-radius: var(--inti-r-xl);
	overflow: hidden;
	padding: 4.125rem 3.5rem;
}

/* Tres maneras de comprar. */
.inti-modo {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 2.375rem 2.125rem;
	border-radius: var(--inti-r-lg);
	background: var(--inti-arena);
	height: 100%;
}

.inti-modo--rosa {
	background: var(--inti-rosa);
}

.inti-modo--rosa p {
	color: #4A3F42;
}

.inti-modo h3 {
	font-size: 1.75rem;
}


/* ==========================================================================
   7. WOOCOMMERCE — TIENDA
   La grilla tiene que aguantar que las fotos vengan de tres lugares distintos:
   modelo en estudio, prendas sobre la mesa y hojas escaneadas del catálogo del
   proveedor. El fondo arena parejo y el recorte cuadrado son lo que las une.
   ========================================================================== */

.woocommerce ul.products,
[data-products] {
	gap: 1.25rem;
}

.woocommerce ul.products li.product,
[data-products] .product {
	position: relative; /* ancla de las etiquetas de oferta y de pack */
	display: flex;
	flex-direction: column;
	gap: 0.8125rem;
	text-align: left;
}

/* La foto, siempre cuadrada y siempre sobre el mismo fondo. */
.woocommerce ul.products li.product .ct-media-container,
.woocommerce ul.products li.product a img,
[data-products] .product .ct-image-container {
	border-radius: var(--inti-r-md);
	overflow: hidden;
	background: var(--inti-arena);
	aspect-ratio: 1 / 1;
}

.woocommerce ul.products li.product a img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}

.woocommerce ul.products li.product:hover a img {
	transform: scale(1.03);
}

/* El código del artículo, arriba y discreto. Lo imprime functions.php. */
.inti-loop-sku {
	display: block;
	font-size: var(--inti-fs-micro);
	font-weight: 600;
	letter-spacing: 0.12em;
	color: var(--inti-tenue);
	margin-bottom: 0.25rem;
}

/* El nombre, en caja normal y a dos renglones como máximo. */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
[data-products] .product .woocommerce-loop-product__title {
	font-family: var(--inti-font-body);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0;
	text-transform: none;
	color: var(--inti-tinta);
	margin: 0;
	padding: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.woocommerce ul.products li.product .price,
[data-products] .product .price {
	font-family: var(--inti-font-body);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--inti-tinta);
	margin: 0;
}

.woocommerce ul.products li.product .price del {
	color: var(--inti-tenue);
	font-weight: 400;
	font-size: 0.90625rem;
	margin-right: 0.375rem;
}

.woocommerce ul.products li.product .price ins {
	text-decoration: none;
	color: var(--inti-oferta);
}

/* Precio por unidad en los packs. Lo calcula functions.php. */
.inti-precio-unidad {
	display: block;
	font-size: 0.84375rem;
	font-weight: 400;
	color: var(--inti-gris);
	margin-top: 0.125rem;
}

/* Muestrario de colores bajo el nombre. */
.inti-swatches {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4375rem;
}

.inti-swatch {
	width: 1.125rem;
	height: 1.125rem;
	border-radius: var(--inti-r-pill);
	border: 1px solid var(--inti-borde2);
	display: inline-block;
}

.inti-swatch-mas {
	font-size: 0.78125rem;
	color: var(--inti-tenue);
}

/* Etiquetas sobre la foto: oferta, pack, más vendido. */
.woocommerce span.onsale,
.inti-badge {
	position: absolute;
	top: 0.875rem;
	left: 0.875rem;
	right: auto;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	min-height: 1.75rem;
	padding: 0 0.75rem;
	border-radius: var(--inti-r-pill);
	background: var(--inti-rosa);
	color: var(--inti-noche);
	font-family: var(--inti-font-body);
	font-size: 0.71875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1;
	margin: 0;
}

.woocommerce span.onsale {
	background: var(--inti-oferta);
	color: #FFFFFF;
}

.inti-badge--pack {
	background: var(--inti-noche);
	color: var(--inti-crema);
}

/* Encabezado de la tienda y ordenamiento. */
.woocommerce-products-header__title,
.woocommerce-products-header .page-title {
	font-family: var(--inti-font-display);
	font-size: var(--inti-fs-h2);
}

.woocommerce .woocommerce-result-count {
	color: var(--inti-gris);
	font-size: var(--inti-fs-small);
}

.woocommerce .woocommerce-ordering select,
.woocommerce-widget-layered-nav-dropdown select {
	min-height: var(--inti-tap-min);
	border-radius: var(--inti-r-pill);
	border: 1px solid var(--inti-borde2);
	background-color: transparent;
	padding: 0 2.5rem 0 1.25rem;
	font-size: 0.90625rem;
	font-weight: 600;
	color: var(--inti-tinta);
}

/* Barra lateral de filtros. */
[data-sidebar] > aside {
	background-color: transparent;
}

.ct-sidebar .widget {
	padding-bottom: 1.625rem;
	margin-bottom: 1.625rem;
	border-bottom: 1px solid var(--inti-borde);
}

.ct-sidebar .widget-title,
.ct-sidebar .widgettitle {
	font-family: var(--inti-font-body);
	font-size: var(--inti-fs-micro);
	font-weight: 600;
	letter-spacing: var(--inti-ls-wide);
	text-transform: uppercase;
	color: var(--inti-tenue);
	margin-bottom: 0.875rem;
}

/* Filtro de talles: píldoras, no una lista de enlaces. La curva va del 00 al
   XXXL, así que la lista vertical es inmanejable. */
.widget_layered_nav ul,
.wc-block-attribute-filter ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.widget_layered_nav li,
.wc-block-attribute-filter li {
	margin: 0;
	padding: 0;
}

.widget_layered_nav li a,
.wc-block-attribute-filter li a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.5rem;
	padding: 0 0.75rem;
	border: 1px solid var(--inti-borde2);
	border-radius: var(--inti-r-pill);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--inti-tinta);
	text-decoration: none;
}

.widget_layered_nav li a:hover {
	border-color: var(--inti-azul);
	color: var(--inti-azul);
}

.widget_layered_nav li.chosen a {
	background: var(--inti-azul);
	border-color: var(--inti-azul);
	color: var(--inti-crema);
}

/* Paginación. */
.woocommerce nav.woocommerce-pagination ul {
	border: 0;
	gap: 0.375rem;
	display: flex;
	justify-content: center;
}

.woocommerce nav.woocommerce-pagination ul li {
	border: 0;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--inti-tap-min);
	min-height: var(--inti-tap-min);
	border-radius: var(--inti-r-pill);
	border: 1px solid var(--inti-borde);
	font-weight: 600;
	color: var(--inti-tinta);
	background: transparent;
}

.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--inti-azul);
	border-color: var(--inti-azul);
	color: var(--inti-crema);
}


/* ==========================================================================
   8. WOOCOMMERCE — FICHA DE PRODUCTO
   ========================================================================== */

.single-product .entry-summary .entry-title,
.single-product .product_title {
	font-family: var(--inti-font-display);
	font-size: clamp(1.75rem, 3vw, 2.375rem);
	line-height: 1.12;
	text-transform: none;
	margin-bottom: 0.5rem;
}

/* El código sobre el título, igual que en la tarjeta. */
.inti-single-sku {
	display: block;
	font-size: var(--inti-fs-micro);
	font-weight: 600;
	letter-spacing: 0.12em;
	color: var(--inti-tenue);
	margin-bottom: 0.625rem;
}

.single-product .entry-summary .price,
.woocommerce div.product p.price {
	font-family: var(--inti-font-body);
	font-size: 1.75rem;
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--inti-tinta);
}

.woocommerce div.product .woocommerce-product-gallery__image img {
	border-radius: var(--inti-r-lg);
	background: var(--inti-arena);
}

.flexy-pills .ct-media-container,
.woocommerce-product-gallery .flex-control-thumbs img {
	border-radius: var(--inti-r-sm);
}

/* Selector de talle y color: píldoras, no un desplegable.
   El desplegable esconde qué talles quedaron sin stock, que es justo el dato
   que la clienta necesita antes de encariñarse con la prenda. */
.woocommerce div.product form.cart .variations {
	margin-bottom: 1.5rem;
}

.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations label {
	font-size: var(--inti-fs-micro);
	font-weight: 600;
	letter-spacing: var(--inti-ls-wide);
	text-transform: uppercase;
	color: var(--inti-tenue);
	padding-bottom: 0.625rem;
}

.woocommerce div.product form.cart .variations select {
	min-height: var(--inti-tap-min);
	border-radius: var(--inti-r-pill);
	border: 1px solid var(--inti-borde2);
	padding: 0 2.5rem 0 1.25rem;
	font-size: 0.9375rem;
	font-weight: 600;
	background-color: transparent;
}

/* Cantidad. */
.woocommerce .quantity .qty,
.woocommerce div.product form.cart .quantity input {
	min-height: var(--inti-control-h);
	width: 5.5rem;
	border-radius: var(--inti-r-pill);
	border: 1px solid var(--inti-borde2);
	background: transparent;
	text-align: center;
	font-weight: 700;
	color: var(--inti-tinta);
}

/* El botón de agregar ocupa el ancho disponible: es la única acción que
   importa en esta pantalla. */
.woocommerce div.product form.cart .button,
.woocommerce div.product .single_add_to_cart_button {
	flex: 1 1 auto;
	min-height: var(--inti-control-h);
	font-size: 1.0625rem;
}

/* Enlace a la guía de talles, debajo del selector. Lo agrega functions.php. */
.inti-guia-talles {
	display: inline-flex;
	align-items: center;
	gap: 0.4375rem;
	min-height: var(--inti-tap-min);
	font-size: 0.90625rem;
	font-weight: 600;
	color: var(--inti-azul);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Ficha corta bajo el precio: de qué está hecha y cómo se lava. */
.inti-ficha {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.5rem 1.25rem;
	padding: 1.25rem 1.5rem;
	border-radius: var(--inti-r-sm);
	background: var(--inti-arena);
	font-size: 0.90625rem;
}

.inti-ficha dt {
	font-weight: 600;
	color: var(--inti-gris);
	margin: 0;
}

.inti-ficha dd {
	margin: 0;
	color: var(--inti-tinta);
}

/* Pestañas de descripción. */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	border-bottom: 1px solid var(--inti-borde);
	padding: 0;
	margin-bottom: 2rem;
	display: flex;
	gap: 0.5rem;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
	display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent;
	border: 0;
	border-radius: 0;
	margin: 0;
	padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: inline-flex;
	align-items: center;
	min-height: var(--inti-tap-min);
	padding: 0 1.125rem;
	font-family: var(--inti-font-body);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: var(--inti-ls-nav);
	text-transform: uppercase;
	color: var(--inti-gris);
	border-bottom: 2px solid transparent;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--inti-tinta);
	border-bottom-color: var(--inti-azul);
}

/* Relacionados. */
.related > h2,
.up-sells > h2,
.related .ct-module-title,
.up-sells .ct-module-title {
	font-family: var(--inti-font-display);
	font-size: 1.75rem;
	margin-bottom: 1.5rem;
}


/* ==========================================================================
   9. WOOCOMMERCE — CARRITO Y CHECKOUT
   El checkout es donde se pierde la venta. Todo acá está puesto para que no
   haya que pensar: un paso, campos altos y el total siempre a la vista.
   ========================================================================== */

.woocommerce table.shop_table {
	border: 1px solid var(--inti-borde);
	border-radius: var(--inti-r-lg);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: transparent;
}

.woocommerce table.shop_table th {
	font-family: var(--inti-font-body);
	font-size: var(--inti-fs-micro);
	font-weight: 600;
	letter-spacing: var(--inti-ls-wide);
	text-transform: uppercase;
	color: var(--inti-tenue);
	background: var(--inti-arena);
	padding: 1rem 1.5rem;
}

.woocommerce table.shop_table td {
	padding: 1.25rem 1.5rem;
	border-top: 1px solid var(--inti-borde);
	vertical-align: middle;
}

.woocommerce table.shop_table img {
	border-radius: var(--inti-r-sm);
	background: var(--inti-arena);
	width: 5rem;
}

.woocommerce a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--inti-tap-min);
	height: var(--inti-tap-min);
	border-radius: var(--inti-r-pill);
	color: var(--inti-gris);
	font-size: 1.125rem;
	background: transparent;
}

.woocommerce a.remove:hover {
	background: var(--inti-arena);
	color: var(--inti-error);
}

/* Totales del carrito y resumen del pedido. */
.woocommerce .cart_totals,
.woocommerce-checkout-review-order,
.ct-order-review {
	padding: 1.75rem;
	border-radius: var(--inti-r-lg);
	background: var(--inti-arena);
	border: 0;
}

.woocommerce .cart_totals h2,
.woocommerce-checkout-review-order h3,
.ct-order-review h3 {
	font-family: var(--inti-font-display);
	font-size: 1.5rem;
	margin-bottom: 1.25rem;
}

.woocommerce .cart_totals table,
.woocommerce-checkout-review-order table {
	border: 0;
	border-radius: 0;
}

.woocommerce .cart_totals table th,
.woocommerce-checkout-review-order table th {
	background: transparent;
	padding: 0.75rem 0;
	letter-spacing: 0;
	text-transform: none;
	font-size: 0.9375rem;
	color: var(--inti-gris);
}

.woocommerce .cart_totals table td,
.woocommerce-checkout-review-order table td {
	padding: 0.75rem 0;
	border-top: 0;
	text-align: right;
}

.woocommerce .cart_totals .order-total th,
.woocommerce .cart_totals .order-total td,
.woocommerce-checkout-review-order .order-total th,
.woocommerce-checkout-review-order .order-total td {
	border-top: 1px solid var(--inti-borde2);
	padding-top: 1.125rem;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--inti-tinta);
}

.woocommerce .checkout-button,
.woocommerce #place_order {
	width: 100%;
	min-height: 3.75rem;
	font-size: 1.0625rem;
}

/* Campos de formulario. Altos, sin borde duro, con foco evidente. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container .select2-selection--single,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="search"],
textarea,
select {
	width: 100%;
	min-height: 3.25rem;
	padding: 0 1.25rem;
	border: 1px solid transparent;
	border-radius: var(--inti-r-sm);
	background-color: var(--inti-arena);
	color: var(--inti-tinta);
	font-family: var(--inti-font-body);
	font-size: 0.9375rem;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

textarea {
	min-height: 9rem;
	padding: 1rem 1.25rem;
	line-height: 1.6;
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--inti-azul);
	background-color: #FFFFFF;
	outline: none;
}

.woocommerce form .form-row label {
	font-size: 0.84375rem;
	font-weight: 600;
	color: var(--inti-gris);
	margin-bottom: 0.4375rem;
}

.required {
	color: var(--inti-error);
	text-decoration: none;
}

/* Avisos de WooCommerce. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top: 0;
	border-left: 3px solid var(--inti-azul);
	border-radius: var(--inti-r-sm);
	background: var(--inti-arena);
	color: var(--inti-tinta);
	padding: 1.125rem 1.5rem;
}

.woocommerce-error {
	border-left-color: var(--inti-error);
	background: #FDF1F2;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	display: none;
}

.woocommerce-message .button {
	min-height: 2.75rem;
	padding: 0 1.5rem;
	font-size: 0.9375rem;
}

/* Cupón: replegado, para que no invite a irse a buscar uno. */
.woocommerce form.checkout_coupon,
.woocommerce .coupon {
	background: transparent;
}


/* ==========================================================================
   10. WOOCOMMERCE — MI CUENTA
   ========================================================================== */

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	margin: 0;
	border: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: flex;
	align-items: center;
	min-height: var(--inti-tap-min);
	padding: 0 1.125rem;
	border-radius: var(--inti-r-pill);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--inti-tinta);
	text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	background: var(--inti-arena);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--inti-azul);
	color: var(--inti-crema);
}

.woocommerce-account .woocommerce-MyAccount-content {
	padding-left: 1.5rem;
}

/* Etiquetas de estado de pedido. */
.inti-pill {
	display: inline-flex;
	align-items: center;
	min-height: 1.75rem;
	padding: 0 0.75rem;
	border-radius: var(--inti-r-pill);
	font-size: 0.78125rem;
	font-weight: 700;
	background: var(--inti-ok-bg);
	color: var(--inti-ok-fg);
}


/* ==========================================================================
   11. PIE DE PÁGINA
   ========================================================================== */

.ct-footer [data-row="middle"],
.ct-footer [data-row="bottom"] {
	background-color: var(--inti-noche);
}

.ct-footer,
.ct-footer p,
.ct-footer li,
.ct-footer a {
	color: var(--inti-sobre-noche-alt);
	font-size: 0.9375rem;
}

.ct-footer a:hover {
	color: var(--inti-rosa);
}

.ct-footer .widget-title,
.ct-footer h3,
.ct-footer h4 {
	font-family: var(--inti-font-body);
	font-size: var(--inti-fs-micro);
	font-weight: 600;
	letter-spacing: var(--inti-ls-wide);
	text-transform: uppercase;
	color: var(--inti-rosa);
	margin-bottom: 1rem;
}

.ct-footer [data-row="bottom"] {
	border-top: 1px solid rgba(251, 245, 240, 0.18);
}

.ct-footer [data-row="bottom"],
.ct-footer [data-row="bottom"] a {
	color: #7E93A8;
	font-size: 0.84375rem;
}

/* Redes sociales del pie. */
.ct-footer .ct-social-box a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--inti-tap-min);
	height: var(--inti-tap-min);
	border-radius: var(--inti-r-pill);
	border: 1px solid rgba(251, 245, 240, 0.3);
	color: var(--inti-rosa);
}

.ct-footer .ct-social-box a:hover {
	background: var(--inti-rosa);
	color: var(--inti-noche);
}

/* Firma del logotipo en el pie. */
.inti-firma {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	line-height: 1;
}

.inti-firma-nombre {
	font-family: var(--inti-font-display);
	font-size: 2.875rem;
	letter-spacing: 0.14em;
	color: var(--inti-rosa);
}

.inti-firma-bajada {
	font-family: var(--inti-font-script);
	font-size: 1.5rem;
	color: var(--inti-crema);
}


/* ==========================================================================
   12. BARRA FIJA DE MOBILE
   El tráfico viene de Instagram y de TikTok, casi todo desde el teléfono.
   Las dos acciones que importan quedan siempre al alcance del pulgar.
   La imprime functions.php en el pie.
   ========================================================================== */

.inti-barra-movil {
	display: none;
}

@media (max-width: 767.98px) {

	.inti-barra-movil {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 900;
		display: flex;
		align-items: center;
		gap: 0.625rem;
		padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
		background: rgba(251, 245, 240, 0.96);
		-webkit-backdrop-filter: blur(10px);
		        backdrop-filter: blur(10px);
		border-top: 1px solid var(--inti-borde);
	}

	.inti-barra-movil__tienda {
		flex: 1 1 auto;
		min-height: 3.125rem;
		font-size: 0.9375rem;
	}

	.inti-barra-movil__wa {
		flex: 0 0 auto;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 3.125rem;
		height: 3.125rem;
		padding: 0;
		border-radius: var(--inti-r-pill);
		background: var(--inti-rosa);
		color: var(--inti-noche);
	}

	.inti-barra-movil__wa:hover {
		background: var(--inti-rosa-hover);
		color: var(--inti-noche);
	}

	/* Espacio al final del documento para que la barra no tape el pie. */
	body.inti-tiene-barra .ct-footer {
		padding-bottom: 5.5rem;
	}

	/* El botón flotante de Joinchat se corre para no pisar la barra. */
	.joinchat {
		bottom: 5.25rem !important;
	}
}


/* ==========================================================================
   13. ADAPTACIÓN A PANTALLAS CHICAS
   ========================================================================== */

@media (max-width: 999.98px) {

	.inti-razones .wp-block-column {
		border-right: 0;
		border-bottom: 1px solid rgba(251, 245, 240, 0.18);
		padding: 1.5rem 1.75rem;
	}

	.inti-razones .wp-block-column:last-child {
		border-bottom: 0;
	}

	.inti-banda {
		padding: 2.5rem 1.75rem;
		border-radius: var(--inti-r-lg);
	}

	.woocommerce-account .woocommerce-MyAccount-content {
		padding-left: 0;
		padding-top: 1.5rem;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation ul {
		flex-direction: row;
		flex-wrap: wrap;
	}
}

@media (max-width: 767.98px) {

	:root {
		--inti-r-arco: 180px 180px 0 0;
		--inti-control-h: 3.25rem;
	}

	.inti-arco-aro::before {
		inset: -16px -16px 0 -16px;
		border-radius: 200px 200px 0 0;
	}

	.inti-categoria {
		min-height: 15rem;
	}

	.inti-categoria-nombre > span:first-child {
		font-size: 1.75rem;
	}

	.inti-modo {
		padding: 1.75rem 1.5rem;
	}

	.inti-firma-nombre {
		font-size: 2rem;
	}

	/* La tabla del carrito no entra: cada línea pasa a ser una tarjeta. */
	.woocommerce table.shop_table_responsive tr td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		padding: 0.75rem 1.25rem;
		text-align: right;
	}

	.woocommerce table.shop_table_responsive tr td::before {
		font-weight: 600;
		color: var(--inti-gris);
	}
}


/* ==========================================================================
   14. IMPRESIÓN Y PREFERENCIAS DEL SISTEMA
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.inti-categoria:hover img,
	.woocommerce ul.products li.product:hover a img {
		transform: none;
	}
}

@media print {

	.ct-header,
	.ct-footer,
	.inti-barra-movil,
	.joinchat {
		display: none !important;
	}

	body {
		background: #FFFFFF;
		color: #000000;
	}
}