/* TRANSICIONES ENTRE SECCIONES (versión suave)
   Cargar DESPUÉS de cotizacion.css en index.html.
   Si algo no te gusta, borrá este <link> y todo vuelve a como estaba. */

:root {
    /* Mismo negro que usa la imagen del hero en sus bordes (así no se ve la caja de la imagen) */
    --seam: #080c11;
    --project-quote-seam: #07090d;
    --seam-fade: clamp(60px, 7vw, 120px);
}

/* ---------- HERO -> PROYECTOS ---------- */
/* Velo corto: solo suaviza el borde inferior, sin comerse el paisaje */
.intro-screen::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: var(--seam-fade);
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(to top, var(--seam), transparent);
}

/* ---------- PROYECTOS (esquinas rojas) ---------- */
.proj-bleed {
    background: linear-gradient(180deg, transparent 0, var(--seam) var(--seam-fade), var(--seam) calc(100% - var(--seam-fade)), var(--project-quote-seam) 100%);
}
.proj-deco {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--seam-fade), #000 calc(100% - var(--seam-fade)), transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 var(--seam-fade), #000 calc(100% - var(--seam-fade)), transparent 100%);
}

/* ---------- PROYECTOS -> COTIZACIÓN ---------- */
/* El fundido de las rocas termina en el mismo tono opaco que recibe el simulador. */
.sim-stage { background: var(--project-quote-seam); }