/* ============================================================
   BIOHACKING TENERIFE — hoja de estilos
   ============================================================ */

:root{
  --sage:      #b4bb99;
  --green:     #39722f;
  --deep:      #16301a;
  --cream:     #f2f5ea;
  --white:     #ffffff;

  --rail-w:    clamp(130px, 14vw, 220px);
  --pad-x:     clamp(20px, 5vw, 72px);

  --display: "Archivo", "Archivo Black", "Helvetica Neue", Arial, sans-serif;
  --body:    "Inter", "Helvetica Neue", Arial, sans-serif;

  --ease-swipe: cubic-bezier(.68, 0, .18, 1);
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{ margin:0; padding:0; }

html{
  background:var(--sage);
  scroll-snap-type:y mandatory;
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  font-family:var(--body);
  color:var(--cream);
  overflow-x:hidden;
}

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

:focus-visible{
  outline:2px solid var(--cream);
  outline-offset:4px;
  border-radius:2px;
}

/* ---------- Estructura de secciones ---------- */

.section{
  position:relative;
  min-height:100svh;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  overflow:hidden;
  background:var(--sage);
  isolation:isolate;
}

/* La textura orgánica del fondo, recortada por las formas laterales */
.section::before{
  content:"";
  position:absolute;
  inset:0;
  background:url("texture.jpg") center/cover no-repeat;
  z-index:-2;
}

/* Formas sage de los bordes (extraídas del diseño original) */
.edge{
  position:absolute;
  top:-80px;
  bottom:0;
  width:min(42vw, 600px);
  z-index:-1;
  pointer-events:none;
  background-repeat:no-repeat;
  background-size:100% 100%;
  background-position:top center;
}
.edge--l{ left:-12%;  background-image:url("edge-left.svg"); }
.edge--r{ right:-12%; background-image:url("edge-right.svg"); }

/* ============================================================
   1. HOME
   ============================================================ */

.home{
  display:grid;
  grid-template-rows:auto 1fr auto;
  padding:clamp(22px,3.2vh,34px) var(--pad-x) clamp(18px,3vh,30px);
}

/* ---------- Barra superior ---------- */

.topbar{
  display:flex;
  align-items:center;
  gap:clamp(12px,2vw,26px);
  justify-content:center;
  max-width:940px;
  width:100%;
  margin:0 auto;
}

.social{
  display:flex;
  gap:12px;
  margin-right:0;
}

.social a{
  width:clamp(26px,2.2vw,32px);
  transition:transform .25s ease, opacity .25s ease;
}
.social a:hover{ transform:translateY(-3px); opacity:.85; }

.rule{
  flex:1;
  max-width:620px;
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--white);
}
.rule span{
  flex:1;
  height:1px;
  background:currentColor;
  opacity:.9;
}
.rule .tick{
  flex:none;
  width:11px;
  height:11px;
  position:relative;
}
.rule .tick::before,
.rule .tick::after{
  content:"";
  position:absolute;
  background:currentColor;
}
.rule .tick::before{ left:50%; top:0; width:1px; height:100%; }
.rule .tick::after { top:50%; left:0; height:1px; width:100%; }

.contact{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(11px,1.05vw,15px);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--white);
  white-space:nowrap;
  padding-bottom:2px;
  border-bottom:1px solid transparent;
  transition:border-color .25s ease;
}
.contact:hover{ border-color:var(--white); }

/* ---------- Bloque central ---------- */

.stage{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(34px,7vh,86px);
  max-width:1180px;
  width:100%;
  margin:0 auto;
  padding:clamp(10px,2vh,24px) 0;
}

.brand{
  display:flex;
  align-items:center;
  gap:clamp(14px,1.8vw,28px);
  justify-content:center;
}

.mark{
  flex:none;
  width:clamp(74px,7.4vw,116px);
  color:var(--green);
  transform-origin:50% 50%;
  will-change:transform,opacity;
}
.mark svg{ width:100%; height:auto; }

.wordmark{
  margin:0;
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(38px,5.4vw,84px);
  line-height:.94;
  letter-spacing:-.005em;
  text-transform:uppercase;
  color:var(--cream);
}
.wordmark .place{
  display:block;
  font-size:clamp(14px,1.55vw,24px);
  letter-spacing:.02em;
  line-height:1.5;
}

.claim{
  margin:0 auto;
  font-family:var(--display);
  font-weight:800;
  text-transform:uppercase;
  color:var(--cream);
  font-size:clamp(19px,3.1vw,47px);
  line-height:1.42;
  max-width:min(72ch,95vw);
  text-align:center;
}
.claim .line{
  display:block;
  text-align:center;
}
/* El justificado real necesita una caja invisible al final de cada línea */
.claim .line::after{
  content:"";
  display:inline-block;
  width:100%;
}
.claim .wide{ letter-spacing:.22em; }

/* ---------- Flecha ---------- */

.scroll-cue{
  justify-self:center;
  align-self:end;
  display:block;
  margin:0 auto;
  padding:14px 22px;
  background:none;
  border:0;
  cursor:pointer;
  color:var(--white);
  animation:bob 2.4s ease-in-out infinite;
}
.scroll-cue svg{
  width:clamp(38px,3.4vw,58px);
  height:auto;
  animation:pulseGlow 2.4s ease-in-out infinite;
}
.scroll-cue:hover svg{ animation-duration:1.2s; }

@keyframes bob{
  0%,100%{ transform:translateY(-9px); }
  50%    { transform:translateY(9px);  }
}

@keyframes pulseGlow{
  0%,100%{
    opacity:.62;
    filter:drop-shadow(0 0 2px rgba(242,245,234,.25));
  }
  50%{
    opacity:1;
    filter:drop-shadow(0 0 10px rgba(242,245,234,.85))
           drop-shadow(0 0 22px rgba(180,187,153,.55));
  }
}

/* ============================================================
   2. CONTENIDO — dos carruseles laterales
   ============================================================ */

.about{
  display:grid;
  grid-template-columns:var(--rail-w) 1fr var(--rail-w);
  align-items:center;
  gap:clamp(20px,3vw,56px);
  padding:clamp(40px,7vh,80px) clamp(14px,2.4vw,36px);
}

.about .edge{ display:none; }

.site-footer{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:5;
  text-align:center;
  padding:6px 20px;
  font-size:11px;
  color:var(--white);
  opacity:.55;
  pointer-events:none;
}

.copy{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(26px,4vw,72px);
  max-width:1080px;
  margin:0 auto;
}

.block h2{
  margin:0 0 clamp(22px,4.5vh,54px);
  font-family:var(--display);
  font-weight:800;
  text-transform:uppercase;
  color:var(--white);
  font-size:clamp(20px,2.5vw,38px);
  line-height:1.12;
  text-align:justify;
}
.block h2::after{ content:""; display:inline-block; width:100%; }
.block--pillars h2{ letter-spacing:.16em; }

.block p{
  margin:0 0 1.05em;
  font-size:clamp(13px,1.05vw,17px);
  line-height:1.6;
  color:var(--cream);
  max-width:42ch;
}
.block p:last-child{ margin-bottom:0; }
.block strong{
  font-weight:600;
  color:var(--white);
}

/* ---------- Carruseles ---------- */

.rail{
  position:relative;
  height:min(86vh, 780px);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 11%, #000 89%, transparent 100%);
          mask-image:linear-gradient(to bottom, transparent 0, #000 11%, #000 89%, transparent 100%);
}

.rail-track{
  display:flex;
  flex-direction:column;
  will-change:transform;
}

.rail--down .rail-track{ animation:railDown 34s linear infinite; }
.rail--up   .rail-track{ animation:railUp   34s linear infinite; }

.rail:hover .rail-track,
.rail:focus-within .rail-track{ animation-play-state:paused; }

@keyframes railDown{
  from{ transform:translateY(-50%); }
  to  { transform:translateY(0);     }
}
@keyframes railUp{
  from{ transform:translateY(0);     }
  to  { transform:translateY(-50%);  }
}

.card{
  flex:none;
  margin-bottom:16px;               /* margen, no gap: el bucle debe ser exacto */
  aspect-ratio:3/4;
  border-radius:14px;
  overflow:hidden;
  position:relative;
  display:flex;
  align-items:flex-end;
  padding:16px 14px;
  background:url("texture.jpg") center/auto 100% no-repeat;
  box-shadow:0 10px 30px rgba(9,26,12,.32);
}
.card.loaded{
  background-position:center center !important;
  background-size:auto 100% !important;
}
.card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(9,26,12,.86) 0%, rgba(9,26,12,.12) 62%);
}
.card span{
  position:relative;
  z-index:1;
  font-family:var(--display);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:clamp(10px,.86vw,13px);
  line-height:1.35;
  color:var(--cream);
}

/* Cada tarjeta muestra una zona distinta de la textura */
.card:nth-child(6n+1){ background-position:12% 18%; }
.card:nth-child(6n+2){ background-position:78% 32%; }
.card:nth-child(6n+3){ background-position:40% 84%; }
.card:nth-child(6n+4){ background-position:90% 70%; }
.card:nth-child(6n+5){ background-position:25% 55%; }
.card:nth-child(6n+6){ background-position:62% 8%;  }

/* ============================================================
   Animación de entrada
   ============================================================ */

/* Estado inicial: sólo el logo, centrado. Se aplica antes del primer pintado. */
.is-intro .reveal{ opacity:0; }
.is-intro .mark{ opacity:0; }

.reveal{
  opacity:1;
  transition:opacity .85s ease .1s, transform .85s var(--ease-swipe) .1s;
}
.is-intro .reveal{ transform:translateY(16px); }

/* ============================================================
   Responsive
   ============================================================ */

/* .edge usa min(42vw,600px): esa proporción se mantiene constante (sin ir
   reduciéndose) desde los 641px hasta que el tope de 600px empieza a entrar en
   juego sobre los ~1430px. En tablets como iPad/iPad Pro (768–1366px de ancho)
   eso hace que las formas laterales invadan demasiado el contenido central.
   Se reduce la proporción específicamente en ese rango intermedio. */
@media (min-width:641px) and (max-width:1439px){
  .edge{ width:min(28vw, 320px); }
}

@media (max-width:900px){
  .about{
    grid-template-columns:1fr;
    align-content:center;
    gap:clamp(24px,4vh,44px);
    padding:clamp(52px,8vh,80px) var(--pad-x);
  }
  .copy{ grid-template-columns:1fr; }

  /* Los carruseles pasan a horizontales, manteniendo sentidos opuestos */
  .rail{
    height:auto;
    -webkit-mask-image:linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
            mask-image:linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
  }
  .rail-track{ flex-direction:row; }
  .rail--down .rail-track{ animation-name:railRight; }
  .rail--up   .rail-track{ animation-name:railLeft;  }
  .card{
    width:clamp(104px,30vw,150px);
    margin-bottom:0;
    margin-right:12px;
  }
  @keyframes railRight{
    from{ transform:translateX(-50%); }
    to  { transform:translateX(0);     }
  }
  @keyframes railLeft{
    from{ transform:translateX(0);     }
    to  { transform:translateX(-50%);  }
  }
}

@media (max-width:640px){
  html{ scroll-snap-type:none; }
  .home{ grid-template-rows:auto 1fr auto; }
  .brand{ flex-direction:column; gap:14px; text-align:center; }
  .mark{ width:clamp(72px,20vw,104px); }
  .wordmark{ font-size:clamp(34px,11vw,56px); text-align:center; }
  .claim{ max-width:none; font-size:clamp(17px,5.4vw,26px); }
  .rule{ display:none; }
  .topbar{ justify-content:space-between; }
  .social{ margin-right:0; }
  .edge{ width:14vw; }
}

/* ============================================================
   Movimiento reducido
   ============================================================ */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .scroll-cue,
  .scroll-cue svg,
  .rail-track{ animation:none !important; }
  .scroll-cue svg{ opacity:1; }
  .reveal{ transition:none !important; transform:none !important; }
}