/*
 * proyecto.css — comportamiento de Consorcio Proyecto Global. 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, flotantes que aparecen al pasar el hero.
 *
 * 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 (50 en móvil).
 */
:root { --cp-dur: 600ms; --cp-ease: cubic-bezier(0.16, 1, 0.3, 1); --cp-stagger: 80ms; --cp-dist: 24px; }
@media (max-width: 767px) { :root { --cp-dur: 400ms; --cp-stagger: 50ms; --cp-dist: 12px; } }
html { scroll-behavior: auto; }
html.cp-sin-scroll { overflow: hidden; }
body { overflow-x: clip; }

/* ── Entradas al viewport, una sola vez (data-reveal). Solo con JS (html.cp-js). ── */
.cp-rv { transition: opacity var(--cp-dur) var(--cp-ease), transform var(--cp-dur) var(--cp-ease), clip-path var(--cp-dur) var(--cp-ease);
	transition-delay: calc(var(--d, 0ms) + var(--i, 0) * var(--cp-stagger)); }
.cp-i1 { --i: 1; } .cp-i2 { --i: 2; } .cp-i3 { --i: 3; } .cp-i4 { --i: 4; } .cp-i5 { --i: 5; } .cp-i6 { --i: 6; } .cp-i7 { --i: 7; }
.cp-d300 { --d: 300ms; }
.cp-js .cp-rv:not(.is-in):not(.cp-rv-mask):not(.cp-rv-clip-left):not(.cp-rv-lines) { opacity: 0; }
.cp-js .cp-rv-up:not(.is-in) { transform: translate3d(0, var(--cp-dist), 0); }
.cp-js .cp-rv-left:not(.is-in) { transform: translate3d(calc(var(--cp-dist) * -2), 0, 0); }
.cp-js .cp-rv-right:not(.is-in) { transform: translate3d(calc(var(--cp-dist) * 2), 0, 0); }
/* Revelado por máscara: de abajo arriba (mask) y de izquierda a derecha (clip-left). */
.cp-js .cp-rv-mask:not(.is-in) { clip-path: inset(100% 0 0 0); }
.cp-js .cp-rv-clip-left:not(.is-in) { clip-path: inset(0 100% 0 0); }
.cp-rv-mask.is-in, .cp-rv-clip-left.is-in { clip-path: inset(0 0 0 0); }
/* Título por líneas: cada línea sube desde su máscara. */
.cp-linea { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.cp-linea > span { display: block; transition: transform var(--cp-dur) var(--cp-ease); transition-delay: calc(var(--d, 0ms) + var(--i, 0) * var(--cp-stagger)); }
.cp-js .cp-rv-lines:not(.is-in) .cp-linea > span { transform: translate3d(0, 105%, 0); }

/* ── Parallax de la palabra fantasma: lo mueve el JS solo en ≥768. ── */
.cp-fantasma { pointer-events: none; user-select: none; white-space: nowrap; will-change: transform; }
.cp-fantasma .elementor-heading-title { white-space: nowrap; }

/* ── Cabecera: la barra superior se oculta y la fila se compacta al bajar (≥1025). ── */
.cp-cabecera { transition: transform var(--cp-dur) var(--cp-ease); }
.cp-cab-fila { transition: min-height var(--cp-dur) var(--cp-ease), box-shadow var(--cp-dur) var(--cp-ease); }
@media (min-width: 1025px) {
	.cp-cabecera.is-scrolled { transform: translate3d(0, -40px, 0); }
	.elementor .cp-cabecera.is-scrolled .cp-cab-fila { min-height: 64px; }
}

/* ── Flotantes (cotizar y redes): en móvil y tablet aparecen al pasar el hero. ── */
@media (max-width: 1024px) {
	.cp-js .cp-flotante { opacity: 0; transform: translate3d(0, 8px, 0); pointer-events: none;
		transition: opacity var(--cp-dur) var(--cp-ease), transform var(--cp-dur) var(--cp-ease); }
	.cp-js .cp-flotante.is-visible { opacity: 1; transform: none; pointer-events: auto; }
}

/* ── Paneles modales: menú móvil (fundido) y cotizador (entra desde la derecha). ── */
.cp-panel { visibility: hidden; transition: visibility 0s linear var(--cp-dur); }
.cp-panel.is-abierto { visibility: visible; transition-delay: 0s; }
.cp-mmenu { opacity: 0; transition: opacity var(--cp-dur) var(--cp-ease), visibility 0s linear var(--cp-dur); }
.cp-mmenu.is-abierto { opacity: 1; transition: opacity var(--cp-dur) var(--cp-ease), visibility 0s; }
.cp-mm-lista .elementor-nav-menu > li { opacity: 0; transform: translate3d(0, 12px, 0); transition: opacity var(--cp-dur) var(--cp-ease), transform var(--cp-dur) var(--cp-ease); }
.cp-mmenu.is-abierto .cp-mm-lista .elementor-nav-menu > li { opacity: 1; transform: none; transition-delay: calc(120ms + var(--i, 0) * 60ms); }
.cp-cot-velo { opacity: 0; transition: opacity var(--cp-dur) var(--cp-ease); }
.cp-cot-caja { max-height: 100vh; overflow-y: auto; overscroll-behavior: contain; transform: translate3d(100%, 0, 0); transition: transform var(--cp-dur) var(--cp-ease); }
.cp-cotizador.is-abierto .cp-cot-velo { opacity: 1; }
.cp-cotizador.is-abierto .cp-cot-caja { transform: none; }
.cp-burger, .cp-mm-cerrar, .cp-cot-cerrar, .cp-cotizar, .carrusel-prev, .carrusel-next, .cp-serv-sig, .cp-serv-ant,
.cp-filtro-btn, .cp-ver-todos, .cp-serv-tabs .e-loop-item { cursor: pointer; -webkit-user-select: none; user-select: none; }

/* ── Slider de inicio: diapositivas apiladas en fundido (HeroSlider.jsx) ── */
.cp-hero-fotos, .cp-hero-fotos > .elementor-widget-container { position: absolute !important; inset: 0; width: 100%; height: 100%; margin: 0 !important; }
.elementor .cp-hero-fotos .elementor-loop-container.elementor-grid,
.elementor .cp-hero-pies .elementor-loop-container.elementor-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); height: 100%; }
.elementor .cp-hero-fotos .elementor-loop-container > .e-loop-item,
.elementor .cp-hero-pies .elementor-loop-container > .e-loop-item { grid-area: 1 / 1 / 2 / 2; min-width: 0; }
.cp-hero-fotos .e-loop-item > .e-con { height: 100%; }
.cp-hero-fotos .e-loop-item img { transition: opacity var(--cp-dur) var(--cp-ease), transform var(--cp-dur) var(--cp-ease); opacity: 0; transform: scale(1.04); }
.cp-hero-fotos .e-loop-item.is-activa img { opacity: 1; transform: none; }
.cp-hero:not([data-carrusel-listo]) .cp-hero-fotos .e-loop-item:first-child img { opacity: 1; transform: none; }
.cp-hero-pies .e-loop-item { visibility: hidden; }
.cp-hero-pies .e-loop-item.is-activa, .cp-hero:not([data-carrusel-listo]) .cp-hero-pies .e-loop-item:first-child { visibility: visible; }
.cp-hero-velo { position: absolute !important; inset: 0; pointer-events: none; }

/* ── «Lo que hacemos»: un panel a la vez ── */
.cp-serv-paneles .e-loop-item[hidden] { display: none !important; }
.cp-serv-tabs .e-loop-item { transition: background-color var(--cp-dur) var(--cp-ease), color var(--cp-dur) var(--cp-ease); }

/* ── Portafolio filtrado ── */
.cp-portafolio-grilla .e-loop-item[hidden], .cp-portafolio [hidden] { display: none !important; }

/* ── Galería de la ficha: sin segunda o tercera foto, su hueco no se pinta. ── */
.cp-sin-foto-2 .cp-galeria-2, .cp-sin-foto-3 .cp-galeria-3 { display: none !important; }

/* ── Formulario enviado: queda solo la confirmación (QuoteForm.jsx «sent»). ── */
.cp-enviado .elementor-form-fields-wrapper { display: none; }

/* ── Hovers de la referencia: imagen que crece, flecha que se desplaza ── */
.cp-medio > .elementor-widget-image, .cp-medio .cp-medio-img { position: absolute !important; inset: 0; width: 100%; height: 100%; margin: 0 !important; }
.cp-medio .cp-medio-img .elementor-widget-container, .cp-medio .cp-medio-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cp-zoom img, .cp-zoom-3 img { transition: transform var(--cp-dur) var(--cp-ease); }
.cp-zoom:hover img, a:hover .cp-zoom img, .e-loop-item:hover .cp-zoom img { transform: scale(1.05); }
.cp-zoom-3:hover img { transform: scale(1.03); }
.cp-boton .elementor-button { transition: background-color var(--cp-dur) var(--cp-ease), color var(--cp-dur) var(--cp-ease); }
.cp-boton .elementor-button-icon svg { transition: transform var(--cp-dur) var(--cp-ease); }
.cp-boton-right .elementor-button:hover .elementor-button-icon svg { transform: translateX(4px); }
.cp-boton-left .elementor-button:hover .elementor-button-icon svg { transform: translateX(-4px); }
.cp-mueve-der svg, .cp-mueve-izq svg, .cp-mueve-arriba svg, .cp-gira svg { transition: transform var(--cp-dur) var(--cp-ease); }
:hover > .cp-mueve-der svg, .cp-mueve-der:hover svg { transform: translateX(4px); }
:hover > .cp-mueve-izq svg, .cp-mueve-izq:hover svg { transform: translateX(-4px); }
:hover > .cp-mueve-arriba svg { transform: translateY(-2px); }
:hover > .cp-gira svg, a:hover .cp-gira svg { transform: rotate(90deg); }

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