/* Ocho Veinticuatro — estilos de la web. Portado del mockup aprobado (sala de proyección). */
@import url(../fuentes/fuentes.css);

:root{--blur:10px;--tinta:#0B0A09;--marfil:#F3EFE7;--marfil-2:#EDE6D8;--gris:#BDB7AC;--gris-2:#8F8A80;--crema:#F4EFE6;--melocoton:#E9AE98;--azul:#8FA9CC}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--tinta);color:var(--marfil);font-family:'Inter Tight',-apple-system,'SF Pro Display',system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%}
a{color:var(--marfil);text-decoration:none}
a:hover{color:#FFFFFF}
button{font:inherit}
.raiz{position:relative;z-index:0;isolation:isolate;overflow-x:clip}
.salto{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--marfil);color:var(--tinta);padding:10px 16px;border-radius:999px}
.salto:focus{left:16px}
:focus-visible{outline:2px solid var(--melocoton);outline-offset:3px}

/* Fondos de sección: pasan a la capa de los ríos cuando el JS la pinta */
#nosotros{background:var(--crema)}
#videos{background:#000}
.con-lienzo #nosotros,.con-lienzo #videos{background:transparent}

/* Cabecera */
.cabecera{position:sticky;top:0;z-index:20;background:rgba(11,10,9,0.72);-webkit-backdrop-filter:saturate(180%) blur(22px);backdrop-filter:saturate(180%) blur(22px);padding:0 clamp(16px,4vw,56px);min-height:72px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 32px;transition:translate .45s cubic-bezier(.2,.7,.2,1)}
.cabecera.oculta{translate:0 -100%}
.nav a,.nav button{color:var(--gris);transition:color .25s;background:none;border:0;cursor:pointer;padding:12px 0;font-size:13px;letter-spacing:.02em}
.nav a:hover,.nav button:hover{color:#FFFFFF}
.subraya{background:linear-gradient(var(--melocoton),var(--melocoton)) left bottom/0 1px no-repeat !important;transition:background-size .5s cubic-bezier(.2,.7,.2,1),color .25s}
.subraya:hover{background-size:100% 1px !important}
.progreso{position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--melocoton);opacity:.7;transform-origin:left;transform:scaleX(0)}

/* Índice de bodas */
.tarjeta{display:flex;flex-direction:column;color:var(--marfil);background:none;border:0;padding:0;text-align:left;cursor:pointer}
.tarjeta[hidden]{display:none}
.tarjeta .medio{position:relative;overflow:hidden;border-radius:6px;background:#1A1916}
.tarjeta .zoom{position:absolute;inset:0;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.tarjeta:hover .zoom{transform:scale(1.05)}
.tarjeta .nombre{transition:color .25s}
.tarjeta:hover .nombre{color:#FFFFFF}
.tarjeta .play{transition:transform .45s cubic-bezier(.2,.7,.2,1),background .3s}
.tarjeta:hover .play{transform:translate(-50%,-50%) scale(1.14);background:rgba(243,239,231,0.28)}
.chip{position:relative;z-index:1;width:112px;min-height:44px;border:0;background:none;color:var(--gris);cursor:pointer;font-size:14px;transition:color .3s}
.chip:hover{color:#FFFFFF}
.chip.activo{color:var(--tinta)}
.pildora{position:absolute;top:4px;left:4px;width:112px;height:calc(100% - 8px);border-radius:999px;background:var(--marfil);transition:transform .5s cubic-bezier(.2,.8,.2,1)}

/* Formulario */
.campo{width:100%;background:transparent;border:0;border-bottom:1px solid #34322D;color:var(--marfil);font:inherit;font-size:18px;padding:14px 0;outline:none;transition:border-color .3s;border-radius:0}
.campo:focus{border-bottom-color:var(--marfil)}
.enviar{transition:background .3s,transform .3s}
.enviar:hover{background:#FFFFFF;transform:translateX(4px)}
.enviar[disabled]{opacity:.5;cursor:wait}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.estado-form{min-height:1.5em;font-size:15px;color:var(--gris)}
.estado-form.ok{color:var(--marfil)}
.estado-form.error{color:var(--melocoton)}

/* Piezas sueltas */
.palabra{display:inline-block;white-space:pre}
.letra{display:inline-block}
.diapo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.diapo.d1{opacity:1}
.cinta:hover .cinta-pista{animation-play-state:paused}
.cinta-item .zoom{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.cinta-item:hover .zoom{transform:scale(1.06)}
.boton-contacto{transition:opacity .4s,translate .5s cubic-bezier(.2,.7,.2,1),background .3s}
.boton-contacto:hover{background:rgba(11,10,9,0.9)}
.boton-contacto.oculto{opacity:0;translate:0 16px;pointer-events:none}
.boton-contacto .etiqueta{max-width:0;opacity:0;transition:max-width .45s cubic-bezier(.2,.7,.2,1),opacity .3s,margin .45s}
.boton-contacto:hover .etiqueta,.boton-contacto:focus-visible .etiqueta{max-width:120px;opacity:1;margin-left:10px}
.anim .boton-contacto{animation:entrarWa .9s 1.6s cubic-bezier(.2,1.4,.4,1) both}
.wa .etiqueta{max-width:0;opacity:0;transition:max-width .45s cubic-bezier(.2,.7,.2,1),opacity .3s,margin .45s}
.wa:hover .etiqueta,.wa:focus-visible .etiqueta{max-width:120px;opacity:1;margin-left:10px}
.marco{overflow:hidden;border-radius:6px;background:#1A1916;display:block;padding:0;border:0;cursor:zoom-in;width:100%}
.marco img{width:100%;height:100%;object-fit:cover;display:block}
.siguiente .flecha{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.siguiente:hover .flecha{transform:translateX(12px)}

/* Visor (vídeos de Vimeo y fotos) */
.visor{position:fixed;inset:0;z-index:50;background:rgba(5,5,4,0.88);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:72px clamp(16px,4vw,56px) 28px}
.visor[hidden]{display:none}
.visor-medio{position:relative;width:min(100%,1280px,calc((100vh - 220px) * 16 / 9));aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#000;box-shadow:0 40px 120px rgba(0,0,0,0.6)}
.visor-medio img,.visor-medio iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;object-fit:cover}
.visor-medio img[hidden],.visor.reproduciendo .visor-play{display:none}
.visor.foto .visor-medio{aspect-ratio:auto;width:auto;height:auto;max-width:min(100%,1600px);max-height:calc(100vh - 210px);background:transparent;box-shadow:none}
.visor.foto .visor-medio img{position:static;width:auto;height:auto;max-width:100%;max-height:calc(100vh - 210px);object-fit:contain}
.visor.foto .visor-play{display:none}
.visor-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:96px;height:96px;border-radius:50%;background:rgba(243,239,231,0.16);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(243,239,231,0.5);display:flex;align-items:center;justify-content:center;color:#FFFFFF;cursor:pointer}
.visor-pie{width:min(100%,1280px);display:flex;align-items:center;justify-content:space-between;gap:16px}
.visor-btn{width:52px;height:52px;flex:none;border-radius:50%;border:1px solid rgba(243,239,231,0.3);background:rgba(243,239,231,0.06);color:var(--marfil);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .25s,transform .25s}
.visor-btn:hover{background:rgba(243,239,231,0.18);transform:scale(1.06)}
.visor-cerrar{position:absolute;top:20px;right:20px}

/* Animaciones por tiempo */
.anim .diapo{animation:diapo 24s linear infinite both}
.anim .diapo.d1{opacity:0}
.anim .barra-llena{animation:llenar 24s linear infinite both}
.anim .enfocar-inicio{animation:enfocarInicio 2.4s cubic-bezier(.2,.7,.2,1) both}
.anim .sube{animation:subir 1.2s cubic-bezier(.16,.84,.24,1) both}
.anim .cabecera{animation:bajar 1s .15s cubic-bezier(.2,.7,.2,1) both}
.anim .pista-scroll{animation:pista 2.2s ease-in-out infinite}
.anim .vivo{animation:vivo 9s ease-in-out infinite alternate}
.anim .anillo{animation:anillo 2.4s cubic-bezier(.2,.7,.2,1) infinite}
.anim .cinta-pista{animation:cinta 60s linear infinite}
.anim .wa{animation:entrarWa .9s 1.4s cubic-bezier(.2,1.4,.4,1) both}
.anim .latido{animation:latido 2.6s 2.4s ease-out infinite}
.anim .visor{animation:visorEntra .45s cubic-bezier(.2,.7,.2,1) both}
.anim .visor-medio{animation:visorMedio .7s cubic-bezier(.2,.7,.2,1) both}
.anim .filtrado{animation:filtrado .7s cubic-bezier(.2,.7,.2,1) both}
@keyframes diapo{0%{opacity:0;transform:scale(1.12)}5%{opacity:1}25%{opacity:1}31%{opacity:0;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
@keyframes llenar{0%{transform:scaleX(0);opacity:1}25%{transform:scaleX(1);opacity:1}26%,100%{transform:scaleX(1);opacity:0}}
@keyframes enfocarInicio{from{filter:blur(26px);transform:scale(1.06)}to{filter:blur(0);transform:scale(1)}}
@keyframes subir{from{transform:translateY(108%)}to{transform:none}}
@keyframes bajar{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:none}}
@keyframes pista{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@keyframes vivo{0%{transform:scale(1.04) translate(0,0)}100%{transform:scale(1.16) translate(-3%,-2%)}}
@keyframes anillo{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.7);opacity:0}}
@keyframes cinta{to{transform:translateX(-50%)}}
@keyframes entrarWa{from{opacity:0;transform:translateY(40px) scale(.6)}to{opacity:1;transform:none}}
@keyframes latido{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(1.8);opacity:0}}
@keyframes visorEntra{from{opacity:0}to{opacity:1}}
@keyframes visorMedio{from{opacity:0;transform:scale(.92) translateY(30px);filter:blur(10px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes filtrado{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}

/* Animaciones ligadas al scroll */
@keyframes enfoque{from{opacity:0;filter:blur(var(--blur));transform:translateY(22px)}to{opacity:1;filter:blur(0);transform:none}}
@keyframes encender{from{opacity:.13;filter:blur(5px)}to{opacity:1;filter:blur(0)}}
@keyframes encoger{to{clip-path:inset(6% 4% 6% 4% round 28px)}}
@keyframes salir{to{opacity:0;filter:blur(18px);transform:translateY(-90px)}}
@keyframes izq{from{transform:translateX(0)}to{transform:translateX(-38%)}}
@keyframes der{from{transform:translateX(-38%)}to{transform:translateX(0)}}
@keyframes girar{to{transform:rotate(540deg)}}
@keyframes flotar{from{opacity:0;filter:blur(var(--blur));transform:translateY(var(--desde))}20%{opacity:1;filter:blur(0)}to{opacity:1;filter:blur(0);transform:translateY(var(--hasta))}}
@keyframes avance{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes capa{from{transform:translateY(var(--desde))}to{transform:translateY(var(--hasta))}}
@keyframes cortina{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes cortinaLateral{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes acercar{from{transform:scale(1.25)}to{transform:scale(1)}}
@keyframes abrir{from{clip-path:inset(0 15% round 32px)}to{clip-path:inset(0 0 round 0)}}
@keyframes alzar{from{opacity:0;transform:translateY(70%) rotate(6deg)}to{opacity:1;transform:none}}
@keyframes expandir{from{clip-path:inset(14% 20% 14% 20% round 32px)}to{clip-path:inset(0 0 0 0 round 0px)}}
@keyframes alejar{from{transform:scale(1.3)}to{transform:scale(1)}}
@keyframes aparecerBoton{from{opacity:0;transform:translate(-50%,-50%) scale(.6)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes revelar{from{filter:blur(var(--blur)) saturate(.5);transform:scale(1.18)}to{filter:blur(0) saturate(1);transform:scale(1)}}

/* Ríos del fondo */
.lienzo{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:clip;isolation:isolate}
.banda{position:absolute;left:0;right:0}
.tramo{position:absolute;left:0;right:0;z-index:-1;pointer-events:none;view-timeline-name:--tramo}
.lienzo .tramo{z-index:1;mix-blend-mode:difference}
.tramo svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.rio{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.tramo-lejos{filter:blur(1.5px)}
.tramo-cerca{filter:blur(9px)}
@keyframes dibujarRio{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes focoRio{0%{filter:blur(7px);opacity:.25}40%,60%{filter:blur(.5px);opacity:1}100%{filter:blur(7px);opacity:.25}}
@keyframes paralajeRio{from{transform:translateY(60px)}to{transform:translateY(-60px)}}

@supports (animation-timeline: view()){
.anim .rio{stroke-dashoffset:1;animation:dibujarRio linear both;animation-timeline:--tramo}
.anim .tramo-lejos{animation:focoRio linear both;animation-timeline:--tramo}
.anim .tramo-cerca{animation:paralajeRio linear both;animation-timeline:--tramo}
.anim .progreso{animation:avance linear both;animation-timeline:scroll()}
.anim .marco-hero{animation:encoger linear both;animation-timeline:--hero;animation-range:contain 0% contain 100%}
.anim .texto-hero{animation:salir linear both;animation-timeline:--hero;animation-range:contain 0% contain 60%}
.anim .foco{animation:enfoque linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
.anim .entra{animation:enfoque linear both,filtrado .7s cubic-bezier(.2,.7,.2,1) backwards;animation-timeline:view(),auto}
.anim .fila-izq{animation:izq linear both;animation-timeline:view();animation-range:cover}
.anim .fila-der{animation:der linear both;animation-timeline:view();animation-range:cover}
.anim .gira{animation:girar linear both;animation-timeline:scroll()}
.anim .titular-man{animation:enfoque linear both;animation-timeline:--man}
.anim .palabra{animation:encender linear both;animation-timeline:--man}
.anim .flota{animation:flotar linear both;animation-timeline:--man;animation-range:contain 0% contain 100%}
.anim .capa{animation:capa linear both;animation-timeline:view();animation-range:cover}
.anim .cortina{animation:cortina linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
.anim .cortina-lateral{animation:cortinaLateral linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
.anim .revelar{animation:revelar linear both;animation-timeline:view();animation-range:entry 0% cover 30%}
.anim .acercar{animation:acercar linear both;animation-timeline:view();animation-range:entry 0% cover 35%}
.anim .abrir{animation:abrir linear both;animation-timeline:view();animation-range:entry 0% cover 30%}
.anim .letra{animation:alzar linear both;animation-timeline:--pie}
.anim .expandir{animation:expandir linear both;animation-timeline:--portada;animation-range:contain 0% contain 70%}
.anim .alejar{animation:alejar linear both;animation-timeline:--portada;animation-range:contain 0% contain 100%}
.anim .boton-play{animation:aparecerBoton linear both;animation-timeline:--portada;animation-range:contain 55% contain 80%}
.anim .expandir-sig{animation:expandir linear both;animation-timeline:--sig;animation-range:contain 0% contain 80%}
.anim .alejar-sig{animation:alejar linear both;animation-timeline:--sig;animation-range:contain 0% contain 100%}
}
/* Sin animation-timeline (Safari 18, iOS 18, Firefox) las mueve el respaldo de web.js */
@media (max-width: 1180px){
.flota{opacity:.55}
}
@media (max-width: 600px){
.cabecera{gap:6px 12px;padding:0 16px}
.cabecera > a img{width:40px;height:40px}
.cabecera .nav{gap:0 16px !important}
.cabecera .siguenos{display:none !important}
}
@media (max-width: 760px){
.flota{opacity:.4}
.indice .ancha{grid-column:span 1 !important}
.galeria > *{grid-column:1 / -1 !important;margin-top:0 !important}
.capa{--desde:0% !important;--hasta:0% !important}
.nav .opcional{display:none}
}
@media (prefers-reduced-motion: reduce){
html{scroll-behavior:auto}
.anim *,.anim{animation:none !important}
.diapo.d1{opacity:1 !important}
}