/* Theme styles. Palette via CSS variables. */
/* @fonts-inicio (generado por tools/fonts-fetch.js: NO editar a mano) */
/* LAS FUENTES VAN VERSIONADAS CON ?v= (2026-08-09). No es estetica: al abrir CORS para que el
   panel del producto pueda usar las fuentes del dominio del cliente, las entradas que la cache
   de borde ya tenia guardadas SIN la cabecera Access-Control-Allow-Origin se seguian sirviendo
   al navegador, y el iframe caia a la fuente de respaldo. MEDIDO: de seis woff2, tres cargaban
   y tres no, y las tres que fallaban cargaban a la primera anadiendoles un cache-buster.
   Vary: Origin no salva el caso porque el servidor lo reescribe (comprobado). El ?v= cambia la
   CLAVE de cache, asi que la entrada nueva nace ya con la cabecera. Se sube al cambiar una
   fuente o al tocar sus cabeceras. */
@font-face{font-family:"Bitter";font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/bitter-vf-latin.woff2?v=2) 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:"Bitter";font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/bitter-vf-latin-ext.woff2?v=2) 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:"Bitter";font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/bitter-vf-cyrillic.woff2?v=2) format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:"Mulish";font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/mulish-vf-latin.woff2?v=2) 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:"Mulish";font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/mulish-vf-latin-ext.woff2?v=2) 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:"Mulish";font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/mulish-vf-cyrillic.woff2?v=2) format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
/* @fonts-fin */
*, *::before, *::after { box-sizing: border-box; }
:root {
  --navy: #0f2744;
  --navy2: #1a3a5c;
  --gold: #c9a96e;
  --gold2: #a8854a;
  --text1: #2c2c2c;
  --text2: #555;
  --text3: #6a6a6a;
  /* Acento SEGURO para texto pequeno (labels/eyebrow/scores): el --gold de algunas paletas es claro
     o gris y no llega a AA sobre fondo claro; se ancla hacia oscuro para garantizar >=4.5 (ronda 11). */
  --gold-tx: color-mix(in srgb, var(--gold) 55%, #1a1408);
  --bg: #fdfcfa;
  --bg2: #f5f1eb;
  --bg3: #ffffff;
  --border: #e8e0d0;
  --white: #ffffff;
  /* Fondo del footer oscuro DERIVADO de la paleta (antes era #0a1626 fijo -> no viraba con paleta
     verde). En claro = sombra profunda del navy de la paleta; en dark se re-fija (ver body.dark). */
  --ftbg: color-mix(in srgb, var(--navy) 70%, #05070c);
  /* Texto del footer (fondo oscuro --ftbg): NO usar --text2/--text3 (pensados para fondo claro).
     Derivados del blanco mezclado con el fondo -> contraste garantizado con cualquier paleta. */
  --ft-tx: color-mix(in srgb, #fff 90%, var(--ftbg));      /* principal ~12:1 */
  --ft-tx2: color-mix(in srgb, #fff 72%, var(--ftbg));     /* secundario/enlaces/legal >=8:1 */
  --ft-line: color-mix(in srgb, #fff 15%, transparent);    /* bordes/separadores */
  /* CTA solido: acento oscurecido por derivacion (texto blanco >=4.5 con cualquier paleta). Ancla fija. */
  --cta-bg: color-mix(in srgb, var(--gold) 54%, #10100e);
  --cta-bg-hover: color-mix(in srgb, var(--gold) 42%, #10100e);
  --ok-fr: #eef7ee; --ok-fr2: #dff0df; --ok-tx: #2e6b34; --ok-chip: #cfe8cf;
  --bad-bg: #faecec; --bad-tx: #a33333; --bad-chip: #f3bcbc; --bad-bd: #dd9999;
  --sh1: 0 2px 12px rgba(15,39,68,.06);
  --sh2: 0 14px 40px rgba(15,39,68,.14);
  --r-card: var(--r-md, 16px);
  --r-btn: var(--r-sm, 9px);
  --tr: .25s cubic-bezier(.4,0,.2,1);
  /* TIPOGRAFIA (P2.18): la pareja la fija sl_type_css_vars() en el :root inline. Aqui solo el
     ALIAS con respaldo COMPLETO (familia real + generica) por la trampa del HTML congelado: un
     articulo publicado antes de P2.18 no declara --font-display, pero SI recibe esta hoja, que
     trae los @font-face, asi que degrada a la fuente correcta y no a Georgia. */
  /* ALIAS DEL VOCABULARIO COMPARTIDO (P2.18 d, 2026-07-26). Los bloques que son IDENTICOS en las tres
     plantillas (acento estructural, pieles del calendario, sistema .btn) estan escritos con el
     vocabulario de mallorca (--ink, --tx, --line, --accent...) y costa NUNCA lo declaro: 16 usos de
     var(--ink), 9 de var(--tx2), 9 de var(--accent-dark), 7 de var(--accent), 3 de var(--tx) y 1 de
     var(--line) quedaban INVALIDOS AL COMPUTAR, asi que el fondo de tinta del footer no se aplicaba y
     el pie salia con texto claro sobre el fondo claro del cuerpo: 2,18 y 1,55 en axe. No se habia visto
     porque NO HAY NINGUN TENANT COSTA en el parque (P2.22) y nadie habia auditado demo-costa.html.
     Se declaran como ALIAS de los tokens propios de costa, no como colores nuevos. */
  --ink: var(--navy);
  --ink2: var(--navy2);
  --tx: var(--text1);
  --tx2: var(--text2);
  --tx3: var(--text3);
  --line: var(--border);
  --card: var(--bg3);
  --accent: var(--gold);
  /* El acento para TEXTO sobre fondo claro es --gold-tx (ya anclado a oscuro para AA), no --gold2. */
  --accent-dark: var(--gold-tx);
  /* duna: sus dos familias en el alias, con la familia real antes de la generica (trampa del HTML
     congelado, P2.18 c). */
  --fs: var(--font-display, "Bitter", Georgia, "Times New Roman", serif);
  --fn: var(--font-body, "Mulish", system-ui, -apple-system, "Segoe UI", sans-serif);
  /* TOKENS DE SEMANTICA DE MAPA (P2.36-bis, 2026-07-31). El SVG del mapa de zona consume SOLO estos y
     ningun token de seccion. Se declaran AQUI, en :root, para que capturen el valor RAIZ: una custom
     property que referencia a otra se sustituye donde se DECLARA, asi que un remapeo por contenedor
     (el de .am/.loc/.places de P2.35) ya no puede cambiarlos. Sin esto, el mapa heredaba la semantica de
     la seccion: la tinta se volvia crema, la tierra oscura y los rotulos quedaban crema sobre mar crema. */
  --zm-ink: var(--navy);        /* tinta: rotulos, costa, carreteras, puntos, sombra */
  --zm-paper: var(--bg);        /* papel: mar, halos de rotulo y de costa, fondo de las chapas de via */
  --zm-land: var(--bg2);        /* tierra */
  --zm-surface: var(--bg3);     /* superficie: filete de los puntos, del marcador y texto del tooltip */
  --zm-accent: var(--gold);     /* acento: playa, marcador y foco */
  /* Linea de los bloques de Alrededores (P2.37): sobre fondo claro es el PRINCIPAL de la paleta y el
     barrido de cursor va en el acento. Dentro de una seccion convertida por P2.35 se invierten, y eso lo
     declara el propio bloque de la seccion. */
  --zona-line: var(--primary-line, var(--navy));
  --zona-line-hover: var(--gold-on-bg, var(--gold2));
}
body.dark {
  --ok-fr: #12301a; --ok-fr2: #17381f; --ok-tx: #86c791; --ok-chip: #2e6b34;
  --bad-bg: #331414; --bad-tx: #d98a8a; --bad-chip: #7a3333; --bad-bd: #7a3333;
  --navy: #f7f5f0;
  --navy2: #d8d2c4;
  --text1: #f0ede6;
  --text2: #c4c4c4;
  --text3: #a6a6a6;
  --gold-tx: color-mix(in srgb, var(--gold) 62%, #ffffff);
  /* Re-declaracion obligatoria de los alias: una custom property que referencia a otra queda RESUELTA
     donde se declara, asi que sin esto el modo noche seguiria con la tinta y los grises del dia. */
  --ink: var(--navy); --ink2: var(--navy2);
  --tx: var(--text1); --tx2: var(--text2); --tx3: var(--text3);
  --line: var(--border); --card: var(--bg3);
  --accent: var(--gold); --accent-dark: var(--gold-tx);
  --bg: #0a1626;
  --bg2: #142234;
  --bg3: #101d30;
  --border: #2a3a52;
  /* En dark el --navy se invierte a claro, asi que --ftbg NO puede derivar de el: se re-fija oscuro
     (mas profundo que --bg para que el footer se distinga del cuerpo). */
  --ftbg: #060f1c;
  /* Re-declarar los tokens de footer en dark (--ftbg cambia; evita el gotcha de valor resuelto en :root). */
  --ft-tx: color-mix(in srgb, #fff 90%, var(--ftbg));
  --ft-tx2: color-mix(in srgb, #fff 72%, var(--ftbg));
  --sh1: 0 2px 12px rgba(0,0,0,.3);
  --sh2: 0 14px 40px rgba(0,0,0,.5);
  /* Los tokens de mapa se RE-DECLARAN en noche para que capturen los valores oscuros de raiz: si solo
     estuvieran en :root, el mapa se quedaria con los colores de dia al cambiar de tema. */
  --zm-ink: var(--navy);
  --zm-paper: var(--bg);
  --zm-land: var(--bg2);
  --zm-surface: var(--bg3);
  --zm-accent: var(--gold);
  --zona-line: var(--primary-line-dark, var(--navy));
  --zona-line-hover: var(--gold-on-ink, var(--gold));
}
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--fn); color: var(--text1); background: var(--bg); font-size: var(--fz-base, 1.03rem); line-height: var(--lh-body, 1.65); overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

.con { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
section { padding: var(--sp-6, 104px) 0; }

/* ==========================================================================
   SISTEMA DE BOTONES .btn (P3.7, 2026-07-26)
   Bloque IDENTICO en las tres hojas. La personalidad de cada plantilla NO vive
   aqui, vive en los tokens que emite sl_type_css_vars() (--btn-fz, --btn-ls,
   --btn-tt, --btn-pad, --btn-r), asi que estas reglas no se duplican por
   plantilla ni hay tres sistemas que mantener.
   ALIAS PARA EL HTML CONGELADO: las clases historicas van EN EL SELECTOR
   (.bp .bo .nav-cta .usel-btn .ctf button .slb-clear .slb-mini-clear .avw-cta
   .cal-arrow). El marcado NO cambia: hay articulos publicados con esas clases
   congeladas y el contrato de los formularios se queda como esta.
   FUERA DEL SISTEMA a proposito: .uc-cta y .blog-card-more son enlaces de texto,
   no botones, y conservan su tratamiento.
   RESPALDOS: todo token lleva valor de respaldo (trampa del HTML congelado). Los
   nombres de color difieren entre plantillas (--text2 en costa/noir, --tx2 en
   mallorca; costa no define --ink y usa --navy), asi que se ENCADENAN.
   COLOR DEL PRIMARIO: fondo var(--cta-bg) y texto #fff FIJO en las tres, en dia
   y en noche. --cta-bg se construye oscureciendo el acento justo para que el
   blanco pase AA con las 20 paletas, asi que el par no depende del modo. Esto
   retira tres parches que existian solo por usar var(--white) o var(--navy) de
   fondo: en costa multi-unit, --navy se aclara en noche y dejaba el boton de la
   ficha en blanco sobre blanco.
   ========================================================================== */
.btn, .bp, .bo, .nav-cta, .usel-btn, .ctf button, .slb-clear, .slb-mini-clear, .avw-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: inherit; font-size: var(--btn-fz, .85rem); font-weight: var(--fw-emph, 600);
  letter-spacing: var(--btn-ls, .02em); text-transform: var(--btn-tt, none);
  line-height: 1.15; text-align: center; text-decoration: none;
  padding: var(--btn-pad, 14px 30px); border: 1px solid transparent;
  border-radius: var(--btn-r, 10px); background: transparent; color: inherit; cursor: pointer;
  transition: background var(--tr), color var(--tr), border-color var(--tr), box-shadow var(--tr), transform var(--tr);
}
.btn-primary, .bp, .nav-cta, .usel-btn, .ctf button, .avw-cta { background: var(--cta-bg); color: #fff; box-shadow: var(--sh1); }
.btn-primary:hover, .bp:hover, .nav-cta:hover, .usel-btn:hover, .ctf button:hover, .avw-cta:hover,
.usel-card:hover .usel-btn { background: var(--cta-bg-hover); color: #fff; box-shadow: var(--sh2); transform: translateY(-2px); }
/* Secundario/outline sobre SUPERFICIE (tarjeta o fondo de seccion). */
.btn-outline, .slb-clear, .slb-mini-clear { border-color: var(--border); color: var(--text2, var(--tx2, #555)); }
.btn-outline:hover, .slb-clear:hover, .slb-mini-clear:hover { border-color: var(--gold); color: var(--gold); }
/* Outline sobre MEDIA (hero con foto): unico contexto con texto blanco fijo sobre imagen. */
.btn-outline-media, .bo { border-color: rgba(255,255,255,.55); color: #fff; }
.btn-outline-media:hover, .bo:hover { border-color: #fff; background: rgba(255,255,255,.14); transform: translateY(-2px); }
/* Tamanos. El grande es el default (--btn-pad). */
.btn-sm, .usel-btn { font-size: var(--fz-xs, .74rem); padding: 10px 20px; }
.btn-xs, .slb-mini-clear { font-size: var(--fz-xs, .74rem); padding: 6px 14px; }
/* Boton de SOLO ICONO: caja fija, fuera del padding del sistema (flechas del calendario). */
.btn-icon, .cal-arrow { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; font: inherit;
  border: 1px solid var(--border); border-radius: 999px; background: var(--bg3);
  color: var(--ink, var(--navy, #111)); cursor: pointer;
  transition: border-color var(--tr), color var(--tr), opacity var(--tr); }
.btn-icon svg, .cal-arrow svg { width: 18px; height: 18px; }
.btn-icon:hover:not(:disabled), .cal-arrow:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
/* Inactivo: NUNCA con opacity sola (destroza el contraste, trampa ya documentada); se marca ademas
   quitando el relieve y el cursor. */
.btn:disabled, .btn[aria-disabled="true"], .btn-icon:disabled, .cal-arrow:disabled { opacity: .45; cursor: default; transform: none; box-shadow: none; }

/* ==========================================================================
   ARTICULO PUBLICADO = HTML CONGELADO (P2.18 c). Estas dos reglas viven en la hoja
   COMPARTIDA a proposito: el articulo lleva su CSS de contenido incrustado y
   congelado, pero SI vuelve a pedir esta hoja, asi que es el unico sitio desde el
   que se puede corregir un articulo ya publicado sin reescribirlo.
   1) El titular del articulo pedia var(--fs), que en mallorca NO EXISTE (usa
      --ff-title): medido en servido, el h1 de un articulo mallorca se pintaba con
      la fuente de CUERPO. La cadena cubre las tres plantillas y el articulo viejo.
   2) Medida de linea del cuerpo del articulo: el contenedor mide 780 px y daba 90
      caracteres por linea, muy por encima del rango legible. Se acota el PARRAFO,
      no el contenedor, para que las fotos, el sumario y los banner sigan anchos.
   ========================================================================== */
body main.art h1, body main.art h2.section, body main.art h2.faq-title {
  font-family: var(--font-display, var(--fs, var(--ff-title, Georgia, "Times New Roman", serif)));
  letter-spacing: var(--ls-display, normal);
}
body main.art p, body main.art li { max-width: var(--measure, 60ch); }

/* Reveal on scroll. Oculta SOLO bajo html.js (clase que anade el propio script):
   sin JS o con JS lento el contenido es visible por defecto, nunca secciones en blanco. */
html.js .rv { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
html.js .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
  * { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* Nav */
/* TRANSPARENCIA POR SUPERFICIE (2026-07-30). UN token por superficie, en porcentaje, para poder comparar
   estados reales sobre la misma foto y elegir con datos: --sup-nav gobierna la cabecera fija, que en duna
   flota SOBRE la foto del hero, y --sup-bar el contenedor del buscador. Los campos de fecha y huespedes y
   el boton NO usan estos tokens: quedan OPACOS a proposito, porque son la parte que se lee y se toca.
   RESPALDO DIGNO: se declara primero un color solido y despues el translucido, asi que un navegador sin
   color-mix se queda con la cabecera opaca de siempre; y donde no haya backdrop-filter, el @supports la
   devuelve a opaca en vez de dejar los enlaces sobre la foto cruda. */
/* TRANSPARENCIA DE LA CABECERA, ESTADO DEFINITIVO (2026-07-31, eleccion del operador).
   DOS ESTADOS, y esta es la parte que hace que la eleccion sea viable:
   (1) SOBRE LA FOTO del hero, la cabecera va con TINTE DE TINTA al 46 % y los enlaces en BLANCO. Medido
       con el pixel realmente pintado: 6,31 en los enlaces y 7,74 en el logotipo, frente al 4,57 que daba
       el 75 % de tinte blanco, y deja pasar mucha mas fotografia. Los otros estados comparados quedaron
       descartados por medicion: con tinte blanco, 1,43 al 30 %, 1,93 al 40 %, 2,55 al 50 %, 3,28 al 60 %
       y 4,11 al 70 %, todos por debajo del 4,5 exigido en dia.
   (2) FUERA DE LA FOTO (al bajar del hero, y en el blog, el articulo y cualquier pagina sin foto detras)
       la cabecera vuelve a su superficie OPACA de siempre con los colores normales. Sin esto el tinte
       oscuro dejaria texto blanco sobre el fondo claro del cuerpo: con arena, el compuesto da 164 y el
       blanco encima se queda en 2,6. La clase la pone un IntersectionObserver de tres lineas en el
       layout; SIN JAVASCRIPT no se anade nunca, asi que el estado por defecto es el opaco, que es el
       seguro. Es mejora progresiva, no dependencia.
   El token --sup-nav sigue siendo el porcentaje y --sup-nav-tinte el color del velo; en noche el velo
   pasa a --bg3 (que alli es oscuro) y el texto a --text1, porque en noche la tinta se aclara. */
:root { --sup-nav: 46%; --sup-nav-tinte: var(--ink); --sup-nav-tx: #ffffff; --sup-bar: 50%; }
body.dark { --sup-nav: 62%; --sup-nav-tinte: var(--bg3); --sup-nav-tx: var(--text1); }
nav.sl-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 900; border-bottom: 1px solid var(--border);
  background: var(--bg3);
  transition: background-color .3s ease, border-color .3s ease; }
nav.sl-nav.nav-foto {
  background: var(--sup-nav-tinte);
  background: color-mix(in srgb, var(--sup-nav-tinte) var(--sup-nav), transparent);
  border-bottom-color: transparent;
  -webkit-backdrop-filter: blur(16px) saturate(1.15); backdrop-filter: blur(16px) saturate(1.15); }
nav.sl-nav.nav-foto .logo, nav.sl-nav.nav-foto .nl a, nav.sl-nav.nav-foto .tb,
nav.sl-nav.nav-foto .mb, nav.sl-nav.nav-foto .lang-btn { color: var(--sup-nav-tx); }
nav.sl-nav.nav-foto .nl a:hover, nav.sl-nav.nav-foto .nl a.nav-active { color: var(--sup-nav-tx); text-decoration: underline; text-underline-offset: 5px; }
nav.sl-nav.nav-foto .tb, nav.sl-nav.nav-foto .mb { border-color: color-mix(in srgb, var(--sup-nav-tx) 55%, transparent); }
nav.sl-nav.nav-foto .logo svg circle { fill: color-mix(in srgb, var(--sup-nav-tx) 22%, transparent); }
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  /* Sin blur el velo translucido deja la foto cruda bajo los enlaces: se vuelve al opaco de siempre. */
  nav.sl-nav.nav-foto { background: var(--bg3); }
  nav.sl-nav.nav-foto .logo, nav.sl-nav.nav-foto .nl a, nav.sl-nav.nav-foto .tb,
  nav.sl-nav.nav-foto .mb, nav.sl-nav.nav-foto .lang-btn { color: var(--text1); }
}
body.dark nav.sl-nav { background: rgba(10,22,38,.92); }
.ni { max-width: 1200px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo { display: flex; align-items: center; gap: 10px; font-family: var(--fs); font-size: 1.2rem; color: var(--navy); font-weight: 600; }
.nl { display: flex; list-style: none; gap: 22px; margin: 0; padding: 0; font-size: .8rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.nl a { color: var(--text2); transition: color var(--tr); }
.nl a:hover { color: var(--gold-tx); }
/* Seccion activa del nav (Blog en un articulo, 2026-07-24). */
/* MEDIDO el 2026-07-30 con axe sobre servido: el acento CRUDO como texto de menu daba 2,93 con la paleta
   arena sobre el fondo claro del nav. El token anclado (--gold-tx) es justo el que existe para esto.
   OJO: el mismo defecto sigue vivo en costa, mallorca y noir; anotado en ROADMAP, no se toca aqui. */
.nl a.nav-active { color: var(--gold-tx); font-weight: 600; }
.nc { display: flex; align-items: center; gap: 10px; }
.tb { background: none; border: 1px solid var(--border); border-radius: 999px; width: 38px; height: 38px; display: grid; place-items: center; color: var(--text1); cursor: pointer; transition: border-color var(--tr), color var(--tr), transform var(--tr); }
.tb:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-1px); }
.tb svg { width: 16px; height: 16px; }
.mb { display: none; background: none; border: 1px solid var(--border); border-radius: var(--r-btn); width: 38px; height: 38px; place-items: center; color: var(--text1); cursor: pointer; }
.mb svg { width: 18px; height: 18px; }

/* Announcement bar */
.ann-bar { background: var(--navy); color: var(--ink-contrast, #fff); text-align: center; padding: 8px 16px; font-size: .75rem; font-weight: 600; letter-spacing: .05em; margin-top: 63px; }
body.dark .ann-bar { color: var(--bg); }

/* ==========================================================================
   HERO DE duna: FOTO CORTA MAS FILA DE HECHOS (P2.29)
   Foto a sangre de 55vh con el titular ABAJO A LA IZQUIERDA y, ya fuera de la imagen, una barra con
   cuatro hechos y el buscador. El primer pliegue termina en la barra, no en la foto.

   MECANISMO DE PROTECCION DEL TITULAR SOBRE FOTO (reutilizable por marina cuando le toque):
   1. La proteccion es un DEGRADADO DE DOS EJES (.dh-scrim), no un velo plano sobre toda la imagen: solo
      oscurece la esquina donde vive el texto y deja limpia la parte util de la foto, que es lo que vende.
   2. Va en un ELEMENTO PROPIO por encima de la img y por debajo del texto, no en un ::after de la img,
      para poder medirlo y ajustarlo sin tocar el marcado.
   3. Es un gris de tinta FIJO (#0c0e12), NO el --ink de la paleta, y el texto es blanco puro. Razon: la
      legibilidad sobre una foto desconocida no puede depender de la luminancia del acento de cada
      paleta; si el velo virara con las 20 paletas habria que medir 20 veces y el peor caso mandaria
      igual. La paleta se ve en todo lo demas de la pagina.
   4. El texto pequeno (antetitulo) vive en la franja MAS opaca y el titular, que es texto grande, en la
      siguiente; los dos se miden con el PIXEL REALMENTE PINTADO sobre las fotos reales del tenant
      (tools/pixel-titular.js), en dia y en noche, y el peor caso se cita en el informe.
   ========================================================================== */
.hero.dh { position: relative; display: block; padding: 0; min-height: 0; text-align: left; color: var(--tx); overflow: hidden; }
.dh-media { position: relative; height: 55vh; min-height: 340px; max-height: 620px; overflow: hidden; background: var(--bg2); }
.dh-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dh-media-plain { position: absolute; inset: 0; background: linear-gradient(158deg, var(--navy) 0%, var(--navy2) 62%, var(--gold2) 165%); }
/* PROTECCION ACOTADA (2026-07-30, veredicto del operador: "la foto respira poco"). SUSTITUYE al velo de
   dos ejes, que cubria el ancho entero y apagaba toda la franja inferior. Ahora es UNA elipse anclada en
   la esquina inferior izquierda, que es donde vive el texto: el resto de la foto queda limpio, incluida
   la mitad derecha y toda la banda superior. Es el mecanismo documentado para cualquier plantilla que
   ponga texto sobre foto (marina cuando le toque): proteccion local medida, no velo global a ojo.
   Los porcentajes salen de la medicion con tools/pixel-titular.js sobre las fotos reales, no del gusto. */
/* DOS ZONAS ACOTADAS, y la segunda es la que hace posible la cabecera translucida elegida por el operador
   (2026-07-31): (a) la elipse de la esquina del titular y (b) una FRANJA CORTA de 96 px en el borde
   superior, justo bajo la cabecera. MEDIDO: sin esa franja, el tinte de tinta al 46 % con enlaces blancos
   pasa sobre las zonas oscuras de una foto (6,24) pero se hunde sobre las claras (2,78 en el banco multi,
   cuya foto de hero es un dormitorio muy iluminado). Con la franja, el peor caso sube por encima de 6 en
   los dos bancos. Cuesta 96 px de foto en el borde de arriba, que es donde la cabecera ya tapaba. */
.dh-scrim { position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(to bottom, rgba(12,14,18,.58) 0px, rgba(12,14,18,.38) 46px, rgba(12,14,18,0) 96px),
  radial-gradient(115% 82% at 6% 104%,
    rgba(12,14,18,.88) 0%, rgba(12,14,18,.82) 26%, rgba(12,14,18,.62) 44%,
    rgba(12,14,18,.30) 60%, rgba(12,14,18,.08) 74%, rgba(12,14,18,0) 86%); }
.dh-txt { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; max-width: 1200px; margin: 0 auto;
  padding: 0 24px var(--sp-4, 40px); }
.dh-eyebrow { margin: 0 0 8px; font-size: var(--fz-xs, .76rem); letter-spacing: .18em; text-transform: uppercase;
  font-weight: 600; color: #fff; }
.hero.dh h1 { font-family: var(--fs); font-size: var(--fz-3xl, clamp(2.3rem, 4.6vw, 3.6rem)); font-weight: 600;
  margin: 0; letter-spacing: var(--ls-display, -.01em); line-height: 1.07; color: #fff; }
.hero.dh .h1-tag { margin: 10px 0 0; font-size: var(--fz-lg, 1.15rem); font-weight: 400; color: #fff; letter-spacing: .1em; }
/* BARRA DE HECHOS: fuera de la foto, sobre bg2, con el buscador a la derecha. */
/* La barra ocupa el ancho de la pagina y su contenido se acota al mismo contenedor de 1200 px que el
   resto de secciones, para que los hechos empiecen a la altura del titular del hero. */
.dh-barw { background: var(--bg2); border-bottom: 1px solid var(--line); }
.dh-bar { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 34px); flex-wrap: wrap;
  max-width: 1200px; margin: 0 auto; padding: var(--sp-2, 16px) 24px; }
/* CUATRO HECHOS EN UNA SOLA FILA a partir de 1180 px, que es la promesa del concepto; por debajo, dos
   columnas, y el buscador baja a su propia linea. Con flex libre la cuarta celda caia sola a una segunda
   fila y la barra quedaba en 3 mas 1, que es justo lo que no se quiere. */
.dh-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px clamp(12px, 2vw, 28px); flex: 1 1 100%; }
.dh-facts li { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* DESVIACION MEDIDA RESPECTO AL DOCUMENTO DE CONCEPTOS, y se documenta porque es una decision, no un
   descuido: el concepto pide el buscador "a su derecha" y aqui va DEBAJO, dentro de la misma barra y del
   mismo primer pliegue. Razon medida: el ancho MINIMO del buscador compartido es de unos 600 px (tres
   campos de fecha y huespedes mas el boton "Comprobar disponibilidad"), y los cuatro hechos piden unos
   520; con el contenedor de 1200 px menos el relleno quedan 1152, asi que no caben los dos sin apretar
   los campos de fecha por debajo de lo que necesita "dd/mm/aaaa", que ya fue un defecto medido en metro.
   Se prefiere respetar la FILA DE CUATRO, que es la sena del concepto, y dar al buscador el ancho entero.
   Si algun dia el buscador adelgaza (por ejemplo con un boton de icono), esto se revisa. */
@media (min-width: 1180px) { .dh-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* La pastilla del icono va SIN relleno de acento y con filete: MEDIDO sobre las 20 paletas, el relleno al
   12 % subia la luminancia del fondo y dejaba el icono en 4,02 con terracota y 4,17 con eclat, por debajo
   del 4,5 que se exige aqui aunque un icono sea objeto grafico (umbral WCAG 3). Sin relleno, el par que
   manda es el token --gold-on-bg sobre --bg2, que es justo para lo que se calculo ese token. */
.dh-f-ic { flex: none; width: 38px; height: 38px; border-radius: 999px; display: grid; place-items: center;
  color: var(--gold-on-bg, var(--accent-dark)); background: transparent; border: 1px solid var(--line); }
/* MODO NOCHE (P2.42, 2026-07-31): --gold-on-bg esta anclado a fondo CLARO y no vira con el tema, pero
   --bg2 si vira, asi que de noche el icono quedaba en 2,99 con champan y hasta 1,43 con oxblood, medido
   en servido: 18 de las 20 paletas por debajo del umbral 3 de objeto grafico. No era violacion de axe
   (el span es aria-hidden y siempre va con su etiqueta), pero desmentia el peor caso de 4,50 que se
   afirmaba de esta barra. Se resuelve con el MISMO patron que .sl-around-cat: el token de acento sobre
   tinta. Medido con el arreglo: las 20 por encima de 4,96, o sea que pasan hasta como texto. */
body.dark .dh-f-ic { color: var(--gold-on-ink, #e2caa0); }
.dh-f-ic svg { width: 19px; height: 19px; }
.dh-f-tx { display: flex; flex-direction: column; min-width: 0; }
.dh-f-l { font-size: var(--fz-xs, .76rem); letter-spacing: .08em; text-transform: uppercase; color: var(--tx2); }
.dh-f-v { font-size: var(--fz-base, 1.0625rem); font-weight: 600; color: var(--ink); }
.dh-f-v em { font-style: normal; font-weight: 400; color: var(--tx2); font-size: var(--fz-sm, .88rem); }
/* El widget compartido dentro de la barra: sin flotar, sin sombra y acotado a su columna. */
.dh-buscador { flex: 1 1 100%; min-width: 0; }
.dh-buscador .avw { margin: 0; padding: 0; max-width: none; }
/* Contenedor TRANSLUCIDO sobre la banda de hechos y campos OPACOS dentro: lo que se lee y se toca no se
   deja al azar del fondo. El respaldo solido va primero, como en la cabecera. */
.dh-buscador .avw-bar { box-shadow: none;
  background: var(--bg3);
  background: color-mix(in srgb, var(--bg3) var(--sup-bar), transparent); }
.dh-buscador .avw-f { background: var(--bg3); border-radius: var(--r-sm, 12px); }
.dh-buscador .avw-sep { display: none; }
/* El boton aprieta su relleno dentro de la barra: con el relleno de siempre (0 24px) los tres campos se
   quedaban en 90 px y el navegador recortaba "dd/mm/aaaa" a "dd/mr". Medido, no supuesto. */
.dh-buscador .avw-go { padding: 0 16px; }
.dh-buscador .avw-f { padding: 6px 10px; }
.dh-buscador .avw-res { padding: 0; margin: 0; max-width: none; }

/* Botones */

/* Highlight strip */
/* Banda de highlights COHERENTE con el header (ambos claros, editorial). Superficie --bg2 (misma familia
   clara que el nav, que es ~--bg) con un borde superior sutil que la separa; vira a oscuro con el modo
   igual que el header (--bg2 lo re-declara body.dark). Texto en tinta (--navy, que vira). */
/* EL RITMO VERTICAL DE LA BANDA LO LLEVA .hli, NO .hl (2026-09-01i, P2.147). Antes .hl ponia
   26px arriba y abajo, asi que .hli empezaba 26px mas abajo y su ::before de acento se dibujaba ahi,
   separado de la linea que cierra la seccion. Con el padding aqui a 0 y en .hli, el acento cae
   EXACTAMENTE sobre la separacion de seccion y no queda hueco entre los dos: es lo que pidio el
   operador, "asi no hay margen de error". La altura total de la banda no cambia: los 26px de arriba
   y los 26 de abajo siguen estando, solo que dentro de .hli. */
.hl { background: var(--bg2); color: var(--navy); padding: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
/* Strip de highlights: BANDA flexible centrada (no grid). flex-wrap + justify-center; items de ancho por
   contenido (icono + texto en una linea), gap uniforme. Con 5 items caben en una fila; si no, envuelven en
   filas CENTRADAS; en movil, columna limpia. */
/* PADDING VERTICAL DEL SISTEMA (2026-09-01i, P2.147). Al retirarse el border-top de
   .sl-accent-card el 2026-09-01h, el contenido de la banda paso a arrancar en la MISMA coordenada que
   el filete: un borde ocupa sitio en el layout y un ::before absoluto no. Medido: hueco entre el
   acento y el primer contenido de -3px, o sea el filete encima de los iconos.
   EL VALOR SALE DE LA ESCALA DEL SISTEMA Y NO DE UN NUMERO INVENTADO: --sp-3 es 26px, y es la
   separacion que ya usaba el resto de la familia, medida sobre lo servido: .amc 25px, .dd 25px,
   .rc 23px, .ctii 27,8px. Ademas es el mismo 26 que .hl ponia antes, asi que la banda mide igual. */
.hli { max-width: 1200px; margin: 0 auto; padding: var(--sp-3, 26px) 24px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px 44px; }
.hlit { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.hlic { width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--gold); color: var(--gold); display: grid; place-items: center; flex-shrink: 0; }
.hlic svg { width: 20px; height: 20px; }
.hltx { display: flex; flex-direction: column; }
.hltx strong { font-size: .9rem; color: var(--navy); }
.hltx span { font-size: .76rem; color: var(--text2); }

/* Section labels */
.sl { text-align: center; letter-spacing: .2em; font-size: .74rem; font-weight: 600; color: var(--gold-on-bg, var(--gold-tx)); text-transform: uppercase; margin: 0 0 12px; }
/* --gold-on-bg y no --gold-tx (2026-07-31, hallazgo de la verificacion de P2.35 con axe): el antetitulo
   se pinta sobre superficies CLARAS (bg2) y --gold-tx incumplia AA en varias paletas (4,12 cachemira,
   4,46 onyx, 4,45 medido por axe con arena y oliva). --gold-on-bg es el token que P2.11 creo para
   texto de acento sobre fondo claro y pasa en las 20. Dentro de las secciones del principal este
   token esta remapeado al acento sobre tinta, asi que alli tambien queda bien. Fallo ANTERIOR a esta
   ronda: son secciones que el reparto no toca. */
.st { text-align: center; font-family: var(--fs); font-weight: 400; font-size: clamp(2rem, 4vw, 2.9rem); margin: 0 0 14px; color: var(--navy); line-height: 1.15; }
.ss { text-align: center; color: var(--text2); max-width: var(--measure, 640px); margin: 0 auto 48px; font-weight: 600; }

/* Galeria: carrusel horizontal (no grid gigante) */
.gc-wrap { position: relative; }
.gc-track { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -ms-overflow-style: none; padding: 6px 2px 14px; cursor: grab; }
.gc-track::-webkit-scrollbar { display: none; }
.gc-track:active { cursor: grabbing; }
.gci { flex: 0 0 min(400px, 82vw); aspect-ratio: 4/3; overflow: hidden; border-radius: 12px; box-shadow: var(--sh1); transition: box-shadow var(--tr), transform var(--tr); scroll-snap-align: start; }
.gci:hover { box-shadow: var(--sh2); transform: translateY(-4px); }
.gci img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s cubic-bezier(.4,0,.2,1); user-select: none; -webkit-user-drag: none; pointer-events: none; }
.gci:hover img { transform: scale(1.05); }
.gc-prev, .gc-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 46px; height: 46px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg3); color: var(--navy); font-size: 1.6rem; cursor: pointer; display: grid; place-items: center; box-shadow: var(--sh2); transition: border-color var(--tr), color var(--tr); }
.gc-prev:hover, .gc-next:hover { border-color: var(--gold); color: var(--gold); }
.gc-prev { left: -10px; }
.gc-next { right: -10px; }
.gc-foot { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 8px; }
.gc-count { font-size: .85rem; color: var(--text3); font-weight: 600; letter-spacing: .06em; }
@media (max-width: 560px) { .gc-prev, .gc-next { display: none; } }

/* Details */
.det { background: var(--bg2); }
/* 2026-07-21: el bloque de texto arranca a la ALTURA DEL BORDE SUPERIOR de la imagen de la
   derecha. Con align-items:center la columna corta quedaba centrada y empezaba mas abajo. */
.dg { display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: start; }
.ddesc { font-size: var(--fz-lg, 1.05rem); color: var(--text2); line-height: var(--lh-body, 1.65); max-width: var(--measure, 68ch); }
.dfl { list-style: none; margin: 26px 0 0; padding: 0; }
.dfl li { display: flex; align-items: flex-start; gap: 12px; padding: 9px 0; font-size: .95rem; color: var(--text2); }
.dfl li::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--gold); margin-top: 11px; flex-shrink: 0; }
.dc { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.dd { text-align: center; padding: 28px 14px; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--r-card); transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr); }
.dd:hover { transform: translateY(-4px); box-shadow: var(--sh2); border-color: var(--gold); }
.dd strong { display: block; font-family: var(--fs); font-size: 2.5rem; color: var(--navy); line-height: 1; }
.dd span { display: block; margin-top: 10px; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text3); font-weight: 600; }

/* Amenities */
.amg { display: grid; grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); gap: 18px; --sym-gap: 18px; }
.amc { padding: 28px 20px; background: var(--bg2); border-radius: var(--r-card); text-align: center; transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr), background var(--tr); }
  /* UNA SOLA LINEA ARRIBA (2026-09-01c, P2.128). La tarjeta dibujaba DOS separadores en el mismo
     punto: este border-top de 1px y ancho completo, y el ::before de 3px del sistema primary-line,
     los dos en top 0. Medido con estilos COMPUTADOS sobre lo servido en la-ventana-al-mar:
     border-top 1px solid rgb(214,203,176) sobre una tarjeta de 274,5px, y ::before de 3px de alto
     por 272,5px de ancho, rgb(225,212,176). La barra corta y gruesa se pintaba encima de la fina y
     larga y asomaba 1px por cada esquina. Se retira el border-top y queda el ::before, que es el
     separador del diseno; los otros tres lados del borde NO se tocan. --primary-line lo emite
     siempre sl_primary_surface_vars() para las 20 paletas, asi que la tarjeta nunca queda sin
     remate arriba por falta de token. */
  /* SIN CAJA, UNA SOLA LINEA (2026-09-01f, P2.137). La tarjeta llevaba un borde de 1 px en tres
     lados (el de arriba se retiro el 2026-09-01c) MAS el ::before de 3 px del sistema primary-line,
     y en pantalla eso son dos lineas en el mismo punto: la barra del ::before y el canto de la
     caja justo debajo. Medido con estilos COMPUTADOS sobre lo servido en la-ventana-al-mar:
     border-right, border-bottom y border-left de 1 px color(srgb 0.838588 0.796078 0.690196) sobre
     una tarjeta de 274,5 px, mas ::before de 3 px por 272,5 px rgb(225,212,176) en top 0.
     SE RETIRA LA CAJA ENTERA y queda SOLO el ::before, que es el separador del diseno. Quitar solo
     el borde de abajo dejaria los dos laterales sin nada que los cierre arriba ni abajo, que se ve
     peor que el defecto. La tarjeta sigue leyendose como tarjeta por su fondo propio (--bg2 o
     --card), que es lo que la separa de la superficie de la seccion. */
.amc:hover { transform: translateY(-4px); box-shadow: var(--sh2); background: var(--bg3); }
.amc svg { width: 32px; height: 32px; color: var(--gold); margin: 0 auto 14px; }
.amc h4 { font-family: var(--fs); font-weight: 400; font-size: 1.12rem; margin: 0 0 6px; color: var(--navy); }
.amc p { margin: 0; font-size: .8rem; color: var(--text3); }

/* Calendar */
.cs { background: var(--bg2); }
.cl { display: flex; justify-content: center; gap: 12px; margin-bottom: 36px; font-size: .8rem; flex-wrap: wrap; }
.cl span { display: inline-flex; align-items: center; gap: 8px; background: var(--bg3); border: 1px solid var(--border); padding: 7px 16px; border-radius: 999px; }
.cd { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.cd.fr { background: var(--ok-chip); }
.cd.bl { background: var(--bad-chip); }
.cd.td { background: var(--gold); }
/* HUECO BAJO EL ACENTO (2026-09-01i, P2.147). Misma causa que en .hli: sin el border-top de
   .sl-accent-card, el ::before de 3px se dibujaba sobre la primera fila del calendario (hueco -3px).
   --sp-3 es la separacion del sistema entre un acento y su contenido. */
.cals { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; max-width: 900px; margin: 0 auto; padding-top: var(--sp-3, 26px); }
.cb { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--r-card); padding: 24px; }
.ch { text-align: center; margin-bottom: 16px; }
.ch h3 { font-family: var(--fs); font-size: 1.35rem; margin: 0; color: var(--navy); }
.cdh { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: .72rem; color: var(--text3); font-weight: 600; margin-bottom: 8px; text-transform: uppercase; }
.cdd { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cday { aspect-ratio: 1; display: grid; place-items: center; font-size: .84rem; border-radius: 8px; cursor: pointer; transition: transform var(--tr), box-shadow var(--tr), background var(--tr); }
.cday.em { visibility: hidden; }
.cday.fr { background: var(--ok-fr); color: var(--ok-tx); }
.cday.fr:hover { transform: scale(1.1); box-shadow: var(--sh1); background: var(--ok-fr2); }
.cday.bl { background: var(--bad-bg); color: var(--bad-tx); text-decoration: line-through; cursor: not-allowed; }
.cday.td { background: var(--gold); color: var(--white); font-weight: 600; box-shadow: 0 0 0 2px var(--gold2) inset; }
.cday.sel-in, .cday.sel-out { background: var(--navy) !important; color: var(--white) !important; font-weight: 600; }
body.dark .cday.sel-in, body.dark .cday.sel-out { background: var(--gold) !important; color: var(--bg) !important; }
.cday.sel-range { background: rgba(201,169,110,.28) !important; color: var(--text1) !important; }
.cd.sr { background: var(--navy); }
body.dark .cd.sr { background: var(--gold); }

.cal-msg { max-width: 900px; margin: 14px auto 0; text-align: center; font-size: .85rem; color: var(--bad-tx); background: var(--bad-bg); border: 1px solid var(--bad-bd); border-radius: 10px; padding: 10px 16px; opacity: 0; visibility: hidden; transition: opacity var(--tr); }
.cal-msg.show { opacity: 1; visibility: visible; }

/* Panel flotante de reserva */
#slBook { position: fixed; bottom: 0; left: 0; right: 0; z-index: 950; transform: translateY(110%); transition: transform .35s cubic-bezier(.4,0,.2,1); background: var(--bg3); border-top: 2px solid var(--gold); box-shadow: 0 -10px 40px rgba(15,39,68,.2); border-radius: 20px 20px 0 0; }
#slBook.open { transform: translateY(0); }
.slb-inner { max-width: 640px; margin: 0 auto; padding: 26px 24px 30px; position: relative; }
.slb-close { position: absolute; top: 14px; right: 18px; width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--border); background: transparent; font-size: 1.15rem; cursor: pointer; color: var(--text2); display: grid; place-items: center; transition: border-color var(--tr), color var(--tr); }
.slb-close:hover { border-color: var(--gold); color: var(--gold); }
.slb-dates { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 12px; margin-bottom: 14px; }
.slb-box { background: var(--bg2); border-radius: 10px; padding: 10px 14px; }
.slb-box label { display: block; font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--text3); margin-bottom: 2px; }
.slb-box span, .slb-box .slb-g { font-size: .95rem; font-weight: 600; color: var(--navy); }
.slb-g { font: inherit; font-size: .95rem; font-weight: 600; background: transparent; border: 0; padding: 0; width: 100%; }
.slb-breakdown { background: var(--bg2); border-radius: 12px; padding: 14px 18px; margin-bottom: 14px; font-size: .88rem; }
.slb-row { display: flex; justify-content: space-between; padding: 4px 0; color: var(--text2); }
.slb-row.slb-total { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 10px; font-weight: 600; font-size: 1rem; color: var(--navy); }
.slb-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* Amenities secundarias */
.am-extra { margin-top: 36px; text-align: center; }
.am-extra h3 { font-family: var(--fs); font-weight: 400; color: var(--navy); font-size: 1.25rem; margin: 0 0 14px; }
.am-extra ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: center; }
.am-extra li { font-size: .88rem; color: var(--text2); position: relative; padding-left: 22px; }
.am-extra li::before { content: ""; position: absolute; left: 0; top: 4px; width: 14px; height: 14px; border-radius: 999px; background: var(--gold); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='3' d='M4 12l5 5 11-11'/%3E%3C/svg%3E") center / contain no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='3' d='M4 12l5 5 11-11'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Lightbox */
#slLbx { position: fixed; inset: 0; background: rgba(6,14,26,.96); z-index: 1200; display: none; align-items: center; justify-content: center; }
#slLbx.open { display: flex; }
#slLbx figure { margin: 0; max-width: 92vw; max-height: 88vh; text-align: center; }
#slLbx img { max-width: 92vw; max-height: 80vh; object-fit: contain; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
#slLbx figcaption { color: rgba(255,255,255,.75); font-size: .84rem; margin-top: 12px; }
#slLbx figcaption #slLbxCount { color: var(--gold); font-weight: 600; margin-left: 8px; }
.lbx-close, .lbx-prev, .lbx-next { position: absolute; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22); border-radius: 999px; color: var(--white); cursor: pointer; display: grid; place-items: center; transition: background var(--tr), border-color var(--tr); }
.lbx-close:hover, .lbx-prev:hover, .lbx-next:hover { background: rgba(255,255,255,.18); border-color: var(--gold); }
.lbx-close { top: 18px; right: 18px; width: 44px; height: 44px; font-size: 1.5rem; }
.lbx-prev, .lbx-next { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 1.8rem; }
.lbx-prev { left: 16px; }
.lbx-next { right: 16px; }
@media (max-width: 560px) {
  .lbx-prev { left: 6px; } .lbx-next { right: 6px; }
  .slb-dates { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

/* Reviews: carrusel auto-desplazable */
.rev-wrap { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; padding: 6px 24px 14px; }
.rev-wrap::-webkit-scrollbar { display: none; }
.rev-track { display: flex; gap: 20px; width: max-content; }
.rev-track .rc { flex: 0 0 320px; }
@media (max-width: 560px) { .rev-track .rc { flex-basis: 84vw; } }
.rg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.rc { background: var(--bg2); padding: 26px; border-radius: var(--r-card); display: flex; flex-direction: column; border: 1px solid transparent; transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr); }
.rc:hover { transform: translateY(-4px); box-shadow: var(--sh2); border-color: var(--border); }
.rs { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-size: .8rem; color: var(--text3); }
.rs strong { color: var(--gold-tx); font-size: 1.08rem; }
/* SALTOS DE LINEA REALES EN LAS RESENAS (P2.109, 2026-08-28f). sl_review_text() convierte los <br>
   de la OTA en saltos de verdad y borra el resto del HTML; sin pre-line ese salto seria un espacio y
   los parrafos de la resena se pegarian en un bloque. NO se emite HTML de la resena en ningun punto:
   el texto sigue saliendo escapado con sl_h() y lo unico que cambia es como se pinta el salto. */
.rt { font-size: .9rem; color: var(--text2); flex-grow: 1; line-height: var(--lh-body, 1.65); white-space: pre-line; }
.ra { margin-top: 16px; font-weight: 600; font-size: .86rem; }
.rd { font-size: .76rem; color: var(--text3); margin-top: 2px; }

/* Location */
.lg { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.li { margin-top: 22px; }
.lit { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px dashed var(--border); font-size: .92rem; color: var(--text2); }
.lit::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--gold); flex-shrink: 0; }
.mf { aspect-ratio: 4/3; background: var(--bg2); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--sh2); border: 1px solid var(--border); }
.mf iframe { width: 100%; height: 100%; border: 0; }

/* Booking */
.bk { background: var(--navy); color: var(--white); }
body.dark .bk { background: var(--bg2); }
.bk .st, .bk .sl { color: var(--white); }
body.dark .bk .st { color: var(--navy); }
.bk .sl { color: var(--gold); }
.bk .ss { color: rgba(255,255,255,.72); }
.bp2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 36px; }
.bpl { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); padding: 32px 22px; border-radius: var(--r-card); text-align: center; transition: background var(--tr), transform var(--tr), border-color var(--tr), box-shadow var(--tr); }
.bpl:hover { background: rgba(255,255,255,.11); transform: translateY(-4px); border-color: var(--gold); box-shadow: var(--sh2); }
.bpl svg { width: 34px; height: 34px; color: var(--gold); margin: 0 auto 14px; }
.bpl h3 { margin: 0 0 6px; font-family: var(--fs); font-weight: 400; font-size: 1.25rem; color: #f6f3ec; }
/* NOCHE: fecha de blog en tono acento; se aclara conservando el tono (sin ciclo, --gold2 no se redefine). */
body.dark .blog-card-date { color: color-mix(in srgb, var(--gold2) 58%, #ffffff); }
/* NOCHE: titular con acento; si la paleta del tenant tiene un --gold de bajo contraste, se aclara para AA. */
.bpl p { margin: 0; font-size: .84rem; color: rgba(255,255,255,.66); }
.bd { text-align: center; background: rgba(201,169,110,.12); border: 2px solid var(--gold); color: var(--white); padding: 40px 24px; border-radius: var(--r-card); }
/* .bk/.bd es seccion siempre-oscura (dia y noche); el acento --gold de algunas paletas queda bajo
   sobre oscuro, asi que el titular se aclara conservando el tono (AA en ambos modos; ronda 11). */
.bd h3 { font-family: var(--fs); font-size: 1.7rem; margin: 0 0 8px; color: color-mix(in srgb, var(--gold) 62%, #ffffff); }
.bd p { margin: 0 0 20px; color: rgba(255,255,255,.75); }

/* Migas en ficha de unit */
.crumbs { margin-top: 63px; background: var(--bg2); border-bottom: 1px solid var(--border); font-size: .84rem; padding: 10px 0; position: relative; z-index: 10; }
/* Migas: el acento oscuro (--gold2) daba 4,42 con champan sobre el fondo de la barra; se pasa al token
   anclado, que es el que garantiza AA sobre fondo claro en las 20 paletas. */
.crumbs a { color: var(--gold-tx); font-weight: 600; }
.crumbs a:hover { color: var(--accent-dark); }
.crumbs span { color: var(--text3); }
body.dark .crumbs a { color: var(--gold-tx); }
.crumbs + .hero, .ann-bar + .crumbs { margin-top: 0; }
.ann-bar ~ .crumbs { margin-top: 0; }

/* Direccion en ubicacion */
.loc-addr { font-size: .95rem; color: var(--text2); margin: -6px 0 10px; font-weight: 600; }

/* Hint de Reservar en home multi */
.usel-hint { display: none; text-align: center; color: var(--gold2); font-weight: 600; margin: -28px 0 28px; font-size: .95rem; }
.usel-hint.show { display: block; }
body.dark .usel-hint { color: var(--gold); }
.usel-card.flash { border-color: var(--gold); box-shadow: var(--sh2); }

/* Blog vacio */
.blog-empty { padding-top: 160px; min-height: 60vh; }

/* Unit selector (multi-unit home) */
.usel { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 26px; }
.usel-card { background: var(--bg3); border-radius: var(--r-card); overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--border); transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr); }
.usel-card:hover { transform: translateY(-4px); box-shadow: var(--sh2); border-color: var(--gold); }
.usel-img { aspect-ratio: 4/3; background-size: cover; background-position: center; background-color: var(--border); transition: transform .45s cubic-bezier(.4,0,.2,1); }
.usel-card:hover .usel-img { transform: scale(1.05); }
.usel-img-ph { display: grid; place-items: center; background: linear-gradient(160deg, var(--bg2) 0%, var(--border) 100%); }
.usel-img-ph svg { width: 48px; height: 48px; color: var(--gold); opacity: .6; }
.usel-body { padding: 24px; display: flex; flex-direction: column; gap: 8px; flex-grow: 1; background: var(--bg3); position: relative; z-index: 1; }
.usel-body h3 { font-family: var(--fs); font-size: 1.45rem; margin: 0; color: var(--navy); }
.usel-cap { font-size: .82rem; color: var(--text3); }
.usel-price { font-family: var(--fs); font-size: 1.2rem; color: var(--gold2); font-weight: 400; }
body.dark .usel-price { color: var(--gold); }
.usel-btn { margin-top: 14px; align-self: flex-start; }

/* Contact */
.ctg { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.ctf { display: grid; gap: 14px; }
.ctf input, .ctf textarea { padding: 13px 16px; border: 1px solid var(--border); border-radius: var(--r-btn); font-family: inherit; font-size: .95rem; background: var(--bg3); color: var(--text1); transition: border-color var(--tr), box-shadow var(--tr); }
.ctf input:focus, .ctf textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,169,110,.18); }
.ctf textarea { min-height: 130px; resize: vertical; }
.cti { display: grid; gap: 16px; margin-top: 24px; }
.ctii { display: flex; align-items: center; gap: 14px; padding: 18px; background: var(--bg2); border-radius: var(--r-card); border: 1px solid transparent; transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr); }
.ctii:hover { transform: translateY(-2px); box-shadow: var(--sh1); border-color: var(--border); }
.ctii svg { width: 24px; height: 24px; color: var(--gold); flex-shrink: 0; }
.ctii strong { display: block; }
.ctii span { display: block; font-size: .82rem; color: var(--text3); }

/* Footer */
footer { background: var(--ftbg); color: var(--ft-tx2); padding: 72px 0 28px; }
.fti { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.ftt { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 44px; }
.ftb .logo { color: var(--gold); font-family: var(--fs); font-size: 1.2rem; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.ftb p { line-height: var(--lh-body, 1.65); font-size: .86rem; color: var(--ft-tx); }
.ftc h4 { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ft-tx); margin: 0 0 18px; }
.ftc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ftc a { font-size: .86rem; color: var(--ft-tx2); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--tr); }
.ftc a:hover { color: var(--gold); }
.ftbt { border-top: 1px solid var(--ft-line); padding-top: 22px; display: flex; justify-content: space-between; align-items: center; font-size: .8rem; flex-wrap: wrap; gap: 12px; color: var(--ft-tx2); }
.ftso { display: flex; gap: 12px; }
.ftso a { width: 38px; height: 38px; border: 1px solid var(--ft-line); border-radius: 999px; display: grid; place-items: center; color: var(--ft-tx2); transition: border-color var(--tr), color var(--tr), transform var(--tr); }
.ftso a:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }
.ftso svg { width: 16px; height: 16px; }

/* Responsive */
@media (max-width: 900px) {
  section { padding: 72px 0; }
  .nl { display: none; }
  .mb { display: grid; }
  .dg, .lg, .ctg { grid-template-columns: 1fr; gap: 44px; }
  .cals { grid-template-columns: 1fr; }
  .rg { grid-template-columns: repeat(2, 1fr); }
  .bp2 { grid-template-columns: 1fr; }
  .ftt { grid-template-columns: 1fr 1fr; }
  /* Nav movil: respeta el notch (safe-area) y evita que una marca larga rompa a 2 lineas y engorde el nav. */
  .ni { padding: calc(11px + env(safe-area-inset-top)) 16px 11px; gap: 10px; }
  .logo { font-size: 1.05rem; flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .logo svg { flex-shrink: 0; }
  .nc { gap: 6px; flex-shrink: 0; }
  /* Menu movil desplegable: la hamburguesa muestra los enlaces del nav como lista bajo la barra. */
  .sl-nav.menu-open .nl { display: flex; flex-direction: column; gap: 0; position: absolute; top: 100%; left: 0; right: 0; background: var(--bg3); border-bottom: 1px solid var(--border); padding: 6px 0; box-shadow: 0 14px 34px rgba(0,0,0,.14); }
  .sl-nav.menu-open .nl li { width: 100%; }
  .sl-nav.menu-open .nl a { display: block; padding: 13px 22px; font-size: .82rem; }
  .mb[aria-expanded="true"] { border-color: var(--gold); color: var(--gold); }
}
@media (max-width: 560px) {
  section { padding: 60px 0; }
  /* Hero de duna en movil: la foto se acorta, el titular baja de escala y los hechos pasan a dos columnas
     para que la barra siga cabiendo en el primer pliegue junto al boton del buscador. */
  .dh-media { height: 44vh; min-height: 260px; }
  /* EN MOVIL LA PROTECCION VUELVE A SER UNA BANDA, no una elipse de esquina: con 390 px de ancho el
     titular ocupa casi todo el ancho y se parte en dos lineas, asi que acotarla a la esquina deja la
     segunda linea fuera. MEDIDO: con la elipse, el titular del banco multi daba 1,71 a 390 px; con la
     banda pasa a 5,5 o mas. Acotar solo tiene sentido donde el texto ocupa una fraccion del ancho. */
  .dh-scrim { background:
    linear-gradient(to bottom, rgba(12,14,18,.58) 0px, rgba(12,14,18,.38) 44px, rgba(12,14,18,0) 88px),
    linear-gradient(to top, rgba(12,14,18,.84) 0%, rgba(12,14,18,.78) 26%, rgba(12,14,18,.62) 42%,
      rgba(12,14,18,.28) 58%, rgba(12,14,18,0) 78%); }
  .dh-txt { padding: 0 18px var(--sp-3, 26px); }
  .hero.dh h1 { line-height: 1.1; }
  .dh-bar { padding: 14px 18px; gap: 12px; }
  .dh-facts { gap: 12px 14px; }
  .dh-facts li { flex: 1 1 44%; }
  .dh-f-ic { width: 34px; height: 34px; }
  .dh-f-ic svg { width: 17px; height: 17px; }
  /* Banda de highlights compacta: filas icono+texto de igual ancho (iconos alineados), centradas. */
  .hl { padding: 20px 0; }
  .hli { flex-direction: column; gap: 10px; align-items: center; }
  .hlit { gap: 12px; width: 80vw; max-width: 300px; }
  .hlic { width: 36px; height: 36px; }
  .hlic svg { width: 16px; height: 16px; }
  .hltx strong { font-size: .86rem; line-height: 1.25; }
  .hltx span { font-size: .72rem; }
  .rg { grid-template-columns: 1fr; }
  .dc { grid-template-columns: 1fr 1fr; }
  .ftt { grid-template-columns: 1fr; }
  .ftbt { flex-direction: column; text-align: center; }
  .gg { grid-template-columns: 1fr; }
  .amg { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .amc { padding: 18px 12px; }
  .cday { font-size: .78rem; }
}

/* Calendario: navegacion de meses (12 vista, ventana de 2) */
.cal-head { display: flex; align-items: center; justify-content: space-between; max-width: 900px; margin: 0 auto 18px; gap: 12px; }
.cal-range { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text2); text-align: center; }
.cal-slot.cal-hide { display: none; }

/* Panel de reserva: barra compacta mientras falta la salida (no tapa el calendario) */
.slb-mini { display: none; }
#slBook.mini .slb-inner { display: none; }
#slBook.mini .slb-mini { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 12px 18px; font-size: .88rem; color: var(--navy); flex-wrap: wrap; }
/* Desktop: el panel completo se hace lateral para no cubrir el mes en pantalla */
@media (min-width: 1100px) {
  #slBook:not(.mini) { left: auto; right: 28px; bottom: 28px; width: 420px; border: 1px solid var(--gold); border-top-width: 2px; border-radius: 20px; transform: translateY(calc(100% + 48px)); }
  #slBook:not(.mini).open { transform: translateY(0); }
  #slBook:not(.mini) .slb-inner { padding: 26px 24px 26px; }
}

/* Logos de agencias (monocromos via currentColor) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.bpl-logo { display: block; margin: 0 auto 14px; }
.bpl-logo svg { display: block; width: auto; height: 36px; margin: 0 auto; }
.bpl-logo-vrbo svg { height: 30px; }

/* R5: indice del blog (tarjetas de articulos publicados) */
.blog-index { padding: 150px 0 90px; }
.blog-index .sl, .blog-index .st { text-align: center; }
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 28px; margin-top: 44px; }
.blog-card { display: flex; flex-direction: column; background: var(--bg3); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; transition: transform var(--tr), box-shadow var(--tr); color: inherit; }
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--sh2); }
.blog-card-img { aspect-ratio: 16 / 10; background-size: cover; background-position: center; }
.blog-card-ph { background: linear-gradient(135deg, var(--bg2), var(--bg)); }
.blog-card-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; }
.blog-card-date { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold2); font-weight: 600; }
.blog-card-body h3 { font-family: var(--fs); font-size: 1.3rem; margin: 0; color: var(--navy); line-height: 1.2; }
.blog-card-body p { margin: 0; font-size: .9rem; color: var(--text2); line-height: 1.55; }
.blog-card-more { margin-top: 6px; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-tx); font-weight: 600; }

/* Impresion: sin transiciones/reveal, sin widgets embebidos, evitar cortes en bloques */
@media print {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html.js .rv { opacity: 1 !important; transform: none !important; }
  .gyg-block, iframe { display: none !important; }
  section, .tip, .spot-img, .aff-banner, .blog-card { break-inside: avoid; page-break-inside: avoid; }
}

/* Simetria global de tarjetas (sl_symgrid_attrs / sl_grid_cols): columnas deterministas {2,3,4} sin
   huerfana; la fila final se centra en el caso patologico (symgrid--center). Anula el auto-fill de la
   clase base del grid (misma especificidad, gana por ir despues). Colapsa responsivo. */
.symgrid{display:grid;grid-template-columns:repeat(var(--sym-cols,3),minmax(0,1fr))}
.symgrid.symgrid--center{display:flex;flex-wrap:wrap;justify-content:center}
.symgrid.symgrid--center>*{flex:0 1 calc((100% - (var(--sym-cols) - 1) * var(--sym-gap,22px)) / var(--sym-cols))}
/* LA FILA CENTRADA TAMBIEN COLAPSA (2026-09-01f, P2.138). symgrid--center pone display:flex y las
   dos consultas de abajo solo cambiaban grid-template-columns, que en flex no hace nada: la
   base seguia siendo la de --sym-cols columnas, asi que en un movil de 390 px salian cuatro
   tarjetas de 76 px. Hasta hoy casi no se veia porque el centrado solo se activaba en el caso
   raro de UNA tarjeta suelta; desde hoy se activa siempre que la ultima fila no este llena. */
@media(max-width:820px){.symgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .symgrid.symgrid--center>*{flex:0 1 calc((100% - var(--sym-gap,22px)) / 2)}}
@media(max-width:520px){.symgrid{grid-template-columns:minmax(0,1fr)}
  .symgrid.symgrid--center>*{flex:0 1 100%}}

/* Mapa de zona vectorial (sl_zonemap_svg) portado desde mallorca. Colores del SVG por tokens de la
   plantilla (en noir queda oscuro por sus vars). Marco/etiqueta con tokens propios + fallbacks. */
.pl-map{position:relative;border-radius:14px;overflow:hidden;box-shadow:0 12px 32px rgba(0,0,0,.12);border:1px solid var(--border);margin:0 auto 34px;max-width:960px}
.pl-map-svg{background:color-mix(in srgb,var(--zm-ink,#0f2744) 6%,var(--zm-paper,#fdfcfa))}
.zone-map-svg{width:100%;height:auto;display:block}
.zone-map-svg text{pointer-events:none}
.pl-map-attr{position:absolute;right:8px;bottom:6px;font-size:.66rem;color:var(--tx2,var(--navy));background:color-mix(in srgb,var(--bg) 78%,transparent);padding:1px 6px;border-radius:4px}

/* Widget de disponibilidad compacto (availability.php, features.calendar_public=false). Tokens propios. */
/* Barra fina de disponibilidad: mapeo de la paleta costa a --avw-* (adapta dia/noche via tokens). */
.avw{--avw-surface:color-mix(in srgb, var(--bg3) 74%, transparent);--avw-surface-solid:var(--bg3);--avw-ink:var(--text1);--avw-ink2:var(--text2);--avw-line:var(--border);--avw-accent:var(--cta-bg);--avw-accent-ink:#fff;--avw-radius:14px;--avw-shadow:var(--sh2);--avw-overlap:40px}
body.dark .avw{--avw-picker:invert(1) brightness(1.4)}

/* Detalles: foto de apoyo (2a mejor de galeria) junto a los stats; degrada a stats solos si <2 fotos. */
.dside{display:flex;flex-direction:column;gap:14px}
.dphoto img{width:100%;height:auto;display:block;border-radius:12px;box-shadow:0 10px 26px rgba(0,0,0,.12)}

/* Barra de anuncio cerrable (features.announce) */
.ann-bar{position:relative}
.ann-txt{display:inline-block;padding:0 22px}
.ann-x{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:0;color:inherit;font-size:1.15rem;line-height:1;cursor:pointer;opacity:.65;padding:0 4px}
.ann-x:hover{opacity:1}

/* Selector de idioma (i18n Fase 3) */
.lang-wrap { position: relative; }
.lang-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; border-radius: 999px; padding: 8px 12px; font-size: .78rem; letter-spacing: .04em; color: var(--text2); cursor: pointer; font-family: inherit; transition: color .5s ease, background var(--tr); }
.lang-btn:hover { background: color-mix(in srgb, var(--gold) 10%, transparent); }
.lang-btn svg { width: 14px; height: 14px; }
.lang-btn .lang-chev { width: 11px; height: 11px; transition: transform var(--tr); }
.lang-wrap.open .lang-chev { transform: rotate(180deg); }
.lang-menu { position: absolute; right: 0; top: calc(100% + 8px); width: 168px; background: var(--bg3); border: 1px solid color-mix(in srgb, var(--gold) 20%, transparent); border-radius: 14px; box-shadow: var(--sh2); overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--tr), transform var(--tr), visibility var(--tr); z-index: 60; }
.lang-wrap.open .lang-menu { opacity: 1; visibility: visible; transform: none; }
.lang-menu a { display: flex; align-items: center; gap: 12px; padding: 10px 16px; font-size: .84rem; color: var(--text2); transition: background var(--tr), color var(--tr); }
.lang-menu a:hover { background: color-mix(in srgb, var(--gold) 5%, transparent); color: var(--navy); }
.lang-menu a.cur { color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, transparent); }

/* --- R18 addendum 2: composicion tipografica del nombre --------------------------------------
   El nombre de la OTA llega como "Marca - Reclamo". El guion NO se pinta nunca: el motor parte el
   nombre y aqui se compone. text-wrap:balance reparte el H1 en lineas parejas; el fallback (max-width
   en ch) evita la linea larga-y-huerfana donde el navegador no lo soporte. El corte del LOGO no se
   deja al navegador: lo calcula PHP (sl_brand_logo_lines) y aqui solo se pintan las lineas. */
/* duna: el titular va alineado a la izquierda dentro del hero, asi que se anulan los margenes automaticos
   de la version centrada; y el reclamo NO usa opacity (destroza el contraste sobre foto, regla del
   sistema): va en blanco pleno y se distingue por tamano e interletrado. */
.hero h1.h1-brand { text-wrap: balance; max-width: 22ch; margin-left: 0; margin-right: 0; }
.hero .h1-tag {
  font-family: var(--fb, inherit); font-weight: 400; text-transform: uppercase;
  letter-spacing: .14em; text-wrap: balance; max-width: 34ch;
  margin: 10px 0 0; font-size: clamp(.72rem, 1.5vw, .95rem); line-height: 1.5;
}
.logo .logo-brand { display: inline-flex; flex-direction: column; line-height: 1.12; }
.logo .logo-ln { display: block; white-space: nowrap; }
@media (max-width: 640px) {
  .hero h1.h1-brand { max-width: 16ch; }
  .hero .h1-tag { letter-spacing: .12em; max-width: 26ch; }
}

/* R19 fix: la barra de anuncio NO solapa el header. Reserva su altura real via --ann-h (fijada por JS en
   nav.php), desplazando la nav fija y el contenido. Al cerrarla con la X, --ann-h vuelve a 0. */
.ann-bar{position:fixed;top:0;left:0;right:0;z-index:950;margin-top:0}
nav.sl-nav{top:var(--ann-h,0px)}
body{padding-top:var(--ann-h,0px)}
.ann-x{right:14px}

/* ALREDEDORES / SUBPUNTUACIONES / INFO PRACTICA (2026-07-20).
   Datos reales de la ficha de la OTA. Iconos del set propio del proyecto (sl_icon_svg). */
.sl-around { margin-top: 20px; }
.sl-around-title { font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text2); margin: 0 0 14px; font-weight: 600; }
.sl-around-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 34px; align-items: start; }
.sl-around-col { min-width: 0; }
/* Los bloques de Alrededores son ahora PATRON DE SISTEMA y viven en el bloque compartido del final
   de esta hoja (P2.37). El tratamiento propio que duna estreno se retira de aqui para que no haya dos. */

body.dark .sl-around-group::after { background: var(--ink); }
body.dark .sl-around-group:hover { box-shadow: 0 10px 24px rgba(0,0,0,.45); }
.sl-around-tip { display: block; font-style: normal; font-size: .74rem; line-height: 1.3; color: var(--gold); margin-top: 1px; }
.sl-around-note { margin: 4px 0 0; font-size: .72rem; color: var(--text2); opacity: .75; }
.sl-around-cat { font-size: .74rem; letter-spacing: .09em; text-transform: uppercase; color: var(--gold); margin: 0 0 4px; font-weight: 600; }
.sl-around-list { list-style: none; margin: 0; padding: 0; }
.sl-around-item { display: flex; align-items: flex-start; gap: 9px; padding: 5px 0; border-bottom: 1px solid var(--border); font-size: .86rem; }
.sl-around-item:last-child { border-bottom: 0; }
.sl-around-item svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; color: var(--gold); }
.sl-around-name { flex: 1 1 auto; min-width: 0; line-height: 1.35; }
.sl-around-dist { flex-shrink: 0; white-space: nowrap; color: var(--text2); font-size: .78rem; padding-top: 1px; }
.sl-around-dist em { font-style: normal; opacity: .7; }
/* VALORACION GLOBAL (2026-07-30): nota grande con su escala y el numero de opiniones. El numero va en
   --ink (que en noche se aclara solo) y la meta en --tx2; los dos son tokens ya medidos sobre el fondo de
   seccion, asi que no hace falta color nuevo. */
.rev-score { display: flex; align-items: baseline; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 0; }
.rev-score-num { font-family: var(--fs); font-size: clamp(2.6rem, 5.2vw, 3.6rem); font-weight: 600; line-height: 1; color: var(--ink); letter-spacing: var(--ls-display, -.01em); }
.rev-score-scale { font-size: var(--fz-lg, 1.15rem); font-weight: 600; color: var(--tx2); }
.rev-score-meta { flex: 1 1 100%; text-align: center; font-size: var(--fz-sm, .88rem); color: var(--tx2); margin-top: 2px; }
/* El bloque de subpuntuaciones quedaba PEGADO a las tarjetas de resena: se separa por arriba y por abajo.
   El margen inferior lo consume .rev-wrap, que es lo que va justo despues. */
.sl-subscores { margin: 34px auto 0; max-width: 540px; }
.rev .sl-subscores + .rev-wrap, .rev .sl-subscores { margin-bottom: 0; }
.rev .rev-wrap { margin-top: 38px; }
.sl-sub-title { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text2); margin: 0 0 12px; font-weight: 600; text-align: center; }
.sl-sub-rows { display: grid; gap: 9px; }
.sl-sub-row { display: grid; grid-template-columns: minmax(86px, 1.1fr) 2.4fr auto; align-items: center; gap: 12px; font-size: .83rem; }
.sl-sub-label { color: var(--text2); }
.sl-sub-bar { position: relative; display: block; height: 5px; border-radius: 999px; background: var(--bg2); overflow: hidden; }
.sl-sub-bar i { position: absolute; inset: 0 auto 0 0; display: block; border-radius: 999px; background: var(--gold); }
.sl-sub-val { font-weight: 600; font-variant-numeric: tabular-nums; }
.sl-practical { margin-top: 18px; }
.sl-practical-title { font-size: .74rem; letter-spacing: .09em; text-transform: uppercase; color: var(--text2); margin: 0 0 10px; font-weight: 600; }
.sl-practical-grid { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.sl-practical-item { display: flex; align-items: center; gap: 7px; font-size: .84rem; color: var(--text2); }
.sl-practical-item svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--gold); }
.sl-practical-val { font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  /* La rejilla de alrededores ya pasa a 1 columna en su propia media query del rediseno; aqui solo
     se compacta la fila de subpuntuaciones. */
  .sl-sub-row { grid-template-columns: minmax(76px, 1fr) 1.8fr auto; font-size: .8rem; }
}

/* REDISENO UBICACION 2026-07-20: fila 1 (poblaciones | mapa) a la misma altura + fila 2 (alrededores)
   a ancho completo en columnas equilibradas. La seccion cierra en rectangulo y ocupa menos alto. */
.loc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: stretch; }
.loc-grid-nomap { grid-template-columns: 1fr; }
.loc-info { display: flex; flex-direction: column; min-width: 0; }
.loc-info .li { margin-top: 14px; }
.loc-info .lit { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 8px 0; }
.lit-name { flex: 1 1 auto; min-width: 0; text-align: left; }
.lit-dist { flex-shrink: 0; color: var(--text2); font-size: .82rem; font-variant-numeric: tabular-nums; }
.loc-note { margin: 10px 0 0; font-size: .74rem; color: var(--text2); opacity: .8; }
.loc-grid .mf { aspect-ratio: auto; height: 100%; min-height: 260px; align-self: stretch; }
@media (max-width: 900px) {
  .loc-grid { grid-template-columns: 1fr; gap: 30px; }
  .loc-grid .mf { min-height: 230px; aspect-ratio: 4/3; height: auto; }
  .sl-around-grid { grid-template-columns: repeat(2, 1fr); gap: 0 26px; }
}
@media (max-width: 560px) {
  .sl-around-grid { grid-template-columns: 1fr; }
  .sl-around-group { margin-bottom: 10px; }
  .sl-around-item { padding: 5px 0; font-size: .82rem; }
  .sl-around-title { margin-bottom: 10px; }
  .loc-info .lit { padding: 8px 0; font-size: .86rem; }
}

/* PRECIOS Y CONDICIONES (P2, 2026-07-20). Informativo, sin calculo de totales. */
.sl-pricing { margin: 22px auto 0; max-width: 520px; text-align: left; }
.pr-title { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text2); margin: 0 0 10px; font-weight: 600; }
.pr-rows { display: grid; gap: 2px; }
.pr-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: .88rem; }
.pr-row:last-child { border-bottom: 0; }
.pr-lbl { min-width: 0; }
.pr-val { flex-shrink: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.pr-val em { font-style: normal; font-weight: 400; font-size: .78rem; color: var(--text2); }
.pr-note { margin: 10px 0 0; font-size: .74rem; color: var(--text2); opacity: .85; }
@media (max-width: 560px) { .pr-row { font-size: .84rem; } }

/* CONDICIONES PRECONTRACTUALES DE LA RESERVA (cobros directos, ronda 2C, 2026-08-15). Comparte anchura y
   tono con el bloque de precios de arriba, que es su vecino natural: precio y condiciones se leen juntos.
   Todo por tokens de la paleta, ni un hex, asi que el modo noche llega solo. NO se usa opacity para
   atenuar: atenuar con opacity destruye el contraste y esta casa ya lo pago con la marca de resena
   traducida, que quedaba a 2,46:1. La jerarquia la dan el tamano y --tx2. */
.sl-rvpol { margin: 18px auto 0; max-width: 520px; text-align: left; }
.rvpol-title { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tx2); margin: 0 0 8px; font-weight: 600; }
.rvpol-list { margin: 0; padding-left: 20px; display: grid; gap: 5px; }
.rvpol-list li { font-size: .86rem; line-height: 1.55; }
.rvpol-note { margin: 9px 0 0; font-size: .74rem; color: var(--tx2); }

/* Columna izquierda de "El apartamento" (2026-07-20): descripcion + datos de ambiente. */
.dx-facts { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 7px; }
.dx-facts li { display: flex; align-items: center; gap: 9px; font-size: .88rem; color: var(--text2); }
.dx-facts li svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--gold); }
.dx-chips { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 14px; }
.dx-chip { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--text2);
  border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; }
.dx-chip svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--gold); }

/* =====================================================================
   ACENTO ESTRUCTURAL POR PALETA (2026-07-23)
   Bloque IDENTICO en las tres plantillas. Solo tokens: ninguna plantilla
   define aqui un color propio, asi que cada paleta lo hereda con el suyo.
   Los colores derivados (--gold-on-ink, --ink-contrast, --ink-contrast2)
   llegan PRECOMPUTADOS en el :root inline que emite sl_palette_css_vars().
   REGLA QUE NO SE TOCA: el cuerpo de texto sigue en su gris fijo (--tx).
   Aqui no hay ni un parrafo en --ink.
   ===================================================================== */

/* --- 1. FOOTER: fondo de tinta ------------------------------------- */
footer {
  background: var(--ink);
  color: var(--ink-contrast, #ffffff);
  border-top: none;
  /* Se redefinen los tokens del footer DENTRO de su ambito: los de :root
     estan calculados para el fondo claro anterior (--bg2) y sobre tinta
     no llegarian a AA. */
  --ft-tx: var(--ink-contrast, #ffffff);
  --ft-tx2: var(--ink-contrast2, #dcdcdc);
  --ft-line: color-mix(in srgb, var(--ink-contrast, #ffffff) 20%, transparent);
}
footer .ftb .logo { color: var(--ink-contrast, #ffffff); }
footer .ftb p { color: var(--ink-contrast2, #dcdcdc); }
footer .ftc h4 { color: var(--gold-on-ink, #ffffff); }
/* Los enlaces de columna van en el acento derivado, que es el estado en el que
   --gold-on-ink existe para verse. El hover pasa al blanco de la paleta: mantener
   los dos en dorado exigiria un tercer token derivado y la diferencia entre dos
   dorados aclarados seria casi invisible, que es lo contrario de una senal de hover. */
footer .ftc a { color: var(--gold-on-ink, #ffffff); }
footer .ftc a:hover { color: var(--ink-contrast, #ffffff); }
footer .ftbt { color: var(--ink-contrast2, #dcdcdc); }
footer .ftso a { color: var(--ink-contrast2, #dcdcdc); border-color: color-mix(in srgb, var(--ink-contrast, #ffffff) 26%, transparent); }
footer .ftso a:hover { color: var(--gold-on-ink, #ffffff); border-color: var(--gold-on-ink, #ffffff); }

/* --- 1-BIS. MARCA DEL PROVEEDOR EN EL PIE (P3.11, 2026-07-26) --------
   Bloque IDENTICO en las tres plantillas y hecho solo de tokens. Va el
   ULTIMO del pie y CENTRADO, separado por un filete, para que se lea sin
   dudas sin competir con la marca del cliente, que abre el pie a mayor
   tamano. El wordmark es un SVG inline de un solo trazado: hereda el color
   por currentColor, asi que se resuelve con --ink-contrast en las 20
   paletas y en los dos modos, y no hace falta una version por fondo.
   La altura va en em del bloque para que escale con el texto de al lado. */
.slbv { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--ft-line);
  display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; }
.slbv-t { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-contrast2, #dcdcdc); opacity: .85; }
.slbv-a { display: inline-flex; color: var(--ink-contrast, #ffffff);
  transition: color .3s ease, opacity .3s ease; border-radius: 3px; }
.slbv-a svg { display: block; height: 26px; width: auto; }
.slbv-a:hover { color: var(--gold-on-ink, #ffffff); }
.slbv-a:focus-visible { outline: 2px solid var(--gold-on-ink, #ffffff); outline-offset: 4px; }
@media (max-width: 640px) { .slbv-a svg { height: 22px; } }

/* --- 2. FILETE DE ACENTO, SOLO EN DESTACADOS ------------------------
   Marcado por la clase compartida sl-accent-card, que llevan unicamente
   la tarjeta de highlights y la del calendario. NO se aplica por selector
   de plantilla para que ninguna herede el filete por accidente.
   Se usa border-top y no border-left porque las tres plantillas apilan
   estas tarjetas en rejilla y en movil pasan a una columna: el filete
   superior se lee igual en los dos casos, el lateral se pierde. */
.sl-accent-card {
  /* EL FILETE LO PINTA YA LA REGLA COMPARTIDA (2026-09-01h, P2.145). Aqui habia
     border-top: 3px solid var(--ink), y el sistema primary-line pinta ADEMAS un
     ::before de 3px sobre .sl-accent-card. Resultado: DOS lineas del mismo color
     apiladas donde el diseno quiere una. Medido con estilos computados sobre lo
     servido en la-ventana-al-mar: en div.hli.sl-accent-card, border-top 3px por
     1200px rgb(90,74,47) MAS ::before 3px por 1200px rgb(90,74,47); y lo mismo en
     div.cals.sl-accent-card, los dos de 3px por 760px.
     SE QUITA ESTE Y SE QUEDA EL ::before, por tres motivos: la regla compartida
     sirve a otras nueve clases y no se toca; el ::before lleva el color del token
     --primary-line con su variante de noche, mientras este usaba --ink; y el
     ::before se dibuja de izquierda a derecha al entrar en vista, que es el
     comportamiento del sistema. La clase la llevan solo dos elementos por plantilla
     (la banda de highlights o el bloque equivalente, y la tarjeta del calendario),
     asi que el cambio esta acotado y es el mismo en los dos. */
}

/* --- 3. ENLACES DEL CUERPO -----------------------------------------
   Se filtra por :not([class]) en vez de enumerar las clases de CTA. En
   estas plantillas TODO boton o CTA lleva clase propia (bk, nav-cta,
   uc-cta, avw-cta, cal-arrow...) y el enlace de prosa no lleva ninguna,
   asi que la regla cubre los que vengan de la descripcion del cliente o
   del cuerpo del articulo sin tocar un solo CTA, y sigue valiendo si
   manana aparece un CTA con un nombre nuevo.
   OJO: la home del tenant no tiene elemento <main>, se compone de
   <section>, asi que anclarlo a main habria dejado la home fuera. */
section p a:not([class]),
section li a:not([class]),
.art p a:not([class]),
.art li a:not([class]) {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--tr);
}
section p a:not([class]):hover,
section li a:not([class]):hover,
.art p a:not([class]):hover,
.art li a:not([class]):hover {
  color: var(--gold2);
}

/* --- 4. ICONOS DE AMENITIES Y CHIPS -------------------------------- */
/* Los iconos de amenities viven en CUATRO familias distintas, no solo en .amc: la
   medicion con estilos computados mostro .sl-around-item y .sl-practical-item en
   var(--accent) y .pl-ic en var(--accent-dark), o sea que la primera version del
   bloque solo alcanzaba a una de las cuatro y el resto seguia en dorado. */
.amc svg { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); }
.sl-around-item svg,
.sl-practical-item svg { color: var(--ink); }
.pl-ic { color: var(--ink); background: color-mix(in srgb, var(--ink) 10%, transparent); }
.am-extra li::before { background: var(--ink); }

/* --- MODO NOCHE -----------------------------------------------------
   Se conservan SOLO el filete de acento y el color de enlaces, que en
   noche heredan el --ink claro y se leen bien sobre superficie oscura.
   Todo lo demas vuelve a su estado anterior: el footer mantiene su fondo
   oscuro y los iconos su acento aclarado. Nada tinta superficies. */
body.dark footer {
  background: var(--bg2);
  color: var(--tx);
  border-top: 1px solid var(--line);
  --ft-tx: color-mix(in srgb, #ffffff 92%, var(--bg2));
  --ft-tx2: color-mix(in srgb, #ffffff 74%, var(--bg2));
  --ft-line: color-mix(in srgb, #ffffff 15%, transparent);
}
body.dark footer .ftb .logo { color: var(--ink); }
body.dark footer .ftb p,
body.dark footer .ftbt { color: var(--ft-tx2); }
body.dark footer .ftc h4 { color: var(--accent-dark); }
body.dark footer .ftc a { color: var(--ft-tx2); }
body.dark footer .ftc a:hover { color: var(--accent-dark); }
body.dark footer .ftso a { color: var(--ft-tx2); border-color: var(--ft-line); }
body.dark footer .ftso a:hover { color: var(--accent-dark); border-color: var(--accent); }
body.dark .amc svg { color: var(--accent-dark); background: color-mix(in srgb, var(--accent) 10%, transparent); }
body.dark .sl-around-item svg,
body.dark .sl-practical-item svg { color: var(--accent); }
body.dark .pl-ic { color: var(--accent-dark); background: color-mix(in srgb, var(--accent) 12%, transparent); }
body.dark .am-extra li::before { background: var(--accent-dark); }
body.dark section p a:not([class]):hover,
body.dark section li a:not([class]):hover,
body.dark .art p a:not([class]):hover,
body.dark .art li a:not([class]):hover {
  color: var(--accent-dark);
}

/* --- NIVEL 2 DE ACENTO (2026-07-23) ---------------------------------
   El navy solo al final del scroll era poco. Se lleva la tinta a los tres
   tramos: hero, mitad de pagina y footer. Todo por token, nada por plantilla.

   a) SCRIM DEL HERO tintado con la paleta en vez del oscurecido neutro.
      Se declara PRIMERO el gradiente neutro de siempre y DESPUES el tintado:
      un navegador sin color-mix se queda con el primero y el hero sigue
      legible, sin necesidad de @supports. Es un TINTE, no un filtro: se
      conservan las mismas opacidades que ya tenia, la foto sigue mandando.
      Da por fin uso real a --navy2, que hasta ahora solo pintaba un
      gradiente que los tenants con foto de hero no llegan a ver nunca.

      RETIRADO EL 2026-08-08 (P2.54): era CSS MUERTO. El hero de esta plantilla no
      usa .hbg en ningun sitio (partials/hero.php no emite esa clase), asi que la
      regla no casaba ni un elemento. Se retira para que no se copie al construir
      una plantilla nueva: en las que SI usan .hbg este mismo bloque era el defecto
      de contraste, porque --navy2 y --ink los reasigna body.dark a valores claros. */

/* b) BANDA DE CONVERSION EN TINTA a mitad de pagina.
      Seccion elegida: la de RESERVA DIRECTA (.bk), por clase semantica
      sl-accent-band. Cumple la regla del encargo: no contiene tablas densas
      ni el calendario (ese vive en su propia seccion .cs, que se deja en
      claro a proposito porque una rejilla de 342 dias sobre tinta seria
      ilegible). Es ademas la misma seccion en las tres plantillas y es donde
      esta el CTA de reserva, o sea el sitio donde el enfasis rinde. */
.sl-accent-band { background: var(--ink); color: var(--ink-contrast, #ffffff); }
.sl-accent-band .sl { color: var(--gold-on-ink, #ffffff); }
.sl-accent-band .st { color: var(--ink-contrast, #ffffff); }
.sl-accent-band .ss { color: var(--ink-contrast2, #dcdcdc); }
.sl-accent-band .bd {
  background: color-mix(in srgb, var(--ink-contrast, #ffffff) 8%, transparent);
  border-color: color-mix(in srgb, var(--gold-on-ink, #ffffff) 45%, transparent);
  color: var(--ink-contrast, #ffffff);
}
.sl-accent-band .bd h3 { color: var(--ink-contrast, #ffffff); }
/* El CTA (.bp) NO se toca: sigue en gold, que es lo que pedia el encargo. */

/* c) BADGES Y CONTADORES: estas plantillas no tienen. Lo mas parecido son
      las tarjetas de dato (.dd de details), que YA llevan el filete de
      acento del nivel 1. No se inventa un componente nuevo para el punto. */

/* MODO NOCHE del nivel 2: el scrim se mantiene (hereda la tinta clara y
   sigue oscureciendo por opacidad) y la banda usa el fondo oscuro existente,
   sin tintar ninguna superficie. */
body.dark .sl-accent-band { background: var(--bg2); color: var(--tx); }
body.dark .sl-accent-band .sl { color: var(--accent-dark); }
body.dark .sl-accent-band .st,
body.dark .sl-accent-band .bd h3 { color: var(--ink); }
body.dark .sl-accent-band .ss { color: var(--tx2); }
body.dark .sl-accent-band .bd {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--tx);
}

/* ==========================================================================
   CALENDARIO: DOS EJES INDEPENDIENTES (P1.4) Y CONTRASTE DEL OCUPADO (P2.11), 2026-07-26.
   BLOQUE IDENTICO EN LAS TRES PLANTILLAS y compuesto SOLO por tokens, como el bloque de acento
   estructural. Eje A, disposicion: .cal-lay-clasico (un mes), .cal-lay-panoramico (dos en escritorio,
   uno en movil; comportamiento historico) y .cal-lay-compacto (lista de proximos periodos). Eje B,
   piel: .cal-skin-clasica (cuadrada redondeada, hoy en dorado solido), .cal-skin-circular (redonda,
   hoy en contorno) y .cal-skin-premium (minimalista). Cualquier combinacion es valida.
   Todo token nuevo va con VALOR DE RESPALDO por la trampa del HTML congelado.
   ========================================================================== */

/* --- ESTADOS, REDISENO 2026-07-26 (veredicto del operador y medicion de referentes).
   El LIBRE va SIN TINTE: superficie limpia, filete de 1 px y numero fuerte. El OCUPADO va con RELLENO
   SOLIDO, tachado y texto claro. La separacion entre estados nace de relleno frente a no-relleno, que es
   el patron que usa la propia libreria de Airbnb (react-dates: libre #fff con filete, ocupado relleno
   macizo), y no de dos tintes pastel casi iguales, que era la queja. Tokens medidos en las 20 paletas.
   PRECEDENCIA: ocupado GANA a hoy; antes un dia que era hoy Y estaba ocupado se leia como hoy. --- */
.cday { font-size: var(--cal-fz, 14px); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.cday.fr { background: transparent; color: var(--cal-fr-tx, #0f2744); border: 1px solid var(--cal-fr-bd, #d8cfbc); }
.cday.fr:hover { background: color-mix(in srgb, var(--gold) 12%, transparent); border-color: var(--gold); transform: none; box-shadow: none; }
.cday.bl, .cday.td.bl { background: var(--cal-bl-bg, #8f4853); color: var(--cal-bl-tx, #ffffff);
  border: 1px solid transparent; text-decoration: line-through; cursor: not-allowed; opacity: 1; box-shadow: none; }
body.dark .cday.fr { color: var(--cal-fr-tx-dark, #f4f1ea); border-color: var(--cal-fr-bd-dark, #3a4450); }
body.dark .cday.bl, body.dark .cday.td.bl { background: var(--cal-bl-bg-dark, #59293b); color: var(--cal-bl-tx-dark, #ffe9e9); }
/* Leyenda coherente con lo que pintan las celdas: hueco con filete frente a relleno macizo. */
.cd.fr { background: transparent; border: 1px solid var(--cal-fr-bd, #d8cfbc); }
.cd.bl { background: var(--cal-bl-bg, #8f4853); border: 1px solid transparent; }
body.dark .cd.fr { border-color: var(--cal-fr-bd-dark, #3a4450); }
body.dark .cd.bl { background: var(--cal-bl-bg-dark, #59293b); }

/* --- ANCHO: el calendario NUNCA ocupa la pagina completa en escritorio. Con 760 px para dos meses la
   celda cae en unos 46 px, la banda de los referentes (react-dates usa 39 px con numero de 14 px). A
   pagina completa solo en movil. --- */
.cals { --cal-max: 760px; max-width: var(--cal-max); margin-left: auto; margin-right: auto; }
.cals.cal-lay-clasico { --cal-max: 400px; }
@media (max-width: 759px) { .cals { --cal-max: 100%; } }

/* --- TOPE ABSOLUTO DE CELDA (P2.33, 2026-07-30) ---
   EL DEFECTO: el lado de la celda se DERIVABA del espacio disponible (7 columnas 1fr dentro del bloque),
   asi que topar el ancho del bloque no topaba la celda: medido en servido sobre remo3 (panoramico +
   circular), 103,4 px de celda con el numero en 15 px a 1280, 1600 y 1920 px. La banda de los referentes
   es 39 px de celda con numero de 14 px.
   LA REGLA: la celda tiene un MAXIMO absoluto en pixeles, independiente de la disposicion, de la piel, del
   ancho del viewport y del numero de meses. El sobrante de una pantalla ancha se va en margen (las
   columnas se centran), NUNCA en hinchar la celda. Es un MAXIMO, no un tamano fijo: minmax(0, ...) deja
   que la celda ENCOJA en movil, donde el bloque manda y el objetivo tactil ya era de 43,7 px.
   POR PIEL solo cambia donde la geometria lo exige: suite es una PASTILLA de 1,55:1, asi que su maximo es
   de ancho (62 px) para que el alto quede en los mismos ~40 px que las demas. */
.cals { --cal-cell: 44px; --cal-fz: 14px; }
.cals.cal-skin-suite { --cal-cell: 62px; }
.cals.cal-skin-editorial { --cal-fz: 16px; }   /* serif de titulares: x mas pequena que la sans a igual cuerpo */
.cdh, .cdd { grid-template-columns: repeat(7, minmax(0, var(--cal-cell))); justify-content: center; }
.cday { font-size: var(--cal-fz); }

/* --- DISPOSICIONES --- */
/* PANORAMICO: dos meses EN PARALELO en escritorio y uno en movil. Estaba descrito en el comentario de
   P1.4 y en ESTADO, pero no existia como regla: una .cals { grid-template-columns: 1fr } huerfana, caida
   fuera de su @media, lo dejaba en UNA columna a cualquier ancho, y por eso cada mes ocupaba los 760 px
   del bloque entero. */
.cals.cal-lay-panoramico { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 759px) { .cals.cal-lay-panoramico { grid-template-columns: 1fr; } }
.cals.cal-lay-clasico { grid-template-columns: 1fr; }
.cals.cal-lay-compacto { display: block; }
.cals.cal-lay-compacto .cal-slot { display: none; }
.cal-compact { max-width: 760px; margin: 0 auto; }
.cal-cp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cal-cp-item { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 16px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--bg3); font-size: .9rem; }
.cal-cp-state { font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: .72rem;
  padding: 3px 10px; border-radius: 999px; }
.cal-cp-item.is-fr .cal-cp-state { background: transparent; border: 1px solid var(--cal-fr-bd, #d8cfbc); color: var(--cal-fr-tx, #0f2744); }
.cal-cp-item.is-bl .cal-cp-state { background: var(--cal-bl-bg, #8f4853); color: var(--cal-bl-tx, #fff); }
.cal-cp-range { font-variant-numeric: tabular-nums; color: var(--ink, var(--navy)); }
.cal-cp-n { margin-left: auto; color: var(--tx2, var(--text2)); font-size: .82rem; }

/* ================== EJE B: PIELES ==================
   REDISENO 2026-07-26b (veredicto: las pieles se distinguian solo por la letra, imperceptible en la
   miniatura). Ahora cada piel tiene LENGUAJE DE FORMA propio: forma y radio de celda, tratamiento del
   relleno del libre, marcador del ocupado (relleno, tachado, aspa o punto), presencia de filetes o lineas
   de rejilla, y aire. Ninguna carga fuentes de terceros: usan la sans de la plantilla (--fn en costa y
   noir, --ff-body en mallorca), su serif de titulares (--fs / --ff-title) o pilas del sistema.
   EL COLOR DE ESTADO NO CAMBIA entre pieles, para que la leyenda valga siempre. */

/* 1. CLASICO. Casilla RELLENA en pastel: la unica piel con relleno suave en el libre. Marcador del
      ocupado: relleno macizo. Sin filetes. */
.cal-skin-clasica .cdd { gap: 5px; }
.cal-skin-clasica .cday { border-radius: 10px; border: 0;
  font-family: var(--fn, var(--ff-body, system-ui)); font-size: var(--cal-fz, 14px); font-weight: 600; }
.cal-skin-clasica .cday.fr { background: var(--ok-fr); color: var(--ok-tx); border: 0; }
.cal-skin-clasica .cday.fr:hover { background: var(--ok-fr2); }
.cal-skin-clasica .cday.bl, .cal-skin-clasica .cday.td.bl { text-decoration: none; }
.cal-skin-clasica .cday.td { background: var(--gold); color: var(--cta-on-gold, #1a1206); box-shadow: none; }
/* En noche la plantilla reasigna el color de .cday.td y se comia el token medido (1,45). Se fija
   con mas especificidad: sobre el dorado manda SIEMPRE --cta-on-gold, que pasa AA en las 20. */
body.dark .cal-skin-clasica .cday.td { background: var(--gold); color: var(--cta-on-gold, #1a1206); }

/* 2. CIRCULAR. Circulo de FILETE, hueco. Marcador del ocupado: circulo macizo con tachado. */
.cal-skin-circular .cdd { gap: 6px; }
.cal-skin-circular .cday { border-radius: 999px;
  font-family: var(--fn, var(--ff-body, system-ui)); font-size: var(--cal-fz, 14px); font-weight: 600; }
.cal-skin-circular .cday.td { background: transparent; color: var(--gold2, var(--gold)); box-shadow: 0 0 0 2px var(--gold) inset; }
/* En noche el numero del dia de HOY iba en --gold2, que no se aclara con el modo: 3,41 con champan sobre
   el fondo oscuro. Mismo arreglo que se hizo en metro para la piel rejilla. */
body.dark .cal-skin-circular .cday.td { color: var(--gold-tx); }

/* 3. MINIMAL. SIN CAJA: ni relleno ni filete, solo el numero y un punto. Marcador del ocupado: PUNTO
      rojo bajo el numero, y el numero en el color del ocupado. Es la unica sin contenedor visible. */
.cal-skin-minimal .cdd { gap: 9px; }
.cal-skin-minimal .cday { border: 0; border-radius: 0; background: transparent; position: relative;
  font-family: var(--fn, var(--ff-body, system-ui)); font-size: var(--cal-fz, 14px); font-weight: 400; }
.cal-skin-minimal .cday.fr { background: transparent; border: 0; }
.cal-skin-minimal .cday.fr::after { content: ''; position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 999px; background: var(--gold); opacity: .75; }
.cal-skin-minimal .cday.fr:hover { background: transparent; border: 0; text-decoration: underline; }
.cal-skin-minimal .cday.bl, .cal-skin-minimal .cday.td.bl { background: transparent; border: 0;
  color: var(--cal-bl-bg, #8f4853); text-decoration: none; }
.cal-skin-minimal .cday.bl::after { content: ''; position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%);
  width: 5px; height: 5px; border-radius: 999px; background: var(--cal-bl-bg, #8f4853); }
body.dark .cal-skin-minimal .cday.bl, body.dark .cal-skin-minimal .cday.td.bl { color: var(--cal-bl-tx-dark, #ffe9e9); }
body.dark .cal-skin-minimal .cday.bl::after { background: var(--cal-bl-tx-dark, #ffe9e9); }
.cal-skin-minimal .cday.td { background: transparent; box-shadow: none; border-bottom: 2px solid var(--gold); border-radius: 0; }

/* 4. EDITORIAL. SERIF y FILETE INFERIOR, sin caja. Marcador del ocupado: TACHADO FINO y filete rojo. */
.cal-skin-editorial .cdd { gap: 7px; }
.cal-skin-editorial .cday { border: 0; border-bottom: 1px solid var(--cal-fr-bd, #d8cfbc); border-radius: 0;
  background: transparent; font-family: var(--fs, var(--ff-title, Georgia, serif));
  font-size: var(--cal-fz); font-weight: 400; letter-spacing: .02em; }
.cal-skin-editorial .cday.fr { background: transparent; border: 0; border-bottom: 1px solid var(--cal-fr-bd, #d8cfbc); }
.cal-skin-editorial .cday.fr:hover { background: transparent; border-bottom-color: var(--gold); }
.cal-skin-editorial .cday.bl, .cal-skin-editorial .cday.td.bl { background: transparent; border: 0;
  border-bottom: 2px solid var(--cal-bl-bg, #8f4853); color: var(--cal-bl-bg, #8f4853);
  text-decoration: line-through; text-decoration-thickness: 1px; }
body.dark .cal-skin-editorial .cday.bl, body.dark .cal-skin-editorial .cday.td.bl { color: var(--cal-bl-tx-dark, #ffe9e9); border-bottom-color: var(--cal-bl-tx-dark, #ffe9e9); }
.cal-skin-editorial .cday.td { background: transparent; box-shadow: none; border-bottom: 2px solid var(--gold); }

/* 5. REJILLA. TABLA de verdad: esquinas RECTAS, sin hueco entre celdas y lineas de cuadricula visibles.
      Numero monoespaciado. Marcador del ocupado: relleno macizo con ASPA. */
.cal-skin-rejilla .cdd { gap: 0; border: 1px solid var(--cal-fr-bd, #d8cfbc); border-radius: 4px; overflow: hidden; }
.cal-skin-rejilla .cday { border-radius: 0; border: 0;
  border-right: 1px solid var(--cal-fr-bd, #d8cfbc); border-bottom: 1px solid var(--cal-fr-bd, #d8cfbc);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: var(--cal-fz, 14px); font-weight: 400; position: relative; }
.cal-skin-rejilla .cday.fr { background: transparent; }
.cal-skin-rejilla .cday.fr:hover { background: color-mix(in srgb, var(--gold) 16%, transparent); }
.cal-skin-rejilla .cday.bl, .cal-skin-rejilla .cday.td.bl { text-decoration: none; }
.cal-skin-rejilla .cday.bl::before, .cal-skin-rejilla .cday.bl::after { content: ''; position: absolute;
  left: 50%; top: 50%; width: 62%; height: 1.5px; background: var(--cal-bl-tx, #fff); opacity: .85; }
.cal-skin-rejilla .cday.bl::before { transform: translate(-50%, -50%) rotate(45deg); }
.cal-skin-rejilla .cday.bl::after  { transform: translate(-50%, -50%) rotate(-45deg); }
body.dark .cal-skin-rejilla .cday.bl::before, body.dark .cal-skin-rejilla .cday.bl::after { background: var(--cal-bl-tx-dark, #ffe9e9); }
.cal-skin-rejilla .cday.td { background: transparent; color: var(--gold2, var(--gold)); box-shadow: 0 0 0 2px var(--gold) inset; border-radius: 0; }

/* 6. SUITE. PASTILLA muy redondeada con FILETE DORADO y mucho aire. Marcador del ocupado: relleno macizo
      con aro dorado, sin tachado. */
.cal-skin-suite .cdd { gap: 8px; }
/* PASTILLA de verdad (veredicto 2026-07-26d: con radio 14 se confundia con circular). La celda es
   visiblemente MAS ANCHA QUE ALTA, asi que su forma se distingue de un circulo incluso en la miniatura, y
   la relacion de aspecto es medible: 1,55 frente a 1 de circular. */
.cal-skin-suite .cday { aspect-ratio: 1.55; border-radius: 999px;
  font-family: var(--fn, var(--ff-body, system-ui)); font-size: var(--cal-fz, 14px); font-weight: 600; }
.cal-skin-suite .cdd { align-items: center; }
.cal-skin-suite .cday.fr { border: 1px solid color-mix(in srgb, var(--gold) 60%, transparent); }
.cal-skin-suite .cday.fr:hover { background: color-mix(in srgb, var(--gold) 14%, transparent); border-color: var(--gold); }
.cal-skin-suite .cday.bl, .cal-skin-suite .cday.td.bl { text-decoration: none;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 70%, transparent) inset; }
.cal-skin-suite .cday.td { background: transparent; color: var(--gold2, var(--gold)); box-shadow: 0 0 0 2px var(--gold) inset; }

/* --- CARRUSEL DE RESENAS OPERABLE POR TECLADO (P2.11): foco visible con el token de acento --- */
#revWrap:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 10px; }
#revWrap:focus { outline: 3px solid var(--gold); outline-offset: 3px; }
/* Texto solo para lectores de pantalla (ayuda de teclado del carrusel de resenas, P2.11). */
.sl-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
/* --- P2.11: contraste de alrededores y notas. La OPACIDAD como atenuacion es la trampa ya documentada
   (destroza el contraste): se retira y se atenua con el token de texto secundario, que ya pasa AA. --- */
.sl-around-cat { color: var(--gold-on-bg, #6b5226); }
body.dark .sl-around-cat { color: var(--gold-on-ink, #e2caa0); }
.sl-around-dist em { opacity: 1; color: var(--tx2, var(--text2, #555)); }
.loc-note { opacity: 1; color: var(--tx2, var(--text2, #555)); }
.sl-around-note { opacity: 1; color: var(--tx2, var(--text2, #555)); }
/* Banda de acento: el parrafo de .bd conservaba el gris de texto sobre fondo claro aunque la banda va
   sobre tinta oscura en modo dia (medido 1,98). Usa el token de contraste sobre tinta, como el resto. */
.sl-accent-band .bd p { color: var(--ink-contrast2, #dcdcdc); }
body.dark .sl-accent-band .bd p { color: var(--tx2, var(--text2, #555)); }
/* Mismos dos patrones que arriba: acento sobre fondo claro y texto secundario sobre superficie de tinta. */
.sl-around-tip { color: var(--gold-on-bg, #6b5226); }
body.dark .sl-around-tip { color: var(--gold-on-ink, #e2caa0); }
.sl-accent-band .pr-title, .sl-accent-band .pr-val em, .sl-accent-band .pr-note,
.sl-accent-band .rvpol-title, .sl-accent-band .rvpol-note { color: var(--ink-contrast2, #dcdcdc); }
body.dark .sl-accent-band .pr-title, body.dark .sl-accent-band .pr-val em, body.dark .sl-accent-band .pr-note,
body.dark .sl-accent-band .rvpol-title, body.dark .sl-accent-band .rvpol-note { color: var(--tx2, var(--text2, #555)); }
/* --- MARCA VERDE DEL DIA LIBRE (veredicto del operador 2026-07-26c). Las pieles sin tinte leian el libre
   por ausencia; ahora cada una lo marca en verde con el recurso que casa con su forma, nunca con relleno
   (el relleno sigue siendo del ocupado, que es lo que da la separacion). Verde precomputado por paleta y
   medido: peor 6,42 en dia y 8,39 en noche sobre la superficie real. Clasico no lo necesita: su seña de
   identidad ya es el relleno pastel verde. --- */
.cal-skin-circular .cday.fr,
.cal-skin-rejilla .cday.fr,
.cal-skin-suite .cday.fr { color: var(--cal-fr-green, #2e6b34); }
body.dark .cal-skin-circular .cday.fr,
body.dark .cal-skin-rejilla .cday.fr,
body.dark .cal-skin-suite .cday.fr { color: var(--cal-fr-green-dark, #8fd6a2); }
/* Minimal: el punto pasa de dorado a VERDE, que es su unico marcador. */
.cal-skin-minimal .cday.fr::after { background: var(--cal-fr-green, #2e6b34); opacity: 1; }
body.dark .cal-skin-minimal .cday.fr::after { background: var(--cal-fr-green-dark, #8fd6a2); }
.cal-skin-minimal .cday.fr { color: var(--cal-fr-green, #2e6b34); }
body.dark .cal-skin-minimal .cday.fr { color: var(--cal-fr-green-dark, #8fd6a2); }
/* Editorial: el filete inferior pasa a VERDE, que es su recurso propio; el numero se queda en tinta. */
.cal-skin-editorial .cday.fr { border-bottom-color: var(--cal-fr-green, #2e6b34); }
body.dark .cal-skin-editorial .cday.fr { border-bottom-color: var(--cal-fr-green-dark, #8fd6a2); }
/* Leyenda coherente: el chip de libre lleva la misma marca verde. */
.cd.fr { border-color: var(--cal-fr-green, #2e6b34); }
body.dark .cd.fr { border-color: var(--cal-fr-green-dark, #8fd6a2); }


/* ============ P2.35 FASE 2: REPARTO DE SUPERFICIE DEL COLOR PRINCIPAL (duna) ============
   Mismo sistema que el piloto de mallorca y los MISMOS nueve tokens de sl_primary_surface_vars(); aqui no
   hay ni un hex. Lo unico propio de la plantilla es la lista de selectores de sus tarjetas.
   ADAPTACION DE ESTA PLANTILLA: duna lleva la barra de hechos flotando sobre el hero. Esa barra NO recibe remate: no es una tarjeta de contenido y una linea del principal sobre la foto del hero competiria con el propio hero. El reparto entra por .am y .loc. */

/* (a) REMATE SUPERIOR en los bloques y tarjetas de toda la web. Pseudo-elemento ABSOLUTO: no ocupa
   layout, asi que no puede aportar CLS ni mover nada. */
.amc, .dd, .cb, .rc, .mf, .bd, .ctii, .bpl, .usel-card, .hlit, .sl-accent-card { position: relative; }
.amc::before,
.dd::before,
.cb::before,
.rc::before,
.mf::before,
.bd::before,
.ctii::before,
.bpl::before,
.usel-card::before,
.sl-accent-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 2;
  background: var(--primary-line, transparent);
  border-radius: var(--r-lg, 12px) var(--r-lg, 12px) 0 0;
  transform: scaleX(1); transform-origin: left center;
}
body.dark .amc::before,
body.dark .dd::before,
body.dark .cb::before,
body.dark .rc::before,
body.dark .mf::before,
body.dark .bd::before,
body.dark .ctii::before,
body.dark .bpl::before,
body.dark .usel-card::before,
body.dark .sl-accent-card::before { background: var(--primary-line-dark, transparent); }

/* (b) LINEA ANIMADA: la dibuja de izquierda a derecha el observador de layout.php al entrar en vista.
   El estado de partida lo enciende el propio script con .js-plin, asi que sin JavaScript y con
   prefers-reduced-motion la linea sale ya dibujada. Solo se anima transform. */
html.js-plin .amc::before,
html.js-plin .dd::before,
html.js-plin .cb::before,
html.js-plin .rc::before,
html.js-plin .mf::before,
html.js-plin .bd::before,
html.js-plin .ctii::before,
html.js-plin .bpl::before,
html.js-plin .usel-card::before,
html.js-plin .sl-accent-card::before {
  transform: scaleX(0); transition: transform .6s cubic-bezier(.4, 0, .2, 1);
}
html.js-plin .pl-on::before { transform: scaleX(1); }

/* (c) SECCIONES ALTERNAS sobre el principal: comodidades (.am) y entorno (.loc). Se REMAPEAN los tokens
   del vocabulario compartido en el propio contenedor y todo lo de dentro se recalcula solo, sin tocar ni
   una regla de las que ya habia. */
/* LA SECCION NO PUEDE DIFERIR DEL RESTO DE LA PAGINA (2026-08-05, criterio del operador).
   Antes el fondo salia de --primary-surface, que se calcula del color PRIMARIO de la paleta, asi
   que con una paleta oscura caia casi a negro sobre una pagina que no lo era: medido rgb(5,5,5)
   en noche y rgb(10,10,10) en dia sobre urbano, con el body en rgb(10,22,38) y rgb(250,247,240).
   Ahora toma el fondo ACTIVO de la pagina. Va por token propio y no por var(--bg) suelto porque
   .am y .loc redefinen dentro de si medio vocabulario (--bg2, --bg3, --card, --white) y conviene
   que se vea que este NO es de esa familia; mismo patron que --zm-*.
   EL TOKEN DE NOCHE ES OTRO Y VA EN body.dark A PROPOSITO: declarado en el ambito claro heredaria
   el --bg del dia y pintaria las secciones de blanco en noche. Ya paso una vez. */
:root { --sec-surface: var(--bg); }
body.dark { --sec-surface-dark: var(--bg); }
.am, .loc {
  /* SOLO EL FONDO. El resto del bloque REMAPEABA todo el vocabulario (tinta, acento, bordes, tarjetas)
     para una superficie OSCURA distinta de la pagina; en cuanto la seccion pasa a tener el fondo de la
     pagina, ese remapeo deja de tener sentido y ademas hace dano: el acento calculado para fondo oscuro
     daba 1,96:1 sobre el claro (medido en urbano, .loc-info > .sl). Sin remapeo, todo hereda los tokens
     de la pagina, que son los que ya cumplen contraste ahi. */
  background: var(--sec-surface, var(--bg));
}
body.dark .am, body.dark .loc {
  background: var(--sec-surface-dark, var(--bg));
  color: var(--on-primary-dark, var(--tx));
  --card: var(--primary-card-dark, var(--bg3));
  --ink: var(--on-primary-ink-dark, var(--navy));
  --tx: var(--on-primary-dark, #ece7dc);
  --tx2: var(--on-primary-2-dark, #c3bdb1);
  --tx3: var(--on-primary-2-dark, #c3bdb1);
  --line: var(--primary-border-dark, var(--border));
  --border: var(--primary-border-dark, var(--border));
  --accent: var(--on-primary-accent-dark, var(--gold));
  --accent-dark: var(--on-primary-accent-dark, var(--gold2));
  --navy: var(--on-primary-ink-dark, var(--navy));
  --navy2: var(--on-primary-2-dark, var(--navy2));
  --text1: var(--on-primary-dark, #ece7dc);
  --text2: var(--on-primary-2-dark, #c3bdb1);
  --text3: var(--on-primary-2-dark, #c3bdb1);
  --gold-on-bg: var(--on-primary-accent-dark, var(--gold2));
  --gold-on-ink: var(--on-primary-accent-dark, var(--gold));
  --bg2: var(--primary-card-dark, var(--bg2));
  --bg3: var(--primary-card-dark, var(--bg3));
  --white: var(--primary-card-dark, var(--bg3));
  --cta-otx: var(--on-primary-accent-dark, var(--gold2));
  --gold-tx: var(--on-primary-accent-dark, var(--gold2));
  --zona-line: var(--primary-line-in-dark, var(--gold));
  --zona-line-hover: var(--on-primary-ink-dark, var(--navy));
}
/* Dentro de una superficie que YA es el principal, el remate del principal seria invisible: pasa al
   acento, que es el token ya medido para AA sobre ese fondo. */
.am .amc::before, .loc .mf::before, .loc .pl-card::before,
.sl-accent-band .bd::before { background: var(--primary-line-in, transparent); }
body.dark .am .amc::before, body.dark .loc .mf::before, body.dark .loc .pl-card::before,
body.dark .sl-accent-band .bd::before { background: var(--primary-line-in-dark, transparent); }
/* El chip de ciudad del mapa se apoya en su propio fondo blanco sobre la ilustracion, no en la superficie
   de la seccion: conserva sus colores o quedaria tinta clara sobre blanco. */
/* EL MAPA ES UNA ILUSTRACION CLARA CON VIDA PROPIA dentro de la seccion: sus etiquetas y chips se apoyan
   en el papel del mapa, no en la superficie del principal, asi que NO pueden heredar el remapeo o quedan
   crema sobre crema. Se les devuelve tinta oscura fija; medido con pixel pintado, no supuesto. */
.am .pl-map-attr, .loc .pl-map-attr, .places .pl-map-attr { color: #3a3f45; }
.am .pl-map-city, .loc .pl-map-city, .places .pl-map-city { color: var(--primary-line, #1a1a1a); }
/* MEDIDO: en NOCHE el mapa no es una ilustracion clara (0 % de superficie clara en la captura), asi que
   la tinta oscura de dia lo dejaria ilegible. En noche las etiquetas vuelven al texto claro de la seccion.
   El chip de atribucion conserva su propia regla de noche, que gana en especificidad. */
/* MEDIDO POR PIXEL PINTADO: de noche el chip de atribucion se quedaba en tinta oscura sobre el mapa
   oscuro (1,52 en costa). Dentro de las secciones del principal se le da pastilla propia y texto claro,
   que es lo unico que garantiza legibilidad sin depender de que el mapa sea claro. */
body.dark .am .pl-map-attr, body.dark .loc .pl-map-attr, body.dark .places .pl-map-attr {
  color: var(--on-primary, #f4f1ea); background: rgba(0, 0, 0, .55);
}

/* DE NOCHE manda el acento ACLARADO: --gold-on-bg es el token de acento sobre fondo CLARO y en el tema
   oscuro se quedaria en 3,39 (medido con axe). --gold-tx ya trae su variante clara en body.dark. */
body.dark .sl { color: var(--gold-tx, var(--accent-dark)); }

/* ============ P2.37: BLOQUES DE ALREDEDORES, PATRON DE SISTEMA ============
   El tratamiento nacio en duna (linea superior, dibujo de izquierda a derecha al pasar el cursor y
   elevacion) y el operador lo quiso de raiz en todo el sistema. Aqui es el MISMO bloque en las seis
   plantillas y no hay ni un hex: el color de la linea sale de los tokens de P2.35 por --zona-line, asi
   que sobre fondo claro es el PRINCIPAL de la paleta y dentro de una seccion convertida es el ACENTO,
   exactamente igual que el remate de las tarjetas.
   TRES ESTADOS, y los tres tienen que verse dignos:
    1. REPOSO: tarjeta con superficie propia, radio, sombra suave y un rail de la linea al 26 %.
    2. ENTRADA EN VISTA: el ::after dibuja la linea entera de izquierda a derecha (mismo observador que
       el remate; el grupo entra en su lista de selectores).
    3. CURSOR: elevacion sutil, sombra mas presente y un SEGUNDO barrido (::before) en el tono de acento
       sobre el primero, que es el gesto que aprobo el operador en duna.
   Sin JavaScript y con prefers-reduced-motion la linea esta puesta desde el primer pintado: el estado
   estatico es el final, nunca el vacio. Los dos pseudo-elementos son ABSOLUTOS sobre el borde que ya
   existia, asi que no ocupan layout y no pueden aportar CLS. El hover solo se declara bajo
   (hover:hover) and (pointer:fine): en tactil no hay estados colgados. */
.sl-around-group {
  position: relative; margin: 0 0 14px; padding: 14px 16px 12px;
  background: var(--card, var(--bg3, #fff)); border-radius: var(--r-lg, 12px);
  border-top: 2px solid color-mix(in srgb, var(--zona-line, currentColor) 26%, transparent);
  box-shadow: 0 1px 2px rgba(23, 23, 23, .05), 0 3px 10px rgba(23, 23, 23, .045);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1), box-shadow .3s cubic-bezier(.4, 0, .2, 1);
}
.sl-around-group::after, .sl-around-group::before {
  content: ""; position: absolute; top: -2px; left: 0; right: 0; height: 2px;
  transform-origin: left center; transform: scaleX(1);
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
  border-radius: var(--r-lg, 12px) var(--r-lg, 12px) 0 0;
}
.sl-around-group::after { background: var(--zona-line, currentColor); }
.sl-around-group::before { background: var(--zona-line-hover, var(--zona-line, currentColor)); z-index: 1; transform: scaleX(0); }
/* Solo cuando el observador va a actuar se parte de cero; asi sin JS la linea nace dibujada. */
html.js-plin .sl-around-group::after { transform: scaleX(0); }
html.js-plin .sl-around-group.pl-on::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
  .sl-around-group:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(23, 23, 23, .06), 0 12px 28px rgba(23, 23, 23, .10); }
  .sl-around-group:hover::before { transform: scaleX(1); }
}
body.dark .sl-around-group { box-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 3px 10px rgba(0, 0, 0, .3); }
@media (hover: hover) and (pointer: fine) {
  body.dark .sl-around-group:hover { box-shadow: 0 2px 4px rgba(0, 0, 0, .45), 0 12px 28px rgba(0, 0, 0, .5); }
}
@media (prefers-reduced-motion: reduce) {
  .sl-around-group, .sl-around-group::after, .sl-around-group::before { transition: none; }
  .sl-around-group::after, html.js-plin .sl-around-group::after { transform: scaleX(1); }
  .sl-around-group:hover { transform: none; }
}
/* La rejilla gana aire entre tarjetas y el titulo de categoria deja de necesitar su propio margen alto. */
.sl-around-grid { align-items: start; }
.sl-around-group .sl-around-cat { margin-top: 0; }

/* LA FOTO NO SE OSCURECE: LA LEGIBILIDAD LA LLEVA SOLO LA SOMBRA DEL TEXTO (P2.109, 2026-08-28g).
   Mismo criterio y misma historia que en costa, mallorca y noir: la placa de .dh-txt-in DESAPARECE, no
   baja de porcentaje. Aqui ademas la foto ya llevaba .dh-scrim, el degradado de dos ejes del concepto de
   duna, que NO se toca: es parte del diseno de esta plantilla y protege tambien la fila de hechos, no
   solo el titular. Lo que se retira es la placa que iba pegada al bloque de texto.
   Varias capas por lo mismo que en las otras tres: las de 1 a 4 px en alfa 1 construyen el halo denso del
   borde, las diagonales cierran las esquinas y las anchas asientan el bloque. Los textos pequenos llevan
   ademas contorno real, dibujado DETRAS del relleno con paint-order, asi que la letra no engorda. */
.dh-txt h1 {
  text-shadow:
    0 0 1px rgba(4,8,14,1), 0 0 2px rgba(4,8,14,1), 0 0 3px rgba(4,8,14,1),
    0 0 4px rgba(4,8,14,1), 0 0 6px rgba(4,8,14,.95), 0 0 8px rgba(4,8,14,.9),
    2px 2px 3px rgba(4,8,14,1), -2px 2px 3px rgba(4,8,14,1),
    2px -2px 3px rgba(4,8,14,1), -2px -2px 3px rgba(4,8,14,1),
    0 0 14px rgba(4,8,14,.8), 0 0 24px rgba(4,8,14,.6), 0 4px 40px rgba(4,8,14,.5);
}
.dh-eyebrow, .dh-sub {
  color: #fff;
  paint-order: stroke fill;
  -webkit-text-stroke: 2.4px rgba(4,8,14,.92);
  text-shadow:
    0 0 1px rgba(4,8,14,1), 0 0 2px rgba(4,8,14,1), 0 0 3px rgba(4,8,14,1),
    0 0 4px rgba(4,8,14,1), 0 0 5px rgba(4,8,14,1), 0 0 6px rgba(4,8,14,1),
    0 0 7px rgba(4,8,14,.98), 0 0 9px rgba(4,8,14,.95), 0 0 11px rgba(4,8,14,.9),
    1px 1px 2px rgba(4,8,14,1), -1px 1px 2px rgba(4,8,14,1),
    1px -1px 2px rgba(4,8,14,1), -1px -1px 2px rgba(4,8,14,1),
    0 0 16px rgba(4,8,14,.8), 0 0 26px rgba(4,8,14,.6);
}

/* MARCA DE RESENA TRADUCIDA (2026-08-08). NO se atenua con opacity: iba a .55 y eso destroza el
   contraste, que es una trampa ya documentada de este proyecto. Medido en servido en la pagina /en/ y
   /de/ de remo3, que son las unicas donde aparece la marca: 2,46:1 de dia (#a3a5aa sobre blanco) y
   2,78:1 de noche, con umbral 4,5. La jerarquia se consigue con cursiva y tamano, que no tocan el color.
   Se descubrio al auditar la pagina alemana nueva; llevaba vivo en /en/ desde que existe la traduccion
   y nadie habia pasado axe por una pagina de idioma de un tenant. */
.rev-tr { font-size: .68rem; font-style: italic; }

/* ----- #bk: PRECIOS Y CONDICIONES EN DESPLEGABLES (2026-09-30, como mallorca-v2) -----
   sl_bk_desplegable() mete el titulo de cada bloque en un <summary>; los dos <details> nacen
   cerrados y se abren pulsando su titulo. La caja de accion .bd sigue debajo, centrada. Summary de
   44 px, sin marcador nativo, chevron que gira al abrir y foco visible. */
.sl-bkd-det { margin: 0; }
.sl-bkd-sum { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; margin: 0; padding: 0; }
.sl-bkd-sum::-webkit-details-marker { display: none; }
.sl-bkd-sum > h3 { margin: 0; }
.sl-bkd-sum::after { content: ""; flex: 0 0 auto; width: 8px; height: 8px; margin: 0 4px 4px 0; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 250ms cubic-bezier(.22, 1, .36, 1); }
.sl-bkd-det[open] > .sl-bkd-sum::after { transform: translateY(4px) rotate(-135deg); }
.sl-bkd-det[open] > .sl-bkd-sum { margin-bottom: 8px; }
.sl-bkd-sum:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .sl-bkd-sum::after { transition: none; } }