/*
Theme Name: Emporio Nacional
Theme URI: https://emporionacional.cl
Author: Unibit
Author URI: https://unibit.cl
Description: Tema de bloques (FSE) a medida para Emporio Nacional — regalos corporativos gourmet. Design tokens en theme.json, bloques nativos con render dinámico en PHP.
Version: 0.1.0
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: emporio-nacional
*/

/* Los estilos globales viven en theme.json (design tokens).
   Aquí solo reglas que theme.json no puede expresar. */

/* Desplazamiento suave hacia anclas (los CTA que apuntan a #cotizar);
   la regla de prefers-reduced-motion más abajo lo desactiva si corresponde */
html {
	scroll-behavior: smooth;
}

/* Estados de foco visibles y consistentes en toda la interfaz */
:where(a, button, input, textarea, select, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* Respetar la preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Transición sobria por defecto en enlaces y botones */
a,
.wp-element-button {
	transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

/* Botón: hover al verde profundo */
.wp-element-button:hover,
.wp-block-button__link:hover {
	background-color: var(--wp--preset--color--primary-deep);
	color: var(--wp--preset--color--base);
}

/* Sin margen entre las zonas raíz de la plantilla (header, main, footer):
   WordPress les aplica el blockGap global como margin-block-start */
body .wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* Menú principal: los ítems se reparten automáticamente a lo ancho de la barra,
   con espaciado uniforme según su cantidad y tamaño (solo en escritorio) */
@media (min-width: 782px) {
	.en-nav {
		width: 100%;
	}

	.en-nav .wp-block-navigation__container {
		width: 100%;
		justify-content: space-evenly;
	}
}

/* Menú principal: subrayado blanco que crece al pasar el cursor, se retrae
   al salir, y queda fijo en el ítem de la página activa */
.en-nav .wp-block-navigation-item__content {
	position: relative;
	padding-bottom: 0.2rem;
}

.en-nav .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: var(--wp--preset--color--base);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 240ms ease;
}

.en-nav .wp-block-navigation-item__content:hover::after,
.en-nav .wp-block-navigation-item__content:focus-visible::after,
.en-nav .wp-block-navigation-item__content[aria-current="page"]::after,
.en-nav .current-menu-item > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

/* Contenedor del formulario de contacto: estilo base para el HTML
   que el usuario pega en el bloque HTML personalizado */
.en-form-contenedor {
	max-width: 720px;
	margin: 0 auto;
}

.en-form-contenedor .en-form-pendiente {
	padding: 3rem 1.5rem;
	border: 1px dashed var(--wp--preset--color--accent, #c8a24a);
	border-radius: 6px;
	background: var(--wp--preset--color--base, #fff);
	text-align: center;
	color: var(--wp--preset--color--contrast, #333);
	font-size: 0.9375rem;
}

/* Botón de cotización del header: más contenido que el botón estándar */
.en-btn-header .wp-block-button__link {
	padding: 0.6rem 1.35rem;
	font-size: 0.9375rem;
}

@media (max-width: 781px) {
	.en-btn-header .wp-block-button__link {
		padding: 0.45rem 0.95rem;
		font-size: 0.875rem;
	}
}

/* ============================================================
   Encabezado principal: siempre sólido (fondo blanco) y sticky
   en todas las páginas. No hay modo transparente sobre el hero.
   ============================================================ */

/* El wrapper del template part es muy corto y confina al sticky.
   Con display:contents el encabezado se pega respecto a toda la página. */
.wp-block-template-part:has(> .en-header-glass) {
	display: contents;
}

.en-header-glass {
	position: sticky;
	top: 0;
	left: 0;
	right: 0;
	z-index: 90;
	background: var(--wp--preset--color--base, #fff);
	box-shadow: 0 2px 14px rgba(30, 40, 28, 0.1);
}

body.admin-bar .en-header-glass {
	top: 32px;
}

.en-header-glass .en-glass-fila {
	padding-top: 0.4rem;
	padding-bottom: 0.4rem;
}

/* Logo del header: sobre fondo blanco siempre se usa la versión oscura.
   La versión clara queda en el markup pero oculta. */
.en-glass-logo {
	position: relative;
	display: inline-block;
	line-height: 0;
}

.en-glass-logo img {
	display: block;
	width: 205px;
	height: auto;
}

.en-glass-logo .en-glass-logo__claro {
	display: none;
}

/* Menú: oscuro sobre blanco, con subrayado animado. */
.en-nav2 .wp-block-navigation-item__content {
	position: relative;
	padding-bottom: 0.2rem;
	color: var(--wp--preset--color--contrast);
	transition: color 240ms ease;
}

.en-nav2 .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--primary);
}

.en-nav2 .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: var(--wp--preset--color--primary);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 240ms ease, background-color 420ms cubic-bezier(0.4, 0, 0.2, 1);
}

.en-nav2 .wp-block-navigation-item__content:hover::after,
.en-nav2 .wp-block-navigation-item__content:focus-visible::after,
.en-nav2 .wp-block-navigation-item__content.en-activo::after,
.en-nav2 .wp-block-navigation-item__content[aria-current="page"]::after,
.en-nav2 .current-menu-item > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

/* El chevron del submenú acompaña al texto (todos los tamaños) */
.en-nav2 .wp-block-navigation-submenu .wp-block-navigation__submenu-icon {
	margin-left: 0.35rem;
}

/* Menú de escritorio compacto y en una sola línea (nunca apilado). */
@media (min-width: 1025px) {
	.en-nav2 .wp-block-navigation__container {
		flex-wrap: nowrap;
	}

	.en-nav2 .wp-block-navigation-item__content {
		font-size: 1.05rem;
		/* Trazo fino con algo de aire entre letras: se lee más premium que el
		   seminegrita, y compensa la pérdida de peso a este tamaño. */
		letter-spacing: 0.03em;
		white-space: nowrap;
	}
}

/* Hasta 1024px se usa la hamburguesa (evita que el menú se apile sobre el
   hero en tablets o con zoom). El overlay nativo maneja los submenús. */
@media (max-width: 1024px) {
	.en-header-glass .wp-block-navigation__responsive-container-open {
		display: flex !important;
	}

	.en-header-glass .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}
}

/* Submenús desplegables del header (Soluciones, Ocasiones): solo escritorio.
   En móvil/tablet se usa el overlay nativo del bloque (texto claro sobre verde). */
@media (min-width: 1025px) {
	.en-nav2 .wp-block-navigation__submenu-container {
		min-width: 250px;
		padding: 0.4rem;
		border: 1px solid rgba(30, 40, 28, 0.08) !important;
		border-radius: 12px;
		background-color: var(--wp--preset--color--base, #fff) !important;
		color: var(--wp--preset--color--contrast, #333) !important;
		box-shadow: 0 18px 44px rgba(20, 40, 20, 0.18);
	}

	.en-nav2 .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		display: block;
		font-size: 0.95rem;
		font-weight: 400;
		letter-spacing: 0.02em;
		padding: 0.62rem 0.85rem;
		border-radius: 8px;
		color: var(--wp--preset--color--contrast, #333) !important;
		white-space: nowrap;
		transition: background-color 160ms ease, color 160ms ease;
	}

	.en-nav2 .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
		display: none;
	}

	.en-nav2 .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
	.en-nav2 .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
		background: var(--wp--preset--color--cream, #f7f2e4);
		color: var(--wp--preset--color--primary-deep, #1e4a22) !important;
	}
}

/* Botón verde del header, legible en ambos estados */
.en-btn-glass .wp-block-button__link {
	padding: 0.55rem 1.15rem;
	font-size: 0.9375rem;
	white-space: nowrap;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.en-btn-glass .wp-block-button__link:hover {
	background: var(--wp--preset--color--primary-deep);
	color: var(--wp--preset--color--base);
}

/* El hamburguesa del menú móvil: oscuro sobre el header blanco */
.en-header-glass .wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--contrast);
}

@media (max-width: 781px) {
	.en-glass-logo img {
		width: 165px;
	}
}

/* Teléfonos: la fila del header no envuelve, así que hay que hacerla caber.
   El ícono de WhatsApp se omite (ya existe el botón flotante). */
@media (max-width: 600px) {
	.en-glass-logo img {
		width: 138px;
	}

	.en-header-glass .en-wsp-header {
		display: none;
	}

	.en-header-glass .en-btn-glass .wp-block-button__link {
		padding: 0.5rem 0.8rem;
		font-size: 0.85rem;
	}
}

/* Ícono de WhatsApp del header: proporción del botón, con leve realce al pasar el cursor */
.en-wsp-header {
	margin: 0;
}

.en-wsp-header .wp-social-link a {
	padding: 0.4rem;
}

.en-wsp-header .wp-social-link {
	transition: transform 160ms ease;
}

.en-wsp-header .wp-social-link:hover {
	transform: scale(1.08);
}

/* Datos de contacto del header: lista compacta junto al botón de cotización */
.en-header-contacto p {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.4;
}

/* En móvil el header queda limpio: solo logo y botón (el contacto vive en el footer) */
@media (max-width: 781px) {
	.en-header-contacto {
		display: none;
	}

	/* Logo más pequeño para que quepa junto al botón y WhatsApp en la misma fila */
	.en-logo-header img {
		width: 165px !important;
		height: auto;
	}

	.en-logo-header {
		margin: 0;
	}

	.en-wsp-header .wp-social-link a {
		padding: 0.3rem;
	}
}

/* Accesibilidad: contenido solo para lectores de pantalla (incluye el H1 SEO
   del template de landing y textos de botones en modo solo-icono). */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	position: absolute !important;
	word-wrap: normal !important;
}

/* ------------------------------------------------------------------ */
/* Footer premium (multi-columna, editable desde el Editor de sitio)  */
/* ------------------------------------------------------------------ */
.en-footer .wp-block-columns { align-items: center; }

/* Encabezados de columna: etiqueta dorada en versalitas */
.en-footer__titulo {
	margin: 0 0 1.1rem;
	color: var(--wp--preset--color--accent, #c8a24a) !important;
	font-family: var(--wp--preset--font-family--heading, Jost, sans-serif);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* Listas de menú del footer */
.en-footer__lista,
.en-footer__contacto {
	list-style: none;
	margin: 0;
	padding: 0;
}

.en-footer__lista li,
.en-footer__contacto li {
	line-height: 1.45;
}

.en-footer__lista a {
	color: rgba(255, 255, 255, 0.82);
	text-decoration: none;
	transition: color 160ms ease;
}

.en-footer__lista a:hover {
	color: var(--wp--preset--color--accent, #c8a24a);
}

/* Sección Hablemos: divisor a la izquierda en escritorio */
.en-footer__hablemos {
	border-left: 1px solid rgba(255, 255, 255, 0.14);
	padding-left: clamp(1.25rem, 2.5vw, 2.25rem);
}

/* Contacto con íconos (por CSS, para que el texto siga siendo editable) */
.en-footer__contacto li {
	position: relative;
	padding-left: 1.9rem;
	color: rgba(255, 255, 255, 0.82);
}

.en-footer__contacto li a { color: rgba(255, 255, 255, 0.82); text-decoration: none; transition: color 160ms ease; }
.en-footer__contacto li a:hover { color: var(--wp--preset--color--accent, #c8a24a); }

.en-footer__contacto li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.12em;
	width: 1.1rem;
	height: 1.1rem;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	opacity: 0.9;
}

.en-footer .en-c-tel::before  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E"); }
.en-footer .en-c-mail::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E"); }
.en-footer .en-c-pin::before  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); }
.en-footer .en-c-hora::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v5l3 2'/%3E%3C/svg%3E"); }

/* Botón WhatsApp del footer */
.en-footer__wa { margin-top: 0.4rem; }
.en-footer__wa .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.7rem 1.35rem;
	border-radius: 6px;
	background: #25d366;
	color: #08351a;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
}
.en-footer__wa .wp-block-button__link::before {
	content: "";
	width: 1.15rem;
	height: 1.15rem;
	background: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2308351a'%3E%3Cpath d='M17.5 14.4c-.3-.15-1.77-.87-2.04-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.17-.17.2-.35.22-.65.07-.3-.15-1.26-.46-2.4-1.48-.89-.79-1.49-1.77-1.66-2.07-.17-.3-.02-.46.13-.61.14-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.07-.15-.67-1.62-.92-2.22-.24-.58-.49-.5-.67-.51h-.57c-.2 0-.52.07-.8.37-.27.3-1.04 1.02-1.04 2.49 0 1.47 1.07 2.89 1.22 3.09.15.2 2.1 3.2 5.08 4.49.71.31 1.26.49 1.69.62.71.23 1.36.2 1.87.12.57-.09 1.77-.72 2.02-1.42.25-.7.25-1.29.17-1.42-.07-.13-.27-.2-.57-.35zM12.05 21.5a9.42 9.42 0 0 1-4.8-1.32l-.34-.2-3.57.94.95-3.48-.22-.36a9.42 9.42 0 0 1-1.44-5.02c0-5.2 4.24-9.43 9.45-9.43 2.52 0 4.9.99 6.68 2.77a9.38 9.38 0 0 1 2.76 6.68c0 5.2-4.24 9.44-9.45 9.44zm8.03-17.47A11.34 11.34 0 0 0 12.05.5C5.8.5.73 5.57.73 11.8c0 2 .52 3.95 1.52 5.67L.63 23.5l6.18-1.62a11.35 11.35 0 0 0 5.24 1.33c6.24 0 11.32-5.07 11.32-11.3 0-3.02-1.18-5.86-3.3-8z'/%3E%3C/svg%3E");
}
.en-footer__wa .wp-block-button__link:hover { background: #1fbe5a; color: #08351a; }

/* Barra inferior */
.en-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.en-footer__bottom p {
	margin: 0;
	color: rgba(255, 255, 255, 0.6);
}
.en-footer__bottom a { color: rgba(255, 255, 255, 0.8); }

/* Móvil: sin divisor en Hablemos, columnas apiladas */
@media (max-width: 781px) {
	.en-footer__hablemos {
		border-left: 0;
		padding-left: 0;
	}
}

/* Footer: más aire entre ítems de menú (evita que se vean pegados) */
.en-footer__lista {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}
.en-footer__lista li { line-height: 1.3; }

/* Footer: redes sociales con más protagonismo (círculos grandes) */
.en-footer .wp-block-social-links {
	gap: 0.75rem;
	margin-top: 0.5rem;
}
.en-footer .wp-block-social-links .wp-block-social-link {
	width: 2.6rem;
	height: 2.6rem;
	margin: 0;
	padding: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	transition: background-color 160ms ease, transform 160ms ease;
}
.en-footer .wp-block-social-links .wp-block-social-link:hover {
	background: var(--wp--preset--color--accent, #c8a24a);
	transform: translateY(-2px);
}
.en-footer .wp-block-social-links .wp-block-social-link-anchor {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 0;
}
.en-footer .wp-block-social-links .wp-block-social-link svg {
	width: 1.45rem;
	height: 1.45rem;
	fill: #fff;
}
.en-footer .wp-block-social-links .wp-block-social-link:hover svg {
	fill: var(--wp--preset--color--primary-deep, #1e4a22);
}