/* ============================================================
   ALTITUD · Medellín View Living
   Sistema visual derivado del Manual de Identidad 2026
   ============================================================ */

@font-face{font-family:'Jost';src:url('../fonts/jost.woff2') format('woff2');font-weight:300 600;font-style:normal;font-display:swap}
@font-face{font-family:'Jakarta';src:url('../fonts/jakarta.woff2') format('woff2');font-weight:300 600;font-style:normal;font-display:swap}

:root{
  /* paleta oficial */
  --lino:#F3EFE8;
  --piedra:#D5D0C8;
  --roble:#B79A73;
  --terracota:#904F2E;
  --musgo:#4D5B45;
  --carbon:#262626;

  --lino-2:#EAE4DA;          /* lino un paso más profundo, para alternar bloques */
  --carbon-soft:rgba(38,38,38,.62);
  --hair:rgba(38,38,38,.14);

  --display:'Jost',system-ui,sans-serif;
  --body:'Jakarta','Jost',system-ui,sans-serif;

  --rail:84px;               /* ancho del altímetro */
  --gut:clamp(20px,5vw,72px);
  --maxw:1360px;

  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--lino);color:var(--carbon);
  font-family:var(--body);font-weight:300;font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* `height:auto` es obligatorio aquí. Los <img> llevan los atributos width
   y height para reservar el espacio y evitar saltos de layout (CLS), pero
   si están puestos el navegador toma ese alto como especificado e IGNORA
   `aspect-ratio` — y media docena de reglas de abajo dependen de él. Las
   reglas que fijan `height:100%` siguen ganando por especificidad. */
img{max-width:100%;height:auto;display:block}
figure{margin:0}   /* el margen de 40px del user-agent rompe las rejillas */
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--terracota);outline-offset:3px}

/* ---------- tipografía ---------- */
.eyebrow{
  font-family:var(--display);font-weight:400;font-size:.7rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--terracota);
  margin:0 0 1.4rem;
}
.eyebrow--muted{color:var(--roble)}
h1,h2,h3{font-family:var(--display);font-weight:300;margin:0;line-height:1.04;letter-spacing:.01em}
h1{font-size:clamp(2.9rem,8vw,6.4rem)}
h2{font-size:clamp(2.1rem,4.6vw,3.9rem)}
h3{font-size:clamp(1.25rem,2.2vw,1.7rem);letter-spacing:.02em}
p{margin:0 0 1.15em;max-width:62ch}
.lede{font-size:clamp(1.05rem,1.5vw,1.28rem);line-height:1.62;color:var(--carbon-soft)}
.num{font-family:var(--display);font-weight:300;font-variant-numeric:tabular-nums;letter-spacing:.06em}

/* marca: el símbolo se pinta con máscara para poder recolorearlo */
.mark{
  display:block;background-color:currentColor;
  -webkit-mask:url('../img/logo-mark.png') center/contain no-repeat;
  mask:url('../img/logo-mark.png') center/contain no-repeat;
}
.wordmark{
  display:block;background-color:currentColor;
  -webkit-mask:url('../img/logo-word.png') center/contain no-repeat;
  mask:url('../img/logo-word.png') center/contain no-repeat;
}

/* ============================================================
   ALTÍMETRO — la firma del sitio
   ============================================================ */
.altimeter{
  position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:60;
  pointer-events:none;display:flex;flex-direction:column;align-items:center;
  padding:22px 0;
}
.altimeter::before{ /* la línea */
  content:'';position:absolute;left:50%;top:96px;bottom:96px;width:1px;
  background:linear-gradient(180deg,transparent,var(--hair) 8%,var(--hair) 92%,transparent);
}
.alt-top{
  font-family:var(--display);font-size:.58rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--roble);text-align:center;line-height:1.5;
  font-variant-numeric:tabular-nums;
}
.alt-top b{display:block;font-weight:400;color:var(--terracota);font-size:.78rem;letter-spacing:.1em}

/* cursor: el símbolo del logo, viajando por el riel */
.alt-cursor{
  position:absolute;left:50%;top:96px;width:15px;height:25px;
  transform:translate(-50%,0);color:var(--terracota);
  transition:transform .12s linear;
}
.alt-cursor .mark{width:100%;height:100%}

/* rótulo de sección en letras apiladas — guiño a la portada del manual */
.alt-label{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:96px;display:flex;flex-direction:column;align-items:center;gap:.14em;
  font-family:var(--display);font-size:.62rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--carbon-soft);
}
.alt-label span{display:block;line-height:1;transition:opacity .4s var(--ease)}

@media (max-width:900px){
  :root{--rail:0px}
  .altimeter{display:none}
}

/* ============================================================
   HEADER
   ============================================================ */
.hdr{
  position:fixed;top:0;left:var(--rail);right:0;z-index:70;
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:18px var(--gut);
  transition:background .5s var(--ease),padding .5s var(--ease),box-shadow .5s var(--ease);
}
.hdr.is-stuck{background:rgba(243,239,232,.92);backdrop-filter:blur(14px);padding-top:12px;padding-bottom:12px;box-shadow:0 1px 0 var(--hair)}
.hdr-brand{display:flex;align-items:center;gap:12px;color:var(--carbon)}
.hdr-brand .mark{width:17px;height:28px;color:var(--terracota)}
.hdr-brand .wordmark{width:104px;height:13px}
/* la navegación se agrupa junto a la marca; el CTA queda solo a la derecha,
   así ningún enlace cae sobre el borde de la fotografía del hero */
.hdr-nav{display:flex;align-items:center;gap:28px;margin:0 auto 0 44px;font-family:var(--display);font-size:.74rem;letter-spacing:.15em;text-transform:uppercase}
.hdr-nav a{position:relative;padding:4px 0;color:var(--carbon)}
.hdr-nav a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--terracota);transition:right .4s var(--ease)}
.hdr-nav a:hover::after{right:0}
.hdr-cta{
  font-family:var(--display);font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;
  background:var(--terracota);color:var(--lino);padding:12px 22px;
  transition:background .35s var(--ease);white-space:nowrap;
}
.hdr-cta:hover{background:var(--carbon)}
.hdr-burger{display:none;width:26px;height:16px;position:relative}
.hdr-burger i{position:absolute;left:0;right:0;height:1.5px;background:var(--carbon);transition:transform .35s var(--ease),opacity .2s}
.hdr-burger i:nth-child(1){top:0}
.hdr-burger i:nth-child(2){top:7px}
.hdr-burger i:nth-child(3){top:14px}
body.nav-open .hdr-burger i:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open .hdr-burger i:nth-child(2){opacity:0}
body.nav-open .hdr-burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:900px){
  .hdr-nav{
    position:fixed;inset:0;margin:0;background:var(--lino);flex-direction:column;
    justify-content:center;gap:28px;font-size:1.05rem;
    opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s;
  }
  body.nav-open .hdr-nav{opacity:1;visibility:visible}
  .hdr-burger{display:block;z-index:2}
  .hdr-cta{display:none}
}

/* En móvil la fotografía del hero queda arriba: la marca necesita
   contraste sobre el cielo hasta que la cabecera se fija. */
@media (max-width:1000px){
  .hero-fig::before{
    content:'';position:absolute;left:0;right:0;top:0;height:150px;z-index:1;pointer-events:none;
    background:linear-gradient(180deg,rgba(38,38,38,.5),rgba(38,38,38,0));
  }
  .hdr:not(.is-stuck) .hdr-brand,
  .hdr:not(.is-stuck) .hdr-brand .mark{color:var(--lino)}
  .hdr:not(.is-stuck) .hdr-burger i{background:var(--lino)}
  body.nav-open .hdr-brand,body.nav-open .hdr-brand .mark{color:var(--carbon)}
  body.nav-open .hdr-burger i{background:var(--carbon)}
}
.only-mobile{display:none}
@media (max-width:900px){.only-mobile{display:flex}}

/* ============================================================
   ESTRUCTURA
   ============================================================ */
main{padding-left:var(--rail)}
.sec{padding:clamp(72px,10vw,140px) var(--gut);position:relative}
.sec--tight{padding-top:clamp(48px,6vw,80px)}
.wrap{max-width:var(--maxw);margin:0 auto}
.sec--dark{background:var(--carbon);color:var(--lino)}
.sec--dark .lede{color:rgba(243,239,232,.68)}
.sec--dark .eyebrow{color:var(--roble)}
.sec--moss{background:var(--musgo);color:var(--lino)}
.sec--moss .eyebrow{color:rgba(243,239,232,.6)}
.sec--stone{background:var(--lino-2)}

.rule{height:1px;background:var(--hair);border:0;margin:0}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  min-height:100svh;display:grid;grid-template-columns:1.18fr .82fr;
  align-items:stretch;
}
.hero-text{
  display:flex;flex-direction:column;justify-content:center;
  padding:130px var(--gut) 48px;
}
.hero h1{margin:0 0 1.6rem}
.hero h1 em{font-style:normal;display:block;color:var(--terracota)}
.hero-sub{max-width:44ch}
.hero-meta{
  display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:2.2rem;
  font-family:var(--display);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--carbon-soft);
}
.hero-meta span{display:flex;align-items:center;gap:9px}
.hero-meta span::before{content:'';width:5px;height:5px;background:var(--roble);transform:rotate(45deg)}
.hero-fig{position:relative;overflow:hidden;background:var(--piedra)}
.hero-fig img{width:100%;height:100%;object-fit:cover}
.hero-fig figcaption{
  position:absolute;left:0;bottom:0;right:0;padding:24px;
  font-family:var(--display);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--lino);
  background:linear-gradient(0deg,rgba(38,38,38,.62),transparent);
}

/* barra de búsqueda del hero */
.searchbar{
  margin-top:2.6rem;background:var(--lino);border:1px solid var(--hair);
  /* minmax(0,1fr): los input[type=date] tienen un ancho mínimo intrínseco
     grande que, con 1fr a secas, desborda la rejilla en móvil */
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;align-items:stretch;max-width:640px;
}
.searchbar label{
  display:flex;flex-direction:column;gap:5px;padding:14px 18px;border-right:1px solid var(--hair);min-width:0;
}
.searchbar label:nth-child(3){border-right:0}
.searchbar span{font-family:var(--display);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--roble)}
.searchbar input,.searchbar select{
  font-family:var(--body);font-size:.92rem;border:0;background:none;color:var(--carbon);padding:0;width:100%;
}
.searchbar button{
  background:var(--carbon);color:var(--lino);padding:0 26px;
  font-family:var(--display);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  transition:background .35s var(--ease);
}
.searchbar button:hover{background:var(--terracota)}

@media (max-width:1000px){
  .hero{grid-template-columns:1fr;min-height:0}
  .hero-text{padding-top:118px;order:2}
  .hero-fig{order:1;aspect-ratio:4/5;max-height:70svh}
  .searchbar{grid-template-columns:1fr 1fr}
  .searchbar label:nth-child(2){border-right:0}
  .searchbar label:nth-child(3){border-top:1px solid var(--hair);border-right:1px solid var(--hair)}
  .searchbar button{grid-column:2;border-top:1px solid var(--hair);padding:16px}
}

/* ============================================================
   MANIFIESTO
   ============================================================ */
.manifest{display:grid;grid-template-columns:.42fr .58fr;gap:clamp(32px,6vw,84px);align-items:start}
.manifest-fig{aspect-ratio:4/5;overflow:hidden;background:var(--piedra)}
.manifest-fig img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.manifest-body h2{margin-bottom:1.8rem}
.manifest-body p{font-size:clamp(1rem,1.35vw,1.16rem);color:var(--carbon-soft)}
.manifest-body p:first-of-type{color:var(--carbon);font-size:clamp(1.15rem,1.7vw,1.42rem);line-height:1.5}
.sign{
  margin-top:2.4rem;display:flex;align-items:center;gap:14px;
  font-family:var(--display);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--terracota);
}
.sign .mark{width:13px;height:22px}
@media (max-width:860px){.manifest{grid-template-columns:1fr}.manifest-fig{aspect-ratio:16/10}}

/* ============================================================
   PILARES
   ============================================================ */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:clamp(32px,5vw,64px);border-top:1px solid var(--hair)}
.pillar{padding:36px 30px 40px 0;border-right:1px solid var(--hair)}
.pillar:last-child{border-right:0;padding-right:0}
.pillar:not(:first-child){padding-left:30px}
.pillar h3{margin:0 0 .9rem;max-width:11ch}
.pillar p{font-size:.95rem;color:var(--carbon-soft);margin:0}
.pillar .mark{width:11px;height:19px;color:var(--roble);margin-bottom:20px}
@media (max-width:980px){
  .pillars{grid-template-columns:1fr 1fr}
  .pillar:nth-child(2n){border-right:0;padding-right:0}
  .pillar:nth-child(n+3){border-top:1px solid var(--hair)}
  .pillar:nth-child(odd){padding-left:0}
  .pillar:nth-child(even){padding-left:30px}
}
@media (max-width:600px){
  .pillars{grid-template-columns:1fr}
  .pillar{border-right:0;padding:30px 0;border-top:1px solid var(--hair)}
  .pillar:first-child{border-top:0}
  .pillar:nth-child(even){padding-left:0}
}

/* ============================================================
   ESPACIOS — bandas apiladas
   ============================================================ */
.units{margin-top:clamp(36px,5vw,64px);border-top:1px solid var(--hair)}
.unit{border-bottom:1px solid var(--hair)}
.unit-head{
  width:100%;display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;
  gap:clamp(16px,3vw,44px);padding:30px 0;text-align:left;
}
.unit-size{
  font-family:var(--display);font-weight:300;font-variant-numeric:tabular-nums;
  font-size:clamp(2rem,4.6vw,3.4rem);line-height:1;color:var(--terracota);letter-spacing:.01em;
  min-width:4.6ch;
}
.unit-size sup{font-size:.34em;top:-1.2em;position:relative;letter-spacing:0}
.unit-title{display:flex;flex-direction:column;gap:6px}
.unit-title strong{font-family:var(--display);font-weight:400;font-size:clamp(1.05rem,1.7vw,1.4rem);letter-spacing:.03em}
.unit-title em{font-style:normal;font-size:.85rem;color:var(--carbon-soft)}
.unit-cap{font-family:var(--display);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--roble);white-space:nowrap}
.unit-toggle{
  width:38px;height:38px;border:1px solid var(--hair);position:relative;flex:none;
  transition:background .35s var(--ease),border-color .35s var(--ease);
}
.unit-toggle::before,.unit-toggle::after{
  content:'';position:absolute;left:50%;top:50%;background:var(--carbon);
  transition:transform .4s var(--ease),background .35s var(--ease);
}
.unit-toggle::before{width:13px;height:1px;transform:translate(-50%,-50%)}
.unit-toggle::after{width:1px;height:13px;transform:translate(-50%,-50%)}
.unit-head:hover .unit-toggle{background:var(--terracota);border-color:var(--terracota)}
.unit-head:hover .unit-toggle::before,.unit-head:hover .unit-toggle::after{background:var(--lino)}
.unit.is-open .unit-toggle::after{transform:translate(-50%,-50%) rotate(90deg)}

.unit-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.unit.is-open .unit-body{grid-template-rows:1fr}
.unit-body>div{overflow:hidden}
.unit-inner{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,56px);padding:6px 0 44px}
.unit-gal{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.unit-gal img{aspect-ratio:4/3;object-fit:cover;width:100%;background:var(--piedra)}
.unit-gal img:first-child{grid-column:1/-1;aspect-ratio:16/9}
.unit-specs{display:grid;grid-template-columns:1fr 1fr;gap:22px 26px;align-content:start}
.spec h4{
  font-family:var(--display);font-weight:400;font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--roble);margin:0 0 .55rem;
}
.spec ul{margin:0;padding:0;list-style:none;font-size:.92rem;color:var(--carbon-soft);line-height:1.75}
.unit-cta{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:6px}
@media (max-width:900px){
  .unit-head{grid-template-columns:auto 1fr auto;row-gap:8px}
  .unit-cap{grid-column:2/3;grid-row:2}
  .unit-inner{grid-template-columns:1fr}
}
@media (max-width:520px){
  .unit-specs{grid-template-columns:1fr}
  .unit-head{grid-template-columns:1fr auto}
  .unit-size{grid-column:1;font-size:2.4rem}
  .unit-title,.unit-cap{grid-column:1}
  .unit-toggle{grid-column:2;grid-row:1}
}

/* ============================================================
   BOTONES
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:12px;padding:15px 28px;
  font-family:var(--display);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid var(--carbon);transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.btn:hover{background:var(--carbon);color:var(--lino)}
.btn--fill{background:var(--terracota);border-color:var(--terracota);color:var(--lino)}
.btn--fill:hover{background:var(--carbon);border-color:var(--carbon)}
.btn--ghost{border-color:var(--hair);color:var(--carbon-soft)}
.btn--ghost:hover{background:transparent;border-color:var(--carbon);color:var(--carbon)}
.sec--moss .btn,.sec--dark .btn{border-color:rgba(243,239,232,.4);color:var(--lino)}
.sec--moss .btn:hover,.sec--dark .btn:hover{background:var(--lino);color:var(--carbon);border-color:var(--lino)}
.sec--moss .btn--fill,.sec--dark .btn--fill{background:var(--lino);color:var(--carbon);border-color:var(--lino)}
.sec--moss .btn--fill:hover,.sec--dark .btn--fill:hover{background:var(--terracota);color:var(--lino);border-color:var(--terracota)}
.btn i{width:16px;height:1px;background:currentColor;position:relative;flex:none}
.btn i::after{content:'';position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}

/* ============================================================
   RESERVA DIRECTA
   ============================================================ */
.direct{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,6vw,80px);align-items:center}
.direct-list{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:rgba(243,239,232,.18)}
.direct-list li{background:var(--musgo);padding:26px 0 26px 0;display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start}
.direct-list .n{
  font-family:var(--display);font-variant-numeric:tabular-nums;font-size:.72rem;letter-spacing:.14em;
  color:rgba(243,239,232,.55);padding-top:5px;
}
.direct-list h3{margin:0 0 .5rem;font-size:clamp(1.1rem,1.8vw,1.45rem)}
.direct-list p{margin:0;font-size:.95rem;color:rgba(243,239,232,.72);max-width:52ch}
@media (max-width:860px){.direct{grid-template-columns:1fr}}

/* ============================================================
   MOTOR DE RESERVAS (maqueta)
   ============================================================ */
.engine{background:var(--lino);border:1px solid var(--hair);margin-top:clamp(30px,4vw,52px)}
.engine-bar{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:0;border-bottom:1px solid var(--hair);
}
.engine-bar label{display:flex;flex-direction:column;gap:6px;padding:18px 22px;border-right:1px solid var(--hair);min-width:0}
.engine-bar label span{font-family:var(--display);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--roble)}
.engine-bar input,.engine-bar select{font-family:var(--body);font-size:.95rem;border:0;background:none;width:100%;color:var(--carbon)}
.engine-bar button{
  background:var(--terracota);color:var(--lino);padding:0 34px;
  font-family:var(--display);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  transition:background .35s var(--ease);
}
.engine-bar button:hover{background:var(--carbon)}
.engine-note{
  display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;padding:13px 22px;margin:0;max-width:none;
  background:var(--musgo);color:var(--lino);
  font-family:var(--display);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
}
.engine-note b{font-weight:500}
.engine-results{padding:8px 22px 22px}
.eng-row{
  display:grid;grid-template-columns:96px 1fr auto auto;gap:22px;align-items:center;
  padding:20px 0;border-bottom:1px solid var(--hair);
}
.eng-row:last-child{border-bottom:0}
.eng-row img{width:96px;aspect-ratio:4/3;object-fit:cover;background:var(--piedra)}
.eng-name strong{display:block;font-family:var(--display);font-weight:400;font-size:1.05rem;letter-spacing:.02em}
.eng-name em{font-style:normal;font-size:.82rem;color:var(--carbon-soft)}
.eng-price{text-align:right;line-height:1.3}
.eng-price s{display:block;font-size:.8rem;color:var(--roble)}
.eng-price b{font-family:var(--display);font-weight:400;font-size:1.28rem;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.eng-price i{display:block;font-style:normal;font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--musgo);font-family:var(--display)}
.eng-row .btn{padding:12px 22px}
.eng-empty{padding:34px 0;color:var(--carbon-soft);font-size:.95rem}
.engine-foot{padding:0 22px 20px;margin:0;max-width:none;font-size:.76rem;color:var(--roble);line-height:1.6}
.engine-foot:empty{padding:0}
@media (max-width:860px){
  .engine-bar{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .engine-bar label:nth-child(2){border-right:0}
  .engine-bar label:nth-child(3){grid-column:1/-1;border-top:1px solid var(--hair);border-right:0}
  .engine-bar button{grid-column:1/-1;padding:16px;border-top:1px solid var(--hair)}
  .eng-row{grid-template-columns:72px 1fr;row-gap:14px}
  .eng-row img{width:72px}
  .eng-price{grid-column:2;text-align:left}
  .eng-row .btn{grid-column:1/-1;justify-content:center}
}

/* ============================================================
   SERVICIOS
   ============================================================ */
/* Los filetes los dibuja CADA celda con box-shadow, no el fondo del
   contenedor a través de un gap de 1px. Con `gap` sobre un fondo, las
   posiciones sobrantes de la última fila se pintan como casillas grises
   vacías —pasó al sumar la novena amenidad—, y `auto-fit` cambia el número
   de columnas con el ancho, así que no hay recuento que cuadre en todos.
   Con box-shadow solo hay línea donde hay contenido. */
/* El contenedor solo dibuja el borde superior e izquierdo; el derecho y el
   inferior los cierra cada celda. Así, cuando la última fila queda
   incompleta —9 amenidades no caben exactas en 4, 5 ni 6 columnas—, el
   hueco simplemente no tiene líneas alrededor, en vez de quedar encerrado
   en un recuadro vacío. Un `gap` de 1px sobre un fondo, que era la técnica
   anterior, además lo pintaba de gris. */
.amen{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0;margin-top:clamp(30px,4vw,54px);border-top:1px solid var(--hair);border-left:1px solid var(--hair)}
.amen div{background:var(--lino);padding:26px 24px;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.amen strong{display:block;font-family:var(--display);font-weight:400;font-size:.95rem;letter-spacing:.03em;margin-bottom:.35rem}
.amen span{font-size:.85rem;color:var(--carbon-soft)}
.sec--stone .amen div{background:var(--lino-2)}

/* ============================================================
   UBICACIÓN
   ============================================================ */
.loc{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,6vw,80px);align-items:start}
.loc-fig{overflow:hidden;background:var(--piedra);aspect-ratio:16/10;position:sticky;top:110px}
.loc-fig img{width:100%;height:100%;object-fit:cover}
.dist{width:100%;border-collapse:collapse;margin-top:1.6rem;font-size:.92rem}
.dist caption{
  text-align:left;font-family:var(--display);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--roble);padding-bottom:12px;
}
.dist th,.dist td{padding:11px 0;border-bottom:1px solid var(--hair);text-align:left;font-weight:300}
.dist th{font-weight:400;color:var(--carbon)}
.dist td{text-align:right;font-family:var(--display);font-variant-numeric:tabular-nums;color:var(--carbon-soft);letter-spacing:.04em}
@media (max-width:860px){.loc{grid-template-columns:1fr}}

/* ============================================================
   EXPERIENCIAS
   ============================================================ */
.exp{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,34px);margin-top:clamp(32px,5vw,60px)}
.exp article{display:flex;flex-direction:column}
.exp figure{margin:0 0 20px;overflow:hidden;background:var(--piedra);aspect-ratio:3/4}
.exp img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.exp article:hover img{transform:scale(1.04)}
.exp h3{margin:0 0 .6rem}
.exp p{font-size:.93rem;color:var(--carbon-soft);margin:0}
@media (max-width:860px){.exp{grid-template-columns:1fr}.exp figure{aspect-ratio:16/10}}

/* ============================================================
   GALERÍA
   ============================================================ */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:clamp(30px,4vw,54px)}
.gal img{width:100%;height:100%;object-fit:cover;aspect-ratio:1;background:var(--piedra)}
.gal button{padding:0;overflow:hidden;display:block}
.gal button:nth-child(1),.gal button:nth-child(8){grid-column:span 2;grid-row:span 2}
.gal button img{transition:transform 1s var(--ease)}
.gal button:hover img{transform:scale(1.05)}
@media (max-width:700px){.gal{grid-template-columns:repeat(2,1fr)}}

/* lightbox */
.lb{position:fixed;inset:0;z-index:200;background:rgba(38,38,38,.94);display:flex;align-items:center;justify-content:center;padding:4vmin;opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s}
.lb.is-on{opacity:1;visibility:visible}
.lb img{max-width:100%;max-height:92svh;object-fit:contain}
.lb-close{position:absolute;top:18px;right:22px;color:var(--lino);font-family:var(--display);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);color:var(--lino);padding:20px;font-size:1.6rem;line-height:1}
.lb-nav.prev{left:6px}
.lb-nav.next{right:6px}

/* ============================================================
   FAQ
   ============================================================ */
.faq{margin-top:clamp(30px,4vw,54px);border-top:1px solid var(--hair)}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{
  list-style:none;cursor:pointer;padding:24px 40px 24px 0;position:relative;
  font-family:var(--display);font-weight:400;font-size:clamp(1rem,1.5vw,1.18rem);letter-spacing:.02em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'';position:absolute;right:6px;top:50%;width:9px;height:9px;
  border-right:1px solid var(--terracota);border-bottom:1px solid var(--terracota);
  transform:translateY(-70%) rotate(45deg);transition:transform .35s var(--ease);
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq div{padding:0 0 26px;color:var(--carbon-soft);font-size:.97rem;max-width:76ch}
.faq div p:last-child{margin-bottom:0}

/* ============================================================
   FOOTER
   ============================================================ */
/* el padding inferior deja pasar el botón flotante de WhatsApp */
.ftr{background:var(--carbon);color:var(--lino);padding:clamp(60px,8vw,100px) var(--gut) 92px}
.ftr-top{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:clamp(28px,5vw,64px);max-width:var(--maxw);margin:0 auto}
.ftr .mark{width:22px;height:36px;color:var(--terracota);margin-bottom:22px}
.ftr h4{font-family:var(--display);font-weight:400;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--roble);margin:0 0 1.1rem}
.ftr a:hover{color:var(--roble)}
.ftr ul{list-style:none;margin:0;padding:0;line-height:2;font-size:.93rem;color:rgba(243,239,232,.78)}
.ftr-bot{
  max-width:var(--maxw);margin:clamp(40px,6vw,70px) auto 0;padding-top:24px;
  border-top:1px solid rgba(243,239,232,.16);display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;
  font-family:var(--display);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:rgba(243,239,232,.5);
}
@media (max-width:800px){.ftr-top{grid-template-columns:1fr}}

/* ============================================================
   FLOTANTE WHATSAPP
   ============================================================ */
.wa{
  position:fixed;right:20px;bottom:20px;z-index:90;display:flex;align-items:center;gap:12px;
  background:var(--musgo);color:var(--lino);padding:14px 20px;
  font-family:var(--display);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  box-shadow:0 10px 32px rgba(38,38,38,.22);
  transform:translateY(90px);opacity:0;transition:transform .5s var(--ease),opacity .5s var(--ease),background .35s var(--ease);
}
.wa.is-on{transform:none;opacity:1}
.wa:hover{background:var(--terracota)}
.wa svg{width:17px;height:17px;flex:none}
@media (max-width:520px){.wa{right:12px;bottom:12px;padding:13px 16px;font-size:.64rem}}

/* ============================================================
   REVELADO
   ============================================================ */
.rv{opacity:0;transform:translateY(18px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.rv.is-in{opacity:1;transform:none}
.rv-2{transition-delay:.08s}
.rv-3{transition-delay:.16s}
.rv-4{transition-delay:.24s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .rv{opacity:1;transform:none}
  .wa{transform:none;opacity:1}
}

/* Aviso de fechas del buscador del hero */
.hero-err{
  margin:10px 0 0;font-size:.82rem;color:var(--terracota);
  font-family:var(--body);max-width:46ch;
}
.engine-foot a{color:var(--musgo);text-decoration:underline;text-underline-offset:3px}
.engine-foot a:hover{color:var(--terracota)}

/* El <h3> solo envuelve al botón del acordeón para dar estructura al
   documento — las tres unidades son el contenido más importante y antes
   eran un <strong>, invisible para un buscador. No debe aportar estilo:
   el aspecto sigue viniendo de .unit-head y .unit-title. */
.unit-h{margin:0;font:inherit;letter-spacing:inherit}

/* Conmutador de idioma. Vive DENTRO del nav a propósito: en móvil el nav
   es un cajón a pantalla completa, y un conmutador fuera de él habría que
   ocultarlo ahí — dejando sin cambio de idioma justo al tráfico móvil,
   que es la mayoría. Se distingue del resto con el color y el filete. */
.nav-lang{color:var(--carbon-soft)!important;border:1px solid var(--hair);padding:6px 12px}
.nav-lang::after{display:none}
.nav-lang:hover,.nav-lang:focus-visible{color:var(--terracota)!important;border-color:var(--terracota)}

/* ══════════ TOURS Y EXPERIENCIAS ══════════
   La cuadrícula es un altímetro. Sin fotografía: la marca ya tiene un
   instrumento propio —el riel de altura del borde izquierdo— y aquí ese
   mismo lenguaje ordena los planes de Medellín, de abajo hacia arriba.
   La cifra hace el trabajo visual que hacía la foto.

   La escala de las barras va de 1.400 a 2.700 m; los porcentajes se
   calculan en el HTML y llegan como --a y --b. */
.plans{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  margin-top:clamp(32px,5vw,58px);
  border-top:1px solid var(--hair);border-left:1px solid var(--hair);
}
.plan{
  position:relative;display:flex;flex-direction:column;
  padding:26px 26px 28px;
  border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);
  background:var(--lino);transition:background .45s var(--ease);
}
.plan:has(a:hover),.plan:has(a:focus-within){background:var(--piedra)}

/* ─── La barra de altura ─────────────────────────────────────────── */
.gauge{
  position:relative;display:block;height:3px;margin-bottom:20px;
  background:linear-gradient(to right,var(--hair),var(--hair));
}
.g-home{                       /* los 1.495 m del hotel, de referencia */
  position:absolute;left:var(--a);top:-4px;width:1px;height:11px;
  background:var(--roble);
}
.g-mark{                       /* una cota exacta */
  position:absolute;left:var(--a);top:-2.5px;width:8px;height:8px;
  margin-left:-4px;border-radius:50%;background:var(--terracota);
}
.g-span{                       /* una franja: el café y Arví no son un punto */
  position:absolute;left:var(--a);width:calc(var(--b) - var(--a));
  top:0;height:3px;background:var(--terracota);
}

/* ─── La cifra, que es el elemento gráfico ───────────────────────── */
.plan-alt{margin:0 0 18px;display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.plan-alt b{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.85rem,3.1vw,2.5rem);line-height:1;
  letter-spacing:.01em;color:var(--carbon);
  font-variant-numeric:tabular-nums;
}
.plan-alt span{
  font-family:var(--display);font-size:.58rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--roble);position:relative;top:-.15em;
}

.plan-h{
  margin:0 0 .42rem;font-family:var(--display);font-weight:400;
  font-size:clamp(1rem,1.35vw,1.14rem);letter-spacing:.02em;
}
.plan-h a{color:var(--carbon);text-decoration:none}
.plan-h a::after{content:'';position:absolute;inset:0;z-index:1}
.plan-h a:focus-visible{outline:2px solid var(--terracota);outline-offset:4px}

.plan-meta{
  margin:0 0 .8rem;display:flex;flex-wrap:wrap;gap:7px 12px;align-items:center;
  font-family:var(--display);font-size:.61rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--roble);
}
.plan-meta i{font-style:normal;color:var(--musgo)}
.plan-meta i::before{content:'·';margin-right:12px;color:var(--hair)}
/* Dos líneas reservadas: si no, una descripción corta encoge su celda y
   la fila queda desigual. */
.plan-txt{
  margin:0;font-size:.87rem;line-height:1.62;color:var(--carbon-soft);
  min-height:calc(.87rem * 1.62 * 2);
}
/* Sin esto la celda no se ve pulsable: el título es un enlace pero no lo
   parece, y el resaltado al pasar por encima no existe para quien navega
   con el dedo. La flecha se alarga en el hover, como en el resto del sitio. */
.plan-go{
  display:block;margin:22px 0 0;align-self:flex-start;
  width:26px;height:1px;background:var(--terracota);position:relative;
  transition:width .4s var(--ease);
}
.plan-go::after{
  content:'';position:absolute;right:0;top:-3px;
  width:7px;height:7px;border-top:1px solid var(--terracota);
  border-right:1px solid var(--terracota);transform:rotate(45deg);
}
.plan:has(a:hover) .plan-go,.plan:has(a:focus-within) .plan-go{width:40px}

.plans-key{
  margin:14px 0 0;font-size:.76rem;color:var(--roble);letter-spacing:.01em;
}
.plans-key b{font-weight:500;color:var(--carbon-soft)}

.tours-foot{
  margin-top:clamp(24px,3vw,34px);font-size:.92rem;color:var(--carbon-soft);max-width:64ch;
}
.tours-foot a{color:var(--musgo);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.tours-foot a:hover{color:var(--terracota)}

@media (max-width:980px){.plans{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.plans{grid-template-columns:1fr}}

/* Marca la oferta cruzada dentro de una tarjeta de tour, sin sacarla del
   párrafo: es una opción del plan, no un anuncio aparte. */
.tour-plus{color:var(--musgo);font-weight:500}

/* ══════════ 404 ══════════
   Hereda la retícula y los tokens del sitio: una 404 con otro aspecto
   hace dudar de si se sigue en el mismo dominio. Reusa el tratamiento
   de cifra grande de la sección de Medellín. */
.e404{min-height:100svh;display:flex;align-items:center;background:var(--lino)}
.e404-in{width:min(660px,88vw);margin:0 auto;padding:60px 0}
.e404-alt{margin:0 0 24px;display:flex;align-items:baseline;gap:9px}
.e404-alt b{
  font-family:var(--display);font-weight:400;font-size:clamp(2.4rem,6vw,3.6rem);
  line-height:1;color:var(--terracota);font-variant-numeric:tabular-nums;
}
.e404-alt span{
  font-family:var(--display);font-size:.6rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--roble);
}
.e404 h1{
  margin:0 0 1.2rem;font-family:var(--display);font-weight:400;
  font-size:clamp(2rem,5.4vw,3.2rem);line-height:1.06;letter-spacing:-.01em;
}
.e404 h1 em{font-style:normal;color:var(--terracota)}
.e404 .lede{margin:0 0 2rem;max-width:46ch}
.e404-links{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 2.4rem}
.e404-nav{
  margin:0;padding-top:1.6rem;border-top:1px solid var(--hair);
  font-family:var(--display);font-size:.7rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--roble);line-height:2.2;
}
.e404-nav a{color:var(--carbon-soft)}
.e404-nav a:hover{color:var(--terracota)}