/*
Theme Name:   Espalla
Theme URI:    https://espalla.local
Description:  Tema hijo de Storefront para ESPALLA — retail masivo de hogar y decoración.
Author:       Espalla
Template:     storefront
Version:      1.2.4
Text Domain:  espalla
*/

/* ===================================================================
   TOKENS
   =================================================================== */
:root {
	--bg: #F6F1E7;
	--surface: #FFFFFF;
	--ink: #241F1A;
	--ink-2: #5C5346;
	--ink-3: #A79C8A;
	--border: #E5DCC8;
	--accent: #B2603C;
	--accent-dark: #8A4A2C;
	--urgency: #B2603C;
	--pop: #B2603C;
	--success: #3F6B45;
	--clay: #41573F;
	--radius-card: 16px;
	--radius-img: 12px;
	--radius-pill: 40px;
	--font-heading: 'Fraunces', ui-serif, Georgia, serif;
}

/* ===================================================================
   RESET / BASE
   =================================================================== */
body {
	background: var(--bg);
	color: var(--ink);
	font-family: 'Inter', system-ui, sans-serif;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
}

/* ===================================================================
   FONDO GLOBAL DE VIDEO — el video-loop de mariposas como fondo fijo
   detrás de TODO el sitio. Vive en header.php justo después de <body>,
   fuera de #page, por eso position:fixed lo pega al viewport y no a
   #page. Con #page en su propio z-index:1, el header/hero/tarjetas
   (todos con fondo opaco) lo tapan solos — el video sólo se alcanza a
   ver en el margen que sobra a los lados en pantallas más anchas que
   los 1440px de contenido (el "fondo fondo"), nunca detrás del banner
   ni de ninguna tarjeta. Siempre muted, sin control de sonido. */
.espalla-atmosphere {
	position: fixed;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	background: var(--bg);
}
.espalla-atmosphere video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#page { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
	.espalla-atmosphere video { display: none; }
}
/* Ver comentario junto a .espalla-hero-banner.is-autoplay-blocked: mismo
   mecanismo para el video de fondo. */
.espalla-atmosphere.is-autoplay-blocked video { display: none; }
.espalla-atmosphere.is-autoplay-blocked { background: var(--bg) url('assets/video/bg-atmosphere-poster.png?v=3') center/cover; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--ink);
}

a {
	color: var(--accent);
}
a:hover {
	color: var(--accent-dark);
}

.col-full {
	max-width: 1440px;
}

/* ===================================================================
   PROMO BAR
   =================================================================== */
.espalla-trust-bar {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	background: var(--accent);
	color: #fff;
	padding: 11px 20px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-align: center;
}
.espalla-trust-bar svg { flex: none; }
.espalla-trust-bar .code {
	background: rgba(0,0,0,0.22);
	padding: 3px 9px;
	border-radius: 20px;
	font-size: 12px;
	letter-spacing: 0.08em;
}

/* ===================================================================
   HEADER
   =================================================================== */
#masthead.site-header {
	background: var(--surface);
	border-bottom: 1px solid var(--border);
	box-shadow: none;
}

.espalla-header {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 32px;
	padding: 18px 40px;
	max-width: 1440px;
	margin: 0 auto;
}

.espalla-wordmark {
	position: relative;
	display: flex;
	align-items: baseline;
	gap: 2px;
	width: fit-content;
	font-size: 28px;
	font-weight: 900;
	letter-spacing: -0.02em;
	white-space: nowrap;
}
.espalla-wordmark a { position: relative; color: var(--ink); text-decoration: none; display: flex; align-items: baseline; gap: 2px; }
.espalla-wordmark .accent-part { color: var(--accent); }
.espalla-wordmark .dot {
	width: 8px; height: 8px; border-radius: 50%;
	background: var(--clay); margin-left: 4px; align-self: center;
}
/* Mariposa posada en la última A del wordmark — detalle que a Juan le
   encantó del mockup. Puramente vectorial (no imagen), nunca se ve
   borrosa a ningún tamaño. En "em" (no px) para que escale sola con el
   font-size del wordmark en cualquier contexto — header a 28px, footer
   a 25px, el breakpoint móvil a 22px, o el que venga después — sin
   tener que recalibrar cada vez. */
.wordmark-butterfly {
	position: absolute;
	top: -0.5em;
	right: -0.2em;
	width: 0.85em;
	height: auto;
	pointer-events: none;
}

@media (max-width: 600px) {
}

.espalla-search-wrap {
	position: relative;
	max-width: 640px;
	width: 100%;
	min-width: 0;
	justify-self: center;
}
.espalla-search {
	display: flex;
	align-items: center;
	border: 2.5px solid var(--accent);
	border-radius: var(--radius-pill);
	overflow: hidden;
	background: #fff;
	width: 100%;
	margin: 0; /* Storefront le pone margin-bottom a todo <form> por defecto */
}
.espalla-search input[type="search"] {
	flex: 1;
	min-width: 0;
	border: none;
	outline: none;
	padding: 13px 20px;
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: var(--ink);
}
.espalla-search button {
	display: flex;
	align-items: center;
	gap: 8px;
	border: none;
	background: var(--accent);
	color: #fff;
	padding: 13px 26px;
	font-family: 'Inter', sans-serif;
	font-size: 13.5px;
	font-weight: 800;
	cursor: pointer;
	transition: background 160ms ease, transform 160ms ease-out;
}
.espalla-search button:hover { background: var(--accent-dark); }
.espalla-search button:active { transform: scale(0.97); }

/* ===================================================================
   BUSCADOR — sugerencias en vivo (categorías + productos)
   =================================================================== */
.espalla-search-suggestions {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 16px;
	box-shadow: 0 16px 40px rgba(36, 31, 26, .16);
	z-index: 60;
	max-height: 420px;
	overflow-y: auto;
	opacity: 0;
	transform: translateY(-6px) scale(0.98);
	transform-origin: top center;
	pointer-events: none;
	transition: opacity 160ms ease-out, transform 160ms ease-out;
}
.espalla-search-suggestions.is-open {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}
.espalla-search-group-label {
	padding: 12px 18px 6px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ink-3);
}
.espalla-search-cat-item,
.espalla-search-product-item {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	padding: 8px 18px;
	text-decoration: none;
	color: var(--ink);
	cursor: pointer;
}
.espalla-search-cat-item:hover, .espalla-search-cat-item.is-active,
.espalla-search-product-item:hover, .espalla-search-product-item.is-active {
	background: var(--bg);
}
.espalla-search-cat-icon { display: flex; color: var(--accent); flex: none; }
.espalla-search-cat-item .name { font-size: 13.5px; font-weight: 700; }
.espalla-search-cat-item .count { margin-left: auto; font-size: 11.5px; color: var(--ink-3); font-weight: 600; white-space: nowrap; }
.espalla-search-product-item img {
	width: 40px; height: 40px; border-radius: 8px; object-fit: cover; flex: none; background: var(--bg);
}
.espalla-search-product-item .name {
	font-size: 13.5px; font-weight: 600; flex: 1; min-width: 0;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.espalla-search-product-item .price { font-size: 13px; font-weight: 800; color: var(--accent); flex: none; }
.espalla-search-empty { padding: 22px 18px 14px; text-align: center; font-size: 13px; color: var(--ink-2); }
.espalla-search-seeall {
	display: block; text-align: center; padding: 12px 18px; margin-top: 4px;
	border-top: 1px solid var(--border); font-size: 12.5px; font-weight: 800;
	color: var(--accent); text-decoration: none;
}
.espalla-search-seeall:hover { background: var(--bg); color: var(--accent-dark); }
@media (prefers-reduced-motion: reduce) {
	.espalla-search-suggestions { transition: opacity 120ms ease; transform: none !important; }
}

.espalla-header-actions {
	display: flex;
	align-items: center;
	gap: 26px;
}
.espalla-header-actions a {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--ink-2);
	text-decoration: none;
}
.espalla-cart-link {
	position: relative;
	background: var(--ink);
	color: #fff !important;
	padding: 11px 18px;
	border-radius: var(--radius-pill);
	font-size: 12.5px;
	font-weight: 800;
}
.espalla-cart-link:hover { background: var(--accent); }
.espalla-cart-count {
	position: absolute;
	top: -5px; right: -5px;
	min-width: 22px; height: 22px;
	border-radius: 50%;
	background: var(--accent);
	color: #fff;
	font-size: 12px;
	font-weight: 900;
	display: flex; align-items: center; justify-content: center;
	border: 2.5px solid #fff;
}

/* ===================================================================
   CATEGORY NAV
   =================================================================== */
.espalla-cat-nav {
	background: var(--surface);
	border-top: 1px solid var(--border);
	padding: 0 40px;
	display: flex;
	align-items: center;
	gap: 30px;
	height: 48px;
	font-size: 13px;
	font-weight: 700;
	color: var(--ink-2);
	max-width: 1440px;
	margin: 0 auto;
	overflow-x: auto;
}
.espalla-cat-nav a { color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.espalla-cat-nav a:hover { color: var(--accent); }
.espalla-cat-nav .all-cats {
	display: flex; align-items: center; gap: 8px;
	background: var(--bg); padding: 7px 14px; border-radius: 8px;
	color: var(--ink);
	white-space: nowrap;
	flex: none;
}
.espalla-cat-nav .sell-link { margin-left: auto; color: var(--accent); }

/* ===================================================================
   BUTTONS / WOOCOMMERCE GLOBAL
   =================================================================== */
.button,
a.button,
button.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce input.button,
.wp-block-button__link {
	background: var(--accent) !important;
	color: #fff !important;
	border: none !important;
	border-radius: var(--radius-pill) !important;
	font-family: 'Inter', sans-serif !important;
	font-weight: 800 !important;
	letter-spacing: 0.02em;
	padding: 12px 26px !important;
	text-transform: uppercase;
	font-size: 13px !important;
	transition: background 160ms ease, transform 160ms ease-out;
}
.button:hover,
a.button:hover,
button.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce input.button:hover {
	background: var(--ink) !important;
	color: #fff !important;
}
.button:active,
a.button:active,
button.button:active,
.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce #respond input#submit:active,
.woocommerce input.button:active {
	transform: scale(0.97);
}
.button.alt,
.woocommerce a.button.alt,
.woocommerce #respond input#submit.alt {
	background: var(--ink) !important;
}
.button.alt:hover { background: var(--accent) !important; }

.woocommerce span.onsale {
	background: var(--urgency) !important;
	color: #fff;
	font-weight: 900;
	border-radius: 20px;
	min-height: auto;
	min-width: auto;
	padding: 5px 12px;
	line-height: 1.4;
	font-size: 11.5px;
	top: 10px; left: 10px;
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--urgency);
	font-weight: 900;
}
.woocommerce ul.products li.product .price del,
.woocommerce div.product p.price del {
	color: var(--ink-3);
	opacity: 1;
}
.woocommerce ul.products li.product .price ins,
.woocommerce div.product p.price ins {
	text-decoration: none;
}

.woocommerce ul.products li.product {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-card);
	padding: 14px !important;
	transition: box-shadow 0.2s, border-color 0.2s;
}
.woocommerce ul.products li.product:hover {
	box-shadow: 0 12px 26px rgba(24,24,27,.12);
	border-color: var(--accent);
}
.woocommerce ul.products li.product img {
	border-radius: var(--radius-img);
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 13.5px;
	font-weight: 700;
	font-family: 'Inter', system-ui, sans-serif;
	color: var(--ink);
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
	background: var(--surface) !important;
	border: 1px solid var(--border) !important;
	border-top: 1px solid var(--border) !important;
	border-radius: var(--radius-card) !important;
	box-shadow: 0 6px 18px rgba(36, 31, 26, .06);
	color: var(--ink) !important;
	font-family: 'Inter', sans-serif;
	font-size: 13.5px;
	font-weight: 600;
	padding: 16px 20px 16px 52px !important;
	margin: 0 0 20px !important;
}
.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--accent) !important;
	top: 50% !important;
	transform: translateY(-50%);
	left: 20px !important;
}
.woocommerce-error {
	border-color: #E3B3A6 !important;
}
.woocommerce-error::before {
	color: #B33A2E !important;
	top: 50% !important;
	transform: translateY(-50%);
	left: 20px !important;
}
.woocommerce-message .button,
.woocommerce-info .button {
	background: var(--accent) !important;
	color: #fff !important;
	float: none !important;
	margin-left: 14px;
}

/* ===================================================================
   HOMEPAGE SECTIONS (front-page.php)
   =================================================================== */
.espalla-section {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 40px;
}

.espalla-trust {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	padding: 22px 40px 0;
	max-width: 1440px;
	margin: 0 auto;
}
.espalla-trust-item {
	display: flex; align-items: center; gap: 12px;
	background: var(--surface); border: 1px solid var(--border);
	border-radius: 14px; padding: 16px 20px;
}
.espalla-trust-item strong { display: block; font-size: 13.5px; font-weight: 900; }
.espalla-trust-item span { display: block; font-size: 12px; font-weight: 600; color: var(--ink-2); }

.espalla-hero {
	margin: 22px 40px 0;
	max-width: 1440px;
	margin-left: auto; margin-right: auto;
	padding: 0 40px;
}
.espalla-hero-banner {
	position: relative;
	border-radius: 18px;
	overflow: hidden;
	background: var(--ink);
	padding: 56px 52px;
	min-height: 280px;
	display: flex;
	align-items: center;
	color: var(--bg);
}
.espalla-hero-video {
	position: absolute;
	inset: -22px;
	width: calc(100% + 44px);
	height: calc(100% + 44px);
	object-fit: cover;
	z-index: 0;
	will-change: transform;
	transform: translate3d(0, 0, 0) scale(1.09);
}
.espalla-hero-scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(100deg, rgba(36,31,26,.78) 0%, rgba(36,31,26,.56) 32%, rgba(36,31,26,.22) 60%, rgba(36,31,26,.1) 100%);
}
.espalla-hero-copy { position: relative; z-index: 2; max-width: 640px; }
@media (prefers-reduced-motion: reduce) {
	.espalla-hero-video { display: none; }
	.espalla-hero-banner { background: var(--ink) url('assets/video/hero-loop-poster.png?v=4') center/cover; }
}
/* Mismo estado, pero disparado por JS cuando el navegador RECHAZA el
   autoplay (ahorro de batería, política propia, lo que sea) — sin esto
   Safari en iOS dibuja su botón de play nativo encima de un <video>
   pausado sin controles. Ocultar el <video> quita ese botón; la foto
   fija hace de fondo y se ve intencional, no roto. Ver header.php. */
.espalla-hero-banner.is-autoplay-blocked .espalla-hero-video { display: none; }
.espalla-hero-banner.is-autoplay-blocked { background: var(--ink) url('assets/video/hero-loop-poster.png?v=4') center/cover; }
.espalla-hero-banner .kicker {
	display: inline-block; color: #B9C4B4;
	font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}
.espalla-hero-banner h1 {
	margin: 12px 0 0; font-family: var(--font-heading); font-size: 46px; line-height: 1.08; font-weight: 600; color: var(--bg); letter-spacing: -0.01em;
}
.espalla-hero-banner p { margin: 16px 0 0; font-size: 15.5px; font-weight: 400; color: rgba(246,241,231,.82); line-height: 1.6; }
.espalla-hero-cta-row { display: flex; align-items: center; gap: 14px; margin-top: 26px; }
.espalla-hero-cta {
	border: none; background: var(--bg); color: var(--ink);
	font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 700;
	padding: 17px 34px; border-radius: var(--radius-pill); cursor: pointer;
	text-decoration: none; display: inline-block;
	transition: background 160ms ease, color 160ms ease, transform 160ms ease-out;
}
.espalla-hero-cta:hover { background: var(--accent); color: #fff; }
.espalla-hero-cta:active { transform: scale(0.97); }

.espalla-section-head {
	display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 16px;
}
.espalla-section-head h2 { font-size: 27px; margin: 0; }
.espalla-section-head .sub { font-size: 13px; font-weight: 600; color: var(--ink-2); margin-top: 5px; }

.espalla-flash {
	margin: 26px 40px 0; background: var(--surface); border-radius: 18px; border: 1px solid var(--border); overflow: hidden;
	max-width: 1440px; margin-left: auto; margin-right: auto;
}
.espalla-flash-head {
	display: flex; align-items: center; gap: 16px; padding: 18px 24px;
	background: linear-gradient(90deg, var(--urgency), var(--accent)); color: #fff;
}
.espalla-flash-head .title { display: flex; align-items: center; gap: 9px; font-size: 21px; font-weight: 900; }
.espalla-flash-products {
	display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
	list-style: none; margin: 0; padding: 0;
}
.espalla-flash-products li.product {
	padding: 20px 18px 22px !important; border-right: 1px solid #F1F1F3;
	border-radius: 0 !important; border-top: none !important; border-bottom: none !important; border-left: none !important;
}
.espalla-flash-products li.product:hover { box-shadow: none; }

.espalla-cat-tiles {
	display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px;
}
.espalla-cat-tile {
	background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 18px;
	display: flex; flex-direction: column; align-items: center; gap: 12px; text-decoration: none; text-align: center;
}
.espalla-cat-tile:hover { border-color: var(--accent); box-shadow: 0 10px 20px rgba(24,24,27,.08); }
.espalla-cat-tile img, .espalla-cat-tile .ph {
	width: 100%; aspect-ratio: 1; border-radius: 12px; object-fit: cover;
	background: repeating-linear-gradient(45deg, var(--tint-2, #FAF7EF) 0 9px, var(--border) 9px 18px);
}
.espalla-cat-tile strong { color: var(--ink); font-size: 13.5px; font-family: var(--font-heading); font-weight: 600; }
.espalla-cat-tile span { color: var(--accent); font-size: 11.5px; font-weight: 700; }

.espalla-newsletter {
	margin: 36px 40px 0; border-radius: 18px; background: var(--ink); padding: 40px 52px;
	display: flex; align-items: center; justify-content: space-between; gap: 40px; color: #fff;
	max-width: 1440px; margin-left: auto; margin-right: auto;
}
.espalla-newsletter h2 { color: #fff; font-size: 30px; margin: 0; }
.espalla-newsletter p { margin: 10px 0 0; color: #A1A1AA; font-weight: 600; }
.espalla-newsletter form { display: flex; gap: 10px; min-width: 420px; }
.espalla-newsletter input[type="email"] {
	flex: 1; border: 2px solid #3F3F46; background: #27272A; border-radius: var(--radius-pill);
	padding: 15px 22px; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; color: #fff; outline: none;
}
.espalla-newsletter button {
	border: none; background: var(--accent); color: #fff; font-family: 'Inter', sans-serif;
	font-size: 13.5px; font-weight: 900; padding: 15px 32px; border-radius: var(--radius-pill); cursor: pointer; white-space: nowrap;
}
.espalla-newsletter button:hover { background: var(--pop); color: var(--ink); }

.espalla-empty-shop {
	background: #fff; border: 1px dashed var(--border); border-radius: 16px; padding: 40px; text-align: center; color: var(--ink-2);
}

/* ===================================================================
   SHOP / CATEGORY / PRODUCT — quitamos el sidebar de blog de Storefront,
   la tienda va a ancho completo (el diseño de filtros propio se agrega después).
   =================================================================== */
#secondary.widget-area { display: none !important; }
#primary.content-area {
	width: 100% !important;
	float: none !important;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 40px;
}
/* WooCommerce/Storefront heredan un clearfix de la época de layouts con
   float (content:"";display:table en :before/:after). Bajo display:grid ese
   pseudo-elemento se convierte en una celda fantasma real que ocupa el
   primer lugar de la grilla, corriendo todo el resto un puesto y dejando el
   último producto solo en la fila siguiente. Se neutraliza para cualquier
   grilla de productos del sitio (columns-5, campana-products, etc). */
.products::before,
.products::after {
	content: none !important;
	display: none !important;
}
.woocommerce ul.products {
	display: grid !important;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 16px;
	direction: ltr;
	justify-content: start;
}
.woocommerce ul.products li.product {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
	grid-column: auto !important;
}
.woocommerce ul.products li.product:first-child {
	grid-column: 1 !important;
}
@media (max-width: 1100px) {
	.woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ===================================================================
   CATEGORÍA / CATÁLOGO (archive-product.php)
   =================================================================== */
.espalla-archive-head {
	display: flex; align-items: flex-end; justify-content: space-between; gap: 30px;
	flex-wrap: wrap;
}
.espalla-archive-head h1 { margin: 0; font-size: 34px; }
.espalla-archive-head .sub { margin-top: 7px; font-size: 13.5px; font-weight: 700; color: var(--ink-2); }
.espalla-chip-row { display: flex; gap: 9px; flex-wrap: wrap; }
.espalla-chip {
	background: var(--surface); color: var(--ink-2); border: 1px solid var(--border);
	padding: 9px 16px; border-radius: 40px; font-size: 12.5px; font-weight: 800; text-decoration: none;
}
.espalla-chip.is-active, .espalla-chip:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

.espalla-archive-layout {
	display: grid; grid-template-columns: 268px 1fr; gap: 22px; align-items: start;
	margin-top: 20px;
}

.espalla-filters { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 20px; }
.espalla-filters-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 22px; }
.espalla-filters-head { display: flex; align-items: center; justify-content: space-between; }
.espalla-filters-head h3 { margin: 0; font-size: 15px; }
.espalla-filters-head a { font-size: 11.5px; font-weight: 800; text-decoration: none; }

.espalla-filter-group { margin-top: 22px; padding-top: 20px; border-top: 1px solid #F1F1F3; }
.espalla-filter-group:first-of-type { margin-top: 20px; padding-top: 0; border-top: none; }
.espalla-filter-title { font-size: 12px; font-weight: 900; letter-spacing: .06em; color: var(--ink-2); margin-bottom: 11px; }

.espalla-radio-row, .espalla-check-row {
	display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; color: #3F3F46;
	text-decoration: none; padding: 5px 0;
}
.espalla-radio-row .dot {
	width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--border); flex: none; position: relative;
}
.espalla-radio-row.is-active .dot { border-color: var(--accent); }
.espalla-radio-row.is-active .dot::after {
	content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--accent);
}
.espalla-radio-row.is-active { color: var(--accent); }
.espalla-radio-row .stars { color: var(--pop); font-size: 12.5px; }
.espalla-check-row .box { width: 18px; height: 18px; border-radius: 5px; border: 2.5px solid var(--border); flex: none; }
.espalla-check-row .count { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--ink-3); }
.espalla-check-row:hover .box, .espalla-radio-row:hover .dot { border-color: var(--accent); }

.espalla-filters-flash {
	background: var(--ink); border-radius: 18px; padding: 20px 22px; color: #fff;
}
.espalla-filters-flash .label {
	display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 900; color: var(--pop); letter-spacing: .1em;
}
.espalla-filters-flash .headline { font-size: 16px; font-weight: 800; margin-top: 10px; line-height: 1.3; }
.espalla-filters-flash .cta {
	display: block; text-align: center; margin-top: 14px; background: var(--accent); color: #fff;
	font-size: 12px; font-weight: 900; padding: 12px 0; border-radius: 40px; text-decoration: none;
}
.espalla-filters-flash .cta:hover { background: var(--pop); color: var(--ink); }

.espalla-sort-row {
	display: flex; align-items: center; justify-content: space-between; gap: 20px;
	background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 14px 20px;
	margin-bottom: 16px;
}
.espalla-sort-row .results-count { font-size: 12.5px; font-weight: 800; color: var(--ink-2); }
.espalla-native-sort select {
	border: 1px solid var(--border); border-radius: 40px; padding: 8px 14px; font-family: 'Inter', sans-serif;
	font-size: 12px; font-weight: 800; background: #fff;
}
.woocommerce-pagination { margin-top: 24px; }
.woocommerce-pagination ul.page-numbers {
	display: flex; align-items: center; justify-content: center; gap: 9px; list-style: none; padding: 0;
}
.woocommerce-pagination .page-numbers li { display: contents; }
.woocommerce-pagination .page-numbers a, .woocommerce-pagination .page-numbers span {
	min-width: 38px; height: 38px; padding: 0 12px; border-radius: 50px; border: 2px solid var(--border);
	display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 900;
	color: var(--ink); text-decoration: none; background: #fff;
}
.woocommerce-pagination .page-numbers .current { background: var(--ink); border-color: var(--ink); color: #fff; }
.woocommerce-pagination .page-numbers a:hover { border-color: var(--accent); }

.espalla-archive-description {
	margin-top: 26px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 26px 28px;
}
.espalla-archive-description h2 { margin: 0; font-size: 18px; }
.espalla-archive-description p { margin: 10px 0 0; max-width: 900px; font-size: 14px; font-weight: 600; line-height: 1.75; color: var(--ink-2); }

@media (max-width: 1100px) {
	.espalla-archive-layout { grid-template-columns: minmax(0, 1fr); }
	.espalla-filters { position: static; }
}

/* ===================================================================
   PRODUCTO (single-product.php)
   =================================================================== */
.espalla-product {
	display: grid; grid-template-columns: 1fr 400px; gap: 30px; align-items: start;
	padding-top: 22px;
}

.espalla-product-gallery .woocommerce-product-gallery {
	background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 18px;
}
.espalla-product-gallery .woocommerce-product-gallery__image {
	border-radius: 14px; overflow: hidden; background: repeating-linear-gradient(45deg, var(--bg) 0 12px, #EAEAEC 12px 24px);
}
.espalla-product-gallery .flex-control-thumbs {
	display: flex; gap: 10px; margin-top: 14px; list-style: none; padding: 0;
}
.espalla-product-gallery .flex-control-thumbs li { width: 76px; }
.espalla-product-gallery .flex-control-thumbs img {
	border-radius: 10px; border: 2.5px solid var(--border); cursor: pointer;
}
.espalla-product-gallery .flex-control-thumbs img.flex-active { border-color: var(--accent); }

.espalla-product-summary { display: flex; flex-direction: column; }
.espalla-product-summary .product_title { font-size: 27px; margin: 8px 0 0; line-height: 1.2; }
.espalla-flash-flag {
	display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 900;
	color: var(--urgency); letter-spacing: .08em; width: fit-content;
}
.espalla-product-rating { display: flex; align-items: center; gap: 9px; margin-top: 12px; font-size: 13px; }
.espalla-product-rating .stars { color: var(--pop); letter-spacing: .06em; }
.espalla-product-rating .muted { color: var(--ink-2); font-weight: 600; }

.espalla-product-summary p.price {
	font-size: 34px !important; display: block; margin-top: 16px !important;
}
.espalla-product-summary p.price ins { color: var(--urgency); }
.espalla-coupon-note { margin-top: 6px; font-size: 13px; font-weight: 800; color: var(--accent); }

.espalla-stock-urgency {
	margin-top: 16px; padding: 12px 14px; background: #FFF8F2; border: 1px solid #FFE0C7; border-radius: 12px;
}
.espalla-stock-urgency .msg { font-size: 12px; font-weight: 800; color: var(--ink-2); }
.espalla-stock-urgency .bar { height: 7px; border-radius: 6px; background: #FFE0C7; margin-top: 7px; overflow: hidden; }
.espalla-stock-urgency .bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--urgency)); }

.espalla-add-to-cart { margin-top: 18px; }
.espalla-add-to-cart .variations { width: 100%; border: none; }
.espalla-add-to-cart .variations td { display: block; padding: 0; }
.espalla-add-to-cart .variations tr { display: block; margin-bottom: 14px; }
.espalla-add-to-cart .variations label {
	font-size: 12px; font-weight: 900; letter-spacing: .06em; color: var(--ink-2); text-transform: uppercase; display: block; margin-bottom: 8px;
}
.espalla-add-to-cart .variations select {
	width: 100%; border: 2.5px solid var(--border); border-radius: 12px; padding: 12px 14px;
	font-family: 'Inter', sans-serif; font-size: 13.5px; font-weight: 700; background: #fff;
}
.espalla-add-to-cart .reset_variations { display: inline-block; margin-top: 8px; font-size: 11.5px; }
.espalla-add-to-cart table.variations + * { margin-top: 4px; }
.espalla-add-to-cart .woocommerce-variation-price .price { font-size: 22px !important; }
.espalla-add-to-cart .quantity input.qty {
	width: 70px; height: 46px; border: 2px solid var(--border); border-radius: 40px; text-align: center;
	font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 900;
}
.espalla-add-to-cart .cart { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.espalla-add-to-cart button.single_add_to_cart_button {
	padding: 16px 34px !important; font-size: 14px !important;
}

.espalla-trust-mini { display: flex; flex-direction: column; gap: 11px; margin-top: 20px; padding-top: 18px; border-top: 1px solid #F1F1F3; }
.espalla-trust-mini div { display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 700; color: #3F3F46; }

.espalla-bundle { margin-top: 20px; background: var(--ink); border-radius: 18px; padding: 20px 22px; color: #fff; }
.espalla-bundle .label { font-size: 11.5px; font-weight: 900; color: var(--pop); letter-spacing: .1em; }
.espalla-bundle .row { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.espalla-bundle .row img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; }
.espalla-bundle .plus { font-size: 20px; font-weight: 900; color: #52525B; }
.espalla-bundle .info .name { font-size: 12.5px; font-weight: 800; }
.espalla-bundle .info .price { margin-top: 3px; }
.espalla-bundle .cta {
	display: block; text-align: center; margin-top: 14px; background: var(--pop); color: var(--ink);
	font-size: 12.5px; font-weight: 900; padding: 13px 0; border-radius: 40px; text-decoration: none;
}

.espalla-product-details {
	display: grid; grid-template-columns: 1fr 400px; gap: 22px; align-items: start; margin-top: 30px;
}
.espalla-product-tabs { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; padding: 0 30px 30px; }
.espalla-product-tabs .woocommerce-tabs ul.tabs {
	display: flex; gap: 18px; list-style: none; padding: 0; margin: 0 -30px 24px; border-bottom: 1px solid var(--border);
	padding-left: 30px;
}
.espalla-product-tabs .woocommerce-tabs ul.tabs li { margin: 0; }
.espalla-product-tabs .woocommerce-tabs ul.tabs li a {
	display: block; padding: 17px 0; font-size: 13.5px; font-weight: 900; color: var(--ink-3); text-decoration: none;
}
.espalla-product-tabs .woocommerce-tabs ul.tabs li.active a { color: var(--ink); border-bottom: 3px solid var(--accent); }
.espalla-product-tabs .woocommerce-Tabs-panel h2 { font-size: 19px; }
.espalla-product-tabs table.shop_attributes { width: 100%; border-collapse: collapse; }
.espalla-product-tabs table.shop_attributes th {
	text-align: left; width: 240px; padding: 13px 0; font-weight: 800; color: var(--ink-2); border-bottom: 1px solid #F1F1F3;
}
.espalla-product-tabs table.shop_attributes td { padding: 13px 0; font-weight: 700; color: #27272A; border-bottom: 1px solid #F1F1F3; }

.espalla-reviews-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 24px; }
.espalla-reviews-card .reviews-top { display: flex; align-items: baseline; gap: 12px; }
.espalla-reviews-card .avg { font-size: 44px; font-weight: 900; letter-spacing: -.04em; }
.espalla-reviews-card .stars { color: var(--pop); font-size: 15px; letter-spacing: .08em; }
.espalla-reviews-card .count { font-size: 12px; font-weight: 700; color: var(--ink-2); margin-top: 2px; }
.espalla-reviews-breakdown { display: flex; flex-direction: column; gap: 7px; margin-top: 18px; }
.espalla-reviews-breakdown .row { display: flex; align-items: center; gap: 10px; }
.espalla-reviews-breakdown .label { font-size: 11.5px; font-weight: 800; color: var(--ink-2); width: 26px; }
.espalla-reviews-breakdown .track { flex: 1; height: 7px; border-radius: 6px; background: #F1F1F3; overflow: hidden; }
.espalla-reviews-breakdown .fill { display: block; height: 100%; background: var(--pop); }
.espalla-reviews-breakdown .pct { font-size: 11.5px; font-weight: 800; color: var(--ink-2); width: 34px; text-align: right; }
.espalla-reviews-card .write-review {
	display: block; text-align: center; margin-top: 16px; border: 2px solid var(--border); border-radius: 40px;
	padding: 13px 0; font-size: 12.5px; font-weight: 900; color: var(--ink); text-decoration: none;
}
.espalla-reviews-card .write-review:hover { border-color: var(--accent); color: var(--accent); }

.espalla-sticky-buy {
	position: sticky; bottom: 0; z-index: 20; background: rgba(255,255,255,.97); border-top: 1px solid var(--border);
	padding: 12px 40px; display: flex; align-items: center; gap: 20px; box-shadow: 0 -6px 20px rgba(24,24,27,.08);
	margin-top: 30px;
}
.espalla-sticky-buy img { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; }
.espalla-sticky-buy .info { flex: 1; }
.espalla-sticky-buy .name { font-size: 13px; font-weight: 900; }
.espalla-sticky-buy .price { margin-top: 2px; font-size: 15px; font-weight: 900; color: var(--urgency); }
.espalla-sticky-buy .jump-cta {
	background: var(--accent); color: #fff; font-size: 13.5px; font-weight: 900; padding: 14px 34px;
	border-radius: 40px; text-decoration: none;
}
.espalla-sticky-buy .jump-cta:hover { background: var(--ink); color: #fff; }

@media (max-width: 1100px) {
	.espalla-product, .espalla-product-details { grid-template-columns: minmax(0, 1fr); }
}

/* ===================================================================
   CARRITO Y CHECKOUT (bloques nativos de WooCommerce Blocks)
   =================================================================== */
.wc-block-cart, .wc-block-checkout {
	max-width: 1440px; margin: 0 auto; padding: 22px 40px 60px;
	/* WooCommerce Blocks apila el resumen del pedido debajo de la lista
	   en pantallas angostas usando @container (no @media) sobre
	   .wc-block-components-sidebar-layout — pero eso solo se activa si
	   algún ancestro declara container-type. Nunca lo hicimos, así que
	   ese responsive nativo nunca corría: el resumen se quedaba robando
	   la mitad del ancho en el carrito en cualquier tamaño de pantalla. */
	container-type: inline-size;
}

/* Regla de seguridad: dentro de los bloques de carrito/checkout ningún
   descendiente puede exigir más ancho mínimo que su contenedor — evita
   que un nombre de producto largo reviente el layout y se parta
   letra por letra en cualquier nivel de anidamiento.
   OJO: se excluye .wc-block-cart-item__total — es una columna implícita
   del grid nativo de la fila (sin ancho fijo, sólo grid-row-start) y
   depende de su min-width:auto por defecto para que el grid calcule su
   ancho según el contenido ("$ 99.900"); con min-width:0 la columna
   colapsa a 0 y el precio queda invisible/desbordado sobre el título. */
.wc-block-cart *:not(.wc-block-cart-item__total):not(.wc-block-cart-item__total *),
.wc-block-checkout *:not(.wc-block-cart-item__total):not(.wc-block-cart-item__total *) {
	min-width: 0;
}

/* Tarjetas: pasos del checkout y filas de producto del carrito.
   OJO: .wc-block-components-totals-wrapper se reutiliza también para
   envolver la lista de productos dentro del resumen del pedido — ahí
   el padding le come el ancho al nombre del producto, así que se
   excluye explícitamente con :not(). */
.wc-block-components-checkout-step,
.wc-block-cart-items,
.wc-block-components-totals-wrapper:not(.wp-block-woocommerce-checkout-order-summary-cart-items-block):not(.wp-block-woocommerce-cart-order-summary-cart-items-block) {
	background: var(--surface) !important;
	border: 1px solid var(--border) !important;
	border-radius: 18px !important;
	padding: 22px 24px !important;
}
.wc-block-components-checkout-step {
	margin-bottom: 16px !important;
}

/* El resumen de pedido ya trae su propio grid interno de ancho fijo —
   solo le damos el look de tarjeta, sin tocar el padding para no
   apretar los nombres de producto. */
.wp-block-woocommerce-checkout-order-summary-block,
.wp-block-woocommerce-cart-order-summary-block {
	background: var(--surface) !important;
	border: 1px solid var(--border) !important;
	border-radius: 18px !important;
}
.wc-block-components-checkout-step__title {
	font-family: 'Inter', sans-serif; font-weight: 900; font-size: 15px;
}

/* Inputs */
.wc-block-components-text-input input,
.wc-block-components-text-input textarea,
.wc-block-components-address-form select,
.wc-block-components-combobox input {
	border: 2px solid var(--border) !important;
	border-radius: 12px !important;
	font-family: 'Inter', sans-serif !important;
}
.wc-block-components-text-input.is-active input,
.wc-block-components-text-input input:focus {
	border-color: var(--accent) !important;
	box-shadow: none !important;
}
.wc-block-components-text-input label {
	font-family: 'Inter', sans-serif;
}

/* Botones */
.wc-block-components-button,
.wc-block-cart__submit-button,
button.wc-block-components-checkout-place-order-button,
.wc-block-components-totals-coupon__button {
	background: var(--accent) !important;
	color: #fff !important;
	border: none !important;
	border-radius: var(--radius-pill) !important;
	font-family: 'Inter', sans-serif !important;
	font-weight: 900 !important;
	text-transform: uppercase;
}
.wc-block-components-button:hover,
button.wc-block-components-checkout-place-order-button:hover {
	background: var(--ink) !important;
	color: #fff !important;
}
.wc-block-components-button.wc-block-components-button--outlined {
	background: transparent !important; color: var(--ink) !important; border: 2px solid var(--border) !important;
}
.wc-block-cart__submit-container {
	background: transparent !important;
	padding: 0 !important;
}

/* Precios y descuentos */
.wc-block-components-totals-item__value,
.wc-block-components-product-price__value {
	font-weight: 900 !important; color: var(--ink) !important;
}
.wc-block-components-totals-item.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: var(--urgency) !important; font-size: 24px !important;
}
.wc-block-components-sale-badge,
.wc-block-components-product-badge {
	background: #EDFAEF !important; color: #1a7d2e !important; border: none !important; border-radius: 20px !important;
}

/* Cantidad */
.wc-block-components-quantity-selector {
	border: 2px solid var(--border) !important; border-radius: var(--radius-pill) !important; overflow: hidden;
}
.wc-block-components-quantity-selector__button,
.wc-block-components-quantity-selector__input {
	font-family: 'Inter', sans-serif !important; font-weight: 900 !important;
}

/* Cupón */
.wc-block-components-totals-coupon__content input {
	border: 2px solid var(--border) !important; border-radius: var(--radius-pill) !important;
}

/* ===================================================================
   CONFIRMACIÓN DE PEDIDO (thankyou clásico de WooCommerce)
   =================================================================== */
.woocommerce-order {
	max-width: 1440px; margin: 0 auto; padding: 0 40px 60px;
}
.woocommerce-thankyou-order-received {
	display: block; background: #EDFAEF; color: #1a7d2e; font-weight: 800;
	padding: 16px 22px; border-radius: 14px; margin-bottom: 24px;
}
.woocommerce-order-overview {
	display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
	list-style: none; margin: 0 0 30px; padding: 0;
}
.woocommerce-order-overview li {
	background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
	padding: 16px 18px; font-size: 13px; font-weight: 700; color: var(--ink-2);
}
.woocommerce-order-overview li strong {
	display: block; margin-top: 4px; font-size: 16px; font-weight: 900; color: var(--ink);
}
.woocommerce-order-details__title, .woocommerce-order-downloads__title,
.woocommerce-customer-details h2 {
	font-family: 'Inter', sans-serif; font-weight: 900; font-size: 20px;
}
table.woocommerce-table--order-details {
	width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border);
	border-radius: 14px; overflow: hidden;
}
table.woocommerce-table--order-details th {
	text-align: left; padding: 14px 18px; background: var(--bg); font-weight: 800; font-size: 13px;
}
table.woocommerce-table--order-details td {
	padding: 14px 18px; border-top: 1px solid var(--border); font-weight: 600;
}
table.woocommerce-table--order-details tfoot td, table.woocommerce-table--order-details tfoot th {
	font-weight: 900;
}
address {
	background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px;
	font-style: normal; font-size: 14px; line-height: 1.7;
}

/* ===================================================================
   FOOTER
   =================================================================== */
#colophon.site-footer { background: var(--surface); border-top: 1px solid var(--border); }
.espalla-footer {
	max-width: 1440px; margin: 0 auto; padding: 40px 40px 26px;
}
.espalla-footer-top {
	display: grid; grid-template-columns: 1.4fr minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 40px;
	padding-bottom: 30px; border-bottom: 1px solid var(--border);
}
.espalla-footer-brand p { color: var(--ink-2); font-size: 13px; font-weight: 600; max-width: 300px; line-height: 1.65; }
.espalla-footer-col { display: flex; flex-direction: column; gap: 9px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.espalla-footer-col a { color: var(--ink-2); text-decoration: none; }
.espalla-footer-col a:hover,
.espalla-footer-col a:focus-visible { color: var(--ink); text-decoration: underline; }
.espalla-footer-col .col-title { font-size: 12.5px; font-weight: 900; color: var(--ink); letter-spacing: .06em; }
.espalla-payment-badges { display: flex; flex-wrap: wrap; gap: 7px; }
.espalla-payment-badges span { border: 1px solid var(--border); border-radius: 6px; padding: 7px 11px; font-size: 11px; font-weight: 800; color: #3F3F46; }
.espalla-footer-bottom { margin-top: 20px; font-size: 12px; font-weight: 600; color: var(--ink-3); }

/* ===================================================================
   LANDING DE CAMPAÑA (template-campana.php + header/footer-campana.php)
   =================================================================== */
body.espalla-campana { background: var(--bg); }

.campana-promo-bar {
	display: flex; align-items: center; justify-content: center; gap: 12px;
	background: var(--urgency); color: #fff; padding: 11px 20px;
	font-size: 13px; font-weight: 800; letter-spacing: .04em; text-align: center;
}
.campana-promo-bar svg { flex: none; animation: espalla-pulse 1.4s ease-in-out infinite; }
.campana-promo-bar .campana-countdown {
	background: rgba(0,0,0,.26); padding: 3px 10px; border-radius: 20px; font-weight: 900;
	font-variant-numeric: tabular-nums;
}
@keyframes espalla-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

.campana-header {
	background: var(--surface); display: flex; align-items: center; justify-content: space-between;
	padding: 18px 56px; box-shadow: 0 1px 0 var(--border); max-width: 1440px; margin: 0 auto;
}
.campana-wordmark { display: flex; align-items: baseline; gap: 2px; font-size: 25px; font-weight: 900; letter-spacing: -0.02em; }
.campana-wordmark .accent-part { color: var(--accent); }
.campana-header-right { display: flex; align-items: center; gap: 22px; font-size: 12.5px; font-weight: 800; color: var(--ink-2); }
.campana-stat { display: flex; align-items: center; gap: 7px; }
.campana-cta-btn {
	background: var(--accent); color: #fff !important; padding: 12px 24px; border-radius: var(--radius-pill);
	font-weight: 900; font-size: 12.5px; text-decoration: none !important;
}
.campana-cta-btn:hover { background: var(--ink); color: #fff !important; }

.campana-hero {
	background: var(--surface); padding: 58px 56px 62px; display: grid; grid-template-columns: 1.05fr 1fr;
	gap: 56px; align-items: center; max-width: 1440px; margin: 0 auto;
}
.campana-badge {
	display: inline-flex; align-items: center; gap: 8px; background: #FFF3E6; color: var(--accent);
	font-size: 12px; font-weight: 900; padding: 8px 14px; border-radius: var(--radius-pill); letter-spacing: .06em;
}
.campana-hero-copy h1 {
	margin: 20px 0 0; font-size: 60px; line-height: .98; font-weight: 900; letter-spacing: -0.035em;
}
.campana-hero-copy h1 .accent { color: var(--accent); }
.campana-hero-copy > p { margin: 20px 0 0; max-width: 480px; font-size: 16.5px; font-weight: 600; line-height: 1.65; color: var(--ink-2); }

.campana-form { display: flex; gap: 10px; margin-top: 30px; max-width: 540px; }
.campana-form input[type="email"] {
	flex: 1; border: 2.5px solid var(--border); background: #fff; border-radius: var(--radius-pill);
	padding: 17px 24px; font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 600; outline: none;
}
.campana-form input[type="email"]:focus { border-color: var(--accent); }
.campana-form button {
	border: none; background: var(--accent); color: #fff; font-family: 'Inter', sans-serif;
	font-size: 14px; font-weight: 900; padding: 17px 32px; border-radius: var(--radius-pill); cursor: pointer;
	white-space: nowrap; box-shadow: 0 10px 22px rgba(255,102,0,.28);
}
.campana-form button:hover { background: var(--ink); }
.campana-form-note { margin: 10px 0 0; font-size: 12px; color: var(--ink-3); font-weight: 600; }
.campana-checks { display: flex; align-items: center; gap: 20px; margin-top: 16px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); flex-wrap: wrap; }
.campana-checks span { display: flex; align-items: center; gap: 7px; }

.campana-hero-media { position: relative; }
.campana-media-placeholder {
	aspect-ratio: 4 / 3.4; border-radius: 20px; background: repeating-linear-gradient(45deg, var(--bg) 0 11px, #EAEAEC 11px 22px);
	border: 2px dashed var(--border); display: flex; align-items: center; justify-content: center; text-align: center;
	font-family: ui-monospace, monospace; font-size: 11.5px; font-weight: 700; color: var(--ink-3); letter-spacing: .08em; padding: 16px;
}
.campana-floating-badge {
	position: absolute; bottom: -18px; left: -18px; background: var(--urgency); color: #fff; border-radius: 16px;
	padding: 16px 20px; box-shadow: 0 12px 26px rgba(229,46,46,.3);
}
.campana-floating-badge .label { display: block; font-size: 11px; font-weight: 800; letter-spacing: .1em; opacity: .9; }
.campana-floating-badge .amount { display: block; font-size: 34px; font-weight: 900; letter-spacing: -0.03em; line-height: 1; }
.campana-floating-badge .sub { display: block; font-size: 11.5px; font-weight: 700; opacity: .9; }
.campana-floating-card {
	position: absolute; top: -14px; right: -14px; background: #fff; border: 1px solid var(--border); border-radius: 14px;
	padding: 13px 18px; box-shadow: 0 10px 22px rgba(24,24,27,.1); display: flex; align-items: center; gap: 10px;
}
.campana-floating-card strong { display: block; font-size: 12.5px; }
.campana-floating-card span { display: block; font-size: 11.5px; font-weight: 700; color: var(--ink-2); }

.campana-trust-dark {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; background: var(--ink); color: #fff;
	padding: 22px 56px; max-width: 1440px; margin: 0 auto;
}
.campana-trust-dark > div { display: flex; align-items: center; gap: 12px; padding: 0 24px; font-size: 13px; font-weight: 800; border-left: 1px solid #3F3F46; }
.campana-trust-dark > div:first-child { border-left: none; padding-left: 0; }

.campana-section { max-width: 1440px; margin: 0 auto; padding: 46px 56px 0; }
.campana-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.campana-section-head h2 { margin: 8px 0 0; font-size: 32px; font-weight: 900; letter-spacing: -0.025em; }
.campana-eyebrow { font-size: 12px; font-weight: 900; letter-spacing: .12em; color: var(--urgency); }
.campana-eyebrow--light { color: var(--pop); }
.campana-see-all { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 900; color: var(--accent); text-decoration: none; white-space: nowrap; }

ul.campana-products { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }

.campana-steps {
	background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 38px 44px;
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px;
}
.campana-steps > div { display: flex; flex-direction: column; gap: 12px; padding-left: 34px; border-left: 1px solid var(--border); }
.campana-steps > div:first-child { padding-left: 0; border-left: none; }
.campana-step-head { display: flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 900; }
.campana-step-num {
	width: 38px; height: 38px; border-radius: 50%; background: #FFF3E6; color: var(--accent);
	font-size: 15px; font-weight: 900; display: flex; align-items: center; justify-content: center; flex: none;
}
.campana-steps p { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.65; color: var(--ink-2); }

.campana-faq-section { display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: start; }
.campana-faq-intro h2 { margin: 8px 0 0; font-size: 34px; font-weight: 900; letter-spacing: -0.03em; line-height: 1.1; }
.campana-faq-intro p { margin: 16px 0 0; font-size: 15px; font-weight: 600; line-height: 1.7; color: var(--ink-2); }
.campana-whatsapp-btn {
	display: inline-flex; align-items: center; gap: 9px; margin-top: 20px; background: var(--ink); color: #fff !important;
	padding: 14px 24px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 900; text-decoration: none !important;
}
.campana-whatsapp-btn:hover { background: var(--accent); color: #fff !important; }

.campana-faq-list { display: flex; flex-direction: column; gap: 10px; }
.campana-faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.campana-faq-item summary {
	display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; cursor: pointer;
	font-size: 15px; font-weight: 800; color: var(--ink); list-style: none;
}
.campana-faq-item summary::-webkit-details-marker { display: none; }
.campana-faq-item summary::after {
	content: "+"; width: 26px; height: 26px; border-radius: 50%; background: var(--bg); color: var(--accent);
	display: flex; align-items: center; justify-content: center; flex: none; font-size: 17px; font-weight: 900;
}
.campana-faq-item[open] summary::after { content: "–"; }
.campana-faq-item p { margin: 0; padding: 0 22px 20px; font-size: 14px; font-weight: 600; line-height: 1.7; color: var(--ink-2); border-top: 1px solid #F1F1F3; padding-top: 16px; }

.campana-final-cta {
	margin: 54px 56px 0; border-radius: 20px; background: linear-gradient(115deg, var(--accent) 0%, var(--accent-dark) 100%);
	padding: 52px 56px; display: flex; align-items: center; justify-content: space-between; gap: 44px;
	max-width: 1328px; margin-left: auto; margin-right: auto;
}
.campana-final-cta h2 { margin: 10px 0 0; font-size: 42px; font-weight: 900; color: #fff; letter-spacing: -0.03em; line-height: 1.05; }
.campana-final-countdown { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 14px; font-weight: 800; color: rgba(255,255,255,.95); }
.campana-final-countdown .campana-countdown { background: rgba(0,0,0,.28); color: #fff; padding: 7px 13px; border-radius: 7px; font-weight: 900; font-variant-numeric: tabular-nums; }
.campana-form--light { min-width: 460px; margin-top: 0; }
.campana-form--light input[type="email"] {
	border-color: rgba(255,255,255,.6); background: rgba(255,255,255,.14); color: #fff; font-weight: 700;
}
.campana-form--light input[type="email"]::placeholder { color: rgba(255,255,255,.7); }
.campana-form--light button { background: #fff; color: var(--urgency); box-shadow: none; }
.campana-form--light button:hover { background: var(--pop); color: var(--ink); }

.campana-footer {
	max-width: 1440px; margin: 46px auto 0; background: var(--surface); border-top: 1px solid var(--border);
	padding: 32px 56px 26px; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
}
.campana-footer-links a { color: inherit; text-decoration: none; }
.campana-footer-links a:hover,
.campana-footer-links a:focus-visible { text-decoration: underline; }
.campana-footer-links { display: flex; gap: 26px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); flex-wrap: wrap; }
.campana-payment-badges { display: flex; gap: 7px; }
.campana-payment-badges span { border: 1px solid var(--border); border-radius: 6px; padding: 7px 11px; font-size: 11px; font-weight: 800; color: #3F3F46; }
.campana-copyright { max-width: 1440px; margin: 0 auto; background: var(--surface); padding: 0 56px 26px; font-size: 11.5px; font-weight: 600; color: var(--ink-3); }

/* ===================================================================
   RESPONSIVE
   =================================================================== */
body { overflow-x: hidden; }

@media (max-width: 1100px) {
	.espalla-header { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 16px 20px; }
	.espalla-trust, .espalla-cat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.espalla-hero { grid-template-columns: minmax(0, 1fr); padding: 0; }
	.espalla-flash-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.espalla-newsletter { flex-direction: column; align-items: flex-start; }
	.espalla-newsletter form { min-width: 0; width: 100%; }
	.espalla-footer-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

	.campana-hero { grid-template-columns: minmax(0, 1fr); padding: 40px 32px; }
	.campana-hero-copy h1 { font-size: 44px; }
	.campana-trust-dark { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 22px 32px; }
	.campana-trust-dark > div { border-left: none; padding: 0; }
	.campana-section { padding: 40px 32px 0; }
	ul.campana-products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	.campana-steps { grid-template-columns: minmax(0, 1fr); padding: 30px 32px; }
	.campana-steps > div { border-left: none; padding-left: 0; padding-top: 20px; border-top: 1px solid var(--border); }
	.campana-steps > div:first-child { padding-top: 0; border-top: none; }
	.campana-faq-section { grid-template-columns: minmax(0, 1fr); }
	.campana-final-cta { margin: 40px 32px 0; padding: 34px 30px; flex-direction: column; align-items: flex-start; }
	.campana-form--light { min-width: 0; width: 100%; }
	.campana-footer, .campana-copyright { padding-left: 32px; padding-right: 32px; }
}

/* Móvil real: el padding lateral fijo de 40px de todas las secciones
   se reduce, y todo lo que seguía en 2 columnas pasa a 1. */
@media (max-width: 600px) {
	.espalla-trust-bar { padding: 10px 16px; font-size: 11.5px; line-height: 1.4; gap: 8px; }

	/* #primary.content-area trae 40px de padding a cada lado (pensado
	   para desktop) sin override móvil — en 375px eso es 80px, el 21%
	   del ancho, comido antes de que empiece cualquier contenido (tienda,
	   producto, carrito). Se reduce a algo proporcional al viewport. */
	#primary.content-area { padding: 0 16px; }

	/* Storefront le pone padding/margin-bottom enormes a #masthead por
	   defecto (base golden-ratio de Storefront) — nunca los reseteamos y
	   en móvil, con el header ya apilado, dejaban un bloque de crema
	   muerto entre el header y el nav de categorías. */
	#masthead.site-header { margin-bottom: 0; padding: 0; }

	/* El header pasa de 3 columnas en fila a: wordmark+acciones arriba,
	   buscador abajo a lo ancho — así caben en una sola fila y se
	   recupera la altura que antes se iba en apilar 3 filas completas. */
	.espalla-header {
		grid-template-columns: auto auto;
		grid-template-areas: "wordmark actions" "search search";
		align-items: center;
		gap: 10px 12px;
		padding: 12px 16px;
	}
	.espalla-wordmark { grid-area: wordmark; }
	.espalla-header-actions { grid-area: actions; justify-self: end; gap: 16px; }
	.espalla-search-wrap { grid-area: search; }
	/* Con las dos acciones en la misma fila que el logo, el texto "Mi
	   cuenta" sobra — el ícono ya es reconocible y libera espacio para
	   que el carrito no quede apretado. */
	.espalla-header-actions a .label { display: none; }
	.espalla-cart-link { padding: 9px 14px; }

	.campana-header { padding: 14px 16px; flex-wrap: wrap; gap: 10px; }
	.campana-header-right { gap: 12px; flex-wrap: wrap; }
	.campana-stat { display: none; }
	.campana-promo-bar { padding: 9px 14px; font-size: 11px; }
	.campana-hero { padding: 30px 16px; gap: 30px; }
	.campana-hero-copy h1 { font-size: 32px; }
	.campana-form { flex-direction: column; }
	.campana-media-placeholder { aspect-ratio: 1; }
	.campana-floating-badge, .campana-floating-card { position: static; margin-top: 12px; display: inline-flex; }
	.campana-floating-badge { display: block; }
	.campana-trust-dark { grid-template-columns: minmax(0, 1fr); padding: 20px 16px; }
	.campana-section { padding: 30px 16px 0; }
	.campana-section-head { flex-direction: column; align-items: flex-start; gap: 10px; }
	ul.campana-products { grid-template-columns: minmax(0, 1fr) !important; }
	.campana-steps { padding: 24px 20px; }
	.campana-faq-intro h2 { font-size: 26px; }
	.campana-final-cta { margin: 30px 16px 0; padding: 26px 20px; }
	.campana-final-cta h2 { font-size: 28px; }
	.campana-footer { padding: 26px 16px 20px; flex-direction: column; align-items: flex-start; gap: 16px; }
	.campana-copyright { padding: 0 16px 20px; }
	.espalla-wordmark { font-size: 22px; }
	.espalla-cat-nav {
		padding: 0 16px;
		gap: 18px;
		/* Es un carrusel deslizable a propósito, pero la barra de scroll
		   nativa lo hacía ver como un error de layout — se oculta y el
		   degradado del borde derecho da la señal de que sigue contenido. */
		scrollbar-width: none;
		-ms-overflow-style: none;
		mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent 100%);
		-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent 100%);
	}
	.espalla-cat-nav::-webkit-scrollbar { display: none; }
	.espalla-hero { padding: 0; margin-top: 16px; gap: 12px; }
	.espalla-hero-banner { padding: 28px 18px; min-height: 0; }
	.espalla-hero-banner h1 { font-size: 28px; line-height: 1.08; }
	.espalla-hero-banner .kicker { font-size: 11px; }
	.espalla-hero-banner p { font-size: 14px; }
	.espalla-hero-cta { padding: 14px 26px; font-size: 13px; }
	.espalla-hero-image-placeholder { display: none; }
	.espalla-hero-banner { grid-template-columns: minmax(0, 1fr); }
	.espalla-hero-side { grid-template-columns: minmax(0, 1fr); }

	/* Grilla del catálogo: con 2 columnas en 375px cada tarjeta queda en
	   ~140px. El precio con rango y el botón no cabían en una línea —
	   "Add to cart" se partía en 3 renglones. No se toca el número de
	   columnas (eso sí es gusto, se lo pregunto a Juan); solo se ajusta
	   el espacio interno para que quepa. */
	.woocommerce ul.products li.product { padding: 10px !important; }
	.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 12.5px; }
	.woocommerce ul.products li.product .price { font-size: 13px; }
	.woocommerce ul.products li.product a.button,
	.woocommerce ul.products li.product button.button {
		padding: 10px 8px !important;
		font-size: 11px !important;
		letter-spacing: 0;
	}

	.espalla-trust { padding: 16px 16px 0; grid-template-columns: minmax(0, 1fr); }
	.espalla-cat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.espalla-section { padding: 0 16px; }
	.espalla-section-head { flex-direction: column; align-items: flex-start; gap: 10px; }

	.espalla-flash { margin: 20px 16px 0; }
	.espalla-flash-head { padding: 14px 18px; flex-wrap: wrap; gap: 10px; }
	.espalla-flash-head .title { font-size: 17px; }
	.espalla-flash-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.espalla-flash-products li.product { padding: 14px 12px !important; }

	.espalla-newsletter { margin: 30px 16px 0; padding: 28px 22px; }
	.espalla-newsletter form { flex-direction: column; }
	.espalla-newsletter h2 { font-size: 22px; }

	.espalla-footer { padding: 30px 16px 20px; }
	.espalla-footer-top { grid-template-columns: minmax(0, 1fr); gap: 26px; }

	.espalla-archive-layout { gap: 16px; }
	.espalla-archive-head h1 { font-size: 26px; }
	.espalla-archive-head { flex-direction: column; align-items: flex-start; gap: 14px; }
	.espalla-sort-row { flex-direction: column; align-items: flex-start; gap: 12px; }
	.espalla-native-sort, .espalla-native-sort select { width: 100%; max-width: 100%; }

	.espalla-product { gap: 20px; }
	.espalla-product-summary .product_title { font-size: 22px; }
	.espalla-product-summary p.price { font-size: 26px !important; }
	.espalla-product-details { gap: 16px; }
	.espalla-product-tabs { padding: 0 18px 20px; }
	.espalla-product-tabs .woocommerce-tabs ul.tabs { margin: 0 -18px 20px; padding-left: 18px; gap: 14px; overflow-x: auto; }
	.espalla-sticky-buy { padding: 10px 16px; gap: 12px; }
	.espalla-sticky-buy .jump-cta { padding: 12px 20px; font-size: 12px; white-space: nowrap; }

	.wc-block-cart, .wc-block-checkout { padding: 16px 16px 40px; }
	.woocommerce-order { padding: 0 16px 40px; }
	.woocommerce-order-overview { grid-template-columns: minmax(0, 1fr) !important; }

	.wc-block-components-checkout-step__title,
	.wc-block-components-panel .wc-block-components-panel__button,
	.wc-block-components-order-summary__button-text {
		font-size: 18px !important;
	}
	.wc-block-components-text-input label,
	.wc-block-components-address-form label {
		font-size: 12px !important;
	}

	/* La tabla del carrito ya trae su propia tarjeta móvil nativa de
	   WooCommerce Blocks (imagen | producto+cantidad | precio arriba a
	   la derecha, vía @container en cart.css) — antes no se activaba
	   por falta de container-type en un ancestro (ver .wc-block-cart
	   más abajo), lo que dejaba la columna de precio en ancho 0. Ya
	   activa, no hace falta reconstruir la tarjeta a mano.
	   .wc-block-cart-items sigue siendo un <table>: con table-layout
	   auto (default) la tabla ignora el ancho del contenedor y crece
	   según el contenido de sus columnas — a 375px eso hacía que la
	   columna de precio se saliera de la tarjeta y de la pantalla.
	   table-layout:fixed obliga a la tabla a respetar el ancho
	   disponible en vez de desbordarse. */
	.wc-block-cart-items { table-layout: fixed; }
}

/* ===================================================================
   VISOR DE MEDIOS DE PRODUCTO — pieza compartida por las 5 fichas de
   producto a medida (template-parts/product-media-viewer.php +
   assets/js/product-media-viewer.js). Un solo marco: la foto activa o
   el video, nunca los dos apilados. Miniaturas incluyen el video con
   su insignia de play. object-fit:contain para no recortar nada.
   =================================================================== */
.espalla-media-viewer { display: block; }
.espalla-media-main {
	position: relative;
	aspect-ratio: 4 / 5;
	border-radius: 20px;
	border: 1px solid var(--border);
	overflow: hidden;
	background: var(--surface);
}
.espalla-media-main img,
.espalla-media-main video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #fff;
	display: block;
}
.espalla-media-main [hidden] { display: none !important; }

.espalla-media-thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.espalla-media-thumb {
	position: relative;
	padding: 0;
	border: 1px solid var(--border);
	border-radius: 12px;
	overflow: hidden;
	background: var(--surface);
	cursor: pointer;
	width: 72px;
	height: 72px;
	flex: none;
	transition: border-color 150ms ease;
}
.espalla-media-thumb:hover { border-color: var(--ink-3); }
.espalla-media-thumb.is-active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.espalla-media-thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.espalla-media-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; }
.espalla-media-play-badge {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(36, 31, 26, .38);
	color: #fff;
}

@media (max-width: 600px) {
	.espalla-media-main { aspect-ratio: 1 / 1; }
}

/* ===================================================================
   COMPARADOR ANTES/DESPUÉS — pieza compartida por las 5 fichas
   (template-parts/product-before-after.php +
   assets/js/product-before-after.js). No se pinta si al producto le
   faltan las fotos reales — ver el propio template-part.
   =================================================================== */
/* Sin max-width/padding propios a propósito: hereda el ancho del
   .X-wrap de cada ficha (1160px) — no un .espalla-section aparte, que
   duplicaría el padding lateral por quedar anidado. */
.espalla-before-after-section { padding: 52px 0; }
.espalla-compare-intro { text-align: center; max-width: 560px; margin: 0 auto 32px; }
.espalla-compare-intro .espalla-eyebrow {
	font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
}
.espalla-compare-intro h2 { font-family: var(--font-heading); font-size: 32px; font-weight: 600; margin: 8px 0 12px; color: var(--ink); }
.espalla-compare-intro p { font-size: 15px; color: var(--ink-2); margin: 0; }

.espalla-compare {
	max-width: 820px;
	margin: 0 auto;
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: 20px;
	border: 1px solid var(--border);
	overflow: hidden;
	background: var(--surface);
	user-select: none;
	cursor: ew-resize;
}
.espalla-compare-img {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.espalla-compare-tag {
	position: absolute; top: 14px; font-size: 11.5px; font-weight: 700; color: #fff; padding: 5px 12px; border-radius: 20px;
}
.espalla-compare-tag.before { left: 14px; background: var(--ink); }
.espalla-compare-tag.after { right: 14px; background: var(--accent); }
.espalla-compare-line {
	position: absolute; top: 0; bottom: 0; width: 4px; background: #fff;
	box-shadow: 0 0 0 1px rgba(36, 31, 26, .18); transform: translateX(-50%); pointer-events: none;
}
.espalla-compare-handle {
	position: absolute; top: 50%; width: 52px; height: 52px; border-radius: 50%; background: #fff;
	box-shadow: 0 6px 18px rgba(36, 31, 26, .28); transform: translate(-50%, -50%);
	display: flex; align-items: center; justify-content: center; gap: 2px; pointer-events: none;
}
.espalla-compare-range {
	position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0;
}
.espalla-compare-disclaimer {
	max-width: 820px;
	margin: 14px auto 0;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ink-2);
	text-align: center;
	justify-content: center;
}
.espalla-compare-disclaimer svg { flex: none; color: var(--ink-3); }