/*
Theme Name:   Sky Zone Classic
Description:  Tema clásico mínimo para WPBakery Page Builder. Header de tres zonas, footer con barra inferior. Sin dependencias, sin build step.
Version:      0.8.1
Author:       Geovani
Text Domain:  sky-zone
Requires at least: 6.3
Requires PHP: 7.4
*/

/* ==========================================================================
   Tokens — los colores y fuentes se sobrescriben desde Apariencia > Personalizar > Sky Zone
   ========================================================================== */
:root {
	--sz-content: 1200px;
	--sz-gutter: 20px;

	--sz-text: #1f2328;
	--sz-muted: #5c6470;
	--sz-bg: #ffffff;
	--sz-accent: #ff5a00;
	--sz-border: #e3e6ea;

	--sz-font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--sz-font-nav: var(--sz-font);
	--sz-line: 1.6;

	/* Header */
	--sz-header-h: 90px;
	--sz-header-h-m: 60px;
	--sz-h-left: #ff5a00;
	--sz-h-mid: #1e2033;
	--sz-h-right: #2f55c8;
	--sz-h-text: #ffffff;
	--sz-h-hover: #ff5a00;
	--sz-slant: 12px;
	--sz-brand-w: 28%;
	--sz-h-pad: clamp(20px, 3.8vw, 72px);
	--sz-panel-bg: rgba(255, 255, 255, .94);
	--sz-panel-text: #1e2033;

	/* Footer */
	--sz-f-bg: #1d1e21;
	--sz-f-text: #ffffff;
	--sz-f-link: #a3a8b0;
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.sz-lock { overflow: hidden; }

body {
	margin: 0;
	font-family: var(--sz-font);
	font-size: 16px;
	line-height: var(--sz-line);
	color: var(--sz-text);
	background: var(--sz-bg);
	overflow-x: clip; /* evita scroll lateral de filas estiradas sin romper position:sticky */
}

img, video { max-width: 100%; height: auto; }
/* Los iframes (mapas, videos embebidos) conservan el alto de su atributo height:
   con height:auto el navegador los dejaba en 150px. Solo se limita el ancho. */
iframe { max-width: 100%; }
a { color: var(--sz-accent); }
h1, h2, h3, h4, h5, h6 { line-height: 1.25; margin: 0 0 .6em; }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--sz-accent); outline-offset: 2px; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
.skip-link:focus {
	position: fixed !important;
	top: 10px; left: 10px;
	width: auto; height: auto;
	clip: auto;
	padding: 10px 16px;
	background: #fff;
	color: var(--sz-text);
	z-index: 10000;
}

.sz-icon { width: 1.15em; height: 1.15em; flex: none; }

/* Texto en dos colores. En los módulos Sky Zone y en el "Título personalizado" de
   WPBakery basta con escribir *texto*; en otros bloques: <span class="sz-hl">texto</span>.
   El color se elige en Personalizar → Sky Zone → Tipografía y resaltado. */
.sz-hl { color: var( --sz-hl, #ff5a00 ); }

/* ==========================================================================
   Contenedor — el padding lateral compensa el margen negativo de .vc_row (-15px)
   ========================================================================== */
.sz-container {
	width: 100%;
	max-width: calc(var(--sz-content) + (var(--sz-gutter) * 2));
	margin-inline: auto;
	padding-inline: var(--sz-gutter);
}
.sz-main { display: block; }
.sz-main--contained { padding-block: 40px; }
.sz-main--full { padding: 0; }
.sz-main--builder { padding-block: 0; }
.sz-main--builder .sz-page-title { padding-top: 40px; }
.sz-entry-content > .vc_row:last-child,
.sz-entry-content > .wpb-content-wrapper > .vc_row:last-child { margin-bottom: 0; }

/* ==========================================================================
   Header — escritorio: [ logo ] / [ menú ] / [ widgets ]
   ========================================================================== */
.sz-header {
	position: relative;
	z-index: 100;
	display: flex;
	align-items: stretch;
	min-height: var(--sz-header-h);
	background: var(--sz-h-mid);
	font-family: var(--sz-font-nav);
}

.sz-header__brand {
	flex: 0 0 var(--sz-brand-w);
	min-width: 240px;
	display: flex;
	align-items: center;
	padding: 10px calc(var(--sz-slant) + 20px) 10px var(--sz-h-pad);
	background: var(--sz-h-left);
	clip-path: polygon(0 0, 100% 0, calc(100% - var(--sz-slant)) 100%, 0 100%);
}
.sz-brand,
.custom-logo-link { display: flex; align-items: center; color: #fff; text-decoration: none; font-weight: 600; font-size: 1.5rem; }
.sz-brand img,
.custom-logo-link img { display: block; width: auto; max-height: calc(var(--sz-header-h) - 40px); }

.sz-panel { flex: 1; display: flex; align-items: stretch; min-width: 0; }

/* Menú */
.sz-nav { flex: 1; display: flex; justify-content: center; min-width: 0; }
.sz-nav ul { list-style: none; margin: 0; padding: 0; }
.sz-nav > ul { display: flex; align-items: stretch; flex-wrap: wrap; justify-content: center; }
.sz-nav > ul > li { display: flex; align-items: center; }
.sz-nav li { position: relative; }
.sz-nav a {
	display: block;
	padding: 10px clamp(10px, 1vw, 18px);
	color: var(--sz-h-text);
	font-size: 17px;
	font-weight: 500;
	letter-spacing: .01em;
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: none;
	transition: color .15s;
}
.sz-nav a:hover,
.sz-nav .current-menu-item > a,
.sz-nav .current-menu-ancestor > a { color: var(--sz-h-hover); }

/* Submenús */
.sz-nav .sub-menu {
	position: absolute;
	top: 100%; left: 0;
	min-width: 230px;
	padding: 8px 0;
	background: var(--sz-h-mid);
	box-shadow: 0 12px 28px rgba(0, 0, 0, .25);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .15s, transform .15s, visibility .15s;
}
.sz-nav .sub-menu .sub-menu { top: -8px; left: 100%; }
.sz-nav .sub-menu a { padding: 10px 20px; font-size: 15px; }
.sz-nav li:hover > .sub-menu,
.sz-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.sz-submenu-toggle { display: none; }

/* Área de navegación (widgets) */
.sz-header__widgets {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 10px var(--sz-h-pad) 10px calc(var(--sz-slant) + 26px);
	background: var(--sz-h-right);
	clip-path: polygon(var(--sz-slant) 0, 100% 0, 100% 100%, 0 100%);
}
.sz-icon-link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--sz-h-text);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: opacity .15s;
}
a.sz-icon-link:hover { opacity: .8; }
.sz-icon-link .sz-icon { width: 18px; height: 18px; }

/* Botón hamburguesa (solo tablet/móvil) */
.sz-menu-toggle {
	display: none;
	position: relative;
	z-index: 3;
	align-items: center;
	justify-content: center;
	width: 36px; height: 36px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff;
	cursor: pointer;
	transition: background-color .2s;
}
.sz-menu-toggle__bars,
.sz-menu-toggle__bars::before,
.sz-menu-toggle__bars::after {
	display: block;
	width: 22px; height: 2px;
	background: currentColor;
	transition: transform .2s, background-color .2s;
}
.sz-menu-toggle__bars { position: relative; }
.sz-menu-toggle__bars::before,
.sz-menu-toggle__bars::after { content: ""; position: absolute; left: 0; }
.sz-menu-toggle__bars::before { top: -7px; }
.sz-menu-toggle__bars::after { top: 7px; }
.sz-nav-open .sz-menu-toggle { background: var(--sz-h-left); }
.sz-nav-open .sz-menu-toggle__bars { background: transparent; }
.sz-nav-open .sz-menu-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
.sz-nav-open .sz-menu-toggle__bars::after { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   Separadores inclinados para filas de WPBakery
   Uso: en la fila → Clase CSS extra. Se pueden combinar (ej. arriba y abajo).

   Posición y dirección:
     sz-sep-top-tilt-right     arriba · el color entra por la izquierda y baja hacia la derecha
     sz-sep-top-tilt-left      arriba · espejo del anterior
     sz-sep-bottom-tilt-right  abajo
     sz-sep-bottom-tilt-left   abajo · espejo
   Color (por defecto blanco): sz-sep-navy · sz-sep-orange · sz-sep-blue · sz-sep-gray · sz-sep-dark · sz-sep-white
     → aplica a los dos separadores. Para uno solo: sz-sep-top-gray, sz-sep-bottom-navy, etc.
   Alto (por defecto 100px):   sz-sep-sm (50px) · sz-sep-lg (150px)

   El color debe ser el de la fila vecina (la de arriba para "top", la de
   abajo para "bottom"). Ocupa el ancho de la fila: con "Estirar fila" va de
   borde a borde de la pantalla. En pantallas angostas baja en proporción
   (referencia 1440px) para conservar la misma inclinación.
   ========================================================================== */
/* Las filas de WPBakery usan ::before/::after como "clearfix". Aquí esos
   pseudo-elementos pasan a ser los separadores: el selector va duplicado para
   ganar siempre (cargue antes o después el CSS de WPBakery), y la fila contiene
   sus columnas con display:flow-root, que hace lo mismo que el clearfix. */
[class*="sz-sep-top-tilt"],
[class*="sz-sep-bottom-tilt"] {
	position: relative;
}

[class*="sz-sep-top-tilt"]:not(.vc_row-flex),
[class*="sz-sep-bottom-tilt"]:not(.vc_row-flex) {
	display: flow-root;
}

[class*="sz-sep-top-tilt"][class*="sz-sep-top-tilt"]::before,
[class*="sz-sep-bottom-tilt"][class*="sz-sep-bottom-tilt"]::after {
	/* !important: en filas flex ("Posición del contenido", "Misma altura",
	   "Fila de altura completa") WPBakery oculta estos pseudo-elementos. Al ser
	   absolutos no se vuelven columnas del flex, así que es seguro mostrarlos. */
	content: "" !important;
	display: block !important;
	position: absolute;
	left: 0;
	right: 0;
	z-index: 1;
	height: clamp( 20px, calc( 100vw * var( --sz-sep-h, 100 ) / 1440 ), calc( var( --sz-sep-h, 100 ) * 1px ) );
	pointer-events: none;
}

/* -1px evita una línea fina entre el separador y la fila vecina */
[class*="sz-sep-top-tilt"][class*="sz-sep-top-tilt"]::before {
	top: -1px;
	background: var( --sz-sep-top-color, var( --sz-sep-color, #fff ) );
}

[class*="sz-sep-bottom-tilt"][class*="sz-sep-bottom-tilt"]::after {
	bottom: -1px;
	background: var( --sz-sep-bottom-color, var( --sz-sep-color, #fff ) );
}

.sz-sep-top-tilt-right.sz-sep-top-tilt-right::before     { clip-path: polygon( 0 0, 100% 0, 0 100% ); }
.sz-sep-top-tilt-left.sz-sep-top-tilt-left::before       { clip-path: polygon( 0 0, 100% 0, 100% 100% ); }
.sz-sep-bottom-tilt-right.sz-sep-bottom-tilt-right::after { clip-path: polygon( 100% 0, 100% 100%, 0 100% ); }
.sz-sep-bottom-tilt-left.sz-sep-bottom-tilt-left::after   { clip-path: polygon( 0 0, 100% 100%, 0 100% ); }

/* El contenido de la fila queda por encima del separador */
[class*="sz-sep-top-tilt"] > .wpb_column,
[class*="sz-sep-top-tilt"] > .vc_column_container,
[class*="sz-sep-bottom-tilt"] > .wpb_column,
[class*="sz-sep-bottom-tilt"] > .vc_column_container {
	position: relative;
	z-index: 2;
}

.sz-sep-white  { --sz-sep-color: #ffffff; }
.sz-sep-navy   { --sz-sep-color: #1e2033; }
.sz-sep-orange { --sz-sep-color: #ff5a00; }
.sz-sep-blue   { --sz-sep-color: #2f55c8; }
.sz-sep-gray   { --sz-sep-color: #f2f3f7; }
.sz-sep-dark   { --sz-sep-color: #1d1e21; }
.sz-sep-top-white  { --sz-sep-top-color: #ffffff; }
.sz-sep-top-navy   { --sz-sep-top-color: #1e2033; }
.sz-sep-top-orange { --sz-sep-top-color: #ff5a00; }
.sz-sep-top-blue   { --sz-sep-top-color: #2f55c8; }
.sz-sep-top-gray   { --sz-sep-top-color: #f2f3f7; }
.sz-sep-top-dark   { --sz-sep-top-color: #1d1e21; }
.sz-sep-bottom-white  { --sz-sep-bottom-color: #ffffff; }
.sz-sep-bottom-navy   { --sz-sep-bottom-color: #1e2033; }
.sz-sep-bottom-orange { --sz-sep-bottom-color: #ff5a00; }
.sz-sep-bottom-blue   { --sz-sep-bottom-color: #2f55c8; }
.sz-sep-bottom-gray   { --sz-sep-bottom-color: #f2f3f7; }
.sz-sep-bottom-dark   { --sz-sep-bottom-color: #1d1e21; }
.sz-sep-sm     { --sz-sep-h: 50; }
.sz-sep-lg     { --sz-sep-h: 150; }

/* ==========================================================================
   Entradas / listados
   ========================================================================== */
.sz-page-title { margin-bottom: 30px; }
.sz-post-list { display: grid; gap: 40px; }
.sz-post-card__title a { color: var(--sz-text); text-decoration: none; }
.sz-post-card__title a:hover { color: var(--sz-accent); }
.sz-post-meta { color: var(--sz-muted); font-size: .9rem; margin-bottom: 1em; }
.sz-post-thumb { display: block; margin-bottom: 20px; }
.sz-post-thumb img { display: block; width: 100%; }
.sz-pagination { margin-top: 40px; }
.sz-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
.sz-pagination .page-numbers { padding: 6px 12px; border: 1px solid var(--sz-border); text-decoration: none; }
.sz-pagination .current { background: var(--sz-accent); border-color: var(--sz-accent); color: #fff; }

/* ==========================================================================
   Footer
   ========================================================================== */
.sz-footer {
	background: var(--sz-f-bg);
	color: var(--sz-f-text);
	font-size: 14px;
	line-height: 1.5;
}
.sz-footer a { color: var(--sz-f-text); }

/* Columnas: cada widget centrado en su columna; el texto largo queda alineado a la izquierda */
.sz-footer__widgets {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 30px 40px;
	padding: 28px 0 44px;
}
.sz-footer__widgets .widget { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.sz-footer__widgets .widget > * { max-width: 100%; }
.sz-footer__widgets .widget-title { margin: 0 0 8px; font-size: 15px; color: var(--sz-f-text); }
.sz-footer__widgets p { margin: 0 0 .4em; }
.sz-footer__widgets p:last-child { margin-bottom: 0; }
.sz-footer__widgets a { color: var(--sz-f-link); }
.sz-footer__widgets a:hover { color: var(--sz-f-text); }
.sz-footer__widgets ul { list-style: none; margin: 0; padding: 0; }

/* Redes sociales */
.sz-social { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
.sz-social__icons { display: inline-flex; gap: 4px; }
.sz-social__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px; height: 24px;
	border-radius: 50%;
	background: var(--sz-f-text);
	color: var(--sz-f-bg) !important;
	transition: transform .15s;
}
.sz-social__icon:hover { transform: scale(1.1); }
.sz-social__icon .sz-icon { width: 15px; height: 15px; }

/* Barra inferior */
.sz-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px 40px;
	padding: 18px 0 22px;
}
.sz-footer__widgets + .sz-footer__bottom { border-top: 1px solid rgba(255, 255, 255, .14); }
.sz-footer__brand { display: flex; align-items: flex-start; gap: 14px; }
.sz-footer__logo { display: block; flex: none; text-decoration: none; }
.sz-footer__logo img { display: block; width: auto; height: 26px; max-width: 220px; object-fit: contain; }
.sz-footer__copy p { margin: 0; }
.sz-footer__menu ul { display: flex; flex-wrap: wrap; gap: 6px 20px; list-style: none; margin: 0; padding: 0; }
.sz-footer__menu a { text-decoration: none; }
.sz-footer__menu a:hover { text-decoration: underline; }

/* Volver arriba */
.sz-to-top {
	position: fixed;
	right: 16px; bottom: 16px;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px; height: 40px;
	padding: 0;
	border: 0;
	background: #000;
	color: #fff;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .2s, transform .2s, visibility .2s;
}
.sz-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }

/* ==========================================================================
   Tablet y móvil (≤1024px)
   ========================================================================== */
@media (max-width: 1024px) {
	/* Header: barra con el color del logo, hamburguesa a la derecha */
	.sz-header {
		align-items: center;
		min-height: var(--sz-header-h-m);
		padding-inline: var(--sz-gutter) 14px;
		background: var(--sz-h-left);
	}
	.sz-header__brand {
		flex: 1;
		min-width: 0;
		padding: 8px 0;
		background: none;
		clip-path: none;
	}
	.sz-brand img,
	.custom-logo-link img { max-height: calc(var(--sz-header-h-m) - 24px); }
	.sz-menu-toggle { display: inline-flex; }

	/* Panel lateral */
	.sz-panel {
		position: fixed;
		top: 0; right: 0; bottom: 0;
		z-index: 2;
		width: calc(100% - 44px);
		max-width: 420px;
		flex-direction: column;
		padding: 50px 27px 32px;
		overflow-y: auto;
		overscroll-behavior: contain;
		background: var(--sz-panel-bg);
		transform: translateX(100%);
		visibility: hidden;
		transition: transform .25s ease, visibility .25s;
	}
	.sz-nav-open .sz-panel { transform: none; visibility: visible; }
	.admin-bar .sz-panel { top: 32px; }

	.sz-nav { flex: none; display: block; }
	.sz-nav > ul { display: block; }
	.sz-nav > ul > li { display: block; }
	.sz-nav li { border-bottom: 1px solid rgba(30, 32, 51, .14); }
	.sz-nav a { padding: 15px 44px 15px 3px; color: var(--sz-panel-text); font-size: 16px; }
	.sz-nav .sub-menu a { padding: 13px 44px 13px 3px; font-size: 15px; }

	.sz-nav .sub-menu,
	.sz-nav .sub-menu .sub-menu {
		position: static;
		display: none;
		min-width: 0;
		padding: 0 0 0 14px;
		background: none;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: none;
	}
	.sz-nav .sub-menu li:last-child { border-bottom: 0; }
	.sz-nav .sub-menu li:first-child { border-top: 1px solid rgba(30, 32, 51, .14); }
	.sz-nav li.sz-submenu-open > .sub-menu { display: block; }

	/* "+" / "−" para abrir submenús */
	.sz-submenu-toggle {
		display: block;
		position: absolute;
		top: 4px; right: 0;
		width: 44px; height: 44px;
		border: 0;
		background: transparent;
		color: #9a9ca6;
		cursor: pointer;
	}
	.sz-submenu-toggle::before,
	.sz-submenu-toggle::after {
		content: "";
		position: absolute;
		top: 50%; left: 50%;
		width: 14px; height: 1.5px;
		margin: -1px 0 0 -7px;
		background: currentColor;
		transition: transform .2s;
	}
	.sz-submenu-toggle::after { transform: rotate(90deg); }
	.sz-submenu-open > .sz-submenu-toggle::after { transform: rotate(0); }

	/* Widgets debajo del menú, con el color del logo */
	.sz-header__widgets {
		flex-wrap: wrap;
		gap: 14px 30px;
		padding: 34px 3px 0;
		background: none;
		clip-path: none;
	}
	.sz-header__widgets .sz-icon-link { color: var(--sz-h-left); font-size: 16px; }

	/* Footer apilado y centrado */
	.sz-footer__widgets { grid-template-columns: 1fr; gap: 22px; padding: 32px 0 36px; }
	.sz-footer__bottom { flex-direction: column; text-align: center; padding: 26px 0 24px; }
	.sz-footer__brand { flex-direction: column; align-items: center; gap: 10px; }
	.sz-footer__logo img { height: 30px; }
	.sz-footer__menu ul { justify-content: center; }
}

@media (max-width: 782px) {
	.admin-bar .sz-panel { top: 46px; }
}

@media (max-width: 767px) {
	:root { --sz-gutter: 16px; }
	.sz-main--contained { padding-block: 24px; }
	.sz-main--builder { padding-block: 0; }
	.sz-main--builder .sz-page-title { padding-top: 24px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
}