/* ============================================================
   PARAFERNALIA · HOME
   Requiere base.css. Aquí solo vive lo exclusivo del Home.
   ============================================================ */
:root{
  --bg-ride:var(--ivory);
  --gap:0px;   /* el masonry no deja espacios: el fondo nunca se ve */
  --ride-rows:6;
  --ride-driver:200vh;          /* dos pantallas de recorrido */
}
body{background:var(--bg-ride)}

/* ============================================================
   HEADER · logo blanco fijo, se revela de izquierda a derecha
   ============================================================ */
.site-header{
  position:fixed;
  top:clamp(22px,3vh,36px);
  left:clamp(22px,3vw,44px);
  z-index:40;
  transition:opacity .5s var(--ease-suave),visibility .5s;
}
.site-header .logo{
  display:block;
  width:clamp(170px,16vw,230px);
  filter:drop-shadow(0 2px 12px rgba(28,30,33,.45));
  clip-path:inset(-8% 100% -8% 0);
  animation:logo-reveal 1.15s var(--ease-editorial) .35s forwards;
}
@keyframes logo-reveal{to{clip-path:inset(-8% 0% -8% 0)}}
body.past-ride .site-header{opacity:0;visibility:hidden;pointer-events:none}

/* ============================================================
   CTA · Conócenos — flecha mínima, elegante, respirando
   ============================================================ */
.cta-conocenos{
  position:fixed;
  right:clamp(22px,3vw,44px);
  bottom:clamp(22px,3.5vh,40px);
  z-index:40;
  display:flex;align-items:center;gap:14px;
  color:var(--texto-inverso);
  font-weight:700;font-size:12px;
  letter-spacing:.22em;text-transform:uppercase;
  filter:drop-shadow(0 2px 9px rgba(28,30,33,.5));
  opacity:0;
  animation:cta-in 1s var(--ease-suave) 1.4s forwards;
  transition:opacity .5s var(--ease-suave),visibility .5s;
}
@keyframes cta-in{to{opacity:1}}
.cta-conocenos .flecha{overflow:visible}
.cta-conocenos .flecha line,
.cta-conocenos .flecha polyline{
  stroke:currentColor;stroke-width:1.4;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
}
.cta-conocenos .flecha{
  animation:respira 2.6s var(--ease-suave) infinite;
}
@keyframes respira{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(6px)}
}
.cta-conocenos .flecha line{transition:all .45s var(--ease-suave)}
.cta-conocenos:hover .flecha line{x1:-14}
body.past-ride .cta-conocenos{opacity:0;visibility:hidden;pointer-events:none}

/* ============================================================
   MASONRY EDITORIAL · 6 filas horizontales ligadas al scroll
   ============================================================ */
.ride-track{
  position:relative;
  height:calc(100vh + var(--ride-driver));
}
.ride{will-change:transform;backface-visibility:hidden;
  position:sticky;top:0;
  height:100vh;height:100svh;
  overflow:hidden;
  display:flex;flex-direction:column;
}
.fila{transform:translateZ(0);
  display:flex;gap:var(--gap);
  height:calc((100% - (var(--ride-rows) - 1)*var(--gap)) / var(--ride-rows));
  will-change:transform;
}
.item{
  position:relative;z-index:1;
  height:100%;flex:0 0 auto;
  overflow:hidden;
  cursor:default;
  /* Aparición: nunca de golpe */
  opacity:.15;
  transform:scale(.96);
  filter:blur(8px);
  transition:
    opacity .6s var(--ease-suave) var(--delay-fila,0s),
    transform .6s var(--ease-suave) var(--delay-fila,0s),
    filter .6s var(--ease-suave) var(--delay-fila,0s),
    box-shadow .35s var(--ease-suave);
}
.item.visto{opacity:1;transform:scale(1);filter:blur(0)}
.item img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ease-suave);
}
/* Hover: zoom mínimo + sombra suave. Nada más. */
@media (hover:hover){
  .item.visto:hover{z-index:2;box-shadow:0 14px 34px rgba(28,30,33,.28)}
  .item.visto:hover img{transform:scale(1.025)}
}

/* ============================================================
   BLOQUE DE CIERRE · salida del Home
   ============================================================ */
/* La última pantalla se compone exacta: cierre + footer llenan el viewport.
   El footer sube hasta la guía y la galería jamás asoma. */
.pantalla-final{
  position:relative;z-index:10;
  margin-top:-17px;
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;
}
.pantalla-final .site-footer{margin-top:auto}
.cierre{
  position:relative;
  flex:1;
  background:var(--bg-cierre);
  color:var(--texto);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;
  padding:clamp(56px,9vh,110px) clamp(24px,6vw,80px);
  gap:clamp(36px,5.5vh,56px);
}
.cierre .frase{
  text-align:center;
  font-weight:700;
  font-size:clamp(1.05rem,3.7vw,3.5rem);
  line-height:1.18;
  white-space:nowrap;         /* una sola línea, siempre */
  color:var(--outer-space);
  opacity:0;transform:translateY(26px);
  transition:opacity .9s var(--ease-suave),transform .9s var(--ease-suave);
}
.cierre.activa .frase{opacity:1;transform:translateY(0)}
.cierre .frase .destaca{color:var(--warm-red)}
.cierre .accesos{
  display:flex;gap:clamp(32px,6vw,72px);
  flex-wrap:wrap;justify-content:center;
  opacity:0;transform:translateY(20px);
  transition:opacity .9s var(--ease-suave) .25s,transform .9s var(--ease-suave) .25s;
}
.cierre.activa .accesos{opacity:1;transform:translateY(0)}
.acceso{
  display:inline-flex;align-items:center;gap:12px;
  font-weight:700;font-size:clamp(.95rem,1.4vw,1.15rem);
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--outer-space);
  padding-bottom:6px;
  border-bottom:1px solid currentColor;
  transition:color .35s var(--ease-suave);
}
.acceso svg{transition:transform .35s var(--ease-suave)}
.acceso:hover{color:var(--warm-red)}
.acceso:hover svg{transform:translateX(5px)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:820px){
  :root{--ride-rows:3}
}

/* ============================================================
   MOVIMIENTO REDUCIDO
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .site-header .logo{animation:none;clip-path:none}
  .cta-conocenos{animation:none;opacity:1}
  .cta-conocenos .flecha{animation:none}
  .item{opacity:1;transform:none;filter:none;transition:box-shadow .3s}
  .item img{transition:none}
  .cierre .frase,.cierre .accesos{opacity:1;transform:none;transition:none}
}


/* El cierre respira como el diseño original: pantalla completa con aire
   para la frase y para la hamburguesa arriba a la derecha. */

/* Hamburguesa del Home: invisible durante el recorrido, aparece con el blanco */
.btn-menu-home{
  position:fixed;top:clamp(18px,3vh,30px);right:clamp(18px,3vw,34px);z-index:60;
  opacity:0;pointer-events:none;transform:translateY(-6px);
  transition:opacity .5s var(--ease-suave),transform .5s var(--ease-suave);
}
.btn-menu-home.visible{opacity:1;pointer-events:auto;transform:translateY(0)}


/* La hamburguesa del Home vive a la DERECHA y solo aparece al llegar al blanco.
   Sticks Outer Space sobre Ivory; X en Ivory sobre el overlay. */
.btn-menu-home{z-index:90}
.btn-menu-home span{background:var(--outer-space)}
body.menu-abierto .btn-menu-home span{background:var(--ivory)}

/* Tablet y móvil: hamburguesa SIEMPRE visible arriba a la derecha,
   Ivory con sombra ligera sobre las fotos; transita a Outer Space al
   llegar al blanco. Sin Conócenos. */
@media (max-width:1024px){
  .cta-conocenos{display:none}
  .btn-menu-home{opacity:1;pointer-events:auto;transform:none}
  .btn-menu-home span{
    background:var(--ivory);
    box-shadow:0 1px 5px rgba(28,30,33,.45);
    transition:background-color .5s var(--ease-suave),box-shadow .5s var(--ease-suave);
  }
  .btn-menu-home.visible span{background:var(--outer-space);box-shadow:none}
  body.menu-abierto .btn-menu-home span{background:var(--ivory);box-shadow:none}
  /* Más aire para la zona de "Creamos…" */
  .cierre{padding-top:clamp(84px,14vh,140px)}
}

/* La galería jamás asoma una franja sobre el cierre */
.cierre{position:relative}
.cierre::before{
  content:"";position:absolute;left:0;right:0;top:-42px;height:44px;
  background:var(--bg-cierre);pointer-events:none;
}