/*
Theme Name: OZ Tema 4.0
Theme URI: https://example.com
Author: Tu nombre
Author URI: https://example.com
Description: Tema básico para WordPress, compatible con PHP 8.3.
Version: 4.0.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: oz-tema-2
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
*/

:root {
	--container: var(--OZ-Container-Mobile)}

html,
body,
body.customize-support {
	margin: 0;
	overflow-x: clip}

@media (min-width: 768px) {
	:root {
		--container: var(--OZ-Container-Tablet)}
}

@media (min-width: 992px) {
	:root {
		--container: var(--OZ-Container-Laptop)}
}

@media (min-width: 1200px) {
	:root {
		--container: var(--OZ-Container-PC)}
}

h1,
h2,
h3,
h4 {
	font-family: var(--OZ-Font-Headings);
	font-weight: 600}

a {
	color: var(--OZ-Color-3);
	text-decoration: none}

a:hover {
	text-decoration: underline}

/* ==========================================================================
   404 Error Page — Professional Design (MYG Brand)
   ========================================================================== */
body.error404 .site {
	width: 100%;
	max-width: none;
}

.error-404-page {
	min-height: 85vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(160deg, #3a4a57 0%, #324451 55%, #222d35 100%);
	position: relative;
	overflow: hidden;
	padding: 2rem 1rem;
}

/* Floating particles */
.error-particles {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.error-particle {
	position: absolute;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(226, 6, 19, 0.25);
	animation: particleFloat 8s ease-in-out infinite;
}

.error-particle:nth-child(1) { left: 10%; top: 20%; animation-delay: 0s; animation-duration: 7s; }
.error-particle:nth-child(2) { left: 80%; top: 15%; animation-delay: 1.5s; animation-duration: 9s; width: 4px; height: 4px; }
.error-particle:nth-child(3) { left: 25%; top: 70%; animation-delay: 3s; animation-duration: 6s; width: 8px; height: 8px; }
.error-particle:nth-child(4) { left: 70%; top: 80%; animation-delay: 2s; animation-duration: 10s; }
.error-particle:nth-child(5) { left: 50%; top: 10%; animation-delay: 4s; animation-duration: 8s; width: 5px; height: 5px; }
.error-particle:nth-child(6) { left: 90%; top: 50%; animation-delay: 1s; animation-duration: 7.5s; width: 3px; height: 3px; }

@keyframes particleFloat {
	0%, 100% { transform: translateY(0) translateX(0); opacity: 0.3; }
	25% { transform: translateY(-30px) translateX(15px); opacity: 0.8; }
	50% { transform: translateY(-15px) translateX(-10px); opacity: 0.5; }
	75% { transform: translateY(-40px) translateX(20px); opacity: 0.9; }
}

/* Wrapper card */
.error-404-wrapper {
	position: relative;
	z-index: 2;
	text-align: center;
	max-width: 560px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 20px;
	padding: 3rem 2.5rem;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	animation: cardFadeIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
	opacity: 0;
}

@keyframes cardFadeIn {
	from { opacity: 0; transform: translateY(30px) scale(0.97); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* SVG Illustration */
.error-illustration {
	margin: 0 auto 1.5rem;
	width: 160px;
	height: 160px;
}

.error-svg-main {
	width: 100%;
	height: 100%;
}

.error-ring {
	stroke: rgba(226, 6, 19, 0.3);
}

.error-ring--outer {
	animation: ringRotate 20s linear infinite;
	transform-origin: center;
}

.error-ring--inner {
	stroke: rgba(226, 6, 19, 0.15);
	animation: ringRotate 15s linear infinite reverse;
	transform-origin: center;
}

@keyframes ringRotate {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

.error-shield path,
.error-shield line {
	stroke: #e20613;
	animation: shieldPulse 3s ease-in-out infinite;
}

@keyframes shieldPulse {
	0%, 100% { opacity: 0.7; }
	50%      { opacity: 1; }
}

.error-dash {
	stroke: rgba(226, 6, 19, 0.2);
	animation: dashFade 4s ease-in-out infinite alternate;
}

/* Error code with glitch */
.error-code {
	font-family: var(--OZ-Font-Headings, 'Inter', sans-serif);
	font-size: clamp(5rem, 12vw, 8rem);
	font-weight: 800;
	letter-spacing: -0.04em;
	margin: 0;
	color: #ffffff;
	position: relative;
	text-shadow: 0 0 40px rgba(226, 6, 19, 0.15);
	animation: glitchText 4s ease-in-out infinite;
}

.error-code::before,
.error-code::after {
	content: attr(data-text);
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.error-code::before {
	color: #e20613;
	z-index: -1;
	animation: glitchBefore 4s ease-in-out infinite;
}

.error-code::after {
	color: #324451;
	z-index: -2;
	animation: glitchAfter 4s ease-in-out infinite;
}

@keyframes glitchText {
	0%, 90%, 100% { transform: none; }
	92% { transform: skewX(-2deg); }
	94% { transform: skewX(1deg); }
	96% { transform: skewX(-1deg); }
	98% { transform: skewX(0); }
}

@keyframes glitchBefore {
	0%, 90%, 100% { clip-path: inset(0); transform: none; }
	92% { clip-path: inset(20% 0 60% 0); transform: translateX(-4px); }
	94% { clip-path: inset(50% 0 20% 0); transform: translateX(3px); }
	96% { clip-path: inset(10% 0 70% 0); transform: translateX(-2px); }
}

@keyframes glitchAfter {
	0%, 90%, 100% { clip-path: inset(0); transform: none; }
	93% { clip-path: inset(60% 0 10% 0); transform: translateX(4px); }
	95% { clip-path: inset(30% 0 40% 0); transform: translateX(-3px); }
	97% { clip-path: inset(70% 0 5% 0); transform: translateX(2px); }
}

@keyframes dashFade {
	from { opacity: 0.15; }
	to   { opacity: 0.5; }
}

/* Title */
.error-title {
	font-family: var(--OZ-Font-Headings, 'Inter', sans-serif);
	font-size: clamp(1.25rem, 3vw, 1.75rem);
	font-weight: 600;
	color: #ffffff;
	margin: 0.75rem 0 0.5rem;
	letter-spacing: -0.02em;
}

/* Message */
.error-message {
	font-size: 0.95rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.55);
	margin: 0 auto 2rem;
	max-width: 420px;
}

/* Buttons container */
.error-buttons {
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
}

/* Button base */
.error-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.8rem 1.6rem;
	border-radius: 8px;
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
	transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
	            box-shadow 0.25s ease,
	            background-color 0.25s ease;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

.error-btn::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0) 70%);
	transform: translateX(-100%);
	transition: transform 0.6s ease;
}

.error-btn:hover::after {
	transform: translateX(100%);
}

.error-btn:hover {
	transform: translateY(-3px);
	text-decoration: none;
}

.error-btn:active {
	transform: translateY(-1px);
}

.error-btn__icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

/* Primary button — brand dark blue with gold border */
.error-btn--primary {
	background: rgba(255, 255, 255, 0.08);
	color: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.2);
}

.error-btn--primary:hover {
	background: rgba(255, 255, 255, 0.14);
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
	color: #ffffff;
}

/* Accent button — gold */
.error-btn--accent {
	background: #e20613;
	color: #ffffff;
	border: 1px solid #e20613;
}

.error-btn--accent:hover {
	background: #dfa212;
	box-shadow: 0 8px 30px rgba(226, 6, 19, 0.3);
	color: #ffffff;
}

/* Responsive */
@media (max-width: 480px) {
	.error-404-wrapper {
		padding: 2rem 1.5rem;
		border-radius: 16px;
	}

	.error-illustration {
		width: 120px;
		height: 120px;
	}

	.error-buttons {
		flex-direction: column;
		align-items: stretch;
	}

	.error-btn {
		justify-content: center;
	}
}


.oz-shop-banner {
	width: 100%;
	min-height: clamp(72px, 14vw, 180px);
	background-image: var(--OZ-Shop-Banner-Url);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat}

/* .site CONTIENE el contenido a 1440 por defecto (así el maquetador con secciones
   de ancho "por defecto" —p.ej. el formulario de Contacto— NO se estira feo, y el
   blog/entradas quedan legibles). Las páginas que SÍ deben ir a ancho completo se
   liberan aparte: la TIENDA (body.woocommerce .site, más abajo) y el INICIO
   (body.home, cuyo hero/bandas son full-width). Dentro del maquetador, cada
   sección controla su ancho (contenedor/tema/completo) con sus opciones nativas. */
.site {
	width: 100%;
	max-width: min(100%, var(--OZ-Container-PC));
	margin-inline: auto}

body.home .site {
	max-width: none}

@media (max-width: 1199px) {
	.site {
		max-width: min(100%, var(--OZ-Container-Laptop))}
}

@media (max-width: 991px) {
	.site {
		max-width: min(100%, var(--OZ-Container-Tablet))}
}

@media (max-width: 767px) {
	.site {
		max-width: min(100%, var(--OZ-Container-Mobile))}
}

.site-main {
	min-height: 50vh}

body.woocommerce,
body.woocommerce-page {
	background: #eef1f3}

body.woocommerce .site,
body.woocommerce-page .site,
body.woocommerce .site-main,
body.woocommerce-page .site-main {
	background: #eef1f3}

body.woocommerce .site,
body.woocommerce-page .site {
	width: 100%;
	max-width: none}







@media (min-width: 768px) {
	article.page:has(> .entry-content > .oz-pb-root) .oz-pb-root {
		--container: var(--OZ-Container-Tablet)}
}

@media (min-width: 992px) {
	article.page:has(> .entry-content > .oz-pb-root) .oz-pb-root {
		--container: var(--OZ-Container-Laptop)}
}

@media (min-width: 1200px) {
	article.page:has(> .entry-content > .oz-pb-root) .oz-pb-root {
		--container: var(--OZ-Container-PC)}
}


article.page:has(> .entry-content > .oz-pb-root) .ml-section:is(.ml-row-container, [data-ml-width-mode-mobile="container"]) > .ml-row-content {
	width: 100%;
	max-width: none}


.site-main--single {
	max-width: 100%}

.single-layout {
	display: flex;
	flex-direction: column;
	gap: 2rem}

@media (min-width: 992px) {
	.single-layout:has(.single-sidebar) {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
		gap: 2.5rem;
		align-items: start}
}

.single-layout__main {
	min-width: 0}

/* Entrada individual (blog): el contenido iba a todo el ancho (ilegible).
   Se acomoda en una columna centrada y legible (título, imagen y texto). */
.site-main--single .single-post {
	max-width: 860px;
	margin-inline: auto}

/* El header de escritorio es fijo (position:fixed) y tapa el contenido del
   blog y las entradas (que no usan la franja .header-banner-products como la
   tienda). Se les da espacio superior en escritorio para que no queden debajo
   del header. En móvil el header va en el flujo, así que no hace falta. */
@media (min-width: 992px) {
	.site-main--archive,
	.site-main--single {
		padding-top: 9rem}
}

.single-post__thumbnail {
	line-height: 0;
	max-height: min(70vh, 520px);
	overflow: hidden;
	background: var(--OZ-Color-1)}

.single-post__thumbnail-img,
.single-post__thumbnail img {
	display: block;
	width: 100%;
	height: min(70vh, 520px);
	object-fit: cover;
	vertical-align: middle}

.single-post__caption {
	display: block;
	max-width: none;
	font-size: 0.8125rem;
	color: var(--OZ-Color-2);
	line-height: 1.45}

.single-post__body {
	max-width: none}

.single-post__eyebrow {
	font-family: var(--OZ-Font-Base);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--OZ-Color-3)}

.single-post__eyebrow a {
	color: inherit;
	text-decoration: none}

.single-post__eyebrow a:hover {
	text-decoration: underline}

.single-post__title.entry-title {
	font-size: clamp(1.75rem, 4vw, var(--OZ-Size-H1));
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.15;
	color: var(--OZ-Color-1)}

.single-post__byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	font-size: 0.9375rem;
	color: var(--OZ-Color-2)}

.single-post__byline-sep {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--OZ-Color-6);
	flex-shrink: 0}

.single-post__author {
	color: var(--OZ-Color-2);
	font-weight: 600;
	text-decoration: none}

.single-post__author:hover {
	color: var(--OZ-Color-3)}

.single-post__content {
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--OZ-Color-2)}

.single-post__content h2,
.single-post__content h3,
.single-post__content h4 {
	letter-spacing: -0.02em}

.single-post__content blockquote {
	border: none;
	background: color-mix(in srgb, var(--OZ-Color-4) 92%, var(--OZ-Color-6));
	border-radius: 8px;
	font-style: italic;
	color: var(--OZ-Color-2)}

.single-post__content img,
.single-post__content .wp-block-image img {
	border-radius: 8px;
	height: auto;
	max-width: 100%}

.oz-related__title {
	font-family: var(--OZ-Font-Headings);
	font-size: var(--OZ-Size-H2);
	font-weight: 600;
	color: var(--OZ-Color-2)}

.oz-related__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.25rem;
	align-items: stretch}

@media (max-width: 991px) {
	.oz-related__grid {
		grid-template-columns: repeat(2, 1fr)}
}

@media (max-width: 575px) {
	.oz-related__grid {
		grid-template-columns: 1fr}
}

.oz-related-card {
	height: 100%}

.oz-related-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
	background: var(--OZ-Color-5);
	border: 1px solid var(--OZ-Color-6);
	border-radius: 6px;
	overflow: hidden;
	transition: box-shadow 0.2s ease}

.oz-related-card__link:hover {
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08)}

.oz-related-card__link:hover .oz-related-card__title {
	color: var(--OZ-Color-3)}

.oz-related-card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--OZ-Color-6)}

.oz-related-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block}

.oz-related-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 8rem;
	background: linear-gradient(135deg, var(--OZ-Color-6) 0%, var(--OZ-Color-4) 100%)}

.oz-related-card__body {
	text-align: left;
	flex: 1;
	display: flex;
	flex-direction: column}

.oz-related-card__title {
	font-family: var(--OZ-Font-Headings);
	font-size: clamp(0.95rem, 1.1vw, 1.05rem);
	font-weight: 700;
	line-height: 1.35;
	color: var(--OZ-Color-2);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	transition: color 0.2s ease}

.oz-related-card__byline {
	font-family: var(--OZ-Font-Base);
	font-size: 0.8125rem;
	color: var(--OZ-Color-2);
	opacity: 0.85}

.entry-title {
	font-family: var(--OZ-Font-Headings)}

article h1.entry-title {
	font-size: var(--OZ-Size-H1)}

article h2.entry-title {
	font-size: var(--OZ-Size-H2)}

.entry-content h2 {
	font-size: var(--OZ-Size-H2)}

.entry-content h3 {
	font-size: var(--OZ-Size-H3)}

.entry-content h4 {
	font-size: var(--OZ-Size-H4)}

.entry-meta {
	font-size: 0.85rem;
	color: var(--OZ-Color-2);
	opacity: 0.85}

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

/* ==========================================================================
   BLOG / ARCHIVO DE ENTRADAS — grilla de tarjetas (index.php + archive.php)
   ========================================================================== */
.site-main--archive {
	padding: 9rem 1rem 3rem;
	box-sizing: border-box}
/* En móvil el header va en el flujo (no tapa), así que menos espacio arriba. */
@media (max-width: 991px) {
	.site-main--archive {
		padding-top: 2rem}
}

/* Encabezado "Blog" con subrayado azul */
.site-main--archive .archive-header {
	margin-bottom: 1.75rem}
.site-main--archive .archive-header__title {
	display: inline-block;
	margin: 0;
	font-family: var(--OZ-Font-Headings, inherit);
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	font-weight: 800;
	color: #1b2a6b;
	padding-bottom: 0.5rem;
	border-bottom: 3px solid #1b2a6b}
.site-main--archive .archive-header__desc {
	margin-top: 0.75rem;
	color: #6b7280}

/* Grilla de 4 columnas */
.posts-archive-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.5rem}
@media (max-width: 991px) {
	.posts-archive-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) }
}
@media (max-width: 767px) {
	.posts-archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (max-width: 479px) {
	.posts-archive-grid { grid-template-columns: 1fr }
}

/* Tarjeta */
.oz-archive-card {
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	overflow: hidden;
	transition: box-shadow 0.2s ease, transform 0.2s ease}
.oz-archive-card:hover {
	box-shadow: 0 12px 28px rgba(15, 23, 42, 0.10);
	transform: translateY(-3px)}

/* Imagen */
.oz-archive-card__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #f3f4f6}
.oz-archive-card__media img,
.oz-archive-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block}
.oz-archive-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: #e5e7eb}

/* Cuerpo */
.oz-archive-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	padding: 1rem 1.1rem 1.25rem;
	flex: 1 1 auto}
.oz-archive-card__title {
	margin: 0;
	font-family: var(--OZ-Font-Headings, inherit);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	color: #1f2937;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden}
.oz-archive-card__title a {
	color: inherit;
	text-decoration: none}
.oz-archive-card__title a:hover {
	color: #1b2a6b}
.oz-archive-card__meta {
	margin: 0;
	font-size: 0.875rem;
	color: #374151}
.oz-archive-card__meta-label {
	font-weight: 700}
.oz-archive-card__excerpt {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.5;
	color: #6b7280;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden}

/* Botón "Ver más" */
.oz-archive-card__btn {
	align-self: center;
	margin-top: auto;
	display: inline-block;
	padding: 0.5rem 1.6rem;
	border: 1px solid #fd6500;
	border-radius: 6px;
	background: #ffffff;
	color: #fd6500;
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease}
.oz-archive-card__btn:hover {
	background: #fd6500;
	color: #ffffff}

/* Paginación */
.site-main--archive .pagination,
.site-main--archive .navigation.pagination {
	margin-top: 2.25rem;
	display: flex;
	justify-content: center}
.site-main--archive .pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.4rem;
	height: 2.4rem;
	padding: 0 0.6rem;
	margin: 0 0.2rem;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	color: #374151;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease}
.site-main--archive .pagination a.page-numbers:hover {
	border-color: #1b2a6b;
	color: #1b2a6b}
.site-main--archive .pagination .page-numbers.current {
	background: #1b2a6b;
	color: #ffffff;
	border-color: #1b2a6b}