/* =========================================================
   FUENTES
   ========================================================= */
@font-face {
  font-family: "Urbanist light";
  src: url("../assets/fonts/Urbanist-Light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Urbanist medium";
  src: url("../assets/fonts/Urbanist-medium.woff2") format("woff2");
  font-weight: 1; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Urbanist bold";
  src: url("../assets/fonts/Urbanist-bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Urbanist regular";
  src: url("../assets/fonts/Urbanist-regular.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* =========================================================
   RESETEOS BÁSICOS
   ========================================================= */
html, body{ 
  margin:0; 
  padding:0; 
  height:100%;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;    /* <- mata el scroll lateral */
  box-sizing: border-box; 
  background-color: black;
}
*, *::before, *::after { box-sizing: inherit; }

body {
  -webkit-font-smoothing: antialiased;   /* Safari/Chrome */
  -moz-osx-font-smoothing: grayscale;    /* Firefox */
  font-weight: 100;                      /* asegúrate de no usar 500+ */
  text-rendering: optimizeLegibility;    /* mejora kerning y suavizado */
}

/* =========================================================
   VARIABLES
   ========================================================= */
:root{
  --landing-button-font: "Urbanist light", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  --footer-font: "Urbanist light", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  --panel-content-tittle-font: "Urbanist bold", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  --panel-title-font: "Urbanist regular", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;

  --stage-w: clamp(320px, 78vw, 3000px);
  --stage-h: clamp(600px, 75vh, 1200px);
  --col-gap: clamp(4rem, 7vw, 5rem);
  --gutter: clamp(16px, 4vw, 64px);
  --mtop: clamp(4rem, 7vw, 8rem);
  --font-size-cuerpo: clamp(1.1rem, 1.3vw, 8rem);
  --title-font: clamp(2rem, 7.3vw, 17rem);
}


/* ========================================================= 
--- VIDEO + FALLBACK --- 
=========================================================  */

.video-container { position: relative; }

.background-video{
  object-fit: cover;
  object-position: center center; /* ← centra el encuadre */
  position:absolute; inset:0;
  width:100%; height:100%;
  z-index: 1;            /* ⬅️ video arriba */
}

.intro-fallback{
  position:absolute; inset:0;
  background:#000 center/cover no-repeat;
  z-index: 0;            /* ⬅️ fallback debajo del video (pero visible) */
}

/* estados */
.background-video.is-pending,
.background-video.is-hidden { visibility:hidden; opacity:0; }

.background-video.is-visible { visibility:visible; opacity:1; transition:opacity .35s ease; }

/* asegura que el logo esté en su propia capa estable */
.logo-overlay{
  position: absolute;   /* ← antes estaba relative */
  inset: 0;             /* ocupa todo el contenedor */
  z-index: 2;           /* por encima del fondo (z=1) */
  pointer-events: none; /* no bloquea clics */
}

/* =========================================================
   INTRO
   ========================================================= */
.video-container{ position:relative; width:100%; height:100vh; overflow:hidden; }
.logo-overlay img{ position:absolute; transform:translate(-50%, -50%); height:auto; }
.logo-overlay img.only-desktop  { width:57vw; max-width:2800px; min-width:100px; top:50%; left:50%; }
.logo-overlay img.only-mobile   { width:70vw; max-width:320px;  min-width:120px; top:43%; left:50%; }
.logo-overlay img.only-tablet-v { width:79vw; max-width:750px;  min-width:180px; top:43%; left:50%; }
.logo-overlay img.only-tablet-h { width:60vw; max-width:700px;  min-width:200px; top:50%; left:50%; }
@media (max-width:480px){ .logo-overlay img.only-mobile{ width:80vw; max-width:300px; } }
@media (min-width:1200px){ .only-desktop{display:block;} .only-mobile,.only-tablet-v,.only-tablet-h{display:none;} }
@media (max-width:767px){ .only-mobile{display:block;} .only-desktop,.only-tablet-v,.only-tablet-h{display:none;} }
@media (min-width:768px) and (max-width:1199px) and (orientation:portrait){
  .only-tablet-v{display:block;} .only-desktop,.only-mobile,.only-tablet-h{display:none;}
}
@media (min-width:768px) and (max-width:1199px) and (orientation:landscape){
  .only-tablet-h{display:block;} .only-desktop,.only-mobile,.only-tablet-v{display:none;}
}
/* 
@media (prefers-reduced-motion:reduce){ .background-video{display:none;} .video-container{background:#000;} }
*/

/* =========================================================
   TRANSICIÓN INTRO/LANDING
   ========================================================= */
#intro,#landing{ position:fixed; inset:0; width:100%; height:100vh; }
body.mode-intro #intro{ opacity:1; pointer-events:auto; transition:opacity 1.2s ease; }
body.mode-intro #landing{ opacity:0; pointer-events:none; }
body.mode-landing #intro{ opacity:0; pointer-events:none; transition:opacity 1.2s ease; }
body.mode-landing #landing{ opacity:1; pointer-events:auto; transition:opacity 1.2s ease .05s; }

/* =========================================================
   LANDING
   ========================================================= */
#landing{ display:grid; place-items:center; background:#000; }
@media (min-width:1920px){ .landing-inner{ width:min(1600px,85vw); } }
@media (min-width:2560px){ .landing-inner{ width:min(2200px,80vw); } }
@media (min-width:3840px){ .landing-inner{ width:min(3000px,75vw); } }

.landing-inner{
  position:absolute; top:50%; left:50%;
  width:var(--stage-w); height:var(--stage-h); min-height:var(--stage-h);
  transform:translate(-50%,-50%);
  display:grid; grid-template-rows:auto auto 1fr; box-sizing:border-box;
}
.panel-title{ margin-inline:0; padding-inline:0; letter-spacing:.04em;}
.brand{ display:grid; margin-bottom:1.2rem; place-items:start; }
.brand img{ width:min(35vw); }
.landing-nav{ display:grid; gap:1.1rem; margin-top:var(--mtop); }
.link-like{
  background:none; border:none; color:#fff; cursor:pointer; opacity:.92;
  font-family:var(--landing-button-font); font-weight:100; letter-spacing:.04em; text-align:left;
  font-size:calc(var(--font-size-cuerpo) + .2rem); padding:0; transition:opacity .2s, transform .2s;
  display: inline-block;   /* deja de expandirse */
  width: auto;             /* ancho solo según contenido */
  max-width: max-content;
}
.link-like:hover,.link-like:focus-visible{ opacity:1; transform:translateX(2px); outline:none; }

/* =========================================================
   FOOTER
   ========================================================= */

.site-footer{
  position: fixed;
  z-index: 20;
  background: none;
  border: none;
  color: #fff;
  font-family: var(--landing-button-font);
  outline:none;
  font-weight: 200;
  font-size: clamp(0.8rem, 1vw, 5rem);
  letter-spacing: .02em;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}

/* Web / desktop: pegado al borde derecho de landing-inner */
@media (min-width: 769px){
  body.mode-landing .site-footer{
    bottom: calc((100vh - var(--stage-h)) / 2);
    right:  calc((100vw - var(--stage-w)) / 2);
    left: auto;
    text-align: right;
  }
}

body.mode-landing .site-footer{
  opacity: 1;
  pointer-events: auto;
}

/* =========================================================
   OVERLAYS (PANELS)
   ========================================================= */
.panel{
  position:fixed; inset:0; background:#000; color:#fff;
  z-index:50; opacity:0; pointer-events:none; transition:opacity .35s ease;
}
.panel[aria-hidden="false"]{ opacity:1; pointer-events:auto; }

/* Stage = mismo “marco” que landing-inner */
.stage{
  position:absolute; top:50%; left:50%;
  width:var(--stage-w); height:var(--stage-h); min-height:var(--stage-h);
  transform:translate(-50%,-50%);
  display:grid; grid-template-rows:auto 1fr; /* header + scroll */
  scrollbar-gutter:var(--gutter);
}

/* Header del panel: título + flecha */
.panel-header{
  display:grid; 
  grid-template-columns:1fr auto; 
  align-items:start; 
  justify-items: start;  
  line-height: 1;
  vertical-align: top;  
}
.panel-title{
  font-family:var(--panel-title-font);
  font-size:clamp(.5rem,6.5vw,8rem);
  margin:0; 
  padding:0;
  display: inline-block;  
  width: 1;
}
.panel-back{
  margin:0; 
  padding:0;
  background:none; border:none; color:#fff; cursor:pointer;
  font-family:var(--panel-title-font), sans-serif; font-weight:700; font-size:clamp(.5rem,6.5vw,8rem);
  display: inline-block;
  line-height: 1;
}

.panel-contenido{ 
  margin-top:var(--mtop);
  display:grid; 
  min-height:0;
}

/* Área scrolleable dentro del marco */
.panel-scroll{
  min-height:0; /* IMPORTANTE para que 1fr permita overflow */
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}

/* Aire extra al final del contenido en pantallas largas */
@media (min-height: 900px) {
  .panel-scroll {
    padding-bottom: 6rem; /* ajusta según lo que quieras */
  }
}

/* Tipografías internas */
.panel p{ font-weight:100; font-family:var(--landing-button-font);line-height:1.55; margin:0; outline:none; font-size:var(--font-size-cuerpo); letter-spacing: .03em; max-width: max-content;}
.panel p strong{ font-family:var(--panel-content-tittle-font); font-weight:700;font-size:var(--font-size-cuerpo); }
.panel p em{ font-family:var(--panel-title-font); font-style:normal; font-size:clamp(2rem,4vw,16rem); line-height:1.1; }
.mob-break{ display:block; height:.5rem;} 

/* Grids de contenido */
.panel-grid{
  gap:var(--col-gap);
  display:grid; grid-template-columns:repeat(3,1fr);
}
.panel-columns{
  gap:var(--col-gap);
  display:grid; grid-template-columns:repeat(2,1fr);
}
.panel-triples{
  gap:var(--col-gap);
  display:grid; grid-template-columns:repeat(3,1fr);
}
.panel-triples2{
  gap:var(--col-gap);
  display:grid; grid-template-columns:repeat(3,1fr);
  margin-top:clamp(2rem,5vw,8rem); 
}
.panel-triples2 article{ display:flex; flex-direction:column; gap:.5rem; min-height:100%; }
.panel-triples2 article > a, .panel-triples2 article > p:last-child{ margin-top:auto; }
.panel-triples2 article br:last-of-type{ display:none; }

.panel-contact{
  display:grid; grid-template-columns:1fr 1.8fr;
}
.panel h2{
  font-family:var(--panel-content-tittle-font); font-weight:300; font-size:var(--font-size-cuerpo);
  margin:0 0 .5rem; padding:0;
}
.panel a{ font-size:var(--font-size-cuerpo); font-family:var(--panel-content-tittle-font); color:#fff; text-decoration:none; }

/* Breakpoints extra */
@media (max-width:1100px){ .panel-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:680px){ .panel-grid{ grid-template-columns:1fr; } }

/* =========================
   MOBILE (<=768)
   ========================= */
@media (max-width:768px){
  :root{
    --gutter: clamp(1rem, 4vw, 1.5rem);
    --col-gap: clamp(.6rem, 3vw, 1rem);
    --stage-h: clamp(500px, 70vh, 1200px);
  }

  .brand img{ width:min(50vw); }
  .landing-nav{ display:grid; }
  

  .link-like{
    background:none; border:none; color:#fff; cursor:pointer; opacity:.92;
    font-family:var(--landing-button-font); font-weight:100; letter-spacing:.02em; text-align:left;
    font-size:clamp(1.3rem,2vw,6rem); padding:0; transition:opacity .2s, transform .2s;
  }

  /* El overlay ocupa viewport y el scroll está dentro de .panel-scroll */
  .panel{ overflow:hidden; }

  /* Header permanece visible */
  .panel-header{ position:relative; z-index:5; }

  .panel-contenido{ 
    display: block;            /* más simple: no grid aquí */
    height: 117%;              /* ocupa todo el alto */
    min-height: 0;
    box-sizing: border-box;
    position: relative; /* necesario para el pseudo-elemento */
    overflow: hidden;   /* evita que se salga el degradado */
    margin-top:0;
  }

  .panel-contenido::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 7rem; /* alto del degradado */
    background: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0)40%);
    pointer-events: none; /* no bloquea el scroll ni clics */
    z-index: 5; /* encima del texto */
  }

  /* Contenido: 1 columna por defecto */
  .panel-grid,
  .panel-columns,
  .panel-triples,
  .panel-contact{
    grid-template-columns:1fr !important;
    gap:clamp(2rem, 2vw, 3rem);
  }
  .panel-triples2 {
    grid-template-columns:1fr !important; 
    gap:clamp(2rem, 2vw, 3rem);
  }

  .mob-break{ display:block; height:.1.5rem; }

  .panel-header .panel-title,
  .panel-header .panel-back {
    line-height: 1;
    font-size:clamp(.7rem,10vw,15rem);
  }
 
  .panel p em { font-size:clamp(.5rem,6vw,7rem); }

  /* Footer (alineado con landing-inner, a la izquierda en mobile) */
  body.mode-landing .site-footer{
    bottom: calc((100vh - var(--stage-h)) / 2);
    left:  calc((100vw - var(--stage-w)) / 2);
    right: auto;
    text-align: left;
  }
/* ===== Scrollbar fijo simulado dentro del panel (solo mobile) ===== */


.panel-scroll{
    height: 100%;              /* llena hasta abajo */
    min-height: 0;
    overflow-y: scroll;          /* scroll vertical */
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4rem; /* espacio extra al final solo en mobile */
    padding-top: var(--mtop);
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
  }

   .panel-scrollbar{
    height: 100%;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    position: absolute;
    top: 0;  
    left: 0;                 /* ⬅️ cambiamos de right a left */
    bottom: 0;
    width: 3px;
    pointer-events: none;
    opacity: .25;
    margin-left: -0.7rem;
    margin-top: var(--mtop);
  }
  .panel-scrollbar::before{
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.2);
  }
  .panel-scrollbar .thumb{
    position: absolute;
    left: 0; right: 0;
    top: 0;
    height: 20px;
    background: #fff;
  }
  .panel-scroll::-webkit-scrollbar {
  display: none; /* Safari/Chrome/iOS */
}
}


/* En desktop no se muestra (opcional) */
@media (min-width: 800px){
  .panel-scrollbar{ display:none; }
}

/* Solo desactiva el scroll en pantallas bajas en horizontal */
@media (min-height: 550px) and (orientation: landscape) {
  .panel-scroll { overflow-y: hidden; }
}

/* =========================
   DESKTOP (>=769)
   ========================= */
@media (min-width:769px){
  .panel-back{
    position:static; /* junto al título dentro del header */
    font-size:var(--title-font);
  }
}