/* Capa inmersiva de Altéa (pedido de Gise 16/09/2026): video de fondo altea-bg.mp4 + velo,
   modo noche/día (☾/☀, clave localStorage altea_night = on|off, compartida con el sitio anterior)
   y apariciones al scrollear. Se aplica ENCIMA de site.css sin tocar textos ni estructura.
   Noche = default (sin JS también). Día = html[data-mode='day']. */

/* ---- video de fondo ---- */
.bg-video{position:fixed;inset:0;z-index:-1;overflow:hidden;background:var(--color-navy);pointer-events:none}
.bg-video video,.bg-video img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.6;transition:opacity .6s}
.bg-veil{position:absolute;inset:0;background:rgb(28 34 54 / 74%);transition:background .6s}
html[data-mode='day'] .bg-video{background:var(--color-cream)}
html[data-mode='day'] .bg-video video,html[data-mode='day'] .bg-video img{opacity:.42}
html[data-mode='day'] .bg-veil{background:rgb(252 250 247 / 86%)}

/* ---- botón noche/día (montado por immersive.mjs en el header, al lado de los idiomas) ---- */
.mode-toggle{order:2;background:transparent;border:1px solid transparent;border-radius:var(--radius-sm);color:var(--color-cream);font:inherit;font-size:17px;line-height:1;min-height:36px;min-width:36px;padding:6px 8px;cursor:pointer;opacity:.85}
.mode-toggle:hover{opacity:1;border-color:var(--color-gold)}
.mode-toggle[aria-pressed='true']{color:var(--color-gold)}
@media(max-width:900px){.mode-toggle{min-height:44px}}

/* ---- NOCHE (default): el sitio se vuelve translúcido sobre el video, texto crema ---- */
html:not([data-mode='day']){--color-cream-border:rgb(252 250 247 / 22%);--color-gray:rgb(252 250 247 / 7%)}
html:not([data-mode='day']) body{background:transparent;color:var(--color-cream)}
html:not([data-mode='day']) .section{background:transparent}
html:not([data-mode='day']) .section-gray{background:rgb(28 34 54 / 42%);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
html:not([data-mode='day']) .section-navy{background:rgb(28 34 54 / 58%)}
html:not([data-mode='day']) .hero,html:not([data-mode='day']) .service-hero{background:rgb(28 34 54 / 30%)}
html:not([data-mode='day']) .site-header{background:rgb(28 34 54 / 62%);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
html:not([data-mode='day']) .site-footer{background:rgb(28 34 54 / 70%)}
html:not([data-mode='day']) .button{background:var(--color-cream);border-color:var(--color-cream);color:var(--color-navy)}
html:not([data-mode='day']) .button:hover{background:#E8E3DA}
html:not([data-mode='day']) .button-secondary{background:transparent;border-color:var(--color-gold);color:var(--color-cream)}
html:not([data-mode='day']) .button-secondary:hover{background:rgb(252 250 247 / 12%);color:var(--color-cream)}
html:not([data-mode='day']) .studio-sign .logo{color:var(--color-gold)}
html:not([data-mode='day']) .work-card .project-art{color:var(--color-cream);background:rgb(252 250 247 / 8%)}
html:not([data-mode='day']) .work-card:nth-child(3) .project-art,html:not([data-mode='day']) .work-card:nth-child(6) .project-art{background:rgb(28 34 54 / 70%)}
html:not([data-mode='day']) .form-panel{background:rgb(28 34 54 / 55%);border-color:rgb(252 250 247 / 22%);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
html:not([data-mode='day']) input,html:not([data-mode='day']) textarea,html:not([data-mode='day']) select{color:var(--color-cream);border-color:rgb(252 250 247 / 40%)}
html:not([data-mode='day']) input::placeholder,html:not([data-mode='day']) textarea::placeholder{color:rgb(252 250 247 / 65%)}
html:not([data-mode='day']) select option{color:var(--color-navy)}
html:not([data-mode='day']) .ratings input,html:not([data-mode='day']) .consent input,html:not([data-mode='day']) .report meter{accent-color:var(--color-gold)}
html:not([data-mode='day']) .form-status[data-state='error']{border-color:var(--color-gold)}
html:not([data-mode='day']) .skip-link{background:var(--color-gold);color:var(--color-navy)}
html:not([data-mode='day']) .noscript{background:rgb(28 34 54 / 80%);color:var(--color-cream)}
html:not([data-mode='day']) .marquee-row img{background:rgb(252 250 247 / 8%)}
@media(max-width:900px){html:not([data-mode='day']) .site-nav{background:rgb(28 34 54 / 96%)}}

/* ---- DÍA: velo crema, texto navy (los colores de site.css), secciones vidriadas ---- */
html[data-mode='day'] body{background:transparent}
html[data-mode='day'] .section{background:transparent}
html[data-mode='day'] .section-gray{background:rgb(255 255 255 / 45%);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
html[data-mode='day'] .section-navy{background:rgb(28 34 54 / 86%)}
html[data-mode='day'] .hero,html[data-mode='day'] .service-hero{background:rgb(28 34 54 / 76%)}
html[data-mode='day'] .site-header{background:rgb(28 34 54 / 86%);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
html[data-mode='day'] .site-footer{background:rgb(28 34 54 / 90%)}
html[data-mode='day'] .form-panel{background:rgb(252 250 247 / 72%);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
html[data-mode='day'] .work-card .project-art{background:rgb(255 255 255 / 55%)}

/* ---- apariciones al scrollear (solo con JS y sin prefers-reduced-motion) ---- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .75s ease,transform .75s ease;transition-delay:var(--reveal-delay,0ms)}
.reveal.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}.bg-video video{display:none}}

/* ---- impresión: nada de video ni modo noche ---- */
@media print{.bg-video,.mode-toggle{display:none!important}html[data-mode] body,html:not([data-mode='day']) body{background:#fff;color:#1C2236}html:not([data-mode='day']) .section-gray,html:not([data-mode='day']) .form-panel{background:transparent}}