/* =====================================================================
   LÚCIDO — efectos.css
   Estilos de las cinco animaciones portadas de React Bits a vanilla.
   Cada bloque es independiente: se puede quitar un efecto borrando su
   script y su bloque aquí, sin tocar nada más.
   ---------------------------------------------------------------------
   01. Píldora líquida (pestañas de la carta)
   02. Carta en flujo (categorías con cinta al pasar el ratón)
   03. Portada en profundidad (pila de fotos 3D del hero)
   04. Galería esférica (la galería, a sangre, se gira arrastrando)
   05. Mantra líquido (texto WebGL)
   06. Menú gooey (píldora y partículas en la navegación)
   ===================================================================== */


/* ============ 01. PÍLDORA LÍQUIDA ============ */
.tabs__nav--liquida{ position: relative; isolation: isolate; }
.tabs__goo{
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
  filter: url(#goo);
}
.tabs__pill,
.tabs__pill--eco{
  position: absolute; left: 0; top: 0;
  width: 0; height: 0;
  background: var(--ink);
  border-radius: 100px;
  transform-origin: center;
  transition: transform .6s var(--ease), width .6s var(--ease), height .6s var(--ease), opacity .4s var(--ease);
}
.tabs__pill--eco{ transition: transform .5s var(--ease), width .5s var(--ease), opacity .45s var(--ease) .1s; }
.tabs__nav--liquida .tab{ position: relative; z-index: 1; background: transparent !important; transition: color .3s var(--ease) .18s, border-color .45s var(--ease); }
.tabs__nav--liquida .tab.is-active{ border-color: transparent; color: var(--cream); }


/* ============ 02. CARTA EN FLUJO ============ */
/* Como el FlowingMenu original: bloque oscuro con filas a toda anchura,
   etiqueta centrada en mayúsculas y una cinta clara que cubre la fila
   entera al pasar el ratón (entra por el borde más cercano al cursor)
   con el nombre y una foto repetidos en marcha. Colores de marca:
   verde carpintería de fondo, cinta crema con texto tinta. */
.flujo{
  display: none;
  flex-direction: column;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  background: var(--forest-2);
  color: var(--cream);
  overflow: hidden;
}
.flujo__fila{
  position: relative;
  overflow: hidden;
  width: 100%;
  height: clamp(88px, 9vw, 118px);
  border: 0;
  border-top: 1px solid rgba(242,236,225,.16);
  background: none;
  color: inherit;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.flujo__fila:first-child{ border-top: 0; }
.flujo__fila:focus-visible{ outline: 2px solid var(--sage); outline-offset: -4px; }
.flujo__texto{
  position: relative;
  display: flex; align-items: center; justify-content: center;
  height: 100%;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(1.25rem, 2.4vw, 2rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color .4s var(--ease);
}
/* la categoría que está abierta abajo */
.flujo__fila.is-active .flujo__texto{ color: var(--sage); }
.flujo__fila.is-active .flujo__texto::after{
  content: "";
  position: absolute; left: 50%; bottom: 22%;
  width: 2.4em; height: 1px;
  transform: translateX(-50%);
  background: var(--sage);
}
/* la cinta: cubre la fila entera, el texto de debajo queda tapado */
.flujo__cinta{
  position: absolute; inset: 0;
  background: var(--cream);
  color: var(--ink);
  pointer-events: none;
  transform: translate3d(0, 101%, 0);
  overflow: hidden;
}
.flujo__inner-wrap{ width: 100%; height: 100%; overflow: hidden; }
.flujo__inner{
  position: relative;
  display: flex; align-items: center;
  height: 100%; width: max-content;
  will-change: transform;
}
.flujo__parte{ display: flex; align-items: center; flex-shrink: 0; }
.flujo__parte span{
  white-space: nowrap;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(1.25rem, 2.4vw, 2rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1;
  padding: 0 1vw;
}
.flujo__parte i{
  display: block;
  width: 200px; height: clamp(44px, 7vh, 62px);
  margin: 0 2vw;
  border-radius: 50px;
  background-size: cover; background-position: 50% 50%;
  background-color: var(--cream-3);
}
@media (min-width: 901px){
  /* En escritorio las filas son las pestañas; las píldoras se retiran
     del todo para que un lector de pantalla no vea dos listas iguales */
  .tabs--flujo .flujo{ display: flex; }
  .tabs--flujo .tabs__nav{ display: none; }
}


/* ============ 03. PORTADA EN PROFUNDIDAD (carrusel 3D del hero) ============ */
.portada3d{
  --escala: 1;          /* la pone el script según el ancho disponible */
  --alto: 440px;
  position: relative;
  aspect-ratio: 4 / 5;
  outline: none;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.portada3d:focus-visible{ outline: 2px solid var(--terra); outline-offset: 10px; border-radius: 8px; }
.portada3d__stage{
  position: absolute; inset: 0;
  perspective: 1300px;
  perspective-origin: 50% 45%;
  transform-style: preserve-3d;
}
/* Tarjetas con la forma de arco de la portada original */
.portada3d__card{
  position: absolute; left: 50%; top: 50%;
  border-radius: 170px 170px 6px 6px;
  overflow: hidden;
  background: var(--cream-3);
  box-shadow: 0 30px 70px -40px rgba(43,33,26,.6);
  transform-style: preserve-3d;
  will-change: transform, opacity, filter;
  cursor: grab;
}
.portada3d__card:active{ cursor: grabbing; }
.portada3d__card img{ width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.portada3d__tint{ position: absolute; inset: 0; background: var(--ink); opacity: 0; pointer-events: none; }
.portada3d__puntos{
  position: absolute; left: 50%; bottom: -2.4rem; transform: translateX(-50%);
  z-index: 3000;
  display: flex; gap: 0;
}
/* 44 px de zona táctil, 8 px visibles */
.portada3d__punto{
  width: 44px; height: 44px; border-radius: 50%;
  border: 18px solid transparent;
  background: var(--line-strong);
  background-clip: padding-box;
  transition: transform .3s var(--ease), background-color .3s;
}
.portada3d__punto.is-active{ background-color: var(--terra); transform: scale(1.3); }
/* el sello y la nota del hero siguen en su sitio respecto al nuevo bloque */
.hero__media .portada3d + .hero__seal{ z-index: 3001; }
@media (max-width: 900px){
  /* en móvil el bloque mide lo que mide la tarjeta escalada, más los puntos */
  .portada3d{ aspect-ratio: auto; height: calc(var(--alto) * var(--escala) + 3.5rem); }
  .portada3d__stage{ bottom: 3.5rem; }
  .portada3d__puntos{ bottom: 0; }
}


/* ============ 04. GALERÍA ESFÉRICA ============ */
/* Variables como en el original: el radio lo pone el script según el tamaño */
.esfera{
  position: relative;
  width: 100%;
  height: min(84vh, 820px);
  background: var(--forest-2);
  color: var(--cream);
  overflow: hidden;
  --radius: 600px;
  --segments: 34;
  --tile-radius: 18px;
  --image-filter: none;
  --circ: calc(var(--radius) * 3.14159);
  --rot: calc((360deg / var(--segments)) / 2);
  --item-w: calc(var(--circ) / var(--segments));
  --item-h: calc(var(--circ) / var(--segments));
}
.esfera *{ box-sizing: border-box; }
.esfera__main{
  position: absolute; inset: 0;
  display: grid; place-items: center;
  overflow: hidden;
  touch-action: pan-y;          /* horizontal gira, vertical sigue siendo scroll */
  user-select: none; -webkit-user-select: none;
  cursor: grab;
  outline: none;
}
.esfera__main:focus-visible{ box-shadow: inset 0 0 0 2px var(--sage); }
.esfera__main.is-dragging{ cursor: grabbing; }
.esfera__stage{
  width: 100%; height: 100%;
  display: grid; place-items: center;
  perspective: calc(var(--radius) * 2);
  perspective-origin: 50% 50%;
  contain: layout paint size;
}
.esfera__sphere{
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--radius) * -1));
  will-change: transform;
}
.esfera__item{
  position: absolute;
  top: -999px; bottom: -999px; left: -999px; right: -999px;
  margin: auto;
  width: calc(var(--item-w) * 2);
  height: calc(var(--item-h) * 2);
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transform:
    rotateY(calc(var(--rot) * (var(--ox) + .5)))
    rotateX(calc(var(--rot) * (var(--oy) - .5)))
    translateZ(var(--radius));
}
.esfera__tile{
  position: absolute; inset: 10px;
  border-radius: var(--tile-radius);
  overflow: hidden;
  background: var(--forest);
  backface-visibility: hidden;
  transform: translateZ(0);
  transition: transform .3s;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.esfera__tile:hover{ transform: translateZ(0) scale(1.03); }
.esfera__tile:focus{ outline: none; }
.esfera__tile:focus-visible{ box-shadow: 0 0 0 3px var(--sage); }
.esfera__tile img{ width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; backface-visibility: hidden; filter: var(--image-filter); }
/* viñeteado y desenfoque de bordes, como en el original */
.esfera__overlay{
  position: absolute; inset: 0; margin: auto; z-index: 3; pointer-events: none;
  background-image: radial-gradient(rgba(235,235,235,0) 65%, var(--forest-2) 100%);
}
.esfera__overlay--blur{
  background-image: none;
  -webkit-mask-image: radial-gradient(rgba(235,235,235,0) 70%, var(--forest-2) 90%);
  mask-image: radial-gradient(rgba(235,235,235,0) 70%, var(--forest-2) 90%);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.esfera__fade{ position: absolute; left: 0; right: 0; height: 120px; z-index: 5; pointer-events: none; background: linear-gradient(to bottom, transparent, var(--forest-2)); }
.esfera__fade--top{ top: 0; transform: rotate(180deg); }
.esfera__fade--bottom{ bottom: 0; }
.esfera__titulo{
  position: absolute; left: var(--gutter); top: 24px; z-index: 40;
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.35rem; letter-spacing: .04em;
  pointer-events: none;
}
.esfera__titulo small{ display: block; margin-top: .3rem; font-family: var(--font-sans); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(242,236,225,.55); }
.esfera__ayuda{
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 40;
  margin: 0;
  font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(242,236,225,.55);
  pointer-events: none; white-space: nowrap;
}
/* imagen ampliada */
.esfera__viewer{ position: absolute; inset: 0; z-index: 20; pointer-events: none; }
.esfera__scrim{
  position: absolute; inset: 0; z-index: 10;
  background: rgba(0,0,0,.4);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none;
  transition: opacity .5s ease;
}
.esfera.is-open .esfera__scrim{ opacity: 1; pointer-events: auto; cursor: zoom-out; }
.esfera__grande{
  position: absolute; z-index: 30;
  border-radius: var(--tile-radius);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  transform-origin: top left;
  will-change: transform, opacity;
  pointer-events: auto;
}
.esfera__grande img{ width: 100%; height: 100%; object-fit: cover; display: block; filter: var(--image-filter); }
body.is-esfera{ overflow: hidden; }
.galeria{ padding-bottom: 0; }
.galeria .shell{ padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(4rem, 9vw, 7rem); }
@media (max-width: 700px){
  .esfera{ height: 70vh; --tile-radius: 12px; }
  .esfera__overlay--blur{ display: none; }   /* el desenfoque cuesta en móvil */
  .esfera__titulo{ font-size: 1.05rem; }
}


/* ============ 05. MANTRA LÍQUIDO ============ */
.mantra{
  position: relative;
  background: var(--cream-2);
  padding-block: clamp(3rem, 6vw, 5rem);
  overflow: hidden;
}
.mantra__lienzo{
  position: relative;
  height: clamp(240px, 38vw, 520px);
  isolation: isolate;
}
.mantra__lienzo canvas{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mantra__fallback{
  position: absolute; inset: 0;
  display: grid; place-items: center;
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.4rem, 8.4vw, 8.6rem);
  font-variation-settings: "SOFT" 30, "WONK" 1, "opsz" 144;
  letter-spacing: -.04em;
  line-height: .95;
  color: var(--terra);
}
.mantra__lienzo.is-gl .mantra__fallback{ opacity: 0; }
.mantra__nota{
  position: absolute; left: var(--gutter); bottom: clamp(1rem, 2vw, 1.5rem);
  margin: 0;
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-soft);
}
/* sin ratón no tiene sentido la pista */
@media (hover: none){ .mantra__nota{ display: none; } }
html.menos-movimiento .tabs__pill, html.menos-movimiento .tabs__pill--eco{ transition: none; }


/* ============ 06. MENÚ GOOEY (navegación principal) ============ */
.nav__list.gnav{ position: relative; isolation: isolate; gap: .35rem; }
.nav__list.gnav a{
  position: relative; z-index: 2;
  padding: .55em .95em;
  border-radius: 100px;
  transition: color .3s var(--ease) .12s;
}
.nav__list.gnav a::after{ display: none; }
.nav__list.gnav a:hover{ color: var(--ink); }
.nav__list.gnav a.is-active{ color: var(--cream); }
/* mientras se pasa el ratón, la píldora va con el enlace señalado */
.nav__list.gnav.is-previa a.is-active{ color: var(--ink); }
.nav__list.gnav.is-previa a.is-hover{ color: var(--cream); }
.gnav__goo{
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  filter: url(#goo);
}
.gnav__pill{
  position: absolute; left: 0; top: 0;
  width: 0; height: 0;
  background: var(--ink);
  border-radius: 100px;
  opacity: 0;
  transition: transform .55s var(--ease), width .55s var(--ease), height .55s var(--ease), opacity .3s;
}
.gnav__pill.is-on{ opacity: 1; }
/* partículas: salen lejos y se recogen hacia la píldora */
.gnav__particle{
  position: absolute;
  left: var(--cx); top: var(--cy);
  width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%;
  animation: gnav-particle var(--t) ease 1 -350ms forwards;
}
.gnav__point{
  display: block; width: 100%; height: 100%; border-radius: 50%;
  background: var(--c);
  opacity: 0;
  animation: gnav-point var(--t) ease 1 -350ms forwards;
}
@keyframes gnav-particle{
  0%{ transform: rotate(0deg) translate(var(--sx), var(--sy)); animation-timing-function: cubic-bezier(.55,0,1,.45); }
  70%{ transform: rotate(calc(var(--r) * .5)) translate(calc(var(--ex) * 1.2), calc(var(--ey) * 1.2)); animation-timing-function: ease; }
  85%{ transform: rotate(calc(var(--r) * .66)) translate(var(--ex), var(--ey)); }
  100%{ transform: rotate(calc(var(--r) * 1.2)) translate(calc(var(--ex) * .5), calc(var(--ey) * .5)); }
}
@keyframes gnav-point{
  0%{ transform: scale(0); opacity: 0; animation-timing-function: cubic-bezier(.55,0,1,.45); }
  25%{ transform: scale(calc(var(--s) * .25)); }
  38%{ opacity: 1; }
  65%{ transform: scale(var(--s)); opacity: 1; animation-timing-function: ease; }
  85%{ transform: scale(var(--s)); opacity: 1; }
  100%{ transform: scale(0); opacity: 0; }
}