/* =====================================================================
   Casa Gobelas · hoja de estilos de la landing (edición local)
   Paleta heredada del tema gobelas7. Sin dependencias externas: la
   tipografia es la de marca (brandbook de Casa Gobelas), servida en local.
   ===================================================================== */

/* ---------- tipografia de marca (01/10/2026) ----------
   Titulares y destacados: Modern Heritage Void, siempre en mayusculas. Textos, listas, etiquetas y
   rotulos pequenos: Basic (solo Regular; no hay Light y no se sintetiza: se juega con cuerpo, color y
   espaciado). Modern Heritage no trae ª, º ni el punto medio: su pila lleva Basic detras, asi esos
   signos caen en Basic y no en una fuente del sistema. */
@font-face{font-family:"Modern Heritage Void";src:url("../fonts/ModernHeritage-Void.woff2") format("woff2"),url("../fonts/ModernHeritage-Void.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Basic";src:url("../fonts/Basic-Regular.woff2") format("woff2"),url("../fonts/Basic-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}

:root{
  --green:#26391f; --green-2:#1c2a17; --beige:#d4c19e; --beige-2:#c7b38e;
  --lime:#a9bc70; --cream:#f4f1e7; --ink:#26391f;
  --mist:133,140,131;          /* cielo del boceto (fila de arriba del video), en r,g,b: su fondo mientras carga */
  --max:1220px; --gutter:clamp(20px,4.2vw,64px);
  --font-body:"Basic","Helvetica Neue",Arial,sans-serif;
  --font-display:"Modern Heritage Void","Basic",sans-serif;
  --ease-out:cubic-bezier(.2,.7,.2,1); --ease-in-out:cubic-bezier(.65,0,.35,1);
}
*,*::before,*::after{box-sizing:border-box}
html{font-synthesis:none;scroll-behavior:auto!important;scrollbar-width:none;-ms-overflow-style:none;-webkit-text-size-adjust:100%}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;width:0;height:0}
html,body{width:100%;margin:0;padding:0;background:var(--green)}
body{overflow-x:clip;color:var(--ink);font-family:var(--font-body);font-weight:400;line-height:1.5;-webkit-font-smoothing:antialiased}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:clip}
img,video,svg,canvas{display:block}
h1,h2,h3,p{margin:0}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
.sr{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* ---------- utilidades tipográficas ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:14px;font-size:10.5px;font-weight:400;letter-spacing:.24em;text-transform:uppercase}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor;opacity:.75}
.display{font-family:var(--font-display);font-weight:400;line-height:1.1;letter-spacing:.01em;text-transform:uppercase}
.display em{font-style:normal;font-weight:400;color:var(--beige)}
/* punto medio entre palabras de Modern Heritage: cae en Basic, que lo centra en su altura de x; se sube a
   media altura de las mayusculas */
.mh-dot{position:relative;top:-.09em;font-family:var(--font-body)}

/* ---------- preloader ---------- */
.preloader{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:var(--green);transition:opacity 1.1s var(--ease-in-out),visibility 0s linear 1.1s}
.preloader.is-done{opacity:0;visibility:hidden}
.preloader__logo{width:88px;opacity:0;animation:logo-in 1.6s ease .3s forwards}
.preloader__logo svg{width:100%;height:auto}
.preloader__bar{position:absolute;left:50%;bottom:clamp(36px,7vh,72px);width:120px;height:1px;transform:translateX(-50%);background:rgba(244,241,231,.16);overflow:hidden}
.preloader__bar i{position:absolute;inset:0 auto 0 0;width:0;background:var(--beige);transition:width .3s ease}
@keyframes logo-in{to{opacity:1}}

/* ---------- navegación ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:120;display:flex;align-items:center;justify-content:space-between;padding:clamp(16px,2.4vw,28px) var(--gutter);color:var(--cream);opacity:0;transform:translateY(-8px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out),color .5s;pointer-events:none}
.nav.is-on{opacity:1;transform:none;pointer-events:auto}
.nav.is-light{color:var(--green)}
.nav.is-hidden-panel{opacity:0;pointer-events:none}
.nav__brand{display:flex;align-items:center;gap:14px}
.nav__mark{width:22px;height:auto}
.nav__cta{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:400;padding:10px 16px;border:1px solid currentColor;border-radius:999px;transition:background .35s,color .35s}
@media(hover:hover){.nav__cta:hover{background:var(--cream);color:var(--green)}}
@media(hover:hover){.nav.is-light .nav__cta:hover{background:var(--green);color:var(--cream)}}
.nav__word{width:auto;height:10px;margin-top:1px}
@media(max-width:767px){.nav__word{display:none}}

/* ---------- página ---------- */
.page{position:relative;width:100%;overflow-x:clip;background:var(--beige);color:var(--ink)}
.page::before{content:"";display:block;width:100%;height:100vh;height:max(100svh,620px);pointer-events:none}

/* ---------- intro (vídeo fijo detrás) ---------- */
.intro{position:fixed;inset:0;z-index:0;width:100%;height:100vh;height:100svh;min-height:620px;overflow:hidden;background:var(--green);pointer-events:none}
.intro__video{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;background:var(--green)}
.intro::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to bottom,rgba(20,30,15,.18),rgba(20,30,15,0) 35%,rgba(20,30,15,.28))}
.intro__green{position:absolute;inset:0;z-index:2;background:var(--green);animation:green-out 1.6s ease 2.3s forwards}
.intro__logo{position:absolute;top:50%;left:50%;z-index:3;width:92px;--rise:0px;transform:translate(-50%,-50%) translate3d(0,var(--rise),0);opacity:0;animation:logo-in 1.8s ease .4s forwards;will-change:transform,opacity}
.intro__logo svg{width:100%;height:auto}
.intro__scroll{position:absolute;z-index:3;right:var(--gutter);bottom:clamp(28px,6vh,64px);display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--cream);font-size:9px;letter-spacing:.28em;text-transform:uppercase;opacity:0;animation:fade-up 1.2s var(--ease-out) 3.6s forwards}
.intro__scroll i{width:1px;height:46px;background:linear-gradient(to bottom,rgba(244,241,231,0),var(--cream) 40%,rgba(244,241,231,0));animation:hint 3.6s cubic-bezier(.45,0,.25,1) infinite}
@keyframes green-out{to{opacity:0}}
@keyframes fade-up{to{opacity:1;transform:none}}
@keyframes hint{0%{transform:translateY(-10px);opacity:0}40%{opacity:.85}100%{transform:translateY(10px);opacity:0}}
@media(max-width:767px){.intro{min-height:560px}.intro__logo{width:76px}.intro__scroll{display:none}}

/* ---------- boceto ---------- */
.sketch{position:relative;z-index:10;width:100%;height:min(100vh,56.2vw);height:min(100svh,56.2vw);overflow:hidden;background:rgb(var(--mist));--skf:0px;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.08) calc(var(--skf) * .16),rgba(0,0,0,.3) calc(var(--skf) * .38),rgba(0,0,0,.62) calc(var(--skf) * .62),rgba(0,0,0,.88) calc(var(--skf) * .84),#000 var(--skf));
          mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.08) calc(var(--skf) * .16),rgba(0,0,0,.3) calc(var(--skf) * .38),rgba(0,0,0,.62) calc(var(--skf) * .62),rgba(0,0,0,.88) calc(var(--skf) * .84),#000 var(--skf))}
.sketch__video{position:absolute;inset:0;width:100%;height:100%}
.sketch__video{z-index:1;object-fit:cover;pointer-events:none}
@media(max-width:767px){.sketch{height:auto;min-height:0;aspect-ratio:1/1;isolation:isolate;background:rgb(var(--mist))}}


/* reveal */
.rv{opacity:0;transform:translateY(22px);transition:opacity 1s var(--ease-out),transform 1s var(--ease-out)}
.rv.is-in{opacity:1;transform:none}
.rv[data-delay="1"]{transition-delay:.12s}.rv[data-delay="2"]{transition-delay:.24s}.rv[data-delay="3"]{transition-delay:.36s}
.lines .l{display:block;overflow:hidden}
.lines .l i{display:block;font-style:inherit;transform:translateY(112%);transition:transform 1.1s var(--ease-out)}
.lines.is-in .l i{transform:none}
.lines.is-in .l:nth-child(2) i{transition-delay:.08s}.lines.is-in .l:nth-child(3) i{transition-delay:.16s}
.lines.is-out .l i{transform:translateY(-112%);transition-duration:.7s}

/* ---------- bloque Casa Gobelas: base del escenario fijado (el resto, al final) ---------- */
.seq{position:relative;z-index:15;height:380vh;background:var(--green-2)}
.seq__stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#0f160d;color:var(--cream)}
.seq__render{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:fill;will-change:opacity}
/* capa SVG alineada al render (posicionada por JS); el dibujo de las plantas va al final */
.seq__svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}

/* etiquetas HTML de los edificios */
.tag{position:absolute;z-index:6;left:0;top:0;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;pointer-events:none;opacity:0;transition:opacity .6s var(--ease-out)}
.seq__stage.is-live .tag{opacity:1}
.tag__line{width:1px;height:54px;background:linear-gradient(to top,var(--cream),rgba(244,241,231,.2));transform-origin:bottom;transition:transform .5s var(--ease-out)}
.tag__box{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:12px;padding:12px 18px;border:1px solid rgba(244,241,231,.35);border-radius:2px;background:rgba(20,30,15,.22);transition:background .4s,border-color .4s,transform .5s var(--ease-out)}
.tag__name{font-family:var(--font-display);font-size:clamp(17px,1.5vw,22px);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.tag__cta{display:flex;align-items:center;gap:8px;font-size:9px;letter-spacing:.24em;text-transform:uppercase;font-weight:400;opacity:.7;transition:opacity .4s}
.tag__cta::after{content:"";width:6px;height:6px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.tag.is-hover .tag__box{background:rgba(244,241,231,.94);color:var(--green);border-color:transparent;transform:translateY(-4px)}
.tag.is-hover .tag__cta{opacity:1}
.tag.is-dim{opacity:.3}
@media(max-width:767px){.tag__line{height:34px}.tag__box{padding:9px 12px}.tag__name{font-size:15px}}

/* interfaz sobre la secuencia */
.seq__ui{position:absolute;inset:0;z-index:5;pointer-events:none}
.seq__hint{position:absolute;left:50%;bottom:clamp(24px,5vh,56px);transform:translateX(-50%);display:flex;align-items:center;gap:14px;padding:10px 18px;border-radius:999px;border:1px solid rgba(244,241,231,.28);background:rgba(20,30,15,.28);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;white-space:nowrap;opacity:0;transform:translate(-50%,10px);transition:opacity .6s,transform .6s var(--ease-out)}
.seq__hint.is-in{opacity:1;transform:translateX(-50%)}
.seq__hint i{width:5px;height:5px;border-radius:50%;background:var(--brass)}
@media(max-width:767px){.seq{height:320vh}}

/* ---------- panel de fichas ---------- */
.panel{position:fixed;inset:0;z-index:150;display:grid;grid-template-rows:auto 1fr auto;background:rgba(22,33,18,.94);color:var(--cream);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .5s var(--ease-out),visibility 0s linear .5s}
.panel.is-open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .5s var(--ease-out),visibility 0s}
.panel__bar{display:flex;align-items:center;justify-content:space-between;padding:clamp(16px,2.4vw,28px) var(--gutter)}
.panel__title{display:flex;align-items:baseline;gap:18px}
.panel__title b{font-family:var(--font-display);font-weight:400;font-size:clamp(15px,1.4vw,21px);letter-spacing:.04em;text-transform:uppercase}
.panel__title span{font-size:10px;letter-spacing:.22em;text-transform:uppercase;opacity:.7}
.panel__close{display:flex;align-items:center;gap:12px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;font-weight:400;padding:10px 0}
.panel__close i{position:relative;width:14px;height:14px}
.panel__close i::before,.panel__close i::after{content:"";position:absolute;left:0;top:50%;width:100%;height:1px;background:currentColor;transform:rotate(45deg)}
.panel__close i::after{transform:rotate(-45deg)}
.panel__stage{position:relative;display:grid;place-items:center;padding:0 clamp(60px,8vw,120px);min-height:0}
.panel__img{position:absolute;max-width:calc(100% - 2*clamp(60px,8vw,120px));max-height:100%;width:auto;height:auto;object-fit:contain;opacity:0;transform:scale(.985);transition:opacity .45s var(--ease-out),transform .6s var(--ease-out);user-select:none;-webkit-user-drag:none;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.panel__img.is-on{opacity:1;transform:none}
.panel__arrow{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;display:grid;place-items:center;border:1px solid rgba(244,241,231,.35);border-radius:50%;transition:background .3s,border-color .3s}
@media(hover:hover){.panel__arrow:hover{background:var(--cream);color:var(--green);border-color:transparent}}
.panel__arrow--prev{left:var(--gutter)}.panel__arrow--next{right:var(--gutter)}
.panel__arrow span{width:10px;height:10px;border-top:1px solid currentColor;border-right:1px solid currentColor}
.panel__arrow--prev span{transform:translateX(2px) rotate(-135deg)}.panel__arrow--next span{transform:translateX(-2px) rotate(45deg)}
.panel__thumbs{display:flex;gap:8px;padding:18px var(--gutter) clamp(18px,3vh,30px);overflow-x:auto;scrollbar-width:none;justify-content:center}
.panel__thumbs::-webkit-scrollbar{display:none}
.panel__thumb{flex:0 0 auto;width:64px;aspect-ratio:4/3;overflow:hidden;opacity:.4;border:1px solid transparent;transition:opacity .3s,border-color .3s;background:#0d140b}
.panel__thumb img{width:100%;height:100%;object-fit:cover}
.panel__thumb.is-on{opacity:1}
@media(hover:hover){.panel__thumb:hover{opacity:1}}
.panel__thumb.is-on{border-color:var(--beige)}
@media(max-width:767px){
  .panel__stage{padding:0 12px}.panel__img{max-width:calc(100% - 24px)}
  .panel__arrow{width:40px;height:40px}.panel__arrow--prev{left:8px}.panel__arrow--next{right:8px}
  .panel__thumbs{justify-content:flex-start}.panel__thumb{width:48px}
}


@media(prefers-reduced-motion:reduce){
  .rv,.lines .l i{transition-duration:.01ms!important}
  .intro__scroll i,.bld__pin--ring{animation:none!important}
}

/* modo verificación por URL (?p=): sin transiciones para capturar estados */
.is-debug *,.is-debug *::before,.is-debug *::after{transition:none!important;animation-duration:.01ms!important;animation-delay:0s!important}

/* =====================================================================
   PIEL v2 · registro oscuro y editorial: tipografia grande, bloques y tonos.
   Todo lo de arriba es el motor (intro, boceto, bloque fijado, panel); aqui
   se redefine la piel. Las secciones nuevas llevan su hoja (secciones.css).
   ===================================================================== */

:root{
  --ink-0:#0d120a;            /* fondo mas profundo */
  --ink-1:#151d11;            /* base */
  --ink-2:#1d2718;            /* superficie */
  --paper:#f1efe4;            /* los dos momentos claros */
  --cream:#f2f0e6;
  --beige:#d4c19e;
  --muted:rgba(242,240,230,.56);
  --muted-2:rgba(242,240,230,.34);
  --hair:rgba(242,240,230,.14);
  --hair-2:rgba(242,240,230,.28);
  --hair-d:rgba(21,29,17,.16);
  --max:1320px;
  --gutter:clamp(20px,4.6vw,72px);
  --mar:clamp(72px,10vw,150px);
  --ivory:#f3efe5;            /* secciones claras (piscina y contacto) */
  --stone:#e6ddcc;
  --ink-on-ivory:#1d2718;     /* tinta sobre marfil */
  --brass:#a88a57;            /* acento */
  --e-soft:cubic-bezier(.22,1,.36,1);   /* quint de salida: lo que se asienta sin prisa */
}
html,body{background:var(--ink-1)}
body{color:var(--cream)}
.page{background:var(--ink-1);color:var(--cream)}

/* ---------- tipografia de la capa ---------- */
.t-xl{font-family:var(--font-display);font-weight:400;line-height:1.08;letter-spacing:0;text-transform:uppercase;font-size:clamp(30px,5vw,82px)}
.t-l{font-family:var(--font-display);font-weight:400;line-height:1.12;letter-spacing:.01em;text-transform:uppercase;font-size:clamp(24px,3.3vw,50px)}
.t-m{font-family:var(--font-display);font-weight:400;line-height:1.2;letter-spacing:.02em;text-transform:uppercase;font-size:clamp(18px,1.8vw,27px)}
/* los <em> de los titulares se destacan con color, no con cursiva (Modern Heritage no tiene cursiva) */
.t-xl em,.t-l em,.t-m em{font-style:normal;color:var(--beige)}
.micro{display:block;font-size:9.5px;font-weight:400;letter-spacing:.28em;text-transform:uppercase;color:var(--muted-2)}
.lead{font-size:clamp(14px,1.15vw,16.5px);line-height:1.7;font-weight:400;color:var(--muted);max-width:52ch}
.num{font-family:var(--font-body);font-size:11px;letter-spacing:.14em;color:var(--muted-2)}

/* ---------- bloques ---------- */
.blk{position:relative;z-index:20;padding:var(--mar) 0;background:var(--ink-1)}
.blk--deep{background:var(--ink-0)}
.blk--soft{background:var(--ink-2)}
.blk--paper{background:var(--paper);color:var(--ink-1)}
.blk--paper .lead{color:rgba(21,29,17,.7)}
.blk--paper .micro{color:rgba(21,29,17,.45)}
.blk--paper .t-xl em,.blk--paper .t-l em,.blk--paper .t-m em{color:#6f6a4f}
.blk--flush{padding:0}
.wrap{width:min(var(--max),100% - 2*var(--gutter));margin:0 auto}
.wrap--narrow{width:min(900px,100% - 2*var(--gutter))}

/* ---------- navegacion minima ----------
   Crema sobre fotos y sobre el verde, tinta sobre marfil (.is-light, secciones con data-theme="light").
   Sobre una foto lleva detras un degradado oscuro muy leve (.is-scrim) que se funde hacia abajo; gobelas.js
   decide segun lo que pasa bajo la barra. */
.nav{padding:clamp(18px,2.6vw,30px) var(--gutter)}
.nav::before{content:"";position:absolute;inset:0 0 auto 0;z-index:-1;height:calc(100% + 64px);pointer-events:none;opacity:0;transition:opacity 1.2s ease;
  background:linear-gradient(to bottom,rgba(26,24,16,.38) 0%,rgba(26,24,16,.27) 30%,rgba(26,24,16,.14) 58%,rgba(26,24,16,.045) 82%,rgba(26,24,16,0))}
.nav.is-scrim::before{opacity:1}
.nav.is-light{color:var(--ink-on-ivory)}
.nav__cta{border-color:var(--hair-2);padding:11px 20px;transition:background .6s ease,color .6s ease,border-color .6s ease}
.nav.is-light .nav__cta{border-color:rgba(29,39,24,.3)}
@media(hover:hover){.nav.is-light .nav__cta:hover{background:var(--ink-on-ivory);color:var(--ivory)}}
.nav__prog{position:fixed;left:0;top:0;z-index:130;height:1px;width:100%;background:transparent;pointer-events:none}
.nav__prog i{display:block;height:100%;width:0;background:var(--beige);opacity:.85}

/* ---------- portada ---------- */
.intro__logo{width:clamp(80px,7vw,104px)}
.intro__scroll{left:50%;right:auto;transform:translateX(-50%);bottom:clamp(30px,5vh,48px);gap:12px}
.intro__scroll i{height:38px}
@media(max-width:767px){.intro__scroll{display:flex}}

/* ---------- panel de fichas, mismo tono ---------- */
.panel{background:rgba(9,13,7,.96)}
.panel__thumb{background:var(--ink-2)}

/* ---------- reveals de bloque ---------- */
.rv{opacity:0;transform:translateY(18px);transition:opacity 1.4s var(--e-soft),transform 1.6s var(--e-soft)}
.rv.is-in{opacity:1;transform:none}
.rv[data-delay="1"]{transition-delay:.1s}
.rv[data-delay="2"]{transition-delay:.2s}
.rv[data-delay="3"]{transition-delay:.3s}
.rv[data-delay="4"]{transition-delay:.4s}

/* la secuencia se funde con el bloque siguiente */
.seq{background:var(--ink-0)}
.seq__stage{background:var(--ink-0)}
.seq__hint{background:rgba(10,15,8,.46);border-color:var(--hair-2)}
.tag__box{background:rgba(10,15,8,.3)}

.blk--paper .num{color:rgba(21,29,17,.4)}

/* ---------- ajustes finos v2 ---------- */
.intro::after{background:linear-gradient(to bottom,rgba(10,15,8,.34),rgba(10,15,8,.1) 32%,rgba(10,15,8,.16) 55%,rgba(10,15,8,.62))}

/* =====================================================================
   ENTRADA · el video se abre desde el centro: una linea, un rectangulo
   y despues la pantalla completa. El logotipo no se mueve en todo el gesto.
   ===================================================================== */
.intro__frame{position:absolute;inset:0;z-index:1;overflow:hidden;background:var(--green);
  clip-path:inset(0 0 0 0);will-change:clip-path;
  animation:frame-reveal 2.3s 1.1s backwards}
.intro__frame::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to bottom,rgba(10,15,8,.34),rgba(10,15,8,.1) 32%,rgba(10,15,8,.16) 55%,rgba(10,15,8,.62))}
.intro::after{display:none}
.intro__video{z-index:1}

@keyframes frame-reveal{
  0%   {clip-path:inset(50% 50% 50% 50%);   animation-timing-function:cubic-bezier(.2,.8,.2,1)}
  16%  {clip-path:inset(49.6% 31% 49.6% 31%); animation-timing-function:cubic-bezier(.32,.72,.2,1)}
  44%  {clip-path:inset(37% 31% 37% 31%);   animation-timing-function:linear}
  60%  {clip-path:inset(37% 31% 37% 31%);   animation-timing-function:cubic-bezier(.76,0,.24,1)}
  100% {clip-path:inset(0 0 0 0)}
}
@media(max-width:767px){
  @keyframes frame-reveal{
    0%   {clip-path:inset(50% 50% 50% 50%);   animation-timing-function:cubic-bezier(.2,.8,.2,1)}
    16%  {clip-path:inset(49.6% 14% 49.6% 14%); animation-timing-function:cubic-bezier(.32,.72,.2,1)}
    44%  {clip-path:inset(33% 14% 33% 14%);   animation-timing-function:linear}
    60%  {clip-path:inset(33% 14% 33% 14%);   animation-timing-function:cubic-bezier(.76,0,.24,1)}
    100% {clip-path:inset(0 0 0 0)}
  }
}

/* el logotipo ya esta colocado antes de que se abra el marco */
.intro__logo{opacity:1;animation:none}
.preloader__logo{width:clamp(80px,7vw,104px);animation:none;opacity:1}
.preloader{transition:opacity .85s var(--ease-in-out),visibility 0s linear .85s}
.preloader__bar{bottom:clamp(30px,6vh,60px)}
.intro__scroll{animation-delay:3.55s}

@media(prefers-reduced-motion:reduce){
  .intro__frame{animation:none}
}

/* ---------- intro minimalista: el logotipo y la linea, nada mas ---------- */
.intro__scroll{bottom:clamp(34px,6vh,60px);animation-delay:3.3s}
.intro__scroll i{height:54px}

/* =====================================================================
   MOVIMIENTO v3 · el motor: curvas, estado vivo, panel, entrada
   y relevos.
   Todo lo que va aqui pisa a las reglas de arriba del mismo componente.
   ===================================================================== */
:root{
  --e-out:cubic-bezier(.16,1,.3,1);          /* salida larga, sin rebote */
  --e-io:cubic-bezier(.76,0,.24,1);          /* entrada y salida simetricas */
  --e-in:cubic-bezier(.55,0,.8,.3);          /* para lo que se recoge */
  --e-draw:cubic-bezier(.62,.02,.18,1);      /* el trazo del rotulador */
  --e-land:cubic-bezier(.19,1,.22,1);        /* aterrizaje largo (se afina con linear()) */
}
@supports (transition-timing-function:linear(0,1)){
  :root{--e-land:linear(0,.2685,.465,.6089,.7142,.7913,.8478,.8891,.9193,.9415,.9577,.9695,.9782,.9846,.9892,.9926,.9951,.997,.9983,.9993,1)}
}

/* ---------- entrada: visor, contrazoom del video y apertura final ---------- */
.intro__video{transform-origin:50% 50%;will-change:transform;animation:intro-zoom 12s cubic-bezier(.33,.1,.24,1) 1.1s both}
@keyframes intro-zoom{from{transform:scale(1.02)}to{transform:scale(1)}}
/* al pasarle el boceto por encima, la portada retrocede un poco (1,02 como mucho) y se asienta en sombra */
.intro__frame{transform:scale(calc(1 + var(--cover,0) * .02));transform-origin:50% 38%}
.intro__frame::before{content:"";position:absolute;inset:0;z-index:3;background:var(--ink-0);opacity:calc(var(--cover,0) * .16);pointer-events:none}

/* cuatro esquinas de visor: se cierran sobre el rectangulo mientras respira y se disuelven al abrirse */
.intro__vf{position:absolute;inset:37% 31%;z-index:2;pointer-events:none;--ix:31vw;--iy:37vh}
.intro__vf i{position:absolute;width:clamp(14px,1.25vw,20px);height:clamp(14px,1.25vw,20px);opacity:0;animation:vf 2.3s linear 1.1s both}
.intro__vf i::before,.intro__vf i::after{content:"";position:absolute;background:rgba(242,240,230,.82)}
.intro__vf i::before{left:0;right:0;height:1px}
.intro__vf i::after{top:0;bottom:0;width:1px}
.intro__vf i:nth-child(1){left:0;top:0;--dx:-1;--dy:-1}
.intro__vf i:nth-child(2){right:0;top:0;--dx:1;--dy:-1}
.intro__vf i:nth-child(3){left:0;bottom:0;--dx:-1;--dy:1}
.intro__vf i:nth-child(4){right:0;bottom:0;--dx:1;--dy:1}
.intro__vf i:nth-child(-n+2)::before{top:0}
.intro__vf i:nth-child(n+3)::before{bottom:0}
.intro__vf i:nth-child(odd)::after{left:0}
.intro__vf i:nth-child(even)::after{right:0}
@keyframes vf{
  0%,19%{opacity:0;transform:translate3d(calc(var(--dx)*26px),calc(var(--dy)*26px),0);animation-timing-function:cubic-bezier(.16,1,.3,1)}
  46%{opacity:1;transform:translate3d(calc(var(--dx)*10px),calc(var(--dy)*10px),0)}
  60%{opacity:1;transform:translate3d(calc(var(--dx)*10px),calc(var(--dy)*10px),0)}
  66%{opacity:.5;transform:translate3d(calc(var(--dx)*(10px + var(--ix)*.115)),calc(var(--dy)*(10px + var(--iy)*.115)),0)}
  74%,100%{opacity:0;transform:translate3d(calc(var(--dx)*(10px + var(--ix)*.44)),calc(var(--dy)*(10px + var(--iy)*.44)),0)}
}
@media(max-width:767px){.intro__vf{inset:33% 14%;--ix:14vw;--iy:33vh}}

/* apertura final con aterrizaje largo: arranca suave, abre y se posa sin frenazo */
@supports (animation-timing-function:linear(0,1)){
  .intro__frame{animation-name:frame-reveal-l}
  @keyframes frame-reveal-l{
    0%   {clip-path:inset(50% 50% 50% 50%);   animation-timing-function:cubic-bezier(.2,.8,.2,1)}
    16%  {clip-path:inset(49.6% 31% 49.6% 31%); animation-timing-function:cubic-bezier(.32,.72,.2,1)}
    44%  {clip-path:inset(37% 31% 37% 31%);   animation-timing-function:linear}
    60%  {clip-path:inset(37% 31% 37% 31%);   animation-timing-function:linear(0,.013,.0449,.0914,.1498,.2172,.2913,.3693,.4489,.5279,.6042,.676,.7418,.8005,.8513,.8938,.928,.9543,.9733,.9861,.9939,.9979,.9996,1,1)}
    100% {clip-path:inset(0 0 0 0)}
  }
  @media(max-width:767px){
    @keyframes frame-reveal-l{
      0%   {clip-path:inset(50% 50% 50% 50%);   animation-timing-function:cubic-bezier(.2,.8,.2,1)}
      16%  {clip-path:inset(49.6% 14% 49.6% 14%); animation-timing-function:cubic-bezier(.32,.72,.2,1)}
      44%  {clip-path:inset(33% 14% 33% 14%);   animation-timing-function:linear}
      60%  {clip-path:inset(33% 14% 33% 14%);   animation-timing-function:linear(0,.013,.0449,.0914,.1498,.2172,.2913,.3693,.4489,.5279,.6042,.676,.7418,.8005,.8513,.8938,.928,.9543,.9733,.9861,.9939,.9979,.9996,1,1)}
      100% {clip-path:inset(0 0 0 0)}
    }
  }
}

/* ---------- empalmes del boceto: limpios, como casagodai.com ----------
   Desde el 29/09 el boceto es el video de la web (ImgDron_8: dron en gris verdoso con el dibujo en blanco).
   Sube sobre la portada con su borde tal cual, como una seccion normal (sin bruma), y se va dejando entrar
   el mosaico limpio y a color (sin sombra). Solo el video se queda un poco atras dentro de su marco al irse. */
.sketch__video{will-change:transform}

/* ---------- bloque fijado ---------- */
.seq__world{position:absolute;inset:0;transform-origin:50% 45%;will-change:transform}
/* en vertical la caja del render va abajo del todo: arriba se funde con el cielo calido de .seq__air y abajo
   llega entera al borde, asi la aerea pasa al marfil de la piscina sin franja oscura */
.seq__stage.is-portrait .seq__render{-webkit-mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.1) 4%,rgba(0,0,0,.36) 10%,rgba(0,0,0,.72) 17%,#000 25%);mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.1) 4%,rgba(0,0,0,.36) 10%,rgba(0,0,0,.72) 17%,#000 25%)}

/* ---------- estado vivo: pin, linea, caja y texto, primero el 31 y despues el 33 ---------- */
.tag,.bld{--d:0s}
.tag[data-tag="33"],.bld[data-bld="33"]{--d:.12s}
.tag{opacity:1;transition:opacity .55s var(--e-out)}
.seq__stage.is-live .tag{opacity:1}
.tag.is-dim{opacity:.32}
.tag__line{transform:scaleY(0);transition:transform .35s var(--e-in)}
.seq__stage.is-live .tag__line{transform:none;transition:transform .85s var(--e-out) calc(.3s + var(--d))}
.tag__box{margin-bottom:0;clip-path:inset(62% 50% 0 50%);
  transition:clip-path .4s var(--e-in),background .45s ease,border-color .45s ease,color .45s ease,transform .6s var(--e-out)}
.seq__stage.is-live .tag__box{clip-path:inset(0 0 0 0);
  transition:clip-path 1.05s var(--e-io) calc(.66s + var(--d)),background .45s ease,border-color .45s ease,color .45s ease,transform .6s var(--e-out)}
.tag__name,.tag__cta{opacity:0;transform:translate3d(0,10px,0);transition:opacity .22s ease,transform .3s ease}
.seq__stage.is-live .tag__name{opacity:1;transform:none;transition:opacity .8s ease calc(1.02s + var(--d)),transform 1.1s var(--e-out) calc(1.02s + var(--d))}
.seq__stage.is-live .tag__cta{opacity:.7;transform:none;transition:opacity .8s ease calc(1.14s + var(--d)),transform 1.1s var(--e-out) calc(1.14s + var(--d))}
.seq__stage.is-live .tag.is-hover .tag__cta{opacity:1;transition:opacity .4s ease,transform .4s ease}
.tag.is-hover .tag__box{background:rgba(242,240,230,.95);color:var(--ink-1);border-color:transparent;transform:translate3d(0,-5px,0)}


.seq__hint{transition:opacity .7s ease,transform .9s var(--e-out)}
.seq__hint.is-in{transition:opacity 1.4s ease 1.6s,transform 1.6s var(--e-out) 1.6s}
@media(max-width:767px){.seq__hint{font-size:8.5px;letter-spacing:.14em;padding:9px 14px;gap:10px}}

/* ---------- numero de ficha del panel: se funde en su sitio, no rueda ---------- */
.panel__num{display:inline-grid;font-style:normal;min-width:1.3em}
.panel__num-i{grid-area:1/1;font-style:normal;white-space:nowrap;transition:opacity .9s ease .12s}
.panel__num-i.is-from{opacity:0;transition:none}
.panel__num-i.is-out{opacity:0;transition:opacity .6s ease}

/* ---------- panel: crece desde el origen del clic y se recoge hacia el ---------- */
.panel{--ox:50vw;--oy:50vh;--R:150vmax;opacity:1;visibility:hidden;clip-path:circle(0px at var(--ox) var(--oy));
  transition:clip-path .75s cubic-bezier(.6,0,.3,1),visibility 0s linear .75s}
.panel.is-open{opacity:1;visibility:visible;clip-path:circle(var(--R) at var(--ox) var(--oy));transition:clip-path 1.05s cubic-bezier(.45,.05,.12,1),visibility 0s}
/* con @property el borde es una mascara difusa, como un diafragma de luz */
.has-pr .panel{clip-path:none;--pr:0px;
  -webkit-mask-image:radial-gradient(circle at var(--ox) var(--oy),#000 calc(var(--pr) - 150px),transparent var(--pr));
          mask-image:radial-gradient(circle at var(--ox) var(--oy),#000 calc(var(--pr) - 150px),transparent var(--pr));
  transition:--pr .8s cubic-bezier(.6,0,.3,1),visibility 0s linear .8s}
.has-pr .panel.is-open{clip-path:none;--pr:var(--R);transition:--pr 1.15s cubic-bezier(.45,.05,.12,1),visibility 0s}
.panel__bar{opacity:0;transform:translate3d(0,-10px,0);transition:opacity .25s ease,transform .4s ease}
.panel.is-open .panel__bar{opacity:1;transform:none;transition:opacity .8s ease .4s,transform 1.1s var(--e-out) .4s}
.panel__stage{opacity:0;transform:scale(.965);transition:opacity .25s ease,transform .45s ease}
.panel.is-open .panel__stage{opacity:1;transform:none;transition:opacity .9s ease .3s,transform 1.5s var(--e-out) .3s}
.panel__thumbs{position:relative;opacity:0;transition:opacity .25s ease}
.panel.is-open .panel__thumbs{opacity:1;transition:none}
.panel.is-open .panel__thumb{animation:thumb-in .85s var(--e-out) both;animation-delay:calc(.55s + var(--i,0) * 24ms)}
@keyframes thumb-in{from{opacity:0;transform:translate3d(0,14px,0)}}
.panel__thumb.is-on{border-color:transparent}
.panel__ind{position:absolute;left:0;top:0;width:0;height:0;border:1px solid var(--beige);pointer-events:none;
  transition:transform .75s var(--e-out),width .75s var(--e-out),height .75s var(--e-out)}
.panel.is-open .panel__ind{animation:ind-in .7s ease 1s both}
@keyframes ind-in{from{opacity:0}}
.panel__img{transition:opacity .5s ease .1s,transform 1.05s var(--e-out)}
.panel__img.is-on{transition:opacity .42s var(--e-out),transform 1.05s var(--e-out)}

/* ---------- movimiento reducido y modo verificacion ---------- */
@media(prefers-reduced-motion:reduce){
  .intro__vf{display:none}
  .intro__video{animation:none!important}
  .panel,.panel *,.tag,.tag *,.seq__hint,.seq__name,.seq__name *{
    transition-duration:.01ms!important;transition-delay:0s!important;animation-duration:.01ms!important;animation-delay:0s!important}
}
.is-debug .intro__video{animation:none!important}
.is-debug .intro__vf{display:none}


/* =====================================================================
   EDIFICIOS · pluma y aguada. Cada edificio se parte en sus cuatro plantas
   (la tercera se lleva la cubierta). Al entrar en el estado vivo el plumin
   dibuja la silueta y los cantos de abajo arriba, en orden de obra, primero
   el 31 y un compas despues el 33; detras de cada canto la aguada cruza la
   planta con su borde humedo y, al final, se entinta cada cifra. Al pasar por
   una planta se queda solo ella: aguada propia, contorno mas firme y la cifra
   hecha etiqueta; las demas se aclaran en onda desde esa planta. Solo se
   animan transform, opacity y stroke-dashoffset.
   ===================================================================== */
:root{--e-pen:cubic-bezier(.45,.05,.28,1);
  /* aguada: arena dorada (#b39a6c), mas clara y calida que el gris pardo: deja pasar la luz del render y no lo apaga; opacidad de arriba abajo (reposo y planta activa) */
  --veil:#b39a6c;--vw0:.32;--vw1:.42;--vw2:.5;
  /* planta elegida: velo de piedra calida bien presente (la referencia es gris calido; aqui, la paleta) */
  --lit:#c3b08c;--vl0:.62;--vl1:.68;--vl2:.74;
  --rim:rgba(92,76,54,.34)}
.vw0,.vw1,.vw2{stop-color:var(--veil)}
.vl0,.vl1,.vl2{stop-color:var(--lit)}
.vw0{stop-opacity:var(--vw0)}.vw1{stop-opacity:var(--vw1)}.vw2{stop-opacity:var(--vw2)}
.vl0{stop-opacity:var(--vl0)}.vl1{stop-opacity:var(--vl1)}.vl2{stop-opacity:var(--vl2)}
/* presion del plumin a lo largo de cada trazo: apoya, carga, alivia y levanta */
.pr0,.pr1,.pr2,.pr3{stop-color:var(--cream)}
.pr0{stop-opacity:.7}.pr1{stop-opacity:1}.pr2{stop-opacity:.88}.pr3{stop-opacity:.76}

.bld__hit,.flr__hit{fill:rgba(0,0,0,0);stroke:none;pointer-events:none;cursor:pointer;outline:none}
.seq__stage.is-live .bld__hit,.seq__stage.is-live .flr__hit{pointer-events:all}

/* red del reposo: silueta y cantos, dibujados tramo a tramo (--t retardo, --u duracion) */
.net{fill:none;stroke-width:1.35px;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;pointer-events:none;
  stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .5s var(--e-in) var(--r,0s)}
.net--u{stroke:rgba(16,12,8,.24);stroke-width:3.3px}
.seq__stage.is-live .net{stroke-dashoffset:0;transition:stroke-dashoffset var(--u) var(--e-pen) var(--t)}
.seq__stage.is-live .net--l{transition-timing-function:linear}
.bld__net{transition:opacity .9s ease .05s}
.seq__svg.is-sel .bld__net{opacity:0;transition:opacity .8s var(--e-soft)}

/* aguada del reposo: la mascara barre la planta (cuerpo, borde humedo y frente que se deshace) */
.flr__wash{transform:translate(var(--wx),0px);transition:transform .55s var(--e-in)}
.seq__stage.is-live .flr__wash{transform:none;transition:transform .85s cubic-bezier(.3,.08,.3,1) var(--t)}
.flr__rim{fill:none;stroke:var(--rim);stroke-width:5px;stroke-linejoin:round}
/* al elegir una planta las demas se despejan despacio, en onda desde ella (--k: distancia, la pone JS) */
.flr__veil{transition:opacity .9s ease calc(var(--k) * 60ms)}
.seq__svg.is-sel .flr__veil{opacity:0;transition:opacity .8s var(--e-soft) calc(var(--k) * 60ms)}
/* velo de la planta elegida: entra y sale por el lado de la planta vecina, como un ascensor */
.flr__lit{opacity:0;transition:opacity .75s ease}
.flr.is-on .flr__lit{opacity:1;transition:opacity .7s ease}
.flr__lift{transition:transform .9s var(--e-soft)}
/* contorno de la planta activa y, discontinuo, lo que queda detras de copas y marquesina */
.flr__edge,.flr__hid{fill:none;stroke:var(--cream);stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;pointer-events:none;opacity:0}
.flr__edge{stroke-width:1.5px;transition:opacity .7s ease}
.flr.is-on .flr__edge{opacity:.96;transition:opacity .8s ease}
.flr__hid{stroke-width:1px;stroke-dasharray:3 4;transition:opacity .7s ease}
.flr.is-on .flr__hid{opacity:.55;transition:opacity .9s ease .1s}
/* con el puntero en un edificio (su margen o su etiqueta) el otro se retira un poco */
.seq__svg:not(.is-sel) .bld.is-dim .bld__net{opacity:.5}
.seq__svg:not(.is-sel) .bld.is-dim .flr__veil{opacity:.5}
.seq__stage.is-focus:not(.is-floor) .flab__n{transition:opacity .8s ease,transform 1s var(--e-soft)}
.seq__stage.is-floor .seq__hint.is-in{opacity:0;transition:opacity .7s ease}

/* cifras de planta: se entintan de izquierda a derecha, como escritas. La de la planta elegida
   crece dentro de la propia planta (--g, lo pone JS); las demas se retiran. Van en Modern Heritage
   (destacado): sus cifras son de altura de mayuscula y sus parentesis muy altos, asi que el cuerpo es
   el 80 % de --fs y el centro cae en la mitad de las mayusculas (-40 %). Su ordinal es una A volada de
   la propia fuente (.flab__o, gobelas.js), porque Modern Heritage no tiene ª */
.flab{position:absolute;left:0;top:0;z-index:6;width:0;height:0;pointer-events:none;color:var(--cream);white-space:nowrap;--fs:18px;--nw:18px}
.flab__n{position:absolute;left:0;top:0;font-family:var(--font-display);font-style:normal;font-weight:400;font-size:calc(var(--fs) * .8);line-height:1;letter-spacing:.02em;text-transform:uppercase;
  transform:translate(-50%,-40%);text-shadow:0 1px 14px rgba(8,12,6,.5),0 0 2px rgba(8,12,6,.35);
  opacity:0;clip-path:inset(-30% 100% -30% -10%);transition:opacity .25s ease,clip-path .3s var(--e-in),transform .55s var(--e-out)}
.flab__n i{font-style:normal;opacity:.62;margin:0 .05em}
.flab__o{position:relative;top:-.72em;margin-left:.07em;font-size:.5em;letter-spacing:0}
.seq__stage.is-live .flab__n{opacity:.95;clip-path:inset(-30% -20% -30% -10%);transition:opacity .5s ease var(--t),clip-path .8s var(--e-pen) var(--t),transform 1s var(--e-soft)}
.seq__stage.is-floor .flab__n{opacity:0;transition:opacity .7s ease,transform 1s var(--e-soft)}
.seq__stage.is-floor .flab.is-on .flab__n{opacity:1;transform:translate(-50%,-40%) scale(var(--g,1.6));transition:opacity .8s ease,transform 1.1s var(--e-soft)}
.flab.is-frozen .flab__n{opacity:calc(var(--ink) * .95);clip-path:inset(-30% calc(100% - var(--ink) * 120%) -30% -10%)}

/* etiquetas de edificio: el pin va dentro (HTML: la onda no obliga a repintar el SVG) y se pueden pulsar */
.tag__pin{position:absolute;left:50%;bottom:0;width:7px;height:7px;margin:0 0 -3.5px -3.5px;border-radius:50%;background:var(--cream);transform:scale(0);transition:transform .35s var(--e-in)}
.seq__stage.is-live .tag__pin{transform:none;transition:transform 1.4s var(--e-soft) var(--d)}
.seq__stage.is-live .tag__box{pointer-events:auto;cursor:pointer}
/* la etiqueta de edificio no parte su llamada en dos lineas cerca del borde de la pantalla */
.tag__cta{white-space:nowrap}
/* con una planta elegida la etiqueta de su edificio no se enciende: manda la de la planta */
.seq__stage.is-floor .tag.is-hover .tag__box{background:rgba(10,15,8,.3);color:var(--cream);border-color:rgba(244,241,231,.42);transform:none}
.seq__hint.is-in{transition:opacity 1.4s ease 3s,transform 1.6s var(--e-out) 3s}
.seq__hint-t{display:none}
.is-touch .seq__hint-p{display:none}.is-touch .seq__hint-t{display:inline}

/* nombre de la planta elegida, abajo a la izquierda junto a los corchetes (como "Casa Sekai" junto al logotipo
   en casagodai.com). Los corchetes estan en el estado vivo; el nombre entra al elegir y entre plantas hace
   relevo (capas en la misma celda, gobelas.js). En tactil todo el rotulo es la tarjeta: tocarlo abre el plano */
.seq__name{position:absolute;left:var(--gutter);bottom:clamp(26px,5.4vh,60px);display:flex;align-items:center;gap:clamp(14px,1.25vw,20px);color:var(--cream);pointer-events:none;
  opacity:0;transition:opacity .9s ease}
.seq__stage.is-live .seq__name{opacity:1;transition:opacity 1.6s ease 1.2s}
.seq__mark{display:block;flex:0 0 auto}
.seq__mark svg{display:block;width:auto;height:clamp(30px,2.5vw,40px)}
.seq__name-t{display:grid;align-items:center;opacity:0;transform:translate3d(-8px,0,0);transition:opacity .8s ease,transform 1s var(--e-soft)}
.seq__name.is-on .seq__name-t{opacity:1;transform:none;transition:opacity 1s ease,transform 1.3s var(--e-soft)}
/* relevo: la capa nueva se escribe de izquierda a derecha (mascara de borde blando, como "Diseñado para
   quedarse") y la saliente se borra con la mascara complementaria y el mismo frente. El relleno negativo deja
   la sombra del texto dentro de la mascara */
.seq__nl{grid-area:1/1;display:grid;gap:9px;padding:14px 22px;margin:-14px -22px;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 42%,transparent 58%,transparent 100%);mask-image:linear-gradient(90deg,#000 0,#000 42%,transparent 58%,transparent 100%);
  -webkit-mask-size:260% 100%;mask-size:260% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:0 0;mask-position:0 0;
  transition:-webkit-mask-position 1.1s cubic-bezier(.45,.05,.28,1),mask-position 1.1s cubic-bezier(.45,.05,.28,1),opacity .45s ease}
.seq__nl.is-from{-webkit-mask-position:100% 0;mask-position:100% 0;transition:none}
.seq__nl.is-hold,.seq__nl.is-out{-webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 42%,#000 58%,#000 100%);mask-image:linear-gradient(90deg,transparent 0,transparent 42%,#000 58%,#000 100%)}
.seq__nl.is-hold{-webkit-mask-position:100% 0;mask-position:100% 0;transition:none}
.seq__nl.is-out{-webkit-mask-position:0 0;mask-position:0 0}
.seq__nl.is-fade{opacity:0}
.seq__nl.is-done{-webkit-mask-image:none;mask-image:none}
.seq__nt{font-family:var(--font-display);font-style:normal;font-weight:400;font-size:clamp(16px,1.42vw,26px);line-height:1.1;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;
  text-shadow:0 1px 18px rgba(8,12,6,.34)}
.seq__nu{font-size:10.5px;font-weight:400;letter-spacing:.24em;text-transform:uppercase;white-space:nowrap;color:rgba(242,240,230,.78);text-shadow:0 1px 10px rgba(8,12,6,.4)}
.seq__ng{font-style:normal;color:var(--beige)}
.is-touch .seq__name.is-on{pointer-events:auto;cursor:pointer}
.is-touch .seq__ng{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.seq__name:focus-visible{outline:1px solid rgba(242,240,230,.6);outline-offset:10px}
@media(max-width:767px){
  .seq__name{gap:12px;bottom:clamp(20px,3.6vh,34px)}
  .seq__mark svg{height:28px}
  .seq__nt{font-size:15px;letter-spacing:.04em}.seq__nu{font-size:8.5px;letter-spacing:.18em}
}

@media(prefers-reduced-motion:reduce){
  /* sin dibujo: la red, la aguada y las cifras aparecen fundiendose */
  .net{stroke-dashoffset:0!important;transition:none!important}
  .bld__net{opacity:0}.seq__stage.is-live .bld__net{opacity:1}.seq__stage.is-live .seq__svg.is-sel .bld__net{opacity:0}
  .flr__wash{transform:none!important;transition:none!important}
  .flr__veil{opacity:0}.seq__stage.is-live .flr__veil{opacity:1}.seq__stage.is-live .seq__svg.is-sel .flr__veil{opacity:0}
  .flr__lift{transition:none!important}
  .flab__n,.seq__stage.is-live .flab__n{clip-path:none;transition:opacity .45s ease}
}

/* ---------- 29/09/2026: fuera los recuadros GOBELAS 31 / 33 sobre el render ----------
   Se ocultan la caja y su linea; se queda el punto del edificio. Para devolverlos, borrar este bloque. */
.tag__box,.tag__line{display:none!important}


/* =====================================================================
   BLOQUE CASA GOBELAS · de la calle al aire (29/09/2026)
   Sustituye a la secuencia del dron con nubes. Escenario fijado de 380vh
   (320vh en movil). Capas, de atras adelante: el cielo calido de la caja en
   vertical (.seq__air), la aerea (.seq__world: render, edificios y coches), la
   calle (.seq__street, con su borde de abajo fundido), la luz calida cosida a
   ese borde (.seq__sky), el rotulo (.cg) y la interfaz. Sin grano ni velos.
   gobelas.js mueve transform y opacity (y --fe, la franja fundida, al empezar
   la subida); aqui va la piel.
   ===================================================================== */
.seq__world{z-index:1;transform-origin:50% 100%}
.seq__ui{z-index:7}
/* la calle lleva debajo un fondo con sus propios tonos (cielo, fachada, acera): si la foto aun no se ha pintado
   al entrar deprisa desde el mosaico, no asoma el oscuro del escenario. Su borde de abajo se funde en una franja
   de --fe (0 en reposo: llega entera hasta abajo); la mascara solo esta mientras hay franja (.is-fe) */
.seq__street{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none;transform-origin:50% 0;will-change:transform,opacity;--fe:0px;
  background:linear-gradient(to bottom,#8aa4ba 0,#b4c7d7 16%,#bfc9d2 24%,#aa9d92 32%,#8f7a67 44%,#7e7163 60%,#5f564e 72%,#6c645f 86%,#4a4546 100%)}
.seq__street.is-fe{
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - var(--fe)),rgba(0,0,0,.82) calc(100% - var(--fe) * .72),rgba(0,0,0,.5) calc(100% - var(--fe) * .45),rgba(0,0,0,.18) calc(100% - var(--fe) * .2),transparent 100%);
          mask-image:linear-gradient(to bottom,#000 calc(100% - var(--fe)),rgba(0,0,0,.82) calc(100% - var(--fe) * .72),rgba(0,0,0,.5) calc(100% - var(--fe) * .45),rgba(0,0,0,.18) calc(100% - var(--fe) * .2),transparent 100%)}
.seq__calle{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 34%;transition:opacity 1.2s ease}
/* la luz dorada alcanza la calle mientras sube: rasante, desde abajo, dentro de la foto (soft-light) */
.seq__warm{position:absolute;inset:0;opacity:0;pointer-events:none;mix-blend-mode:soft-light;
  background:linear-gradient(to top,rgba(255,176,92,.9) 0%,rgba(255,192,120,.6) 30%,rgba(255,214,160,.26) 62%,rgba(255,226,188,0) 100%)}
/* luz calida cosida al borde de abajo de la calle (el borde cae al 58 % de la franja): un brillo que se
   suma (screen, alfa baja), asi la franja fundida se lee como luz y la foto se sigue viendo entera */
.seq__sky{position:absolute;left:0;right:0;top:0;z-index:3;height:42%;pointer-events:none;visibility:hidden;will-change:transform,opacity;mix-blend-mode:screen;
  background:linear-gradient(to bottom,
    rgba(255,204,140,0) 0%,rgba(255,204,140,.04) 14%,rgba(255,208,148,.1) 28%,rgba(255,212,156,.19) 40%,rgba(255,216,164,.26) 50%,rgba(255,218,168,.27) 58%,
    rgba(255,214,160,.2) 70%,rgba(255,210,152,.09) 84%,rgba(255,206,146,0) 100%)}
.seq__stage.is-portrait .seq__sky{height:30%}
/* en vertical la aerea va en su caja, apoyada abajo. Encima hay cielo calido (.seq__air, --bt y --bh los pone
   JS): mas hondo arriba y palido al llegar al cielo del propio render, que se funde en el (mascara de arriba),
   con el brillo del sol a la izquierda como en la aerea. Sale con la subida y se queda en estado vivo (aprobado) */
.seq__air{position:absolute;inset:0;z-index:0;display:none;visibility:hidden;pointer-events:none;
  background:
    radial-gradient(ellipse 80% 34% at 10% calc(var(--bt,25%) + var(--bh,50%) * .2),rgba(255,240,210,.62) 0%,rgba(255,236,200,.22) 45%,rgba(255,236,200,0) 72%),
    linear-gradient(to bottom,#d4b88a 0,#e2c89e calc(var(--bt,25%) * .55),#eddcc0 calc(var(--bt,25%) + var(--bh,50%) * .04),#f2e5cf calc(var(--bt,25%) + var(--bh,50%) * .18),#e9d2ae calc(var(--bt,25%) + var(--bh,50%) * .34),#4d4331 calc(var(--bt,25%) + var(--bh,50%) * .5),#0d120a calc(var(--bt,25%) + var(--bh,50%) * .62))}
.seq__stage.is-portrait .seq__air{display:block}
/* el sol de la hora dorada, a la izquierda como en la aerea: un brillo, no un foco */
.seq__sun{position:absolute;left:0;right:0;top:30%;height:52%;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(ellipse 40% 50% at 13% 56%,rgba(255,232,190,.34) 0%,rgba(255,222,170,.16) 36%,rgba(255,214,160,0) 72%)}
@media(max-aspect-ratio:1/1){.seq__calle{object-position:60% 50%}}

/* ---------- rotulo: [ CASA GOBELAS® ] | Diseñado para quedarse ----------
   --f es el alto de los corchetes; todo se mide en em de ese alto. Los corchetes son la mitad
   izquierda del logotipo (la derecha, reflejada) y el rotulo, el mismo trazado de casagobelas.com.
   El estado del CSS es el compuesto: la animacion (WAAPI, en gobelas.js) solo parte de fuera. */
.cg{--f:clamp(46px,5.2vw,96px);position:absolute;z-index:6;left:var(--gutter);top:clamp(92px,15vh,170px);margin:0;
  display:flex;align-items:center;font-size:var(--f);font-weight:400;line-height:1;color:var(--cream);pointer-events:none;will-change:transform,opacity}
.cg.is-wait{visibility:hidden}
.cg__lock{position:relative;display:flex;align-items:center;height:1em}
.cg__br{display:block;flex:0 0 auto;width:.3188em;height:1em;overflow:visible}
.cg__bf{fill:currentColor}
.cg__bs{fill:none;stroke:currentColor;stroke-width:1.25px;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;opacity:0}
.cg__word{display:block;flex:0 0 auto;margin:0 .03em}
.cg__wm{display:block;width:5.454em;height:.46em;overflow:visible}
.cg__g{transform-box:fill-box;transform-origin:50% 50%}
.cg__rule{display:block;flex:0 0 auto;width:1px;height:.42em;margin:0 .4em 0 .46em;background:currentColor;opacity:.55;transform-origin:50% 50%}
.cg__tag{display:block;flex:0 0 auto;font-family:var(--font-display);font-style:normal;font-weight:400;font-size:max(.25em,12.5px);line-height:1.1;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;padding:.2em .2em .12em 0;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 44%,transparent 56%,transparent 100%);mask-image:linear-gradient(90deg,#000 0,#000 44%,transparent 56%,transparent 100%);
  -webkit-mask-size:250% 100%;mask-size:250% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:0% 0;mask-position:0% 0}
/* resplandor oscuro muy difuso detras del rotulo: da contraste sobre el cielo sin verse como caja */
.cg__glow{position:absolute;left:-16%;right:-12%;top:-150%;bottom:-150%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(20,36,52,.3),rgba(20,36,52,.14) 52%,rgba(20,36,52,0))}
@media(max-width:767px){
  .cg{--f:clamp(40px,12.2vw,58px);top:clamp(84px,12vh,120px);flex-wrap:wrap;right:var(--gutter)}
  .cg__rule{display:none}
  .cg__tag{flex-basis:100%;margin:.62em 0 0 calc(.34 * var(--f));font-size:.29em;letter-spacing:.08em}
}
@media(prefers-reduced-motion:reduce){.seq__warm{display:none}}

/* ---------- 30/09: nada de negro entre la portada y el boceto ----------
   El primer fotograma del boceto va de fondo de la seccion (mismo encuadre que el video: cover y
   centrado) y el video aparece solo cuando ya ha pintado un fotograma (clase .is-painted, gobelas.js). */
.sketch{background:rgb(var(--mist)) url("../video/boceto-poster.jpg") center/cover no-repeat}
.sketch__video{opacity:0}
.sketch__video.is-painted{opacity:1}
.is-debug .sketch__video{opacity:1}
.intro__frame{background:var(--green) url("../video/intro-poster.jpg?v=732245b9") center/cover no-repeat}

/* =====================================================================
   MOVIL Y TABLETA (01/10/2026) · revision antes de subir
   Solo lo necesario para que funcione y se vea bien en cada dispositivo: el
   diseno aprobado no cambia.
   - Zona segura (viewport-fit=cover): muesca, isla, esquinas redondeadas y
     barra de inicio. El margen lateral nunca cae dentro de la muesca (en
     horizontal va a un lado o al otro: por eso el mayor de los dos) y lo fijo
     de arriba y de abajo se aparta de la barra de estado y de la de inicio.
     Sin muesca (escritorio, Android en vertical) todo queda como estaba.
   - Areas tactiles de 44 px como minimo: donde el dibujo es mas pequeno se
     agranda la zona de toque con un ::after transparente (no cambia lo que se ve).
   - Rotulos que en movil bajaban de 10 px suben a 10 px.
   - Escenario fijado del bloque Casa Gobelas: mide la pantalla grande (lvh),
     asi con las barras del navegador recogidas no queda franja debajo; su
     interfaz (pastilla y nombre de planta) va en la pantalla pequena (svh) y
     se ve tambien con las barras fuera. Las dos medidas son fijas: sin saltos.
   - Horizontal de movil (poco alto): la portada sin el alto minimo de escritorio
     y el panel de planos mas compacto.
   ===================================================================== */
:root{
  --sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px);
  --gutter:max(clamp(20px,4.6vw,72px),var(--sal),var(--sar));
}
/* barra y preloader */
.nav{padding-top:calc(clamp(18px,2.6vw,30px) + var(--sat))}
.preloader__bar{bottom:calc(clamp(30px,6vh,60px) + var(--sab))}
.intro__scroll{bottom:calc(clamp(34px,6vh,60px) + var(--sab))}
/* escenario fijado: pantalla grande; su interfaz, en la pequena */
.seq__stage{height:100vh;height:100lvh}
.seq__ui{bottom:auto;height:100vh;height:100svh}
.seq__hint{bottom:calc(clamp(24px,5vh,56px) + var(--sab))}
.seq__name{bottom:calc(clamp(26px,5.4vh,60px) + var(--sab))}
.cg{top:calc(clamp(92px,15vh,170px) + var(--sat))}
@media(max-width:767px){
  .seq__name{bottom:calc(clamp(20px,3.6vh,34px) + var(--sab))}
  .cg{top:calc(clamp(84px,12vh,120px) + var(--sat))}
  .seq__nu{font-size:10px;letter-spacing:.16em}
}
.is-touch .seq__hint{font-size:10px;letter-spacing:.14em}
@media(max-width:767px){.is-touch .seq__hint{letter-spacing:.12em}}
/* panel de planos: barra bajo la de estado, miniaturas sobre la de inicio */
.panel__bar{padding-top:calc(clamp(16px,2.4vw,28px) + var(--sat))}
.panel__thumbs{padding-bottom:calc(clamp(18px,3vh,30px) + var(--sab))}
/* zonas de toque */
.nav__brand,.nav__cta,.panel__close{position:relative}
.is-touch .nav__brand::after,.is-touch .nav__cta::after,.is-touch .panel__close::after,.is-touch .panel__arrow::after{content:"";position:absolute}
.is-touch .nav__brand::after{inset:-11px -12px}
.is-touch .nav__cta::after{inset:-4px -2px}
.is-touch .panel__close::after{inset:-5px -8px}
.is-touch .panel__arrow::after{inset:-3px}
@media(max-width:767px){.is-touch .panel__thumb{width:60px}}
/* horizontal de movil: la portada a pantalla (sin su alto minimo de escritorio) y el panel mas compacto */
@media(orientation:landscape) and (max-height:540px){
  .intro{min-height:0}
  .page::before{height:100vh;height:100svh}
  .panel__bar{padding-top:calc(10px + var(--sat));padding-bottom:8px}
  .panel__thumbs{padding-top:8px;padding-bottom:calc(10px + var(--sab))}
}
/* la barra no se come los toques de lo que tiene debajo: solo la marca y el boton reciben el dedo (con la zona
   segura de arriba la franja de la barra es mas alta; tocar el cielo del bloque bajo ella deselecciona la planta) */
.nav.is-on{pointer-events:none}
.nav.is-on .nav__brand,.nav.is-on .nav__cta{pointer-events:auto}
.nav.mo-tuck .nav__brand,.nav.mo-tuck .nav__cta,.nav.is-hidden-panel .nav__brand,.nav.is-hidden-panel .nav__cta,html.visor-open .nav .nav__brand,html.visor-open .nav .nav__cta{pointer-events:none}

/* =====================================================================
   ENTRADA CON RED MOVIL (15/10/2026, fichas A3 y A4 de la auditoria movil)
   - El verde se retira por CSS a la vez que arranca la apertura del marco (pre-out, los mismos 0,9 s que
     antes contaba gobelas.js desde que corria): con red lenta el script llegaba tarde y la apertura entera
     se hacia debajo del verde. La clase .is-done de gobelas.js queda de respaldo.
   - La imagen fija de la entrada es el fondo del propio video (ya no lleva atributo poster): se acerca con
     el mismo intro-zoom que el video, asi no salta cuando entra el primer fotograma. En movil, las
     versiones de 720 (152 y 159 KB frente a 306 y 400), con la misma condicion que los videos ligeros.
   ===================================================================== */
.preloader{animation:pre-out .85s var(--ease-in-out) .9s forwards}
@keyframes pre-out{to{opacity:0;visibility:hidden}}
.intro__video{background:var(--green) url("../video/intro-poster.jpg?v=732245b9") center/cover no-repeat}
@media (max-width:600px),(max-height:500px){
  .intro__frame,.intro__video{background-image:url("../video/intro-poster-720.jpg?v=adef28cc")}
  .sketch{background-image:url("../video/boceto-poster-720.jpg")}
}
/* 16/10: movil en vertical, el poster de la version vertical (intro-poster-movil.jpg, 720 x 1080, 118 KB): el mismo
   fotograma con el mismo recorte que intro-movil.mp4 y la misma condicion que su <source> (index.template.html) */
@media (max-width:600px) and (max-aspect-ratio:3/4){
  .intro__frame,.intro__video{background-image:url("../video/intro-poster-movil.jpg?v=2dc0d124")}
}

/* =====================================================================
   AUDITORIA MOVIL (15/10/2026) · fichas sin cambio de diseno
   ===================================================================== */
/* B16: sin el recuadro gris o azulado que pinta el sistema al tocar; la respuesta la da un :active leve */
html{-webkit-tap-highlight-color:transparent}
.is-touch :is(.nav__cta,.panel__close,.panel__arrow,.panel__thumb,.galeria__btn,.visor__close,.visor__th,.contacto__btn):active{opacity:.72;transition:opacity .15s}
/* M6: en vertical las flechas del panel caen dentro del plano (papel claro): fondo oscuro translucido, de la
   familia del visor y de la pastilla de ayuda, con el mismo borde y el mismo chevron */
@media(max-width:767px){.panel__arrow{background:rgba(13,18,10,.55)}}
/* A5: plano ampliado con un toque (gobelas.js, zoomAt): 2,5 veces dentro del escenario, se recorre con el dedo */
.panel__stage.is-zoom{display:block;place-items:start;overflow:auto;overscroll-behavior:contain;padding:0;touch-action:pan-x pan-y;scrollbar-width:none}
.panel__stage.is-zoom::-webkit-scrollbar{display:none}
.panel__stage.is-zoom .panel__img{display:none}
.panel__stage.is-zoom .panel__img.is-on{display:block;position:relative;max-width:none;max-height:none;width:250%;height:auto;transform:none;transition:none;box-shadow:none}
.panel__stage.is-zoom .panel__arrow{display:none}
/* A5: en horizontal de movil la tira se recoge (como ya decia el LEEME) y el plano gana alto; se navega con las
   flechas y deslizando */
@media(orientation:landscape) and (max-height:540px){.panel__thumbs{display:none}}
/* B2: en vertical, el verde de carga y el hueco de la portada miden lo mismo que la portada (560 px como
   minimo): en el iPhone SE el logotipo ya no salta al fundirse y no asoma franja al recogerse las barras */
@media(max-width:767px) and (orientation:portrait){
  .preloader{min-height:560px}
  .page::before{height:max(100svh,560px)}
}
/* B7: en moviles estrechos la pastilla sube por encima de los corchetes del nombre, y el nombre de planta
   puede partirse en dos lineas en vez de cortarse (zoom de Safari o letra grande del sistema) */
@media(max-width:400px){.seq__hint{bottom:calc(clamp(20px,3.6vh,34px) + 46px + var(--sab))}}
@media(max-width:767px){
  .seq__name{max-width:calc(100vw - 2 * var(--gutter))}
  .seq__nt,.seq__nu{white-space:normal}
  .seq__nt{text-wrap:balance}
}
/* M2: dibujo terminado si el boceto no puede reproducirse (gobelas.js, sketchVideo), y sin el triangulo de
   reproducir que pinta Safari sobre un video bloqueado */
.sketch.is-still{background-image:url("../video/boceto-final.jpg")}
@media (max-width:600px),(max-height:500px){.sketch.is-still{background-image:url("../video/boceto-final-720.jpg")}}
video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}
video::-webkit-media-controls{display:none!important}

/* =====================================================================
   DECISIONES APROBADAS (15/10/2026, auditoria movil)
   ===================================================================== */
/* A2: sobre el cielo claro del bloque Casa Gobelas, CONTACTANOS lleva la pastilla oscura translucida del aviso
   de las plantas (5,6 a 5,8:1 en el peor caso; antes unos 2:1). Portada, boceto y mosaico quedan igual */
.nav.is-sky .nav__cta{background:rgba(10,15,8,.5);border-color:rgba(242,240,230,.28)}
@media(hover:hover){.nav.is-sky .nav__cta:hover{background:var(--cream);color:var(--green)}}
/* B8: en horizontal de movil el rotulo y su lema van a la izquierda sobre el cielo, con el lema debajo como en
   vertical (antes el lema caia sobre la cornisa). Misma animacion; el lema nunca por debajo de 12,5 px */
@media(orientation:landscape) and (max-height:540px){
  .cg{--f:clamp(36px,11vh,46px);flex-wrap:wrap;right:auto}
  .cg__rule{display:none}
  .cg__tag{flex-basis:100%;margin:.55em 0 0 calc(.34 * var(--f));font-size:max(.29em,12.5px)}
}

/* =====================================================================
   NOMBRE DE PLANTA EN VERTICAL (15/10/2026, video del iPhone de Adri)
   En vertical el nombre caia en crema y pequeno sobre la neblina palida del horizonte y no se leia ("queda
   cutre"), mientras arriba quedaba un cielo enorme y vacio. En vertical se escribe en ese cielo, en tinta,
   justo encima del horizonte del render (--bt y --bh los pone gobelas.js) y algo mas grande: un pie de foto
   editorial. Mismo relevo entre plantas y misma tarjeta tactil. Escritorio y horizontal quedan como estaban.
   ===================================================================== */
.seq__stage.is-portrait .seq__name{top:calc(var(--bt,40vh) + var(--bh,40vh) * .1);bottom:auto;transform:translateY(-100%);color:var(--ink-on-ivory)}
.seq__stage.is-portrait .seq__mark svg{height:30px}
.seq__stage.is-portrait .seq__nt{font-size:clamp(18px,4.9vw,22px);text-shadow:none}
.seq__stage.is-portrait .seq__nu{font-size:10.5px;color:rgba(29,39,24,.74);text-shadow:none}
.seq__stage.is-portrait .seq__ng{color:#6f5a36}
.seq__stage.is-portrait .seq__name:focus-visible{outline-color:rgba(29,39,24,.5)}
.seq__stage.is-portrait .seq__nb,.seq__stage.is-portrait .seq__nf{display:block}
.seq__stage.is-portrait .seq__nt .mh-dot{display:none}

/* S4 (16/10): en vertical la aerea sube para que los edificios queden en el centro (gobelas.js, PORT_C) y por
   debajo los arboles del render se funden en el verde oscuro de sus copas (--copa). Ese verde llena el pie del
   escenario y, al irse el bloque, pasa a la piscina por un degradado (secciones.css). Sustituye a la caja apoyada
   abajo sin franja oscura del 29/09 */
:root{--copa:#1b1f12}
.seq__stage.is-portrait{background:var(--copa)}
.seq__stage.is-portrait .seq__render{
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.1) 4%,rgba(0,0,0,.36) 10%,rgba(0,0,0,.72) 17%,#000 25%,#000 80%,rgba(0,0,0,.78) 87%,rgba(0,0,0,.42) 93%,rgba(0,0,0,.12) 98%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.1) 4%,rgba(0,0,0,.36) 10%,rgba(0,0,0,.72) 17%,#000 25%,#000 80%,rgba(0,0,0,.78) 87%,rgba(0,0,0,.42) 93%,rgba(0,0,0,.12) 98%,transparent 100%)}
.seq__stage.is-portrait .seq__air{
  background:
    radial-gradient(ellipse 80% 34% at 10% calc(var(--bt,25%) + var(--bh,50%) * .2),rgba(255,240,210,.62) 0%,rgba(255,236,200,.22) 45%,rgba(255,236,200,0) 72%),
    linear-gradient(to bottom,#d4b88a 0,#e2c89e calc(var(--bt,25%) * .55),#eddcc0 calc(var(--bt,25%) + var(--bh,50%) * .04),#f2e5cf calc(var(--bt,25%) + var(--bh,50%) * .18),#e9d2ae calc(var(--bt,25%) + var(--bh,50%) * .34),#4d4331 calc(var(--bt,25%) + var(--bh,50%) * .5),var(--copa) calc(var(--bt,25%) + var(--bh,50%) * .62))}

/* T1 (16/10): en vertical de movil el boceto ocupa la pantalla entera y se separa del mosaico (antes era
   cuadrado y el mosaico asomaba debajo, pegado a su fundido). El dibujo va del 30 al 73 % del ancho del
   fotograma: a todo el alto se cortaria por los lados, asi que el video (y debajo su primer fotograma o el
   dibujo terminado, de fondo) se pinta a lo ancho en una franja de 120vw centrada en el dibujo, y la seccion
   sigue arriba con su cielo (::before, el gris de la fila de arriba del video, un punto mas hondo arriba) y
   abajo con el verde en que acaba el video (::after), un respiro limpio antes del mosaico. Mide la pantalla
   grande (lvh): con las barras recogidas no asoma el mosaico, y con ellas fuera solo se tapa parte de ese
   verde. Horizontal y escritorio quedan como estaban */
@media(max-width:767px) and (orientation:portrait){
  .sketch{height:100vh;height:100lvh;aspect-ratio:auto;--skb:min(120vw,100%);--skp:.62;
    background-color:#898e87;background-size:auto var(--skb);background-position:53% calc(var(--skp) * 100%)}
  .sketch__video{top:calc((100% - var(--skb)) * var(--skp));bottom:auto;height:var(--skb);object-position:53% 50%;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 4%,#000 97%,transparent 100%);
            mask-image:linear-gradient(to bottom,transparent 0,#000 4%,#000 97%,transparent 100%)}
  .sketch::before,.sketch::after{content:"";position:absolute;left:0;right:0;z-index:0;pointer-events:none}
  .sketch::before{top:0;height:calc((100% - var(--skb)) * var(--skp) + 6px);background:linear-gradient(#7e837c,#898e87)}
  .sketch::after{bottom:0;height:calc((100% - var(--skb)) * (1 - var(--skp)) + 2px);background:linear-gradient(#34412d,var(--green))}
}

/* Logo del nombre de planta (16/10, peticion de Adri): en movil los corchetes junto al nombre solo salen al
   elegir una planta y se van con el nombre al soltarla. En escritorio siguen siempre a la vista */
.seq__stage.is-portrait .seq__mark{opacity:0;transform:translate3d(-6px,0,0);transition:opacity .7s ease,transform 1s var(--e-soft)}
.seq__stage.is-portrait .seq__name.is-on .seq__mark{opacity:1;transform:none;transition:opacity .9s ease,transform 1.2s var(--e-soft)}
@media (orientation:landscape) and (max-height:540px){
  .seq__mark{opacity:0;transform:translate3d(-6px,0,0);transition:opacity .7s ease,transform 1s var(--e-soft)}
  .seq__name.is-on .seq__mark{opacity:1;transform:none;transition:opacity .9s ease,transform 1.2s var(--e-soft)}
}

/* T1 bis (16/10, peticion de Adri en el probador del mosaico): menos verde libre entre el boceto y el mosaico.
   La seccion ya no mide la pantalla entera: conserva el cielo de arriba y la franja del dibujo, y por debajo solo
   deja 32 px del verde en que acaba el video antes de las fotos */
@media(max-width:767px) and (orientation:portrait){
  .sketch{--skb:min(120vw,100lvh);--sky:calc((100lvh - var(--skb)) * var(--skp));height:calc(var(--sky) + var(--skb) + 32px);background-position:53% var(--sky)}
  .sketch__video{top:var(--sky)}
  .sketch::before{height:calc(var(--sky) + 6px)}
  .sketch::after{height:34px}
}