/* Callibree — intro con el colibrí 3D (solo portada). La carga inc/callibree-intro.php.
   Fuentes, colores (--cb-*) y em.s vienen de callibree.css. Clases con prefijo cbi-. */

html.cb-intro-on, html.cb-intro-on body{ overflow:hidden }
/* El logo de la cabecera se oculta: el colibrí vuela hasta él y aparece al llegar */
html.cb-intro-on:not(.cb-intro-out) .elementor-location-header img{ opacity:0 }
.elementor-location-header img{ transition:opacity .6s var(--cb-ease) }

.cbi{ position:fixed; inset:0; z-index:99990; color:var(--cb-cream); font-family:var(--cb-sans) }
.cbi *, .cbi *::before, .cbi *::after{ box-sizing:border-box }
.cbi-bg{ position:absolute; inset:0; background:var(--cb-bg) }
.cbi-scroll{ position:absolute; inset:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none; outline:0 }
.cbi-scroll::-webkit-scrollbar{ display:none }
.cbi-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:3; pointer-events:none; opacity:0; transition:opacity 1s var(--cb-ease);
  /* desenfoque mínimo y sombra difusa para integrar el colibrí en la escena */
  filter:blur(.6px) drop-shadow(0 28px 36px rgba(0,0,0,.55)) }
.cbi.is-ready .cbi-canvas{ opacity:1 }
.cbi.is-leaving{ transition:opacity .7s var(--cb-ease); opacity:0; pointer-events:none }

.cbi-sec{ position:relative; height:100vh; overflow:hidden }
.cbi-exit{ height:200vh }   /* la salida dura dos pantallas de scroll, para que no sea brusca */
.cbi-text{ position:absolute; z-index:2; width:min(460px,40vw) }
.cbi-num{ font:500 12px/1 var(--cb-mono); letter-spacing:.08em; color:var(--cb-coral) }
.cbi-title{ margin:18px 0 0; font:300 clamp(34px,3.6vw,60px)/1.04 var(--cb-sans); letter-spacing:-.045em; color:var(--cb-cream) }
.cbi-copy{ margin:20px 0 0; font:400 clamp(15px,1.1vw,17px)/1.55 var(--cb-sans); color:var(--cb-cream-60); max-width:380px }
.cbi-reveal{ opacity:0; transform:translateY(32px); transition:opacity .9s var(--cb-ease), transform 1.1s var(--cb-ease) }
.in .cbi-reveal{ opacity:1; transform:none }
.in .cbi-reveal.d1{ transition-delay:.1s } .in .cbi-reveal.d2{ transition-delay:.2s }

/* Portada */
.cbi-hero-img{ position:absolute; inset:0; overflow:hidden }
.cbi-hero-img img{ width:100%; height:100%; max-width:none; object-fit:cover; object-position:60% 50%; display:block; transform-origin:70% 45%; will-change:transform;
  filter:brightness(.86) saturate(.98) }
/* oscurece a la izquierda (titular) y funde con el fondo por abajo, hacia la sección siguiente */
.cbi-hero-img::after{ content:""; position:absolute; inset:0; background:
  linear-gradient(90deg, rgba(18,18,18,.82) 0%, rgba(18,18,18,.42) 34%, rgba(18,18,18,0) 58%),
  linear-gradient(0deg, #121212 0%, rgba(18,18,18,0) 38%) }
.cbi-hero .cbi-text{ left:var(--cb-m); bottom:16vh; width:min(720px,60vw) }
.cbi-hero .cbi-title{ font-size:clamp(44px,6vw,104px); line-height:.98 }

/* Secciones: se alternan. Impares: pieza a la izquierda y texto a la derecha; pares, al revés */
.cbi-s1 .cbi-text, .cbi-s3 .cbi-text{ left:56vw; top:34vh }
.cbi-s2 .cbi-text, .cbi-s4 .cbi-text{ left:var(--cb-m); top:34vh }
.cbi-s1 .cbi-piece, .cbi-s3 .cbi-piece{ left:8vw }
.cbi-s2 .cbi-piece, .cbi-s4 .cbi-piece{ right:8vw }

/* Piezas: fotografías de cada sector, enmarcadas como en una galería */
.cbi-piece{ position:absolute; z-index:1; will-change:transform; margin:0 }
.cbi-piece img{ display:block; width:100%; height:auto; border-radius:3px; box-shadow:0 40px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(250,246,237,.06) }
.p-arco{ top:16vh; width:min(24vw,360px) }
.p-obra{ top:20vh; width:min(29vw,420px) }
.p-madera{ top:16vh; width:min(24vw,360px) }
.p-marmol{ top:28vh; width:min(34vw,500px) }

/* UI fija */
.cbi-ui{ position:absolute; z-index:4; left:0; right:0; bottom:0; display:flex; align-items:flex-end; justify-content:space-between; padding:0 var(--cb-m) 28px; pointer-events:none; transition:opacity .5s }
.cbi-ui > *{ pointer-events:auto }
.cbi-count{ font:500 12px/1 var(--cb-mono); letter-spacing:.08em; color:var(--cb-cream-60); display:flex; align-items:center; gap:12px }
.cbi-count b{ color:var(--cb-cream); font-weight:500 }
.cbi-count .bar{ width:64px; height:1px; background:var(--cb-cream-12); overflow:hidden }
.cbi-count .bar i{ display:block; height:100%; background:var(--cb-coral); transform-origin:left; transform:scaleX(0) }
.cbi-hint{ position:absolute; z-index:4; left:50%; bottom:28px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:12px; font:500 11px/1 var(--cb-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--cb-cream-60); transition:opacity .5s }
.cbi-hint span{ width:1px; height:44px; background:var(--cb-cream-12); position:relative; overflow:hidden }
.cbi-hint span::after{ content:""; position:absolute; left:0; top:0; width:1px; height:40%; background:var(--cb-coral); animation:cbi-drip 1.8s var(--cb-ease) infinite }
@keyframes cbi-drip{ from{ transform:translateY(-100%) } to{ transform:translateY(260%) } }
.cbi-hint.is-nudge{ animation:cbi-nudge 1.2s ease-in-out 3 }
@keyframes cbi-nudge{ 50%{ transform:translate(-50%,-10px); color:var(--cb-cream) } }
.cbi-hint.is-hidden{ opacity:0 }
.cbi-skip{ background:none; border:1px solid var(--cb-cream-30); border-radius:999px; padding:12px 20px; font:500 12px/1 var(--cb-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--cb-cream); cursor:pointer; transition:border-color .3s, color .3s }
.cbi-skip:hover, .cbi-skip:focus-visible{ background:none; border-color:var(--cb-coral); color:var(--cb-coral); outline:0 }

/* Cargador: el colibrí del logo */
.cbi-loader{ position:absolute; inset:0; z-index:5; display:grid; place-items:center; background:var(--cb-bg); transition:opacity .8s var(--cb-ease), visibility .8s }
.cbi-loader img{ width:120px; height:auto; animation:cbi-pulse 1.6s ease-in-out infinite; clip-path:inset(0 64% 0 0) }
@keyframes cbi-pulse{ 50%{ opacity:.35 } }
.cbi.is-ready .cbi-loader{ opacity:0; visibility:hidden }

@media (max-width:760px){
  .cbi-text, .cbi-hero .cbi-text{ left:20px !important; right:20px; width:auto !important; top:auto !important; bottom:14vh }
  .cbi-s1 .cbi-piece, .cbi-s3 .cbi-piece{ left:-10vw }
  .cbi-s2 .cbi-piece, .cbi-s4 .cbi-piece{ right:-8vw }
  .cbi-piece{ top:9vh; width:56vw }
  .p-marmol{ top:14vh; width:76vw }
  .cbi-hint{ display:none }
  .cbi-canvas{ filter:blur(.5px) }   /* sin sombra en móvil: es cara de pintar a pantalla completa */
}