/* ==========================================================================
   Matati Crafts — estilos globales
   Tokens, fuentes, tipografía base, botones, cabecera y pie.
   ========================================================================== */

/* -------------------------------------------------------------------------
 * Fuentes (alojadas en el tema)
 * ---------------------------------------------------------------------- */
@font-face {
	font-family: "Baloo 2";
	font-style: normal;
	font-weight: 600 800;
	font-display: swap;
	src: url("../fonts/baloo2-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Baloo 2";
	font-style: normal;
	font-weight: 600 800;
	font-display: swap;
	src: url("../fonts/baloo2-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Mali";
	font-style: italic;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/mali-600i-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Mali";
	font-style: italic;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/mali-600i-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Mali recta (sin cursiva): antetítulos de la página Matati Crafts */
@font-face {
	font-family: "Mali";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/mali-600-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Mali";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/mali-600-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Urbanist";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("../fonts/urbanist-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Urbanist";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("../fonts/urbanist-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* -------------------------------------------------------------------------
 * Tokens
 * ---------------------------------------------------------------------- */
:root {
	/* Colores de marca: 3 principales + tinta, crema y blanco */
	--rosa: #EF82AD;
	--turquesa: #37AD9E;
	--verde: #88AD35;
	--tinta: #1E3A36;
	--tinta-oscura: #182E2B; /* tinta 20 % más oscura (pie) */
	--crema: #FBF7ED;
	--blanco: #FFFFFF;
	--velo: rgba(30, 58, 54, .6);
	--linea-suave: rgba(30, 58, 54, .18); /* separadores finos dentro de tarjetas */
	--whatsapp: #25D366; /* verde oficial de WhatsApp (solo el botón flotante) */

	/* Estados: no son colores de marca, son el mensaje */
	--c-error: #B3261E;
	--bg-error: #FBEDEC;
	--c-exito: #2E7D32;
	--bg-exito: #EDF6EE;

	/* Tipografías */
	--fuente-titulo: "Baloo 2", sans-serif;
	--fuente-acento: "Mali", cursive;
	--fuente-texto: "Urbanist", sans-serif;

	/* Tamaños de texto */
	--txt-h1: clamp(64px, 10vw, 124px);
	--txt-h2: clamp(35px, calc(5vw - 5px), 59px);
	--txt-h3: 26px;
	--txt-antetitulo: 22px;
	--txt-grande: 20px;
	--txt-base: 18px;
	--txt-mini: 13px;

	/* Anchos */
	--maxw: 1200px;
	--maxw-angosto: 900px;
	--gutter: 24px;
	--espacio-seccion: 120px;

	/* Líneas: la tinta es el trazo; en fondos oscuros se cambia --linea */
	--linea: var(--tinta);
	--grosor: 2px;
	--grosor-grueso: 3px;
	--borde: var(--grosor) solid var(--linea);
	--borde-grueso: var(--grosor-grueso) solid var(--linea);
	--borde-punteado: var(--grosor) dashed var(--linea);

	/* Campos de formulario (estándar: el del checkout). El buscador del header
	   tiene el suyo propio en .site-header__campo. */
	--campo-alto: 50px;
	--campo-borde: 1px solid rgba(30, 58, 54, .35);
	--campo-radio: 12px;
	--campo-foco: 0 0 0 1px var(--turquesa); /* + border-color turquesa */

	/* Formas orgánicas */
	--pastilla: 999px;
	--forma-a: 48px 20px 48px 20px;
	--forma-b: 20px 48px 20px 48px;
	--forma-c: 56px 24px 56px 24px;
	--forma-d: 24px 56px 24px 56px;
	--blob-1: 58% 42% 55% 45% / 45% 55% 45% 55%;
	--blob-2: 42% 58% 45% 55% / 55% 45% 55% 45%;
	--blob-3: 48% 52% 44% 56% / 56% 46% 54% 44%;
	--blob-4: 44% 56% 50% 50% / 52% 46% 54% 48%;
	--blob-5: 52% 48% 46% 54% / 48% 54% 46% 52%;
	--curva-seccion: 80px / 60px;

	/* Sombras planas (desplazadas, sin difuminado) */
	--sombra-foto: 10px 12px 0 var(--tinta);
	--sombra-tarjeta: 12px 14px 0 var(--turquesa);
	--sombra-flotante: 0 8px 24px rgba(30, 58, 54, .18);

	/* Botones */
	--btn-fondo: var(--rosa);
	--btn-pad: 18px 30px;
	--btn-txt: 17px;
	--btn-alto-sombra: 5px;

	/* Íconos en SVG embebido (el color va en la URL: %23 = #) */
	--tic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
	--ojo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E3A36' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
	--copiar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E3A36' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='12' height='12' rx='3'/%3E%3Cpath d='M5 15V6a3 3 0 0 1 3-3h9'/%3E%3C/svg%3E");
	--flecha-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E3A36' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");

	/* Movimiento */
	--rapido: .15s;
	--suave: .25s;
}

/* -------------------------------------------------------------------------
 * Base
 * ---------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* Al saltar a un ancla o desplazarse a un elemento (scrollIntoView), deja libre
   el alto del header fijo + la barra de admin + aire. --alto-header y --tope-header
   (lo que ocupa la barra de admin fija, 0 si no está o no es fija) los mide main.js. */
html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--alto-header, 90px) + var(--tope-header, 0px) + 20px);
}

body {
	margin: 0;
	font-family: var(--fuente-texto);
	font-size: var(--txt-base);
	line-height: 1.5;
	color: var(--tinta);
	background: var(--crema);
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

img, video { max-width: 100%; height: auto; display: block; }

/* Recorta lo que sobresale a propósito (cinta rotada, manchas) sin generar scroll horizontal */
main {
	display: flow-root;
	overflow: clip; /* clip y no hidden: hidden rompe los position: sticky de adentro */
}

.wrapper {
	width: 100%;
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
 * Tipografía base (en la etiqueta; cada elemento lleva además su clase)
 * ---------------------------------------------------------------------- */
h1, h2, h3 {
	margin: 0;
	font-family: var(--fuente-titulo);
	font-weight: 800;
	text-wrap: balance;
}

h1 {
	font-size: var(--txt-h1);
	line-height: .82;
	letter-spacing: -.02em;
}

h2 {
	font-size: var(--txt-h2);
	line-height: .95;
	letter-spacing: -.01em;
}

h3 {
	font-size: var(--txt-h3);
	font-weight: 700;
	line-height: 1.05;
}

p {
	margin: 0;
	text-wrap: pretty;
}

/* Texto de acento manuscrito (antetítulos, notas) */
.acento {
	font-family: var(--fuente-acento);
	font-style: italic;
	font-weight: 600;
}

/* -------------------------------------------------------------------------
 * Enlaces
 * ---------------------------------------------------------------------- */
a {
	color: var(--tinta);
	font-weight: 700;
	text-decoration-color: var(--rosa);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
	transition: color var(--rapido);
}

a:hover { color: var(--turquesa); }

/* -------------------------------------------------------------------------
 * Botones: principal (relleno) y secundario (borde)
 * Los de WooCommerce se pintan como uno de los dos: button.button (enviar
 * un formulario) = principal; a.button (ir a otra pantalla) = secundario.
 * ---------------------------------------------------------------------- */
.btn-primario,
.btn-secundario,
.woocommerce .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--fuente-texto);
	font-size: var(--btn-txt);
	font-weight: 800;
	letter-spacing: .03em;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	color: var(--tinta);
	border: var(--borde);
	border-radius: var(--pastilla);
	padding: var(--btn-pad);
	cursor: pointer;
	transition: transform var(--rapido), box-shadow var(--rapido), background var(--rapido);
}

.btn-primario,
.woocommerce button.button {
	background: var(--btn-fondo);
	box-shadow: 0 var(--btn-alto-sombra) 0 var(--linea);
}

.btn-primario:hover,
.woocommerce button.button:hover {
	color: var(--tinta);
	transform: translateY(-3px);
	box-shadow: 0 calc(var(--btn-alto-sombra) + 3px) 0 var(--linea);
}

.btn-primario:active,
.woocommerce button.button:active {
	transform: translateY(3px);
	box-shadow: 0 calc(var(--btn-alto-sombra) - 3px) 0 var(--linea);
}

.btn-secundario,
.woocommerce a.button {
	background: transparent;
}

.btn-secundario:hover,
.woocommerce a.button:hover {
	color: var(--tinta);
	background: var(--blanco);
}

/* -------------------------------------------------------------------------
 * Etiquetas (pastillas informativas, no clicables)
 * ---------------------------------------------------------------------- */
.etiqueta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border: var(--borde);
	border-radius: var(--pastilla);
	padding: 6px 14px;
	font-weight: 700;
}

/* -------------------------------------------------------------------------
 * Cabecera
 * ---------------------------------------------------------------------- */
/* Sticky solo al subir: main.js le pone .is-oculto mientras se baja */
.site-header {
	position: sticky;
	top: var(--tope-header, 0px);
	z-index: 40;
	background: var(--crema);
	border-bottom: var(--borde);
	transition: transform .3s ease;
}

.site-header.is-oculto { transform: translateY(calc(-100% - var(--tope-header, 0px))); }

.site-header__barra {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-block: 12px;
}

.site-header__logo img { height: 60px; width: auto; }

.site-header__nav {
	display: flex;
	align-items: center;
	gap: 24px;
}

.site-header__menu {
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-header__menu a {
	font-size: var(--txt-base);
	font-weight: 600;
	text-decoration: none;
}

.site-header__cta {
	--btn-pad: 10px 20px;
	--btn-txt: 14px;
	--btn-alto-sombra: 3px;
	white-space: nowrap;
}

/* Buscador: siempre a la vista y pequeño (como el de thewoobles.com) */
.site-header__buscador {
	position: relative;
	width: 200px;
}

.site-header__campo {
	width: 100%;
	height: 40px;
	padding: 0 42px 0 18px;
	font: inherit;
	font-size: 15px;
	color: var(--tinta);
	background: var(--blanco);
	border: var(--borde);
	border-radius: var(--pastilla);
}

.site-header__campo::-webkit-search-cancel-button { display: none; }

.site-header__lupa {
	position: absolute;
	top: 50%;
	right: 6px;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	color: var(--tinta);
	background: none;
	border: 0;
	cursor: pointer;
	transform: translateY(-50%);
}

.site-header__lupa .icono {
	width: 20px;
	height: 20px;
}

/* Moneda: S/ | US$ (inc/monedas.php) */
.selector-moneda {
	display: flex;
	padding: 3px;
	border: var(--borde);
	border-radius: var(--pastilla);
}

.selector-moneda__opcion {
	padding: 5px 10px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	border-radius: var(--pastilla);
}

.selector-moneda__opcion[aria-current] {
	color: var(--crema);
	background: var(--tinta);
}

.selector-moneda__opcion[aria-current]:hover { color: var(--crema); }

/* Mi cuenta y carrito (con la cantidad en una burbuja) */
.site-header__icono {
	position: relative;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	color: var(--tinta);
	border-radius: 50%;
	transition: background var(--rapido);
}

.site-header__icono:hover {
	color: var(--tinta);
	background: var(--blanco);
}

.site-header__icono .icono {
	width: 26px;
	height: 26px;
}

/* Cuenta y carrito juntos, algo separados del buscador */
.site-header__icono + .site-header__icono { margin-left: -18px; }

.site-header__buscador + .site-header__icono { margin-left: -8px; }

.site-header__carrito-cantidad {
	position: absolute;
	top: 0;
	right: -2px;
	display: grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding-inline: 5px;
	font-size: 12px;
	font-weight: 800;
	line-height: 1;
	background: var(--rosa);
	border: var(--grosor) solid var(--crema);
	border-radius: var(--pastilla);
}

.site-header__carrito-cantidad[hidden] { display: none; }

/* Celular: botón del desplegable (menú + buscador) */
.site-header__toggle {
	display: none;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	color: var(--tinta);
	background: none;
	border: 0;
	cursor: pointer;
}

.site-header__toggle .icono {
	width: 28px;
	height: 28px;
}

.site-header__toggle-cerrar,
.site-header__toggle[aria-expanded="true"] .site-header__toggle-abrir { display: none; }

.site-header__toggle[aria-expanded="true"] .site-header__toggle-cerrar { display: block; }

.menu-movil {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	padding-block: 20px 12px;
	background: var(--crema);
	border-bottom: var(--borde);
}

.menu-movil[hidden] { display: none; }

.menu-movil .site-header__buscador { width: 100%; }

.menu-movil .site-header__campo { height: 48px; }

.menu-movil__lista {
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.menu-movil__lista a {
	display: block;
	padding-block: 14px;
	font-size: var(--txt-grande);
	text-decoration: none;
}

.menu-movil__lista li + li { border-top: var(--borde-punteado); }

@media (min-width: 861px) {
	.menu-movil { display: none; }
}

@media (max-width: 860px) {
	.site-header__menu,
	.site-header__nav > .site-header__buscador { display: none; }

	.site-header__toggle { display: grid; }
}

/* Celular: logo y botón más compactos para que entren en una línea */
@media (max-width: 767px) {
	.site-header__barra { padding-block: 10px; }

	.site-header__logo img { height: 44px; }

	.site-header__cta {
		--btn-pad: 9px 14px;
		--btn-txt: 13px;
	}

	.site-header__nav { gap: 12px; }

	.site-header__icono + .site-header__icono { margin-left: -8px; }

	/* 16px: con menos, el iPhone hace zoom al escribir */
	.site-header__campo { font-size: 16px; }
}
/* -------------------------------------------------------------------------
 * Pie
 * ---------------------------------------------------------------------- */
.site-footer {
	position: relative;
	color: var(--crema);
	background: var(--tinta-oscura);
	padding-block: 20px;
}

.site-footer__barra {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
}

.site-footer__nombre {
	font-family: var(--fuente-titulo);
	font-size: 22px;
	font-weight: 800;
}

.site-footer__texto {
	font-size: var(--txt-base);
	font-weight: 600;
	color: var(--crema);
}

.site-footer__texto:hover { color: var(--rosa); }

.site-footer__enlaces {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 24px;
}

/* Libro de reclamaciones: pastilla con ícono de libro abierto */
.site-footer__libro {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 16px;
	font-size: 15px;
	font-weight: 700;
	color: var(--crema);
	text-decoration: none;
	background: rgba(251, 247, 237, .12);
	border-radius: var(--pastilla);
	transition: background var(--rapido);
}

.site-footer__libro:hover {
	color: var(--crema);
	background: rgba(251, 247, 237, .22);
}

.site-footer__libro .icono {
	width: 20px;
	height: 20px;
}

/* -------------------------------------------------------------------------
 * Botón flotante de WhatsApp (todas las páginas)
 * ---------------------------------------------------------------------- */
.wsp-flotante {
	position: fixed;
	left: 20px;
	bottom: 20px;
	z-index: 50;
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	color: var(--blanco);
	background: var(--whatsapp);
	border: var(--borde-grueso);
	border-radius: 50%;
	box-shadow: 0 5px 0 var(--tinta);
	transition: transform var(--rapido), box-shadow var(--rapido);
}

.wsp-flotante:hover {
	color: var(--blanco);
	transform: translateY(-3px);
	box-shadow: 0 8px 0 var(--tinta);
}

.wsp-flotante:focus-visible {
	outline: var(--grosor-grueso) solid var(--rosa);
	outline-offset: 3px;
}

/* En celular la barra fija de la landing ocupa el ancho: el botón sube */
@media (max-width: 767px) {
	.wsp-flotante {
		left: 16px;
		bottom: 16px;
		width: 56px;
		height: 56px;
	}

	body:has(.barra:not([hidden])) .wsp-flotante { bottom: 92px; }

	/* Espacio al final del pie para que el botón no tape el enlace a Legales */
	.site-footer { padding-bottom: 88px; }
}

/* -------------------------------------------------------------------------
 * Movimiento reducido
 * ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}