/* ==========================================================================
OLDTOWN · Sistema de diseño v2
Estructura, retícula y efectos calcados de lasalaplazahotel.com
Sección de habitaciones calcada de nilsamsee.at (Rooms and Suites)
Colores y tipografías: marca L'Alcor / LALCOR + turquesa de realce
========================================================================== */
/* Fuentes autoalojadas en fonts/ (antes, @import de Google Fonts). Subconjuntos latin y
latin-ext. Jost es variable: un archivo por subconjunto cubre los pesos 200 a 600.
Jost y Marcellus, licencia SIL Open Font License 1.1. */
@font-face{font-family:"Marcellus";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/marcellus-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Marcellus";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/marcellus-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Jost";font-style:normal;font-weight:200 600;font-display:swap;src:url("fonts/jost-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Jost";font-style:normal;font-weight:200 600;font-display:swap;src:url("fonts/jost-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* --------------------------------------------------------------------------
ESCALA FLUIDA · todo el sitio va en rem y el rem depende del ancho
(mismos escalones que Lasala Plaza)
-------------------------------------------------------------------------- */
/* La escala de escritorio, subida el 16/10/2026 (0.1.53). Iba en 0.520833vw y
dejaba el texto corrido en 12,8 px a 1440 y en 13,4 en un MacBook de 14", con
la letra pequeña en 8,7: por debajo de lo que lee nadie. Peor aún, la curva
hacía un valle justo entre 1366 y 1550, donde viven todos los portátiles, así
que un MacBook enseñaba la web MÁS PEQUEÑA que un iPad.
· `0.62247vw` sale de pedir 16 px de texto corrido a 1512 px de ancho, que es
el MacBook de Guillermo: 16 / 1.7rem = 9,41 px de base, y 9,41/15,12 = 0,62247.
· El techo de 10px entra a partir de ~1606 px: de ahí para arriba el diseño
deja de crecer, así que un 1920 queda exactamente como estaba y un 2560 deja
de dibujar el texto a 22,7 px. Es el mismo criterio que un max-width.
El móvil y la tableta no se tocan: ahí ya iba bien. */
html{ font-size:clamp(7px, 0.62247vw, 10px); } /* 16px de texto @1512 */
/* Este tramo era un escalón, no una rampa (08/10/2026): a 991 px la base valía
1vw = 9,91 px y a 992 px pasaba a 0.620833vw = 6,16, **un 38 % de golpe con un
píxel más de ancho**. Ahí caen los iPad grandes en vertical —1032x1376— y por
eso el cliente veía la web pequeña en su iPad aunque la regla de pantallas
bajas no llegara a entrar.
Ahora el tramo es una recta que toca los dos extremos:
f(991) = 9,910 px, que es lo que da 1vw ahí abajo
f(1400) = 8,715 px, que es lo que da la regla base ahí arriba
o sea `12.8055px - 0.29218vw`. Enlaza a los dos lados sin saltos. **Los dos
números se recalcularon el 16/10/2026 al subir la escala de escritorio: si se
vuelve a tocar la base, hay que rehacer esta recta o vuelve el escalón.**
La escala sigue sin ser monótona, y no puede serlo: el móvil va a 10,24 px y
el escritorio a 7,5, así que de tableta a escritorio TIENE que bajar. Lo que
no puede haber son saltos, y ya no los hay. */
@media only screen and (min-width:991.1px) and (max-width:1400px){ html{ font-size:calc(12.8055px - 0.29218vw) } }
@media only screen and (min-width:767.98px) and (max-width:991px){ html{ font-size:1vw } }
@media only screen and (max-width:767.98px){ html{ font-size:2.625vw } }
/* El recorte de escala para pantallas bajas llega hasta 800 px de alto, no hasta
920 (08/10/2026). Está pensado para portátiles —1366x768, 1280x800—, pero con
920 atrapaba también al iPad en horizontal (1180x820, 1194x834, 1112x834,
1080x810): ahí la base caía a 6,15 px frente a los 7,5 de un escritorio de
1440 y el diseño entero se dibujaba al 82 %. Encogido en bloque y
proporcionado, porque todo va en rem: pequeño, pero no roto.
Con 800 esos cuatro vuelven a la regla de 991-1400 y suben a 6,7-7,4 px, que
es lo que ya hacía el iPad Pro de 12,9 (1366x1024, fuera del rango por altura)
sin que nadie se quejara. Los portátiles no se mueven: 768 y 800 siguen
dentro. En vertical nunca entró: 820 de ancho cae en la regla de 768-991. */
/* Los portátiles de pantalla baja suben también (16/10/2026), de 0.520833 a
0.58vw. No se les da la escala entera —siguen siendo pantallas de 768 de alto
y el diseño tiene que caber— pero quedarse en 12,1 px de texto mientras el
resto va a 16 era un escalón del 24 % entre una ventana de 768 y otra de 900.
Ahora son 13,5 px y el escalón baja al 11 %. Comprobado que a 1366x768 y a
1024x768 no desborda nada ni siquiera con la escala completa (8,50 y 9,81),
así que 7,92 y 5,94 van sobrados: si se quiere subir más, hay sitio. */
@media only screen and (min-width:991.1px) and (max-width:1550px) and (max-height:800px){ html{ font-size:0.58vw } }
@media only screen and (min-width:767.98px) and (max-width:991px) and (orientation:landscape){ html{ font-size:0.8vw } }
:root{
/* base neutra */
--noche:#0E0E0E; --noche-2:#141414; --grafito:#282828;
--blanco:#FFFFFF; --crema:#F3EEE5; --arena:#D9D1CA; --topo:#988B86;
--hueso:#FBFAF8; --lino:#F6F4F2; --gris:#E4E4E4;
/* acentos de marca */
--bronce:#998060; /* acción principal (era #66473D) */
--oliva:#53624E; /* SIN USO desde el 08/10/2026: el verde salió de la web
y donde estaba va turquesa. La variable se queda por si
vuelve; si sigue sin usarse, se borra en otra versión. */
--dorado:#AB916C; /* antetítulos (era #AD8566) */
--dorado-claro:#B99D75;
--turquesa:#95DACF; /* realce e interacción (era #8CA193) */
--turquesa-osc:#6FBDB1;
/* El turquesa para TEXTO sobre fondo claro (08/10/2026). #95DACF sobre blanco
da 1,59:1 y #6FBDB1 da 2,19: los dos son fondos, no tintas. Este es el mismo
tono bajado de luminosidad hasta pasar el 4,5:1 de WCAG AA: 5,95:1 sobre
blanco, 5,42 sobre --lino y 5,15 sobre --crema. Donde el turquesa es FONDO
se usa --turquesa con el texto en --noche (12,14:1). */
--turquesa-texto:#2E6E64;
/* curvas */
--ease:cubic-bezier(.645,.045,.355,1);
--ease-out:cubic-bezier(.215,.61,.355,1);
--display:"Marcellus","Cormorant Garamond",Georgia,serif;
--texto:"Jost",Futura,"Century Gothic",system-ui,sans-serif;
}
/* --------------------------------------------------------------------------
RESET
-------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
body{
margin:0; background:var(--blanco); color:var(--grafito);
font-family:var(--texto); font-weight:300; font-size:1.6rem; line-height:1.6;
-webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body.no-scroll{overflow:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
/* El tema trae `a:active,a:hover{color:#336}` —(0,1,1)—, que gana a nuestra `a`
—(0,0,1)— y repinta de azul marino CUALQUIER enlace al pasar el cursor,
incluido el logotipo. Esto lo neutraliza con la misma especificidad, y va
aquí arriba a propósito: las reglas de hover que vienen después en este
archivo —el pie, los botones— siguen mandando sobre ella (08/10/2026). */
a:hover,a:active{color:inherit}
button{font:inherit;border:0;background:none;color:inherit;cursor:pointer}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5,.title{font-family:var(--display);font-weight:400;margin:0;line-height:1.2}
p{margin:0 0 1.4rem}
p:last-child{margin-bottom:0}
.container-fluid{width:100%;padding:0 4rem}
@media (max-width:767.98px){ .container-fluid{padding:0 2rem} }
.row{display:flex;flex-wrap:wrap}
.text-center{text-align:center}
.position-relative{position:relative}
.overflow-hidden{overflow:hidden}
.no-mobile{display:block}
.no-desktop{display:none}
@media (max-width:767.98px){ .no-mobile{display:none} .no-desktop{display:block} }
/* --------------------------------------------------------------------------
TIPOGRAFÍA
-------------------------------------------------------------------------- */
.p-section{
font-family:var(--texto); font-size:1.4rem; line-height:140%;
text-transform:uppercase; letter-spacing:.18em; margin:0 0 1rem;
color:var(--dorado); font-weight:500;
}
@media (min-width:768px){ .p-section{margin-bottom:2rem} }
.title{ font-family:var(--display); font-weight:400 }
.t-xl{font-size:7.2rem;line-height:100%}
.t-l{font-size:5.4rem;line-height:105%}
.t-m{font-size:3.6rem;line-height:120%}
.t-s{font-size:2.4rem;line-height:120%}
.t-xs{font-size:1.8rem;line-height:120%}
@media (max-width:767.98px){
.t-xl{font-size:4.2rem}.t-l{font-size:3.4rem}.t-m{font-size:2.8rem}.t-s{font-size:2.1rem}
}
.text p{font-size:1.6rem;line-height:150%}
@media (min-width:768px){ .text p{font-size:1.7rem} }
.text-featured p{font-size:2rem;line-height:145%}
@media (min-width:768px){ .text-featured p{font-size:2.4rem} }
.micro{font-size:1.1rem;letter-spacing:.2em;text-transform:uppercase}
/* --------------------------------------------------------------------------
FONDOS
-------------------------------------------------------------------------- */
.color-bg-noche{background-color:var(--noche);color:rgba(255,255,255,.75)}
.color-bg-noche .title,.color-bg-noche h1,.color-bg-noche h2,.color-bg-noche h3{color:var(--blanco)}
.color-bg-noche .p-section{color:var(--turquesa)}
.color-bg-crema{background-color:var(--crema)}
.color-bg-arena{background-color:var(--arena)}
.color-bg-lino{background-color:var(--lino)}
.color-bg-hueso{background-color:var(--hueso)}
/* --------------------------------------------------------------------------
ANIMACIONES DE ENTRADA (sistema data-fade de Lasala)
-------------------------------------------------------------------------- */
html:not(.no-js) [data-fade^="fade"]{opacity:0;transition-property:opacity,transform;
transition-duration:.7s;transition-timing-function:var(--ease)}
html:not(.no-js) [data-fade="fade-up"]{transform:translate3d(0,20px,0)}
html:not(.no-js) [data-fade="fade-down"]{transform:translate3d(0,-20px,0)}
html:not(.no-js) [data-fade="fade-in"]{transform:translate3d(0,0,0)}
html:not(.no-js) [data-fade^="fade"].fade-animate{opacity:1;transform:none}
[data-fade-delay="100"].fade-animate{transition-delay:.1s}
[data-fade-delay="300"].fade-animate{transition-delay:.3s}
[data-fade-delay="700"].fade-animate{transition-delay:.7s}
[data-fade-duration="1000"]{transition-duration:1s}
@media (prefers-reduced-motion:reduce){
html [data-fade^="fade"]{opacity:1!important;transform:none!important;transition:none!important}
}
/* --------------------------------------------------------------------------
BOTONES · efecto flair (círculo que sigue al cursor)
-------------------------------------------------------------------------- */
.button{
align-items:center; background:var(--bronce); border:0; border-radius:4rem;
color:var(--blanco); cursor:pointer; display:inline-flex; gap:1rem;
justify-content:center; overflow:hidden; padding:2rem 3rem; position:relative;
text-transform:uppercase; letter-spacing:.1em; font-size:1.4rem; line-height:140%;
font-family:var(--texto); font-weight:500; text-align:center;
}
.button__label{position:relative;z-index:1;transition:color .5s ease-in-out}
.button__flair{position:absolute;inset:0;pointer-events:none;transform:scale(0);
transform-origin:0 0;will-change:transform}
.button__flair::before{
content:"";position:absolute;top:0;left:0;display:block;width:200%;aspect-ratio:1/1;
border-radius:50%;background-color:var(--turquesa);transform:translate(-50%,-50%);
}
.button i{width:1.4rem;height:1.4rem;position:relative;z-index:1;display:inline-block;
background-color:currentColor;transition:transform .35s var(--ease-out)}
.button:hover i{transform:translateX(.4rem)}
@media (hover:hover){ .button:hover .button__label{color:var(--noche)} }
/* El verde pasa a turquesa (08/10/2026). Y el turquesa es un color CLARO: el
blanco encima da 1,59:1, así que el texto va en --noche (12,14:1), igual que
en .button--turquesa, que ya estaba bien hecho. El flair, al revés. */
.button--oliva{background-color:var(--turquesa);color:var(--noche)}
.button--oliva .button__flair::before{background-color:var(--noche)}
@media (hover:hover){ .button--oliva:hover .button__label{color:var(--blanco)} }
.button--noche{background-color:var(--noche)}
.button--turquesa{background-color:var(--turquesa);color:var(--noche)}
.button--turquesa .button__flair::before{background-color:var(--noche)}
@media (hover:hover){ .button--turquesa:hover .button__label{color:var(--blanco)} }
.button--blanco{background-color:rgba(255,255,255,.5);color:var(--noche)}
/* variantes de contorno: radio corto, más pequeñas */
.button--stroke-bronce,.button--stroke-oliva,.button--stroke-blanco{
border-radius:.3rem;padding:1rem 1.5rem;font-size:1.2rem;line-height:140%;background:transparent;
}
.button--stroke-bronce{border:1px solid var(--bronce);color:var(--bronce)}
.button--stroke-bronce .button__flair::before{background-color:var(--bronce)}
.button--stroke-oliva{border:1px solid var(--turquesa-texto);color:var(--turquesa-texto)}
.button--stroke-oliva .button__flair::before{background-color:var(--turquesa-texto)}
.button--stroke-blanco{border:1px solid var(--blanco);color:var(--blanco)}
.button--stroke-blanco .button__flair::before{background-color:var(--blanco)}
@media (hover:hover){
.button--stroke-bronce:hover .button__label,.button--stroke-oliva:hover .button__label{color:var(--blanco)}
.button--stroke-blanco:hover .button__label{color:var(--noche)}
}
/* enlace con doble subrayado que barre */
.btn-underline{
display:block;max-width:max-content;padding-bottom:2px;position:relative;overflow:hidden;
color:var(--turquesa-texto);cursor:pointer;font-family:var(--texto);font-weight:500;
font-size:1.2rem;line-height:140%;text-transform:uppercase;letter-spacing:.14em;
}
.btn-underline::before,.btn-underline::after{
content:"";position:absolute;bottom:0;height:1px;width:100%;background:currentColor;
pointer-events:none;transition:transform .4s cubic-bezier(.6,0,.2,1);
}
.btn-underline::before{left:0;transform-origin:left center;transform:scaleX(0)}
.btn-underline::after{right:0;transform-origin:right center}
.btn-underline:hover::before{transform:scaleX(1);transition-delay:.2s}
.btn-underline:hover::after{transform:scaleX(0)}
.btn-underline--blanco{color:var(--blanco)}
.btn-underline--turquesa{color:var(--turquesa)}
/* enlaces de menú */
.link-underline > a{position:relative;display:inline-block;padding-bottom:.4rem}
.link-underline > a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
background:var(--turquesa);transition:width .45s var(--ease)}
.link-underline > a:hover::after,.link-underline.is-on > a::after{width:100%}
/* --------------------------------------------------------------------------
IMÁGENES · marcos y zoom
-------------------------------------------------------------------------- */
.img-div{position:relative;overflow:hidden;display:block}
.img-div img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease-out)}
.r-05{border-radius:.5rem}
.r-1{border-radius:1rem}
/* marcador de fotografía pendiente */
.ph{position:relative;overflow:hidden;background:var(--arena);
background-image:
repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 2px,rgba(0,0,0,0) 2px 5px),
linear-gradient(125deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 42%),
linear-gradient(205deg,#E2D9CC 0%,#C6B49B 38%,#A2968A 68%,#6E6560 100%);
}
.ph--dark{background-image:
repeating-linear-gradient(115deg,rgba(255,255,255,.03) 0 2px,rgba(0,0,0,0) 2px 5px),
radial-gradient(120% 90% at 78% 8%,rgba(149,218,207,.16) 0%,rgba(0,0,0,0) 55%),
linear-gradient(205deg,#3A342E 0%,#221F1C 40%,#141414 72%,#0B0B0B 100%)}
.ph::after{content:attr(data-ph);position:absolute;left:0;right:0;bottom:1.6rem;text-align:center;
font-family:var(--texto);font-size:1rem;letter-spacing:.18em;text-transform:uppercase;
color:rgba(20,20,20,.45);padding:0 1.4rem;pointer-events:none}
.ph--dark::after{color:rgba(255,255,255,.4)}
/* --------------------------------------------------------------------------
CABECERA
-------------------------------------------------------------------------- */
.topbar{
position:fixed;top:0;left:0;right:0;z-index:60;display:flex;justify-content:space-between;
align-items:center;padding:1.2rem 4rem;font-size:1.1rem;letter-spacing:.16em;
text-transform:uppercase;color:rgba(255,255,255,.7);
transition:transform .5s var(--ease),opacity .4s ease;
}
body.scroll-down .topbar{transform:translateY(-100%);opacity:0}
.topbar a:hover{color:var(--turquesa)}
.topbar .b-social{display:flex;gap:1.6rem}
.topbar .b-help{display:flex;gap:2rem;align-items:center}
@media (max-width:767.98px){ .topbar{padding:1rem 2rem;font-size:1rem} .topbar .b-help span{display:none} }
header{
position:fixed;left:0;right:0;top:0;z-index:50;padding:5.2rem 0 1.6rem;
transition:transform .5s var(--ease);
}
@media (max-width:767.98px){ header{padding-top:4.4rem} }
header::before{
/* La banda mide lo que mide la cabecera: inset:0 y se muestra con scaleY, no
con height. Antes iba con una altura fija por breakpoint y en móvil se
quedaba corta: «L'Alcor» se salía. De paso, scaleY no provoca reflow. */
content:"";position:absolute;inset:0;background:var(--noche);
transform:scaleY(0);transform-origin:top;
transition:transform .5s var(--ease);z-index:-1;
}
body.scroll-up header::before,
body.header-solid header::before{transform:scaleY(1)}
body.scroll-down header .b-menu-links,
body.scroll-down header .b-menu-lang{transform:translateY(-250px)}
body.scroll-up header .b-menu-links,
body.scroll-up header .b-menu-lang{transform:translateY(0)}
header .b-menu-links,header .b-menu-lang{transition:transform .5s var(--ease)}
header .container-fluid{display:flex;justify-content:space-between;align-items:center;gap:3rem}
header .b-menu-links{display:flex;align-items:center;gap:3rem}
header .b-menu-lang{display:flex;align-items:center;gap:2.4rem}
header a,header p{color:var(--blanco)}
header .b-menu-links .item > a,header .b-menu-lang .item > a{
font-size:1.3rem;letter-spacing:.14em;text-transform:uppercase;font-weight:400;
}
header .logo-lockup{display:block;line-height:1;margin-right:2rem}
/* Aquí estaban `.name` y `.desc` del logotipo escrito —«OLD T✦WN» y su descriptor—, borradas el 05/10/2026: desde 0.1.46 el lockup es el SVG. */
header .b-lang{position:relative;font-size:1.3rem;letter-spacing:.14em}
header .b-lang b{font-weight:500}
.menu-toggle{display:flex;align-items:center;gap:1.2rem;cursor:pointer}
.menu-toggle p{margin:0;font-size:1.3rem;letter-spacing:.14em;text-transform:uppercase}
.menu-toggle-2{display:grid;gap:5px;transition:transform .35s var(--ease)}
.menu-toggle:hover .menu-toggle-2{transform:scale(1.05)}
.menu-toggle-2 > div{width:37px;height:1px;background:var(--blanco);position:relative;right:0;
transition:transform .45s var(--ease),width .35s var(--ease),opacity .3s ease}
body:not(.open-menu) .menu-toggle:hover .menu-toggle-2 > div.two{width:24px}
body.open-menu .menu-toggle-2 > div.one{transform:translateY(6px) rotate(45deg)}
body.open-menu .menu-toggle-2 > div.two{width:0;opacity:0}
body.open-menu .menu-toggle-2 > div.three{transform:translateY(-6px) rotate(-45deg)}
@media (max-width:991px){
header .b-menu-links .item:not(.b-logo){display:none}
.menu-toggle-2 > div{width:25px}
}
/* menú a pantalla completa */
.site-nav__menu{
position:fixed;inset:0;z-index:55;background:var(--noche);
display:flex;align-items:center;padding:12rem 4rem 4rem;
opacity:0;visibility:hidden;transition:opacity .5s ease-in-out,visibility .5s ease-in-out;
}
body.open-menu .site-nav__menu{opacity:1;visibility:visible}
.site-nav__menu .b-links{display:flex;justify-content:space-between;width:100%;gap:6rem;flex-wrap:wrap}
.site-nav__menu .b-nav li{overflow:hidden}
.site-nav__menu .b-nav li a{
display:block;font-family:var(--display);font-size:5.4rem;line-height:1.25;color:var(--blanco);
transform:translateY(110%);transition:transform .6s var(--ease),color .35s ease;
}
body.open-menu .site-nav__menu .b-nav li a{transform:translateY(0)}
.site-nav__menu .b-nav li:nth-child(2) a{transition-delay:.06s}
.site-nav__menu .b-nav li:nth-child(3) a{transition-delay:.12s}
.site-nav__menu .b-nav li:nth-child(4) a{transition-delay:.18s}
.site-nav__menu .b-nav li:nth-child(5) a{transition-delay:.24s}
.site-nav__menu .b-nav li:nth-child(6) a{transition-delay:.3s}
.site-nav__menu .b-nav li a:hover{color:var(--turquesa)}
.site-nav__menu .b-aside{max-width:34rem;color:rgba(255,255,255,.6);font-size:1.5rem}
.site-nav__menu .b-aside h5{color:var(--turquesa);font-family:var(--texto);font-size:1.1rem;
letter-spacing:.2em;text-transform:uppercase;margin-bottom:2rem}
@media (max-width:767.98px){ .site-nav__menu .b-nav li a{font-size:3.4rem} }
/* --------------------------------------------------------------------------
HÉROE · 100vh, foto/vídeo a sangre, logotipo centrado
-------------------------------------------------------------------------- */
.d-hero{position:relative}
.d-hero .img-div{height:100vh;width:100%}
.d-hero .img-div::after{content:"";position:absolute;inset:0;
background:linear-gradient(to top,rgba(14,14,14,.62) 0%,rgba(14,14,14,.34) 42%,rgba(14,14,14,.55) 100%)}
.d-hero .b-block{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:100%;max-width:100rem;padding:0 4rem;text-align:center;z-index:2}
/* Aquí vivía .d-hero .logo-hero, de una versión anterior del diseño: diez
líneas que no casaban con nada. Comprobado el 01/10/2026 en los trece HTML y
en todo el PHP del plugin: la clase no aparece en ningún sitio. Borrado. */
/* héroe corto de página interior */
.d-hero-2col{position:relative;background-color:var(--lino);padding-top:18rem;padding-bottom:8rem}
.d-hero-2col .row{align-items:center;gap:6rem}
.d-hero-2col .b-block{flex:1 1 40rem}
.d-hero-2col .b-block .p-section{color:var(--dorado)}
.d-hero-2col .b-block .title{margin-bottom:4rem;max-width:43.5rem;color:var(--noche)}
.d-hero-2col .b-img{flex:1 1 40rem}
.d-hero-2col .b-img .img-div{height:56rem}
@media (min-width:768px){ .d-hero-2col .b-block .title{margin-bottom:5rem} }
@media (max-width:767.98px){ .d-hero-2col{padding-top:12rem} .d-hero-2col .b-img .img-div{height:34rem} }
/* --------------------------------------------------------------------------
BARRA DE RESERVA FIJA
-------------------------------------------------------------------------- */
.d-motor{position:fixed;left:50%;bottom:3rem;transform:translateX(-50%);z-index:45;
display:flex;align-items:center;gap:1.5rem;transition:transform .5s var(--ease),opacity .4s}
body.hide-motor .d-motor{transform:translate(-50%,180%);opacity:0}
.d-motor .b-inputs{display:flex;align-items:stretch;background:var(--blanco);border-radius:6rem;
overflow:hidden;box-shadow:0 1rem 3rem rgba(20,20,20,.12)}
.d-motor .cell{padding:1.4rem 2.6rem;border-right:1px solid rgba(40,40,40,.12);min-width:16rem}
.d-motor .cell:last-of-type{border-right:0}
.d-motor label{display:block;font-size:1rem;letter-spacing:.18em;text-transform:uppercase;
color:var(--topo);margin-bottom:.4rem;font-weight:500}
.d-motor input{border:0;outline:0;background:none;font-family:var(--display);font-size:1.6rem;
color:var(--grafito);width:100%}
.d-motor input::placeholder{color:rgba(40,40,40,.4)}
.d-motor .button{border-radius:0;padding:0 3.4rem;align-self:stretch}
.d-motor .stamp{width:7.4rem;height:7.4rem;border-radius:50%;background:var(--turquesa);
display:grid;place-items:center;flex:0 0 auto;position:relative;overflow:hidden}
.d-motor .stamp span{font-family:var(--texto);font-size:.95rem;letter-spacing:.14em;
text-transform:uppercase;color:var(--noche);text-align:center;line-height:1.3;font-weight:500}
.d-motor .stamp::before{content:"";position:absolute;inset:.6rem;border:1px solid rgba(14,14,14,.35);
border-radius:50%}
@media (max-width:991px){
/* Sin fondo (29/09/2026): la banda negra alrededor de la píldora blanca se
veía como un recuadro pegado. En escritorio esta barra siempre fue
transparente; en móvil ahora también. */
.d-motor{left:0;right:0;bottom:0;transform:none;width:100%;padding:1rem;gap:1rem}
body.hide-motor .d-motor{transform:translateY(120%)}
/* La sombra vuelve: la separación de la píldora la daba el fondo negro de
la barra, y al quitarlo se quedaba plana sobre el contenido. En
escritorio la combinación siempre fue barra transparente + píldora con
sombra; en móvil ahora es la misma. */
.d-motor .b-inputs{flex:1;border-radius:4rem}
.d-motor .cell{min-width:0;flex:1;padding:1rem 1.4rem}
.d-motor .cell:nth-child(3){display:none}
.d-motor .stamp{display:none}
}
/* --------------------------------------------------------------------------
MARQUESINA DE VENTAJAS
-------------------------------------------------------------------------- */
@keyframes scrollVentajas{ from{transform:translateX(0)} to{transform:translateX(-33.333%)} }
.d-advantages{background-color:var(--lino);overflow:hidden}
.d-advantages .b-advs{display:flex;width:max-content;animation:scrollVentajas 40s linear infinite}
.d-advantages .b-adv{flex:0 0 auto;padding:4rem 2rem;white-space:nowrap;display:flex;
align-items:center;font-family:var(--texto);font-weight:500;font-size:1.4rem;line-height:120%;
letter-spacing:.14em;text-transform:uppercase;color:var(--grafito)}
.d-advantages .b-adv .ico{width:6rem;height:6rem;border-radius:10rem;margin-right:1.5rem;
background:var(--turquesa);display:grid;place-items:center;flex:0 0 auto;
font-family:var(--display);font-size:1.6rem;color:var(--noche)}
@media (max-width:767.98px){
.d-advantages .b-advs{animation:none;flex-direction:column;flex-wrap:nowrap;width:100%;
gap:2.4rem;align-items:flex-start;justify-content:flex-start;
/* El mismo margen lateral que .container-fluid: si no, las frases largas
quedan pegadas al borde de la pantalla. */
padding:4rem 2.4rem}
.d-advantages .b-adv{padding:0}
}
@media (prefers-reduced-motion:reduce){ .d-advantages .b-advs{animation:none} }
/* --------------------------------------------------------------------------
BANNER A PANTALLA COMPLETA + revelado de texto
-------------------------------------------------------------------------- */
.d-banner-full{position:relative}
.d-banner-full .img-div{height:100vh;width:100%}
.d-banner-full .img-div::after{content:"";position:absolute;inset:0;
background:linear-gradient(to top,rgba(14,14,14,.5) 0%,rgba(14,14,14,.42) 50%,rgba(14,14,14,.5) 100%)}
.d-banner-full .b-block{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:100%;max-width:98rem;padding:0 4rem;text-align:center;z-index:2}
.d-banner-full .chip{display:inline-block;background:var(--noche);color:var(--blanco);
font-size:1.1rem;letter-spacing:.2em;text-transform:uppercase;padding:.9rem 1.8rem;margin-bottom:3rem}
.d-banner-full .title{color:var(--blanco);font-size:3.6rem;line-height:140%}
@media (max-width:767.98px){ .d-banner-full .title{font-size:2.4rem;line-height:145%} }
.text-reveal .word{opacity:.31;transition:opacity .35s ease}
.text-reveal .word.on{opacity:1}
/* --------------------------------------------------------------------------
HABITACIONES · slider calcado de NILS am See (Rooms and Suites)
-------------------------------------------------------------------------- */
.d-rooms-teaser{overflow:hidden;padding:12rem 0}
.d-rooms-teaser .rt-head{margin-bottom:9.5em;max-width:74rem}
.d-rooms-teaser .rt-head .anchor{width:4.4rem;height:4.4rem;margin-bottom:2.4rem;
border-radius:50%;border:1px solid var(--turquesa-osc);display:grid;place-items:center;
color:var(--turquesa-osc);font-size:1.8rem;font-family:var(--display)}
.d-rooms-teaser .rt-head .title{margin-bottom:2.4rem}
.d-rooms-teaser .rt-head .rt-rte{max-width:56rem;margin-bottom:3.4rem}
@media (max-width:1024px){ .d-rooms-teaser .rt-head{margin-bottom:6em} }
@media (max-width:767.98px){ .d-rooms-teaser{padding:7rem 0} .d-rooms-teaser .rt-head{margin-bottom:5em} }
.d-rooms-teaser .rt-slider{position:relative}
.d-rooms-teaser .rt-list{overflow:visible}
.d-rooms-teaser .rt-item{height:auto;width:100%}
.d-rooms-teaser .rt-item__wrap{position:relative;display:flex;flex-direction:column;width:100%}
.d-rooms-teaser .rt-item__media{position:relative;width:100%;overflow:hidden;border-radius:1rem}
.d-rooms-teaser .rt-item__media::before{content:"";position:absolute;inset:0;z-index:1;
pointer-events:none;background:linear-gradient(0deg,rgba(255,255,255,.32),rgba(255,255,255,0))}
.d-rooms-teaser .rt-item__image{aspect-ratio:1.7777777778;position:relative;display:block}
.d-rooms-teaser .rt-item__cta{position:absolute;right:3em;bottom:3.5em;z-index:2;display:flex;gap:1em}
.d-rooms-teaser .rt-item__content{z-index:1;padding-left:8em;padding-right:2em;position:relative}
.d-rooms-teaser .rt-item__top{margin-top:-5em}
.d-rooms-teaser .rt-item__title{font-family:var(--display);line-height:1.2;display:block;width:fit-content}
.d-rooms-teaser .rt-item__title > *{font-size:10em;color:var(--noche)}
.d-rooms-teaser .rt-item__bottom{margin-top:1.5em}
.d-rooms-teaser .rt-item__info{display:flex;align-items:center;gap:3em;line-height:1.2}
.d-rooms-teaser .rt-item__size,.d-rooms-teaser .rt-item__persons{font-weight:300;display:inline-block}
.d-rooms-teaser .rt-item__size > *,.d-rooms-teaser .rt-item__persons > *{font-size:2em}
.d-rooms-teaser .rt-item__price > span{font-size:1.5em;display:block;color:var(--topo)}
.d-rooms-teaser .rt-item__price > span.bold{font-size:2em;font-weight:600;text-transform:uppercase;
color:var(--grafito);letter-spacing:.04em}
.d-rooms-teaser .rt-item__detail{z-index:1;margin-top:2em}
@media (max-width:1366px){ .d-rooms-teaser .rt-item__title > *{font-size:7.5em} }
@media (max-width:1024px){
.d-rooms-teaser .rt-item__image{aspect-ratio:1.8}
.d-rooms-teaser .rt-item__title > *{font-size:5em}
.d-rooms-teaser .rt-item__top{margin-top:-3.5em}
.d-rooms-teaser .rt-item__cta{gap:.5em;bottom:auto;top:1.5em;right:1.5em}
.d-rooms-teaser .rt-item__content{padding-left:.5em}
.d-rooms-teaser .rt-item__size > *,.d-rooms-teaser .rt-item__persons > *{font-size:1.6em}
.d-rooms-teaser .rt-item__price > span{font-size:1.4em}
.d-rooms-teaser .rt-item__price > span.bold{font-size:1.8em}
.d-rooms-teaser .rt-slider__inner{margin:0 -.7em}
.d-rooms-teaser .rt-item{padding:0 .7em}
}
@media (max-width:767.98px){
.d-rooms-teaser .rt-item__image{aspect-ratio:1.3333333333}
.d-rooms-teaser .rt-item__info{align-items:flex-start;flex-direction:column;gap:.5em}
}
@media (max-width:480px){ .d-rooms-teaser .rt-item__image{aspect-ratio:1/1} }
/* la diapositiva activa manda: las demás se encogen y callan */
@media (min-width:1025px){
.d-rooms-teaser .rt-item__content,.d-rooms-teaser .rt-item__cta{transition:opacity .5s ease-in-out}
.d-rooms-teaser .rt-item.swiper-slide{transition:transform .5s ease-in-out;transform:scale(1)}
.d-rooms-teaser .rt-item.swiper-slide:not(.swiper-slide-active){transform:scale(.85)}
.d-rooms-teaser .rt-item.swiper-slide:not(.swiper-slide-active) .rt-item__content,
.d-rooms-teaser .rt-item.swiper-slide:not(.swiper-slide-active) .rt-item__cta{opacity:0;pointer-events:none}
}
@media (max-width:1024px){
.d-rooms-teaser .rt-item__content,.d-rooms-teaser .rt-item__cta{transition:opacity .5s ease-in-out}
.d-rooms-teaser .rt-item.swiper-slide:not(.swiper-slide-active) .rt-item__content,
.d-rooms-teaser .rt-item.swiper-slide:not(.swiper-slide-active) .rt-item__cta{opacity:0;pointer-events:none}
}
/* flechas que sobresalen por fuera de la foto */
.d-rooms-teaser .rt-arrows{position:absolute;left:0;top:0;width:100%;aspect-ratio:16/9;
z-index:3;pointer-events:none}
.d-rooms-teaser .rt-arrow{position:absolute;top:50%;pointer-events:auto;width:5.4rem;height:5.4rem;
border-radius:50%;border:1px solid rgba(40,40,40,.25);background:var(--blanco);display:grid;
place-items:center;cursor:pointer;transition:background .4s ease,border-color .4s ease,color .4s ease;
font-family:var(--texto);font-size:1.6rem;color:var(--grafito)}
.d-rooms-teaser .rt-arrow:hover{background:var(--turquesa);border-color:var(--turquesa);color:var(--noche)}
.d-rooms-teaser .rt-arrow[data-direction="prev"]{left:0;transform:translate(-80%,-50%)}
.d-rooms-teaser .rt-arrow[data-direction="next"]{right:0;transform:translate(80%,-50%)}
@media (max-width:1024px){
.d-rooms-teaser .rt-arrows{position:static;aspect-ratio:auto;display:flex;justify-content:flex-end;
gap:1rem;margin-top:3rem}
.d-rooms-teaser .rt-arrow{position:static;transform:none!important}
}
/* --------------------------------------------------------------------------
REJILLA DE APARTAMENTOS (mosaico asimétrico de Lasala)
-------------------------------------------------------------------------- */
.d-grid-rooms{padding:10rem 0}
.d-grid-rooms .container-fluid{max-width:131.2rem;margin:0 auto}
.d-grid-rooms .p-section{margin-bottom:1rem;color:var(--turquesa-texto)}
.d-grid-rooms .title{color:var(--noche);margin-bottom:0;max-width:92.5rem}
.d-grid-rooms .text{margin-top:1.5rem;margin-bottom:2rem}
.d-grid-rooms .b-tabs,.d-featured-blog .b-tabs{display:flex;gap:1rem;flex-wrap:wrap;margin-top:3rem}
.d-grid-rooms .b-tabs li,.d-featured-blog .b-tabs li{font-size:1.2rem;letter-spacing:.16em;text-transform:uppercase;
padding:1rem 1.8rem;border:1px solid rgba(40,40,40,.18);border-radius:4rem;cursor:pointer;
color:var(--topo);transition:.4s var(--ease)}
.d-grid-rooms .b-tabs li:hover,.d-featured-blog .b-tabs li:hover{border-color:var(--grafito);color:var(--grafito)}
.d-grid-rooms .b-tabs li.active,.d-featured-blog .b-tabs li.active{background:var(--noche);border-color:var(--noche);color:var(--blanco)}
.d-grid-rooms .b-grid{margin-top:3rem}
@media (min-width:768px){ .d-grid-rooms .b-grid{margin-top:6.3rem} }
.d-grid-rooms .b-grid > div{display:flex;gap:5rem;flex-wrap:wrap}
@media (min-width:768px){ .d-grid-rooms .b-grid > div{gap:4rem} }
.d-grid-rooms .b-col-8,.d-grid-rooms .b-col-6,.d-grid-rooms .b-col-4,.d-grid-rooms .b-col-3{width:100%}
@media (min-width:768px){
.d-grid-rooms .b-col-8{width:calc(66.6667% - 1.4rem)}
.d-grid-rooms .b-col-6{width:calc(50% - 2rem)}
.d-grid-rooms .b-col-4{width:calc(33.3333% - 2.67rem)}
.d-grid-rooms .b-col-3{width:calc(25% - 3rem)}
}
.d-grid-rooms .b-col-8 .img-div{height:36.6rem}
.d-grid-rooms .b-col-6 .img-div{height:49.6rem}
.d-grid-rooms .b-col-4 .img-div{height:46.7rem}
.d-grid-rooms .b-col-3 .img-div{height:37.9rem}
.d-grid-rooms .b-grid .img-div{width:100%;border-radius:.5rem}
@media (max-width:767.98px){ .d-grid-rooms .b-grid .img-div{height:33rem} }
.d-grid-rooms .b-room{display:block;position:relative}
.d-grid-rooms .b-room .b-text{padding:2rem}
@media (min-width:768px){ .d-grid-rooms .b-room .b-text{padding:2rem 3rem 6.5rem} }
.d-grid-rooms .b-room .b-text .title{font-size:2.4rem;margin-bottom:0}
.d-grid-rooms .b-room .date{margin-top:1.5rem;font-family:var(--texto);font-weight:500;font-size:1rem;
line-height:140%;letter-spacing:.18em;text-transform:uppercase;color:var(--turquesa-texto)}
.d-grid-rooms .b-room .b-btn{margin-top:2rem;display:flex;flex-wrap:wrap;gap:1.5rem 2rem;align-items:center}
@media (min-width:768px){ .d-grid-rooms .b-room .b-btn{position:absolute;bottom:2rem} }
.d-grid-rooms .b-room:hover .img-div img,.d-grid-rooms .b-banner:hover .img-div img{transform:scale(1.04)}
@media (max-width:767.98px){
.d-grid-rooms .b-room{border-radius:.5rem;box-shadow:0 10px 10px -10px rgba(0,0,0,.25);overflow:hidden}
.d-grid-rooms .b-room .b-text{background:var(--blanco);padding-bottom:7.5rem}
}
.d-grid-rooms .b-banner{display:block;position:relative}
.d-grid-rooms .b-banner .img-div{height:59.5rem;border-radius:.5rem}
@media (max-width:767.98px){ .d-grid-rooms .b-banner .img-div{height:35rem} }
.d-grid-rooms .b-banner .img-div::before{content:"";position:absolute;inset:0;z-index:1;
background:linear-gradient(0deg,rgba(0,0,0,.3),rgba(0,0,0,.3))}
.d-grid-rooms .b-banner .b-text{padding:4rem;position:absolute;top:50%;left:50%;
transform:translate(-50%,-50%);width:100%;text-align:center;z-index:2}
.d-grid-rooms .b-banner .b-text .title,.d-grid-rooms .b-banner .b-text .p-section{color:var(--blanco)}
/* --------------------------------------------------------------------------
LISTA DE SERVICIOS CON IMAGEN QUE SIGUE AL CURSOR (mwg_effect030)
-------------------------------------------------------------------------- */
.d-info-list .row{align-items:center}
.d-info-list .b-img{flex:1 1 50%;padding:0}
.d-info-list .b-img .img-div{height:100vh;width:100%}
.d-info-list .b-info{flex:1 1 50%;position:relative;padding:8rem 6rem}
.d-info-list .b-info > div{max-width:55.6rem}
.d-info-list .p-section{color:var(--dorado)}
.d-info-list .title{color:var(--noche);margin-bottom:4rem}
.d-info-list .b-btn{margin-top:5rem}
@media (max-width:991px){
.d-info-list .b-img,.d-info-list .b-info{flex:1 1 100%}
.d-info-list .b-img .img-div{height:38rem}
.d-info-list .b-info{padding:6rem 2rem}
}
.hover-list{position:relative}
.hover-list ul{width:100%;margin:0;padding:0}
/* Dos cosas del 05/10/2026, las dos en esta regla:
· El texto pasa de #999 a --grafito. El cliente dijo que «el título parece que
no es encabezado»; el problema no era el título, era la lista: #999 sobre
blanco da 2,85:1 y no llega al 4,5:1 que pide WCAG AA para texto normal.
Con --grafito son 14,7:1 y el antetítulo dorado vuelve a mandar.
· Fuera `cursor:pointer`: invitaba a un clic que no hace nada, y era parte del
lío del punto 5 (en táctil el toque dejaba la tarjeta encendida).
Las líneas divisorias se quedan en #999: son adorno, no texto. */
.hover-list ul li{display:flex;align-items:center;gap:0;width:100%;
font-family:var(--display);font-size:1.8rem;line-height:140%;color:var(--grafito);padding:2rem 0;
border-bottom:1px solid #999;transition:.5s ease-in-out}
.hover-list ul li:first-child{border-top:1px solid #999}
.hover-list ul li:hover{color:var(--bronce)}
.hover-list ul li hr{width:0;height:1px;background:transparent;margin:0;border:0;
transition:.5s ease-in-out}
.hover-list ul li:hover hr{width:1.4rem;margin-right:1.2rem;background-color:var(--bronce)}
.hover-list .media-container{position:absolute;width:34.5rem;height:49.7rem;right:16%;top:0;
border-radius:1rem;pointer-events:none;overflow:hidden;visibility:hidden;z-index:3}
.hover-list .media-container.on{visibility:visible}
.hover-list .media-container > div{position:absolute;inset:0;overflow:hidden;transform:translateY(-100%)}
.hover-list .media-container .ph{position:absolute;inset:0;transform:translateY(90%)}
@media (max-width:991px){ .hover-list .media-container{display:none} }
/* --------------------------------------------------------------------------
GALERÍA HORIZONTAL POR SCROLL (mwg_effect033)
-------------------------------------------------------------------------- */
.d-carousel-multimedia{height:100vh;width:100%;overflow:hidden;background-color:var(--noche);
position:relative}
.d-carousel-multimedia .b-block{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:51.2rem;max-width:calc(100% - 4rem);z-index:2;text-align:center}
.d-carousel-multimedia .b-block .title{color:var(--blanco)}
.d-carousel-multimedia .b-block .b-btn{margin-top:5rem;display:flex;justify-content:center}
.d-carousel-multimedia .hz-track{height:100%;white-space:nowrap;width:max-content;
padding:0 25vw 0 20vw;display:inline-table;will-change:transform}
.d-carousel-multimedia .medias{height:auto;gap:0;display:grid;grid-template-rows:repeat(3,auto);
grid-auto-flow:column;align-items:center;cursor:pointer}
.d-carousel-multimedia .media,.d-carousel-multimedia .media .ph{width:27.3rem;height:38.7rem;
position:relative;border-radius:1rem;will-change:transform}
.d-carousel-multimedia .media{margin:1rem}
.d-carousel-multimedia .media .ph{transition:transform .5s var(--ease-out)}
.d-carousel-multimedia .media:hover .ph{transform:scale(1.05)}
.d-carousel-multimedia .media .ico-plus{position:absolute;top:2rem;right:2rem;z-index:2;
width:1.8rem;height:1.8rem;color:var(--blanco);font-size:1.8rem;line-height:1;font-family:var(--texto)}
.d-carousel-multimedia .media.web-cam,.d-carousel-multimedia .media.web-cam .ph{width:28.7rem;height:28.7rem}
.d-carousel-multimedia .media.web-cam .badge{position:absolute;top:2rem;right:2rem;z-index:2;display:flex;
gap:1rem;align-items:center;background-color:var(--turquesa);border-radius:3rem;padding:1.1rem 1.5rem;
font-size:1rem;color:var(--noche);letter-spacing:.14em;text-transform:uppercase}
@media (max-width:991px){
.d-carousel-multimedia{height:auto;padding:10rem 0}
.d-carousel-multimedia .b-block{position:static;transform:none;margin:0 auto 6rem;width:100%}
.d-carousel-multimedia .hz-track{padding:0 2rem;width:100%;display:block;white-space:normal;
overflow-x:auto;transform:none!important}
.d-carousel-multimedia .medias{grid-template-rows:none;grid-auto-flow:row;
grid-template-columns:repeat(2,1fr);gap:1.5rem}
.d-carousel-multimedia .media,.d-carousel-multimedia .media .ph,
.d-carousel-multimedia .media.web-cam,.d-carousel-multimedia .media.web-cam .ph{width:100%;height:24rem}
.d-carousel-multimedia .media{margin:0}
}
/* --------------------------------------------------------------------------
GALERÍA MASONRY (página de galería)
-------------------------------------------------------------------------- */
.d-gallery-masonry{padding:18rem 0 15rem;background-color:var(--noche)}
@media (max-width:767.98px){ .d-gallery-masonry{padding:12rem 0 8.7rem} }
.d-gallery-masonry .b-title{text-align:center}
.d-gallery-masonry .b-title .p-section{margin-bottom:1rem;color:var(--turquesa)}
.d-gallery-masonry .b-title .title{font-size:3.6rem;line-height:100%;color:var(--blanco);margin-bottom:4rem}
.d-gallery-masonry .b-title .title,.d-gallery-masonry .b-title .text{max-width:83.8rem;margin:0 auto}
.d-gallery-masonry .b-title .text p{font-size:1.6rem;line-height:140%;color:rgba(255,255,255,.65)}
@media (min-width:768px){ .d-gallery-masonry .b-title .text p{font-size:2.4rem} }
.d-gallery-masonry .b-gallery{margin-top:9rem}
.d-gallery-masonry .gallery{column-count:4;column-gap:3rem;max-width:161rem;margin:0 auto}
@media (max-width:1400px){ .d-gallery-masonry .gallery{max-width:135rem} }
@media (max-width:1024px){ .d-gallery-masonry .gallery{column-count:3} }
@media (max-width:767.98px){ .d-gallery-masonry .gallery{column-count:2;column-gap:1.5rem} .d-gallery-masonry .b-gallery{margin-top:5rem} }
.d-gallery-masonry .gallery .ph{width:100%;border-radius:1rem;display:block;margin-bottom:3rem;
transition:transform .3s ease-in-out;cursor:pointer;break-inside:avoid}
.d-gallery-masonry .gallery .ph:hover{transform:scale(1.02)}
.d-gallery-masonry .b-filters{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:4rem}
.d-gallery-masonry .b-filters li{font-size:1.2rem;letter-spacing:.16em;text-transform:uppercase;
padding:1rem 1.8rem;border:1px solid rgba(255,255,255,.25);border-radius:4rem;cursor:pointer;
color:rgba(255,255,255,.6);transition:.4s var(--ease)}
.d-gallery-masonry .b-filters li:hover{border-color:var(--turquesa);color:var(--turquesa)}
.d-gallery-masonry .b-filters li.active{background:var(--turquesa);border-color:var(--turquesa);color:var(--noche)}
/* lightbox */
.modal-gallery{position:fixed;inset:0;z-index:90;background:rgba(14,14,14,.94);display:none;
align-items:center;justify-content:center;padding:6rem 4rem}
.modal-gallery.open{display:flex}
.modal-gallery .inner{max-width:120rem;width:100%;position:relative}
.modal-gallery .ph{width:100%;aspect-ratio:16/9;border-radius:1rem}
.modal-gallery .close{position:absolute;top:-5rem;right:0;color:var(--blanco);font-size:2.4rem;
font-family:var(--texto);line-height:1}
.modal-gallery .nav{position:absolute;top:50%;transform:translateY(-50%);width:5.4rem;height:5.4rem;
border-radius:50%;border:1px solid rgba(255,255,255,.3);color:var(--blanco);display:grid;
place-items:center;transition:.4s ease}
.modal-gallery .nav:hover{background:var(--turquesa);border-color:var(--turquesa);color:var(--noche)}
.modal-gallery .nav.prev{left:-7rem}
.modal-gallery .nav.next{right:-7rem}
@media (max-width:991px){ .modal-gallery .nav.prev{left:1rem} .modal-gallery .nav.next{right:1rem} }
/* --------------------------------------------------------------------------
BLOQUES DE CONTENIDO REUTILIZABLES
-------------------------------------------------------------------------- */
/* intro sobre fondo oscuro */
.d-intro-img{padding:14rem 0;position:relative}
.d-intro-img .b-block{max-width:98rem;margin:0 auto;text-align:center}
.d-intro-img .title{margin-bottom:3rem}
/* imagen o vídeo a sangre */
.d-img-video-full{padding:0}
.d-img-video-full .img-div{height:80vh;width:100%}
.d-img-video-full .img-div:hover img{transform:scale(1.02)}
@media (max-width:767.98px){ .d-img-video-full .img-div{height:44vh} }
/* imagen + texto alterno */
.d-img-info{padding:12rem 0}
.d-img-info .row{align-items:center;gap:8rem}
.d-img-info .b-img{flex:1 1 44rem}
.d-img-info .b-img .img-div{height:64rem;border-radius:1rem}
.d-img-info .b-text{flex:1 1 40rem;max-width:52rem}
.d-img-info .title{margin-bottom:2.4rem}
.d-img-info .b-btn{margin-top:4rem}
.d-img-info.invertida .row{flex-direction:row-reverse}
@media (max-width:991px){
.d-img-info{padding:8rem 0} .d-img-info .row{gap:4rem}
.d-img-info .b-img .img-div{height:38rem}
.d-img-info.invertida .row{flex-direction:row}
}
/* características con lista y foto que cambia */
.d-features{padding:12rem 0}
.d-features .row{gap:8rem;align-items:flex-start}
.d-features .b-list{flex:1 1 38rem;max-width:52rem}
.d-features .b-media{flex:1 1 44rem;position:sticky;top:14rem}
.d-features .b-media .img-div{height:60rem;border-radius:1rem}
.d-features .f-item{padding:2.4rem 0;border-bottom:1px solid rgba(40,40,40,.16);cursor:pointer}
.d-features .f-item:first-child{border-top:1px solid rgba(40,40,40,.16)}
.d-features .f-item h4{font-size:2.4rem;transition:color .4s ease}
.d-features .f-item .f-txt{max-height:0;overflow:hidden;opacity:0;
transition:max-height .55s var(--ease),opacity .4s ease,margin .4s ease}
.d-features .f-item.active h4{color:var(--bronce)}
.d-features .f-item.active .f-txt{max-height:20rem;opacity:1;margin-top:1.2rem}
@media (max-width:991px){ .d-features{padding:8rem 0} .d-features .b-media{position:static} }
/* fichas de datos */
.d-facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(40,40,40,.14);
border-bottom:1px solid rgba(40,40,40,.14)}
.d-facts > div{padding:4rem 3rem;border-right:1px solid rgba(40,40,40,.14)}
.d-facts > div:last-child{border-right:0}
.d-facts b{display:block;font-family:var(--display);font-weight:400;font-size:4.2rem;line-height:1;
margin-bottom:1.2rem}
/* El turquesa cambia de sitio (05/10/2026): el «min» del número hereda el color
del número, y las etiquetas —Apertura, Estudios, Casas de la familia, Andando
al Mercado Central— pasan a turquesa, que es donde hacen de encabezado.
`inherit` explícito para que no lo recoja ninguna regla de `.st` posterior.
Los cinco `.d-facts` del sitio (Conócenos y las cuatro fichas) van dentro de
`.d-intro-img.color-bg-noche`: turquesa sobre #0E0E0E da 12,1:1. Si algún día
se pone sobre fondo claro, esto NO sirve —ni el turquesa ni el oscuro llegan
a 4,5:1 sobre blanco— y habría que oscurecerlo de verdad. */
.d-facts b .st{color:inherit}
.d-facts span{font-size:1.1rem;letter-spacing:.18em;text-transform:uppercase;color:var(--turquesa)}
@media (max-width:767.98px){
.d-facts{grid-template-columns:repeat(2,1fr)}
.d-facts > div:nth-child(2n){border-right:0}
}
/* preguntas frecuentes */
.d-faqs{padding:12rem 0;background-color:var(--lino)}
.d-faqs .b-title{max-width:60rem;margin-bottom:6rem}
.d-faqs .b-collapse{border-top:1px solid rgba(40,40,40,.16);max-width:110rem}
.d-faqs details{border-bottom:1px solid rgba(40,40,40,.16)}
.d-faqs summary{list-style:none;cursor:pointer;padding:2.8rem 0;display:flex;justify-content:space-between;
gap:3rem;align-items:center;font-family:var(--display);font-size:2rem;transition:color .4s ease}
.d-faqs summary::-webkit-details-marker{display:none}
.d-faqs summary::after{content:"+";font-family:var(--texto);font-size:2.4rem;font-weight:200;
color:var(--turquesa-osc);transition:transform .4s ease}
.d-faqs details[open] summary{color:var(--bronce)}
.d-faqs details[open] summary::after{content:"–"}
.d-faqs .in{padding:0 0 3rem;max-width:80rem;color:var(--topo);font-size:1.6rem}
/* blog destacado */
.d-featured-blog{padding:12rem 0;background-color:var(--hueso)}
.d-featured-blog .b-head{display:flex;justify-content:space-between;align-items:flex-end;gap:3rem;
flex-wrap:wrap;margin-bottom:6rem}
.d-featured-blog .b-blog{display:grid;grid-template-columns:repeat(3,1fr);gap:4rem}
.d-featured-blog .card .img-div{height:34rem;border-radius:.5rem;margin-bottom:2.4rem}
.d-featured-blog .card:hover .img-div img{transform:scale(1.04)}
.d-featured-blog .card .p-section{color:var(--turquesa-texto);margin-bottom:1rem}
.d-featured-blog .card .title{font-size:2.2rem;margin-bottom:2rem}
@media (max-width:991px){ .d-featured-blog .b-blog{grid-template-columns:1fr} }
/* ubicación */
.d-location{padding:12rem 0}
.d-location .row{gap:8rem;align-items:center}
.d-location .b-map{flex:1 1 46rem}
.d-location .b-map .ph{height:52rem;border-radius:1rem}
.d-location .b-text{flex:1 1 36rem;max-width:48rem}
.d-location .b-datos{margin-top:3rem;border-top:1px solid rgba(40,40,40,.14)}
.d-location .b-datos li{display:flex;justify-content:space-between;gap:2rem;padding:1.6rem 0;
border-bottom:1px solid rgba(40,40,40,.14);font-size:1.5rem}
.d-location .b-datos li span:first-child{color:var(--topo);font-size:1.1rem;letter-spacing:.18em;
text-transform:uppercase}
@media (max-width:991px){ .d-location{padding:8rem 0} .d-location .row{gap:4rem} }
/* newsletter */
.d-newsletter{padding:10rem 0;background-color:var(--crema)}
.d-newsletter .inner{max-width:92rem;margin:0 auto;text-align:center}
.d-newsletter .form{display:flex;gap:1.5rem;margin-top:4rem;flex-wrap:wrap;justify-content:center}
.d-newsletter input[type=email]{flex:1 1 34rem;border:0;border-bottom:1px solid rgba(40,40,40,.3);
background:none;padding:1.6rem 0;font-family:var(--display);font-size:1.8rem;outline:0}
.d-newsletter .legal{margin-top:2.4rem;font-size:1.2rem;color:var(--topo)}
/* pie */
footer{background-color:var(--noche);color:rgba(255,255,255,.6);padding:10rem 0 0}
footer .top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:6rem;padding-bottom:6rem;
border-bottom:1px solid rgba(255,255,255,.14)}
footer h5{font-family:var(--texto);font-weight:500;font-size:1.1rem;letter-spacing:.2em;
text-transform:uppercase;color:var(--turquesa);margin-bottom:2.4rem}
footer li{margin-bottom:1.2rem;font-size:1.5rem}
footer a:hover{color:var(--blanco)}
/* Aquí estaban `.name` y `.desc` del logotipo escrito del pie, borradas el 05/10/2026 por lo mismo. */
footer .group{margin-top:2.4rem;font-size:1.4rem;line-height:1.6;color:rgba(255,255,255,.45)}
footer .group b{color:rgba(255,255,255,.85);font-weight:400;font-family:var(--display)}
footer .bot{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;padding:2.6rem 0;
font-size:1.1rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.4)}
@media (max-width:991px){ footer .top{grid-template-columns:1fr 1fr} }
@media (max-width:600px){ footer .top{grid-template-columns:1fr} }
/* legal */
.d-legal{padding:18rem 0 12rem}
.d-legal .row{gap:8rem;align-items:flex-start}
.d-legal .b-body{flex:1 1 60rem;max-width:92rem;font-size:1.6rem;line-height:1.75}
.d-legal .b-body h2{font-size:2.8rem;margin:6rem 0 2rem;padding-top:3rem;
border-top:1px solid rgba(40,40,40,.14)}
.d-legal .b-body h2:first-child{margin-top:0;border-top:0;padding-top:0}
.d-legal .b-body h3{font-size:1.9rem;margin:3.4rem 0 1.4rem}
.d-legal .b-body li{position:relative;padding-left:2.6rem;margin-bottom:1rem}
.d-legal .b-body li::before{content:"\2726";position:absolute;left:0;top:.1rem;
color:var(--turquesa-osc);font-size:1rem}
.d-legal table{width:100%;border-collapse:collapse;margin:2.4rem 0 3.4rem;font-size:1.5rem}
.d-legal th,.d-legal td{text-align:left;padding:1.4rem;border-bottom:1px solid rgba(40,40,40,.14);
vertical-align:top}
.d-legal th{font-family:var(--texto);font-weight:500;font-size:1.1rem;letter-spacing:.16em;
text-transform:uppercase;color:var(--topo)}
.d-legal .toc{flex:1 1 26rem;max-width:32rem;position:sticky;top:16rem;
border-left:1px solid rgba(40,40,40,.14);padding-left:2.6rem}
.d-legal .toc a{display:block;padding:1.2rem 0;font-size:1.4rem;color:var(--topo);
border-bottom:1px solid rgba(40,40,40,.14)}
.d-legal .toc a:hover{color:var(--grafito)}
@media (max-width:991px){ .d-legal{padding:14rem 0 8rem} .d-legal .toc{display:none} }
/* formulario */
.d-form .form{display:grid;grid-template-columns:1fr 1fr;border:1px solid rgba(40,40,40,.14);
border-radius:.5rem;overflow:hidden}
.d-form .f{border-bottom:1px solid rgba(40,40,40,.14);border-right:1px solid rgba(40,40,40,.14);
padding:2rem 2.4rem}
.d-form .f:nth-child(2n){border-right:0}
.d-form .f--full{grid-column:1/-1;border-right:0}
.d-form label{display:block;font-size:1rem;letter-spacing:.2em;text-transform:uppercase;
color:var(--topo);margin-bottom:.8rem;font-weight:500}
.d-form input,.d-form select,.d-form textarea{width:100%;border:0;background:none;outline:0;
font-family:var(--display);font-size:1.7rem;color:var(--grafito)}
.d-form textarea{font-family:var(--texto);font-weight:300;font-size:1.6rem;resize:vertical;min-height:10rem}
@media (max-width:767.98px){ .d-form .form{grid-template-columns:1fr} .d-form .f{border-right:0} }
/* aviso de plantilla (solo revisión) */
.tplnote{background:var(--turquesa);color:var(--noche);font-size:1.1rem;letter-spacing:.14em;
text-transform:uppercase;padding:1rem 0;text-align:center;position:relative;z-index:70}
.tplnote b{font-weight:600}
/* utilidades */
.mt-1{margin-top:1rem}.mt-2{margin-top:2rem}.mt-3{margin-top:3rem}.mt-4{margin-top:4rem}
.mt-6{margin-top:6rem}.mb-4{margin-bottom:4rem}
.st{font-style:normal}
.measure{max-width:56ch}
/* --------------------------------------------------------------------------
SWIPER · núcleo mínimo (evita depender de la hoja de estilos del CDN)
-------------------------------------------------------------------------- */
.swiper{margin:0 auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;
display:block}
.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;
transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function,initial);
box-sizing:content-box}
.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;
transition-property:transform;display:block}
.swiper-backface-hidden .swiper-slide{transform:translateZ(0);backface-visibility:hidden}
.swiper-horizontal{touch-action:pan-y}
.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}
/* el slider de habitaciones necesita ver las diapositivas vecinas */
.rt-list.swiper{overflow:visible}
/* --------------------------------------------------------------------------
FOTOGRAFÍA REAL · reglas para las dentro de cada contenedor
-------------------------------------------------------------------------- */
.rt-item__image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.d-carousel-multimedia .media img{width:27.3rem;height:38.7rem;object-fit:cover;border-radius:1rem;
transition:transform .5s var(--ease-out);display:block}
.d-carousel-multimedia .media:hover img{transform:scale(1.05)}
.d-carousel-multimedia .media.web-cam img{width:28.7rem;height:28.7rem}
.d-gallery-masonry .gallery img{width:100%;height:auto;display:block;border-radius:1rem;
margin-bottom:3rem;transition:transform .3s ease-in-out;cursor:pointer;break-inside:avoid}
.d-gallery-masonry .gallery img:hover{transform:scale(1.02)}
.hover-list .media-container img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.modal-gallery img{width:100%;max-height:78vh;object-fit:contain;border-radius:1rem;display:block}
.d-features .b-media .img-div img{transition:opacity .5s ease}
/* el marcador gris solo se usa ya para el mapa y el vídeo, que siguen pendientes */
/* ==========================================================================
AJUSTES v3 · un solo menú, slider más contenido, banda negra dispersa
Este bloque va al final a propósito: gana al anterior.
========================================================================== */
/* ---------------------------------------------- cabecera: solo hamburguesa */
header .container-fluid{display:flex;justify-content:space-between;align-items:center;gap:3rem}
header .b-menu-links{display:flex;align-items:center;gap:0}
header .logo-lockup{margin-right:0}
header .b-menu-lang{gap:2.8rem}
header .b-menu-lang .btn-reservar{padding:1.2rem 2.8rem;font-size:1.3rem}
/* botón de cerrar del menú a pantalla completa */
.site-nav__close{
position:absolute;top:4.6rem;right:4rem;z-index:2;display:flex;align-items:center;gap:1.2rem;
color:var(--blanco);font-family:var(--texto);font-size:1.3rem;letter-spacing:.14em;
text-transform:uppercase;cursor:pointer;background:none;border:0;
}
.site-nav__close .x{
position:relative;width:3.4rem;height:3.4rem;border:1px solid rgba(255,255,255,.35);
border-radius:50%;display:grid;place-items:center;transition:background .4s ease,border-color .4s ease
}
.site-nav__close:hover .x{background:var(--turquesa);border-color:var(--turquesa);color:var(--noche)}
@media (max-width:767.98px){ .site-nav__close{top:3.4rem;right:2rem} .site-nav__close span.t{display:none} }
/* ---------------------------------- slider de estudios: más pequeño y sin cortes */
.d-rooms-teaser{padding:9rem 0}
@media (max-width:767.98px){ .d-rooms-teaser{padding:6rem 0} }
.d-rooms-teaser .rt-head{margin-bottom:5rem;max-width:64rem}
@media (max-width:767.98px){ .d-rooms-teaser .rt-head{margin-bottom:3.4rem} }
/* el carril se mete dentro de un ancho máximo y deja sitio a las flechas */
.d-rooms-teaser .rt-slider{max-width:150rem;margin:0 auto;padding:0 9rem}
@media (max-width:1024px){ .d-rooms-teaser .rt-slider{padding:0 2rem} }
.d-rooms-teaser .rt-item__title > *{font-size:6rem}
@media (max-width:1366px){ .d-rooms-teaser .rt-item__title > *{font-size:5rem} }
@media (max-width:1024px){ .d-rooms-teaser .rt-item__title > *{font-size:3.6rem} }
.d-rooms-teaser .rt-item__top{margin-top:-2.4rem}
@media (max-width:1024px){ .d-rooms-teaser .rt-item__top{margin-top:-1.6rem} }
.d-rooms-teaser .rt-item__content{padding-left:3.4rem;padding-right:3.4rem}
@media (max-width:1024px){ .d-rooms-teaser .rt-item__content{padding-left:1.4rem;padding-right:1.4rem} }
.d-rooms-teaser .rt-item__bottom{margin-top:1.4rem}
.d-rooms-teaser .rt-item__info{gap:3.4rem;flex-wrap:wrap}
.d-rooms-teaser .rt-item__size > *,.d-rooms-teaser .rt-item__persons > *{font-size:1.5rem}
.d-rooms-teaser .rt-item__price > span{font-size:1.3rem}
.d-rooms-teaser .rt-item__price > span.bold{font-size:1.7rem}
.d-rooms-teaser .rt-item__frase{margin-top:1rem;font-size:1.5rem;color:var(--topo);max-width:52rem}
.d-rooms-teaser .rt-item__detail{margin-top:2rem}
.d-rooms-teaser .rt-item__cta{right:2rem;bottom:2rem;gap:1rem}
.d-rooms-teaser .rt-item__cta .button{padding:1rem 2rem;font-size:1.2rem;border-radius:4rem}
@media (max-width:1024px){ .d-rooms-teaser .rt-item__cta{top:1.2rem;bottom:auto;right:1.2rem} }
/* flechas dentro del contenedor, nunca cortadas */
.d-rooms-teaser .rt-arrows{position:absolute;inset:0 0 auto 0;aspect-ratio:auto;height:0;z-index:4}
.d-rooms-teaser .rt-arrow{
position:absolute;top:22rem;width:4.8rem;height:4.8rem;transform:translateY(-50%);
font-size:1.5rem;background:var(--blanco);border:1px solid rgba(40,40,40,.2)
}
.d-rooms-teaser .rt-arrow[data-direction="prev"]{left:1.6rem}
.d-rooms-teaser .rt-arrow[data-direction="next"]{right:1.6rem;left:auto}
@media (max-width:1024px){
.d-rooms-teaser .rt-arrows{position:static;height:auto;display:flex;justify-content:flex-end;
gap:1rem;margin:2.4rem 2rem 0}
.d-rooms-teaser .rt-arrow{position:static;transform:none;top:auto;left:auto;right:auto}
}
/* ------------------------------- banda negra: fotos sueltas, no en cuadrícula */
.d-carousel-multimedia .medias{
display:flex;align-items:center;gap:0;grid-template-rows:none;grid-auto-flow:unset;height:100%
}
.d-carousel-multimedia .media{flex:0 0 auto;margin:0 1.2rem}
.d-carousel-multimedia .media,.d-carousel-multimedia .media img{width:24rem;height:34rem}
/* cada una a su aire: tamaño, altura y giro distintos */
.d-carousel-multimedia .media:nth-child(6n+1){transform:translateY(-9rem) rotate(-2.5deg)}
.d-carousel-multimedia .media:nth-child(6n+1),
.d-carousel-multimedia .media:nth-child(6n+1) img{width:30rem;height:21rem}
.d-carousel-multimedia .media:nth-child(6n+2){transform:translateY(7rem) rotate(1.8deg)}
.d-carousel-multimedia .media:nth-child(6n+2),
.d-carousel-multimedia .media:nth-child(6n+2) img{width:22rem;height:31rem}
.d-carousel-multimedia .media:nth-child(6n+3){transform:translateY(-16rem) rotate(3deg)}
.d-carousel-multimedia .media:nth-child(6n+3),
.d-carousel-multimedia .media:nth-child(6n+3) img{width:26rem;height:18rem}
.d-carousel-multimedia .media:nth-child(6n+4){transform:translateY(13rem) rotate(-1.4deg)}
.d-carousel-multimedia .media:nth-child(6n+4),
.d-carousel-multimedia .media:nth-child(6n+4) img{width:34rem;height:24rem}
.d-carousel-multimedia .media:nth-child(6n+5){transform:translateY(-4rem) rotate(2.2deg)}
.d-carousel-multimedia .media:nth-child(6n+5),
.d-carousel-multimedia .media:nth-child(6n+5) img{width:21rem;height:29rem}
.d-carousel-multimedia .media:nth-child(6n){transform:translateY(18rem) rotate(-3deg)}
.d-carousel-multimedia .media:nth-child(6n),
.d-carousel-multimedia .media:nth-child(6n) img{width:28rem;height:20rem}
.d-carousel-multimedia .media:hover{z-index:3}
/* el texto centrado necesita separarse del revoltijo */
.d-carousel-multimedia .b-block{
background:radial-gradient(60% 60% at 50% 50%,rgba(14,14,14,.92) 0%,rgba(14,14,14,.6) 60%,rgba(14,14,14,0) 100%);
padding:6rem 4rem;width:58rem;max-width:calc(100% - 4rem)
}
@media (max-width:991px){
/* Una sola fila que se arrastra con el dedo (29/09/2026). Antes era una
rejilla de dos columnas: con doce fotos salían seis filas y la sección se
alargaba sin fin. El !important ya estaba aquí y hace falta, porque las
reglas :nth-child de la composición de escritorio fijan un tamaño distinto
a cada foto; lo que cambia son los valores, no la técnica. */
.d-carousel-multimedia .medias{display:flex;width:max-content;gap:1.5rem}
.d-carousel-multimedia .media,.d-carousel-multimedia .media img,
.d-carousel-multimedia .media:nth-child(n),
.d-carousel-multimedia .media:nth-child(n) img{width:26rem!important;height:34rem!important;
transform:none!important;margin:0}
.d-carousel-multimedia .b-block{background:none;padding:0}
}
/* ------------------------------------------------------- FAQs centradas */
.d-faqs .b-title{max-width:72rem;margin:0 auto 6rem;text-align:center}
.d-faqs .b-collapse{max-width:104rem;margin:0 auto}
.d-faqs summary{gap:4rem}
.d-faqs .in{max-width:none;padding-right:5rem}
/* ------------------------------------------- ubicación: ahora lleva foto */
.d-location .b-map .img-div{height:52rem;border-radius:1rem}
@media (max-width:991px){ .d-location .b-map .img-div{height:34rem} }
/* --------------------------------------------------- bloques nuevos de la v3 */
/* reseñas */
.d-reviews{padding:11rem 0;background-color:var(--crema)}
.d-reviews .b-head{text-align:center;max-width:64rem;margin:0 auto 5rem}
.d-reviews .b-quotes{display:grid;grid-template-columns:repeat(2,1fr);gap:4rem;max-width:120rem;margin:0 auto}
.d-reviews blockquote{margin:0;padding:3.4rem;background:var(--blanco);border-radius:.5rem}
.d-reviews blockquote p{font-family:var(--display);font-size:1.9rem;line-height:1.5;color:var(--grafito)}
.d-reviews .fuente{text-align:center;margin-top:3rem;font-size:1.2rem;letter-spacing:.16em;
text-transform:uppercase;color:var(--topo)}
@media (max-width:767.98px){ .d-reviews{padding:7rem 0} .d-reviews .b-quotes{grid-template-columns:1fr} }
/* pasos numerados */
.d-steps{counter-reset:paso;margin-top:3rem;border-top:1px solid rgba(40,40,40,.16)}
.d-steps .paso{display:grid;grid-template-columns:5rem 1fr;gap:2rem;padding:2.2rem 0;
border-bottom:1px solid rgba(40,40,40,.16)}
.d-steps .paso::before{counter-increment:paso;content:"0" counter(paso);font-family:var(--texto);
font-weight:500;font-size:1.2rem;letter-spacing:.18em;color:var(--turquesa-osc)}
.d-steps .paso h4{font-family:var(--texto);font-weight:500;font-size:1.1rem;letter-spacing:.18em;
text-transform:uppercase;color:var(--topo);margin-bottom:.6rem}
.d-steps .paso p{font-size:1.6rem;margin:0}
/* tabla de datos / de lo que no tenemos */
.tabla{width:100%;border-collapse:collapse;font-size:1.5rem;margin-top:3rem}
.tabla th,.tabla td{text-align:left;padding:1.6rem 1.4rem;border-bottom:1px solid rgba(40,40,40,.14);
vertical-align:top}
.tabla th{font-family:var(--texto);font-weight:500;font-size:1.1rem;letter-spacing:.16em;
text-transform:uppercase;color:var(--topo)}
.tabla td:first-child{font-family:var(--display);font-size:1.7rem;width:34%}
.color-bg-noche .tabla th,.color-bg-noche .tabla td{border-bottom-color:rgba(255,255,255,.16)}
.color-bg-noche .tabla td:first-child{color:var(--blanco)}
/* listas de dos y tres columnas (Entorno, equipamiento) */
.lista-cols{columns:2;column-gap:5rem;margin-top:2.4rem}
.lista-cols li{break-inside:avoid;padding:1.2rem 0;border-bottom:1px solid rgba(40,40,40,.14);
font-size:1.6rem;position:relative;padding-left:2.4rem}
.lista-cols li::before{content:"\2726";position:absolute;left:0;top:1.3rem;color:var(--turquesa-osc);
font-size:1rem}
@media (max-width:767.98px){ .lista-cols{columns:1} }
/* nota honesta */
.nota-honesta{margin-top:3rem;padding:2.4rem 2.8rem;border-left:2px solid var(--turquesa-osc);
background:rgba(149,218,207,.09);font-size:1.6rem;line-height:1.6}
.color-bg-noche .nota-honesta{background:rgba(149,218,207,.08);color:rgba(255,255,255,.78)}
/* refuerzo bajo los botones de reservar */
.refuerzo{margin-top:1.6rem;font-size:1.3rem;line-height:1.5;color:var(--topo);max-width:46rem}
.color-bg-noche .refuerzo{color:rgba(255,255,255,.6)}
.letra-pequena{margin-top:2rem;font-size:1.1rem;line-height:1.5;color:var(--topo)}
/* cierre de reserva directa */
.d-closing{padding:11rem 0;background-color:var(--noche);color:rgba(255,255,255,.75);text-align:center}
.d-closing .inner{max-width:86rem;margin:0 auto}
.d-closing .title{color:var(--blanco);margin-bottom:2.4rem}
.d-closing .b-btn{margin-top:4rem;display:flex;justify-content:center}
@media (max-width:767.98px){ .d-closing{padding:7rem 0} }
/* caja de accesibilidad */
.caja-acceso{margin-top:4rem;padding:3rem 3.4rem;border:1px solid var(--turquesa-osc);border-radius:.5rem}
.caja-acceso h4{font-family:var(--texto);font-weight:500;font-size:1.1rem;letter-spacing:.18em;
text-transform:uppercase;color:var(--turquesa-osc);margin-bottom:1.4rem}
/* pie del héroe y subtítulo centrado */
.d-hero .b-block .sub{color:rgba(255,255,255,.82);max-width:62rem;margin:2.6rem auto 0;
font-size:1.7rem;line-height:1.6}
.d-hero .b-block .pie-hero{margin-top:3rem;font-size:1.2rem;letter-spacing:.14em;
text-transform:uppercase;color:rgba(255,255,255,.6)}
.d-banner-full .b-block .t-l{max-width:none}
/* --------------------------------------- correcciones tras revisar el render */
/* el texto del héroe se perdía sobre el suelo claro de la terraza */
/* velo uniforme del 48 %, como pide el manual, más peso abajo para la barra */
.d-hero .img-div::after{
background:rgba(14,14,14,.48)!important;
}
.d-hero .img-div::before{
content:"";position:absolute;inset:0;z-index:1;
background:linear-gradient(to top,rgba(14,14,14,.45) 0%,rgba(14,14,14,0) 38%,
rgba(14,14,14,0) 72%,rgba(14,14,14,.35) 100%);
}
.d-banner-full .img-div::after{background:rgba(14,14,14,.52)!important}
.d-hero .b-block .sub{color:rgba(255,255,255,.92)}
.d-hero .b-block .pie-hero{color:rgba(255,255,255,.75)}
/* las flechas, centradas sobre la foto de la diapositiva activa */
.d-rooms-teaser .rt-arrow{top:27rem}
/* el primer icono de la marquesina repetía la cifra del texto */
.d-advantages .b-adv .ico{font-size:1.4rem}
/* el subtítulo del héroe es texto fino sobre foto: necesita apoyo para leerse */
.d-hero .b-block{text-shadow:0 1px 26px rgba(14,14,14,.6),0 1px 3px rgba(14,14,14,.45)}
.d-hero .b-block .button{text-shadow:none}
.d-hero .b-block .sub{font-size:1.8rem}
.d-banner-full .b-block{text-shadow:0 1px 26px rgba(14,14,14,.5)}
/* ==========================================================================
AJUSTES v4 · márgenes, retícula uniforme y bloques visuales
========================================================================== */
/* -------------------------------------------- márgenes laterales de verdad */
.container-fluid{
padding:0 clamp(2rem, 4.6vw, 10rem);
max-width:190rem;
margin-left:auto;margin-right:auto;
}
@media (max-width:767.98px){ .container-fluid{padding:0 2.4rem} }
/* las dos columnas: más hueco entre texto y foto, y el texto con su medida */
.d-hero-2col{padding-top:20rem;padding-bottom:10rem}
.d-hero-2col .row{align-items:center;gap:clamp(4rem,6.5vw,11rem)}
.d-hero-2col .b-block{flex:1 1 44rem;max-width:64rem}
/* el titular a 7.2rem partía en cinco líneas dentro de media columna */
.d-hero-2col .b-block .title.t-xl{font-size:clamp(3.4rem,4.4vw,5.4rem);line-height:1.08}
.d-hero-2col .b-img{flex:1 1 46rem}
.d-hero-2col .b-img .img-div{height:60rem}
@media (max-width:991px){
.d-hero-2col{padding-top:14rem;padding-bottom:7rem}
.d-hero-2col .b-img .img-div{height:36rem}
}
.d-img-info .row{align-items:center;gap:clamp(4rem,6.5vw,11rem)}
.d-img-info .b-text{flex:1 1 40rem;max-width:58rem}
.d-location .row{gap:clamp(4rem,6.5vw,11rem);align-items:center}
.d-location .b-text{flex:1 1 38rem;max-width:56rem}
.d-features .row{gap:clamp(4rem,6.5vw,11rem)}
/* la foto a sangre puede llegar al borde, pero el texto necesita aire */
.d-info-list .b-info{padding:10rem clamp(3rem,6.5vw,11rem)}
.d-info-list .b-info > div{max-width:60rem;margin-left:auto;margin-right:auto}
@media (max-width:991px){ .d-info-list .b-info{padding:7rem 2.4rem} }
/* cabecera del slider de estudios: centrada, como las FAQs */
.d-rooms-teaser .rt-head{max-width:76rem;margin:0 auto 6rem;text-align:center}
.d-rooms-teaser .rt-head .anchor{margin-left:auto;margin-right:auto}
.d-rooms-teaser .rt-head .rt-rte{max-width:62rem;margin:0 auto 3.4rem}
@media (max-width:767.98px){ .d-rooms-teaser .rt-head{margin-bottom:4rem} }
/* bloques de intro centrados con medida cómoda */
.d-intro-img .b-block{max-width:86rem}
.d-closing .inner{max-width:76rem}
/* ------------------------------------------- FAQs: también el texto centrado */
.d-faqs summary{justify-content:center;gap:2rem;text-align:center}
.d-faqs summary::after{position:static;flex:0 0 auto}
.d-faqs .in{text-align:center;max-width:76rem;margin:0 auto;padding-right:0}
/* ------------------------------- rejilla de estudios: las cuatro iguales */
.d-grid-rooms .container-fluid{max-width:148rem}
.d-grid-rooms .b-grid > div{display:grid;grid-template-columns:repeat(2,1fr);gap:5rem 4rem}
.d-grid-rooms .b-grid .b-card{width:100%}
.d-grid-rooms .b-grid .b-card .img-div{height:46rem;width:100%;border-radius:.5rem}
@media (max-width:991px){
.d-grid-rooms .b-grid > div{grid-template-columns:1fr;gap:4rem}
.d-grid-rooms .b-grid .b-card .img-div{height:32rem}
}
.d-grid-rooms .b-room .b-text{padding:2.4rem 0 0}
@media (min-width:768px){ .d-grid-rooms .b-room .b-text{padding:2.4rem 0 0} }
.d-grid-rooms .b-room .b-btn{position:static;margin-top:2.4rem}
/* ------------------------------------ «lo que no tenemos» en tarjetas honestas */
.d-honest{padding:10rem 0}
.d-honest .b-head{max-width:76rem;margin:0 auto 6rem;text-align:center}
.d-honest .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4rem;max-width:148rem;margin:0 auto}
@media (max-width:1100px){ .d-honest .grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:700px){ .d-honest .grid{grid-template-columns:1fr} }
.d-honest .card-h{
border:1px solid rgba(40,40,40,.14);border-radius:.5rem;padding:3rem 3rem 3.4rem;
background:var(--blanco);position:relative;overflow:hidden;
transition:border-color .45s var(--ease),transform .45s var(--ease);
}
.d-honest .card-h::before{
content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--turquesa);
transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease);
}
.d-honest .card-h:hover{border-color:rgba(40,40,40,.28);transform:translateY(-.4rem)}
.d-honest .card-h:hover::before{transform:scaleY(1)}
.d-honest .no{
display:flex;align-items:baseline;gap:1.2rem;font-family:var(--display);font-size:2.2rem;
line-height:1.2;color:var(--topo);position:relative;
}
.d-honest .no .t{position:relative}
.d-honest .no .t::after{
content:"";position:absolute;left:-.2rem;right:-.2rem;top:52%;height:1px;background:var(--topo);opacity:.55;
}
.d-honest .no .cruz{font-family:var(--texto);font-size:1.4rem;color:var(--topo);flex:0 0 auto}
.d-honest .si{
margin-top:2rem;padding-top:2rem;border-top:1px solid rgba(40,40,40,.12);
display:flex;gap:1.2rem;align-items:flex-start;
}
.d-honest .si .fl{color:var(--turquesa-osc);font-size:1.6rem;line-height:1.5;flex:0 0 auto}
.d-honest .si p{margin:0;font-size:1.55rem;line-height:1.55;color:var(--grafito)}
/* -------------------------------- servicios agrupados en tarjetas con iconos */
.d-servicios-grid{padding:10rem 0;background-color:var(--lino)}
.d-servicios-grid .b-head{max-width:76rem;margin:0 auto 6rem;text-align:center}
.d-servicios-grid .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2.4rem;
max-width:158rem;margin:0 auto}
@media (max-width:1200px){ .d-servicios-grid .grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .d-servicios-grid .grid{grid-template-columns:1fr} }
.d-servicios-grid .bloque{background:var(--blanco);border-radius:.5rem;padding:3.4rem 3rem;
display:flex;flex-direction:column}
.d-servicios-grid .bloque h3{
font-family:var(--texto);font-weight:500;font-size:1.1rem;letter-spacing:.2em;
text-transform:uppercase;color:var(--bronce);padding-bottom:2rem;
border-bottom:1px solid rgba(40,40,40,.14);margin-bottom:1rem;
}
.d-servicios-grid li{display:flex;gap:1.6rem;align-items:flex-start;padding:1.6rem 0;
border-bottom:1px solid rgba(40,40,40,.08);font-size:1.55rem;line-height:1.5}
.d-servicios-grid li:last-child{border-bottom:0;padding-bottom:0}
.d-servicios-grid li .ic{flex:0 0 auto;width:2.4rem;height:2.4rem;color:var(--turquesa-osc);margin-top:.1rem}
.d-servicios-grid li .ic svg{width:100%;height:100%;display:block}
.d-servicios-grid li b{font-weight:500;color:var(--grafito)}
.d-servicios-grid li span.coste{display:block;margin-top:.3rem;font-size:1.25rem;
letter-spacing:.06em;color:var(--topo)}
/* equipamiento dentro de la ficha */
.d-equipo{padding:14rem 0 10rem;background-color:var(--crema)}
.d-equipo .b-head{max-width:76rem;margin:0 auto 5rem;text-align:center}
.d-equipo .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4rem;max-width:140rem;margin:0 auto}
@media (max-width:991px){ .d-equipo .grid{grid-template-columns:1fr} }
.d-equipo .bloque{background:var(--blanco);border-radius:.5rem;padding:3rem}
.d-equipo .bloque h3{font-family:var(--texto);font-weight:500;font-size:1.1rem;letter-spacing:.2em;
text-transform:uppercase;color:var(--bronce);margin-bottom:1.6rem}
.d-equipo li{display:flex;gap:1.4rem;align-items:flex-start;padding:1rem 0;font-size:1.55rem;line-height:1.5}
.d-equipo li .ic{flex:0 0 auto;width:2rem;height:2rem;color:var(--turquesa-osc);margin-top:.2rem}
.d-equipo li .ic svg{width:100%;height:100%;display:block}
.d-equipo .nota-honesta{max-width:140rem;margin:3.4rem auto 0}
/* la rejilla de estudios alineada con el resto de la página, no más estrecha */
.d-grid-rooms .container-fluid{max-width:190rem}
.d-grid-rooms .b-grid .b-card .img-div{height:48rem}
@media (max-width:991px){ .d-grid-rooms .b-grid .b-card .img-div{height:32rem} }
/* siete «no tenemos» no cuadran en tres columnas: la última ocupa la fila entera */
.d-honest .card-h:last-child{grid-column:1/-1;display:grid;grid-template-columns:1fr 1.6fr;
gap:3rem;align-items:center}
.d-honest .card-h:last-child .si{margin-top:0;padding-top:0;border-top:0;
border-left:1px solid rgba(40,40,40,.12);padding-left:3rem}
@media (max-width:700px){
.d-honest .card-h:last-child{grid-template-columns:1fr}
.d-honest .card-h:last-child .si{border-left:0;padding-left:0;margin-top:2rem;padding-top:2rem;
border-top:1px solid rgba(40,40,40,.12)}
}
/* ==========================================================================
ARREGLOS DE MÓVIL · 21-09-2026
Este bloque va al final a propósito: gana a todo lo anterior.
Solo toca anchos <= 767.98px. El escritorio no cambia.
========================================================================== */
/* --- marquesina: los clones del bucle solo existen cuando hay animación --- */
@media (max-width:767.98px){ .d-advantages .b-adv.adv-dup{display:none} }
@media (prefers-reduced-motion:reduce){ .d-advantages .b-adv.adv-dup{display:none} }
@media (max-width:767.98px){
/* --- cabecera: logo + reservar + hamburguesa, y nada más --- */
header .container-fluid{gap:1.6rem}
header .b-menu-lang{gap:1.6rem}
header .b-lang{display:none} /* ES/EN se mueve al menú desplegable */
.menu-toggle p{display:none}
.menu-toggle{gap:0}
.menu-toggle-2 > div{width:22px}
header .b-menu-lang .btn-reservar{padding:1rem 1.8rem;font-size:1.15rem;letter-spacing:.08em}
/* Aquí estaban los tamaños de móvil de `.name` y `.desc`, borrados el 05/10/2026: el ancho del SVG se controla en .logo-lockup. */
/* --- barra de reserva: fechas arriba, botón a todo el ancho debajo --- */
.d-motor{padding:.8rem}
.d-motor .b-inputs{flex-wrap:wrap;width:100%;border-radius:2.2rem}
.d-motor .cell{flex:1 1 50%;min-width:0;padding:.9rem 1.6rem}
.d-motor .cell:nth-child(2){border-right:0}
.d-motor label{font-size:.95rem;letter-spacing:.12em;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d-motor input{font-size:1.5rem}
.d-motor .button{flex:1 0 100%;padding:1.3rem 2rem;font-size:1.25rem;
border-top:1px solid rgba(40,40,40,.12)}
}
/* las frases largas de la marquesina caben en el móvil en vez de salirse */
@media (max-width:767.98px){
.d-advantages .b-adv{white-space:normal;max-width:100%}
.d-advantages .b-adv .ico{flex:0 0 auto}
}
/* la tabla de datos de "Conócenos" ya no ensancha su columna: scroll propio */
@media (max-width:767.98px){ .row > .b-text{min-width:0} }
/* --------------------------------------------------------------------------
FOCO VISIBLE (28/09/2026)
El diseño no definía ninguno: cero reglas de :focus en todo el archivo. Quien
navega con teclado no veía dónde estaba. :focus-visible solo salta con
teclado, así que esto no cambia nada de lo que ve quien usa el ratón.
Grafito por defecto: el turquesa sobre fondo claro se queda en 1,6:1 de
contraste y la norma pide 3:1.
-------------------------------------------------------------------------- */
:focus-visible{ outline:2px solid var(--grafito); outline-offset:3px }
/* En las pestañas del listado el anillo rodea la píldora entera, no solo el
texto del