/*
 * proyecto.css — comportamiento de Safety Zone. SOLO comportamiento.
 *
 * Ni un color ni una tipografía: eso son controles del panel de Elementor o
 * formas con {color:x} (constructor/formas.php). Aquí están los estados que
 * mueve proyecto.js: entradas al viewport, diapositivas apiladas, paneles
 * abiertos y cerrados, cabecera fija.
 *
 * Movimiento único del React (tokens.css + motion.css): 600 ms (400 en móvil),
 * cubic-bezier(0.16, 1, 0.3, 1), escalonado de 80 ms (60 en móvil), subida de 24 px (12 en móvil).
 */
:root { --sz-dur: 600ms; --sz-ease: cubic-bezier(0.16, 1, 0.3, 1); --sz-stagger: 80ms; --sz-rise: 24px; }
@media (max-width: 767px) { :root { --sz-dur: 400ms; --sz-stagger: 60ms; --sz-rise: 12px; } }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body { overflow-x: clip; -webkit-font-smoothing: antialiased; }
html.sz-sin-scroll { overflow: hidden; }

/* ── Cabecera fija (Header.jsx: sticky top-0). La barra superior de las páginas
   interiores (40 px, solo ≥768) se va con el scroll y la fila queda arriba. ── */
.elementor-location-header { position: sticky; top: 0; z-index: 40; }
@media (min-width: 768px) { body:not(.home) .elementor-location-header { top: -40px; } }
.home .elementor .sz-solo-interior, .elementor .sz-solo-inicio { display: none; }
.home .elementor .sz-solo-inicio { display: flex; }

/* ── Entradas al viewport, una sola vez ([data-reveal] de motion.css). Solo con JS (html.sz-js). ── */
.sz-rv { transition: opacity var(--sz-dur) var(--sz-ease), transform var(--sz-dur) var(--sz-ease), clip-path var(--sz-dur) var(--sz-ease);
	transition-delay: calc(var(--i, 0) * var(--sz-stagger)); }
.sz-i1 { --i: 1; } .sz-i2 { --i: 2; } .sz-i3 { --i: 3; } .sz-i4 { --i: 4; } .sz-i5 { --i: 5; } .sz-i6 { --i: 6; } .sz-i7 { --i: 7; } .sz-i8 { --i: 8; }
.sz-js .sz-rv:not(.is-in):not(.sz-rv-clip):not(.sz-rv-clip-up) { opacity: 0; }
.sz-js .sz-rv-up:not(.is-in) { transform: translate3d(0, var(--sz-rise), 0); }
.sz-js .sz-rv-left:not(.is-in) { transform: translate3d(calc(var(--sz-rise) * -1.5), 0, 0); }
.sz-js .sz-rv-right:not(.is-in) { transform: translate3d(calc(var(--sz-rise) * 1.5), 0, 0); }
.sz-js .sz-rv-zoom:not(.is-in) { transform: scale(0.94); }
.sz-js .sz-rv-arrow:not(.is-in) { transform: translate3d(-48px, -48px, 0); }
.sz-js .sz-rv-clip:not(.is-in) { clip-path: inset(0 100% 0 0); }
.sz-js .sz-rv-clip-up:not(.is-in) { clip-path: inset(100% 0 0 0); }
.sz-rv-clip.is-in, .sz-rv-clip-up.is-in { clip-path: inset(0 0 0 0); }
/* El contorno gigante se revela por máscara más despacio (momento de impacto). */
.sz-contorno.sz-rv-clip { transition-duration: calc(var(--sz-dur) * 2); }
.sz-contorno .elementor-heading-title { white-space: nowrap; user-select: none; }

/* ── Slider del inicio (HeroSlider.jsx): diapositivas apiladas con fundido ── */
.sz-hero-slides .elementor-loop-container.elementor-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); height: 100%; }
.sz-hero-slides, .sz-hero-slides > .elementor-widget-container { position: absolute !important; inset: 0; height: 100%; }
.sz-hero-slides .elementor-loop-container > .e-loop-item { grid-area: 1 / 1 / 2 / 2; min-width: 0; height: 100%;
	opacity: 0; visibility: hidden; transition: opacity var(--sz-dur) var(--sz-ease), visibility 0s var(--sz-dur); }
.sz-hero-slides .e-loop-item > .e-con { height: 100%; }
.sz-hero-slides .e-loop-item.is-active, .sz-hero:not([data-carrusel-listo]) .sz-hero-slides .e-loop-item:first-child { opacity: 1; visibility: visible; transition: opacity var(--sz-dur) var(--sz-ease), visibility 0s; }
.sz-hero-slides .e-loop-item .sz-slide-img img { transform: scale(1.06); transition: transform calc(var(--sz-dur) * 3) var(--sz-ease); }
.sz-hero-slides .e-loop-item.is-active .sz-slide-img img { transform: scale(1); }
.sz-linea { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.sz-linea > span { display: block; }
.sz-js .sz-hero .sz-linea > span { transform: translate3d(0, 105%, 0); transition: transform var(--sz-dur) var(--sz-ease); }
.sz-js .sz-hero .sz-marca { text-decoration-color: transparent; }
.sz-js .sz-hero .sz-marca::after { transform: scaleX(0); transition: transform var(--sz-dur) var(--sz-ease); }
.sz-js .sz-hero .sz-fade { opacity: 0; transform: translate3d(0, var(--sz-rise), 0); transition: opacity var(--sz-dur) var(--sz-ease), transform var(--sz-dur) var(--sz-ease); }
.sz-js .sz-hero .is-shown .sz-linea > span { transform: none; }
.sz-js .sz-hero .is-shown .sz-linea:nth-child(2) > span { transition-delay: calc(var(--sz-stagger) * 1.5); }
.sz-js .sz-hero .is-shown .sz-linea:nth-child(3) > span { transition-delay: calc(var(--sz-stagger) * 3); }
.sz-js .sz-hero .is-shown .sz-marca { text-decoration-color: currentColor; transition-delay: calc(var(--sz-dur) * 0.8); }
.sz-js .sz-hero .is-shown .sz-marca::after { transform: scaleX(1); transition-delay: calc(var(--sz-dur) * 0.8); }
.sz-js .sz-hero .is-shown .sz-fade { opacity: 1; transform: none; transition-delay: calc(var(--sz-stagger) * 4); }

/* ── Carrusel de capacitaciones (Trainings.jsx): carril con scroll-snap ── */
.sz-carril .elementor-loop-container > .e-loop-item { scroll-snap-align: start; }

/* ── Cifras: el contador sube al aparecer ── */
[data-count-to] { font-variant-numeric: tabular-nums; }

/* ── Paneles: menú (desde la izquierda) y WhatsApp (sube y aparece) ── */
.sz-panel { visibility: hidden; transition: visibility 0s linear var(--sz-dur); }
.sz-panel.is-abierto { visibility: visible; transition-delay: 0s; }
.sz-panel .sz-panel-velo { opacity: 0; transition: opacity var(--sz-dur) var(--sz-ease); }
.sz-panel.is-abierto .sz-panel-velo { opacity: 1; }
.sz-panel .sz-panel-caja { transform: translate3d(-100%, 0, 0); transition: transform var(--sz-dur) var(--sz-ease); max-height: 100vh; overflow-y: auto; overscroll-behavior: contain; }
.sz-panel.is-abierto .sz-panel-caja { transform: none; }
.sz-wa-panel { opacity: 0; transform: translate3d(0, 16px, 0); pointer-events: none; visibility: hidden;
	transition: opacity var(--sz-dur) var(--sz-ease), transform var(--sz-dur) var(--sz-ease), visibility 0s var(--sz-dur); }
.sz-wa-panel.is-abierto { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity var(--sz-dur) var(--sz-ease), transform var(--sz-dur) var(--sz-ease), visibility 0s; }
.sz-wa-boton .sz-wa-x, .sz-wa-boton.is-abierto .sz-wa-i { display: none; }
.sz-wa-boton.is-abierto .sz-wa-x { display: flex; }
.sz-arriba { opacity: 0; transform: translate3d(0, 16px, 0); pointer-events: none; transition: opacity var(--sz-dur) var(--sz-ease), transform var(--sz-dur) var(--sz-ease), background-color var(--sz-dur) var(--sz-ease); }
.sz-arriba.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.sz-abrir-menu, .sz-cerrar-menu, .sz-wa-boton, .sz-wa-cerrar, .sz-arriba, .carrusel-punto { cursor: pointer; -webkit-user-select: none; user-select: none; }

/* ── Formularios: solo la confirmación tras enviar ── */
.sz-form .elementor-field-group > .elementor-field-label { transition: transform var(--sz-dur) var(--sz-ease); }

/* ── Finalizar compra: los datos de factura solo con «Factura» ── */
.woocommerce-checkout .sz-factura { display: none; }
.woocommerce-checkout.sz-con-factura .sz-factura { display: block; }

/* ── Hovers de la referencia: imagen que crece y tarjeta que sube 4 px ── */
.sz-medio > .elementor-widget-image, .sz-medio .sz-medio-img { position: absolute !important; inset: 0; width: 100%; height: 100%; margin: 0 !important; }
.sz-medio .sz-medio-img .elementor-widget-container, .sz-medio .sz-medio-img img { display: block; width: 100%; height: 100%; }
.sz-zoom img { transition: transform var(--sz-dur) var(--sz-ease); }
.sz-zoom:hover img, a:hover .sz-zoom img, .e-loop-item:hover .sz-zoom img, .sz-sube:hover .sz-zoom img { transform: scale(1.05); }
.sz-sube { transition: transform var(--sz-dur) var(--sz-ease); }
.sz-sube:hover { transform: translateY(-4px); }

@media (prefers-reduced-motion: reduce) {
	.sz-rv, .sz-linea > span, .sz-fade { opacity: 1 !important; transform: none !important; clip-path: none !important; }
	.sz-marca::after { transform: none !important; }
	*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ── Ficha de curso: «Estado» solo si es Próximamente (CourseHeader.jsx) ── */
body.sz-estado-disponible .sz-solo-proximo { display: none; }
body.sz-estado-disponible .sz-primero-si-disponible { border-top-width: 0 !important; }

/* ── Catálogo: tarjetas filtradas, vacío y filtros plegables ── */
.sz-cursos .e-loop-item[hidden], .sz-vacio[hidden], .sz-limpiar[hidden] { display: none !important; }
@media (max-width: 1024px) { .sz-catalogo:not(.is-filtros-abiertos) .sz-filtros { display: none; } }

/* ── Copiar enlace del artículo ── */
.sz-copiar .sz-copiar-ok, .sz-copiar.is-copiado .sz-copiar-i { display: none; }
.sz-copiar.is-copiado .sz-copiar-ok { display: block; }
.sz-copiar { cursor: pointer; }

/* ── La foto de cada diapositiva llena su alto en todos los tamaños ── */
.sz-hero-slides .sz-slide-img { inset: 0; width: 100%; height: 100%; }
.sz-hero-slides .sz-slide-img img { width: 100%; height: 100%; object-fit: cover; }

/* ── Finalizar compra: los datos de factura son obligatorios solo con «Factura» (lo marca el JS) ── */
.woocommerce-checkout .sz-factura .optional, .woocommerce-checkout .sz-comprobante .woocommerce-input-wrapper .required { display: none; }
.woocommerce-checkout.sz-con-factura .sz-factura label::after { content: ' *'; }
.sz-form .elementor-field-group[hidden] { display: none !important; }

/* ── Fijo al bajar en escritorio (lg:sticky del React): el sticky nativo del navegador.
   El «fijado» de Pro Elements es JavaScript: pasaba la foto de Servicios a posición
   absoluta y la estiraba (672 → 1429 px) encima del servicio siguiente. ── */
@media (min-width: 1025px) {
	.elementor .elementor-element.sz-fijo { position: sticky; top: 96px; align-self: start; z-index: 1; }
	.elementor .elementor-element.sz-servicio-foto.sz-fijo { top: 112px; }
}