/* ============================================================
   Departamentos Momo — Web oficial
   Dirección: coastal luminoso, editorial (ref. Casa Angelina).
   Estático · rutas relativas · sin build.
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  --cream:#FBFAF6;      /* fondo base luminoso */
  --paper:#F4F1E8;      /* secciones cálidas */
  --sand:#EAE4D6;       /* bloques / hover */
  --line:#E4DECF;       /* líneas */
  --ink:#16262E;        /* texto */
  --ink-2:#3B4C54;      /* texto secundario */
  --muted:#8A8578;      /* labels apagados */
  --sea:#0B2E44;        /* mar profundo (footer, franjas) */
  --sea-blue:#027DC5;   /* azul marca (acentos, enlaces) */
  --sky:#6FB2DE;
  --sun:#F5A800;        /* dorado (CTA, firma) */
  --sun-soft:#FBD778;

  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --body:"Inter",system-ui,-apple-system,sans-serif;
  --mono:"Space Mono",ui-monospace,monospace;

  --maxw:1240px;
  --gutter:clamp(20px,5vw,64px);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ---------- Reset / base ---------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{
  margin:0;font-family:var(--body);color:var(--ink);background:var(--cream);
  line-height:1.7;font-size:17px;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;cursor:pointer;background:none;border:none;color:inherit;}
h1,h2,h3,h4{margin:0;font-weight:400;font-family:var(--display);line-height:1.05;}
::selection{background:var(--sun-soft);color:var(--ink);}

/* ---------- Cursor custom (estilo Casa Angelina: dot → píldora con palabra) ---------- */
.cursor{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;transform:translate(-50%,-50%);
  width:30px;height:30px;border-radius:999px;background:rgba(245,168,0,.14);border:2px solid var(--sun);
  box-shadow:0 0 0 1px rgba(11,46,68,.12);
  display:flex;align-items:center;justify-content:center;overflow:hidden;white-space:nowrap;
  transition:width .3s var(--ease-out),height .3s var(--ease-out),padding .3s var(--ease-out),background .3s,border-color .3s;
  will-change:transform;}
.cursor__label{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#3a2600;opacity:0;transition:opacity .2s;}
.cursor.is-hover{width:46px;height:46px;background:rgba(245,168,0,.22);}
.cursor.has-label{width:auto;height:auto;padding:13px 20px;background:var(--sun);border-color:var(--sun);box-shadow:0 10px 26px -8px rgba(245,168,0,.7);}
.cursor.has-label .cursor__label{opacity:1;}
/* ocultar la flecha del sistema cuando el cursor custom está activo */
body.cursor-on,body.cursor-on *{cursor:none !important;}
body.cursor-on input,body.cursor-on textarea{cursor:text !important;}
@media (hover:none),(pointer:coarse){.cursor{display:none !important;}}

/* ---------- Helpers ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);}
.section{padding-block:clamp(80px,12vw,150px);position:relative;}
.eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--sea-blue);margin:0 0 22px;display:block;}
.h2{font-family:var(--display);font-weight:300;font-size:clamp(32px,5.4vw,64px);line-height:1.02;letter-spacing:-.018em;text-wrap:balance;color:var(--ink);}
.h2 em{font-style:italic;color:var(--sea-blue);}
.lead{max-width:56ch;color:var(--ink-2);font-size:clamp(16px,1.7vw,19px);}
.spaced{font-family:var(--mono);letter-spacing:.42em;text-transform:uppercase;}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;gap:11px;padding:15px 28px;border-radius:999px;font-family:var(--body);font-weight:500;font-size:15px;letter-spacing:.01em;border:1px solid transparent;transition:transform .25s var(--ease-out),background .25s,color .25s,border-color .25s,box-shadow .25s;white-space:nowrap;}
.btn svg{width:18px;height:18px;}
.btn--wa{background:var(--sun);color:#3a2600;box-shadow:0 14px 34px -14px rgba(245,168,0,.75);}
.btn--wa:hover{transform:translateY(-2px);box-shadow:0 20px 40px -16px rgba(245,168,0,.85);}
.btn--line{border-color:currentColor;color:var(--ink);}
.btn--line:hover{background:var(--ink);color:var(--cream);}
.btn--ghost{border-color:rgba(255,255,255,.55);color:#fff;background:rgba(255,255,255,.08);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);}
.btn--ghost:hover{background:rgba(255,255,255,.2);}
.link-underline{position:relative;font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--sea-blue);padding-bottom:3px;}
.link-underline::after{content:"";position:absolute;left:0;right:30%;bottom:0;height:1px;background:currentColor;transition:right .3s var(--ease-out);}
.link-underline:hover::after{right:0;}

/* ============================================================
   Header / nav
   ============================================================ */
.header{position:fixed;inset:0 0 auto 0;z-index:100;transition:background .4s var(--ease),box-shadow .4s,border-color .4s;border-bottom:1px solid transparent;
  background:linear-gradient(180deg,rgba(8,32,47,.5),rgba(8,32,47,0));}
.header__in{display:flex;align-items:center;gap:24px;height:92px;}
.brand{display:flex;align-items:center;margin-right:auto;}
.brand img{height:64px;width:auto;object-fit:contain;filter:drop-shadow(0 2px 10px rgba(0,0,0,.35));transition:height .4s var(--ease);}
.nav{display:flex;align-items:center;gap:34px;}
.nav a{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.85);transition:color .3s;position:relative;}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-7px;height:1px;background:var(--sun);transition:right .3s var(--ease-out);}
.nav a:hover{color:#fff;} .nav a:hover::after{right:0;}
.header__cta{display:inline-flex;}
.nav-toggle{display:none;width:46px;height:46px;border:1px solid rgba(255,255,255,.4);border-radius:50%;color:#fff;align-items:center;justify-content:center;flex-direction:column;gap:5px;}
.nav-toggle span{width:18px;height:1.5px;background:currentColor;transition:transform .3s,opacity .3s;}

/* header oscuro tras scroll (así el logo blanco se sigue viendo) */
.header.scrolled{background:rgba(8,32,47,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:rgba(255,255,255,.1);box-shadow:0 10px 30px -18px rgba(0,0,0,.6);}
.header.scrolled .brand img{height:60px;}

/* overlay móvil */
.mobile-menu{position:fixed;inset:0;z-index:99;background:var(--sea);color:#fff;display:flex;flex-direction:column;justify-content:center;padding:24px;overflow-y:auto;
  opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s;}
.mobile-menu.open{opacity:1;visibility:visible;}
.mobile-menu a{font-family:var(--display);font-weight:400;font-size:clamp(22px,7vw,40px);padding:10px 0;border-bottom:1px solid rgba(255,255,255,.12);color:#fff;line-height:1.15;}
/* el botón de WhatsApp también es un <a>: se resetea el tamaño para que no herede el font-size gigante de arriba */
.mobile-menu .btn{margin-top:24px;align-self:stretch;justify-content:center;min-height:52px;font-size:15px;font-family:var(--body);font-weight:500;}
/* mientras el menú está abierto, el FAB de Momito no debe flotar por encima superpuesto */
body.menu-open .momito-fab{display:none;}

/* ============================================================
   Hero
   ============================================================ */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;color:#fff;}

/* ============================================================
   Hero Slider
   ============================================================ */

/* Contenedor absoluto, llena todo el hero, un poco más ancho para parallax */
.hero__media {
  position: absolute;
  inset: 0 -10%;
  width: 120%;
  overflow: hidden;
  background: #051420; /* Fondo oscuro para que la transicion de fade se vea oscura */
}

/* Cada slide: apilado, invisible por defecto */
.hero__media .slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 2s ease-in-out;
}

/* El slide activo se hace visible */
.hero__media .slide.active {
  opacity: 1;
}

.hero__media .slide picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* Imagen dentro del slide: cubre todo, zoom lento */
.hero__media .slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transform: scale(1.06);
  transition: transform 9s ease-out;
}

/* Cuando el slide se activa, la imagen hace zoom-out lento */
.hero__media .slide.active img {
  transform: scale(1.0);
}

/* ── Overlay de gradiente: div real, siempre encima de todos los slides ── */
.hero__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(5, 20, 32, 0.75) 0%,
      rgba(5, 20, 32, 0.30) 38%,
      rgba(5, 20, 32, 0.30) 55%,
      rgba(5, 20, 32, 0.90) 100%
    );
}

/* ── Contenido del hero: siempre sobre el overlay ── */
.hero__in{position:relative;z-index:2;padding-bottom:clamp(64px,10vw,120px);width:100%;}
.hero .eyebrow{color:rgba(255,255,255,.9);}
.hero h1{font-weight:300;font-size:clamp(48px,9vw,120px);line-height:.95;letter-spacing:-.02em;text-shadow:0 2px 50px rgba(11,46,68,.35);text-wrap:balance;max-width:15ch;}
.hero h1 em{font-style:italic;font-weight:400;}
.hero__sub{max-width:44ch;color:rgba(255,255,255,.94);font-size:clamp(17px,1.9vw,21px);margin:26px 0 34px;text-shadow:0 1px 24px rgba(11,46,68,.4);}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;}
.hero__social{position:absolute;left:var(--gutter);bottom:26px;z-index:2;display:flex;gap:12px;}
.hero__social a{width:42px;height:42px;border:1px solid rgba(255,255,255,.4);border-radius:50%;display:grid;place-items:center;color:#fff;transition:transform .25s var(--ease-out),background .25s,color .25s,border-color .25s;}
.hero__social a:hover{background:#fff;color:var(--sea);border-color:#fff;transform:translateY(-3px);}
.hero__social svg{width:18px;height:18px;}
.hero__scroll{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);z-index:2;display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.85);white-space:nowrap;}
.hero__scroll i{width:56px;height:1px;background:rgba(255,255,255,.5);position:relative;overflow:hidden;}
.hero__scroll i::after{content:"";position:absolute;inset:0;background:#fff;transform:translateX(-100%);animation:track 2.4s var(--ease) infinite;}
@keyframes track{0%{transform:translateX(-100%);}50%{transform:translateX(0);}100%{transform:translateX(100%);}}

/* ============================================================
   Carril horizontal (desktop): hero → complejo → por qué
   ============================================================ */
.hscroll{position:relative;}
.hscroll__track{display:flex;}
.panel{flex:0 0 100vw;width:100vw;min-height:100vh;position:relative;}
.panel.intro,.panel.dist,.panel.amen,.panel.loc,.panel.info{display:flex;align-items:center;padding-block:0;}
.panel.intro .wrap,.panel.dist .wrap,.panel.amen .wrap,.panel.loc .wrap,.panel.info .wrap{width:100%;}
.panel.intro .intro__media{aspect-ratio:auto;height:min(70vh,560px);}
.panel.amen .amen__media{aspect-ratio:auto;height:min(66vh,520px);}
.panel.loc .loc__map{aspect-ratio:auto;height:min(66vh,520px);}
.panel.dist .dist__grid{margin-top:32px;}
.panel.dist .dist__item{padding:26px 26px;}
.panel.dist .dist__item p{font-size:14px;}
.panel.info .info__grid{margin-top:34px;}
/* pista de progreso del carril */
.hprogress{position:fixed;left:0;top:0;height:3px;width:0;background:linear-gradient(90deg,var(--sun),var(--sun-soft));z-index:101;transition:width .1s linear;opacity:0;}
.hprogress.on{opacity:1;}

/* ---------- Franja firma ---------- */
.signature{background:var(--sea);color:#fff;padding:24px 0;overflow:hidden;}
.signature__in{display:flex;justify-content:center;flex-wrap:nowrap;gap:6px 22px;overflow-x:auto;scrollbar-width:none;}
.signature__in::-webkit-scrollbar{display:none;}
.signature span{font-family:var(--mono);font-size:clamp(9.5px,1.15vw,12px);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.75);white-space:nowrap;}
.signature b{color:var(--sun);font-weight:400;}

/* ============================================================
   Intro / valores
   ============================================================ */
.intro{background:var(--cream);}
.intro__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,90px);align-items:center;}
.intro__media{position:relative;border-radius:4px;overflow:hidden;aspect-ratio:4/5;}
.intro__media img{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover;will-change:transform;}
.intro__tag{position:absolute;left:20px;bottom:20px;z-index:2;color:#fff;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;text-shadow:0 1px 12px rgba(0,0,0,.5);}
.values{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:34px;padding-top:30px;border-top:1px solid var(--line);}
.values span{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);}
.values b{color:var(--sun);font-weight:400;margin-right:8px;}

/* ============================================================
   Distinciones (por qué Momo)
   ============================================================ */
.dist{background:var(--paper);}
.dist__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;margin-top:56px;border:1px solid var(--line);border-radius:4px;overflow:hidden;}
.dist__item{background:var(--cream);padding:38px 32px;transition:background .35s var(--ease);}
.dist__item:hover{background:#fff;}
.dist__n{font-family:var(--mono);font-size:12px;color:var(--sea-blue);letter-spacing:.1em;}
.dist__item h3{font-family:var(--display);font-weight:400;font-size:24px;margin:18px 0 10px;}
.dist__item p{font-size:15px;color:var(--ink-2);margin:0;line-height:1.6;}

/* ============================================================
   Catálogo
   ============================================================ */
.catalog{background:var(--cream);}
.catalog__head{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:end;}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:44px;}
.filter{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;padding:11px 18px;border:1px solid var(--line);border-radius:999px;color:var(--ink-2);background:var(--cream);transition:all .25s var(--ease);}
.filter:hover{border-color:var(--sea-blue);color:var(--ink);}
.filter.active{background:var(--sea);color:#fff;border-color:var(--sea);}
.filter .n{opacity:.5;margin-left:7px;}

.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:dense;gap:clamp(14px,1.6vw,24px);margin-top:40px;}
.catalog__more{display:none;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;padding:13px 18px;border:1px solid var(--line);border-radius:999px;color:var(--ink-2);background:transparent;width:100%;text-align:center;transition:all .25s var(--ease);}
.catalog__more:hover{border-color:var(--sea-blue);color:var(--ink);}
.card{position:relative;border-radius:4px;overflow:hidden;background:var(--sand);cursor:pointer;transition:transform .5s var(--ease-out);}
.card--wide{grid-column:span 2;}
.card__media{height:clamp(320px,25vw,400px);overflow:hidden;position:relative;}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out);}
.card:hover .card__media img{transform:scale(1.06);}
.card__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,46,68,.15) 0%,transparent 32%,transparent 52%,rgba(11,46,68,.72) 100%);}
.card__num{position:absolute;top:16px;left:16px;z-index:2;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:#fff;background:rgba(11,46,68,.45);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);padding:6px 12px;border-radius:999px;}
.card__body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px;color:#fff;}
.card__cat{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--sun-soft);}
.card__title{font-family:var(--display);font-weight:400;font-size:23px;margin:7px 0 4px;line-height:1.1;}
.card__meta{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:rgba(255,255,255,.85);}
.card__hint{margin-top:14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#fff;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s;}
.card:hover .card__hint{opacity:1;transform:none;}

/* ============================================================
   Modal de unidad
   ============================================================ */
.modal{position:fixed;inset:0;z-index:200;display:none;place-items:center;padding:20px;}
.modal.open{display:grid;}
.modal__bg{position:absolute;inset:0;background:rgba(11,46,68,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:fade .3s var(--ease);}
.modal__card{position:relative;z-index:1;width:min(920px,100%);max-height:90dvh;overflow-y:auto;background:var(--cream);border-radius:6px;display:grid;grid-template-columns:1.1fr 1fr;animation:rise .4s var(--ease-out);}
.modal__media{position:relative;overflow:hidden;min-height:340px;background:#051420;}
.modal__slides{position:relative;width:100%;height:100%;}
.modal__slides .slide{position:absolute;inset:0;opacity:0;transition:opacity .4s ease;}
.modal__slides .slide.active{opacity:1;}
.modal__slides .slide img{width:100%;height:100%;object-fit:cover;display:block;}
.modal__arrow{position:absolute;top:50%;z-index:2;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.85);color:var(--ink);display:grid;place-items:center;transform:translateY(-50%);transition:background .2s,transform .2s;}
.modal__arrow:hover{background:#fff;}
.modal__arrow--prev{left:14px;}
.modal__arrow--next{right:14px;}
.modal__media.single .modal__arrow,.modal__media.single .modal__dots{display:none;}
.modal__dots{position:absolute;left:50%;bottom:14px;z-index:2;display:flex;gap:6px;transform:translateX(-50%);}
.modal__dots button{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.55);transition:background .2s,transform .2s;}
.modal__dots button.active{background:#fff;transform:scale(1.25);}
.modal__body{padding:clamp(28px,4vw,46px);}
.modal__cat{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--sea-blue);}
.modal__title{font-family:var(--display);font-weight:300;font-size:clamp(28px,4vw,42px);margin:12px 0 6px;}
.modal__desc{color:var(--ink-2);font-size:16px;margin:16px 0 24px;}
.modal__specs{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden;margin-bottom:28px;}
.modal__specs div{background:var(--cream);padding:16px 18px;}
.modal__specs b{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:4px;}
.modal__specs span{font-family:var(--display);font-size:19px;}
.modal__close{position:absolute;top:16px;right:16px;z-index:3;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.9);color:var(--ink);display:grid;place-items:center;box-shadow:0 6px 20px -8px rgba(0,0,0,.3);}
.modal__close:hover{background:#fff;}
@keyframes fade{from{opacity:0;}}
@keyframes rise{from{opacity:0;transform:translateY(24px);}}

/* ============================================================
   Amenities (split imagen)
   ============================================================ */
.amen{background:var(--sea);color:#fff;overflow:hidden;}
.amen__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,80px);align-items:center;}
.amen .eyebrow{color:var(--sun-soft);}
.amen .h2{color:#fff;}
.amen__list{list-style:none;padding:0;margin:36px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:0;}
.amen__list li{padding:16px 0;border-top:1px solid rgba(255,255,255,.14);font-size:15.5px;display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.9);}
.amen__list li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sun);flex:none;}
.amen__media{position:relative;border-radius:4px;overflow:hidden;aspect-ratio:4/5;}
.amen__media img{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover;will-change:transform;}

/* ============================================================
   Ubicación
   ============================================================ */
.loc{background:var(--cream);}
.loc__grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(30px,6vw,70px);align-items:center;}
.loc__facts{list-style:none;padding:0;margin:30px 0 30px;display:grid;gap:16px;}
.loc__facts li{display:flex;gap:14px;align-items:flex-start;}
.loc__facts b{font-family:var(--display);font-weight:500;display:block;font-size:17px;}
.loc__facts span{color:var(--ink-2);font-size:15px;}
.loc__facts .m{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--sea-blue);flex:none;padding-top:4px;min-width:44px;}
.loc__map{border-radius:6px;overflow:hidden;aspect-ratio:1/1;box-shadow:0 30px 60px -30px rgba(11,46,68,.4);border:1px solid var(--line);}
.loc__map iframe{width:100%;height:100%;border:0;display:block;filter:saturate(.92);}

/* ============================================================
   Info / temporadas
   ============================================================ */
.info{background:var(--paper);}
.info__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2px;margin-top:52px;border:1px solid var(--line);border-radius:4px;overflow:hidden;}
.info__card{background:var(--cream);padding:34px 30px;}
.info__card .m{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--sea-blue);}
.info__card h3{font-family:var(--display);font-weight:400;font-size:21px;margin:14px 0 8px;}
.info__card p{font-size:14.5px;color:var(--ink-2);margin:0;}

/* ============================================================
   Contacto / footer
   ============================================================ */
.foot{background:var(--sea);color:rgba(255,255,255,.72);padding-block:clamp(80px,10vw,130px) 40px;position:relative;overflow:hidden;}
.foot__contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,80px);align-items:center;}
.foot .eyebrow{color:var(--sun-soft);}
.foot__title{font-family:var(--display);font-weight:300;font-size:clamp(32px,4.6vw,56px);color:#fff;line-height:1.02;letter-spacing:-.02em;text-wrap:balance;}
.foot__title em{font-style:italic;color:var(--sun);}
.foot__lead{color:rgba(255,255,255,.72);font-size:16px;max-width:42ch;margin:18px 0 0;}
.foot__form{display:grid;gap:14px;}
.foot__form .field-row{display:grid;grid-template-columns:1fr .55fr;gap:14px;}
.foot__form .field{display:flex;flex-direction:column;gap:6px;}
.foot__form label{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--sky);}
.foot__form label span{color:rgba(255,255,255,.4);}
.foot__form input,.foot__form textarea{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:13px 15px;color:#fff;font:inherit;font-size:15px;transition:border-color .25s,background .25s;}
.foot__form input::placeholder,.foot__form textarea::placeholder{color:rgba(255,255,255,.4);}
.foot__form input:focus,.foot__form textarea:focus{outline:none;border-color:var(--sun);background:rgba(255,255,255,.1);}
.foot__form textarea{resize:vertical;min-height:52px;}
.foot__form .btn{margin-top:4px;justify-content:center;}
.foot__note{font-size:13px;margin:2px 0 0;color:var(--sun-soft);}
.foot__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-top:clamp(56px,8vw,96px);padding-top:48px;border-top:1px solid rgba(255,255,255,.12);}
.foot__brand{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.foot__brand img{height:46px;width:auto;}
.foot h4{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--sky);margin:0 0 16px;}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:12px;}
.foot ul a,.foot ul span{display:inline-flex;align-items:center;gap:10px;font-size:15px;transition:color .25s;}
.foot ul a:hover{color:var(--sun);}
.foot__bottom{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;margin-top:52px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:rgba(255,255,255,.45);}

/* ============================================================
   Momito FAB (placeholder — front completo en fase 2)
   ============================================================ */
.momito-fab{position:fixed;right:22px;bottom:22px;z-index:120;display:flex;align-items:center;gap:12px;padding:10px 20px 10px 10px;border-radius:999px;background:var(--sun);color:#3a2600;font-weight:600;font-size:15px;box-shadow:0 16px 36px -14px rgba(245,168,0,.8);transition:transform .25s var(--ease-out);}
.momito-fab:hover{transform:translateY(-3px);}
.momito-fab img{width:40px;height:40px;border-radius:50%;background:#fff;object-fit:cover;}
.momito-fab.hide{transform:scale(0);opacity:0;pointer-events:none;}

/* Panel de chat */
.momito{position:fixed;right:22px;bottom:22px;z-index:130;width:min(380px,calc(100vw - 32px));height:min(580px,calc(100dvh - 40px));
  background:var(--cream);border-radius:20px;overflow:hidden;box-shadow:var(--shadow-lg,0 30px 70px -30px rgba(11,46,68,.5));
  border:1px solid var(--line);display:none;flex-direction:column;transform-origin:bottom right;}
.momito.open{display:flex;animation:rise .35s var(--ease-out);}
.momito__head{display:flex;align-items:center;gap:12px;padding:15px 16px;color:#fff;background:linear-gradient(125deg,var(--sea),var(--sea-mid,#0E4C6B));}
.momito__head img{width:44px;height:44px;border-radius:50%;background:#fff;object-fit:cover;}
.momito__head b{font-family:var(--display);font-weight:500;font-size:18px;display:block;line-height:1.1;}
.momito__head small{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--sky);display:flex;align-items:center;gap:6px;text-transform:uppercase;}
.momito__head small::before{content:"";width:7px;height:7px;border-radius:50%;background:#21c063;}
.momito__close{margin-left:auto;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;display:grid;place-items:center;}
.momito__close:hover{background:rgba(255,255,255,.28);}
.momito__log{flex:1;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:11px;scroll-behavior:smooth;}
.msg{max-width:84%;padding:11px 15px;border-radius:16px;font-size:14.5px;line-height:1.5;}
.msg b{font-weight:600;}
.msg--bot{background:#fff;border:1px solid var(--line);border-bottom-left-radius:5px;align-self:flex-start;}
.msg--user{background:var(--sea-blue);color:#fff;border-bottom-right-radius:5px;align-self:flex-end;}
.msg--wa{align-self:flex-start;max-width:100%;}
.msg--wa .btn{width:100%;justify-content:center;}
.momito__typing{align-self:flex-start;display:flex;gap:5px;padding:14px 16px;background:#fff;border:1px solid var(--line);border-radius:16px;border-bottom-left-radius:5px;}
.momito__typing i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:blink 1.2s infinite;}
.momito__typing i:nth-child(2){animation-delay:.2s;} .momito__typing i:nth-child(3){animation-delay:.4s;}
@keyframes blink{0%,60%,100%{opacity:.25;transform:translateY(0);}30%{opacity:1;transform:translateY(-3px);}}
.momito__chips{display:flex;gap:8px;padding:0 16px 12px;flex-wrap:wrap;}
.momito__chips button{font-family:var(--body);font-size:12.5px;border:1px solid var(--line);background:#fff;color:var(--sea-blue);padding:7px 13px;border-radius:999px;transition:all .2s;}
.momito__chips button:hover{border-color:var(--sea-blue);background:#eef7fd;}
.momito__form{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--line);background:var(--cream);}
.momito__form input{flex:1;border:1px solid var(--line);border-radius:999px;padding:12px 16px;font:inherit;font-size:14.5px;background:#fff;}
.momito__form input:focus{outline:2px solid var(--sky);outline-offset:1px;}
.momito__form button{width:46px;height:46px;border-radius:50%;border:none;background:var(--sun);color:#3a2600;display:grid;place-items:center;flex:none;transition:transform .2s;}
.momito__form button:hover{transform:scale(1.06);}
@media (max-width:520px){.momito{right:12px;bottom:12px;}}

/* ============================================================
   Reveal (con GSAP; fallback visible sin JS)
   ============================================================ */
.reveal{opacity:0;transform:translateY(30px);transition:opacity 1s var(--ease-out),transform 1s var(--ease-out);}
.reveal.in{opacity:1;transform:none;}
.no-js .reveal,html:not(.js) .reveal{opacity:1;transform:none;}

/* ============================================================
   Responsive — Tablet (≤900px)
   ============================================================ */
@media (max-width:900px){
  .nav,.header__cta{display:none;}
  .nav-toggle{display:inline-flex;}
  .intro__grid,.amen__grid,.loc__grid{grid-template-columns:1fr;}
  .dist__grid{grid-template-columns:1fr 1fr;}
  .grid{grid-template-columns:1fr 1fr;}
  .card--wide{grid-column:auto;}
  /* carril horizontal → vertical en mobile */
  .hscroll__track{flex-direction:column;}
  .panel{flex:auto;width:100%;}
  .panel.intro,.panel.dist,.panel.amen,.panel.loc,.panel.info{min-height:0;padding-block:clamp(64px,10vw,110px);align-items:stretch;}
  .panel.intro .intro__media{height:auto;aspect-ratio:16/10;}
  .panel.amen .amen__media{height:auto;aspect-ratio:16/10;}
  .panel.loc .loc__map{height:auto;aspect-ratio:1/1;}
  .intro__media,.amen__media{aspect-ratio:16/10;}
  .modal__card{grid-template-columns:1fr;}
  .modal__media{min-height:220px;aspect-ratio:16/10;}
  .catalog__head{grid-template-columns:1fr;}
  .foot__contact{grid-template-columns:1fr;gap:28px;}
  .foot__grid{grid-template-columns:1fr;gap:32px;}
}

/* ============================================================
   Responsive — Móvil (≤520px) — MEJORAS SIGNIFICATIVAS
   ============================================================ */
@media (max-width:520px){
  /* ---------- Base ---------- */
  body{font-size:15px;line-height:1.6;}
  .wrap{padding-inline:16px;}
  .section{padding-block:clamp(50px,14vw,80px);}
  /* las secciones que en desktop viven en el carril horizontal quedan apiladas: menos aire entre ellas */
  .panel.intro,.panel.dist,.panel.amen,.panel.loc,.panel.info{padding-block:clamp(44px,11vw,72px);}
  .eyebrow{font-size:10px;margin-bottom:14px;letter-spacing:.28em;}
  .h2{font-size:clamp(26px,7.5vw,34px);}
  .lead{font-size:15px;}

  /* ---------- Header ---------- */
  .header__in{height:64px;gap:12px;}
  .brand img{height:42px;}
  .header.scrolled .brand img{height:38px;}
  .nav-toggle{width:40px;height:40px;gap:4px;}
  .nav-toggle span{width:16px;}

  /* ---------- Hero ---------- */
  .hero{min-height:90svh;}
  .hero__in{padding-bottom:clamp(40px,12vw,64px);}
  .hero h1{font-size:clamp(34px,10vw,48px);max-width:12ch;}
  .hero__sub{font-size:15px;margin:16px 0 24px;max-width:none;}
  .hero__cta{gap:10px;}
  .hero__cta .btn{flex:1 1 100%;justify-content:center;padding:14px 20px;font-size:14px;}
  .hero__social{left:16px;bottom:16px;gap:8px;}
  .hero__social a{width:36px;height:36px;}
  .hero__social svg{width:15px;height:15px;}
  .hero__scroll{display:none;}

  /* ---------- Intro ---------- */
  .intro__grid{gap:20px;}
  .intro__media{aspect-ratio:16/10;border-radius:3px;}
  .intro__media img{inset:0;height:100%;}
  .intro__tag{left:14px;bottom:14px;font-size:9.5px;}
  .values{gap:8px 16px;margin-top:24px;padding-top:20px;}
  .values span{font-size:10px;letter-spacing:.12em;}
  .values b{font-size:11px;}

  /* ---------- Distinciones ---------- */
  .dist__grid{grid-template-columns:1fr;margin-top:28px;border-radius:3px;}
  .dist__item{padding:22px 20px;}
  .dist__item h3{font-size:20px;margin:12px 0 6px;}
  .dist__item p{font-size:14px;}

  /* ---------- Catálogo ---------- */
  .catalog__head{gap:12px;}
  .filters{margin-top:24px;gap:6px;overflow-x:auto;flex-wrap:nowrap;padding-bottom:8px;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .filters::-webkit-scrollbar{display:none;}
  .filter{font-size:10px;padding:8px 14px;white-space:nowrap;flex-shrink:0;}
  .grid{grid-template-columns:1fr 1fr;gap:10px;margin-top:24px;}
  .card__media{height:clamp(140px,42vw,190px);}
  .card__num{top:8px;left:8px;font-size:9px;padding:3px 9px;}
  .card__body{padding:12px;}
  .card__cat{font-size:8.5px;}
  .card__title{font-size:15px;margin:5px 0 2px;}
  .card__meta{font-size:9px;}
  .card__hint{display:none;}
  .catalog__more{grid-column:1/-1;margin-top:6px;}

  /* ---------- Modal ---------- */
  .modal{padding:12px;}
  .modal__card{max-height:95dvh;border-radius:4px;}
  .modal__media{min-height:130px;aspect-ratio:16/9;}
  .modal__body{padding:18px 16px;}
  .modal__title{font-size:clamp(20px,6vw,26px);margin:10px 0 4px;}
  .modal__desc{font-size:13.5px;margin:8px 0 12px;}
  .modal__specs{grid-template-columns:1fr 1fr;margin-bottom:14px;}
  .modal__specs div{padding:9px 11px;}
  .modal__specs b{font-size:9.5px;margin-bottom:2px;}
  .modal__specs span{font-size:14px;}
  .modal__close{top:10px;right:10px;width:38px;height:38px;}
  .modal__arrow{width:32px;height:32px;}
  .modal__arrow--prev{left:8px;}
  .modal__arrow--next{right:8px;}
  .modal__dots{bottom:8px;}

  /* ---------- Amenities ---------- */
  .amen__grid{gap:20px;}
  .amen__media{aspect-ratio:16/10;}
  .amen__list{grid-template-columns:1fr;margin-top:20px;}
  .amen__list li{font-size:14px;padding:12px 0;}
  .amen__list li::before{width:5px;height:5px;}

  /* ---------- Ubicación ---------- */
  .loc__grid{gap:20px;}
  .loc__facts{margin:20px 0 20px;gap:12px;}
  .loc__facts li{gap:10px;}
  .loc__facts b{font-size:15px;}
  .loc__facts span{font-size:13px;}
  .loc__facts .m{font-size:10px;min-width:36px;}
  .loc__map{aspect-ratio:4/3;border-radius:4px;}

  /* ---------- Info ---------- */
  .info__grid{margin-top:24px;}
  .info__card{padding:22px 18px;}
  .info__card h3{font-size:18px;margin:10px 0 6px;}
  .info__card p{font-size:13.5px;}

  /* ---------- Footer ---------- */
  .foot{padding-block:clamp(50px,12vw,80px) 24px;}
  .foot__contact{gap:20px;}
  .foot__title{font-size:clamp(26px,7vw,34px);}
  .foot__lead{font-size:14px;margin:12px 0 0;}
  .foot__form{gap:10px;}
  .foot__form .field-row{grid-template-columns:1fr;gap:10px;}
  .foot__form input,.foot__form textarea{font-size:14px;padding:12px 14px;border-radius:10px;}
  .foot__form .btn{font-size:14px;padding:14px 20px;}
  .foot__grid{margin-top:clamp(36px,8vw,56px);padding-top:28px;gap:24px;}
  .foot__brand img{height:36px;}
  .foot h4{font-size:10px;margin-bottom:12px;}
  .foot ul a,.foot ul span{font-size:14px;}
  .foot__bottom{flex-direction:column;gap:8px;margin-top:32px;padding-top:18px;font-size:10px;text-align:center;}

  /* ---------- Momito FAB ---------- */
  .momito-fab{right:14px;bottom:14px;padding:8px 14px 8px 8px;font-size:13px;gap:8px;}
  .momito-fab span{display:none;}
  .momito-fab img{width:34px;height:34px;}
  .momito{right:8px;bottom:8px;width:calc(100vw - 16px);height:calc(100dvh - 16px);border-radius:16px;}
  .momito__head{padding:12px 14px;}
  .momito__head img{width:36px;height:36px;}
  .momito__head b{font-size:16px;}
  .momito__log{padding:14px 12px;}
  .msg{font-size:13.5px;padding:10px 13px;max-width:90%;}
  .momito__form{padding:10px 12px;}
  .momito__form input{font-size:13.5px;padding:10px 14px;}
  .momito__form button{width:40px;height:40px;}
}

/* Accesibilidad */
:focus-visible{outline:2px solid var(--sun);outline-offset:3px;border-radius:3px;}