/* ============================================================
   KAJAL — Crafted by Fire
   Landing estática. Sin frameworks, sin dependencias.
   ============================================================ */

:root{
  --negro:        #0f0f0f;
  --negro-2:      #181818;
  --negro-3:      #121212;
  --cobre:        #c49a6c;
  --cobre-claro:  #e0b98d;
  --cobre-hondo:  #8d6437;
  --crema:        #f1e5d0;
  --crema-suave:  rgba(241,229,208,.72);
  --crema-tenue:  rgba(241,229,208,.42);
  --linea:        rgba(196,154,108,.28);

  --display: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --texto:   "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ancho: 1240px;
  --aire:  clamp(72px, 11vw, 168px);
  --curva: cubic-bezier(.22,.61,.36,1);
}

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

html{
  scroll-behavior:smooth;
  scroll-padding-top:84px;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--negro);
  color:var(--crema);
  font-family:var(--texto);
  font-weight:300;
  font-size:clamp(15px,.6vw + 13.6px,17px);
  line-height:1.75;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

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

::selection{ background:var(--cobre); color:var(--negro); }

.saltar{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--cobre); color:var(--negro);
  padding:12px 20px; font-size:13px; letter-spacing:.08em;
}
.saltar:focus{ left:12px; top:12px; }

:focus-visible{ outline:2px solid var(--cobre); outline-offset:3px; }

.contenedor{
  width:min(100% - 44px, var(--ancho));
  margin-inline:auto;
}

/* ---------- marca (logo oficial) ---------- */
.marca{ width:auto; height:30px; }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  transition:background .45s var(--curva), backdrop-filter .45s var(--curva), border-color .45s var(--curva);
  border-bottom:1px solid transparent;
}
.nav.es-solida{
  background:rgba(15,15,15,.88);
  backdrop-filter:blur(14px);
  border-bottom-color:var(--linea);
}

.nav__inner{
  width:min(100% - 44px, var(--ancho));
  margin-inline:auto;
  height:76px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}

.nav__marca{ display:flex; align-items:center; gap:12px; }
.nav__texto{
  font-family:var(--display);
  font-size:17px; letter-spacing:.36em; text-indent:.36em;
  font-weight:400;
}

.nav__menu{ display:flex; align-items:center; gap:clamp(18px,2.2vw,38px); }
.nav__menu a{
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--crema-suave);
  padding:6px 0; position:relative;
  transition:color .3s var(--curva);
}
.nav__menu a::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:1px; background:var(--cobre);
  transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--curva);
}
.nav__menu a:hover{ color:var(--crema); }
.nav__menu a:hover::after{ transform:scaleX(1); transform-origin:left; }

.nav__cta{
  border:1px solid var(--linea);
  padding:10px 20px !important;
  color:var(--cobre) !important;
}
.nav__cta::after{ display:none; }
.nav__cta:hover{ background:var(--cobre); color:var(--negro) !important; border-color:var(--cobre); }

.nav__burger{
  display:none;
  width:44px; height:44px; padding:0;
  background:none; border:0; cursor:pointer;
  flex-direction:column; justify-content:center; align-items:flex-end; gap:6px;
}
.nav__burger span{
  display:block; height:1px; width:26px; background:var(--crema);
  transition:transform .35s var(--curva), opacity .25s var(--curva), width .35s var(--curva);
}
.nav__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); width:26px; }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:100svh;
  display:grid; place-items:center;
  text-align:center;
  overflow:hidden;
  padding:120px 22px 96px;
}

.hero__fondo{ position:absolute; inset:0; }
.hero__fondo img{
  width:100%; height:100%; object-fit:cover;
  object-position:center 42%;
  transform:scale(1.06);
  animation:respirar 26s ease-in-out infinite alternate;
}
@keyframes respirar{ to{ transform:scale(1.14) translateY(-1.2%); } }

.hero__velo{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 78% at 50% 62%, rgba(15,15,15,.18) 0%, rgba(15,15,15,.72) 58%, rgba(15,15,15,.95) 100%),
    linear-gradient(180deg, rgba(15,15,15,.82) 0%, rgba(15,15,15,.30) 34%, rgba(15,15,15,.88) 100%);
}

.hero__contenido{ position:relative; z-index:2; max-width:820px; }

.hero__logo{
  width:clamp(210px,26vw,300px);
  height:auto; margin:0 auto 26px; display:block;
  filter:drop-shadow(0 6px 40px rgba(0,0,0,.5));
}

.hero__titulo{
  font-family:var(--display);
  font-weight:200;
  font-size:clamp(2.4rem,5.8vw,4.4rem);
  line-height:1.12;
  letter-spacing:.012em;
  margin:0 0 22px;
  text-shadow:0 2px 40px rgba(0,0,0,.55);
}

.hero__sub{
  font-size:clamp(15px,1.5vw,18px);
  font-weight:300;
  color:var(--crema-suave);
  letter-spacing:.03em;
  margin:0 auto 40px;
  max-width:38ch;
}

.hero__scroll{
  position:absolute; left:50%; bottom:34px; transform:translateX(-50%);
  z-index:2; width:22px; height:66px;
  display:grid; place-items:start center;
}
.hero__scroll-linea{
  width:1px; height:58px;
  background:linear-gradient(180deg, var(--cobre), transparent);
  animation:caer 2.6s var(--curva) infinite;
  transform-origin:top;
}
@keyframes caer{
  0%{ transform:scaleY(0); opacity:0; }
  35%{ opacity:1; }
  100%{ transform:scaleY(1); opacity:0; }
}

/* ============================================================
   BOTONES
   ============================================================ */
.boton{
  display:inline-block;
  font-size:12px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  padding:17px 38px;
  border:1px solid var(--cobre);
  transition:background .4s var(--curva), color .4s var(--curva), box-shadow .4s var(--curva), transform .3s var(--curva);
}
.boton--brasa{
  background:var(--cobre); color:var(--negro);
  box-shadow:0 0 0 rgba(196,154,108,0);
}
.boton--brasa:hover{
  background:var(--cobre-claro); border-color:var(--cobre-claro);
  box-shadow:0 12px 44px rgba(196,154,108,.28);
  transform:translateY(-2px);
}
.boton--linea{ color:var(--crema); border-color:var(--linea); }
.boton--linea:hover{ border-color:var(--cobre); color:var(--cobre); transform:translateY(-2px); }

/* ============================================================
   SECCIONES
   ============================================================ */
.seccion{ position:relative; padding-block:var(--aire); }
.seccion--fuego{ background:var(--negro); }
.seccion--origen{ background:var(--negro-2); }
.seccion--sensorial{ background:var(--negro); }
.seccion--ruta{ background:var(--negro-3); }
.seccion--cta{
  background:
    radial-gradient(85% 120% at 50% 0%, rgba(196,154,108,.14) 0%, transparent 62%),
    var(--negro);
}

.eyebrow{
  font-size:11px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--cobre);
  margin:0 0 22px;
  display:flex; align-items:center; gap:14px;
}
.eyebrow::after{
  content:""; flex:1; height:1px; max-width:80px;
  background:linear-gradient(90deg, var(--linea), transparent);
}

.titulo{
  font-family:var(--display);
  font-weight:200;
  font-size:clamp(1.95rem,3.9vw,3.1rem);
  line-height:1.16;
  letter-spacing:.012em;
  margin:0 0 28px;
}
.titulo--centro{ text-align:center; }

.entradilla{
  max-width:62ch; margin:0 auto;
  text-align:center;
  color:var(--crema-suave);
  font-size:clamp(15px,1.4vw,18px);
}
.entradilla strong,
.cuerpo strong{ color:var(--cobre-claro); font-weight:500; }

.cuerpo p{ color:var(--crema-suave); margin:0 0 20px; max-width:52ch; }
.cuerpo em{ color:var(--cobre-claro); font-style:italic; }

.encabezado{ margin-bottom:clamp(48px,6vw,84px); }
.encabezado .eyebrow{ justify-content:center; }
.encabezado .eyebrow::before{
  content:""; flex:1; height:1px; max-width:80px;
  background:linear-gradient(270deg, var(--linea), transparent);
}

/* ---------- rejilla partida ---------- */
.rejilla--partida{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(36px,5vw,86px);
  align-items:center;
}
.rejilla--invertida .col-imagen{ order:-1; }

.col-imagen figcaption{
  margin-top:16px;
  font-size:12.5px; letter-spacing:.06em;
  color:var(--crema-tenue);
}
.col-imagen img{
  width:100%; height:auto;
  filter:saturate(.94) contrast(1.04);
}
.col-imagen--alta img{
  aspect-ratio:3/4; object-fit:cover;
}

/* ---------- cinta de imagen a sangre ---------- */
.cinta-brasa{
  margin-top:var(--aire);
  height:clamp(180px,26vw,340px);
  overflow:hidden;
  position:relative;
}
.cinta-brasa::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, var(--negro) 0%, transparent 42%, transparent 58%, var(--negro) 100%);
}
.seccion--ruta .cinta-brasa::after{
  background:linear-gradient(180deg, var(--negro-3) 0%, rgba(18,18,18,.35) 45%, var(--negro-3) 100%);
}
.cinta-brasa img{
  width:100%; height:100%; object-fit:cover;
  opacity:.55;
}
.cinta-brasa--baja{ margin-bottom:calc(var(--aire) * -1); }

/* ---------- barra de altura ---------- */
.altura{
  display:flex; align-items:center; gap:18px;
  max-width:520px; margin:0 auto clamp(52px,6vw,88px);
}
.altura__marca span{
  font-size:11px; letter-spacing:.2em; color:var(--cobre);
  white-space:nowrap;
}
.altura__barra{
  flex:1; height:1px; background:var(--linea);
  position:relative; overflow:hidden;
}
.altura__relleno{
  position:absolute; inset:0;
  background:linear-gradient(90deg, var(--cobre-hondo), var(--cobre-claro), var(--cobre-hondo));
  transform:scaleX(0); transform-origin:left;
  transition:transform 1.6s var(--curva) .2s;
}
[data-revelado] .altura__relleno{ transform:scaleX(1); }

/* ---------- regiones ---------- */
.regiones{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,2.4vw,34px);
}
.region{
  border:1px solid rgba(196,154,108,.14);
  background:rgba(15,15,15,.5);
  overflow:hidden;
  transition:border-color .5s var(--curva), transform .5s var(--curva);
}
.region:hover{ border-color:var(--linea); transform:translateY(-5px); }
.region__foto{ overflow:hidden; aspect-ratio:4/5; }
.region__foto img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.9) brightness(.88);
  transition:transform 1.1s var(--curva), filter .6s var(--curva);
}
.region:hover .region__foto img{ transform:scale(1.06); filter:saturate(1) brightness(1); }
.region__texto{ padding:26px 26px 30px; }
.region__texto h3{
  font-family:var(--display);
  font-size:1.15rem; font-weight:400; letter-spacing:.09em;
  text-transform:uppercase;
  margin:0 0 12px;
}
.region__texto p{ margin:0; color:var(--crema-suave); font-size:14.5px; }

/* ---------- galería ---------- */
.galeria{
  margin-top:clamp(52px,6vw,92px);
  width:min(100% - 44px, var(--ancho));
  margin-inline:auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(10px,1.2vw,18px);
}
.galeria figure{ margin:0; overflow:hidden; aspect-ratio:3/4; }
.galeria img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.86) brightness(.86);
  transition:transform 1.2s var(--curva), filter .6s var(--curva);
}
.galeria figure:hover img{ transform:scale(1.07); filter:saturate(1) brightness(1); }

/* ---------- ruta / mapa ---------- */
.rejilla--mapa{
  display:grid;
  grid-template-columns:minmax(280px,.85fr) 1fr;
  gap:clamp(30px,5vw,80px);
  align-items:center;
}

.ruta{ position:relative; }
.ruta::before{
  content:"";
  position:absolute; inset:6% 4%;
  background:radial-gradient(60% 55% at 42% 42%, rgba(196,154,108,.13), transparent 70%);
  pointer-events:none;
}
.ruta__svg{
  width:100%; height:auto;
  max-height:min(72vh, 640px);
  display:block;
  overflow:visible;
}

.ruta__tierra path{
  fill:rgba(241,229,208,.045);
  stroke:rgba(196,154,108,.42);
  stroke-width:1.4;
  stroke-linejoin:round;
}

.ruta__linea{
  fill:none;
  stroke:url(#fuego);
  stroke-width:2.6;
  stroke-linecap:round;
  stroke-dasharray:760;
  stroke-dashoffset:760;
  filter:drop-shadow(0 0 12px rgba(224,164,92,.45));
}
[data-revelado] .ruta__linea{ animation:trazar 2.8s var(--curva) .35s forwards; }
@keyframes trazar{ to{ stroke-dashoffset:0; } }

.ruta__punto circle{ fill:var(--cobre-claro); }
.ruta__pulso{
  fill:none; stroke:var(--cobre); stroke-width:1.4;
  transform-box:fill-box; transform-origin:center;
  animation:pulso 3.4s ease-out infinite;
}
@keyframes pulso{
  0%{ transform:scale(1); opacity:.65; }
  70%,100%{ transform:scale(3.6); opacity:0; }
}
.ruta__punto text{
  fill:var(--crema);
  font-family:var(--texto);
  font-size:15px; font-weight:500; letter-spacing:.22em;
}
.ruta__detalle{
  fill:var(--cobre) !important;
  font-size:12.5px !important; letter-spacing:.12em !important; font-weight:300 !important;
}

/* ficha de datos */
.datos{ margin:38px 0 0; border-top:1px solid rgba(196,154,108,.16); }
.datos__fila{
  display:grid; grid-template-columns:104px 1fr; gap:18px;
  padding:16px 0;
  border-bottom:1px solid rgba(196,154,108,.12);
}
.datos dt{
  font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--cobre);
  padding-top:3px;
}
.datos dd{ margin:0; color:var(--crema-suave); font-size:14.5px; }

/* ---------- CTA ---------- */
.cta{ text-align:center; }
.cta__llama{
  width:auto; height:52px; margin:0 auto 26px; display:block;
  filter:drop-shadow(0 0 18px rgba(196,154,108,.45));
  animation:latir 4s ease-in-out infinite;
}
@keyframes latir{
  0%,100%{ opacity:.85; transform:translateY(0) scale(1); }
  50%    { opacity:1;   transform:translateY(-3px) scale(1.05); }
}
.cta__firma{
  font-family:var(--display);
  font-size:clamp(.85rem,1.5vw,1.05rem);
  font-weight:400;
  letter-spacing:.3em; text-transform:uppercase;
  color:var(--cobre);
  margin:0 0 44px;
}
.cta__botones{
  display:flex; flex-wrap:wrap; gap:14px; justify-content:center;
}

/* ---------- pie ---------- */
.pie{
  background:var(--negro);
  border-top:1px solid rgba(196,154,108,.16);
  padding-block:clamp(46px,6vw,72px);
}
.pie__inner{
  display:grid; gap:30px;
  grid-template-columns:auto 1fr;
  align-items:center;
}
.pie__marca{ display:flex; align-items:center; gap:14px; }
.marca--pie{ width:auto; height:36px; }
.pie__marca p{
  margin:0;
  font-family:var(--display);
  font-size:16px; font-weight:400; letter-spacing:.32em; line-height:1.4;
}
.pie__marca span{
  display:block;
  font-family:var(--texto);
  font-size:9.5px; letter-spacing:.28em;
  color:var(--cobre); text-transform:uppercase;
}
.pie__enlaces{
  display:flex; flex-wrap:wrap; gap:12px 28px; justify-content:flex-end;
}
.pie__enlaces a{
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--crema-tenue);
  transition:color .3s var(--curva);
}
.pie__enlaces a:hover{ color:var(--cobre); }
.pie__legal{
  grid-column:1/-1;
  margin:0; padding-top:26px;
  border-top:1px solid rgba(196,154,108,.1);
  font-size:11.5px; letter-spacing:.08em;
  color:var(--crema-tenue);
}

/* ============================================================
   REVELADO AL SCROLL
   ============================================================ */
[data-revelar]{
  opacity:0;
  transform:translateY(34px);
  transition:opacity 1s var(--curva), transform 1s var(--curva);
}
[data-revelar][data-revelado]{ opacity:1; transform:none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px){
  .galeria{ grid-template-columns:repeat(2,1fr); }
  .regiones{ grid-template-columns:1fr; max-width:520px; margin-inline:auto; }
}

@media (max-width:860px){
  .nav__burger{ display:flex; }
  .nav__menu{
    position:fixed; inset:76px 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(12,12,12,.98);
    backdrop-filter:blur(16px);
    border-bottom:1px solid var(--linea);
    padding:8px 22px 26px;
    transform:translateY(-12px);
    opacity:0; pointer-events:none;
    transition:opacity .35s var(--curva), transform .35s var(--curva);
  }
  .nav__menu.es-abierto{ opacity:1; transform:none; pointer-events:auto; }
  .nav__menu a{
    padding:16px 0; font-size:13px;
    border-bottom:1px solid rgba(196,154,108,.1);
  }
  .nav__menu a::after{ display:none; }
  .nav__cta{ margin-top:18px; text-align:center; border:1px solid var(--linea); }

  .rejilla--partida{ grid-template-columns:1fr; }
  .rejilla--invertida .col-imagen{ order:0; }
  .col-imagen--alta img{ aspect-ratio:4/3; }

  .rejilla--mapa{ grid-template-columns:1fr; }
  .ruta{ max-width:420px; margin-inline:auto; }
  .datos__fila{ grid-template-columns:92px 1fr; gap:14px; }

  .pie__inner{ grid-template-columns:1fr; }
  .pie__enlaces{ justify-content:flex-start; }
}

@media (max-width:560px){
  .hero{ padding-top:104px; }
  .galeria{ grid-template-columns:1fr 1fr; }
  .boton{ padding:15px 26px; }
  .cta__botones{ flex-direction:column; align-items:stretch; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-revelar]{ opacity:1; transform:none; }
  .ruta__linea{ stroke-dashoffset:0; }
  .altura__relleno{ transform:scaleX(1); }
}