/* Tipografía y elementos base. */

body {
	--global-body-font-family: var(--pora-sans);
	--global-heading-font-family: var(--pora-display);
	font-family: var(--pora-sans);
	background: var(--pora-crema);
	color: var(--pora-negro);
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
.entry-title,
.pora-display {
	font-family: var(--pora-display);
	font-weight: 400;
	text-transform: uppercase;
	line-height: 0.92;
	letter-spacing: 0.005em;
	color: inherit;
}

h1,
.entry-hero h1 {
	font-size: var(--pora-t-xl);
}

h2 {
	font-size: var(--pora-t-l);
}

h3,
h4,
h5,
h6 {
	font-family: var(--pora-sans);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.15;
	color: inherit;
}

/* Palabra en serif itálica dentro de un título: <em> */
h1 em,
h2 em,
.pora-display em {
	font-family: var(--pora-serif);
	font-style: italic;
	text-transform: none;
	letter-spacing: -0.02em;
	font-size: 1.08em;
}

.pora-mega {
	font-size: var(--pora-t-mega);
	line-height: 0.85;
}

.pora-kicker {
	font-family: var(--pora-sans);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* Links de texto: negros con subrayado, el acento aparece al pasar */
.entry-content :is(p, li:not(.product), td) > a:not(.button):not(.wp-block-button__link):not(.wp-element-button) {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 0.18em;
}

.entry-content :is(p, li:not(.product), td) > a:not(.button):not(.wp-block-button__link):not(.wp-element-button):hover {
	background: var(--pora-acento);
	color: var(--pora-sobre-acento);
	text-decoration-color: transparent;
}

::selection {
	background: var(--pora-lima);
	color: var(--pora-negro);
}

:focus-visible {
	outline: 2.5px solid var(--pora-azul);
	outline-offset: 3px;
}

/* Secciones alternadas negro / crema / acento (clases para usar en bloques) */
.pora-negro {
	background: var(--pora-negro);
	color: var(--pora-crema);
}

.pora-crema {
	background: var(--pora-crema);
	color: var(--pora-negro);
}

.pora-rosa { background: var(--pora-rosa); color: var(--pora-negro); }
.pora-azul { background: var(--pora-azul); color: #fff; }
.pora-lima { background: var(--pora-lima); color: var(--pora-negro); }

/* Header y footer */
.site-header-row-container-inner,
#masthead .site-main-header-wrap .site-header-row-container-inner {
	background: var(--pora-crema);
	border-bottom: var(--pora-borde);
}

.site-branding .site-title {
	font-family: var(--pora-display);
	font-weight: 400;
	font-size: 2rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--pora-negro);
}

.main-navigation .primary-menu-container > ul > li.menu-item > a {
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pora-negro);
}

.main-navigation .primary-menu-container > ul > li.menu-item > a:hover,
.main-navigation .primary-menu-container > ul > li.menu-item.current-menu-item > a {
	color: var(--pora-negro);
	box-shadow: inset 0 -0.55em 0 var(--pora-acento);
}

/* Menú del celular con el mismo negro del sitio */
#mobile-drawer .drawer-inner {
	background: var(--pora-negro);
}

/* Página 404 y resultados de búsqueda: sin caja con sombra */
.error404 .content-bg,
.error404 .entry.content-bg,
.search .content-bg {
	background: transparent;
	box-shadow: none;
}

/* Formularios de ingreso y registro con el borde del sitio */
.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.lost_reset_password,
.woocommerce form.track_order {
	border: var(--pora-borde);
	border-radius: 0;
	background: var(--pora-crema-clara);
}

.woocommerce .woocommerce-form-row input.input-text,
.woocommerce form.track_order input.input-text {
	background: #fff;
	border: var(--pora-borde);
	border-radius: 0;
}

/* Acceso a la cuenta en el header */
.pora-cuenta,
.site-header .header-html a.pora-cuenta,
.site-header .mobile-html a.pora-cuenta {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4em 0.5em;
	color: var(--pora-negro);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
}

.pora-cuenta:hover {
	color: var(--pora-rosa);
}

/* Solo el ícono: el texto queda para lectores de pantalla */
.pora-cuenta__texto {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

/* Carrito del header: ícono negro y contador en rosa */
.header-cart-wrap .header-cart-button,
.header-mobile-cart-wrap .header-cart-button {
	color: var(--pora-negro);
	padding: 0.4em 0.5em;
}

.header-cart-wrap .header-cart-button .kadence-svg-iconset,
.header-mobile-cart-wrap .header-cart-button .kadence-svg-iconset {
	font-size: 1.35rem;
}

.header-cart-wrap .header-cart-button .header-cart-total,
.header-mobile-cart-wrap .header-cart-button .header-cart-total {
	background: var(--pora-rosa);
	color: var(--pora-negro);
	border: var(--pora-borde);
	font-size: 0.7rem;
	font-weight: 700;
	height: 1.9em;
	min-width: 1.9em;
	line-height: 1.7em;
}

.header-cart-wrap .header-cart-button:hover .header-cart-total,
.header-mobile-cart-wrap .header-cart-button:hover .header-cart-total {
	background: var(--pora-lima);
}

.site-footer,
.site-footer .site-footer-row-container-inner {
	background: var(--pora-negro);
	color: var(--pora-crema);
}

.site-footer a {
	color: var(--pora-crema);
}

.site-footer a:hover {
	color: var(--pora-lima);
}
