/* Portada pública: fondos animados, maqueta del panel y animaciones al hacer scroll. */
:root {
    --i-oscuro: #072a33;
    --i-medio: #0b3a46;
    --i-acento: #1f8a9e;
    --i-claro: #5fd3c6;
}
.inicio { overflow-x: hidden; }
.texto-medio { max-width: 720px; }

/* ---------- Cabecera ---------- */
.inicio-cabecera {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--i-oscuro) 0%, var(--i-medio) 45%, var(--i-acento) 100%);
    padding-bottom: 60px;
}
.inicio-nav { position: relative; z-index: 2; }
.enlace-nav { color: rgba(255, 255, 255, .8); text-decoration: none; }
.enlace-nav:hover { color: #fff; }
.etiqueta-hero {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .35rem .8rem; border-radius: 999px; font-size: .85rem;
    background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2);
}
.punto-vivo {
    width: .55rem; height: .55rem; border-radius: 50%; background: #3ddc97;
    box-shadow: 0 0 0 0 rgba(61, 220, 151, .7); animation: latido 2s infinite;
}
@keyframes latido {
    0% { box-shadow: 0 0 0 0 rgba(61, 220, 151, .7); }
    70% { box-shadow: 0 0 0 10px rgba(61, 220, 151, 0); }
    100% { box-shadow: 0 0 0 0 rgba(61, 220, 151, 0); }
}
.ola { position: absolute; bottom: -1px; left: 0; width: 100%; height: 60px; fill: var(--bs-body-bg); }

/* ---------- Fondo animado: manchas de color difuminadas + rejilla ---------- */
.fondo-animado { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.mancha {
    position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55;
    animation: flotar 18s ease-in-out infinite alternate;
}
.mancha.m1 { width: 460px; height: 460px; background: var(--i-claro); top: -140px; left: -120px; }
.mancha.m2 { width: 380px; height: 380px; background: #3b82f6; bottom: -160px; right: 10%; animation-duration: 22s; animation-delay: -6s; }
.mancha.m3 { width: 300px; height: 300px; background: #a3e635; top: 30%; right: -100px; opacity: .3; animation-duration: 26s; animation-delay: -12s; }
.fondo-animado.suave .mancha { opacity: .3; }
@keyframes flotar {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(60px, 40px) scale(1.12); }
    100% { transform: translate(-40px, 70px) scale(.92); }
}
.rejilla {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%);
    animation: desplazar 30s linear infinite;
}
@keyframes desplazar { to { background-position: 48px 48px, 48px 48px; } }
.inicio-cabecera .container-xl { position: relative; z-index: 1; }

/* ---------- Maqueta del panel ---------- */
.maqueta-panel { position: relative; padding: 2rem 1rem 3rem; }
.maqueta-foto {
    width: 100%; height: auto; border-radius: 1.25rem; display: block;
    box-shadow: 0 30px 60px rgba(0, 0, 0, .35);
    transform: perspective(1200px) rotateY(-6deg) rotateX(3deg);
}
.tarjeta-vidrio {
    position: absolute; color: #fff; border-radius: 1rem; padding: .8rem 1rem;
    background: rgba(7, 42, 51, .55); border: 1px solid rgba(255, 255, 255, .22);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
    animation: balanceo 6s ease-in-out infinite;
}
.tarjeta-sensor .valor { font-size: 1.8rem; font-weight: 700; line-height: 1.1; }
.tarjeta-sensor .valor small { font-size: .9rem; font-weight: 400; opacity: .8; }
.tarjeta-sensor .estado { font-size: .75rem; margin-top: .2rem; }
.tarjeta-sensor .estado.ok { color: #7ef0bf; }
.tarjeta-vidrio.t1 { top: 0; left: -.5rem; }
.tarjeta-vidrio.t2 { top: 35%; right: -.5rem; animation-delay: -2s; }
.tarjeta-vidrio.t3 { bottom: .5rem; left: 10%; display: flex; gap: .7rem; align-items: center; animation-delay: -4s; }
@keyframes balanceo { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.cambio { animation: destello .6s ease; }
@keyframes destello { 0% { color: #7ef0bf; } 100% { color: inherit; } }

/* ---------- Secciones ---------- */
.sobretitulo { font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--i-acento); }
.sobretitulo.claro { color: var(--i-claro); }
.seccion-suave { background: linear-gradient(180deg, var(--bs-tertiary-bg) 0%, var(--bs-body-bg) 100%); }
.seccion-oscura { background: linear-gradient(135deg, var(--i-oscuro) 0%, var(--i-medio) 100%); }
.cifra { font-size: 2.6rem; font-weight: 800; color: var(--i-medio); line-height: 1.1; }

.tarjeta-funcion {
    background: var(--bs-body-bg); border: 1px solid var(--bs-border-color-translucent);
    border-radius: 1rem; padding: 1.6rem; transition: transform .25s ease, box-shadow .25s ease;
}
.tarjeta-funcion:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(11, 58, 70, .12); }
.icono-funcion {
    width: 3rem; height: 3rem; border-radius: .9rem; display: grid; place-items: center; font-size: 1.4rem;
    color: #fff; background: linear-gradient(135deg, var(--i-acento), var(--i-claro));
}

.foto-marco { position: relative; border-radius: 1.25rem; overflow: hidden; box-shadow: 0 25px 50px rgba(0, 0, 0, .15); }
.foto-marco img { width: 100%; height: auto; display: block; transition: transform 6s ease; }
.foto-marco:hover img { transform: scale(1.05); }
.foto-marco::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(160deg, transparent 60%, rgba(31, 138, 158, .35));
}
.lista-check { list-style: none; padding: 0; margin: 1.2rem 0 0; }
.lista-check li { position: relative; padding-left: 1.8rem; margin-bottom: .7rem; }
.lista-check li::before {
    content: '\F26A'; font-family: 'bootstrap-icons'; position: absolute; left: 0; top: 0;
    color: var(--i-acento);
}

.tarjeta-sector { position: relative; border-radius: 1rem; overflow: hidden; height: 320px; }
.tarjeta-sector img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.tarjeta-sector:hover img { transform: scale(1.08); }
.tarjeta-sector-texto {
    position: absolute; inset: auto 0 0 0; padding: 1.2rem;
    background: linear-gradient(0deg, rgba(7, 42, 51, .95) 0%, rgba(7, 42, 51, .6) 60%, transparent 100%);
}

.paso {
    position: relative; padding: 1.5rem 1.2rem; border-radius: 1rem; background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color-translucent);
}
.paso-num {
    position: absolute; top: -.8rem; right: 1rem; width: 2rem; height: 2rem; border-radius: 50%;
    display: grid; place-items: center; font-weight: 700; color: #fff; background: var(--i-acento);
}

.regla-ejemplo {
    padding: .8rem 1rem; border-radius: .8rem; margin-top: .7rem;
    background: var(--bs-body-bg); border: 1px solid var(--bs-border-color-translucent);
    border-left: 4px solid var(--i-acento);
}

.llamada {
    position: relative; overflow: hidden; border-radius: 1.5rem; padding: 4rem 1.5rem;
    background: linear-gradient(135deg, var(--i-medio) 0%, var(--i-acento) 100%);
}

/* ---------- Aparición al hacer scroll ---------- */
.js .revelar { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s ease; }
.js .revelar.visible { opacity: 1; transform: none; }

@media (max-width: 991.98px) {
    .maqueta-foto { transform: none; }
    .tarjeta-vidrio.t1 { left: 0; }
    .tarjeta-vidrio.t2 { right: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .mancha, .rejilla, .tarjeta-vidrio, .punto-vivo { animation: none; }
    .js .revelar { opacity: 1; transform: none; transition: none; }
    .foto-marco img, .tarjeta-sector img, .tarjeta-funcion { transition: none; }
}

/* Campo trampa antispam del formulario de contacto */
.campo-trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }