/* ==========================================================================
Casas Cacique — v5: capa de motion y elementos nuevos sobre index.html
--------------------------------------------------------------------------
Se carga DESPUÉS de css/tailwind.min.css y va deliberadamente SIN @layer:
el CSS sin capa gana siempre sobre @layer components, así los overrides
no pelean por especificidad. Todo va scopeado a body.v5 para no afectar
index.html (comparten tailwind.min.css).
Estado inicial oculto de los reveals solo existe cuando tiene la
clase .v5-js (la pone un script inline en , antes del primer paint).
Si el módulo js/v5-motion.js no llega a ejecutarse, el script inline
retira .v5-js a los 3 s y todo queda visible: nunca contenido oculto.
Plan de motion (resumen — el detalle está en el mensaje de entrega):
1. Hero: título revelado por máscara línea a línea, parallax al scroll,
contenido que se desvanece al bajar.
2. Header: barra de progreso de lectura + vidrio al scrollear + link
activo (scrollspy) con subrayado.
3. Franja de cifras (nuevo) con contadores.
4. Reveal escalonado de cada sección (CSS transitions + IO).
5. Fotos con reveal por clip-path y parallax suave.
6. Íconos "Insignia Tallada" que se dibujan (stroke-dashoffset).
7. Proceso: línea de tiempo que se llena con el scroll (nuevo).
8. Comparativa: checks que "aparecen" en cascada, barra de pagos
40/30/30 (nuevo), brillo único en el badge Recomendado.
9. Spotlight que sigue al cursor en tarjetas (solo hover:hover).
10. Marquee de zonas de servicio (nuevo) y botón WhatsApp flotante (nuevo).
11. prefers-reduced-motion: solo opacidad, sin desplazamientos ni parallax.
========================================================================== */
body.v5 {
--v5-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
--v5-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
--v5-reveal-dur: 700ms;
--v5-reveal-y: 28px;
}
/* --------------------------------------------------------------------------
KEYFRAMES
-------------------------------------------------------------------------- */
@keyframes v5-hero-line {
to {
opacity: 1;
transform: none;
clip-path: inset(-10% -4% -26% -4%);
}
}
@keyframes v5-fade-up {
from {
opacity: 0;
transform: translateY(16px);
}
to {
opacity: 1;
transform: none;
}
}
@keyframes v5-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes v5-marquee {
from { transform: translateX(0); }
to { transform: translateX(-100%); }
}
@keyframes v5-sheen {
to { transform: translateX(420%) skewX(-16deg); }
}
@keyframes v5-fab-ring {
from {
transform: scale(1);
opacity: 0.55;
}
to {
transform: scale(1.7);
opacity: 0;
}
}
/* --------------------------------------------------------------------------
1. HERO
-------------------------------------------------------------------------- */
.v5 .hero__title-line {
opacity: 0;
transform: translateY(0.35em);
clip-path: inset(0 -4% 100% -4%);
animation: v5-hero-line 900ms var(--v5-ease-out) forwards;
}
.v5 .hero__title-line:nth-child(1) { animation-delay: 0.15s; }
.v5 .hero__title-line:nth-child(2) { animation-delay: 0.3s; }
.v5 .hero__title-line:nth-child(3) { animation-delay: 0.45s; }
.v5 .hero__subtitle {
opacity: 0;
transform: translateY(16px);
animation: v5-fade-up 800ms var(--v5-ease-out) 0.75s forwards;
}
.v5 .hero__cta-group {
opacity: 0;
transform: translateY(16px);
animation: v5-fade-up 800ms var(--v5-ease-out) 0.95s forwards;
}
/* El indicador "Desliza" ahora anima su contenido interno; el contenedor
queda libre para que el scroll lo desvanezca (ver js/v5-motion.js). */
.v5 .hero__scroll-indicator {
opacity: 1;
animation: none;
will-change: opacity;
}
.v5 .hero__scroll-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
opacity: 0;
animation: v5-fade-in 800ms ease 1.2s forwards;
}
.v5 .hero__video-container,
.v5 .hero__content {
will-change: transform;
}
/* --------------------------------------------------------------------------
2. HEADER: progreso de lectura, vidrio al scrollear, link activo
-------------------------------------------------------------------------- */
.v5 .header {
transition: background-color 300ms var(--v5-ease-out), box-shadow 200ms var(--v5-ease-out);
}
.v5 .header.scrolled {
background-color: rgba(27, 60, 53, 0.88);
-webkit-backdrop-filter: blur(14px) saturate(140%);
backdrop-filter: blur(14px) saturate(140%);
}
.v5 .scroll-progress {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2px;
background: var(--color-accent);
transform: scaleX(0);
transform-origin: 0 50%;
pointer-events: none;
}
.v5 .nav__link:not(.nav__link--cta) {
position: relative;
}
.v5 .nav__link:not(.nav__link--cta)::after {
content: '';
position: absolute;
left: 0.5rem;
right: 0.5rem;
bottom: 0.2rem;
height: 2px;
border-radius: 2px;
background: var(--color-accent);
transform: scaleX(0);
transform-origin: 0 50%;
transition: transform 220ms var(--v5-ease-out);
}
.v5 .nav__link.is-active::after {
transform: scaleX(1);
}
@media (hover: hover) and (pointer: fine) {
.v5 .nav__link:not(.nav__link--cta):hover::after {
transform: scaleX(1);
}
}
/* --------------------------------------------------------------------------
3. FRANJA DE CIFRAS (nuevo elemento, bajo el hero)
-------------------------------------------------------------------------- */
.v5 .stats {
background: var(--color-primary-dark);
color: var(--color-text-inverse);
border-top: 1px solid rgba(200, 161, 101, 0.28);
border-bottom: 1px solid rgba(200, 161, 101, 0.12);
}
.v5 .stats__container {
max-width: 80rem;
margin: 0 auto;
padding: 2.5rem 1.5rem;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem 1rem;
}
.v5 .stat {
text-align: center;
}
.v5 .stat__value,
.v5 .stat__suffix {
font-family: var(--font-display);
font-weight: 600;
color: var(--color-accent);
line-height: 1;
font-variant-numeric: tabular-nums;
}
.v5 .stat__value {
font-size: clamp(2.25rem, 5vw, 3.25rem);
}
.v5 .stat__suffix {
font-size: clamp(1.1rem, 2.2vw, 1.5rem);
margin-left: 0.3rem;
}
.v5 .stat__label {
display: block;
margin-top: 0.5rem;
font-size: 0.875rem;
letter-spacing: 0.02em;
color: rgba(255, 255, 255, 0.68);
}
@media (min-width: 768px) {
.v5 .stats__container {
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
}
.v5 .stat + .stat {
border-left: 1px solid rgba(255, 255, 255, 0.1);
}
}
/* --------------------------------------------------------------------------
4. REVEAL ESCALONADO (estado inicial solo con html.v5-js)
Regla: en el estado revelado NO se declara transform, para que los hover
con translate de la capa components (tarjetas) sigan funcionando.
-------------------------------------------------------------------------- */
.v5-js .v5 .stat:not(.is-revealed),
.v5-js .v5 .features__header > :not(.is-revealed),
.v5-js .v5 .feature:not(.is-revealed),
.v5-js .v5 .process__header > :not(.is-revealed),
.v5-js .v5 .process__step:not(.is-revealed),
.v5-js .v5 .models__header > :not(.is-revealed),
.v5-js .v5 .model-card:not(.is-revealed),
.v5-js .v5 .model-comparator-section__header > :not(.is-revealed),
.v5-js .v5 .comparativa__header > :not(.is-revealed),
.v5-js .v5 .comparativa__context-note:not(.is-revealed),
.v5-js .v5 .comparativa__card:not(.is-revealed),
.v5-js .v5 .comparativa__benefit:not(.is-revealed),
.v5-js .v5 .comparativa__payment:not(.is-revealed),
.v5-js .v5 .comparativa__cta:not(.is-revealed),
.v5-js .v5 .specs__header > :not(.is-revealed),
.v5-js .v5 .specs__regulation:not(.is-revealed),
.v5-js .v5 .specs__system:not(.is-revealed),
.v5-js .v5 .contact__info:not(.is-revealed),
.v5-js .v5 .contact__form-container:not(.is-revealed),
.v5-js .v5 .contact__detail:not(.is-revealed) {
opacity: 0;
transform: translateY(var(--v5-reveal-y));
}
/* La transición larga vive solo entre "revelado" y "asentado"; después,
cada componente recupera su transition original (hover rápido). */
.v5-js .v5 .is-revealed:not(.is-settled) {
transition: opacity var(--v5-reveal-dur) var(--v5-ease-out),
transform var(--v5-reveal-dur) var(--v5-ease-out);
}
/* --------------------------------------------------------------------------
5. FOTOS: reveal por máscara + parallax (transform lo pone Motion)
-------------------------------------------------------------------------- */
/* El recorte va en la ![]()
, no en el contenedor observado: Chrome descuenta
el clip-path al calcular la intersección, y un contenedor recortado al 100%
nunca "entra" al viewport para IntersectionObserver. La transición vive
solo hasta .is-settled para no pisar el zoom al hover de la imagen. */
.v5-js .v5 .section-photo:not(.is-revealed) img,
.v5-js .v5 .process__image-container:not(.is-revealed) .process__image,
.v5-js .v5 .model-card__image-container:not(.is-revealed) .model-card__image {
clip-path: inset(0 0 100% 0);
}
.v5-js .v5 .section-photo.is-revealed img,
.v5-js .v5 .process__image-container.is-revealed .process__image,
.v5-js .v5 .model-card__image-container.is-revealed .model-card__image {
clip-path: inset(0 0 0 0);
}
.v5-js .v5 .section-photo.is-revealed:not(.is-settled) img,
.v5-js .v5 .process__image-container.is-revealed:not(.is-settled) .process__image,
.v5-js .v5 .model-card__image-container.is-revealed:not(.is-settled) .model-card__image {
transition: clip-path 850ms var(--v5-ease-in-out);
}
.v5 .section-photo img {
will-change: transform;
}
/* Comparativa: la franja recorta la foto de la cocina entregada; se centra el
encuadre en el mesón y los muebles (lado derecho), que son el argumento. */
.v5 .comparativa .section-photo img {
object-position: 68% 50%;
}
/* --------------------------------------------------------------------------
6. ÍCONOS QUE SE DIBUJAN (stroke-dasharray hereda dentro de