/* Theme styles. Palette via CSS variables. */
/* @fonts-inicio (generado por tools/fonts-fetch.js: NO editar a mano) */
@font-face{font-family:"Literata";font-style:normal;font-weight: 400 600;font-display:swap;src:url(fonts/literata-vf-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Literata";font-style:normal;font-weight: 400 600;font-display:swap;src:url(fonts/literata-vf-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Literata";font-style:normal;font-weight: 400 600;font-display:swap;src:url(fonts/literata-vf-cyrillic.woff2) format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:"Inter";font-style:normal;font-weight: 400 600;font-display:swap;src:url(fonts/inter-vf-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight: 400 600;font-display:swap;src:url(fonts/inter-vf-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight: 400 600;font-display:swap;src:url(fonts/inter-vf-cyrillic.woff2) 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 {
  --white: #ffffff;
  /* Los 8 tokens de paleta llegan inline desde layout.php (navy/navy2/gold/gold2/bg/bg2/bg3/border).
     Aqui: bg claros dominan; navy = tinta de titulares; gold = acento teal. */
  --ink: var(--navy);
  --accent: var(--gold);
  --accent-dark: var(--gold2);
  --tx: #34393f;          /* cuerpo: gris oscuro editorial, no negro puro */
  --tx2: #565b62;         /* secundario (oscurecido para AA sobre bg2/bg3 claros; ronda 11) */
  --tx3: #575c64;         /* terciario/labels (AA >=4.5 sobre bg claros CALIDOS y frios; ronda 12) */
  --card: var(--bg3);
  --line: var(--border);
  --ok: #2f7d4f; --ok-bg: #eef6f0;
  --bad: #b0453f; --bad-bg: #f7ecea;
  /* Texto del footer (fondo CLARO --bg2): tinta derivada de --ink mezclada con el fondo -> contraste
     garantizado con cualquier paleta (no usar --tx2/--tx3, que se quedan justos sobre bg2 claro). */
  --ft-tx: color-mix(in srgb, var(--ink) 92%, var(--bg2));   /* principal ~7:1 */
  --ft-tx2: color-mix(in srgb, var(--ink) 82%, var(--bg2));  /* secundario/enlaces/legal >=5:1 */
  --ft-line: var(--line);
  /* CTA solido: fondo = acento OSCURECIDO por derivacion (garantiza texto blanco >=4.5 con cualquier
     paleta, incluso acentos claros como cachemira). Ancla oscura fija -> no vira, sin gotcha. */
  --cta-bg: color-mix(in srgb, var(--gold) 54%, #10100e);
  --cta-bg-hover: color-mix(in srgb, var(--gold) 42%, #10100e);
  --cta-otx: color-mix(in srgb, var(--gold2) 68%, var(--navy));  /* acento para texto sobre fondo claro (outline) */
  --sh1: 0 6px 20px rgba(23,23,23,.06);
  --sh2: 0 18px 46px rgba(23,23,23,.12);
  --r: var(--r-sm, 8px); --r-lg: var(--r-md, 12px);
  --tr: .28s cubic-bezier(.4,0,.2,1);
  /* TIPOGRAFIA (P2.18): pareja en sl_type_css_vars(); aqui el alias con respaldo completo por la
     trampa del HTML congelado (el articulo viejo no declara --font-display pero si carga esta hoja). */
  --ff-title: var(--font-display, "Literata", Georgia, "Times New Roman", serif);
  --ff-body: var(--font-body, "Inter", 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));
}
/* ===== MODO NOCHE. OJO: NO deriva de la paleta del tenant, la SUSTITUYE. =====
   navy, navy2, bg, bg2, bg3, border, tx, tx2 y tx3 se fijan aqui a valores neutros
   iguales para TODAS las paletas, por contraste AA sobre superficie oscura. Lo unico
   que sobrevive de la paleta elegida en noche es gold/gold2, via --accent-dark,
   --cta-otx y --cta-bg. Consecuencia buscada: en noche todos los tenants comparten
   fondo y tinta, y se distinguen solo por el acento. (Corregido 2026-07-23: el
   comentario anterior decia "deriva de los propios tokens de la paleta del tenant",
   que es falso y hacia creer que cambiar de paleta alteraba el modo noche.)
   body.dark tiene mayor especificidad que el :root inline de layout.php. */
body.dark {
  --navy: #f4f1ea;         /* tinta de titulares -> clara en noche */
  --navy2: #d5cfc2;
  --ink: #f4f1ea;
  --tx: #ece7dc;           /* cuerpo claro */
  --tx2: #c3bdb1;          /* secundario (AA sobre superficies oscuras) */
  --tx3: #9d978b;          /* terciario/labels */
  --bg: #0d1017;           /* base oscura */
  --bg2: #141922;
  --bg3: #10151d;          /* superficie de tarjeta */
  --white: #10151d;        /* "blanco" -> superficie oscura (componentes que usaban #fff/--white) */
  --border: #2b303c;
  --card: #10151d;
  --line: #2b303c;
  /* Acento (teal de la paleta) ACLARADO sobre oscuro para AA en labels/stats/enlaces (.sl, .dd strong, h4). */
  --accent-dark: color-mix(in srgb, var(--gold) 50%, #ffffff);
  --cta-otx: color-mix(in srgb, var(--gold) 60%, #ffffff);
  --ok: #7fd39a; --ok-bg: #12281a;
  --bad: #e69090; --bad-bg: #2a1517;
  /* Footer: --ink ahora es claro y --bg2 oscuro; re-derivar para contraste alto sobre fondo oscuro. */
  --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);
  --sh1: 0 6px 20px rgba(0,0,0,.4);
  --sh2: 0 18px 46px rgba(0,0,0,.6);
  /* 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));
}
/* Hero: en dia usa --ink/--navy (oscuros); en noche esos tokens se aclaran, asi que el hero
   (con texto blanco) debe mantener superficie OSCURA propia para no romper el contraste. */
body.dark .hero { background: var(--bg); }
body.dark .hbg-plain { background: linear-gradient(160deg, var(--bg2) 0%, var(--bg) 100%); }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--ff-body); color: var(--tx); background: var(--bg); font-size: var(--fz-base, 1rem); line-height: var(--lh-body, 1.65); font-weight: var(--fw-body, 400); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.con { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.con-narrow { max-width: 760px; }
section { padding: var(--sp-6, clamp(64px, 8vw, 112px)) 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); }
.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; }
::selection { background: color-mix(in srgb, var(--accent) 24%, transparent); color: var(--ink); }

/* Cabeceras de seccion: eyebrow discreto + titular serif grande, SIN divisor dorado */
.sl { text-align: center; letter-spacing: .22em; font-size: .72rem; font-weight: 600; color: var(--accent-dark); text-transform: uppercase; margin: 0 0 14px; }
.st { text-align: center; font-family: var(--ff-title); font-weight: 400; font-size: clamp(2rem, 4vw, 3rem); margin: 0 0 18px; color: var(--ink); line-height: 1.12; letter-spacing: -.01em; }
.ss { text-align: center; color: var(--tx2); max-width: var(--measure, 620px); margin: 0 auto 44px; font-size: var(--fz-base, 1rem); }

/* ===== NAV: claro, transparente sobre el hero, glass blanco al scroll ===== */
nav.sl-nav { position: fixed; top: 0; left: 0; right: 0; background: transparent; z-index: 900; transition: background var(--tr), box-shadow var(--tr), backdrop-filter var(--tr); }
nav.sl-nav.scrolled { background: color-mix(in srgb, var(--bg3) 88%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 1px 0 var(--line); }
.ni { max-width: 1240px; margin: 0 auto; padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo { display: flex; align-items: center; gap: 10px; font-family: var(--ff-title); font-size: 1.3rem; color: #fff; font-weight: 600; letter-spacing: .01em; transition: color var(--tr); }
nav.sl-nav.scrolled .logo { color: var(--ink); }
.nl { display: flex; list-style: none; gap: 28px; margin: 0; padding: 0; font-size: .82rem; font-weight: 400; letter-spacing: .02em; }
.nl a { color: rgba(255,255,255,.9); position: relative; transition: color var(--tr); }
.nl a::after { content: ""; position: absolute; left: 0; bottom: -5px; width: 0; height: 1px; background: var(--accent); transition: width var(--tr); }
.nl a:hover::after { width: 100%; }
/* Seccion activa del nav (Blog en un articulo, 2026-07-24): subrayado fijo y mas peso. */
.nl a.nav-active { font-weight: 600; }
.nl a.nav-active::after { width: 100%; }
nav.sl-nav.scrolled .nl a { color: var(--tx); }
.nl a:hover, nav.sl-nav.scrolled .nl a:hover { color: var(--accent-dark); }
.nc { display: flex; align-items: center; gap: 12px; }
/* Toggle de tema (ronda 11): blanco sobre el hero transparente, tinta de paleta con el nav en glass. */
.tb { background: none; border: 1px solid rgba(255,255,255,.42); border-radius: 999px; width: 40px; height: 40px; display: grid; place-items: center; color: #fff; cursor: pointer; transition: border-color var(--tr), color var(--tr), transform var(--tr); }
.tb:hover { transform: translateY(-1px); border-color: #fff; }
.tb svg { width: 17px; height: 17px; }
nav.sl-nav.scrolled .tb { border-color: var(--border); color: var(--tx); }
nav.sl-nav.scrolled .tb:hover { border-color: var(--accent-dark); color: var(--accent-dark); }
.mb { display: none; background: none; border: 1px solid rgba(255,255,255,.4); border-radius: var(--r); width: 40px; height: 40px; place-items: center; color: #fff; cursor: pointer; transition: border-color var(--tr), color var(--tr); }
nav.sl-nav.scrolled .mb { border-color: var(--line); color: var(--tx); }
.mb svg { width: 18px; height: 18px; }
.lang-wrap { position: relative; }
.lang-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; border-radius: var(--r); padding: 8px 12px; font-size: .82rem; color: rgba(255,255,255,.9); cursor: pointer; font-family: inherit; transition: color var(--tr), background var(--tr); }
nav.sl-nav.scrolled .lang-btn { color: var(--tx); }
.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: 172px; background: var(--bg3); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh2); overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--tr), transform var(--tr), visibility var(--tr); }
.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: .86rem; color: var(--tx); transition: background var(--tr), color var(--tr); }
.lang-menu a:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--ink); }
.lang-menu a.cur { color: var(--accent-dark); background: color-mix(in srgb, var(--accent) 10%, transparent); }

/* ===== HERO: foto protagonista + titular + tarjeta blanca de busqueda ===== */
.hero { position: relative; min-height: 92vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 150px 24px 64px; color: #fff; overflow: hidden; background: var(--ink); }
.hbg { position: absolute; inset: 0; z-index: 0; }
.hbg img { width: 100%; height: 100%; object-fit: cover; }
.hbg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,30,40,.28) 0%, rgba(20,30,40,.30) 45%, rgba(20,30,40,.55) 100%); }
.hbg-plain { background: linear-gradient(160deg, var(--navy) 0%, var(--navy2) 100%); }
.hc { position: relative; z-index: 2; max-width: 900px; }
.h-eyebrow { letter-spacing: .28em; text-transform: uppercase; font-size: .72rem; font-weight: 600; color: rgba(255,255,255,.9); margin: 0 0 18px; }
.hero h1 { font-family: var(--ff-title); font-size: clamp(2.8rem, 6vw, 5rem); font-weight: 400; margin: 0 0 20px; letter-spacing: -.015em; line-height: 1.04; text-shadow: 0 2px 24px rgba(0,0,0,.28); }
.hs { font-size: 1.08rem; color: rgba(255,255,255,.92); max-width: 620px; margin: 0 auto; line-height: 1.7; }
/* Tarjeta blanca de busqueda (replica de .search-bar-inner: card blanca, borde, sombra suave) */
.avw-card { position: relative; z-index: 2; width: min(940px, 100%); margin: 44px auto 0; background: var(--bg3); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 8px 24px 4px rgba(23,23,23,.10), var(--sh2); padding: 18px; }
.avw { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; }
.avw-field { display: flex; flex-direction: column; gap: 6px; text-align: left; flex: 1 1 160px; min-width: 140px; }
.avw-field.avw-g { flex: 0 1 120px; min-width: 100px; }
.avw-field label { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tx2); font-weight: 600; }
.avw-field input, .avw-field select { width: 100%; font-family: var(--ff-body); font-size: .95rem; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 0 14px; height: 50px; cursor: pointer; }
.avw-field input:focus, .avw-field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.avw-go { flex: 1 1 200px; height: 50px; background: var(--cta-bg); color: #fff; border: 0; padding: 0 26px; border-radius: var(--r); font-family: var(--ff-body); font-weight: 600; font-size: .9rem; cursor: pointer; transition: background var(--tr), box-shadow var(--tr); }
.avw-go:hover { background: var(--cta-bg-hover); box-shadow: 0 14px 30px color-mix(in srgb, var(--accent) 28%, transparent); }
.avw-res { max-width: 100%; margin: 0; overflow: hidden; max-height: 0; opacity: 0; transition: max-height .4s ease, opacity .4s ease, margin .4s ease; text-align: left; }
.avw-res.show { max-height: 720px; opacity: 1; margin-top: 16px; }
.avw-msg { background: var(--bg2); color: var(--tx); border-radius: var(--r); padding: 14px 18px; font-size: .95rem; line-height: 1.55; border-left: 3px solid var(--accent); }
.avw-msg.ok { border-left-color: var(--ok); background: var(--ok-bg); }
.avw-msg.no { border-left-color: var(--bad); background: var(--bad-bg); }
.avw-msg.ask { border-left-color: var(--accent); }
.avw-msg.load { color: var(--tx2); }
.avw-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.avw-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 12px 16px; }
.avw-list li > span:first-child { font-family: var(--ff-title); font-size: 1.2rem; color: var(--ink); }
.avw-cap { font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; color: var(--tx3); }
.avw-cta { margin-left: auto; }
.avw-msg + .avw-cta { display: inline-flex; margin-top: 12px; }

/* ===== INTRO editorial centrada ===== */
.intro { background: var(--bg); text-align: center; }
.intro .sl { color: var(--accent-dark); }
.intro-p { font-family: var(--ff-title); font-size: clamp(1.25rem, 2.2vw, 1.7rem); line-height: 1.55; color: var(--ink); font-weight: 400; margin: 0 0 18px; }
.intro-p:last-child { margin-bottom: 0; }

/* ===== GRID DE UNITS estilo referencia ===== */
.units { background: var(--bg2); }
/* Grid de units DETERMINISTA por numero (sin huerfanos 3+1) */
.ug { display: grid; gap: 30px; margin-top: 8px; grid-template-columns: repeat(3, 1fr); }
.ug.count-1 { grid-template-columns: minmax(0, 520px); justify-content: center; }
.ug.count-2 { grid-template-columns: repeat(2, 1fr); max-width: 880px; margin-left: auto; margin-right: auto; }
.ug.count-3 { grid-template-columns: repeat(3, 1fr); }
.ug.count-4 { grid-template-columns: repeat(2, 1fr); max-width: 880px; margin-left: auto; margin-right: auto; }
.ug.count-6 { grid-template-columns: repeat(3, 1fr); }
/* 5 -> 3 arriba + 2 abajo centradas (grid de 6 cols, cada card ocupa 2) */
.ug.count-5 { grid-template-columns: repeat(6, 1fr); }
.ug.count-5 .uc { grid-column: span 2; }
.ug.count-5 .uc:nth-child(4) { grid-column: 2 / span 2; }
.ug.count-5 .uc:nth-child(5) { grid-column: 4 / span 2; }
.uc { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--tr), box-shadow var(--tr); }
.uc:hover { transform: translateY(-6px); box-shadow: var(--sh2); }
.uc-img { position: relative; aspect-ratio: 3/2; overflow: hidden; }
.uc-photo { position: absolute; inset: 0; background-size: cover; background-position: center; background-color: var(--bg2); transition: transform .6s cubic-bezier(.4,0,.2,1); }
.uc:hover .uc-photo { transform: scale(1.05); }
.uc-photo-ph { display: grid; place-items: center; background: linear-gradient(160deg, var(--bg2), var(--line)); }
.uc-photo-ph svg { width: 46px; height: 46px; color: var(--accent-dark); opacity: .5; }
.uc-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex-grow: 1; }
.uc-name { font-family: var(--ff-title); font-size: 1.5rem; font-weight: 400; margin: 0 0 4px; color: var(--ink); }
.uc-loc { font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-dark); font-weight: 600; margin: 0 0 14px; }
.uc-specs { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.uc-specs li { position: relative; padding-left: 16px; font-size: .9rem; color: var(--tx2); }
.uc-specs li::before { content: ""; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.uc-cta { margin-top: auto; align-self: flex-start; color: var(--accent-dark); font-weight: 600; font-size: .88rem; border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); padding-bottom: 2px; transition: color var(--tr), border-color var(--tr); }
.uc:hover .uc-cta { color: var(--accent); border-color: var(--accent); }

/* ===== GUEST BOOK (From the Guest Book) ===== */
.gb { background: var(--bg); }
.gb-score { display: inline-flex; align-items: baseline; gap: 8px; justify-content: center; width: 100%; margin: -6px 0 8px; flex-wrap: wrap; }
.gb-score-num { font-family: var(--ff-title); font-size: 3rem; line-height: 1; color: var(--accent-dark); font-weight: 400; }
.gb-score-scale { font-family: var(--ff-title); font-size: 1.4rem; color: var(--tx2); }
.gb-score-meta { font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tx3); font-weight: 600; align-self: center; margin-left: 6px; }
.gb-wrap { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; padding: 22px 24px 10px; }
.gb-wrap::-webkit-scrollbar { display: none; }
.gb-track { display: flex; gap: 22px; width: max-content; }
.gb-card { flex: 0 0 380px; max-width: 86vw; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 32px; margin: 0; display: flex; flex-direction: column; }
/* La cita iba en cursiva sobre la serif de titulares. No se vendoriza la italica de Literata (40 KB
   por un solo bloque) y la oblicua SINTETICA de una serif se ve mal, asi que la cita se distingue por
   tamano, comilla y color, no por inclinacion. */
.gb-quote { font-family: var(--ff-title); font-size: var(--fz-lg, 1.125rem); line-height: var(--lh-body, 1.65); color: var(--ink); margin: 0 0 18px; font-weight: 400; }
.gb-quote::before { content: "\201C"; font-family: var(--ff-title); font-size: 2.4rem; line-height: 0; color: color-mix(in srgb, var(--accent) 55%, transparent); margin-right: 4px; vertical-align: -.35em; }
.gb-by { margin-top: auto; display: flex; flex-direction: column; gap: 3px; }
.gb-name { font-weight: 600; font-size: .92rem; color: var(--ink); }
.gb-country { color: var(--tx3); font-weight: 400; }
.gb-stay { font-size: .8rem; color: var(--accent-dark); font-weight: 400; }
.gb-src { font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; color: var(--tx3); }

/* ===== PLACES / ZONA (grid de localizaciones) ===== */
.places { background: var(--bg2); text-align: center; }
.pl-map { position: relative; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); margin: 0 auto 40px; max-width: 960px; }
.pl-map img { width: 100%; height: auto; display: block; }
.pl-map-embed { aspect-ratio: 16 / 7; }
.pl-map-embed iframe { width: 100%; height: 100%; border: 0; }
.pl-map-attr { position: absolute; right: 8px; bottom: 6px; font-size: .66rem; color: #3a3f45; background: rgba(255,255,255,.78); padding: 1px 6px; border-radius: 4px; }
/* El mapa ilustrado es siempre claro; el chip de atribucion mantiene texto oscuro tambien en noche. */
body.dark .pl-map-attr { color: #2a2f35; background: rgba(255,255,255,.8); }
.pl-map-city { position: absolute; top: calc(50% - 56px); left: 50%; transform: translateX(-50%); font-family: var(--ff-title); font-size: 1.15rem; color: var(--ink); background: rgba(255,255,255,.9); border: 1px solid var(--line); padding: 5px 14px; border-radius: 999px; white-space: nowrap; }
.pl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 22px; margin-top: 8px; }
.pl-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 34px 24px; transition: transform var(--tr), box-shadow var(--tr); }
.pl-card:hover { transform: translateY(-5px); box-shadow: var(--sh2); }
.pl-ic { width: 48px; height: 48px; margin: 0 auto 16px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent-dark); }
.pl-ic svg { width: 22px; height: 22px; }
.pl-name { font-family: var(--ff-title); font-size: 1.3rem; font-weight: 400; margin: 0 0 4px; color: var(--ink); }
.pl-sub { font-size: .85rem; color: var(--tx2); margin: 0; }

/* ===== WHY-US: bloques con sub-listas de vinetas ===== */
.why { background: var(--bg); }
.wb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 30px; margin-top: 8px; }
.wb { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px 26px; }
.wb-h { font-family: var(--ff-title); font-size: 1.4rem; font-weight: 400; margin: 0 0 14px; color: var(--ink); padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.wb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.wb-list li { position: relative; padding-left: 24px; font-size: .95rem; color: var(--tx); }
.wb-list li::before { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 14px; background: var(--accent-dark); 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; }

/* ===== BOTONES ===== */

/* ===== GALERIA (fichas) ===== */
.gc-wrap { position: relative; }
.gc-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 6px 2px 14px; cursor: grab; }
.gc-track::-webkit-scrollbar { display: none; }
.gci { flex: 0 0 min(420px, 84vw); aspect-ratio: 4/3; overflow: hidden; border-radius: var(--r-lg); box-shadow: var(--sh1); scroll-snap-align: start; position: relative; transition: box-shadow var(--tr), transform var(--tr); }
.gci:hover { box-shadow: var(--sh2); transform: translateY(-6px); }
.gci img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.4,0,.2,1); 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: 50%; border: 1px solid var(--line); background: var(--bg3); color: var(--ink); font-size: 1.5rem; 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(--accent); color: var(--accent-dark); }
.gc-prev { left: -8px; } .gc-next { right: -8px; }
.gc-foot { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 10px; }
.gc-count { font-size: .8rem; color: var(--tx3); font-weight: 600; letter-spacing: .1em; }
@media (max-width: 560px) { .gc-prev, .gc-next { display: none; } }

/* ===== DETALLES (fichas) — clara ===== */
.det { background: var(--bg); }
/* 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: 56px; align-items: start; }
.det .sl, .det .st { text-align: left; }
.ddesc { font-size: var(--fz-base, 1rem); color: var(--tx); line-height: var(--lh-body, 1.65); max-width: var(--measure, 70ch); }
.dfl { list-style: none; margin: 24px 0 0; padding: 0; }
.dfl li { position: relative; padding: 8px 0 8px 22px; font-size: .95rem; color: var(--tx); }
.dfl li::before { content: ""; position: absolute; left: 0; top: 15px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.dc { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.dd { text-align: center; padding: 28px 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); transition: transform var(--tr); }
.dd:hover { transform: translateY(-5px); }
.dd strong { display: block; font-family: var(--ff-title); font-size: 2.4rem; color: var(--accent-dark); line-height: 1; }
.dd span { display: block; margin-top: 8px; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tx3); font-weight: 600; }

/* ===== AMENITIES (fichas) — clara ===== */
.am { background: var(--bg2); }
.amg { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 18px; }
/* Tarjeta de comodidad: SIEMPRE bloque definido (fondo card + borde 1px visible con token de paleta +
   sombra suave). El hover solo acentua (elevacion). Cero hex: borde = color-mix de tokens de paleta. */
.amc { padding: 26px 18px; background: var(--card); border: 1px solid color-mix(in srgb, var(--navy) 14%, var(--border)); border-radius: var(--r-lg); text-align: center; transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr); }
.amc:hover { transform: translateY(-5px); box-shadow: var(--sh2); border-color: color-mix(in srgb, var(--gold) 45%, var(--border)); }
.amc svg { width: 48px; height: 48px; padding: 13px; box-sizing: border-box; color: var(--accent-dark); margin: 0 auto 14px; background: color-mix(in srgb, var(--accent) 10%, transparent); border-radius: 50%; }
.amc h4 { font-family: var(--ff-body); font-weight: 600; font-size: .9rem; margin: 0 0 6px; color: var(--ink); }
.amc p { margin: 0 auto; font-size: .78rem; color: var(--tx2); max-width: 160px; line-height: 1.55; }
.am-extra { margin-top: 36px; text-align: center; }
.am-extra h3 { font-family: var(--ff-title); font-weight: 400; color: var(--ink); font-size: 1.4rem; margin: 0 0 16px; }
.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: .9rem; color: var(--tx2); position: relative; padding-left: 20px; }
.am-extra li::before { content: ""; position: absolute; left: 0; top: 6px; width: 13px; height: 13px; background: var(--accent-dark); 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; }

/* ===== BOOKING (fichas) — clara ===== */
.bk { background: var(--bg); }
.bp2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 34px; }
.bpl { background: var(--card); border: 1px solid var(--line); padding: 32px 22px; border-radius: var(--r-lg); text-align: center; transition: transform var(--tr), box-shadow var(--tr); color: var(--tx); }
.bpl:hover { transform: translateY(-5px); box-shadow: var(--sh2); }
.bpl svg { width: 30px; height: 30px; color: var(--accent-dark); margin: 0 auto 12px; }
.bpl h3 { margin: 0 0 6px; font-family: var(--ff-title); font-weight: 400; font-size: 1.3rem; color: var(--ink); }
.bpl p { margin: 0; font-size: .84rem; color: var(--tx2); }
.bpl-logo { display: block; margin: 0 auto 12px; }
.bpl-logo svg { display: block; width: auto; height: 34px; margin: 0 auto; color: var(--accent-dark); }
.bpl-logo-vrbo svg { height: 28px; }
.bd { text-align: center; background: color-mix(in srgb, var(--accent) 8%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); color: var(--tx); padding: 42px 24px; border-radius: var(--r-lg); }
.bd h3 { font-family: var(--ff-title); font-size: 1.9rem; margin: 0 0 8px; color: var(--ink); font-weight: 400; }
.bd p { margin: 0 0 22px; color: var(--tx2); }

/* ===== UBICACION (map) fichas — clara ===== */
.loc { background: var(--bg2); }
.lg { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.loc .sl, .loc .st { text-align: left; }
.loc-addr { font-size: .95rem; color: var(--tx2); margin: -6px 0 10px; font-weight: 400; }
.li { margin-top: 20px; }
.lit { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: .92rem; color: var(--tx); }
.lit::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.mf { aspect-ratio: 4/3; background: var(--bg3); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh2); border: 1px solid var(--line); }
.mf iframe { width: 100%; height: 100%; border: 0; }

/* ===== CONTACTO — clara ===== */
.ct { background: var(--bg); }
.ctg { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.ct .sl, .ct .st { text-align: left; }
.ctf { display: grid; gap: 14px; }
.ctf input, .ctf textarea { padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--r); font-family: inherit; font-size: .95rem; background: var(--bg3); color: var(--tx); transition: border-color var(--tr), box-shadow var(--tr); }
.ctf input:focus, .ctf textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.ctf textarea { min-height: 130px; resize: vertical; }
.cti { display: grid; gap: 14px; margin-top: 20px; }
.ctii { display: flex; align-items: center; gap: 14px; padding: 20px; background: var(--card); border-radius: var(--r-lg); border: 1px solid var(--line); transition: transform var(--tr), border-color var(--tr); }
.ctii:hover { transform: translateY(-2px); border-color: var(--accent); }
.ctii svg { width: 22px; height: 22px; color: var(--accent-dark); flex-shrink: 0; }
.ctii strong { display: block; font-size: .92rem; color: var(--ink); }
.ctii span { display: block; font-size: .8rem; color: var(--tx3); }

/* ===== MIGAS ===== */
.crumbs { margin-top: 70px; background: var(--bg2); border-bottom: 1px solid var(--line); font-size: .82rem; padding: 12px 0; position: relative; z-index: 10; color: var(--tx2); }
.crumbs a { color: var(--accent-dark); font-weight: 600; }
.crumbs a:hover { color: var(--accent); }
.crumbs + .hero { margin-top: 0; }

/* ===== BLOG ===== */
.blog-empty { padding-top: 180px; min-height: 60vh; background: var(--bg); }
.blog-index { padding: 150px 0 90px; background: var(--bg); }
.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: 40px; }
.blog-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: transform var(--tr), box-shadow var(--tr); }
.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: .1em; text-transform: uppercase; color: var(--accent-dark); font-weight: 600; }
.blog-card-body h3 { font-family: var(--ff-title); font-size: 1.35rem; margin: 0; color: var(--ink); line-height: 1.2; font-weight: 400; }
.blog-card-body p { margin: 0; font-size: .9rem; color: var(--tx2); line-height: 1.55; }
.blog-card-more { margin-top: 6px; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-dark); font-weight: 600; }

/* ===== LIGHTBOX ===== */
#slLbx { position: fixed; inset: 0; background: rgba(15,20,25,.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 30px 80px rgba(0,0,0,.6); }
#slLbx figcaption { color: rgba(255,255,255,.75); font-size: .84rem; margin-top: 14px; }
#slLbx figcaption #slLbxCount { color: var(--accent); font-weight: 600; margin-left: 8px; }
.lbx-close, .lbx-prev, .lbx-next { position: absolute; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.28); border-radius: 50%; color: #fff; 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,.2); border-color: var(--accent); }
.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; }

/* ===== FOOTER claro ===== */
footer { background: var(--bg2); color: var(--ft-tx2); padding: 72px 0 28px; border-top: 1px solid var(--line); }
.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(--ink); font-family: var(--ff-title); font-size: 1.3rem; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.ftb p { line-height: var(--lh-body, 1.65); font-size: .88rem; color: var(--ft-tx); }
.ftc h4 { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-dark); margin: 0 0 18px; font-weight: 600; }
.ftc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.ftc a { font-size: .88rem; color: var(--ft-tx2); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--tr); }
.ftc a:hover { color: var(--accent-dark); }
.ftbt { border-top: 1px solid var(--ft-line); padding-top: 24px; 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: 50%; display: grid; place-items: center; color: var(--ft-tx2); transition: border-color var(--tr), color var(--tr); }
.ftso a:hover { border-color: var(--accent); color: var(--accent-dark); }
.ftso svg { width: 16px; height: 16px; }

/* ===== Reveal on scroll ===== */
html.js .rv { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s 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; }
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .nl { display: none; }
  .mb { display: grid; }
  /* Menu movil desplegable (hamburguesa). */
  .sl-nav.menu-open { background: var(--bg3); }
  .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; color: var(--tx); }
  .ni { padding-top: calc(14px + env(safe-area-inset-top)); }
  .nav-cta { display: none; }
  .dg, .lg, .ctg { grid-template-columns: 1fr; gap: 40px; }
  .bp2 { grid-template-columns: 1fr; }
  .ftt { grid-template-columns: 1fr 1fr; }
  /* tablet: units siempre en 2 columnas */
  .ug, .ug.count-3, .ug.count-4, .ug.count-5, .ug.count-6 { grid-template-columns: repeat(2, 1fr); }
  .ug.count-5 .uc, .ug.count-5 .uc:nth-child(4), .ug.count-5 .uc:nth-child(5) { grid-column: auto; }
}
@media (max-width: 620px) {
  /* movil: units siempre en 1 columna */
  .ug, .ug.count-1, .ug.count-2, .ug.count-3, .ug.count-4, .ug.count-5, .ug.count-6 { grid-template-columns: 1fr; }
  .ug.count-5 .uc, .ug.count-5 .uc:nth-child(4), .ug.count-5 .uc:nth-child(5) { grid-column: auto; }
  .hero { min-height: 90vh; padding: 130px 20px 56px; }
  .avw-card { padding: 14px; }
  .avw-field, .avw-field.avw-g, .avw-go { flex: 1 1 100%; }
  .dc { grid-template-columns: 1fr 1fr; }
  .amg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ftt { grid-template-columns: 1fr; }
  .ftbt { flex-direction: column; text-align: center; }
}

/* ===== Impresion ===== */
@media print {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html.js .rv { opacity: 1 !important; transform: none !important; }
  iframe { display: none !important; }
  section, .blog-card, .wb, .uc, .gb-card { break-inside: avoid; }
}

/* Franja de version de prueba (trial): discreta, abajo, no tapa el nav fijo superior */
.sl-trial { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 940; background: color-mix(in srgb, var(--ink) 92%, #000); color: #fff; font-size: .78rem; font-weight: 600; letter-spacing: .04em; padding: 8px 18px; border-radius: 999px; box-shadow: var(--sh2); opacity: .92; }
@media (max-width: 560px) { .sl-trial { font-size: .72rem; padding: 7px 14px; bottom: 10px; } }

/* Mapa de zona VECTORIAL (SVG inline, color por tokens de paleta) */
.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; }

/* 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))}
@media(max-width:820px){.symgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.symgrid{grid-template-columns:minmax(0,1fr)}}

/* Widget de disponibilidad compacto (availability.php, features.calendar_public=false). Tokens propios. */
/* Barra fina de disponibilidad: mapeo de la paleta mallorca 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(--tx);--avw-ink2:var(--tx2);--avw-line:var(--border);--avw-accent:var(--cta-bg);--avw-accent-ink:#fff;--avw-radius:12px;--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), estetica editorial mallorca; tokens de paleta */
.ann-bar{position:relative;background:var(--navy);color:var(--ink-contrast, #fff);text-align:center;padding:9px 44px;font:600 .75rem/1.35 var(--ff-body);letter-spacing:.04em}
.ann-txt{display:inline-block}
.ann-x{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:0;color:inherit;font-size:1.2rem;line-height:1;cursor:pointer;opacity:.7;padding:0 4px}
.ann-x:hover{opacity:1}

/* ===== CALENDARIO PUBLICO (portado de costa, adaptado a tokens mallorca; gated calendar_public=true) ===== */
/* tokens de estado del calendario (mismos nombres que costa para reutilizar el partial) */
:root{--ok-fr:#eef6f0;--ok-fr2:#def0e2;--ok-tx:#2f7d4f;--ok-chip:#cfe8d4;--bad-tx:#b0453f;--bad-bd:#e0b3af;--bad-chip:#f0c6c2;}

.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); }

.cals { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; max-width: 900px; margin: 0 auto; }

.cdh { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: .72rem; color: var(--tx3); 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: color-mix(in srgb, var(--gold) 26%, transparent) !important; color: var(--tx) !important; }

.cd.sr { background: var(--navy); }


.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; }

#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(23,23,23,.18); 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(--tx2); 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(3, 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(--tx3); margin-bottom: 2px; }

.slb-box span { font-size: .95rem; font-weight: 600; color: var(--navy); }

.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(--tx2); }

.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; }



  .slb-dates { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }


  .cday { font-size: .78rem; }

.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(--tx2); text-align: center; }

.cal-slot.cal-hide { display: none; }

.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; }



  #slBook:not(.mini).open { transform: translateY(0); }

  #slBook:not(.mini) .slb-inner { padding: 26px 24px 26px; }

/* --- 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. */
.hero h1.h1-brand { text-wrap: balance; max-width: 18ch; margin-left: auto; margin-right: auto; }
.hero .h1-tag {
  font-family: var(--fb, inherit); font-weight: 400; text-transform: uppercase;
  letter-spacing: .16em; opacity: .92; text-wrap: balance; max-width: 34ch;
  margin: 0 auto 18px; 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: 14ch; }
  .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(--tx2); 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; }
.sl-around-group { margin: 0 0 14px; }
.sl-around-tip { display: block; font-style: normal; font-size: .74rem; line-height: 1.3; color: var(--accent); margin-top: 1px; }
.sl-around-note { margin: 4px 0 0; font-size: .72rem; color: var(--tx2); opacity: .75; }
.sl-around-cat { font-size: .74rem; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); 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(--line); 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(--accent); }
.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(--tx2); font-size: .78rem; padding-top: 1px; }
.sl-around-dist em { font-style: normal; opacity: .7; }
.sl-subscores { margin: 22px auto 0; max-width: 540px; }
.sl-sub-title { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tx2); 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(--tx2); }
.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(--accent); }
.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(--tx2); 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(--tx2); }
.sl-practical-item svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--accent); }
.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: 56px; 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(--tx2); font-size: .82rem; font-variant-numeric: tabular-nums; }
.loc-note { margin: 10px 0 0; font-size: .74rem; color: var(--tx2); 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(--tx2); 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(--line); 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(--tx2); }
.pr-note { margin: 10px 0 0; font-size: .74rem; color: var(--tx2); opacity: .85; }
@media (max-width: 560px) { .pr-row { font-size: .84rem; } }

/* 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(--tx2); }
.dx-facts li svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--accent); }
.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(--tx2);
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; }
.dx-chip svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--accent); }

/* =====================================================================
   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 {
  border-top: 3px solid var(--ink);
}

/* --- 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. */
.hbg::after {
  background: linear-gradient(180deg, rgba(20,30,40,.28) 0%, rgba(20,30,40,.30) 45%, rgba(20,30,40,.55) 100%);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--navy2) 26%, transparent) 0%,
    color-mix(in srgb, var(--ink) 30%, transparent) 45%,
    color-mix(in srgb, var(--ink) 58%, transparent) 100%);
}

/* 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; }

/* 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 { 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 { 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 PILOTO: REPARTO DE SUPERFICIE DEL COLOR PRINCIPAL ==================
   ENCARGO: la muestra promete principal + acento (en onyx, negro y oro) y la pagina entregaba crema y
   oro, con el principal relegado a tinta de titulares. Se le da SUPERFICIE por tres vias, todas
   expresadas en los tokens de sl_primary_surface_vars(): con valores NEUTROS (las 19 paletas que no
   participan) estas reglas existen pero no cambian ni un pixel.
   PORTABLE: no hay ni un hex aqui. Las seis plantillas comparten este vocabulario de tokens, asi que el
   bloque se copia tal cual; lo unico de plantilla es la LISTA DE SELECTORES de tarjetas, que cada una
   tiene con sus propios nombres. */

/* (a) REMATE SUPERIOR de bloques y tarjetas, en toda la web. Pseudo-elemento ABSOLUTO: no ocupa layout,
   asi que con --primary-line transparent no hay ni desplazamiento ni CLS. */
.amc, .pl-card, .bpl, .dd, .rc, .hlit, .ctii, .usel-card, .cs-card, .sl-accent-card,
.gb-card, .mf, .bd { position: relative; }
.amc::before, .pl-card::before, .bpl::before, .dd::before, .rc::before,
.hlit::before, .ctii::before, .usel-card::before, .sl-accent-card::before,
.gb-card::before, .mf::before, .bd::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) var(--r-lg) 0 0;
  transform: scaleX(1); transform-origin: left center;
}
body.dark .amc::before, body.dark .pl-card::before, body.dark .bpl::before, body.dark .dd::before,
body.dark .rc::before, body.dark .hlit::before, body.dark .ctii::before,
body.dark .usel-card::before, body.dark .sl-accent-card::before,
body.dark .gb-card::before, body.dark .mf::before, body.dark .bd::before { background: var(--primary-line-dark, transparent); }

/* (b) LINEA ANIMADA: se dibuja de izquierda a derecha cuando el bloque entra en vista. El estado de
   partida (scaleX 0) lo enciende el PROPIO script anadiendo .js-plin al html, asi que sin JavaScript la
   linea esta puesta desde el primer pintado y no se pierde nada. Con prefers-reduced-motion el script no
   pone la clase: linea estatica. Solo anima transform, nunca geometria: CLS cero por construccion. */
html.js-plin .amc::before, html.js-plin .pl-card::before, html.js-plin .bpl::before,
html.js-plin .dd::before, html.js-plin .rc::before, html.js-plin .hlit::before,
html.js-plin .ctii::before, html.js-plin .usel-card::before, html.js-plin .sl-accent-card::before,
html.js-plin .gb-card::before, html.js-plin .mf::before, html.js-plin .bd::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 color principal. El truco que evita reescribir una sola regla de
   dentro: se REMAPEAN los tokens del vocabulario compartido en el propio contenedor de la seccion, y
   todo lo que hay dentro (tarjetas, iconos, titulares, filetes, textos secundarios) se recalcula solo.
   Con valores neutros el remapeo devuelve exactamente los colores de hoy. */
.am, .places {
  background: var(--primary-surface, var(--bg2));
  color: var(--on-primary, var(--tx));
  --card: var(--primary-card, var(--bg3));
  --ink: var(--on-primary-ink, var(--navy));
  --tx: var(--on-primary, #34393f);
  --tx2: var(--on-primary-2, #565b62);
  --tx3: var(--on-primary-2, #575c64);
  --line: var(--primary-border, var(--border));
  --border: var(--primary-border, var(--border));
  --accent: var(--on-primary-accent, var(--gold));
  --accent-dark: var(--on-primary-accent, var(--gold2));
  --navy: var(--on-primary-ink, var(--navy));
  --navy2: var(--on-primary-2, var(--navy2));
  --text1: var(--on-primary, #34393f);
  --text2: var(--on-primary-2, #565b62);
  --text3: var(--on-primary-2, #575c64);
  --gold-on-bg: var(--on-primary-accent, var(--gold2));
  --gold-on-ink: var(--on-primary-accent, var(--gold));
  --bg2: var(--primary-card, var(--bg2));
  --bg3: var(--primary-card, var(--bg3));
  --white: var(--primary-card, var(--bg3));
  --cta-otx: var(--on-primary-accent, var(--gold2));
  --zona-line: var(--primary-line-in, var(--gold));
  --zona-line-hover: var(--on-primary-ink, var(--navy));
}
body.dark .am, body.dark .places {
  background: var(--primary-surface-dark, var(--bg2));
  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));
  --zona-line: var(--primary-line-in-dark, var(--gold));
  --zona-line-hover: var(--on-primary-ink-dark, var(--navy));
}
/* EXCEPCION MEDIDA: el chip de ciudad del mapa se apoya en su propio fondo BLANCO sobre la ilustracion,
   no en la superficie de la seccion, asi que no puede heredar la tinta clara del remapeo (se volveria
   invisible). Se le devuelven sus colores originales. */

/* MEDIDO EN SERVIDO: dentro de las secciones que ya son del principal, un remate del principal es
   invisible (negro sobre negro). Ahi la linea pasa al ACENTO sobre esa superficie, que es el token ya
   medido para AA. Con paletas neutras --primary-line es transparent y --on-primary-accent es el mismo
   acento de siempre, asi que esta regla tampoco pinta nada nuevo: la linea sigue sin existir. */
.am .amc::before, .places .pl-card::before,
.sl-accent-band .bd::before { background: var(--primary-line-in, transparent); }
body.dark .am .amc::before, body.dark .places .pl-card::before,
body.dark .sl-accent-band .bd::before { background: var(--primary-line-in-dark, transparent); }
/* 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);
}

/* ============ 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; }