/* ============================================================
   ATELIER BLANC — INSPIRACIÓN V13
   Carrusel de profundidad, mini videos, atmósferas fotográficas,
   cinta panorámica y cierre asimétrico. Código sin minificar.
   ============================================================ */
:root { --iv-ink:#20362e; --iv-paper:#f7f3ed; --iv-gold:#b39275; --iv-text:#686b62; }
body { overflow-x:clip; }
main { overflow:clip; }
.iv-wrap { width:min(1370px,calc(100% - 100px)); margin-inline:auto; }
.iv-kicker { font-size:10px; font-weight:700; letter-spacing:.22em; color:#a17f64; }
.iv-hero h1,.iv-film h2,.iv-atmosphere h2,.iv-panorama h2,.iv-outro h2 { font-family:"Playfair Display",Georgia,serif; font-weight:400; letter-spacing:-.055em; }
.iv-hero em,.iv-film em,.iv-atmosphere em,.iv-panorama em,.iv-outro em { font-weight:400; color:var(--iv-gold); }

/* 01 / Carrusel flotante tipo coverflow */
.iv-hero { padding:125px 0 55px; background:#f1ebe2; color:var(--iv-ink); }
.iv-hero-heading { width:min(1370px,calc(100% - 100px)); margin:0 auto 42px; display:flex; align-items:end; justify-content:space-between; gap:45px; }
.iv-hero h1 { font-size:clamp(70px,8vw,125px); line-height:1.02; margin:22px 0 0; }
.iv-hero-intro { max-width:310px; padding-bottom:7px; }
.iv-small-line { display:block; width:65px; height:1px; background:#a78468; margin-bottom:25px; }
.iv-hero-intro p { color:#66695f; line-height:1.9; font-size:15px; }
.iv-hero-intro a { display:inline-flex; gap:24px; margin-top:23px; padding-bottom:12px; border-bottom:1px solid #283b32; font-size:10px; letter-spacing:.14em; text-decoration:none; color:var(--iv-ink); }
.iv-hero-intro a span { font-size:19px; }
.iv-stage { height:540px; position:relative; perspective:1600px; touch-action:pan-y; cursor:grab; outline-offset:8px; }
.iv-stage:active { cursor:grabbing; }
.iv-stage-track { position:relative; width:100%; height:100%; transform-style:preserve-3d; }
.iv-slide { position:absolute; top:0; left:50%; width:min(650px,58vw); height:100%; overflow:hidden; background:#b5a58d; border-radius:2px; transform:translateX(-50%) scale(.72); opacity:0; pointer-events:none; box-shadow:0 30px 65px #1c241b30; transition:transform .8s cubic-bezier(.2,.7,.2,1),opacity .8s,filter .8s; }
.iv-slide[data-position="0"] { transform:translateX(-50%) translateZ(90px) scale(1); z-index:5; opacity:1; pointer-events:auto; }
.iv-slide[data-position="-1"] { transform:translateX(calc(-50% - min(440px,38vw))) rotateY(12deg) scale(.81); z-index:3; opacity:.8; filter:brightness(.83); pointer-events:auto; }
.iv-slide[data-position="1"] { transform:translateX(calc(-50% + min(440px,38vw))) rotateY(-12deg) scale(.81); z-index:3; opacity:.8; filter:brightness(.83); pointer-events:auto; }
.iv-slide[data-position="-2"] { transform:translateX(calc(-50% - min(730px,65vw))) rotateY(16deg) scale(.66); z-index:1; opacity:.5; filter:brightness(.7); }
.iv-slide[data-position="2"] { transform:translateX(calc(-50% + min(730px,65vw))) rotateY(-16deg) scale(.66); z-index:1; opacity:.5; filter:brightness(.7); }
.iv-slide img { width:100%; height:100%; object-fit:cover; display:block; user-select:none; pointer-events:none; }
.iv-slide-shade { position:absolute; inset:30% 0 0; background:linear-gradient(transparent,#101e1ac7); }
.iv-slide-copy { position:absolute; bottom:35px; left:36px; right:30px; color:#fff; opacity:0; transform:translateY(15px); transition:opacity .4s,transform .4s; }
.iv-slide[data-position="0"] .iv-slide-copy { opacity:1; transform:none; transition-delay:.3s; }
.iv-slide-copy span { font-size:10px; letter-spacing:.2em; }
.iv-slide-copy h3 { font:400 clamp(32px,4vw,55px)/1.1 "Playfair Display",Georgia,serif; margin:14px 0 10px; }
.iv-slide-copy p { font-size:14px; color:#f1eee8; }
.iv-hero-bottom { width:min(1370px,calc(100% - 100px)); margin:32px auto 0; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.iv-hero-bottom > span { font-size:10px; letter-spacing:.15em; color:#7d776f; }
.iv-hero-bottom b { font-size:18px; margin-left:12px; }
.iv-carousel-controls { display:flex; align-items:center; gap:12px; font-size:13px; }
.iv-count-line { width:60px; height:1px; background:#a79d8e; }
.iv-carousel-controls button,.iv-film-footer button,.iv-panorama-bottom button { width:45px; height:45px; display:grid; place-items:center; border:1px solid #a7a89d; background:transparent; color:var(--iv-ink); border-radius:50%; cursor:pointer; font-size:20px; transition:background .3s,color .3s,transform .3s; }
.iv-carousel-controls button:first-of-type { margin-left:20px; }
.iv-carousel-controls button:hover,.iv-film-footer button:hover,.iv-panorama-bottom button:hover { background:var(--iv-ink); color:white; transform:translateY(-3px); }

/* 02 / Filmstrip: mini videos y fotos con proporciones variables */
.iv-film { background:#fffdfa; padding:130px 0 105px; color:var(--iv-ink); }
.iv-film-header { display:flex; justify-content:space-between; align-items:end; gap:50px; margin-bottom:55px; }
.iv-film h2 { font-size:clamp(53px,5.6vw,83px); line-height:1.14; margin:22px 0 0; }
.iv-film-header > p { max-width:310px; font-size:15px; line-height:1.95; color:var(--iv-text); }
.iv-film-scroll { display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding:0 max(5vw,calc((100vw - 1370px)/2)) 15px; cursor:grab; user-select:none; }
.iv-film-scroll::-webkit-scrollbar,.iv-panorama-rail::-webkit-scrollbar { display:none; }
.iv-film-scroll.dragging,.iv-panorama-rail.dragging { cursor:grabbing; scroll-snap-type:none; }
.iv-film-item { flex:0 0 clamp(270px,30vw,410px); scroll-snap-align:center; }
.iv-film-video { flex-basis:clamp(265px,25vw,350px); }
.iv-film-media { height:410px; overflow:hidden; position:relative; background:#ded3c5; }
.iv-film-video .iv-film-media { height:470px; }
.iv-film-video-alt { margin-top:42px; }
.iv-film-item:nth-child(2),.iv-film-item:nth-child(5) { margin-top:48px; }
.iv-film-media img,.iv-film-media video { width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s; }
.iv-film-media:hover img { transform:scale(1.06); }
.iv-film-video-alt video { filter:sepia(.23) hue-rotate(12deg) brightness(.94); }
.iv-video-label { position:absolute; left:17px; top:17px; background:#f9f4e9e8; color:#263b31; padding:10px 13px; font-size:9px; letter-spacing:.14em; }
.iv-film-caption { padding:20px 0 0; }
.iv-film-caption span { font-size:10px; letter-spacing:.17em; color:#a47e61; }
.iv-film-caption h3 { font:400 29px/1.25 "Playfair Display",Georgia,serif; margin:12px 0 0; }
.iv-film-footer,.iv-panorama-bottom { display:flex; justify-content:space-between; align-items:center; margin-top:35px; }
.iv-film-footer > span,.iv-panorama-bottom > span { font-size:10px; letter-spacing:.15em; color:#858078; }
.iv-film-footer > div,.iv-panorama-bottom > div { display:flex; gap:10px; }

/* 03 / Atmósferas: foto grande + panel con miniaturas */
.iv-atmosphere { padding:125px 0; background:#e9e1d6; color:var(--iv-ink); }
.iv-atmo-top { display:flex; align-items:end; justify-content:space-between; gap:50px; margin-bottom:58px; }
.iv-atmosphere h2 { font-size:clamp(60px,6.8vw,105px); line-height:1.1; margin:24px 0 0; }
.iv-atmo-top > p { max-width:335px; font-size:15px; line-height:1.95; color:#706f66; }
.iv-atmo-layout { width:min(1450px,calc(100% - 100px)); margin:auto; display:grid; grid-template-columns:1.22fr .78fr; min-height:630px; }
.iv-atmo-display { position:relative; overflow:hidden; min-height:630px; background:#bcae9d; }
.iv-atmo-display img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .45s,transform .8s; }
.iv-atmo-display img.is-changing { opacity:.12; transform:scale(1.04); }
.iv-atmo-image-label { position:absolute; bottom:0; left:0; right:0; padding:80px 35px 30px; display:flex; justify-content:space-between; gap:15px; background:linear-gradient(transparent,#0b1816a6); color:#fff; font-size:10px; letter-spacing:.18em; }
.iv-atmo-panel { background:#1f392f; color:#fff; padding:48px clamp(30px,4vw,65px); display:flex; flex-direction:column; justify-content:center; }
.iv-atmo-panel-top { display:flex; justify-content:space-between; gap:15px; color:#d6bb9c; font-size:9px; letter-spacing:.12em; }
.iv-atmo-panel h3 { font:400 clamp(39px,4vw,64px)/1.17 "Playfair Display",Georgia,serif; letter-spacing:-.045em; margin:60px 0 22px; }
.iv-atmo-panel h3 em { font-weight:400; color:#e0bea0; }
.iv-atmo-panel > p { font-size:15px; line-height:1.9; color:#d1d9d0; max-width:350px; min-height:85px; }
.iv-atmo-palette { display:flex; gap:9px; margin:20px 0 45px; }
.iv-atmo-palette span { width:28px; height:28px; border-radius:50%; border:1px solid #ffffff66; }
.iv-atmo-thumbs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.iv-atmo-choice { padding:0; border:2px solid transparent; background:transparent; color:#fff; cursor:pointer; text-align:left; opacity:.6; transition:opacity .3s,border-color .3s,transform .3s; }
.iv-atmo-choice.active,.iv-atmo-choice:hover { opacity:1; border-color:#e5c3a1; transform:translateY(-3px); }
.iv-atmo-choice img { display:block; width:100%; aspect-ratio:1.25; object-fit:cover; }
.iv-atmo-choice > span { display:block; padding:9px 4px; font-size:11px; line-height:1.5; }

/* 04 / Cinta panorámica con arrastre */
.iv-panorama { background:#f9f6f0; color:var(--iv-ink); padding:120px 0 105px; }
.iv-panorama-header { margin-bottom:45px; }
.iv-panorama h2 { font-size:clamp(55px,6vw,90px); line-height:1.13; margin:23px 0 20px; }
.iv-panorama-header p { color:#6c6d65; font-size:15px; }
.iv-panorama-rail { display:flex; gap:18px; padding:0 max(5vw,calc((100vw - 1370px)/2)) 10px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; cursor:grab; user-select:none; }
.iv-panorama-rail figure { flex:0 0 clamp(240px,29vw,425px); height:420px; position:relative; margin:0; overflow:hidden; scroll-snap-align:center; }
.iv-panorama-rail figure:nth-child(even) { height:340px; margin-top:80px; }
.iv-panorama-rail img { width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; transition:transform .8s; }
.iv-panorama-rail figure:hover img { transform:scale(1.05); }
.iv-panorama-rail figcaption { position:absolute; bottom:0; left:0; right:0; padding:60px 20px 20px; background:linear-gradient(transparent,#0008); color:#fff; font-size:11px; letter-spacing:.2em; }
.iv-panorama-rail figcaption span { margin-right:18px; }

/* 05 / Cierre asimétrico */
.iv-outro { display:grid; grid-template-columns:.8fr 1.2fr; background:#21372e; color:white; min-height:550px; }
.iv-outro-visual { min-height:550px; overflow:hidden; }
.iv-outro-visual img { width:100%; height:100%; object-fit:cover; display:block; }
.iv-outro-content { padding:80px 9vw; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; }
.iv-outro .iv-kicker { color:#d9ba98; }
.iv-outro h2 { font-size:clamp(50px,5.8vw,90px); line-height:1.13; margin:25px 0; }
.iv-outro h2 em { color:#e2c19f; }
.iv-outro-content p { max-width:430px; color:#d1d8d1; line-height:1.9; }
.iv-outro-content a { display:inline-flex; align-items:center; gap:32px; margin-top:38px; padding:18px 0; border-bottom:1px solid #d5b89b; color:white; text-decoration:none; font-size:11px; letter-spacing:.16em; transition:gap .3s; }
.iv-outro-content a:hover { gap:48px; }

/* Animaciones de scroll activas sin reglas prefers-reduced-motion. */
.reveal { opacity:0; transform:translateY(36px); transition:opacity .85s,transform .85s; }
.reveal.visible { opacity:1; transform:translateY(0); }

@media(max-width:1050px) {
    .iv-wrap,.iv-hero-heading,.iv-hero-bottom,.iv-atmo-layout { width:calc(100% - 60px); }
    .iv-stage { height:450px; }
    .iv-atmo-layout { grid-template-columns:1.1fr .9fr; }
    .iv-atmo-panel { padding:38px 25px; }
    .iv-atmo-display { min-height:560px; }
    .iv-atmo-panel h3 { margin-top:30px; }
    .iv-film-scroll,.iv-panorama-rail { padding-left:30px; padding-right:30px; }
}
@media(max-width:720px) {
    .iv-wrap,.iv-hero-heading,.iv-hero-bottom,.iv-atmo-layout { width:calc(100% - 36px); }
    .iv-hero { padding-top:85px; }
    .iv-hero-heading { display:block; margin-bottom:30px; }
    .iv-hero h1 { font-size:clamp(56px,13vw,84px); }
    .iv-hero-intro { margin-top:25px; max-width:380px; }
    .iv-small-line { margin-bottom:14px; }
    .iv-hero-intro p { font-size:14px; }
    .iv-hero-intro a { margin-top:12px; }
    .iv-stage { height:440px; }
    .iv-slide { width:78vw; }
    .iv-slide[data-position="-1"] { transform:translateX(calc(-50% - 62vw)) rotateY(8deg) scale(.78); }
    .iv-slide[data-position="1"] { transform:translateX(calc(-50% + 62vw)) rotateY(-8deg) scale(.78); }
    .iv-slide[data-position="-2"],.iv-slide[data-position="2"] { opacity:0; }
    .iv-slide-copy { bottom:23px; left:22px; right:20px; }
    .iv-slide-copy h3 { font-size:33px; }
    .iv-slide-copy p { font-size:12px; }
    .iv-hero-bottom { margin-top:20px; }
    .iv-bottom-right,.iv-hero-bottom > span:first-child { display:none; }
    .iv-carousel-controls { width:100%; justify-content:center; }
    .iv-film,.iv-panorama { padding:80px 0 65px; }
    .iv-film-header { display:block; margin-bottom:30px; }
    .iv-film h2,.iv-panorama h2 { font-size:clamp(46px,11vw,68px); }
    .iv-film-header > p { margin-top:20px; font-size:14px; }
    .iv-film-scroll,.iv-panorama-rail { gap:14px; padding-left:18px; padding-right:18px; }
    .iv-film-item { flex-basis:76vw; }
    .iv-film-video { flex-basis:67vw; }
    .iv-film-media { height:330px; }
    .iv-film-video .iv-film-media { height:385px; }
    .iv-film-video-alt { margin-top:20px; }
    .iv-film-item:nth-child(2),.iv-film-item:nth-child(5) { margin-top:24px; }
    .iv-film-caption h3 { font-size:25px; }
    .iv-atmosphere { padding:80px 0; }
    .iv-atmo-top { display:block; margin-bottom:30px; }
    .iv-atmosphere h2 { font-size:clamp(49px,11vw,75px); }
    .iv-atmo-top > p { margin-top:22px; font-size:14px; }
    .iv-atmo-layout { grid-template-columns:1fr; }
    .iv-atmo-display { min-height:440px; }
    .iv-atmo-panel { padding:38px 23px; }
    .iv-atmo-panel h3 { font-size:49px; margin:30px 0 15px; }
    .iv-atmo-panel > p { min-height:0; font-size:14px; }
    .iv-atmo-palette { margin-bottom:25px; }
    .iv-panorama-rail figure { flex-basis:76vw; height:350px; }
    .iv-panorama-rail figure:nth-child(even) { height:310px; margin-top:40px; }
    .iv-outro { grid-template-columns:1fr; }
    .iv-outro-visual { min-height:320px; height:320px; }
    .iv-outro-content { padding:65px 24px 75px; }
    .iv-outro h2 { font-size:clamp(50px,11vw,73px); }
}
@media(max-width:390px) {
    .iv-hero h1 { font-size:53px; }
    .iv-stage { height:380px; }
    .iv-slide-copy h3 { font-size:29px; }
    .iv-atmo-display { min-height:330px; }
    .iv-atmo-choice > span { font-size:10px; }
    .iv-atmo-panel h3 { font-size:43px; }
}