/* ============================================================
   WM LUXE — lado de huéspedes
   Misma paleta y misma tipografía que el lado de inversión.
   El dorado sobrevive en UN solo sitio: la barra superior.
   ============================================================ */

/* Los nombres de las variables se conservan aunque ya no describan su color
   —«--black» hoy es marfil— porque cambiarlos obligaría a tocar 100+ reglas y
   los estilos en línea de nueve páginas HTML. Lo que importa es el papel que
   cumple cada una, y ese no ha cambiado: fondo, línea, acento, texto. */
:root{
  /* Superficies, de la base a la tarjeta */
  --black:        #f7f3ec;   /* fondo base del sitio */
  --black-2:      #f2ede4;   /* segundo tono de los degradados */
  --panel:        #fbf8f3;   /* tarjetas */
  --panel-2:      #efe9de;   /* secciones alternas */

  --line:         #ddd8cf;
  --line-strong:  #c4beb2;

  /* Lo que era dorado en el cuerpo de la página ahora es bronce: sobre marfil,
     el dorado da 1.9:1 y es ilegible; el bronce da 6.5:1 y pasa AA. */
  --gold-1:       #5a4220;
  --gold-2:       #6f5228;
  --gold-3:       #6f5228;
  --gold-4:       #8a6a3b;
  --gold-grad:    linear-gradient(100deg,#6f5228 0%,#8a6a3b 50%,#6f5228 100%);

  /* EL dorado, y el único. Vive solo en la barra de arriba, que se queda oscura
     precisamente para que el dorado siga siendo legible encima. */
  --nav-bg:        #14150f;
  --nav-line:      rgba(201,168,112,.24);
  --nav-gold:      #c9a870;
  --nav-gold-hi:   #e3c576;
  --nav-gold-grad: linear-gradient(100deg,#9c7a2e 0%,#e3c576 30%,#fff0c4 50%,#e3c576 70%,#9c7a2e 100%);

  /* Acentos: el verde de acción y el bronce del lado de inversión.
     Los nombres «turq» y «terra» son herencia; los valores ya no lo son. */
  --turq:         #6f5228;   /* acento de texto: 6.5:1 sobre marfil */
  --turq-soft:    #5a4220;   /* su estado hover, más oscuro */
  --turq-deep:    #1e3a32;   /* acción primaria: 11.1:1 */
  --terra:        #6f5228;
  --jade:         #efe9de;

  /* Texto */
  --cream:        #1f211c;   /* principal */
  --cream-soft:   #33362e;   /* secundario */
  --muted:        #6b6a62;   /* terciario: 4.9:1, el mínimo que pasa AA */

  --serif:  "Newsreader", Georgia, "Times New Roman", serif;
  --body:   "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --maxw:   1180px;

  /* La greca conserva su dibujo y cambia de trazo: dorado sobre marfil no se ve. */
  --greca: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='52'%20height='30'%20viewBox='0%200%2052%2030'%3E%3Cpath%20d='M0%2026%20H52%20M6%2026%20V6%20H46%20V22%20H18%20V12%20H34%20V18'%20fill='none'%20stroke='%238a6a3b'%20stroke-width='2'%20stroke-linejoin='miter'/%3E%3C/svg%3E");
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; position:relative;
  background:var(--black);
  color:var(--cream);
  /* 20px de cuerpo venían de una serif de texto estrecha (Cormorant). Inter es
     mucho más ancha a igual tamaño: a 20px la línea se pasa de largo y cansa. */
  font-family:var(--body); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 28px; }

/* ---------- Type ---------- */
.eyebrow{ font-family:var(--serif); text-transform:uppercase; letter-spacing:.4em; font-size:.72rem; font-weight:600; color:var(--turq); margin:0 0 18px; }
/* Fuera de la barra, los títulos son texto, no metal. Es lo que hace que este
   lado se lea como el de inversión y no como otra página. */
.gold-text{ background:none; -webkit-background-clip:border-box; background-clip:border-box;
  -webkit-text-fill-color:currentColor; color:var(--cream); }
h1,h2,h3{ font-family:var(--serif); font-weight:600; line-height:1.12; margin:0; }
h1{ font-size:clamp(2.4rem,6vw,4.6rem); letter-spacing:.05em; }
h2{ font-size:clamp(1.7rem,3.6vw,2.7rem); letter-spacing:.06em; }
h3{ font-size:1.12rem; letter-spacing:.15em; text-transform:uppercase; }
p{ margin:0 0 1.1rem; color:var(--cream-soft); }
.lead{ font-size:1.28rem; color:var(--cream); }
.rule{ width:120px; height:2px; background:var(--gold-grad); margin:26px auto; border:0; opacity:.9; }
.rule.left{ margin-left:0; }

/* ---------- Greca band (static) ---------- */
.greca-band{ height:30px; width:100%; background:var(--greca) repeat-x center / 52px 30px; opacity:.7; }

/* ---------- Nav ---------- */
/* La barra es la única zona oscura del sitio, y lo es por una razón concreta:
   es donde vive el dorado, y el dorado sobre marfil no se lee. */
header.nav{ position:sticky; top:0; z-index:50; backdrop-filter:blur(12px);
  background:var(--nav-bg); border-bottom:1px solid var(--nav-line); }
header.nav .gold-text{ background:var(--nav-gold-grad); -webkit-background-clip:text;
  background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:74px; }
.brand-mark{ display:flex; align-items:center; gap:12px; }
.brand-mark img{ width:40px; height:40px; }
.brand-mark .bt{ font-family:var(--serif); font-weight:700; letter-spacing:.3em; font-size:1rem; }
.nav-links{ display:flex; align-items:center; gap:34px; }
.nav-links a{ position:relative; font-family:var(--serif); text-transform:uppercase; font-size:.74rem; letter-spacing:.22em; color:var(--nav-gold); transition:color .25s; }
.nav-links a::after{ content:""; position:absolute; left:0; bottom:-7px; width:0; height:1px; background:var(--nav-gold-hi); transition:width .3s; }
.nav-links a:hover, .nav-links a.is-current{ color:var(--nav-gold-hi); }
.nav-links a.is-current::after{ width:100%; }
.nav-links a:hover::after{ width:100%; }
.lang-toggle{ display:inline-flex; border:1px solid var(--nav-line); border-radius:999px; overflow:hidden; font-family:var(--serif); font-size:.68rem; letter-spacing:.12em; }
.lang-toggle button{ background:transparent; border:0; color:var(--nav-gold); padding:7px 13px; cursor:pointer; transition:.2s; letter-spacing:.12em; }
.lang-toggle button.active{ background:var(--nav-gold); color:var(--nav-bg); font-weight:700; }

/* ---------- Hero ---------- */
.hero{ position:relative; text-align:center; padding:96px 0 72px; }
.hero .medallion{ width:clamp(168px,24vw,250px); margin:0 auto 30px; }
.hero .medallion img{ width:100%; }
.hero h1{ margin-bottom:8px; }
.hero .sub{ font-family:var(--serif); letter-spacing:.34em; text-transform:uppercase; font-size:.92rem; color:var(--gold-3); margin-bottom:26px; }
.hero .lead{ max-width:680px; margin:0 auto 36px; }
.scroll-cue{ margin-top:54px; display:inline-flex; flex-direction:column; align-items:center; gap:8px; color:var(--muted); font-family:var(--serif); font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; }
.scroll-cue .dot{ width:22px; height:36px; border:1px solid var(--line-strong); border-radius:14px; position:relative; }
.scroll-cue .dot::after{ content:""; position:absolute; top:7px; left:50%; width:3px; height:7px; border-radius:3px; background:var(--turq); transform:translateX(-50%); animation:cue 1.8s ease-in-out infinite; }
@keyframes cue{ 0%{opacity:0; transform:translate(-50%,0);} 30%{opacity:1;} 100%{opacity:0; transform:translate(-50%,12px);} }

/* ---------- Buttons ---------- */
.btn{ position:relative; display:inline-flex; align-items:center; gap:10px; font-family:var(--body); font-weight:500; text-transform:none; letter-spacing:.01em; font-size:.95rem; padding:14px 28px; cursor:pointer; transition:.3s; overflow:hidden; border:1px solid var(--line-strong); color:var(--cream); background:transparent; }
.btn:hover{ border-color:var(--cream); background:rgba(31,33,28,.05); color:var(--cream); }
.btn.solid{ background:var(--turq-deep); color:#f7f3ec; border-color:transparent; font-weight:500; }
.btn.solid:hover{ background:#16302a; color:#f7f3ec; }
.btn .arrow{ transition:transform .3s; }
.btn:hover .arrow{ transform:translateX(5px); }

/* ---------- Sections ---------- */
section{ padding:78px 0; }
.section-head{ text-align:center; max-width:720px; margin:0 auto 52px; }

/* ---------- Gateways ---------- */
.gateways{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.gate{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; padding:42px 30px 40px; min-height:460px;
  background:linear-gradient(180deg,var(--panel),var(--black-2)); border:1px solid var(--line); overflow:hidden; transition:transform .4s, box-shadow .4s, border-color .4s; }
.gate::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:30px; background:var(--greca) repeat-x center / 52px 30px; opacity:.3; transition:opacity .4s; }
.gate::before{ content:""; position:absolute; inset:0; background:radial-gradient(440px 260px at 50% -8%, rgba(111,82,40,.10), transparent 70%); opacity:0; transition:opacity .4s; }
.gate:hover{ transform:translateY(-8px); border-color:var(--line-strong); box-shadow:0 24px 54px rgba(31,33,28,.12); }
.gate:hover::before{ opacity:1; }
.gate:hover::after{ opacity:.6; }
.gate .logo{ height:215px; width:auto; max-width:100%; margin:-6px auto 14px; display:block; transition:transform .45s ease; }
.gate:hover .logo{ transform:scale(1.07) translateY(-2px); }
.gate .tag{ font-family:var(--serif); font-size:.66rem; letter-spacing:.32em; color:var(--muted); text-transform:uppercase; margin-bottom:10px; }
.gate h2{ font-size:2rem; margin-bottom:14px; }
.gate p{ font-size:1.05rem; flex:1; }
.gate .go{ margin-top:18px; font-family:var(--serif); text-transform:uppercase; letter-spacing:.2em; font-size:.74rem; color:var(--turq); display:inline-flex; align-items:center; gap:9px; }
.gate:hover .go{ color:var(--turq-soft); }

/* ---------- Stats ---------- */
.values{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; text-align:center; max-width:820px; margin:0 auto; }
.value .n{ font-family:var(--serif); font-size:2.6rem; line-height:1; background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.value h3{ font-size:.74rem; margin:12px 0 0; color:var(--turq); }

/* ---------- Sub-page hero ---------- */
.subhero{ position:relative; text-align:center; padding:90px 0 56px; }
.subhero::after{ content:""; display:block; height:30px; margin-top:44px; background:var(--greca) repeat-x center / 52px 30px; opacity:.6; }
.subhero .logo{ margin:0 auto 16px; }
.subhero .logo img{ height:230px; width:auto; margin:0 auto; }
.subhero h1{ font-size:clamp(2.4rem,5.5vw,4rem); }
.subhero .lead{ max-width:640px; margin:18px auto 0; }

/* ---------- Listings ---------- */
.listing{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.card{ background:linear-gradient(180deg,var(--panel),var(--black-2)); border:1px solid var(--line); overflow:hidden; transition:transform .35s, box-shadow .35s, border-color .35s; }
.card:hover{ transform:translateY(-6px); border-color:var(--line-strong); box-shadow:0 18px 40px rgba(31,33,28,.10); }
.card .ph{ height:210px; position:relative; display:flex; align-items:center; justify-content:center;
  background:var(--greca) repeat-x bottom / 52px 30px, var(--panel-2); border-bottom:1px solid var(--line); }
.card .ph::before{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 40%, rgba(111,82,40,.07), transparent 70%); }
.card .ph .badge{ position:relative; font-family:var(--body); letter-spacing:.14em; text-transform:uppercase; font-size:.66rem; color:var(--cream-soft); border:1px dashed var(--line-strong); padding:8px 14px; background:rgba(255,255,255,.6); }
.card .body{ padding:24px 24px 28px; }
.card .body h3{ font-size:1.02rem; margin-bottom:8px; color:var(--cream); }
.card .body p{ font-size:.98rem; margin:0; }
.card .meta{ margin-top:16px; display:flex; gap:14px; flex-wrap:wrap; font-family:var(--serif); font-size:.66rem; letter-spacing:.15em; text-transform:uppercase; color:var(--terra); }

/* ---------- Split ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:center; }
.split .art{ aspect-ratio:4/3; border:1px solid var(--line); position:relative; overflow:hidden;
  background:var(--panel-2); display:flex; align-items:center; justify-content:center; }
.split .art::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:30px; background:var(--greca) repeat-x center / 52px 30px; opacity:.4; }
.split .art img{ width:54%; }

/* ---------- CTA ---------- */
.cta{ position:relative; text-align:center; border:1px solid var(--line); background:var(--panel-2); padding:60px 30px; overflow:hidden; }
.cta::before{ content:""; position:absolute; left:0; right:0; top:0; height:30px; background:var(--greca) repeat-x center / 52px 30px; opacity:.5; }
.cta::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:30px; background:var(--greca) repeat-x center / 52px 30px; opacity:.5; }
.cta h2{ margin-bottom:14px; }
.cta .lead{ max-width:560px; margin:0 auto 30px; }

/* ---------- Footer ---------- */
footer{ position:relative; border-top:1px solid var(--line); padding:56px 0 40px; margin-top:30px; }
footer::before{ content:""; position:absolute; left:0; right:0; top:0; height:30px; background:var(--greca) repeat-x center / 52px 30px; opacity:.45; }
.foot-inner{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.foot-brand .bt{ font-family:var(--serif); letter-spacing:.3em; font-size:1.1rem; }
.foot-brand p{ font-size:.95rem; max-width:300px; margin-top:12px; }
.foot-col h4{ font-family:var(--serif); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--turq); margin:0 0 14px; }
.foot-col a{ display:block; font-size:1rem; color:var(--cream-soft); margin-bottom:9px; transition:.2s; }
.foot-col a:hover{ color:var(--turq); padding-left:5px; }
.foot-bottom{ text-align:center; color:var(--muted); font-size:.82rem; letter-spacing:.1em; margin-top:40px; }

/* ============================================================
   SCROLL-DRIVEN MOTION (the only motion on the page)
   ============================================================ */
.reveal{ opacity:0; transform:translateY(42px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); will-change:opacity,transform; }
[data-reveal="zoom"]{ transform:scale(.9); }
[data-reveal="left"]{ transform:translateX(-56px); }
[data-reveal="right"]{ transform:translateX(56px); }
[data-reveal="fade"]{ transform:none; }
.reveal.in{ opacity:1; transform:none; }

/* parallax layer offset set by JS via --py */
.parallax{ transform:translate3d(0, var(--py,0), 0); will-change:transform; }

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .gateways,.listing,.values{ grid-template-columns:1fr 1fr; }
  .split{ grid-template-columns:1fr; gap:32px; }
}
@media(max-width:600px){
  body{ font-size:18px; }
  .gateways,.listing,.values{ grid-template-columns:1fr; }
  .foot-inner{ flex-direction:column; }
}

/* ---------- Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *{ animation:none !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
  .parallax{ transform:none !important; }
}

/* ---------- WhatsApp floating button ---------- */
.wa-fab{
  position:fixed; right:22px; bottom:22px; z-index:80;
  width:58px; height:58px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--turq-deep); color:#f7f3ec;
  box-shadow:0 10px 28px rgba(31,33,28,.22);
  transition:transform .25s, box-shadow .25s;
}
.wa-fab:hover{ transform:translateY(-3px) scale(1.05); box-shadow:0 14px 34px rgba(31,33,28,.28); }

/* ---------- Cookie banner ---------- */
.cookie-banner{
  position:fixed; left:50%; bottom:18px; transform:translate(-50%,140%);
  z-index:90; width:min(680px,92vw);
  display:flex; align-items:center; gap:18px; flex-wrap:wrap; justify-content:space-between;
  background:var(--panel);
  border:1px solid var(--line-strong); border-radius:14px; padding:16px 20px;
  box-shadow:0 20px 48px rgba(31,33,28,.16); opacity:0; transition:transform .45s ease, opacity .45s ease;
}
.cookie-banner.show{ transform:translate(-50%,0); opacity:1; }
.cookie-banner.hide{ transform:translate(-50%,140%); opacity:0; }
.cookie-banner p{ margin:0; font-size:.96rem; color:var(--cream-soft); flex:1 1 280px; }
.cookie-banner a{ color:var(--turq); text-decoration:underline; }
.cookie-actions{ display:flex; gap:10px; }
.cookie-banner button{ font-family:var(--body); font-size:.85rem; padding:10px 18px; cursor:pointer; border:1px solid var(--line-strong); background:transparent; color:var(--cream); border-radius:999px; transition:.2s; }
.cookie-banner .ck-yes{ background:var(--turq-deep); color:#f7f3ec; border-color:transparent; font-weight:500; }
.cookie-banner button:hover{ filter:brightness(1.08); }

/* ---------- Lightbox gallery ---------- */
.card .ph[data-gallery]{ cursor:pointer; }
.card .ph[data-gallery]::after{
  content:"⤢"; position:absolute; right:12px; bottom:12px; z-index:2;
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line-strong); border-radius:50%; color:var(--cream);
  background:rgba(255,255,255,.75); font-size:1rem; transition:.25s;
}
.card:hover .ph[data-gallery]::after{ color:var(--gold-4); border-color:var(--turq); }
.lightbox{ position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center;
  background:rgba(20,21,15,.92); backdrop-filter:blur(4px); }
.lightbox.open{ display:flex; }
.lb-stage{ margin:0; max-width:86vw; max-height:82vh; text-align:center; }
.lb-stage img{ max-width:86vw; max-height:78vh; border:1px solid var(--line-strong); }
.lb-stage figcaption{ margin-top:12px; font-family:var(--body); letter-spacing:.04em; color:#e4daca; font-size:.85rem; }
.lb-ph{ width:60vw; max-width:560px; height:50vh; display:flex; align-items:center; justify-content:center;
  border:1px dashed rgba(247,243,236,.4); color:#e4daca; font-family:var(--body); letter-spacing:.08em; text-transform:uppercase; font-size:.9rem;
  background:var(--greca) repeat-x bottom / 52px 30px; }
.lightbox button{ position:absolute; background:rgba(247,243,236,.12); border:1px solid rgba(247,243,236,.4); color:#f7f3ec;
  width:46px; height:46px; border-radius:50%; font-size:1.5rem; cursor:pointer; transition:.2s; }
.lightbox button:hover{ background:rgba(247,243,236,.24); border-color:#f7f3ec; }
.lb-close{ top:24px; right:24px; }
.lb-prev{ left:24px; top:50%; transform:translateY(-50%); }
.lb-next{ right:24px; top:50%; transform:translateY(-50%); }

/* ---------- Contact form ---------- */
.cta-form{ display:grid; gap:14px; max-width:540px; margin:8px auto 0; text-align:left; }
.cta-form .row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.cta-form input, .cta-form textarea{ width:100%; background:#fff; border:1px solid var(--line-strong); color:var(--cream); font-family:var(--body); font-size:1rem; padding:12px 15px; border-radius:8px; transition:border-color .2s; }
.cta-form input:focus, .cta-form textarea:focus{ outline:2px solid var(--turq-deep); outline-offset:1px; border-color:var(--turq-deep); }
.cta-form input::placeholder, .cta-form textarea::placeholder{ color:var(--muted); }
.cta-form button{ justify-self:center; margin-top:4px; }
.cta-form .form-note{ font-size:.82rem; color:var(--muted); text-align:center; margin:0; }
@media(max-width:540px){ .cta-form .row{ grid-template-columns:1fr; } }

/* ---------- Location / map ---------- */
.map-wrap{ position:relative; border:1px solid var(--line); overflow:hidden; }
.map-wrap iframe{ display:block; width:100%; height:420px; border:0; }
.map-wrap::after{ content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 0 1px rgba(31,33,28,.10); }

/* ---------- Legal pages ---------- */
.legal{ max-width:820px; margin:0 auto; padding:60px 0; }
.legal h1{ font-size:clamp(2rem,4vw,3rem); margin-bottom:8px; }
.legal h2{ font-size:1.3rem; margin:34px 0 10px; color:var(--gold-3); }
.legal p, .legal li{ color:var(--cream-soft); font-size:1.05rem; }
.legal ul{ padding-left:1.2rem; }
.legal .updated{ color:var(--muted); font-size:.85rem; letter-spacing:.08em; }
.legal .note{ border:1px dashed var(--line-strong); padding:14px 18px; border-radius:10px; color:var(--gold-3); font-size:.92rem; }
.foot-legal{ margin-top:14px; }
.foot-legal a{ color:var(--muted); font-size:.8rem; margin:0 8px; }
.foot-legal a:hover{ color:var(--turq); }

/* ---------- Cinematic photographic scenes ---------- */
.scene-hero{ position:relative; min-height:94vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; overflow:hidden; padding:90px 24px; }
.scene-bg{ position:absolute; inset:-8%; z-index:0;
  background-image: var(--hero, none), linear-gradient(160deg,#f2ede4,#e7e0d4 70%);
  background-size:cover; background-position:center; background-repeat:no-repeat;
  transform:translate3d(0,0,0) scale(1.12); will-change:transform; }
/* La máscara de legibilidad existía para leer texto claro sobre una fotografía.
   No hay ninguna fotografía en este sitio, así que solo oscurecía el marfil. */
.scene-hero::before{ content:none; }
.scene-hero > *{ position:relative; z-index:2; }
/* Sin fotografía debajo, la sombra de texto solo emborronaba. */
.scene-hero .scene-3d{ position:absolute; inset:0; z-index:0; }
.subhero.scene-hero::after{ display:none; }
/* exit zoom when navigating away */
body.leaving .scene-bg{ transition:transform .6s cubic-bezier(.2,.7,.2,1); transform:scale(1.42) !important; }
@media(prefers-reduced-motion:reduce){ .scene-bg{ transform:scale(1.06); } }

/* portal (sea landing) */
.portal-hero{ min-height:100vh; }
.portal-hero .pbrand{ font-family:var(--serif); font-weight:700; letter-spacing:.18em;
  font-size:clamp(2.6rem,8vw,5.2rem);
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent; margin:0; }
.portal-hero .ptag{ font-family:var(--serif); letter-spacing:.34em; text-transform:uppercase;
  font-size:clamp(.7rem,1.6vw,.95rem); color:var(--gold-3); margin:14px 0 0; }
.portal{ display:flex; gap:24px; flex-wrap:wrap; justify-content:center; margin-top:46px; }
.portal a{ position:relative; min-width:210px; padding:24px 26px; text-decoration:none;
  border:1px solid var(--line-strong); background:var(--panel);
  transition:transform .35s, border-color .35s, background .35s, box-shadow .35s; }
.portal a:hover{ transform:translateY(-5px); border-color:var(--cream);
  background:var(--panel); box-shadow:0 20px 44px rgba(31,33,28,.12); }
.portal .pt{ font-family:var(--serif); letter-spacing:.26em; text-transform:uppercase; font-size:.82rem; color:var(--gold-3); }
.portal .pd{ font-size:.96rem; color:var(--cream-soft); margin-top:8px; }
.portal-skip{ margin-top:40px; }
.portal-skip a{ font-family:var(--body); letter-spacing:.06em; font-size:.85rem; color:var(--cream-soft); border-bottom:1px solid var(--line-strong); padding-bottom:3px; }
.portal-skip a:hover{ color:var(--gold-3); }

/* page fade transition */
.page-fade{ position:fixed; inset:0; z-index:120; background:var(--black); opacity:0; pointer-events:none; transition:opacity .62s ease; }
.page-fade.clear{ opacity:0; }
.page-fade.cover{ opacity:1; pointer-events:all; }

/* ---------- Experiences tip / note ---------- */
.tip{ max-width:860px; margin:30px auto 10px; text-align:center; border:1px solid var(--line); border-radius:14px; padding:22px 34px; line-height:1.6; color:var(--cream-soft); font-size:1rem; background:var(--panel-2); }
.tip strong{ color:var(--gold-4); }

/* ---------- Partner cards (Experiences) ---------- */
.cat-head{ text-align:left; max-width:none; margin:48px 0 24px; }
.cat-head h2{ font-size:clamp(1.5rem,3vw,2.1rem); }
.cat-head .rule{ margin:14px 0 0; }
.card .body .cat{ font-family:var(--serif); font-size:.62rem; letter-spacing:.28em; text-transform:uppercase; color:var(--turq); margin:0 0 8px; }
.card .body h3{ font-size:1.16rem; letter-spacing:.04em; text-transform:none; }
.card .clinks{ margin-top:auto; padding-top:16px; display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
.card .clink{ display:inline-block; font-family:var(--serif); text-transform:uppercase; letter-spacing:.18em; font-size:.7rem; color:var(--gold-3); border-bottom:1px solid var(--line-strong); padding-bottom:3px; transition:.2s; }
.card .clink:hover{ color:var(--gold-4); border-color:var(--turq); }
.card .clink.alt{ color:var(--cream-soft); border-bottom-color:var(--line); font-size:.62rem; }
.card .clink.alt:hover{ color:var(--turq); }
.card .body{ display:flex; flex-direction:column; height:100%; }

/* ---------- Language visibility ---------- */
[data-lang-es],[data-lang-en]{ display:none; }
html[lang="es"] [data-lang-es]{ display:revert; }
html[lang="en"] [data-lang-en]{ display:revert; }

/* ---------- Mobile nav (hamburger) ---------- */
.nav-inner{ position:relative; }
.nav-toggle{ display:none; flex-direction:column; justify-content:center; gap:5px;
  width:42px; height:42px; padding:9px; background:none; border:0; cursor:pointer; }
.nav-toggle span{ display:block; height:2px; width:100%; background:var(--nav-gold);
  border-radius:2px; transition:transform .3s ease, opacity .2s ease; }
.nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
/* Tablets / pantallas medianas: pestañas EN LINEA pero mas apretadas para que quepan */
@media(max-width:1024px) and (min-width:641px){
  .nav-links{ gap:16px; }
  .nav-links a{ font-size:.58rem; letter-spacing:.10em; }
}
/* Celulares: menu hamburguesa desplegable */
@media(max-width:640px){
  .nav-toggle{ display:flex; }
  .nav-links{
    display:flex; flex-direction:column; align-items:flex-start; gap:22px;
    position:absolute; top:calc(100% + 8px); right:0; min-width:210px;
    background:var(--nav-bg); border:1px solid var(--nav-line);
    border-radius:10px; padding:24px 28px; box-shadow:0 18px 44px rgba(0,0,0,.5);
    opacity:0; transform:translateY(-10px); pointer-events:none;
    transition:opacity .25s ease, transform .25s ease; z-index:60;
  }
  .nav-links a{ font-size:.74rem; letter-spacing:.22em; }
  .nav-links.open{ opacity:1; transform:translateY(0); pointer-events:auto; }
}

/* ---------- Stays: encabezados de zona ---------- */
.zone-head{ font-family:var(--serif); text-transform:uppercase; letter-spacing:.18em;
  font-size:1.05rem; color:var(--gold-3); margin:46px 0 18px; padding-bottom:10px;
  border-bottom:1px solid var(--line); }
.zone-head:first-of-type{ margin-top:8px; }
.card .clinks{ margin-top:14px; }

/* Highlight an experience card when reached from a map pin link */
.card:target{ outline:2px solid var(--turq); outline-offset:3px; box-shadow:0 0 0 4px rgba(111,82,40,.18); scroll-margin-top:90px; animation:cardPulse 2.2s ease-out 1; }
@keyframes cardPulse{ 0%{box-shadow:0 0 0 6px rgba(111,82,40,.35);} 100%{box-shadow:0 0 0 4px rgba(111,82,40,.15);} }

/* Zone anchors reached from map property pins */
.zone-head{ scroll-margin-top:90px; }
.zone-head:target{ color:var(--turq); }

/* ============================================================
   RITMO TONAL
   ============================================================
   Este bloque corrige un error de la conversión a marfil: se pasó TODO a un
   único tono claro, y diez pantallas seguidas del mismo marfil brillante
   cansan la vista y aplanan la página.

   El lado de inversión nunca fue «blanco»: alterna marfil, marfil alterno y
   DOS anclas oscuras —el hero y el bloque de propietarios—. Ese contraste es
   lo que da profundidad. Aquí se reproduce la misma partitura.

   El mecanismo es redefinir las variables dentro del bloque oscuro en lugar de
   reescribir cada regla: como todo el sitio lee de las variables, un bloque
   entero cambia de piel con seis líneas. Y de paso resuelve lo de los
   medallones: son logotipos dorados, dibujados para fondo oscuro, y sobre
   marfil se veían lavados. Vuelven a donde pertenecen.
   ============================================================ */

/* `header.nav + section` es el denominador común: solo Stays usa la clase
   `.subhero`; el resto de las páginas abre con una <section> sin clase. Lo que
   todas comparten es ser la primera cosa después de la barra. */
header.nav + section,
.hero,
.subhero,
.scene-hero,
.portal-hero,
.cta{
  background:var(--nav-bg);
  color:var(--cream);

  /* Piel oscura: los mismos papeles, otros valores. */
  --cream:        #f7f3ec;
  --cream-soft:   #e4daca;   /* 12.4:1 sobre obsidiana */
  --muted:        #cdbfa8;   /* 8.6:1 */
  --turq:         #c9a870;   /* el acento sobre oscuro es bronce claro: 7.2:1 */
  --turq-soft:    #e3c576;
  --line:         rgba(201,168,112,.20);
  --line-strong:  rgba(201,168,112,.42);
  --panel:        #1f211c;
  --panel-2:      #14150f;
  --gold-3:       #c9a870;
  --gold-4:       #e3c576;
  --gold-grad:    linear-gradient(100deg,#9c7a2e 0%,#e3c576 45%,#cdab5e 100%);
  /* La greca recupera su trazo dorado: aquí sí se ve. */
  --greca: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='52'%20height='30'%20viewBox='0%200%2052%2030'%3E%3Cpath%20d='M0%2026%20H52%20M6%2026%20V6%20H46%20V22%20H18%20V12%20H34%20V18'%20fill='none'%20stroke='%23c9a870'%20stroke-width='2'%20stroke-linejoin='miter'/%3E%3C/svg%3E");
}

/* El botón sólido sobre oscuro: relleno marfil y texto obsidiana, como el hero
   de inversión. El verde de acción sobre obsidiana daría 2.1:1. */
.hero .btn.solid, .subhero .btn.solid, .scene-hero .btn.solid, .cta .btn.solid{
  background:#f7f3ec; color:#14150f;
}
.hero .btn.solid:hover, .subhero .btn.solid:hover, .scene-hero .btn.solid:hover, .cta .btn.solid:hover{
  background:#e4daca; color:#14150f;
}
.hero .btn:hover, .subhero .btn:hover, .scene-hero .btn:hover, .cta .btn:hover{
  background:rgba(247,243,236,.10); border-color:#f7f3ec; color:#f7f3ec;
}

/* Los títulos del hero NO vuelven a ser dorados: sobre obsidiana, la serif en
   marfil es exactamente lo que hace el hero de inversión, y el dorado se quedó
   donde se pidió que se quedara. Los medallones sí son dorados, pero son
   imágenes: no hace falta tocarlos, solo devolverles el fondo. */
.hero .gold-text, .subhero .gold-text, .scene-hero .gold-text, .cta .gold-text{
  color:var(--cream);
}

/* Alternancia del cuerpo: sin ella, todo lo que hay entre el hero y el cierre
   es una sola mancha continua.
   Va en las IMPARES, no en las pares: la primera sección es el hero oscuro, así
   que si alternaran las pares, la sección siguiente cambiaría de tono otra vez
   y serían tres cortes seguidos. Con las impares, el hero se come la primera y
   el ritmo sale oscuro · marfil · alterno · marfil · alterno. */
section:nth-of-type(odd){ background:var(--panel-2); }

/* El hero necesita aire propio: antes lo daba el degradado a pantalla completa. */
.hero, .subhero{ padding-bottom:92px; }
.scene-hero{ min-height:78vh; }

/* Remate de los bloques oscuros, para que el corte con el marfil sea una
   decisión y no un tijeretazo. */
.hero::after, .subhero::after, .cta::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:30px;
  background:var(--greca) repeat-x center / 52px 30px; opacity:.5;
}
.hero, .subhero, .cta{ position:relative; }

/* La sección que sigue a un bloque oscuro nunca lleva fondo alterno: dos
   cambios de tono seguidos se leen como un error de maquetación. */
header.nav + section + section,
.hero + section, .subhero + section, .scene-hero + section{ background:var(--black); }

/* El pie cierra en alterno, para que no quede pegado al último bloque claro. */
footer{ background:var(--panel-2); }

/* ============================================================
   PLACAS PARA LOS LOGOTIPOS
   ============================================================
   Los medallones de Stays, Motion y Experiences son dorados y están dibujados
   para fondo oscuro: sobre marfil quedan lavados y desentonan. Los heroes ya
   volvieron a ser oscuros, pero los logotipos que viven DENTRO de una tarjeta
   clara seguían al aire.

   La solución es la misma trama diagonal que el lado de inversión usa para los
   huecos de fotografía: obsidiana con rayas de bronce al 10 %. No es un parche,
   es el mismo recurso del sistema aplicado al mismo problema — un elemento que
   necesita fondo oscuro dentro de una página clara.
   ============================================================ */

:root{
  --plate: repeating-linear-gradient(45deg,
            transparent 0 10px,
            color-mix(in srgb, #c9a870 12%, transparent) 10px 20px);
}

.gate .logo{
  background:var(--plate), var(--nav-bg);
  padding:22px 26px;
  border:1px solid rgba(201,168,112,.18);
  width:100%; height:auto; max-height:230px; object-fit:contain;
  margin:-6px 0 18px;
}

/* El bloque partido: la lámina entera pasa a placa, con el logotipo encima. */
.split .art{
  background:var(--plate), var(--nav-bg);
  border-color:rgba(201,168,112,.18);
}
.split .art::after{ opacity:.55; }

/* El hueco de imagen de las tarjetas: misma trama, mismo motivo. */
.card .ph{
  background:var(--plate), var(--nav-bg);
  border-bottom:1px solid rgba(201,168,112,.18);
}
.card .ph::before{ background:none; }
.card .ph .badge{
  color:#e4daca; border-color:rgba(201,168,112,.42); background:rgba(20,21,15,.55);
}

/* ============================================================
   CAPÍTULOS Y TARJETAS
   ============================================================
   La alternancia por secciones no alcanzaba en Experiences: la página entera
   son DOS secciones, y la segunda mide 4.400 px con treinta tarjetas de texto
   casi del mismo tono que el fondo. Alternar dos bloques no rompe eso.

   Lo que sí lo rompe es dar capítulos. Cada encabezado de categoría
   —Restaurantes, Beach clubs, Tours— pasa a ser una banda oscura de lado a
   lado. Deja de ser una lista interminable y pasa a ser un recorrido con
   paradas, que es lo que invita a seguir bajando.
   ============================================================ */

.cat-head{
  position:relative;
  background:var(--plate), var(--nav-bg);
  color:#f7f3ec;
  /* De borde a borde aunque viva dentro de la retícula. `body` ya tiene
     `overflow-x:hidden`, así que la barra de desplazamiento no descuadra nada. */
  margin-inline:calc(50% - 50vw);
  padding:36px calc(50vw - 50%) 32px;
  margin-block:72px 36px;
  text-align:left;
  max-width:none;
}
.cat-head:first-of-type{ margin-top:24px; }
.cat-head h2{ color:#f7f3ec; margin:0; }
.cat-head .rule{ background:linear-gradient(100deg,#9c7a2e,#e3c576 55%,#cdab5e); margin:14px 0 0; }

/* Encabezados de zona en Stays: misma idea, más ligera — son más numerosos. */
.zone-head{
  border-bottom:0;
  border-left:3px solid var(--gold-2);
  padding:6px 0 6px 16px;
  color:var(--cream);
}

/* Las tarjetas tenían un degradado de marfil sobre marfil: invisibles. Ahora
   son una superficie con borde y peso propio, que es lo que las hace clicables
   a simple vista. */
.card, .gate{
  background:var(--panel);
  border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(31,33,28,.04);
}
.card:hover, .gate:hover{
  box-shadow:0 18px 40px rgba(31,33,28,.13);
  border-color:var(--gold-2);
}
.card .body h3{ color:var(--cream); }
.card .clink{ color:var(--turq); border-bottom-color:var(--gold-2); }
.card .clink:hover{ color:var(--gold-1); border-color:var(--gold-1); }

/* ---------- Puente al lado de inversión ----------
   El equivalente de «Soy huésped» en la barra de inversión: pequeño, secundario
   y sin competir con la navegación de huéspedes. Vive DENTRO de `.nav-links` a
   propósito — así entra solo en el menú desplegable del móvil, igual que el
   resto, sin una regla aparte. */
.nav-invest{
  font-family:var(--body);
  font-size:.72rem;
  letter-spacing:.04em;
  text-transform:none;
  color:var(--nav-gold);
  border:1px solid rgba(201,168,112,.42);
  border-radius:999px;
  padding:7px 14px;
  white-space:nowrap;
  transition:color .25s, border-color .25s, background-color .25s;
}
.nav-invest::after{ display:none; }   /* sin el subrayado animado del resto */
.nav-invest:hover{
  color:var(--nav-bg);
  background:var(--nav-gold);
  border-color:var(--nav-gold);
}
@media(max-width:640px){
  .nav-invest{ align-self:flex-start; font-size:.8rem; padding:9px 16px; }
}