/* ══════════════════════════════════════════════════════════════════
Evamar · landing pública
------------------------------------------------------------------
Dirección: lujo contenido. La foto manda, el tipo respira y el color
se guarda para dos cosas — el teal de la marca y un dorado que sólo
aparece donde hay que tocar. Nada de sombras de plantilla, nada de
degradados decorativos: la única profundidad viene de la fotografía.
El teal (#035350) y el dorado (#CBB74D) están tomados del CSS vivo de
evamar.mx: es la marca del cliente, no una aproximación nuestra.
══════════════════════════════════════════════════════════════════ */
:root{
--tinta:#0A1614; /* teal tan oscuro que lee como negro */
--teal:#035350;
--teal-hondo:#023A38;
--teal-claro:#0E7A73;
--oro:#CBB74D;
--oro-suave:#E4D79A;
--hueso:#F7F4ED; /* papel cálido, no blanco de pantalla */
--arena:#E6DCCB;
--gris:#6B7672;
--linea:rgba(10,22,20,.12);
--linea-clara:rgba(255,255,255,.18);
--display:'Fraunces',ui-serif,Georgia,'Times New Roman',serif;
--texto:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
--borde:2px;
--transicion:.6s cubic-bezier(.16,1,.3,1);
--ancho:1280px;
--gutter:clamp(1.25rem,5vw,5rem);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5rem}
body{
margin:0;background:var(--hueso);color:var(--tinta);
font-family:var(--texto);font-size:clamp(1rem,.96rem + .2vw,1.075rem);
line-height:1.65;font-weight:400;
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:400;line-height:1.06;
letter-spacing:-.015em;font-optical-sizing:auto}
p{margin:0 0 1.1em}
:focus-visible{outline:2px solid var(--oro);outline-offset:3px}
/* Selección con la marca. El azul de sistema sobre una foto a pantalla
completa se ve como un error de la página, no como una selección. */
::selection{background:var(--oro-suave);color:var(--tinta)}
.saltar{position:absolute;left:-9999px;top:0;background:var(--teal);color:#fff;
padding:.75rem 1.25rem;z-index:1000}
.saltar:focus{left:.5rem;top:.5rem}
/* ── Retícula ───────────────────────────────────────────────────── */
.env{width:100%;max-width:var(--ancho);margin-inline:auto;padding-inline:var(--gutter)}
.seccion{padding-block:clamp(4.5rem,10vw,9rem)}
.seccion--hueso{background:var(--hueso)}
.seccion--arena{background:var(--arena)}
.seccion--tinta{background:var(--tinta);color:var(--hueso)}
.seccion--teal{background:var(--teal-hondo);color:var(--hueso)}
/* Etiqueta versalita: la firma tipográfica de la página. */
.kicker{
font-family:var(--texto);font-size:.7rem;font-weight:500;
letter-spacing:.22em;text-transform:uppercase;color:var(--teal);
margin:0 0 1.25rem;display:flex;align-items:center;gap:.75rem;
}
.kicker::before{content:"";width:2rem;height:1px;background:currentColor;opacity:.5}
.seccion--tinta .kicker,.seccion--teal .kicker{color:var(--oro)}
.titulo-x{font-size:clamp(2.1rem,1.1rem + 4.2vw,4.25rem);white-space:pre-line}
.titulo-m{font-size:clamp(1.75rem,1.1rem + 2.6vw,3rem)}
.titulo-s{font-size:clamp(1.3rem,1.05rem + 1.1vw,1.85rem)}
.plomo{font-size:clamp(1.05rem,1rem + .35vw,1.28rem);line-height:1.6;
color:var(--gris);max-width:62ch}
.seccion--tinta .plomo,.seccion--teal .plomo{color:rgba(247,244,237,.72)}
/* ── Botones ────────────────────────────────────────────────────── */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
padding:.95rem 1.9rem;border:1px solid transparent;border-radius:999px;
font-size:.82rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase;
cursor:pointer;transition:background var(--transicion),color var(--transicion),
border-color var(--transicion),transform .3s ease;
text-align:center;
}
.btn:hover{transform:translateY(-1px)}
.btn-oro{background:var(--oro);color:var(--tinta);border-color:var(--oro)}
.btn-oro:hover{background:var(--oro-suave);border-color:var(--oro-suave)}
.btn-linea{border-color:currentColor;color:inherit;background:transparent}
.btn-linea:hover{background:currentColor;color:var(--teal-hondo)}
.btn-teal{background:var(--teal);color:#fff;border-color:var(--teal)}
.btn-teal:hover{background:var(--teal-hondo);border-color:var(--teal-hondo)}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}
/* Enlace subrayado que crece — el gesto de "seguir leyendo". */
.enlace{
display:inline-flex;align-items:center;gap:.5rem;font-size:.8rem;font-weight:500;
letter-spacing:.12em;text-transform:uppercase;padding-bottom:.35rem;
border-bottom:1px solid currentColor;
}
.enlace svg{transition:transform var(--transicion)}
.enlace:hover svg{transform:translateX(4px)}
/* ── Cabecera ───────────────────────────────────────────────────── */
.cab{
position:fixed;inset:0 0 auto;z-index:100;
transition:background var(--transicion),box-shadow var(--transicion),transform var(--transicion);
}
.cab-in{
max-width:var(--ancho);margin-inline:auto;padding:1.25rem var(--gutter);
display:flex;align-items:center;gap:2rem;
}
.cab-logo{flex:0 0 auto;display:block;line-height:0}
.cab-logo img{width:clamp(104px,10vw,132px);height:auto}
.logo-t{display:none}
.cab-nav{display:flex;gap:2rem;margin-inline:auto;font-size:.78rem;font-weight:500;
letter-spacing:.13em;text-transform:uppercase;color:#fff}
.cab-nav a{position:relative;padding-block:.25rem;opacity:.88}
.cab-nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;
background:currentColor;transition:width var(--transicion)}
.cab-nav a:hover{opacity:1}
.cab-nav a:hover::after{width:100%}
.cab-fin{display:flex;align-items:center;gap:1rem;margin-left:auto}
.cab-idioma{font-size:.72rem;font-weight:600;letter-spacing:.14em;color:#fff;
opacity:.8;border:1px solid var(--linea-clara);border-radius:999px;padding:.4rem .7rem}
.cab-idioma:hover{opacity:1}
.cab-cta{padding:.7rem 1.35rem;font-size:.72rem}
.cab-menu{display:none;background:none;border:0;padding:.5rem;cursor:pointer}
.cab-menu span{display:block;width:22px;height:1.5px;background:#fff;margin:5px 0;
transition:transform var(--transicion),opacity var(--transicion)}
/* Al hacer scroll el fondo entra y todo lo blanco se vuelve tinta. */
.cab.solida{background:var(--hueso);box-shadow:0 1px 0 var(--linea)}
.cab.solida .cab-nav,.cab.solida .cab-idioma{color:var(--tinta)}
.cab.solida .cab-idioma{border-color:var(--linea)}
.cab.solida .logo-b{display:none}
.cab.solida .logo-t{display:block}
.cab.solida .cab-menu span{background:var(--tinta)}
.cab.oculta{transform:translateY(-100%)}
/* Páginas SIN hero oscuro (el FAQ). La cabecera nace transparente con texto
blanco porque arriba siempre hay una foto — y en una página que empieza en
papel, el menú entero quedaba blanco sobre hueso: invisible hasta que el
visitante hiciera scroll. No se puede resolver poniendo `solida` desde el
servidor porque el JS la quita al volver arriba; tiene que ser CSS. */
body.sin-hero .cab{background:var(--hueso);box-shadow:0 1px 0 var(--linea)}
body.sin-hero .cab-nav,body.sin-hero .cab-idioma{color:var(--tinta)}
body.sin-hero .cab-idioma{border-color:var(--linea)}
body.sin-hero .logo-b{display:none}
body.sin-hero .logo-t{display:block}
body.sin-hero .cab-menu span{background:var(--tinta)}
.menu-movil{display:none;flex-direction:column;gap:.25rem;padding:1rem var(--gutter) 2rem;
background:var(--hueso);border-top:1px solid var(--linea)}
.menu-movil a{padding:.85rem 0;border-bottom:1px solid var(--linea);
font-size:.9rem;letter-spacing:.08em;text-transform:uppercase}
/* ── Hero ───────────────────────────────────────────────────────── */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;
color:#fff;overflow:hidden;isolation:isolate}
.hero-foto{position:absolute;inset:0;z-index:-2}
.hero-foto img{width:100%;height:100%;object-fit:cover;
animation:deriva 26s ease-in-out infinite alternate}
@keyframes deriva{from{transform:scale(1.04) translate3d(0,0,0)}
to{transform:scale(1.12) translate3d(-1.5%,-1%,0)}}
.hero::after{
content:"";position:absolute;inset:0;z-index:-1;
/* Dos capas: una vertical que asegura el contraste del titular abajo y de
la cabecera arriba, y una lateral que asienta el texto sobre el lado
izquierdo. Los valores están calculados para que el párrafo pase AA sobre
la foto más clara del catálogo (la de la alberca a mediodía) — con una
capa más suave el texto se leía bien en un monitor y se perdía en otro. */
background:
linear-gradient(180deg,rgba(10,22,20,.58) 0%,rgba(10,22,20,.14) 30%,rgba(10,22,20,.22) 50%,rgba(10,22,20,.88) 100%),
linear-gradient(90deg,rgba(2,58,56,.52) 0%,rgba(2,58,56,.06) 58%,rgba(2,58,56,0) 100%);
}
.hero-in{width:100%;max-width:var(--ancho);margin-inline:auto;
padding:0 var(--gutter) clamp(2.5rem,7vh,5rem)}
.hero .kicker{color:var(--oro-suave)}
.hero h1{font-size:clamp(2.6rem,1rem + 7vw,6.5rem);font-weight:300;
letter-spacing:-.03em;white-space:pre-line;max-width:16ch;
text-shadow:0 2px 40px rgba(0,0,0,.28)}
.hero-bajada{max-width:46ch;margin:1.6rem 0 2.4rem;font-size:clamp(1rem,.95rem + .4vw,1.2rem);
color:rgba(255,255,255,.9);line-height:1.65}
.hero-acciones{display:flex;flex-wrap:wrap;gap:.85rem}
.hero-abajo{position:absolute;right:var(--gutter);bottom:clamp(2.5rem,7vh,5rem);
display:flex;align-items:center;gap:.75rem;font-size:.68rem;letter-spacing:.2em;
text-transform:uppercase;opacity:.7;writing-mode:vertical-rl}
.hero-abajo::after{content:"";width:1px;height:3rem;background:currentColor;
animation:baja 2.4s ease-in-out infinite}
@keyframes baja{0%,100%{transform:scaleY(.35);transform-origin:top}
50%{transform:scaleY(1);transform-origin:top}}
/* ── Buscador de disponibilidad ─────────────────────────────────── */
.buscador{position:relative;z-index:5;margin-top:-3.5rem}
.buscador-caja{
background:var(--hueso);border:1px solid var(--linea);
box-shadow:0 24px 60px -30px rgba(10,22,20,.4);
padding:clamp(1.5rem,3vw,2.25rem);
}
.buscador-cab{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1.25rem;
margin-bottom:1.5rem}
.buscador-cab h2{font-size:clamp(1.2rem,1rem + .8vw,1.6rem)}
.buscador-cab p{margin:0;font-size:.82rem;color:var(--gris)}
.buscador-campos{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;align-items:end}
.campo{display:flex;flex-direction:column;gap:.4rem}
.campo label{font-size:.68rem;font-weight:600;letter-spacing:.16em;
text-transform:uppercase;color:var(--gris)}
.campo input,.campo select,.campo textarea{
width:100%;padding:.85rem .9rem;border:1px solid var(--linea);border-radius:0;
background:#fff;font:inherit;font-size:.95rem;color:var(--tinta);
transition:border-color var(--transicion);
}
.campo input:focus,.campo select:focus,.campo textarea:focus{
border-color:var(--teal);outline:none}
.campo textarea{resize:vertical;min-height:5.5rem}
.resultados{margin-top:1.75rem;display:none}
.resultados.visible{display:block}
.resultados-lista{display:grid;gap:.6rem}
.res{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1rem;
padding:.9rem 1rem;background:#fff;border:1px solid var(--linea)}
.res-nombre{font-family:var(--display);font-size:1.05rem;flex:1 1 14rem}
.res-meta{font-size:.8rem;color:var(--gris)}
.res-precio{font-family:var(--display);font-size:1.15rem;color:var(--teal);
white-space:nowrap;text-align:right;line-height:1.25}
.res-precio small{display:block;font-family:var(--texto);font-size:.68rem;
color:var(--gris);letter-spacing:.08em;text-transform:uppercase}
.res-agotado{font-size:.78rem;color:#9a5b4c;letter-spacing:.06em;text-transform:uppercase}
.res-nota{margin-top:.9rem;font-size:.78rem;color:var(--gris)}
.cargando{font-size:.85rem;color:var(--gris);letter-spacing:.08em}
/* ── Intro editorial ────────────────────────────────────────────── */
.dos-col{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
gap:clamp(2rem,6vw,6rem);align-items:start}
.dos-col--sticky > :first-child{position:sticky;top:7rem}
.intro-texto p{font-size:clamp(1.05rem,1rem + .4vw,1.22rem);line-height:1.72}
.intro-texto p:first-of-type::first-letter{
font-family:var(--display);font-size:3.6em;line-height:.8;float:left;
padding:.08em .12em 0 0;color:var(--teal)}
.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(7rem,1fr));
gap:1.5rem;margin-top:3rem;padding-top:2rem;border-top:1px solid var(--linea)}
.cifra b{display:block;font-family:var(--display);font-size:clamp(1.9rem,1.4rem + 1.6vw,2.9rem);
font-weight:300;color:var(--teal);line-height:1}
.cifra span{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
/* ── Departamentos ──────────────────────────────────────────────── */
.depas{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,20rem),1fr));
gap:clamp(1.5rem,3vw,2.75rem);margin-top:clamp(2.5rem,5vw,4rem)}
.depa{display:flex;flex-direction:column;background:transparent;position:relative}
.depa-foto{position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--arena)}
.depa-foto img{width:100%;height:100%;object-fit:cover;
transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
.depa:hover .depa-foto img{transform:scale(1.05)}
.depa-etiqueta{position:absolute;left:1rem;top:1rem;background:rgba(247,244,237,.94);
padding:.35rem .7rem;font-size:.64rem;font-weight:600;letter-spacing:.16em;
text-transform:uppercase;color:var(--teal)}
.depa-cuerpo{padding-top:1.25rem;display:flex;flex-direction:column;flex:1}
.depa h3{font-size:clamp(1.15rem,1.05rem + .45vw,1.45rem);margin-bottom:.5rem}
.depa h3 a::after{content:"";position:absolute;inset:0}
.depa-meta{display:flex;flex-wrap:wrap;gap:.35rem .9rem;font-size:.78rem;
color:var(--gris);margin-bottom:.9rem}
.depa-meta span{display:inline-flex;align-items:center;gap:.35rem}
.depa-resumen{font-size:.92rem;color:var(--gris);line-height:1.6;margin-bottom:1.1rem;
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.depa-pie{margin-top:auto;display:flex;align-items:baseline;justify-content:space-between;
gap:1rem;padding-top:.9rem;border-top:1px solid var(--linea)}
.depa-precio{font-family:var(--display);font-size:1.05rem;color:var(--teal)}
.depa-precio small{font-family:var(--texto);font-size:.68rem;color:var(--gris);
letter-spacing:.1em;text-transform:uppercase;display:block}
.depa-ver{font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
color:var(--teal)}
/* ── Amenidades ─────────────────────────────────────────────────── */
.amen{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,13rem),1fr));
gap:0;margin-top:clamp(2rem,4vw,3.5rem);border-top:1px solid var(--linea-clara)}
.amen li{list-style:none;display:flex;align-items:center;gap:.85rem;
padding:1.15rem .5rem;border-bottom:1px solid var(--linea-clara);font-size:.92rem}
.amen svg{flex:0 0 auto;color:var(--oro);opacity:.9}
/* ── Fraccional ─────────────────────────────────────────────────── */
.pasos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
gap:clamp(1.5rem,3vw,3rem);margin-top:clamp(2.5rem,5vw,4rem)}
.paso{border-top:1px solid var(--linea-clara);padding-top:1.5rem}
.paso b{display:block;font-family:var(--display);font-size:2.4rem;font-weight:300;
color:var(--oro);line-height:1;margin-bottom:.9rem}
.paso h3{font-size:1.1rem;margin-bottom:.6rem}
.paso p{font-size:.92rem;color:rgba(247,244,237,.72);margin:0}
.aviso{margin-top:clamp(2.5rem,5vw,3.5rem);padding:1.25rem 1.5rem;
border-left:2px solid var(--oro);background:rgba(255,255,255,.05);
font-size:.88rem;color:rgba(247,244,237,.82);max-width:70ch}
.aviso strong{color:var(--oro-suave);font-weight:500}
/* ── Destino ────────────────────────────────────────────────────── */
.destino{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
gap:clamp(1.5rem,3vw,2.5rem);margin-top:clamp(2.5rem,5vw,4rem)}
.destino article{padding-top:1.4rem;border-top:1px solid var(--linea)}
.destino h3{font-size:1.15rem;margin-bottom:.6rem}
.destino p{font-size:.92rem;color:var(--gris);margin:0}
.tabla-llegar{width:100%;border-collapse:collapse;margin-top:2.5rem;font-size:.9rem}
.tabla-llegar th,.tabla-llegar td{text-align:left;padding:.85rem 1rem .85rem 0;
border-bottom:1px solid var(--linea)}
.tabla-llegar th{font-size:.68rem;font-weight:600;letter-spacing:.16em;
text-transform:uppercase;color:var(--gris)}
.tabla-llegar td:not(:first-child){color:var(--gris);white-space:nowrap}
/* ── FAQ ────────────────────────────────────────────────────────── */
.faq{max-width:56rem;margin-top:clamp(2rem,4vw,3rem)}
.faq details{border-bottom:1px solid var(--linea)}
.faq summary{
display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
padding:1.4rem 0;cursor:pointer;list-style:none;
font-family:var(--display);font-size:clamp(1.02rem,1rem + .3vw,1.25rem);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:0 0 auto;width:.7rem;height:.7rem;
border-right:1px solid var(--teal);border-bottom:1px solid var(--teal);
transform:rotate(45deg);transition:transform var(--transicion);margin-bottom:.3rem}
.faq details[open] summary::after{transform:rotate(-135deg);margin-bottom:-.2rem}
.faq-r{padding:0 3rem 1.6rem 0;color:var(--gris);font-size:.98rem;max-width:64ch}
/* ── Contacto / formulario ──────────────────────────────────────── */
.contacto{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
gap:clamp(2rem,5vw,5rem);align-items:start}
/* El `color` NO es decorativo: la caja se pinta clara pero vive dentro de
secciones oscuras (.seccion--tinta / --teal), que heredan texto hueso. Sin
este reset, el único texto sin color propio del formulario —la etiqueta del
check "Quiero agendar una visita"— quedaba hueso sobre hueso: invisible, y
con él el acceso a agendar la cita. Ningún test lo habría visto. */
.form-caja{background:var(--hueso);color:var(--tinta);
padding:clamp(1.5rem,3vw,2.5rem);border:1px solid var(--linea)}
.form-rejilla{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.form-rejilla .ancho{grid-column:1/-1}
.opciones{display:flex;gap:.6rem;flex-wrap:wrap}
.opcion{flex:1 1 10rem;position:relative}
.opcion input{position:absolute;opacity:0;inset:0;cursor:pointer}
.opcion span{display:block;padding:.85rem 1rem;border:1px solid var(--linea);
text-align:center;font-size:.88rem;transition:all var(--transicion);cursor:pointer}
.opcion input:checked + span{border-color:var(--teal);background:var(--teal);color:#fff}
.opcion input:focus-visible + span{outline:2px solid var(--oro);outline-offset:2px}
.check{display:flex;align-items:center;gap:.7rem;font-size:.92rem;cursor:pointer;
padding:.9rem 0;border-top:1px solid var(--linea);margin-top:.3rem}
.check input{width:1.05rem;height:1.05rem;accent-color:var(--teal);cursor:pointer}
.cita-campos{display:none;grid-template-columns:1fr 1fr;gap:1.1rem}
.cita-campos.visible{display:grid}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-legal{font-size:.75rem;color:var(--gris);margin:1.1rem 0 0}
.form-msj{margin-top:1rem;padding:.9rem 1.1rem;font-size:.9rem;display:none}
.form-msj.error{display:block;background:#fdf0ec;border-left:2px solid #b4573f;color:#8c3f2c}
/* La confirmación hereda la MISMA caja del formulario. Antes era un bloque
suelto: al ocultar el form la columna se encogía a la altura del texto, el
layout daba un salto y el mensaje acababa detrás de la cabecera fija —
justo el momento en que el visitante necesita leer que su cita quedó. */
.form-ok{display:none;text-align:center;background:var(--hueso);color:var(--tinta);
border:1px solid var(--linea);padding:clamp(2.5rem,6vw,4rem) 1.5rem;
min-height:22rem;place-content:center}
.form-ok.visible{display:grid}
.form-ok h3{font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem);margin-bottom:.75rem;color:var(--teal)}
.form-ok p{color:var(--gris);max-width:34ch;margin-inline:auto}
.form-ok .marca-ok{width:3rem;height:3rem;margin:0 auto 1.5rem;border-radius:999px;
border:1px solid var(--teal);display:grid;place-items:center;color:var(--teal)}
.contacto-lado h2{margin-bottom:1.25rem}
.contacto-datos{margin-top:2.5rem;padding-top:2rem;border-top:1px solid var(--linea-clara);
display:grid;gap:1.25rem}
.contacto-datos div{display:grid;gap:.2rem}
.contacto-datos dt{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
color:var(--oro)}
.contacto-datos dd{margin:0;font-size:.98rem}
/* Tarjeta de ubicación. Antes aquí había un mapa embebido de OpenStreetMap y
se cambió a propósito: un iframe de un tercero puede tardar, fallar o ser
bloqueado, y un recuadro vacío en la sección de contacto se lee como una
página rota. Esto siempre se pinta, pesa cero y además deja las
coordenadas en TEXTO — que es justo lo que un modelo de lenguaje puede
citar cuando alguien le pregunta dónde está el desarrollo. */
.ubica{margin-top:2rem;border:1px solid var(--linea-clara);padding:1.5rem}
.ubica-coord{font-family:var(--texto);font-size:.78rem;letter-spacing:.06em;
color:var(--oro);margin:0 0 .35rem}
.ubica-dir{font-size:.95rem;line-height:1.7;margin:0 0 1.25rem}
.ubica-btns{display:flex;flex-wrap:wrap;gap:.6rem}
.ubica-btns a{display:inline-flex;align-items:center;gap:.45rem;
padding:.6rem 1.1rem;border:1px solid var(--linea-clara);border-radius:999px;
font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
transition:background var(--transicion),border-color var(--transicion)}
.ubica-btns a:hover{background:var(--oro);border-color:var(--oro);color:var(--tinta)}
.mapa{margin-top:.75rem;aspect-ratio:16/9;border:1px solid var(--linea-clara);
filter:grayscale(.4) contrast(.95);transition:filter var(--transicion)}
.mapa:hover{filter:none}
.mapa iframe{width:100%;height:100%;border:0;display:block}
/* ── Ficha de departamento ──────────────────────────────────────── */
.ficha-hero{position:relative;min-height:70svh;display:flex;align-items:flex-end;
color:#fff;overflow:hidden;isolation:isolate}
.ficha-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.ficha-hero::after{content:"";position:absolute;inset:0;z-index:-1;
background:linear-gradient(180deg,rgba(10,22,20,.5),rgba(10,22,20,.15) 40%,rgba(10,22,20,.8))}
.ficha-hero-in{width:100%;max-width:var(--ancho);margin-inline:auto;
padding:0 var(--gutter) clamp(2rem,5vh,3.5rem)}
.ficha-hero h1{font-size:clamp(2rem,1.2rem + 3.2vw,3.6rem);font-weight:300;max-width:20ch}
.migas{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
opacity:.8;margin-bottom:1rem}
.migas a:hover{text-decoration:underline}
.ficha-datos{display:flex;flex-wrap:wrap;gap:1.5rem 2.5rem;margin-top:1.5rem;
padding-top:1.5rem;border-top:1px solid var(--linea-clara)}
.ficha-datos div{display:grid;gap:.15rem}
.ficha-datos dt{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;opacity:.7}
.ficha-datos dd{margin:0;font-family:var(--display);font-size:1.3rem}
/* `user-select:none` en lo que sólo se PULSA ────────────────────────
Un doble clic —o un arrastre de dos píxeles al hacer clic— selecciona el
, y el navegador pinta de azul su CAJA COMPLETA: en el visor a
pantalla completa eso son dos bandas azules a los lados de la foto y toda
la imagen lavada. Se ve como un fallo de render, y es sólo una selección.
`-webkit-user-drag:none` en las fotos evita además que arrastrarlas inicie
el drag del archivo. */
.galeria,.visor,.cal,.res-dlg,.puertas,.visor-tira{
-webkit-user-select:none;user-select:none}
.galeria img,.visor img,.puerta img{-webkit-user-drag:none;user-drag:none}
/* En el diálogo de reserva el texto de los campos SÍ se selecciona: es un
formulario, no un lienzo. */
.res-dlg input,.res-dlg textarea{-webkit-user-select:text;user-select:text}
/* ── Mosaico de fotos ───────────────────────────────────────────────
Rejilla de celdas CUADRADAS con una foto grande de 2×2 cada nueve.
Antes la primera ocupaba `span 2` con la misma proporción 3/2 que las
demás: al ser el doble de ancha era más alta que sus vecinas, el grid
no tenía con qué rellenar y quedaba un hueco blanco enorme a su
derecha. Con celdas cuadradas, `grid-row: span 2` en la grande y
`auto-flow: dense`, el bloque de nueve encaja exacto en 4, 3 y 2
columnas — sin huecos en ningún ancho. */
.galeria{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;
grid-auto-flow:dense;margin-top:clamp(2rem,4vw,3rem)}
.galeria a{display:block;position:relative;overflow:hidden;aspect-ratio:1;
background:var(--arena);cursor:zoom-in}
.galeria img{width:100%;height:100%;object-fit:cover;
transition:transform 1.2s cubic-bezier(.16,1,.3,1),filter var(--transicion)}
.galeria a:hover img{transform:scale(1.05)}
/* Una destacada cada nueve: 4 celdas de la grande + 8 pequeñas = 12, que
son 3 filas de 4, 4 de 3 y 6 de 2. Sin restos.
⚠ Mantiene `aspect-ratio:1`. Con `auto` la altura la fijaba la proporción
natural de la foto (3:2), la grande medía 450×300 donde le tocaban 450×450,
las filas se descuadraban y volvía el hueco. Cuadrada, su alto es
exactamente 2 filas + el gap, porque el ancho de fila = ancho de columna. */
.galeria a:nth-child(9n+1){grid-column:span 2;grid-row:span 2}
/* La lupa: dice que la foto se abre, sin tapar la foto. */
.galeria a::after{
content:"";position:absolute;right:.6rem;bottom:.6rem;width:1.9rem;height:1.9rem;
border-radius:999px;background:rgba(10,22,20,.55) center/0.85rem no-repeat;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4.5-4.5M11 8v6M8 11h6'/%3E%3C/svg%3E");
opacity:0;transform:translateY(4px);
transition:opacity var(--transicion),transform var(--transicion);
}
.galeria a:hover::after,.galeria a:focus-visible::after{opacity:1;transform:none}
@media (max-width:1024px){ .galeria{grid-template-columns:repeat(3,1fr)} }
@media (max-width:640px){ .galeria{grid-template-columns:repeat(2,1fr);gap:.35rem} }
.reglas{display:grid;gap:1.5rem;margin-top:2rem}
.reglas h3{font-size:1.05rem;margin-bottom:.5rem}
.reglas p{font-size:.92rem;color:var(--gris);margin:0}
.otras{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));
gap:1.5rem;margin-top:2.5rem}
/* ── Pie ────────────────────────────────────────────────────────── */
.pie{background:var(--tinta);color:rgba(247,244,237,.78);
padding:clamp(3.5rem,7vw,6rem) 0 0}
.pie-in{max-width:var(--ancho);margin-inline:auto;padding-inline:var(--gutter);
display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(2rem,4vw,4rem)}
.pie h3{font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
color:var(--oro);font-family:var(--texto);margin-bottom:1.1rem}
.pie a:hover{color:var(--hueso)}
.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;font-size:.9rem}
.pie address{font-style:normal;font-size:.9rem;line-height:1.9}
.pie-lema{font-family:var(--display);font-size:1.15rem;color:rgba(247,244,237,.9);
margin:1.5rem 0 1rem;max-width:22ch}
.pie-reti{font-size:.82rem}
.pie-reti a{color:var(--oro)}
.pie-wa{display:inline-block;margin-top:1rem;font-size:.72rem;letter-spacing:.14em;
text-transform:uppercase;border-bottom:1px solid var(--oro);padding-bottom:.25rem;color:var(--oro)}
.pie-datos{color:rgba(247,244,237,.6);font-size:.85rem}
.pie-redes{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.25rem;font-size:.8rem}
.pie-legal{max-width:var(--ancho);margin:clamp(3rem,6vw,5rem) auto 0;
padding:1.5rem var(--gutter);border-top:1px solid rgba(247,244,237,.12);
display:flex;flex-wrap:wrap;gap:.5rem 2rem;justify-content:space-between;
font-size:.76rem;color:rgba(247,244,237,.5)}
/* ── Reveal al hacer scroll ─────────────────────────────────────────
Ojo con el `.js`: es lo que evita el modo de fallo más caro de esta
técnica. Si el `opacity:0` viviera en `.rev` a secas, cualquier cosa
que impida al script marcar los elementos —un error de JS, un
bloqueador, una pestaña en segundo plano que congela los callbacks—
dejaría la página EN BLANCO para una persona, con todo el contenido
presente en el HTML. La clase la pone un script inline en el ,
así que sin JS nada se esconde nunca. */
.js .rev{opacity:0;transform:translateY(22px);
transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.js .rev.dentro{opacity:1;transform:none}
/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width:1024px){
.pie-in{grid-template-columns:1fr 1fr}
.contacto,.dos-col{grid-template-columns:1fr}
.dos-col--sticky > :first-child{position:static}
.buscador-campos{grid-template-columns:1fr 1fr}
.buscador-campos > :last-child{grid-column:1/-1}
}
@media (max-width:820px){
.cab-nav{display:none}
.cab-menu{display:block}
.cab-in{gap:1rem}
.menu-movil{display:none}
.menu-movil.abierto{display:flex}
.hero-abajo{display:none}
}
@media (max-width:600px){
/* En una columna, el retrato 4/5 da tarjetas de 560 px de alto: seis
departamentos son cuatro pantallas de scroll para comparar. En apaisado
entran dos por pantalla, que es lo que hace falta para elegir. */
.depa-foto{aspect-ratio:4/3}
.buscador{margin-top:-2rem}
.buscador-campos,.form-rejilla,.cita-campos.visible{grid-template-columns:1fr}
.pie-in{grid-template-columns:1fr}
.cab-cta{display:none}
.hero h1{max-width:100%}
.btn{width:100%}
.hero-acciones{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
transition-duration:.01ms!important;scroll-behavior:auto!important}
.js .rev{opacity:1;transform:none}
.hero-foto img{animation:none}
}
@media print{
.cab,.chat,.hero-abajo,.buscador{display:none}
body{background:#fff}
}
/* ══════════════════════════════════════════════════════════════════
Calendario propio
------------------------------------------------------------------
Sustituye a ``. Los nativos no se pueden
maquillar (el panel lo pinta el sistema operativo, no la página),
no saben nada de disponibilidad y en escritorio obligan a abrir un
selector distinto para cada campo — con lo que elegir un rango de
fechas son dos viajes y ninguna vista del rango completo.
Este pinta dos meses, marca en TACHADO las noches sin inventario
(dato real de `/api/landing/calendario`) y lee la selección como un
rango: primer clic = llegada, segundo = salida.
══════════════════════════════════════════════════════════════════ */
/* El campo visible: mismo aspecto que un input, pero es un botón. */
.f-fecha{
width:100%;display:flex;align-items:center;justify-content:space-between;gap:.75rem;
height:3.25rem;padding:0 .9rem;border:1px solid var(--linea);background:#fff;
font:inherit;font-size:.95rem;color:var(--tinta);text-align:left;cursor:pointer;
transition:border-color var(--transicion);
}
.f-fecha:hover{border-color:var(--teal-claro)}
.f-fecha[aria-expanded="true"]{border-color:var(--teal)}
.f-fecha svg{flex:0 0 auto;color:var(--gris)}
.f-fecha .f-vacio{color:var(--gris)}
/* Todos los controles del buscador a la MISMA altura. El grid es
`align-items:end`, y como el input de fecha, el select y el botón traen
alturas nativas distintas, sus etiquetas quedaban a tres alturas: se veía
chueco aunque el grid estuviera bien. */
.buscador-campos .campo input,
.buscador-campos .campo select,
.buscador-campos .btn{height:3.25rem}
.buscador-campos .campo select{padding-block:0}
.cal-ancla{position:relative}
.cal{
position:absolute;z-index:60;top:calc(100% + .5rem);left:0;
background:var(--hueso);border:1px solid var(--linea);
box-shadow:0 30px 70px -35px rgba(10,22,20,.5);
padding:1.25rem;display:none;
}
.cal.abierto{display:block}
/* En pantallas donde el panel no cabe a la derecha, se ancla al borde
opuesto: un calendario que se sale de la pantalla no se puede usar. */
.cal.derecha{left:auto;right:0}
.cal-meses{display:flex;gap:2rem}
.cal-mes{min-width:16.5rem}
.cal-cab{display:flex;align-items:center;justify-content:space-between;
margin-bottom:.9rem;min-height:2rem}
.cal-titulo{font-family:var(--display);font-size:1.05rem;text-transform:capitalize;
letter-spacing:-.01em}
.cal-nav{width:2rem;height:2rem;display:grid;place-items:center;border:1px solid var(--linea);
border-radius:999px;background:#fff;cursor:pointer;color:var(--teal);
transition:background var(--transicion),border-color var(--transicion)}
.cal-nav:hover:not(:disabled){background:var(--teal);border-color:var(--teal);color:#fff}
.cal-nav:disabled{opacity:.3;cursor:not-allowed}
.cal-sem,.cal-dias{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-sem{margin-bottom:.35rem}
.cal-sem span{text-align:center;font-size:.62rem;font-weight:600;letter-spacing:.1em;
text-transform:uppercase;color:var(--gris)}
.cal-dia{
position:relative;aspect-ratio:1;display:grid;place-items:center;
border:0;background:transparent;font:inherit;font-size:.9rem;
color:var(--tinta);cursor:pointer;border-radius:0;
transition:background .18s ease,color .18s ease;
}
.cal-dia:hover:not(:disabled){background:var(--arena)}
.cal-dia:disabled{color:rgba(10,22,20,.22);cursor:not-allowed}
.cal-dia.vacio{visibility:hidden}
/* Sin inventario esa noche: tachado, no sólo gris. El gris se confunde con
"fuera del mes"; una diagonal dice "no se puede" sin leer la leyenda. */
.cal-dia.ocupado{color:rgba(10,22,20,.28);cursor:not-allowed;text-decoration:line-through;
text-decoration-thickness:1px}
.cal-dia.hoy::after{content:"";position:absolute;bottom:.28rem;width:3px;height:3px;
border-radius:999px;background:var(--oro)}
.cal-dia.rango{background:rgba(3,83,80,.10)}
.cal-dia.punta{background:var(--teal);color:#fff;font-weight:500}
.cal-dia.punta.hoy::after{background:var(--oro-suave)}
.cal-dia.pre{background:rgba(3,83,80,.06)}
.cal-pie{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem;
margin-top:1.1rem;padding-top:.9rem;border-top:1px solid var(--linea)}
.cal-resumen{font-size:.82rem;color:var(--gris);margin-right:auto}
.cal-resumen b{font-family:var(--display);font-size:1rem;color:var(--teal);font-weight:400}
.cal-leyenda{display:flex;align-items:center;gap:.4rem;font-size:.68rem;color:var(--gris);
letter-spacing:.04em}
.cal-leyenda i{width:.85rem;height:1px;background:var(--gris);display:inline-block;
transform:rotate(-12deg)}
.cal-btn{padding:.55rem 1.1rem;border:1px solid var(--linea);background:#fff;
font-size:.7rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
cursor:pointer;border-radius:999px;transition:all var(--transicion)}
.cal-btn:hover{border-color:var(--teal);color:var(--teal)}
.cal-btn.principal{background:var(--teal);border-color:var(--teal);color:#fff}
.cal-btn.principal:hover{background:var(--teal-hondo);border-color:var(--teal-hondo);color:#fff}
@media (max-width:900px){
.cal-meses{gap:1.25rem}
.cal-mes:nth-child(2){display:none}
}
@media (max-width:600px){
/* A pantalla completa: un panel flotante de 300 px en un móvil deja los
días en 38 px y se elige el 14 queriendo el 15. */
/* z-index sobre la cabecera (100) y el chat (95/110): en móvil el panel
ocupa el ancho completo y cualquiera de los dos lo cruzaría. */
.cal{position:fixed;inset:auto 0 0 0;top:auto;z-index:120;max-height:88vh;overflow:auto;
border-left:0;border-right:0;border-bottom:0;padding:1.25rem 1rem 1.5rem;
box-shadow:0 -20px 60px -20px rgba(10,22,20,.5)}
.cal-mes{min-width:0;width:100%}
.cal-dia{font-size:1rem}
/* El resumen en su propia línea y los dos botones repartidos: apilados
dejaban «Listo» solo al final y parecía otra sección. */
.cal-resumen{flex:1 1 100%;margin-right:0}
.cal-leyenda{flex:1 1 100%;order:3}
.cal-btn{flex:1 1 0;text-align:center}
}
@media (max-width:900px) and (min-width:601px){
/* Con un solo mes el panel mide ~300 px: la leyenda y los dos botones no
caben en la misma línea, así que el resumen se lleva su propio renglón. */
.cal-resumen{flex:1 1 100%;margin-right:0}
}
/* ══════════════════════════════════════════════════════════════════
Vistas separadas
------------------------------------------------------------------
La portada dejó de contener todo. Estos son los tres patrones que
aparecieron al partirla: el repartidor de la portada (`.puertas`),
las amenidades agrupadas y el índice de la galería.
══════════════════════════════════════════════════════════════════ */
/* Página actual en el menú: una línea, no un color — el nav vive sobre
fotos y un color no siempre contrasta. */
.cab-nav a.actual{opacity:1}
.cab-nav a.actual::after{width:100%}
/* ── Repartidor de la portada ───────────────────────────────────── */
.puertas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
gap:clamp(1rem,2vw,1.5rem);margin-top:clamp(2rem,4vw,3rem)}
.puerta{position:relative;display:block;overflow:hidden;aspect-ratio:4/5;
background:var(--teal-hondo)}
.puerta img{width:100%;height:100%;object-fit:cover;opacity:.62;
transition:transform 1.1s cubic-bezier(.16,1,.3,1),opacity var(--transicion)}
.puerta:hover img{transform:scale(1.06);opacity:.75}
.puerta::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(10,22,20,.1) 40%,rgba(10,22,20,.9) 100%)}
.puerta-txt{position:absolute;inset:auto 0 0 0;z-index:2;padding:1.5rem 1.25rem;
display:grid;gap:.4rem;color:#fff}
.puerta-txt b{font-family:var(--display);font-size:1.2rem;font-weight:400;line-height:1.15}
.puerta-txt em{font-style:normal;font-size:.82rem;color:rgba(255,255,255,.72);line-height:1.45}
@media (max-width:600px){
/* En una columna, 4/5 da tarjetas de 560 px: cuatro puertas son un scroll de
dos pantallas y media para lo que es un índice. Se aplanan. */
.puerta{aspect-ratio:16/10}
.puerta-txt{padding:1.15rem 1rem}
.puerta-txt b{font-size:1.05rem}
}
/* ── Amenidades agrupadas ───────────────────────────────────────── */
.amen-grupo{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
gap:clamp(1.5rem,4vw,4rem);align-items:start;
padding-block:clamp(2rem,4vw,3rem);border-top:1px solid var(--linea)}
.amen-grupo:first-child{border-top:0;padding-top:0}
.amen-grupo .amen{margin-top:0;border-top:0}
/* Sobre papel las líneas claras no se ven: se usan las oscuras. */
.amen--claro{border-top:1px solid var(--linea)!important}
.amen--claro li{border-bottom-color:var(--linea)}
.amen--claro svg{color:var(--teal)}
@media (max-width:820px){
.amen-grupo{grid-template-columns:1fr}
}
/* ── Índice de la galería ───────────────────────────────────────── */
.galeria-idx{position:sticky;top:0;z-index:50;background:var(--hueso);
border-bottom:1px solid var(--linea)}
.galeria-idx-in{display:flex;gap:1.5rem;overflow-x:auto;padding-block:.9rem;
scrollbar-width:none}
.galeria-idx-in::-webkit-scrollbar{display:none}
.galeria-idx a{white-space:nowrap;font-size:.74rem;font-weight:500;letter-spacing:.1em;
text-transform:uppercase;color:var(--gris);padding-bottom:.2rem;
border-bottom:1px solid transparent;transition:all var(--transicion)}
.galeria-idx a:hover{color:var(--teal);border-bottom-color:var(--teal)}
/* La cabecera fija mide ~5rem: sin este desplazamiento, saltar a un ancla
deja el título del departamento debajo del menú. */
[id^="g-"]{scroll-margin-top:7.5rem}
/* ══════════════════════════════════════════════════════════════════
Solicitud de reserva
------------------------------------------------------------------
El resultado del buscador se puede pedir. Diálogo nativo