* { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 88px; overflow-x: hidden; } body { margin: 0; font: 16px/1.7 var(--sans); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; display: block; } h1, h2, h3 { font-family: var(--serif); line-height: 1.1; margin: 0; font-weight: 600; } a { color: var(--accent2); text-decoration: none; transition: color 0.15s; } a:hover { color: var(--gold); text-decoration: none; } a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .eyebrow { display: block; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 0.9rem; } /* ---------- Estilo de título de sección seleccionable por sitio (site.heading_style) ---------- "plain" (defecto) es el h2/.eyebrow de arriba, sin cambios. Los títulos aparecen repartidos en muchas plantillas (welcome, verdict, rooms, gallery, amenities, getting-there, location...), así que se centraliza vía clase en , igual que button_style. */ body.heading-style-underline .section h2 { display: inline-block; padding-bottom: 0.8rem; border-bottom: 3px solid var(--accent); } body.heading-style-eyebrow-badge .section .eyebrow { display: inline-block; background: var(--panel); border: 1px solid var(--line); padding: 0.4rem 1.1rem; border-radius: 999px; margin-bottom: 1.2rem; } body.heading-style-centered-divider .section h2 { display: flex; align-items: center; gap: 1.2rem; text-align: center; margin-left: auto; margin-right: auto; max-width: none; } body.heading-style-centered-divider .section h2::before, body.heading-style-centered-divider .section h2::after { content: ''; flex: 1; height: 1px; background: var(--line); } body.heading-style-centered-divider .section .eyebrow { text-align: center; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.95rem 1.8rem; border-radius: 0; font-weight: 600; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; border: none; text-decoration: none !important; transition: background 0.2s, box-shadow 0.2s, color 0.2s; } .btn-primary { background: var(--cta); color: #fff; box-shadow: 0 10px 24px -8px rgba(0,0,0,0.35); } .btn-primary:hover { background: var(--cta2); } .btn-secondary { background: transparent; border: 1px solid var(--line); color: var(--ink); } .btn-secondary:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); } .btn-lg { padding: 1.15rem 2.3rem; font-size: 0.85rem; } /* ---------- Estilo de botón seleccionable por sitio (site.button_style) ---------- "square" (defecto) es el .btn de arriba, sin cambios. El resto se activa vía una clase en (los botones aparecen repartidos en muchas plantillas: nav, hero, footer, room cards, banners...), así que se centraliza aquí en vez de en cada parcial. */ body.btn-style-rounded .btn { border-radius: 10px; } body.btn-style-pill .btn { border-radius: 999px; } body.btn-style-outline .btn-primary { background: transparent; color: var(--cta); border: 2px solid var(--cta); box-shadow: none; } body.btn-style-outline .btn-primary:hover { background: var(--cta); color: #fff; } body.btn-style-ghost .btn-primary { background: transparent; color: var(--cta); border: none; box-shadow: none; } body.btn-style-ghost .btn-primary:hover { background: color-mix(in srgb, var(--cta) 12%, transparent); } body.btn-style-glass .btn-primary { background: color-mix(in srgb, var(--cta) 55%, transparent); border: 1px solid color-mix(in srgb, var(--cta) 60%, transparent); backdrop-filter: blur(8px); color: #fff; box-shadow: none; } body.btn-style-glass .btn-primary:hover { background: color-mix(in srgb, var(--cta) 75%, transparent); } body.btn-style-shadow-lift .btn-primary { box-shadow: 0 12px 28px -6px color-mix(in srgb, var(--cta) 65%, transparent); transition: background 0.2s, box-shadow 0.25s, transform 0.25s; } body.btn-style-shadow-lift .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -6px color-mix(in srgb, var(--cta) 75%, transparent); } body.btn-style-scale .btn-primary { transition: background 0.2s, box-shadow 0.2s, transform 0.2s; } body.btn-style-scale .btn-primary:hover { transform: scale(1.06); } body.btn-style-underline-sweep .btn-primary { position: relative; z-index: 1; overflow: hidden; background: transparent; color: var(--cta); border: 1px solid var(--cta); box-shadow: none; } body.btn-style-underline-sweep .btn-primary::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--cta); transform: scaleX(0); transform-origin: left; transition: transform 0.28s ease; } body.btn-style-underline-sweep .btn-primary:hover { color: #fff; } body.btn-style-underline-sweep .btn-primary:hover::before { transform: scaleX(1); } body.btn-style-gradient .btn-primary { background: linear-gradient(120deg, var(--cta), var(--cta2)); background-size: 160% 160%; background-position: 0% 50%; box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--cta) 55%, transparent); transition: background-position 0.35s ease, box-shadow 0.2s; } body.btn-style-gradient .btn-primary:hover { background-position: 100% 50%; } .badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 999px; background: rgba(255,255,255,0.12); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.28); color: #fff; font-size: 0.8rem; letter-spacing: 0.03em; font-weight: 600; } /* ---------- Nav ---------- */ .nav { position: sticky; top: 0; z-index: 90; background: var(--bg); border-bottom: 1px solid var(--line); transition: background 0.3s, border-color 0.3s, box-shadow 0.3s; } /* ---------- El menú se queda fijo arriba al hacer scroll, o se desplaza con la página (site.nav_sticky_style) — "sticky" (arriba) es el defecto. Clase en , con !important porque hay 22 header_style que fijan su propio position en distintos estados (normal/ scrolled) y esto tiene que ganar pase lo que pase. No afecta a header_style=sidebar (columna fija a la izquierda: es un paradigma de layout distinto, no "pegarse arriba al hacer scroll"). */ body.nav-sticky-scrolls-away .nav:not(.nav-style-sidebar) { position: static !important; } /* Con "scrolls-away", la variante "sobre el hero" ya no se superpone a la foto (deja de ser position:absolute/fixed) — el texto/fondo transparentes pensados para flotar sobre una imagen oscura se vuelven ilegibles al quedar en flujo normal sobre el fondo claro de la página. Se fuerza aquí el mismo aspecto seguro que ya usa el estado "scrolled" (fondo claro opaco, texto oscuro), tanto en el propio nav como en sus selects. Texto en var(--dark) y no var(--ink): este fondo es un blanco roto FIJO (no depende del theme), pero --ink sí depende del theme y en "night" es un color claro (pensado para texto sobre su --bg oscuro) — quedaría invisible sobre este fondo claro. --dark siempre es oscuro en los 12 themes, con o sin --bg oscuro. */ body.nav-sticky-scrolls-away .nav-over-hero:not(.nav-style-sidebar) { background: rgba(253, 252, 250, 0.86) !important; backdrop-filter: blur(14px) saturate(140%); border-color: var(--line); } body.nav-sticky-scrolls-away .nav-over-hero:not(.nav-style-sidebar) .nav-brand, body.nav-sticky-scrolls-away .nav-over-hero:not(.nav-style-sidebar) .nav-anchors a { color: var(--dark) !important; } body.nav-sticky-scrolls-away .nav-over-hero:not(.nav-style-sidebar) #currency-select, body.nav-sticky-scrolls-away .nav-over-hero:not(.nav-style-sidebar) #lang-select { background: var(--bg) !important; border-color: var(--line) !important; color: var(--ink) !important; } body.nav-sticky-scrolls-away .nav-over-hero:not(.nav-style-sidebar) .nav-phone { color: var(--dark) !important; } /* El hero tiene margin-top:-76px para que su foto arranque en la parte superior de la página pese al nav flotando encima (position:absolute/fixed) — con el nav en flujo normal (esta variante), ese margen negativo hace que el hero se superponga y tape el nav entero por detrás. Mismo criterio que ya usa header_style=sidebar más abajo (buscar "~ main .hero"). */ body.nav-sticky-scrolls-away .nav:not(.nav-style-sidebar) ~ main .hero { margin-top: 0; } .nav-inner { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; min-height: 76px; height: auto; display: flex; flex-wrap: wrap; row-gap: 0.5rem; align-items: center; justify-content: space-between; gap: 1.2rem; } .nav-brand { font-family: var(--serif); font-size: 1.2rem; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 0; min-width: 0; } .nav-right { display: flex; flex-wrap: wrap; row-gap: 0.5rem; align-items: center; gap: 1.6rem 2.2rem; flex: 0 1 auto; justify-content: flex-end; } .nav-anchors { display: none; flex-wrap: wrap; row-gap: 0.4rem; gap: 1.4rem; } .nav-anchors a { color: var(--mut); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; } .nav-anchors a:hover { color: var(--accent2); text-decoration: none; } .nav-actions { display: flex; align-items: center; gap: 0.8rem; } .nav-phone { display: none; color: var(--ink); font-weight: 600; font-size: 0.82rem; white-space: nowrap; } #currency-select, #lang-select { padding: 0.5rem 0.6rem; border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg); color: var(--ink); font-size: 0.8rem; color-scheme: light; /* evita que el navegador fuerce un desplegable emergente oscuro que dejaría el texto (oscuro) ilegible contra su propio fondo */ } @media (min-width: 900px) { .nav-anchors { display: flex; } } /* Menú desplegable (
nativo, sin JS) — oculto salvo en nav-style-dropdown */ .nav-menu { display: none; position: relative; } .nav-menu summary { list-style: none; cursor: pointer; color: var(--mut); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.55rem 0.9rem; border: 1px solid var(--line); border-radius: var(--radius); } .nav-menu summary::-webkit-details-marker { display: none; } .nav-menu summary::after { content: ' \25BE'; } .nav-menu-panel { position: absolute; top: calc(100% + 0.6rem); right: 0; z-index: 100; min-width: 200px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 0.9rem; display: flex; flex-direction: column; gap: 0.75rem; } .nav-menu-panel a { color: var(--ink); font-size: 0.8rem; letter-spacing: 0.04em; text-transform: none; font-weight: 500; } .nav-menu-panel a:hover { color: var(--accent2); } /* Nav transparente sobre el hero: solo en home, se sube la marca a blanco hasta hacer scroll */ .nav-over-hero { position: absolute; top: 0; left: 0; right: 0; background: transparent; border-color: transparent; } .nav-over-hero .nav-brand, .nav-over-hero .nav-anchors a { color: #fff; } /* Caja cerrada: cristal translúcido a juego con el resto del nav sobre el hero. Lista abierta: fondo sólido claro + texto oscuro fijados directamente en