/* =========================================================================
   DK42 · Playa del Carmen
   Azul marino, acero y papel. El galón del logotipo manda en la gráfica.
   ========================================================================= */

:root{
  --papel:    #FAFAFA;
  --papel-2:  #F2F3F6;
  --papel-3:  #E6E9EF;
  --tinta:    #1D1E20;
  --marino:   #0D141A;
  --acero:    #354B68;   /* 8.53:1 sobre papel */
  --pizarra:  #364153;
  --gris:     #5A5F6B;   /* 6.13:1 sobre papel */
  --gris-alto:#9AA6BC;   /* 7.56:1 sobre marino */
  --linea:    #DCDFE6;
  --linea-2:  #C6CBD6;

  --titular: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --cuerpo:  "Inter", "Helvetica Neue", Arial, sans-serif;

  --margen:  clamp(1.25rem, 5vw, 5rem);
  --columna: 1420px;
  --aire:    clamp(4.5rem, 10vw, 10rem);
  --aire-c:  clamp(3rem, 6vw, 5.5rem);

  --curva:  cubic-bezier(.22,.68,.26,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--cuerpo);
  font-size:clamp(1rem,.95rem + .2vw,1.06rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }
::selection{ background:var(--acero); color:#fff; }
:focus-visible{ outline:2px solid var(--acero); outline-offset:3px; }

/* -------------------------------------------------------------------------
   Rejilla
   ------------------------------------------------------------------------- */
.lienzo{ width:100%; max-width:var(--columna); margin-inline:auto; padding-inline:var(--margen); }
.lienzo--ancho{ max-width:1680px; }

.rejilla{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:clamp(1rem,2.2vw,2.25rem); }
@media (max-width:880px){
  .rejilla{ grid-template-columns:minmax(0,1fr); }
  .rejilla > *{ grid-column:1 / -1 !important; align-self:auto !important; }
}

section{ position:relative; }
.bloque{ padding-block:var(--aire); }
.bloque--corto{ padding-block:var(--aire-c); }

.banda--2{ background:var(--papel-2); }
.banda--marino{ background:var(--marino); color:var(--papel); }
/* Los botones traen su propio color: si la banda se lo impone,
   .boton--claro queda papel sobre papel y desaparece. */
.banda--marino a:not(.boton){ color:var(--papel); }
.banda--acero{ background:var(--acero); color:#fff; }

/* -------------------------------------------------------------------------
   Tipografía
   ------------------------------------------------------------------------- */
h1,h2,h3,h4{ margin:0; font-family:var(--titular); font-weight:700; line-height:1.03; letter-spacing:-.025em; text-wrap:balance; }

.titular{ font-size:clamp(2.6rem,7.6vw,6.4rem); letter-spacing:-.04em; line-height:.94; }
.titulo{ font-size:clamp(1.9rem,4.2vw,3.4rem); letter-spacing:-.03em; }
.subtitulo{ font-size:clamp(1.2rem,2vw,1.65rem); font-weight:600; letter-spacing:-.02em; line-height:1.2; }

.rotulo{
  display:block;
  font-family:var(--titular);
  font-size:.68rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--acero);
  line-height:1.5;
}
.banda--marino .rotulo,
.pie .rotulo{ color:var(--gris-alto); }        /* el acero sobre marino da 2.08:1 */
.banda--acero .rotulo{ color:rgba(255,255,255,.82); }

.entrada{ font-size:clamp(1.05rem,1.3vw,1.22rem); line-height:1.6; max-width:48ch; text-wrap:pretty; }
.parrafo{ color:var(--gris); max-width:58ch; text-wrap:pretty; overflow-wrap:break-word; }
.parrafo + .parrafo{ margin-top:1.05em; }
.apilado > .parrafo + .parrafo{ margin-top:0; }
.banda--marino .parrafo,
.pie .parrafo{ color:#AEB6C4; }               /* el gris sobre marino da 2.90:1 */
.banda--acero .parrafo{ color:rgba(255,255,255,.9); }
.parrafo a,.entrada a{ overflow-wrap:anywhere; }

/* El inglés va en segundo plano, no compite con el español */
.ingles{ color:var(--gris); font-size:.94em; font-style:normal; display:block; margin-top:.85em; opacity:.82; }
.banda--marino .ingles,
.pie .ingles{ color:#9AA3B2; }

/* -------------------------------------------------------------------------
   El galón: el motivo del logotipo, convertido en regla de sección
   ------------------------------------------------------------------------- */
.galon{
  height:13px;
  background-image:repeating-linear-gradient(
    135deg, var(--acero) 0 2px, transparent 2px 11px);
  opacity:.38;
  border:0;
  margin:0;
}
.banda--marino .galon{ background-image:repeating-linear-gradient(135deg, var(--gris-alto) 0 2px, transparent 2px 9px); opacity:.45; }

/* -------------------------------------------------------------------------
   Botones y enlaces
   ------------------------------------------------------------------------- */
.boton{
  display:inline-flex; align-items:center; gap:.85em;
  font-family:var(--titular); font-size:.72rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; text-decoration:none;
  padding:1.15em 2em;
  background:var(--acero); color:#fff; border:1px solid var(--acero);
  transition:background .35s var(--curva), color .35s var(--curva), border-color .35s var(--curva);
}
.boton:hover{ background:transparent; color:var(--acero); }
.boton--claro{ background:var(--papel); color:var(--marino); border-color:var(--papel); }
.boton--claro:hover{ background:transparent; color:var(--papel); }
.boton--hueco{ background:transparent; color:var(--acero); }
.boton--hueco:hover{ background:var(--acero); color:#fff; }
.boton .flecha{ transition:transform .35s var(--curva); }
.boton:hover .flecha{ transform:translateX(.35em); }

.enlace{
  display:inline-block;
  font-family:var(--titular); font-size:.72rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; text-decoration:none;
  padding-bottom:.4em; border-bottom:2px solid var(--linea-2);
  transition:border-color .3s var(--curva), color .3s var(--curva);
}
.enlace:hover{ border-color:var(--acero); color:var(--acero); }
.banda--marino .enlace{ border-color:rgba(250,250,250,.4); }
.banda--marino .enlace:hover{ border-color:var(--papel); color:var(--papel); }

/* -------------------------------------------------------------------------
   Navegación
   ------------------------------------------------------------------------- */
.nav{
  position:sticky; top:0; z-index:60;
  background:rgba(250,250,250,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .35s var(--curva);
}
.nav.posada{ border-bottom-color:var(--linea); }
.nav__in{ display:flex; align-items:center; justify-content:space-between; gap:2rem; height:clamp(66px,7vw,84px); }
.nav__marca img{ height:clamp(34px,4vw,46px); width:auto; }
.nav__menu{ display:flex; align-items:center; gap:clamp(1.3rem,2.6vw,2.6rem); }
.nav__menu a{
  font-family:var(--titular); font-size:.72rem; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase; text-decoration:none;
  position:relative; padding-block:.4em;
}
.nav__menu a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--acero); transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--curva);
}
.nav__menu a:hover::after,.nav__menu a[aria-current="page"]::after{ transform:scaleX(1); }
@media (max-width:880px){ .nav__menu{ gap:1.3rem; } .nav__menu a{ font-size:.66rem; letter-spacing:.1em; } }
@media (max-width:620px){ .nav__menu{ gap:1.05rem; } .nav__menu a{ font-size:.62rem; letter-spacing:.07em; } }
@media (max-width:380px){ .nav__menu{ gap:.8rem; } .nav__menu a{ font-size:.57rem; letter-spacing:.04em; } }

/* -------------------------------------------------------------------------
   Portada
   ------------------------------------------------------------------------- */
.portada{ position:relative; min-height:clamp(540px,88vh,920px); display:flex; align-items:flex-end; overflow:hidden; background:var(--marino); }
.portada__foto{ position:absolute; inset:0; }
.portada__foto img{ width:100%; height:100%; object-fit:cover; }
.portada__velo{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(13,20,26,.86) 0%, rgba(13,20,26,.45) 45%, rgba(13,20,26,.2) 100%);
}
.portada__texto{ position:relative; width:100%; padding-block:clamp(2.5rem,6vw,5rem); color:var(--papel); }
.portada .titular{ color:#fff; }
.portada .entrada{ color:rgba(255,255,255,.92); max-width:40ch; }
/* el rótulo cae sobre cielo claro: el gris acero no se lee ahí */
.portada .rotulo{ color:rgba(255,255,255,.86); }
.portada__pie{ display:flex; flex-wrap:wrap; align-items:center; gap:1.25rem 2rem; margin-top:clamp(1.75rem,3vw,2.5rem); }
.portada__sitio{
  font-family:var(--titular); font-size:.7rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.78);
}

/* -------------------------------------------------------------------------
   Cifras
   ------------------------------------------------------------------------- */
.cifras{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:clamp(1.5rem,3vw,3rem); }
.cifra__num{
  display:block;
  font-family:var(--titular); font-weight:700;
  font-size:clamp(2.6rem,5.5vw,4.4rem);
  letter-spacing:-.04em; line-height:1;
  color:var(--acero);
}
.banda--marino .cifra__num{ color:#fff; }
.cifra__pie{
  display:block; margin-top:.6rem;
  font-family:var(--titular); font-size:.66rem; font-weight:500;
  letter-spacing:.17em; text-transform:uppercase; color:var(--gris);
}
.banda--marino .cifra__pie,
.pie .cifra__pie{ color:var(--gris-alto); }

/* -------------------------------------------------------------------------
   Amenidades
   ------------------------------------------------------------------------- */
.amenidades{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:0; border-top:1px solid var(--linea); }
.amenidades li{
  display:flex; align-items:center; gap:.9rem;
  padding:1.15rem .25rem;
  border-bottom:1px solid var(--linea);
  font-family:var(--titular); font-size:.92rem; font-weight:500; letter-spacing:-.01em;
}
.amenidades li::before{
  content:""; flex:0 0 auto; width:13px; height:13px;
  background:var(--acero);
  clip-path:polygon(0 38%, 50% 0, 100% 38%, 100% 62%, 50% 24%, 0 62%);   /* un galón */
}
.banda--marino .amenidades{ border-color:#2A333E; }
.banda--marino .amenidades li{ border-color:#2A333E; }
.banda--marino .amenidades li::before{ background:var(--gris-alto); }

/* -------------------------------------------------------------------------
   Mosaico de imágenes
   ------------------------------------------------------------------------- */
.mosaico{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:clamp(.6rem,1.4vw,1.1rem); }
.toma{ position:relative; overflow:hidden; background:var(--papel-3); }
.toma img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--curva); }
.toma:hover img{ transform:scale(1.03); }

.toma--llena{ grid-column:1 / -1; aspect-ratio:16/9; }
.toma--ancha{ grid-column:span 8; aspect-ratio:3/2; }
.toma--tercio{ grid-column:span 4; aspect-ratio:3/4; }
.toma--media{ grid-column:span 6; aspect-ratio:4/3; }
@media (max-width:760px){
  .toma--ancha,.toma--tercio,.toma--media{ grid-column:1 / -1; }
  .toma--tercio{ aspect-ratio:4/5; }
}

/* -------------------------------------------------------------------------
   Galería
   ------------------------------------------------------------------------- */
.galeria{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr)); gap:clamp(.6rem,1.4vw,1.1rem); }
.galeria .toma{ aspect-ratio:3/2; }

/* -------------------------------------------------------------------------
   Ubicación
   ------------------------------------------------------------------------- */
.tiempos{ list-style:none; margin:0; padding:0; display:grid; gap:0; border-top:1px solid var(--linea); }
.tiempos li{ display:flex; align-items:baseline; gap:1rem; padding:1.05rem .25rem; border-bottom:1px solid var(--linea); }
.tiempos b{ font-family:var(--titular); font-size:1.5rem; font-weight:700; letter-spacing:-.03em; color:var(--acero); flex:0 0 auto; min-width:2.6em; }
.tiempos span{ color:var(--gris); }

/* -------------------------------------------------------------------------
   Formulario
   ------------------------------------------------------------------------- */
.forma{ display:grid; gap:clamp(1.3rem,2.4vw,1.8rem); }
@media (min-width:720px){ .forma{ grid-template-columns:1fr 1fr; } .forma .campo--ancho{ grid-column:1 / -1; } }
.campo{ display:block; }
.campo > span{
  display:block; margin-bottom:.6rem;
  font-family:var(--titular); font-size:.66rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gris);
}
.campo input,.campo select,.campo textarea{
  width:100%; font-family:var(--cuerpo); font-size:1rem; color:var(--tinta);
  background:#fff; border:1px solid var(--linea-2); border-radius:0;
  padding:.85em .95em; appearance:none;
  transition:border-color .3s var(--curva);
}
.campo textarea{ resize:vertical; min-height:7.5em; line-height:1.55; }
.campo input:focus,.campo select:focus,.campo textarea:focus{ outline:none; border-color:var(--acero); }
.campo input::placeholder,.campo textarea::placeholder{ color:#9BA1AC; }
/* Broker o cliente: dos opciones grandes, no un desplegable escondido */
.eleccion{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
.eleccion label{ position:relative; }
.eleccion input{ position:absolute; opacity:0; width:0; height:0; }
.eleccion span{
  display:block; text-align:center; cursor:pointer;
  padding:.95em .6em; border:1px solid var(--linea-2); background:#fff;
  font-family:var(--titular); font-size:.7rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  transition:border-color .25s var(--curva), background .25s var(--curva), color .25s var(--curva);
}
.eleccion input:checked + span{ background:var(--acero); border-color:var(--acero); color:var(--papel); }
.eleccion input:focus-visible + span{ outline:2px solid var(--acero); outline-offset:2px; }

.acuerdo{ display:flex; align-items:flex-start; gap:.8rem; font-size:.88rem; line-height:1.5; color:var(--gris); }
.acuerdo input{ flex:0 0 auto; width:1rem; height:1rem; margin-top:.3em; accent-color:var(--acero); }
.acuerdo a{ color:var(--acero); }
.trampa{ position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; }
.aviso{
  font-family:var(--titular); font-size:.78rem; letter-spacing:.02em; line-height:1.6;
  padding:1em 1.2em; border-left:3px solid var(--acero); background:var(--papel-2);
}
.aviso[hidden]{ display:none; }
.aviso--mal{ border-color:#9A2C2C; color:#7E2424; }

/* -------------------------------------------------------------------------
   Pie
   ------------------------------------------------------------------------- */
.pie{ background:var(--marino); color:var(--papel); }
.pie a{ color:var(--papel); text-decoration:none; }
.pie__arriba{ display:grid; gap:clamp(2.5rem,5vw,4rem); padding-block:clamp(3.5rem,7vw,5.5rem); }
@media (min-width:880px){ .pie__arriba{ grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1.2fr); } }
.pie__marca img{ height:clamp(52px,6vw,68px); width:auto; }
.pie__lista{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.pie__lista a{ font-size:.95rem; border-bottom:1px solid transparent; transition:border-color .3s var(--curva); overflow-wrap:anywhere; }
.pie__lista a:hover{ border-bottom-color:var(--papel); }
.pie__abajo{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem 2rem;
  padding-block:1.6rem; border-top:1px solid #2A333E;
  font-family:var(--titular); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gris-alto);
}
.pie__abajo a{ color:var(--gris-alto); }
.pie__abajo a:hover{ color:var(--papel); }

.redes{ display:flex; gap:1rem; }
.redes a{ display:flex; width:38px; height:38px; align-items:center; justify-content:center; border:1px solid rgba(250,250,250,.3); transition:background .3s var(--curva), border-color .3s var(--curva); }
.redes a:hover{ background:rgba(250,250,250,.14); border-color:var(--papel); }
.redes svg{ width:17px; height:17px; }

/* -------------------------------------------------------------------------
   Revelados
   ------------------------------------------------------------------------- */
.sube{ opacity:0; transform:translateY(22px); transition:opacity .9s var(--curva), transform .9s var(--curva); }
.sube.ya{ opacity:1; transform:none; }
/* El recorte va en el hijo: un elemento recortado del todo no cuenta como
   visible para IntersectionObserver y no se revelaría nunca. */
.cortina > *{ clip-path:inset(0 0 100% 0); transition:clip-path 1.05s var(--curva); }
.cortina.ya > *{ clip-path:inset(0 0 0 0); }
[data-demora="1"]{ transition-delay:.08s; }
[data-demora="2"]{ transition-delay:.16s; }
[data-demora="3"]{ transition-delay:.24s; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .sube,.cortina > *{ opacity:1 !important; transform:none !important; clip-path:none !important; transition:none !important; }
  .toma img{ transition:none; }
}

/* -------------------------------------------------------------------------
   Lupa
   ------------------------------------------------------------------------- */
.ampliable{ cursor:zoom-in; }
.lupa{
  position:fixed; inset:0; z-index:200; display:flex; flex-direction:column;
  background:rgba(8,12,16,.95);
  opacity:0; visibility:hidden;
  transition:opacity .3s var(--curva), visibility 0s linear .3s;
}
.lupa[data-abierta]{ opacity:1; visibility:visible; transition:opacity .3s var(--curva), visibility 0s linear 0s; }
.lupa__escena{ flex:1 1 auto; min-height:0; overflow:auto; display:flex; align-items:center; justify-content:center; padding:clamp(.75rem,2vw,2rem); -webkit-overflow-scrolling:touch; }
.lupa__escena img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; cursor:zoom-in; user-select:none; -webkit-user-drag:none; }
.lupa[data-acercada] .lupa__escena{ align-items:flex-start; justify-content:flex-start; }
.lupa[data-acercada] .lupa__escena img{ max-width:none; max-height:none; margin:auto; cursor:grab; }
.lupa[data-acercada] .lupa__escena img:active{ cursor:grabbing; }
.lupa__barra{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:clamp(.75rem,2vw,1.2rem) clamp(1rem,2.5vw,2rem); border-top:1px solid rgba(250,250,250,.16); }
.lupa__pie{ font-family:var(--titular); font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; color:var(--gris-alto); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lupa__mandos{ display:flex; align-items:center; gap:.5rem; flex:0 0 auto; }
.lupa__boton{ display:flex; align-items:center; justify-content:center; width:40px; height:40px; padding:0; background:transparent; border:1px solid rgba(250,250,250,.42); color:#fff; font-family:var(--titular); font-size:.9rem; line-height:1; cursor:pointer; transition:background .25s var(--curva), border-color .25s var(--curva); }
.lupa__boton:hover{ background:rgba(250,250,250,.16); border-color:#fff; }
.lupa__boton:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.lupa__cuenta{ font-family:var(--titular); font-size:.66rem; letter-spacing:.1em; color:#fff; min-width:4.6em; text-align:center; }
@media (max-width:560px){
  .lupa__barra{ flex-direction:column; align-items:stretch; gap:.7rem; }
  .lupa__pie{ white-space:normal; text-align:center; }
  .lupa__mandos{ justify-content:center; }
}
body.con-lupa{ overflow:hidden; }

/* -------------------------------------------------------------------------
   Utilidades
   ------------------------------------------------------------------------- */
.apilado{ display:grid; gap:clamp(1.4rem,2.8vw,2.2rem); align-content:start; }
.apilado--junto{ gap:1rem; }
.regla{ border:0; border-top:1px solid var(--linea); margin:0; }
.banda--marino .regla,
.pie .regla{ border-color:#2A333E; }
.solo-lectores{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.saltar{
  position:fixed; left:0; top:0; z-index:100; transform:translateY(-130%);
  background:var(--acero); color:#fff; padding:.9em 1.4em;
  font-family:var(--titular); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; text-decoration:none;
  transition:transform .2s var(--curva);
}
.saltar:focus{ transform:none; }

.flotante{
  position:fixed; right:clamp(1rem,2.5vw,2rem); bottom:clamp(1rem,2.5vw,2rem); z-index:55;
  display:flex; align-items:center; justify-content:center;
  width:54px; height:54px; border-radius:50%;
  background:#25D366; color:#fff; text-decoration:none;
  box-shadow:0 2px 18px rgba(13,20,26,.3);
  transition:transform .3s var(--curva);
}
.flotante:hover{ transform:translateY(-3px); }
.flotante svg{ width:27px; height:27px; }