/* ============================================================
   BARRACA MALDONADO — Landing "Próximamente"
   Concepto: plano técnico / blueprint. Plano, editorial, sin
   degradados ni glossy. Colores sólidos de marca.
   ============================================================ */

:root{
  --navy:        #0c2545;   /* fondo plano noche */
  --navy-deep:   #081a33;
  --navy-line:   #1c3a63;   /* líneas de grilla */
  --red:         #e2231a;   /* rojo marca */
  --paper:       #f2ede1;   /* hueso / papel de plano */
  --paper-dim:   #9fb0c6;   /* texto secundario frío */
  --ink:         #0c2545;

  --edge: 40px;             /* margen de las reglas */
  --ease: cubic-bezier(.16,1,.3,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  font-family:'Archivo', system-ui, sans-serif;
  background:var(--navy);
  color:var(--paper);
  overflow-x:hidden;
  min-height:100vh;
  min-height:100svh;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; text-decoration:none; }

::selection{ background:var(--red); color:#fff; }

/* ============================================================
   BLUEPRINT — grilla técnica + viñeta plana
   ============================================================ */
.blueprint{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(var(--navy-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--navy-line) 1px, transparent 1px);
  background-size:56px 56px;
  opacity:.08;
  -webkit-mask-image:radial-gradient(120% 120% at 70% 30%, #000 40%, transparent 100%);
          mask-image:radial-gradient(120% 120% at 70% 30%, #000 40%, transparent 100%);
}
.blueprint::after{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(var(--navy-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--navy-line) 1px, transparent 1px);
  background-size:280px 280px;
  opacity:.22;
}

/* ============================================================
   REGLAS / COTAS TÉCNICAS
   ============================================================ */
.ruler{ position:fixed; z-index:3; pointer-events:none; opacity:.5; }
.ruler--top{
  top:0; left:0; right:0; height:var(--edge);
  border-bottom:1px solid var(--navy-line);
  background-image:repeating-linear-gradient(90deg, var(--navy-line) 0 1px, transparent 1px 28px);
  background-position:bottom;
  background-size:28px 10px;
  background-repeat:repeat-x;
}
.ruler--left{
  top:0; bottom:0; left:0; width:var(--edge);
  border-right:1px solid var(--navy-line);
  background-image:repeating-linear-gradient(0deg, var(--navy-line) 0 1px, transparent 1px 28px);
  background-position:right;
  background-size:10px 28px;
  background-repeat:repeat-y;
}

/* Anotaciones tipo plano */
.annotate{
  position:fixed; z-index:4;
  font-family:'JetBrains Mono', monospace;
  font-size:10.5px; letter-spacing:.14em; line-height:1.7;
  color:var(--paper-dim); text-transform:uppercase;
  pointer-events:none;
}
.annotate .dim{ color:#5d76a0; }
.annotate .tick{ color:var(--red); }
.annotate--tl{ top:calc(var(--edge) + 16px); left:calc(var(--edge) + 16px); }
.annotate--tr{ top:calc(var(--edge) + 16px); right:24px; text-align:right; }
.annotate--bl{ bottom:20px; left:calc(var(--edge) + 16px); }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; z-index:2;
  min-height:100vh; min-height:100svh;
  padding:clamp(90px,12vh,150px) clamp(28px,7vw,120px) 60px calc(var(--edge) + clamp(28px,6vw,110px));
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  grid-template-rows:auto 1fr;
  gap:0 clamp(30px,5vw,80px);
  align-items:center;
}

.hero__brand{ grid-column:1 / -1; align-self:start; }
.hero__logo{ height:clamp(46px,6vw,74px); width:auto; display:block; }

.hero__center{ grid-column:1; align-self:center; max-width:720px; }

/* Eyebrow */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'JetBrains Mono', monospace;
  font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--paper-dim);
  padding:9px 15px;
  border:1px solid var(--navy-line);
  margin-bottom:clamp(22px,4vh,40px);
}
.eyebrow__dot{
  width:8px; height:8px; background:var(--red); border-radius:50%;
  box-shadow:0 0 0 0 rgba(226,35,26,.6);
  animation:pulse 2s infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(226,35,26,.55); }
  70%{ box-shadow:0 0 0 9px rgba(226,35,26,0); }
  100%{ box-shadow:0 0 0 0 rgba(226,35,26,0); }
}

/* Título masivo */
.title{
  font-family:'Anton', sans-serif;
  font-weight:400;
  text-transform:uppercase;
  line-height:.84;
  font-size:clamp(64px, 13.5vw, 200px);
  letter-spacing:-.01em;
  margin:0 0 clamp(26px,4vh,44px);
  color:var(--paper);
}
.title__line{ display:block; overflow:hidden; }
.title__word{ display:inline-block; will-change:transform; }
.title__reg{
  font-family:'Archivo', sans-serif; font-style:normal;
  font-size:.16em; vertical-align:top; color:var(--red);
  margin-left:.15em; font-weight:700;
}
/* segundo renglón en rojo para partir la palabra con onda */
.title__line:last-child .title__word{ color:var(--red); }

.lede{
  font-size:clamp(16px,1.5vw,20px);
  line-height:1.6; max-width:46ch;
  color:#cdd8e6; font-weight:400;
  margin-bottom:clamp(30px,5vh,46px);
}
.lede strong{ color:var(--paper); font-weight:700; }

/* CTA */
.cta{
  position:relative; overflow:hidden; cursor:pointer;
  display:inline-flex; align-items:center; gap:16px;
  font-family:'Archivo',sans-serif; font-weight:800;
  font-size:clamp(15px,1.3vw,17px); letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--navy); background:var(--paper);
  border:none; padding:19px 30px;
  isolation:isolate;
}
.cta__label,.cta__arrow{ position:relative; z-index:2; transition:color .4s var(--ease); }
.cta__arrow{ font-size:1.3em; transition:transform .4s var(--ease), color .4s var(--ease); }
.cta__fill{
  position:absolute; inset:0; z-index:1; background:var(--red);
  transform:translateX(-101%); transition:transform .45s var(--ease);
}
.cta:hover .cta__fill{ transform:translateX(0); }
.cta:hover .cta__label,.cta:hover .cta__arrow{ color:#fff; }
.cta:hover .cta__arrow{ transform:translateX(6px); }
.cta:focus-visible{ outline:2px solid var(--red); outline-offset:4px; }

/* Barra de progreso "obra" */
.progress{ margin-top:clamp(34px,6vh,54px); max-width:340px; }
.progress__track{ height:3px; background:var(--navy-line); overflow:hidden; }
.progress__fill{ height:100%; width:0; background:var(--red); }
.progress__meta{
  display:flex; justify-content:space-between;
  font-family:'JetBrains Mono',monospace; font-size:11px;
  letter-spacing:.18em; color:var(--paper-dim);
  margin-top:10px; text-transform:uppercase;
}

/* Hoja de ruta / lo que viene */
.roadmap{ margin-top:clamp(26px,4.5vh,42px); max-width:460px; }
.roadmap__title{
  display:flex; align-items:center; gap:14px;
  font-family:'Archivo',sans-serif; font-weight:800;
  font-size:clamp(20px,2.1vw,26px); text-transform:uppercase;
  letter-spacing:.005em; color:var(--paper);
  margin-bottom:16px;
}
.roadmap__title::before{
  content:""; display:inline-block; flex:0 0 auto;
  width:30px; height:4px; background:var(--red);
}
.roadmap__list{ list-style:none; }
.roadmap__item{
  display:flex; align-items:baseline; gap:14px;
  padding:11px 0; border-top:1px solid var(--navy-line);
  position:relative;
}
.roadmap__item:last-child{ border-bottom:1px solid var(--navy-line); }
.roadmap__idx{
  font-family:'JetBrains Mono',monospace; font-weight:700;
  font-size:12px; color:var(--red); min-width:16px;
}
.roadmap__txt{ font-size:14.5px; line-height:1.4; color:var(--paper-dim); }
.roadmap__txt strong{ color:var(--paper); font-weight:700; }
.roadmap__foot{
  display:block; margin-top:14px;
  font-family:'JetBrains Mono',monospace; font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; color:#5d76a0;
}

/* ============================================================
   TAB LATERAL
   ============================================================ */
.side-tab{
  position:fixed; z-index:6; top:50%; right:0;
  transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:center; gap:14px;
  cursor:pointer; border:none;
  background:var(--red); color:#fff;
  font-family:'JetBrains Mono',monospace; font-weight:700;
  font-size:12px; letter-spacing:.28em;
  padding:20px 13px;
  writing-mode:vertical-rl;
  transition:padding-right .35s var(--ease), background .3s;
}
.side-tab:hover{ padding-right:22px; background:#c81810; }
.side-tab span:first-child{ writing-mode:vertical-rl; }
.side-tab__arrow{ writing-mode:horizontal-tb; animation:nudge 1.6s infinite; }
@keyframes nudge{ 0%,100%{ transform:translateX(0);} 50%{ transform:translateX(-4px);} }

/* ============================================================
   FACHADA (duotono, recorte de plano)
   ============================================================ */
.facade{
  grid-column:2; align-self:center; justify-self:end;
  position:relative; width:100%; max-width:440px;
  border:1px solid var(--navy-line);
  padding:12px;
}
.facade::before{
  content:""; position:absolute; top:-1px; left:-1px; width:22px; height:22px;
  border-top:2px solid var(--red); border-left:2px solid var(--red);
}
.facade::after{
  content:""; position:absolute; bottom:-1px; right:-1px; width:22px; height:22px;
  border-bottom:2px solid var(--red); border-right:2px solid var(--red);
}
.facade img{
  display:block; width:100%; height:auto;
  filter:grayscale(1) contrast(1.05);
  mix-blend-mode:luminosity;
  opacity:.92;
}
.facade figcaption{
  font-family:'JetBrains Mono',monospace; font-size:10px;
  letter-spacing:.2em; color:var(--paper-dim);
  margin-top:10px; text-transform:uppercase;
}

/* ============================================================
   TAKEOVER DE CONTACTO — pantalla completa
   ============================================================ */
.takeover{
  position:fixed; inset:0; z-index:50;
  visibility:hidden; pointer-events:none;
}
.takeover.is-open{ visibility:visible; pointer-events:auto; }

.takeover__panel{
  position:absolute; inset:0;
  width:100%; height:100%;
  background-color:var(--navy-deep);
  /* misma grilla tenue que el fondo del hero (capa fina + capa grande) */
  background-image:
    linear-gradient(rgba(28,58,99,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28,58,99,.08) 1px, transparent 1px),
    linear-gradient(rgba(28,58,99,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28,58,99,.02) 1px, transparent 1px);
  background-size:56px 56px, 56px 56px, 280px 280px, 280px 280px;
  transform:translateY(101%);
  transition:transform .72s var(--ease);
  overflow-y:auto; overflow-x:hidden;
  display:flex; flex-direction:column;
  padding:clamp(20px,4vw,40px) clamp(26px,6vw,90px) clamp(24px,4vw,44px);
}
.takeover.is-open .takeover__panel{ transform:translateY(0); }

/* Cortina roja que sube primero, para dar el golpe de entrada */
.takeover__curtain{
  position:fixed; inset:0; z-index:60; background:var(--red);
  transform:translateY(101%); pointer-events:none;
}
.takeover.is-open .takeover__curtain{ animation:curtain .9s var(--ease) forwards; }
@keyframes curtain{
  0%{ transform:translateY(101%); }
  45%{ transform:translateY(0); }
  55%{ transform:translateY(0); }
  100%{ transform:translateY(-101%); }
}

/* Barra superior: logo + cerrar */
.takeover__bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
  padding-bottom:clamp(20px,4vh,40px);
  border-bottom:1px solid var(--navy-line);
}
.takeover__logo{ height:clamp(38px,4.5vw,56px); width:auto; display:block; }
.takeover__close{
  display:inline-flex; align-items:center; gap:12px; cursor:pointer;
  background:transparent; color:var(--paper);
  border:1px solid var(--navy-line);
  padding:12px 20px;
  font-family:'JetBrains Mono',monospace; font-size:12px;
  letter-spacing:.22em; text-transform:uppercase;
  transition:.25s;
}
.takeover__close em{ font-style:normal; font-size:15px; transition:transform .3s; }
.takeover__close:hover{ background:var(--red); border-color:var(--red); color:#fff; }
.takeover__close:hover em{ transform:rotate(90deg); }

/* Grilla de contenido */
.takeover__grid{
  flex:1; display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(30px,6vw,90px);
  align-items:center;
  padding:clamp(30px,6vh,70px) 0;
  width:100%; max-width:1300px; margin:0 auto;
}

.takeover__title{
  font-family:'Anton',sans-serif; font-weight:400;
  text-transform:uppercase; line-height:.82;
  font-size:clamp(58px,10vw,150px); letter-spacing:-.01em;
  margin-bottom:clamp(20px,3vh,32px);
}
.takeover__line{ display:block; }
.takeover__line--red{ color:var(--red); }
.takeover__tag{
  color:#cdd8e6; font-size:clamp(15px,1.5vw,19px);
  line-height:1.6; max-width:40ch; margin-bottom:clamp(26px,4vh,38px);
}

.takeover__contacts{ align-self:center; }

/* Dónde estamos + horarios */
.info{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,3vw,40px);
  margin-top:clamp(26px,4vh,36px);
  padding-top:clamp(24px,3vh,32px);
  border-top:1px solid var(--navy-line);
}
.info__head{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.info__icon{
  flex:0 0 auto; display:inline-flex; color:var(--red);
  width:26px; height:26px;
}
.info__icon svg{ width:100%; height:100%; }
.info__key{
  font-family:'Archivo',sans-serif; font-weight:800;
  font-size:clamp(16px,1.5vw,19px); letter-spacing:.02em;
  text-transform:uppercase; color:var(--paper);
}
.info__val{ font-size:14px; line-height:1.55; color:var(--paper-dim); }
.info__val strong{ color:var(--paper); font-weight:700; }
.info__link{
  display:inline-flex; align-items:center; gap:8px; margin-top:12px;
  font-family:'JetBrains Mono',monospace; font-size:12px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--paper);
  border:1px solid var(--navy-line); padding:9px 14px;
  transition:.25s;
}
.info__link:hover{ color:#fff; border-color:var(--red); background:var(--red); }
.info__link span{ transition:transform .25s var(--ease); }
.info__link:hover span{ transform:translate(2px,-2px); }

/* Botón WhatsApp dentro del takeover */
.takeover__wa{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:28px; padding:20px 26px;
  background:var(--red); color:#fff;
  font-weight:800; text-transform:uppercase; letter-spacing:.03em;
  font-size:clamp(14px,1.4vw,16px); transition:.3s;
}
.takeover__wa:hover{ background:var(--paper); color:var(--red); }
.takeover__wa span{ font-size:1.3em; }

.takeover__foot{
  font-family:'JetBrains Mono',monospace; font-size:10.5px;
  letter-spacing:.12em; color:#47608a;
  padding-top:clamp(18px,3vh,28px); border-top:1px solid var(--navy-line);
  text-align:center;
}

/* items animables (entran de abajo, escalonados) */
[data-drawer-item]{ opacity:0; transform:translateY(30px); }
.takeover.is-open [data-drawer-item]{
  animation:itemIn .6s var(--ease) forwards;
  animation-delay:var(--d,0s);
}
@keyframes itemIn{ to{ opacity:1; transform:translateY(0); } }

/* Lista de contactos */
.contact{ list-style:none; border-top:1px solid var(--navy-line); }
.contact__row{
  display:flex; align-items:center; gap:18px;
  padding:20px 4px;
  border-bottom:1px solid var(--navy-line);
  position:relative; transition:padding-left .35s var(--ease);
}
.contact__row::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:0;
  background:var(--red); transition:width .35s var(--ease);
}
.contact__row:hover{ padding-left:16px; }
.contact__row:hover::before{ width:3px; }
.contact__idx{
  font-family:'JetBrains Mono',monospace; font-size:12px;
  color:var(--red); letter-spacing:.1em; min-width:22px;
}
.contact__body{ display:flex; flex-direction:column; gap:3px; flex:1; min-width:0; }
.contact__key{
  font-family:'JetBrains Mono',monospace; font-size:10.5px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--paper-dim);
}
.contact__val{
  font-size:clamp(17px,2.2vw,21px); font-weight:700; color:var(--paper);
  word-break:break-word; line-height:1.15;
}
.contact__row:hover .contact__val{ color:var(--red); }
.contact__go{ color:var(--paper-dim); font-size:16px; transition:.3s; }
.contact__row:hover .contact__go{ color:var(--red); transform:translate(3px,-3px); }

/* Redes */
.social{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:26px; }
.social__link{
  border:1px solid var(--navy-line); padding:16px;
  display:flex; flex-direction:column; gap:5px; transition:.28s;
}
.social__link span{
  font-family:'JetBrains Mono',monospace; font-size:10.5px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--paper-dim);
}
.social__link em{ font-style:normal; font-weight:700; font-size:15px; color:var(--paper); }
.social__link:hover{ border-color:var(--red); background:rgba(226,35,26,.08); }
.social__link:hover em{ color:var(--red); }

/* ============================================================
   PRELOADER
   ============================================================ */
.loader{
  position:fixed; inset:0; z-index:100;
  background:var(--navy-deep);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:20px;
  transition:opacity .6s var(--ease), visibility .6s;
}
.loader.is-done{ opacity:0; visibility:hidden; }
.loader__bar{ width:min(240px,60vw); height:2px; background:var(--navy-line); overflow:hidden; }
.loader__bar span{ display:block; height:100%; width:0; background:var(--red); }
.loader__pct{
  font-family:'JetBrains Mono',monospace; font-size:12px;
  letter-spacing:.3em; color:var(--paper-dim);
}

/* ============================================================
   REVEAL on load
   ============================================================ */
[data-reveal]{ opacity:0; transform:translateY(22px); }
[data-reveal].in{
  opacity:1; transform:none;
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px){
  .hero{
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto;
    padding-top:clamp(80px,10vh,120px);
    align-items:start;
  }
  .hero__center{ grid-column:1; margin:clamp(30px,6vh,60px) 0; }
  .facade{ grid-column:1; justify-self:start; max-width:380px; margin-top:10px; }
  .annotate--tr{ display:none; }
}

@media (max-width:640px){
  :root{ --edge:26px; }
  .annotate{ font-size:9px; }
  .annotate--bl,.annotate--tl{ display:none; }
  .side-tab{ font-size:10px; letter-spacing:.2em; padding:16px 9px; }
  .facade{ max-width:100%; }
  .lede{ font-size:16px; }

  /* Deja aire a la derecha para que el tab "HABLEMOS" no tape el contenido */
  .hero{ padding-right:46px; }

  /* Takeover en una sola columna, alineado arriba y scrolleable */
  .takeover__grid{
    grid-template-columns:1fr;
    gap:clamp(26px,6vh,40px);
    align-items:start;
    padding:clamp(26px,5vh,44px) 0;
  }
  .takeover__title{ font-size:clamp(56px,20vw,96px); }
  .takeover__tag{ max-width:none; }
  .takeover__close span{ display:none; }
  .takeover__close{ padding:12px 14px; }
  .social{ grid-template-columns:1fr 1fr; }
  .info{ grid-template-columns:1fr; gap:20px; }
}

/* Accesibilidad: menos movimiento */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.15s !important; }
  [data-reveal],[data-drawer-item],.title__word{ opacity:1 !important; transform:none !important; }
}