/*
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.0
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);

	/* Fondo de las franjas de título de página (tienda, categorías, blog,
	   contacto, marcas). Cambiar aquí lo cambia en todas: el resto de archivos
	   lo consume con var(--OZ-Page-Hero-Bg, #1E272C). */
	--OZ-Page-Hero-Bg: #1E272C;
	--OZ-Page-Hero-Halo: rgba(226, 6, 19, 0.30)}

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, #0a1724 0%, #053b5c 50%, #0f2133 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(244, 180, 26, 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(244, 180, 26, 0.3);
}

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

.error-ring--inner {
	stroke: rgba(244, 180, 26, 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: #f4b41a;
	animation: shieldPulse 3s ease-in-out infinite;
}

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

.error-dash {
	stroke: rgba(244, 180, 26, 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(244, 180, 26, 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: #f4b41a;
	z-index: -1;
	animation: glitchBefore 4s ease-in-out infinite;
}

.error-code::after {
	color: #0a4f78;
	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: #f4b41a;
	color: #053b5c;
	border: 1px solid #f4b41a;
}

.error-btn--accent:hover {
	background: #dfa212;
	box-shadow: 0 8px 30px rgba(244, 180, 26, 0.3);
	color: #053b5c;
}

/* 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 {
	width: 100%;
	max-width: min(100%, var(--OZ-Container-PC));
	margin-inline: auto}

@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}


.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 / ENTRADA INDIVIDUAL
   Los estilos viven ahora en assets/css/blog.css (se encola solo en
   home, archivos y single). No añadir reglas de blog en este archivo.
   ========================================================================== */
/* ==========================================================================
   OZ Formularios · campo de routing "area"
   El plugin pinta el input como hidden pero deja su contenedor .ozfp-field
   (con .ozfp-full-width), que seguía ocupando una fila del grid y abría un
   hueco vacío antes de los botones. Se oculta el contenedor.
   Va en el TEMA (no en ozfp.css) para que no se pierda al actualizar el plugin.
   ========================================================================== */
.ozfp-form-wrapper .ozfp-field-area { display: none !important; }

/* ==========================================================================
   Franja de título de página (.oz-page-hero)
   Mismo fondo que la franja de la tienda (.oz-shop-page-banner en
   woocommerce/shop-archive.css): negro con un halo rojo arriba a la derecha y
   una trama diagonal muy tenue. Se aplica escribiendo la clase "oz-page-hero"
   en la fila del Maquetador, así sirve para cualquier página sin depender del
   ID. El !important es necesario porque el maquetador imprime el color de
   fondo de la fila como estilo en línea.
   ========================================================================== */
.oz-pb-root .oz-page-hero {
	position: relative;
	isolation: isolate;
	background:
		radial-gradient(900px 380px at 88% -30%, var(--OZ-Page-Hero-Halo, rgba(226, 6, 19, 0.30)), transparent 62%),
		var(--OZ-Page-Hero-Bg, #1E272C) !important;
	color: #ffffff;
}

.oz-pb-root .oz-page-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: 0.35;
	background-image: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 22px);
}

/* ==========================================================================
   Contacto · divisor heredado en la columna del formulario
   El CSS global del Maquetador trae reglas para '.oz-pb-r-2-c-0' (las líneas
   divisorias de las 4 características de Nosotros). Ese selector es posicional
   —"fila 2, columna 0"— y es global, así que también alcanza la fila del
   formulario de Contacto y le pinta un borde a la derecha.
   Va aquí, en el TEMA, y con !important: la corrección se puso antes dentro de
   ese CSS global y se perdió en cuanto el Maquetador lo regeneró al guardar.
   ========================================================================== */
html body .oz-pb-root .contacto-cols .oz-pb-internal-layout__grid > .oz-pb-sub-column:first-child {
	border-right: 0 !important;
}

html body .oz-pb-root .contacto-cols .oz-pb-internal-layout ~ .oz-pb-internal-layout {
	border-top: 0 !important;
}

/* ==========================================================================
   Enlaces dentro de los bloques de texto del Maquetador
   El bloque fija su color en línea (p. ej. color:#ffffff en .oz-pb-text), pero
   el <a> no lo hereda: toma el color de enlace y dibuja el subrayado con ese
   color, que es lo que se veía como una raya azul bajo el texto.
   Aquí el enlace hereda el color del texto y no se subraya nunca, tampoco al
   pasar el ratón. Si algún enlace concreto debe distinguirse, dale un color
   propio desde el Maquetador.
   ========================================================================== */
.oz-pb-root .oz-pb-text a,
.oz-pb-root .oz-pb-text a:link,
.oz-pb-root .oz-pb-text a:visited,
.oz-pb-root .oz-pb-text a:hover,
.oz-pb-root .oz-pb-text a:focus,
.oz-pb-root .oz-pb-text a:active {
	color: inherit;
	text-decoration: none !important;
}

/* Foco visible para quien navega con teclado: el subrayado ya no lo indica */
.oz-pb-root .oz-pb-text a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Nota: los colores del minicarrito (sidecart) del OZ Cotizador se ajustan
   ahora en el propio plugin, en assets/css/sidecart.css. */