:root{
    --oat:#EDE6D9;
    --paper:#eff8f7;
    --ink:#0B2540;
    --ink-soft:#0B2540;
    --brass:#B3854A;
    --brass-soft:#D9B98A;
    --stone:#CCC4B4;
    --stone-line: rgba(31,43,36,0.14);
    --maxw: 1240px;
    --header-h: 64px;
    --ease: cubic-bezier(.22,.68,0,1);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
  }
  body{
    margin:0;
    padding-top:var(--header-h);
    background:var(--oat);
    color:var(--ink);
    font-family:'Work Sans', sans-serif;
    font-weight:400;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.display{
    font-family:'Fraunces', serif;
    font-weight:500;
    letter-spacing:-0.01em;
    margin:0;
  }
  .mono{
    font-family:'IBM Plex Mono', monospace;
    letter-spacing:0.02em;
  }
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}
  .eyebrow{
    font-family:'IBM Plex Mono', monospace;
    font-size:12px;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--brass);
  }

  /* ---------- HEADER ---------- */
  header{
    position:fixed; top:0; left:0; right:0; z-index:100;
    height:var(--header-h);
    background:var(--paper);
    border-bottom:1px solid var(--stone-line);
  }
  header .wrap.header-inner{
    height:100%;
    display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  }
  .logo{
    font-family:'Fraunces', serif;
    font-size:19px; font-weight:600; letter-spacing:0.14em;
    color:var(--ink); text-align:center; justify-self:center;
  }
  .logo span{color:var(--brass);}
  .hamburger{
    justify-self:start;
    width:34px; height:34px; display:flex; flex-direction:column;
    align-items:flex-start; justify-content:center; gap:5px;
    background:none; border:none; cursor:pointer; padding:0;
  }
  .hamburger span{display:block; width:22px; height:1px; background:var(--ink); transition:transform .3s var(--ease), opacity .3s;}
  .hamburger.open span:nth-child(1){transform:translateY(6px) rotate(45deg);}
  .hamburger.open span:nth-child(2){opacity:0;}
  .hamburger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
  .header-icons{
    justify-self:end;
    display:flex; align-items:center; gap:22px;
  }
  .header-icons button{
    background:none; border:none; cursor:pointer; padding:4px;
    color:var(--ink); display:flex; align-items:center;
  }
  .header-icons svg{width:19px; height:19px; stroke:var(--ink); fill:none; stroke-width:1.5;}
  .header-icons .fav svg{fill:var(--ink); stroke:none;}

@media (max-width: 600px) {
  .header-icons button { /* 1. Ocultamos el botón CONTACTAR solo en pantallas chicas */
    display: none;
  }
  .wrap {
    padding: 0 16px;
  }
  .logo {
    font-size: 16px; /* Ya no hace falta clamp() tan chico porque ganaste mucho espacio */
    letter-spacing: 0.06em;
    white-space: nowrap;
  }
}

  /* Slide-out menu */
  .menu-overlay{
    position:fixed; inset:0; background:rgba(20,32,26,0.4);
    z-index:150; opacity:0; pointer-events:none; transition:opacity .4s var(--ease);
  }
  .menu-overlay.open{opacity:1; pointer-events:auto;}
  .menu-drawer{
    position:fixed; top:0; right:0; height:100%; width:340px; max-width:82vw;
    background:var(--ink); color:var(--paper); z-index:160;
    padding:100px 40px 40px; display:flex; flex-direction:column; gap:30px;
    transform:translateX(100%); transition:transform .5s var(--ease);
  }
  .menu-drawer.open{transform:translateX(0);}
  .menu-drawer nav{display:flex; flex-direction:column; gap:22px;}
  .menu-drawer nav a{
    font-family:'Fraunces', serif; font-size:24px; font-weight:400;
    color:var(--paper); position:relative; width:fit-content;
  }
  .menu-drawer nav a:hover{color:var(--brass-soft);}
  .menu-drawer .btn{margin-top:auto; color:var(--paper); border-color:rgba(248,245,239,0.4); width:fit-content;}
.btn{
    font-family:'IBM Plex Mono', monospace;
    font-size:12.5px;
    letter-spacing:0.06em;
    text-transform:uppercase;
    padding:11px 20px;
    border:1px solid currentColor;
    border-radius:2px;
    transition:background .3s var(--ease), color .3s var(--ease);
    display:inline-block;
    background:transparent;
    appearance:none;
    -webkit-appearance:none;
    cursor:pointer;
  }
  .btn:hover{background:var(--brass); color:var(--paper) !important; border-color:var(--brass);}
  .btn:hover{background:var(--brass); color:var(--paper) !important; border-color:var(--brass);}

  

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    height:calc(100vh - var(--header-h)); min-height:560px;
    display:flex; align-items:flex-end; justify-content:center;
    overflow:hidden;
    background:linear-gradient(160deg,#0B2540 0%, #1B2721 55%, #14201A 100%);
  }
  .hero-triptych{
    position:absolute; inset:0; z-index:0;
    display:grid; grid-template-columns:repeat(3, 1fr);
  }
  .hero-frame{
    position:relative; overflow:hidden;
    background:
      repeating-linear-gradient(115deg, rgba(179,133,74,0.10) 0 2px, transparent 2px 34px),
      linear-gradient(160deg,#2B3D32 0%, #1B2721 60%, #131D17 100%);
  }
  .hero-frame:nth-child(2){
    background:
      repeating-linear-gradient(115deg, rgba(179,133,74,0.10) 0 2px, transparent 2px 34px),
      linear-gradient(160deg,#243429 0%, #182420 60%, #101913 100%);
  }
  .hero-frame:nth-child(3){
    background:
      repeating-linear-gradient(115deg, rgba(179,133,74,0.10) 0 2px, transparent 2px 34px),
      linear-gradient(160deg,#2E4032 0%, #1D2B23 60%, #141F18 100%);
  }
  .hero-frame img{
    position:absolute; inset:0;
    width:100%; height:100%; object-fit:cover;
    opacity:0; transition:opacity .6s var(--ease);
  }
  .hero-frame img.loaded{opacity:1;}
  .hero-triptych::after{
    content:'';
    position:absolute; inset:0; z-index:1;
    background:linear-gradient(180deg, rgba(15,22,18,0) 50%, rgba(15,22,18,0.6) 100%);
  }
  .hero-content{
    position:relative; z-index:2;
    width:100%;
    padding-bottom:64px;
    display:flex; flex-direction:column; align-items:center;
    text-align:center;
  }
  .hero-content .eyebrow{color:#fbfcfb; margin-bottom:16px; letter-spacing:0.24em;}
  .hero h1{
    color:#ffffff;
    font-size:clamp(56px, 9vw, 130px);
    line-height:0.95;
    font-weight:600;
  }
  .hero-sub{
    color:rgba(255, 255, 255, 0.8);
    max-width:38ch; font-size:15.5px; line-height:1.6;
    margin:18px 0 26px;
  }
  .hero-btn{background:rgba(248,245,239,0.14); color:var(--paper); border-color:rgba(248,245,239,0.5); backdrop-filter:blur(4px);}
  .hero-btn:hover{background:var(--brass); border-color:var(--brass);}
  .scroll-cue{
    position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
    z-index:2; color:rgba(248,245,239,0.75);
    animation:bob 2.2s ease-in-out infinite;
  }
  .scroll-cue svg{width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.4;}
  @keyframes bob{ 0%,100%{transform:translate(-50%,0);} 50%{transform:translate(-50%,7px);} }

  /* ---------- REVEAL ---------- */
  .reveal{opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease);}
  .reveal.in{opacity:1; transform:translateY(0);}

  /* ---------- SECTION GENERIC ---------- */
  section{padding:120px 0;}
  .section-head{
    display:flex; justify-content:space-between; align-items:flex-end;
    gap:40px; margin-bottom:64px; flex-wrap:wrap;
    border-bottom:1px solid var(--stone-line);
    padding-bottom:28px;
  }
  .section-head h2{font-size:clamp(30px,3.6vw,46px);}
  .section-head p{max-width:38ch; color:var(--ink-soft); font-size:15px; line-height:1.65;}

    .submit-row{margin-top:32px;}
  .submit-row .btn{color:var(--paper); border-color:rgba(248,245,239,0.4);}

  /* ---------- MINI CALENDAR ---------- */
  .mini-cal{
    background:rgba(248,245,239,0.04);
    border:1px solid rgba(248,245,239,0.18);
    border-radius:4px;
    padding:16px;
  }
  .mini-cal-head{
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:12px;
  }
  .mini-cal-head button{
    background:none; border:none; color:var(--paper); font-size:18px; cursor:pointer;
    padding:4px 8px; line-height:1;
  }
  .mini-cal-head button:hover{color:var(--brass-soft);}
  .mini-cal-head span{
    font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase;
    color:rgba(248,245,239,0.85);
  }
  .mini-cal-grid{
    display:grid; grid-template-columns:repeat(7,1fr); gap:3px;
  }
  .cal-dow{
    text-align:center; font-size:10px; color:rgba(248,245,239,0.45);
    padding-bottom:6px; font-family:'IBM Plex Mono',monospace;
  }
  .cal-day{
    aspect-ratio:1; display:flex; align-items:center; justify-content:center;
    font-size:12.5px; color:var(--paper); background:none; border:none; cursor:pointer;
    border-radius:2px; transition:background .2s, color .2s; font-family:'Work Sans', sans-serif;
  }
  .cal-day.empty{visibility:hidden; cursor:default;}
  .cal-day.disabled{color:rgba(248,245,239,0.2); cursor:not-allowed;}
    .cal-day.reserved{
    color:rgba(248,245,239,0.35);
    background:rgba(248,245,239,0.06);
    text-decoration:line-through;
  }
  .cal-day:not(.disabled):not(.empty):hover{background:rgba(248,245,239,0.14);}
  .cal-day.selected{background:var(--brass); color:var(--ink); font-weight:600;}
  .cal-day.in-range{background:rgba(179,133,74,0.3);}
  .mini-cal-range{
    margin-top:12px; text-align:center; font-size:11.5px; color:rgba(248,245,239,0.7);
  }

  .reserve-actions{
    display:flex; gap:12px; margin-top:32px; flex-wrap:wrap;
  }
  .reserve-actions .btn{flex:1; min-width:180px; text-align:center; border-color:#fbfcfb; color:#f4f8f6;}
  .btn-whatsapp{border-color:#25D366; color:#25D366;}
  .btn-whatsapp:hover{background:#25D366; border-color:#25D366; color:var(--ink) !important;}


  /* ---------- GALLERY (exterior / interior) ---------- */
  .gallery{background:var(--paper);}
  .gallery.alt{background:var(--oat);}
  .gallery-grid{
    display:grid;
    grid-template-columns: 2fr 1fr;
    grid-auto-rows:140px;
    gap:6px;
  }
  .gallery-item{
    position:relative;
    overflow:hidden; border:none; padding:0; margin:0; cursor:zoom-in;
    background:
      repeating-linear-gradient(105deg, rgba(31,43,36,0.12) 0 1px, transparent 1px 22px),
      linear-gradient(160deg,#E4DCC9,#CFC5AE);
  }
  .gallery-item.span-2{grid-column:1; grid-row:1 / span 4;}
  .gallery-item img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    opacity:0; transition:opacity .5s var(--ease), transform .6s var(--ease);
  }
  .gallery-item img.loaded{opacity:1;}
  .gallery-item:hover img.loaded{transform:scale(1.045);}
  .gallery-item::after{
    content:''; position:absolute; inset:0;
    background:rgba(20,32,26,0); transition:background .3s var(--ease);
  }
  .gallery-item:hover::after{background:rgba(20,32,26,0.08);}

  .props-footnote{
    margin-top:28px; font-size:13px; color:var(--ink-soft);
    display:flex; align-items:center; gap:10px;
  }

  /* ---------- LIGHTBOX ---------- */
  .lightbox{
    position:fixed; inset:0; z-index:300;
    background:rgba(15,22,18,0.95);
    display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none; transition:opacity .35s var(--ease);
  }
  .lightbox.open{opacity:1; pointer-events:auto;}
  .lb-image{
    max-width:88vw; max-height:82vh; object-fit:contain;
    box-shadow:0 24px 70px rgba(0,0,0,0.5);
  }
  .lb-close, .lb-prev, .lb-next{
    position:absolute; background:none; border:none; color:var(--paper);
    cursor:pointer; padding:10px;
  }
  .lb-close{top:20px; right:22px; font-size:24px;}
  .lb-prev, .lb-next{top:50%; transform:translateY(-50%); font-size:42px; padding:8px 16px;}
  .lb-prev{left:6px;}
  .lb-next{right:6px;}
  .lb-close:hover, .lb-prev:hover, .lb-next:hover{color:var(--brass-soft);}
  .lb-counter{
    position:absolute; bottom:24px; left:50%; transform:translateX(-50%);
    color:rgba(248,245,239,0.7); font-size:12.5px;
  }

  /* ---------- LA CASA (descripción) ---------- */
  .philosophy{padding-top:150px; background:var(--paper);}
  .phil-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:80px; align-items:start;}
  .phil-grid .lead{
    font-family:'Fraunces', serif; font-weight:400; font-style:italic;
    font-size:clamp(22px,2.6vw,32px); line-height:1.4; color:var(--ink);
  }
  .phil-stats{display:grid; grid-template-columns:1fr 1fr; gap:32px 24px; margin-top:8px;}
  .stat .num{font-family:'Fraunces', serif; font-size:40px; color:var(--brass); font-weight:500;}
  .stat .lbl{font-size:13px; color:var(--ink-soft); margin-top:4px;}

    .spaces{
    display:grid; grid-template-columns:repeat(4,1fr);
    margin-top:90px; border-top:1px solid var(--stone-line);
  }
  .space{padding:32px 28px 8px 0;}
  .space + .space{padding-left:28px; border-left:1px solid var(--stone-line);}
  .space .idx{
    font-family:'IBM Plex Mono', monospace; font-size:12px;
    letter-spacing:0.14em; color:var(--brass);
  }
  .space h3{font-size:22px; margin:14px 0 10px;}
  .space p{font-size:14.5px; line-height:1.7; color:var(--ink-soft); margin:0;}

  .amenities{
    margin-top:70px; padding-top:32px; border-top:1px solid var(--stone-line);
    display:grid; grid-template-columns:1fr 2fr; gap:40px;
  }
  .amenities ul{
    list-style:none; margin:0; padding:0;
    display:grid; grid-template-columns:repeat(2,1fr); gap:14px 32px;
  }
  .amenities li{font-size:15px; color:var(--ink); display:flex; align-items:center; gap:12px;}
  .amenities li::before{content:''; width:6px; height:6px; background:var(--brass); flex:none;}


  /* ---------- CONTACT / FOOTER ---------- */
  #contacto{background:var(--ink); color:var(--paper); padding-top:0;}
  .contact-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:80px;
    padding-bottom:90px; border-bottom:1px solid rgba(248,245,239,0.14);
  }
  .contact-grid h2{color:var(--paper); font-size:clamp(30px,3.6vw,46px); max-width:12ch;}
  .contact-grid .eyebrow{color:var(--brass-soft);}
  .field{margin-bottom:20px;}
  .field label{display:block; font-size:12px; color:rgba(248,245,239,0.6); margin-bottom:8px;}
  .field input, .field textarea{
    width:100%; background:transparent; border:none; border-bottom:1px solid rgba(248,245,239,0.3);
    color:var(--paper); font-family:'Work Sans', sans-serif; font-size:15px; padding:8px 2px;
    outline:none; transition:border-color .3s;
  }
  .field input:focus, .field textarea:focus{border-color:var(--brass-soft);}
  .field textarea{resize:vertical; min-height:70px;}
  .submit-row{margin-top:32px;}
  .submit-row .btn{color:var(--paper); border-color:rgba(248,245,239,0.4);}

  .foot-bottom{
    padding:34px 0; display:flex; justify-content:space-between; align-items:center;
    flex-wrap:wrap; gap:16px; font-size:12.5px; color:rgba(248, 245, 239, 0.986);
  }
  .foot-bottom .logo{font-size:16px;}
  .foot-links{display:flex; gap:24px;}
  .foot-links a:hover{color:var(--brass-soft);}

  /* Focus visibility */
  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
    outline:2px solid var(--brass); outline-offset:3px;
  }

  /* ---------- RESPONSIVE ---------- */
  @media (max-width:900px){
    .phil-grid{grid-template-columns:1fr; gap:44px;}
    .gallery-grid{grid-template-columns:1fr; grid-auto-rows:150px;}
    .gallery-item.span-2{grid-column:1; grid-row:span 2;}
    .contact-grid{grid-template-columns:1fr; gap:50px;}
    .spaces{grid-template-columns:1fr 1fr; column-gap:32px;}
    .space, .space + .space{padding-left:0; padding-right:0; border-left:none;}
    .amenities{grid-template-columns:1fr; gap:24px;}
  }
  @media (max-width:600px){
    .gallery-grid{grid-template-columns:1fr; grid-auto-rows:130px;}
    .gallery-item.span-2{grid-column:1; grid-row:span 2;}
    .spaces{grid-template-columns:1fr;}
    .amenities ul{grid-template-columns:1fr;}
    section{padding:80px 0;}
    .wrap{padding:0 22px;}
  }