/* Plantilla luz (2026-09-02). Base heredada de mallorca; el bloque propio va al final (LUZ). Paleta via tokens. */
/* @fonts-inicio (generado por tools/fonts-fetch.js: NO editar a mano) */
@font-face{font-family:"Forum";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/forum-400-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:"Forum";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/forum-400-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:"Forum";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/forum-400-cyrillic.woff2) format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:"Raleway";font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/raleway-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:"Raleway";font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/raleway-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:"Raleway";font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/raleway-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. */
  /* luz (2026-09-02, decision 11 opcion 0): MAPA EN ESCALA DE GRISES TENIDA por la paleta. La tinta es el
     principal, la tierra es el principal al 9 % sobre el papel (gris calido o frio segun la paleta) y el
     UNICO color vivo es el marcador del alojamiento, en el acento. Ademas .lz-map desatura el SVG entero. */
  --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: color-mix(in srgb, var(--navy) 9%, var(--bg));   /* tierra: gris tenido del principal */
  --zm-surface: var(--bg3);     /* superficie: filete de los puntos, del marcador y texto del tooltip */
  --zm-accent: var(--gold);     /* acento: SOLO el marcador y el 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: color-mix(in srgb, var(--navy) 9%, var(--bg));
  --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; }
/* La FOTO VA LIMPIA: aqui ya NO hay velo de pantalla completa. Los dos scrim que quedan son locales y
   acotados y viven mas abajo, en el bloque "SCRIM LOCALES DEL HERO". */
.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. */
/* SALTOS DE LINEA REALES EN LAS RESENAS (P2.109, 2026-08-28f). sl_review_text() convierte los <br>
   de la OTA en saltos de verdad y borra el resto del HTML; sin pre-line ese salto seria un espacio y
   los parrafos de la resena se pegarian en un bloque. NO se emite HTML de la resena en ningun punto:
   el texto sigue saliendo escapado con sl_h() y lo unico que cambia es como se pinta el salto. */
.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; white-space: pre-line; }
.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; --sym-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-radius: var(--r-lg); text-align: center; transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr); }
  /* UNA SOLA LINEA ARRIBA (2026-09-01c, P2.128). La tarjeta dibujaba DOS separadores en el mismo
     punto: este border-top de 1px y ancho completo, y el ::before de 3px del sistema primary-line,
     los dos en top 0. Medido con estilos COMPUTADOS sobre lo servido en la-ventana-al-mar:
     border-top 1px solid rgb(214,203,176) sobre una tarjeta de 274,5px, y ::before de 3px de alto
     por 272,5px de ancho, rgb(225,212,176). La barra corta y gruesa se pintaba encima de la fina y
     larga y asomaba 1px por cada esquina. Se retira el border-top y queda el ::before, que es el
     separador del diseno; los otros tres lados del borde NO se tocan. --primary-line lo emite
     siempre sl_primary_surface_vars() para las 20 paletas, asi que la tarjeta nunca queda sin
     remate arriba por falta de token. */
  /* SIN CAJA, UNA SOLA LINEA (2026-09-01f, P2.137). La tarjeta llevaba un borde de 1 px en tres
     lados (el de arriba se retiro el 2026-09-01c) MAS el ::before de 3 px del sistema primary-line,
     y en pantalla eso son dos lineas en el mismo punto: la barra del ::before y el canto de la
     caja justo debajo. Medido con estilos COMPUTADOS sobre lo servido en la-ventana-al-mar:
     border-right, border-bottom y border-left de 1 px color(srgb 0.838588 0.796078 0.690196) sobre
     una tarjeta de 274,5 px, mas ::before de 3 px por 272,5 px rgb(225,212,176) en top 0.
     SE RETIRA LA CAJA ENTERA y queda SOLO el ::before, que es el separador del diseno. Quitar solo
     el borde de abajo dejaria los dos laterales sin nada que los cierre arriba ni abajo, que se ve
     peor que el defecto. La tarjeta sigue leyendose como tarjeta por su fondo propio (--bg2 o
     --card), que es lo que la separa de la superficie de la seccion. */
.amc:hover { transform: translateY(-5px); box-shadow: var(--sh2); }
.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))}
/* LA FILA CENTRADA TAMBIEN COLAPSA (2026-09-01f, P2.138). symgrid--center pone display:flex y las
   dos consultas de abajo solo cambiaban grid-template-columns, que en flex no hace nada: la
   base seguia siendo la de --sym-cols columnas, asi que en un movil de 390 px salian cuatro
   tarjetas de 76 px. Hasta hoy casi no se veia porque el centrado solo se activaba en el caso
   raro de UNA tarjeta suelta; desde hoy se activa siempre que la ultima fila no este llena. */
@media(max-width:820px){.symgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .symgrid.symgrid--center>*{flex:0 1 calc((100% - var(--sym-gap,22px)) / 2)}}
@media(max-width:520px){.symgrid{grid-template-columns:minmax(0,1fr)}
  .symgrid.symgrid--center>*{flex:0 1 100%}}

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

/* HUECO BAJO EL ACENTO (2026-09-01i, P2.147). Misma causa que en .hli: sin el border-top de
   .sl-accent-card, el ::before de 3px se dibujaba sobre la primera fila del calendario (hueco -3px).
   --sp-3 es la separacion del sistema entre un acento y su contenido. */
.cals { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; max-width: 900px; margin: 0 auto; padding-top: var(--sp-3, 26px); }

.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(auto-fit, minmax(112px, 1fr)); gap: 12px; margin-bottom: 14px; }

.slb-box { background: var(--bg2); border-radius: 10px; padding: 10px 14px; }

.slb-box label { display: block; font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--tx3); margin-bottom: 2px; }

.slb-box span, .slb-box .slb-g { font-size: .95rem; font-weight: 600; color: var(--navy); }
.slb-g { font: inherit; font-size: .95rem; font-weight: 600; background: transparent; border: 0; padding: 0; width: 100%; }

.slb-breakdown { background: var(--bg2); border-radius: 12px; padding: 14px 18px; margin-bottom: 14px; font-size: .88rem; }

.slb-row { display: flex; justify-content: space-between; padding: 4px 0; color: var(--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: repeat(2, 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; } }

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

/* Columna izquierda de "El apartamento" (2026-07-20): descripcion + datos de ambiente. */
.dx-facts { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 7px; }
.dx-facts li { display: flex; align-items: center; gap: 9px; font-size: .88rem; color: var(--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 {
  /* EL FILETE LO PINTA YA LA REGLA COMPARTIDA (2026-09-01h, P2.145). Aqui habia
     border-top: 3px solid var(--ink), y el sistema primary-line pinta ADEMAS un
     ::before de 3px sobre .sl-accent-card. Resultado: DOS lineas del mismo color
     apiladas donde el diseno quiere una. Medido con estilos computados sobre lo
     servido en la-ventana-al-mar: en div.hli.sl-accent-card, border-top 3px por
     1200px rgb(90,74,47) MAS ::before 3px por 1200px rgb(90,74,47); y lo mismo en
     div.cals.sl-accent-card, los dos de 3px por 760px.
     SE QUITA ESTE Y SE QUEDA EL ::before, por tres motivos: la regla compartida
     sirve a otras nueve clases y no se toca; el ::before lleva el color del token
     --primary-line con su variante de noche, mientras este usaba --ink; y el
     ::before se dibuja de izquierda a derecha al entrar en vista, que es el
     comportamiento del sistema. La clase la llevan solo dos elementos por plantilla
     (la banda de highlights o el bloque equivalente, y la tarjeta del calendario),
     asi que el cambio esta acotado y es el mismo en los dos. */
}

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

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

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

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

   a) SCRIM DEL HERO. RETIRADO EL VELO DE PANTALLA COMPLETA (2026-08-08); lo
      que habia aqui se sustituye por los dos scrim LOCALES de mas abajo.
      Lo anterior era un gradiente sobre TODA la foto, del 26 % arriba al 58 %
      abajo, tintado con var(--navy2) y var(--ink). Falla por construccion en
      modo noche: body.dark reasigna esos dos tokens a valores CLAROS
      (#d5cfc2 y #f4f1ea), asi que el tinte se volvia CREMA y lavaba la foto.
      Medido en servido sobre remo-apartment-views-terrace-pool.com antes de
      tocar nada: de noche el titular blanco quedaba a 1,03:1 sobre un pixel
      rgb(252,251,249) y el antetitulo a 1,06:1; de dia tampoco cumplia, 1,97:1
      y 1,85:1, porque un 26-30 % de tinte no tapa un cielo quemado. Es decir,
      el velo lavaba la foto Y ademas no compraba la legibilidad que justificaba
      ponerlo. */

/* 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,
.sl-accent-band .rvpol-title, .sl-accent-band .rvpol-note { color: var(--ink-contrast2, #dcdcdc); }
body.dark .sl-accent-band .pr-title, body.dark .sl-accent-band .pr-val em, body.dark .sl-accent-band .pr-note,
body.dark .sl-accent-band .rvpol-title, body.dark .sl-accent-band .rvpol-note { color: var(--tx2, var(--text2, #555)); }
/* --- MARCA VERDE DEL DIA LIBRE (veredicto del operador 2026-07-26c). Las pieles sin tinte leian el libre
   por ausencia; ahora cada una lo marca en verde con el recurso que casa con su forma, nunca con relleno
   (el relleno sigue siendo del ocupado, que es lo que da la separacion). Verde precomputado por paleta y
   medido: peor 6,42 en dia y 8,39 en noche sobre la superficie real. Clasico no lo necesita: su seña de
   identidad ya es el relleno pastel verde. --- */
.cal-skin-circular .cday.fr,
.cal-skin-rejilla .cday.fr,
.cal-skin-suite .cday.fr { color: var(--cal-fr-green, #2e6b34); }
body.dark .cal-skin-circular .cday.fr,
body.dark .cal-skin-rejilla .cday.fr,
body.dark .cal-skin-suite .cday.fr { color: var(--cal-fr-green-dark, #8fd6a2); }
/* Minimal: el punto pasa de dorado a VERDE, que es su unico marcador. */
.cal-skin-minimal .cday.fr::after { background: var(--cal-fr-green, #2e6b34); opacity: 1; }
body.dark .cal-skin-minimal .cday.fr::after { background: var(--cal-fr-green-dark, #8fd6a2); }
.cal-skin-minimal .cday.fr { color: var(--cal-fr-green, #2e6b34); }
body.dark .cal-skin-minimal .cday.fr { color: var(--cal-fr-green-dark, #8fd6a2); }
/* Editorial: el filete inferior pasa a VERDE, que es su recurso propio; el numero se queda en tinta. */
.cal-skin-editorial .cday.fr { border-bottom-color: var(--cal-fr-green, #2e6b34); }
body.dark .cal-skin-editorial .cday.fr { border-bottom-color: var(--cal-fr-green-dark, #8fd6a2); }
/* Leyenda coherente: el chip de libre lleva la misma marca verde. */
.cd.fr { border-color: var(--cal-fr-green, #2e6b34); }
body.dark .cd.fr { border-color: var(--cal-fr-green-dark, #8fd6a2); }

/* ================== P2.35 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, .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 .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 .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. */
/* LA SECCION NO PUEDE DIFERIR DEL RESTO DE LA PAGINA (2026-08-05, criterio del operador).
   Antes salia de --primary-surface, derivado del color PRIMARIO de la paleta, asi que con una paleta
   oscura caia casi a negro sobre una pagina que no lo era. Ahora toma el fondo ACTIVO de la pagina.
   El token de noche es OTRO y va en body.dark: declarado en el ambito claro heredaria el --bg del dia
   y pintaria las secciones de blanco en noche. Aqui el selector es .am, .places y no .am, .loc. */
:root { --sec-surface: var(--bg); }
body.dark { --sec-surface-dark: var(--bg); }
.am, .places {
  /* SOLO EL FONDO. El resto del bloque REMAPEABA todo el vocabulario (tinta, acento, bordes, tarjetas)
     para una superficie OSCURA distinta de la pagina; en cuanto la seccion pasa a tener el fondo de la
     pagina, ese remapeo deja de tener sentido y ademas hace dano: el acento calculado para fondo oscuro
     daba 1,96:1 sobre el claro (medido en urbano, .loc-info > .sl). Sin remapeo, todo hereda los tokens
     de la pagina, que son los que ya cumplen contraste ahi. */
  background: var(--sec-surface, var(--bg));
}
body.dark .am, body.dark .places {
  background: var(--sec-surface-dark, var(--bg));
  color: var(--on-primary-dark, var(--tx));
  --card: var(--primary-card-dark, var(--bg3));
  --ink: var(--on-primary-ink-dark, var(--navy));
  --tx: var(--on-primary-dark, #ece7dc);
  --tx2: var(--on-primary-2-dark, #c3bdb1);
  --tx3: var(--on-primary-2-dark, #c3bdb1);
  --line: var(--primary-border-dark, var(--border));
  --border: var(--primary-border-dark, var(--border));
  --accent: var(--on-primary-accent-dark, var(--gold));
  --accent-dark: var(--on-primary-accent-dark, var(--gold2));
  --navy: var(--on-primary-ink-dark, var(--navy));
  --navy2: var(--on-primary-2-dark, var(--navy2));
  --text1: var(--on-primary-dark, #ece7dc);
  --text2: var(--on-primary-2-dark, #c3bdb1);
  --text3: var(--on-primary-2-dark, #c3bdb1);
  --gold-on-bg: var(--on-primary-accent-dark, var(--gold2));
  --gold-on-ink: var(--on-primary-accent-dark, var(--gold));
  --bg2: var(--primary-card-dark, var(--bg2));
  --bg3: var(--primary-card-dark, var(--bg3));
  --white: var(--primary-card-dark, var(--bg3));
  --cta-otx: var(--on-primary-accent-dark, var(--gold2));
  --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; }

/* ==========================================================================
   SCRIM LOCALES DEL HERO (2026-08-08). Sustituyen al velo de pantalla completa.

   REGLA QUE IMPONE ESTA FORMA: la foto del hero se sirve LIMPIA, a plena
   resolucion y sin filtro ni opacidad sobre la imagen. Lo unico que se oscurece
   es la superficie que hay DEBAJO DE UN TEXTO, y solo esa, con un gradiente
   ACOTADO que se desvanece a cero por sus cuatro lados. Entre los dos scrim y
   por debajo del segundo la foto llega intacta al visitante.

   POR QUE HACEN FALTA IGUALMENTE: el texto del hero es blanco sobre una foto que
   nadie controla. Medido en servido antes de esta ronda, con el velo puesto, los
   cinco textos que caen sobre la foto (marca, menu, antetitulo, titular y
   reclamo) FALLABAN AA en modo dia y peor aun en noche. Retirar el velo sin
   poner nada los habria dejado sobre el cielo quemado a menos de 1,5:1.

   POR QUE EL ANCLA ES --hero-scrim Y NO --ink NI --navy2: esos tres tokens los
   REASIGNA body.dark a valores claros, que es exactamente el defecto que esta
   ronda corrige. --hero-scrim lo emite sl_palette_css_vars() como hex estatico en
   el :root inline (el principal de la paleta hundido un 58 % hacia el negro), asi
   que conserva el tinte de la paleta y NO puede invertirse en noche. Se usa
   siempre con respaldo #0a1018 por la trampa del HTML congelado: un articulo o una
   pagina generados antes de hoy no declaran el token y tienen que degradar, no
   romperse.

   POR QUE SE ESCOGEN CON LA CLASE .hero-photo Y NO CON :has(): solo se quieren
   cuando hay FOTO. Con .hbg-plain el fondo ya es un degradado oscuro de la paleta
   y una placa encima seria una mancha. :has() lo resolveria sin tocar el partial,
   pero un navegador que no lo soporte se quedaria SIN scrim, es decir con el texto
   ilegible: la degradacion iria en la direccion mala. La clase la pone hero.php.
   ========================================================================== */

/* 1) BANDA DE CABECERA. Protege la marca, el menu, el selector de idioma y el
      boton de tema, que van en blanco sobre la foto mientras el nav no esta en
      glass. Acotada a los primeros 220 px del hero y a cero desde ahi. */
.hero-photo .hbg::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: min(220px, 34%);
  pointer-events: none;
  /* La MESETA llega al 40 % de la banda (88 px) a proposito: el nav ocupa los primeros 72 px, asi que
     su linea de texto tiene que caer DENTRO de la meseta y no en la rampa. Con una rampa que empezaba
     en el pixel 0 el centro del menu se quedaba a 0,61 de alfa, que sobre un cielo quemado da 3,98:1 y
     no cumple. Se calcula, no se estima: el pico de la rampa no es donde esta el texto. */
  background: linear-gradient(180deg, rgba(10,16,24,.74) 0%, rgba(10,16,24,.70) 40%, rgba(10,16,24,.30) 74%, rgba(10,16,24,0) 100%);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--hero-scrim, #0a1018) 74%, transparent) 0%,
    color-mix(in srgb, var(--hero-scrim, #0a1018) 70%, transparent) 40%,
    color-mix(in srgb, var(--hero-scrim, #0a1018) 30%, transparent) 74%,
    color-mix(in srgb, var(--hero-scrim, #0a1018) 0%, transparent) 100%);
}

/* LA FOTO NO SE OSCURECE: LA LEGIBILIDAD LA LLEVA SOLO LA SOMBRA DEL TEXTO (P2.109, 2026-08-28g).
   Decision del operador, cerrada: aqui NO hay placa, ni velo, ni degradado, ni al 46 % ni a ningun otro
   porcentaje. La foto se ve entera y limpia. Lo que separa el glifo del fondo es el halo oscuro que
   proyectan sus PROPIOS trazos, de unos 3 px en todas direcciones.
   HISTORIA CORTA, para que nadie lo "arregle" volviendo atras: esto empezo siendo una placa plana al 70 %
   e inset -56px -60px sobre .hc entero; el 2026-08-28f bajo al 46 % con el desvanecido lateral muy ancho;
   hoy desaparece del todo. Cada paso se midio con tools/hero-legible.js, que es la unica herramienta que
   ve una sombra (tools/pixel-titular.js mide el fondo ocultando el texto y con el se lleva la sombra).
   POR QUE VARIAS CAPAS Y NO UNA: hacen cosas distintas. Las de 1 a 4 px en alfa 1 construyen el halo denso
   pegado al trazo, que es lo que de verdad da el contraste en el borde de la letra; las cuatro diagonales
   cierran las esquinas, que es donde un halo redondo deja hueco; las de 12 a 40 px son la caida suave que
   asienta el bloque sobre la foto sin dibujar ningun canto.
   LOS TEXTOS PEQUENOS LLEVAN ADEMAS CONTORNO REAL (-webkit-text-stroke con paint-order: stroke fill). Un
   trazo fino no proyecta halo suficiente por si solo, y el contorno se dibuja DETRAS del relleno, asi que
   la letra no engorda. Medido en el antetitulo de 11,5 px de sa-casa-des-carbo: la mediana del anillo que
   toca la letra pasa de rgb(59,66,29) a rgb(16,19,14) sobre una foto cuyo fondo es rgb(249,249,249).
   Y TODO ESTO SOLO CON FOTO: .hero:not(.hero-photo) lo retira. Sobre el degradado de la paleta el fondo ya
   es oscuro y una sombra ahi solo ensucia el titular. */
.hero .h1-brand, .hero .h1-tag {
  text-shadow:
    0 0 1px rgba(4,8,14,1), 0 0 2px rgba(4,8,14,1), 0 0 3px rgba(4,8,14,1),
    0 0 4px rgba(4,8,14,1), 0 0 6px rgba(4,8,14,.95), 0 0 8px rgba(4,8,14,.9),
    2px 2px 3px rgba(4,8,14,1), -2px 2px 3px rgba(4,8,14,1),
    2px -2px 3px rgba(4,8,14,1), -2px -2px 3px rgba(4,8,14,1),
    0 0 14px rgba(4,8,14,.8), 0 0 24px rgba(4,8,14,.6), 0 4px 40px rgba(4,8,14,.5);
}
.hero .hs, .hero .h-eyebrow, .hero .hb {
  color: #fff;
  paint-order: stroke fill;
  -webkit-text-stroke: 2.4px rgba(4,8,14,.92);
  text-shadow:
    0 0 1px rgba(4,8,14,1), 0 0 2px rgba(4,8,14,1), 0 0 3px rgba(4,8,14,1),
    0 0 4px rgba(4,8,14,1), 0 0 5px rgba(4,8,14,1), 0 0 6px rgba(4,8,14,1),
    0 0 7px rgba(4,8,14,.98), 0 0 9px rgba(4,8,14,.95), 0 0 11px rgba(4,8,14,.9),
    1px 1px 2px rgba(4,8,14,1), -1px 1px 2px rgba(4,8,14,1),
    1px -1px 2px rgba(4,8,14,1), -1px -1px 2px rgba(4,8,14,1),
    0 0 16px rgba(4,8,14,.8), 0 0 26px rgba(4,8,14,.6);
}
.hero:not(.hero-photo) .h1-brand, .hero:not(.hero-photo) .h1-tag,
.hero:not(.hero-photo) .hs, .hero:not(.hero-photo) .h-eyebrow, .hero:not(.hero-photo) .hb {
  text-shadow: none;
  -webkit-text-stroke: 0;
}


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

/* ==========================================================================
   LUZ (2026-09-02). Todo lo propio de la plantilla va AQUI, detras del bloque heredado de mallorca, y gana
   por orden de origen con la misma o mayor especificidad. Sin un solo hex de color: solo tokens. Los dos
   rasgos estructurales son las BANDAS REDONDEADAS (radio --r-lg2, 80 px, con margen --lz-band-m) y los
   DIVISORES CURVOS entre bandas de color distinto (sl_luz_divider en luz.php). Implementacion propia.
   ========================================================================== */
:root { --lz-band-m: 36px; --lz-nav-h: 74px; --lz-div-h: clamp(40px, 12vw, 240px); }
@media (max-width: 700px) { :root { --lz-band-m: 0px; --lz-nav-h: 68px; } }

/* --- CABECERA: fija y SIEMPRE solida, el hero es una tarjeta debajo, no una foto detras ------------ */
nav.sl-nav, nav.sl-nav.scrolled { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
nav.sl-nav.scrolled { box-shadow: 0 1px 0 var(--line); }
nav.sl-nav .logo, nav.sl-nav .nl a, nav.sl-nav .tb, nav.sl-nav .mb, nav.sl-nav .lang-btn { color: var(--ink); }
nav.sl-nav .nl { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; gap: 30px; }
nav.sl-nav .nl a::after { background: var(--ink); }
nav.sl-nav .tb, nav.sl-nav .mb { border-color: var(--line); }
nav.sl-nav .tb:hover, nav.sl-nav .mb:hover { border-color: var(--ink); }
nav.sl-nav .logo svg text { font-family: var(--ff-title); }
nav.sl-nav .nav-cta { display: inline-flex; align-items: center; border: 1px solid var(--ink); border-radius: 999px; padding: 11px 24px; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--ink); transition: background var(--tr), color var(--tr); }
nav.sl-nav .nav-cta:hover { background: var(--ink); color: var(--bg); }
.ni { padding: 16px 24px; }

/* --- ENLACE DE TEXTO con subrayado que sale y vuelve a entrar (patron propio) ------------------------ */
.lz-link { position: relative; display: inline-block; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--ink); padding-bottom: 5px; }
.lz-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(1); transform-origin: left center; }
@keyframes lz-ul { 0% { transform: scaleX(1); transform-origin: right center; } 49% { transform: scaleX(0); transform-origin: right center; } 50% { transform: scaleX(0); transform-origin: left center; } 100% { transform: scaleX(1); transform-origin: left center; } }
.lz-link:hover::after, .lz-link:focus-visible::after { animation: lz-ul .7s cubic-bezier(.4, 0, .2, 1); }
.lz-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 28px; margin-top: 28px; }
.lz-btn { min-width: 200px; text-align: center; }

/* --- HERO EN TARJETA --------------------------------------------------------------------------------- */
.lz-hero { display: block; min-height: 0; padding: calc(var(--lz-nav-h) + 16px) var(--lz-band-m) 0; background: var(--bg); color: inherit; text-align: left; overflow: visible; }
.lz-hero-card { position: relative; overflow: hidden; border-radius: var(--r-lg2, 80px); min-height: min(78vh, 760px); background: var(--navy); display: flex; align-items: flex-end; isolation: isolate; }
.lz-hero .hbg { position: absolute; inset: 0; z-index: 0; }
.lz-hero .hbg img, .lz-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lz-video { z-index: 1; }
.lz-hero .hbg-plain { position: absolute; inset: 0; }
.lz-hc { position: relative; z-index: 2; max-width: 900px; margin: 0; padding: 80px clamp(24px, 6vw, 84px) clamp(40px, 6vw, 72px); text-align: left; }
.lz-kicker { letter-spacing: .24em; text-transform: uppercase; font-size: .78rem; font-weight: 600; margin: 0 0 14px; }
.lz-title { font-family: var(--ff-title); font-size: var(--fz-3xl, clamp(2.6rem, 5.2vw, 4.4rem)); font-weight: 400; line-height: 1.08; letter-spacing: var(--ls-display, -.005em); margin: 0 0 14px; }
.lz-hero .h1-tag { font-family: var(--ff-title); font-size: clamp(1.2rem, 2.2vw, 1.7rem); margin: 0 0 12px; }
.lz-hero .hs { margin: 0; max-width: 560px; font-size: 1.02rem; line-height: 1.6; }
/* Palabras enmascaradas: cada palabra es una caja con overflow oculto; sin html.lz-lines todo es visible. */
.lz-w { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0 .04em .1em 0; margin: 0 0 -.1em; }
.lz-wi { display: inline-block; }
html.lz-lines .lz-wi { transform: translateY(112%); opacity: 0; transition: transform .9s cubic-bezier(.2, .7, .2, 1) var(--lz-d, 0ms), opacity .45s ease var(--lz-d, 0ms); }
html.lz-lines .lz-w.lz-on .lz-wi { transform: none; opacity: 1; }
/* TINTA SOBRE FOTO CLARA (decision 4): sin sombra ni contorno. El color es --lz-ink-text, el NEGRO FIJO
   que layout.php emite en el :root inline (2026-09-03; antes era --hero-scrim, el principal de la paleta
   hundido, o sea un oscuro tenido y distinto en cada paleta). Un hex fijo no lo puede mover ninguna
   reasignacion de tema: de noche la foto sigue siendo clara y el texto tiene que seguir siendo oscuro.
   La regla que MANDA sobre esto es el bloque 7 del final; esta se conserva coherente con el a proposito. */
.lz-hero.lz-ink .h1-brand, .lz-hero.lz-ink .h1-tag, .lz-hero.lz-ink .hs, .lz-hero.lz-ink .h-eyebrow, .lz-hero.lz-ink .hb, .lz-hero.lz-ink .lz-link { color: var(--lz-ink-text, #000000); text-shadow: none; -webkit-text-stroke: 0; }
.lz-hero.lz-ink .lz-link::after { background: var(--lz-ink-text, #000000); }
.lz-hero.lz-light .lz-link { color: #fff; }
.lz-hero.lz-light .lz-link::after { background: #fff; }
.lz-hero .btn.btn-primary { box-shadow: 0 10px 28px rgba(0, 0, 0, .18); }
@media (max-width: 700px) {
  .lz-hero { padding-top: var(--lz-nav-h); }
  .lz-hero-card { border-radius: 0; min-height: 78vh; align-items: center; justify-content: center; }
  .lz-hc { text-align: center; padding: 48px 22px 40px; }
  .lz-hero .hs { margin: 0 auto; }
  .lz-cta { justify-content: center; flex-direction: column; gap: 16px; }
}

/* --- DIVISORES CURVOS -------------------------------------------------------------------------------- */
.lz-div { position: absolute; left: 0; right: 0; height: var(--lz-div-h); z-index: 1; pointer-events: none; line-height: 0; }
.lz-div-top { top: -1px; }
.lz-div-bottom { bottom: -1px; }
.lz-div svg { width: 100%; height: 100%; display: block; }
.lz-has-div-top { position: relative; padding-top: calc(var(--sp-6, 96px) + var(--lz-div-h) * .5); }
.lz-has-div-top > .con { position: relative; z-index: 2; }

/* --- ANFITRIONES ------------------------------------------------------------------------------------- */
.lz-intro { background: var(--bg); }
.lz-host-avatar { width: 112px; height: 112px; border-radius: 50%; overflow: hidden; margin: 0 auto 24px; background: var(--cta-bg); display: grid; place-items: center; box-shadow: var(--sh1); }
.lz-host-avatar img { width: 100%; height: 100%; object-fit: cover; }
.lz-host-ini { font-family: var(--ff-title); font-size: 3rem; line-height: 1; color: #fff; }
.lz-quote { font-size: var(--fz-2xl, clamp(2rem, 4vw, 3.1rem)); line-height: 1.2; margin-bottom: 26px; }
.lz-host-p { font-family: var(--ff-body); font-size: 1.05rem; color: var(--tx); line-height: var(--lh-body, 1.7); }
.lz-host-sign { font-family: var(--ff-title); font-size: 1.7rem; color: var(--ink); margin: 22px 0 0; letter-spacing: .02em; }

/* --- GALERIA EN MOSAICO ------------------------------------------------------------------------------ */
.lz-gal { background: var(--bg3); }
.lz-gal-cta { text-align: center; margin: -6px 0 44px; }
.lz-mosaic { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 22px; align-items: end; }
.lz-tile { position: relative; overflow: hidden; border-radius: var(--r-md, 24px); aspect-ratio: var(--lz-ratio, 4 / 3); cursor: pointer; background: var(--bg2); margin: 0; padding: 0; }
.lz-tile img { width: 100%; height: 100%; object-fit: cover; display: block; will-change: transform; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.lz-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.lz-t1 { grid-column: 1 / 3; margin-bottom: 56px; }
.lz-t2 { grid-column: 3 / 7; }
.lz-t3 { grid-column: 7 / 11; margin-bottom: 72px; }
.lz-t4 { grid-column: 11 / 13; margin-bottom: 24px; }
.lz-t5 { grid-column: 2 / 5; align-self: start; }
.lz-t6 { grid-column: 5 / 11; align-self: start; }
.lz-t7 { grid-column: 11 / 13; align-self: start; margin-top: 48px; }
.lz-mosaic-solo .lz-tile { grid-column: 3 / 11; margin: 0; }
.lz-tile-txt { border: 0; font: inherit; background: var(--bg2); color: var(--ink); display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 6px; padding: 22px; text-align: left; aspect-ratio: 1 / 1; font-family: var(--ff-title); font-size: 1.15rem; line-height: 1.2; transition: background var(--tr); }
.lz-tile-txt:hover { background: color-mix(in srgb, var(--accent) 16%, var(--bg2)); }
.lz-tile-n { font-size: 2.6rem; line-height: 1; }
.lz-gal .gc-foot { margin-top: 40px; text-align: center; }
@media (max-width: 760px) {
  .lz-mosaic { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin: 0 -24px; padding: 0 24px 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .lz-mosaic::-webkit-scrollbar { display: none; }
  .lz-mosaic .lz-tile { flex: 0 0 80vw; aspect-ratio: 3 / 2; scroll-snap-align: center; margin: 0; border-radius: 16px; align-self: auto; }
  .lz-mosaic .lz-tile-txt { flex: 0 0 56vw; aspect-ratio: auto; }
  .lz-mosaic-solo .lz-tile { flex: 0 0 100%; }
}

/* --- HECHOS ------------------------------------------------------------------------------------------ */
.lz-facts { background: var(--bg3); }
.lz-facts-grid { gap: 28px; margin-top: 8px; }
.lz-fact { background: var(--bg); border-radius: var(--r-md, 24px); padding: 36px 28px 30px; text-align: center; overflow: hidden; }
.lz-fact-ic { width: 58px; height: 58px; margin: 0 auto 18px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-dark); display: grid; place-items: center; }
.lz-fact-ic svg { width: 26px; height: 26px; }
.lz-fact-h { font-family: var(--ff-title); font-size: 1.5rem; font-weight: 400; margin: 0 0 8px; color: var(--ink); line-height: 1.2; }
.lz-fact-p { color: var(--tx2); margin: 0; font-size: .95rem; }

/* --- BANDA DE CONVERSION ----------------------------------------------------------------------------- */
.lz-cta-band { background: var(--bg3); padding: 0 var(--lz-band-m) var(--sp-6, 96px); }
.lz-cta-band .con { max-width: none; margin: 0; background: var(--bg2); border-radius: var(--r-lg2, 80px); padding: clamp(48px, 7vw, 88px) clamp(24px, 6vw, 72px); text-align: center; }
.lz-cta-h { font-family: var(--ff-title); font-size: var(--fz-2xl, clamp(2rem, 4vw, 3.1rem)); font-weight: 400; color: var(--ink); margin: 0 0 12px; line-height: 1.15; }
.lz-cta-p { color: var(--tx2); max-width: var(--measure, 56ch); margin: 0 auto; }
.lz-cta-band .lz-cta { justify-content: center; }
@media (max-width: 700px) { .lz-cta-band .con { border-radius: 0; } }

/* --- DISTANCIAS Y MAPA ------------------------------------------------------------------------------- */
.lz-places { background: var(--bg); text-align: left; }
.lz-places-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.lz-places-nomap { grid-template-columns: minmax(0, 1fr); }
.lz-places-txt .sl, .lz-places-txt .st, .lz-places-txt .ss { text-align: left; margin-left: 0; }
.lz-places-txt .ss { margin-bottom: 28px; }
.lz-dist { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 14px; }
.lz-dist-it { display: flex; align-items: center; gap: 14px; color: var(--tx); font-size: 1.02rem; }
.lz-dist-ic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-dark); display: grid; place-items: center; }
.lz-dist-ic svg { width: 18px; height: 18px; }
.lz-dist-m { font-weight: 600; color: var(--ink); white-space: nowrap; }
.lz-dist-n { color: var(--tx2); }
.lz-places .loc-note { margin: 0 0 22px; }
.lz-map { margin: 0; max-width: none; border: 0; box-shadow: none; border-radius: var(--r-md, 24px); background: var(--bg); }
/* Escala de grises tenida: el SVG ya usa los tokens grises de :root; ademas se desatura para que ninguna
   paleta de acento vivo lo coloree. El marcador conserva el acento por su propio fill. */
.lz-map .zone-map-svg { filter: saturate(.35); }
.lz-map .zm-pin, .lz-map .zm-acc { filter: saturate(2.4); }
@media (max-width: 900px) { .lz-places-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

/* --- PREGUNTAS --------------------------------------------------------------------------------------- */
.lz-faq { background: var(--bg); }
.lz-faq-list { display: grid; gap: 12px; margin-top: 8px; }
.lz-faq-it { background: var(--bg3); border: 1px solid var(--line); border-radius: var(--r-sm, 14px); padding: 0 22px; }
.lz-faq-it summary { cursor: pointer; padding: 18px 0; font-family: var(--ff-title); font-size: 1.2rem; color: var(--ink); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.lz-faq-it summary::-webkit-details-marker { display: none; }
.lz-faq-it summary::after { content: "+"; font-family: var(--ff-body); font-size: 1.5rem; line-height: 1; color: var(--accent-dark); transition: transform var(--tr); }
.lz-faq-it[open] summary::after { transform: rotate(45deg); }
.lz-faq-it p { margin: 0 0 20px; color: var(--tx); }

/* --- PIE EN BANDA ------------------------------------------------------------------------------------ */
footer.lz-footer { background: var(--bg3); border: 0; padding: 0 var(--lz-band-m) var(--lz-band-m); color: var(--ft-tx2);
  --ft-tx: color-mix(in srgb, var(--ink) 92%, var(--bg2)); --ft-tx2: color-mix(in srgb, var(--ink) 80%, var(--bg2)); --ft-line: color-mix(in srgb, var(--ink) 18%, var(--bg2)); }
footer.lz-footer .fti { max-width: none; background: var(--bg2); border-radius: var(--r-lg2, 80px); padding: clamp(48px, 6vw, 84px) clamp(28px, 6vw, 72px) 28px; }
footer.lz-footer .ftt { grid-template-columns: 2.2fr 1fr 1fr 1fr; }
footer.lz-footer .ftb .logo, footer.lz-footer .ftbt, footer.lz-footer .ftb p { color: var(--ft-tx); }
footer.lz-footer .ftc h4 { color: var(--ft-tx); font-family: var(--ff-title); text-transform: none; letter-spacing: .01em; font-size: 1.05rem; font-weight: 400; }
footer.lz-footer .ftc a { color: var(--ft-tx2); text-decoration: none; }
footer.lz-footer .ftc a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
footer.lz-footer .ftso a { color: var(--ft-tx2); border-color: var(--ft-line); }
.lz-ft-tag { font-family: var(--ff-title); font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1.12; color: var(--ink); margin: 0 0 20px; max-width: 16ch; }
.lz-social-list a { display: inline-flex; align-items: center; gap: 9px; }
.lz-social-list svg { width: 18px; height: 18px; flex: 0 0 auto; }
body.dark footer.lz-footer { background: var(--bg); --ft-tx: #f4f1ea; --ft-tx2: #c3bdb1; --ft-line: #2b303c; }
@media (max-width: 700px) { footer.lz-footer .fti { border-radius: 0; } }

/* --- SUPERFICIES DE SECCION Y REMATES ---------------------------------------------------------------- */
.gb { background: var(--bg3); }
.det, .loc { background: var(--bg3); }
.am, .places { background: var(--bg); }
.intro { padding-top: calc(var(--sp-6, 96px) * .9); }
@media (prefers-reduced-motion: reduce) {
  html.lz-lines .lz-wi { transform: none !important; opacity: 1 !important; transition: none !important; }
  .lz-link:hover::after { animation: none; }
}
/* AXE SOBRE LO SERVIDO (2026-09-02, primera pasada): (1) el CTA del nav heredaba el fondo del sistema
   (--cta-bg) bajo su texto en tinta: aqui es un boton de FILETE y el fondo va transparente hasta el hover;
   (2) el sello "Web creada con" del pie usa los tokens de contraste sobre TINTA, y el pie de luz es claro:
   se remapean los dos tokens en el ambito del pie para que el sello herede el texto del pie. */
nav.sl-nav .nav-cta { background: transparent; }
footer.lz-footer { --ink-contrast: var(--ft-tx); --ink-contrast2: var(--ft-tx2); }
footer.lz-footer .slbv, footer.lz-footer .slbv-t { color: var(--ft-tx2); }
/* TRAS LA PRIMERA CAPTURA SERVIDA (2026-09-02): (1) con foto oscura el hero heredaba el gris de cuerpo en
   vez del blanco, porque .lz-hero pone color inherit para el modo tinta; el blanco se fija en el modo claro;
   (2) el parrafo de la introduccion sin anfitrion iba en la display heredada de mallorca y luz lo quiere en
   la de cuerpo, como la referencia; (3) el CTA del nav volvia a salir en movil y apretaba la cabecera. */
.lz-hero.lz-light .lz-hc, .lz-hero.lz-light .lz-title, .lz-hero.lz-light .h1-tag, .lz-hero.lz-light .hs { color: #fff; }
.lz-intro .intro-p { font-family: var(--ff-body); font-size: 1.1rem; line-height: var(--lh-body, 1.7); color: var(--tx); }
@media (max-width: 900px) { nav.sl-nav .nav-cta { display: none; } }
/* HALO DEL TITULAR EN MODO CLARO (2026-09-02, medido con tools/hero-legible.js sobre la demo servida): con
   la sombra heredada, el percentil 90 del anillo de 8 px daba 1,40 sobre las sillas de mimbre claras. El
   titular de luz es fino (Forum, un solo trazo) y necesita un halo mas denso que las serifas gruesas: mas
   capas a alfa 1 entre 1 y 12 px y las diagonales a 3 px. Sigue siendo SOLO sombra: la foto no se toca. */
.lz-hero.lz-light .lz-title {
  text-shadow:
    0 0 1px rgba(4,8,14,1), 0 0 2px rgba(4,8,14,1), 0 0 3px rgba(4,8,14,1), 0 0 4px rgba(4,8,14,1),
    0 0 6px rgba(4,8,14,1), 0 0 8px rgba(4,8,14,1), 0 0 10px rgba(4,8,14,1), 0 0 12px rgba(4,8,14,.98),
    3px 3px 4px rgba(4,8,14,1), -3px 3px 4px rgba(4,8,14,1), 3px -3px 4px rgba(4,8,14,1), -3px -3px 4px rgba(4,8,14,1),
    0 0 16px rgba(4,8,14,.9), 0 0 26px rgba(4,8,14,.7), 0 6px 44px rgba(4,8,14,.55);
}

/* ==========================================================================
   LUZ, CORRECCIONES 2026-09-02b tras la revision de la demo. Gana por orden de origen sobre el bloque LUZ.
   ========================================================================== */

/* --- 1. MOSAICO DE PUZLE: piezas estiradas a su celda, 36 px de gutter constante, sin celdas vacias ------ */
.lz-mosaic { --lz-gap: 36px; --lz-u: min(63px, calc((100vw - 48px - 11 * var(--lz-gap)) / 12)); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: var(--lz-u); gap: var(--lz-gap); align-items: stretch; }
.lz-tile { aspect-ratio: auto; margin: 0; height: 100%; min-height: 0; }
.lz-tile img { width: 100%; height: 100%; object-fit: cover; }
/* Ocho piezas: 12 columnas por 7 filas, bordes escalonados arriba y por dentro todo cubierto. */
.lz-n8 > :nth-child(1) { grid-area: 2 / 1 / 5 / 3; }
.lz-n8 > :nth-child(2) { grid-area: 1 / 3 / 4 / 7; }
.lz-n8 > :nth-child(3) { grid-area: 2 / 7 / 6 / 11; }
.lz-n8 > :nth-child(4) { grid-area: 3 / 11 / 5 / 13; }
.lz-n8 > :nth-child(5) { grid-area: 5 / 1 / 8 / 3; }
.lz-n8 > :nth-child(6) { grid-area: 4 / 3 / 8 / 7; }
.lz-n8 > :nth-child(7) { grid-area: 6 / 7 / 8 / 11; }
.lz-n8 > :nth-child(8) { grid-area: 5 / 11 / 8 / 13; }
/* Seis piezas: 12 por 6. */
.lz-n6 > :nth-child(1) { grid-area: 2 / 1 / 4 / 3; }
.lz-n6 > :nth-child(2) { grid-area: 1 / 3 / 4 / 7; }
.lz-n6 > :nth-child(3) { grid-area: 2 / 7 / 5 / 11; }
.lz-n6 > :nth-child(4) { grid-area: 3 / 11 / 5 / 13; }
.lz-n6 > :nth-child(5) { grid-area: 4 / 1 / 7 / 7; }
.lz-n6 > :nth-child(6) { grid-area: 5 / 7 / 7 / 13; }
/* Cuatro, tres, dos y una. */
.lz-n4 > :nth-child(1) { grid-area: 1 / 1 / 4 / 6; }
.lz-n4 > :nth-child(2) { grid-area: 2 / 6 / 5 / 13; }
.lz-n4 > :nth-child(3) { grid-area: 4 / 1 / 7 / 6; }
.lz-n4 > :nth-child(4) { grid-area: 5 / 6 / 7 / 13; }
.lz-n3 > :nth-child(1) { grid-area: 1 / 1 / 4 / 7; }
.lz-n3 > :nth-child(2) { grid-area: 2 / 7 / 6 / 13; }
.lz-n3 > :nth-child(3) { grid-area: 4 / 1 / 6 / 7; }
.lz-n2 > :nth-child(1) { grid-area: 1 / 1 / 5 / 7; }
.lz-n2 > :nth-child(2) { grid-area: 2 / 7 / 6 / 13; }
.lz-n1 > :nth-child(1) { grid-area: 1 / 3 / 6 / 11; }
@media (max-width: 760px) {
  .lz-mosaic { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin: 0 -24px; padding: 0 24px 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .lz-mosaic > .lz-tile { grid-area: auto; flex: 0 0 80vw; height: auto; aspect-ratio: 3 / 2; scroll-snap-align: center; border-radius: 16px; }
  .lz-n1 > .lz-tile { flex: 0 0 100%; }
}

/* --- 2. HERO CON MOVIMIENTO: camara en bucle y sucesion de fotos, solo transform y opacidad ---------------- */
.lz-hero .hbg { --lz-kb: 1.14; --lz-kb-x: 2.2%; --lz-kb-y: 1.6%; }
.lz-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform-origin: 50% 50%; will-change: transform, opacity; transition: opacity 1.8s ease-in-out; }
.lz-slide.lz-slide-on { opacity: 1; }
/* Zoom lento con paseo: ida y vuelta (alternate) para que el bucle no salte nunca al reiniciar. Solo corre
   con html.lz-cam, que pone el script cuando el hero esta en pantalla; sin JS o con reduced-motion no existe. */
@keyframes lz-cam-a { 0% { transform: scale(1) translate(0, 0); } 100% { transform: scale(var(--lz-kb)) translate(var(--lz-kb-x), calc(-1 * var(--lz-kb-y))); } }
@keyframes lz-cam-b { 0% { transform: scale(1.02) translate(0, 0); } 100% { transform: scale(var(--lz-kb)) translate(calc(-1 * var(--lz-kb-x)), var(--lz-kb-y)); } }
html.lz-cam .lz-slide { animation: lz-cam-a 16s cubic-bezier(.37, 0, .63, 1) infinite alternate; animation-play-state: paused; }
html.lz-cam .lz-slide.lz-alt { animation-name: lz-cam-b; }
html.lz-cam .lz-hero.lz-play .lz-slide.lz-slide-on, html.lz-cam .lz-hero.lz-play .lz-slide.lz-slide-out { animation-play-state: running; }
html.lz-cam .lz-slide.lz-slide-out { opacity: 0; }
@media (max-width: 700px) { .lz-hero .hbg { --lz-kb: 1.07; --lz-kb-x: 1.2%; --lz-kb-y: .9%; } }
@media (prefers-reduced-motion: reduce) { html.lz-cam .lz-slide { animation: none !important; transition: none !important; } }

/* --- 3. TITULAR A ANCHO DE CAJA (2026-09-02c): el script fija font-size entre 40 y 72 px (24 a 34 en movil) para
   llenar como maximo el 65 % de la caja; sin JS queda este clamp. Un titulo largo parte en lineas, no encoge. --- */
.lz-title { font-size: 4.5rem; overflow-wrap: normal; }
/* EL HALO NO PUEDE QUEDAR RECORTADO POR LA MASCARA DE PALABRAS (medido con hero-legible: el anillo del titular
   salia claro porque .lz-w lleva overflow hidden y se comia la sombra). Cada caja de palabra gana .3em de
   holgura por dentro y la devuelve con margen negativo, asi que la sombra respira y la maqueta no cambia. */
.lz-w { padding: .3em .32em; margin: -.3em -.32em; }
html.lz-lines .lz-wi { transform: translateY(140%); }
.lz-hc { max-width: min(900px, 100%); width: 100%; }
.lz-kicker { font-size: clamp(.72rem, calc(var(--lz-title-px, 62px) * .2), 1rem); margin: 6px 0 0; }
.lz-hero .h1-tag { margin: 0 0 4px; }
.lz-hero .hs { margin-top: 10px; }
@media (max-width: 700px) { .lz-title { font-size: 2.125rem; } }

/* --- 4. REALCE CENIDO AL TEXTO, EN EL TONO OPUESTO DE LA PALETA (2026-09-02c; sustituye a las placas) ----------
   Halo de trazos pegado a las letras, nada de cajas: con texto claro el halo es --hero-scrim (principal hundido),
   un hex estatico que la noche no reasigna. Los textos pequenos llevan ademas contorno DETRAS del relleno
   (paint-order), como en las seis plantillas. La foto no se oscurece: solo el velo del punto 5 la aclara.
   ESTE BLOQUE ES SOLO DEL MODO CLARO DESDE EL 2026-09-03: el modo tinta ya no lleva halo de ningun tipo
   (bloque 7), asi que sale de estos selectores en vez de quedarse con un halo transparente que no pinta
   nada. Un valor muerto en una lista de selectores es lo que hace que la siguiente ronda lo reviva sin
   querer. */
.lz-hero.lz-light { --lz-halo: var(--hero-scrim, #0a1018); }
.lz-hero .lz-plate { background: none; padding: 0; margin: 0; width: auto; }
.lz-hero.lz-light .lz-title {
  color: var(--lz-ink-color, #fff); -webkit-text-stroke: 0;
  text-shadow:
    0 0 1px var(--lz-halo), 0 0 2px var(--lz-halo), 0 0 3px var(--lz-halo), 0 0 4px var(--lz-halo),
    0 0 6px var(--lz-halo), 0 0 8px var(--lz-halo), 0 0 10px var(--lz-halo),
    2px 2px 3px var(--lz-halo), -2px 2px 3px var(--lz-halo), 2px -2px 3px var(--lz-halo), -2px -2px 3px var(--lz-halo),
    0 0 14px var(--lz-halo), 0 0 22px var(--lz-halo);
}
.lz-hero.lz-light .lz-kicker, .lz-hero.lz-light .hs, .lz-hero.lz-light .h1-tag, .lz-hero.lz-light .hb {
  color: var(--lz-ink-color, #fff); paint-order: stroke fill; -webkit-text-stroke: 2.2px var(--lz-halo);
  text-shadow: 0 0 1px var(--lz-halo), 0 0 2px var(--lz-halo), 0 0 3px var(--lz-halo), 0 0 4px var(--lz-halo), 0 0 6px var(--lz-halo), 0 0 8px var(--lz-halo), 1px 1px 2px var(--lz-halo), -1px 1px 2px var(--lz-halo), 1px -1px 2px var(--lz-halo), -1px -1px 2px var(--lz-halo), 0 0 14px var(--lz-halo);
}
.lz-hero.lz-light { --lz-ink-color: #fff; }
.lz-hero.lz-light .lz-link::after { background: #fff; }
.lz-hero .lz-cta { margin-top: 22px; }

/* --- 5. VELO DEL TONO CLARO DE LA PALETA sobre la foto del hero, solo aqui; la opacidad la pone hero.php ------- */
/* VELO CON COLOR DE PALETA (2026-09-02d, REPESADO EL 2026-09-04): --ink-contrast era el bg casi neutro y no
   cambiaba entre paletas; paso a bg2 (el tono claro con color) mezclado con el acento, los dos como hex
   estaticos emitidos por layout.php (--lz-bg2 y --lz-accent), asi que en noche sigue siendo claro.
   EL 14 % DE ACENTO NO SE NOTABA Y ESTA MEDIDO: sobre la MISMA foto, los colores del velo de las paletas
   mas distintas se separaban como mucho 4 puntos de un canal de 255, o sea que cambiar de paleta no movia
   el velo. La causa es que bg2 es un blanco roto parecido en casi todas, asi que el peso del ACENTO es lo
   unico que puede separarlas. Pasa a 30 %. Primero el respaldo sin color-mix. */
.lz-veil { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: var(--lz-bg2, #ece7df); background: color-mix(in srgb, var(--lz-bg2, #ece7df) 70%, var(--lz-accent, #9a8567)); }
.lz-hero .hbg .lz-slide, .lz-hero .hbg img { z-index: 0; }
.lz-video { z-index: 1; }

/* --- 6. CABECERA: por debajo de 901 px la navegacion pasa al menu compacto y todos los controles caben ----
   EL PUNTO DE CORTE BAJA DE 1366 A 901 EL 2026-09-04, y no es un ajuste suelto: estaba en 1366 porque con
   las OCHO entradas del menu completo el boton de tema se salia a 1280. Con la barra corta del bloque 8
   (cuatro entradas mas el desplegable) cabe de sobra, asi que a 1280 vuelve a haber barra en vez de
   hamburguesa, que es lo que el operador pedia: el menu compacto se abria a ancho de tarjeta y tapaba la
   foto del hero entera. El comportamiento compacto de movil se CONSERVA tal cual por debajo de 901. */
nav.sl-nav .nl { gap: 22px; letter-spacing: .1em; }
@media (max-width: 900px) {
  .nl { display: none; }
  .mb { display: grid; }
  .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); }
}
@media (max-width: 700px) { nav.sl-nav .nav-cta { display: none; } }
@media (min-width: 701px) and (max-width: 900px) { nav.sl-nav .nav-cta { display: inline-flex; } }
/* EL H1 SE CINE A SU TEXTO (2026-09-02c, diagnostico con hero-legible): medido sobre el span de cada palabra el
   anillo daba 16,5 y sobre el h1 entero 1,4, porque la caja del h1 abarcaba media tarjeta con la foto en
   movimiento y la herramienta tomaba pixeles claros de la foto por glifo. Sin fondo no cambia nada a la vista;
   la caja medida es la del texto. En movil se centra con margen automatico. */
.lz-hero .lz-title { width: fit-content; max-width: 100%; }
@media (max-width: 700px) { .lz-hero .lz-title { margin-left: auto; margin-right: auto; } }
/* SIN JS EL TITULAR TIENE QUE MEDIR LO MISMO QUE CON JS (2026-09-02c): la regla .hero h1 de la base ganaba a
   .lz-title por especificidad y daba 80 px; se fija con el selector de la plantilla. */
.lz-hero .lz-title { font-size: 4.5rem; }
@media (max-width: 700px) { .lz-hero .lz-title { font-size: 2.125rem; } }

/* --- 7. MODO TINTA: TEXTO NEGRO Y LIMPIO, SIN HALO NI SOMBRA DE NINGUN TIPO (2026-09-03) --------------
   DECISION DEL OPERADOR. En modo tinta (.lz-hero.lz-ink) el velo del punto 5 ya aclara la foto lo
   suficiente, asi que el titular, el kicker y los botones del hero van SIN halo, SIN contorno y SIN
   sombra, en los DOS temas. Sustituye al halo claro que el bloque 4 les ponia.

   EL COLOR ES --lz-ink-text, NEGRO FIJO EMITIDO EN EL :root INLINE por layout.php junto a --lz-bg2 y
   --lz-accent. No se usa --hero-scrim (que es el principal de la paleta hundido, o sea un oscuro TENIDO y
   distinto en cada paleta) ni --ink-contrast (que es el bg de la paleta, pensado para texto SOBRE la tinta
   y por tanto claro). El punto de un hex fijo es que ninguna reasignacion por tema o por contenedor pueda
   moverlo: el texto oscuro sobre una foto aclarada tiene que seguir siendo oscuro tambien de noche.

   SE ANULA TAMBIEN LA SOMBRA DE BASE DE .hero h1 (0 2px 24px rgba(0,0,0,.28), linea 246). Hoy NO llega a
   aplicarse, y esta MEDIDO sobre lo servido antes de tocar nada: el text-shadow computado del titular en
   modo tinta solo traia el halo, porque las reglas de .lz-hero.lz-ink sustituyen la propiedad entera. Se
   anula EXPRESAMENTE para que siga siendo cierto si alguien cambia esas reglas: una sombra negra debajo de
   un texto negro no se ve fallar, solo emborrona.

   EL MODO CLARO NO SE TOCA: alli el halo oscuro del bloque 4 es lo que hace legible el texto blanco sobre
   una foto cualquiera, y esa parte esta medida con hero-legible desde el 2026-09-02. */
.lz-hero.lz-ink { --lz-ink-color: var(--lz-ink-text, #000000); --lz-halo: transparent; }
.lz-hero.lz-ink h1,
.lz-hero.lz-ink .lz-title, .lz-hero.lz-ink .h1-brand, .lz-hero.lz-ink .h1-tag, .lz-hero.lz-ink .hs,
.lz-hero.lz-ink .lz-kicker, .lz-hero.lz-ink .h-eyebrow, .lz-hero.lz-ink .hb, .lz-hero.lz-ink .lz-link {
  color: var(--lz-ink-text, #000000);
  text-shadow: none;
  -webkit-text-stroke: 0;
  paint-order: normal;
}
.lz-hero.lz-ink .lz-link::after { background: var(--lz-ink-text, #000000); }
/* EL BOTON PRIMARIO NO CAMBIA DE COLOR: es una pastilla con fondo de acento y su par ya esta medido en las
   21 paletas, asi que forzarle el negro seria romper un contraste comprobado. Lo que pierde, como el resto
   del hero en modo tinta, es la SOMBRA: la suya es un box-shadow y no un text-shadow, de ahi los dos. */
.lz-hero.lz-ink .btn, .lz-hero.lz-ink .btn.btn-primary { box-shadow: none; text-shadow: none; }

/* --- 8. DESPLEGABLE "MAS" DE LA BARRA (2026-09-04) ---------------------------------------------------
   La barra deja visibles cuatro entradas y el resto vive aqui. TRES COSAS QUE SON EL ENCARGO Y NO ADORNO:
   (a) EL ANCHO ES EL DE SU ELEMENTO MAS LARGO, con `width: max-content`; no es ancho de pantalla ni de
       tarjeta, que es justo lo que hacia el menu compacto y por lo que tapaba la foto del hero.
   (b) SE ANCLA BAJO SU BOTON: el `li` es el contexto de posicionamiento y el menu cuelga de el con
       `top: 100%`. Se alinea por la DERECHA (`right: 0`) porque el boton vive al final de la lista y con
       `left: 0` un menu ancho se saldria por el borde derecho en las pantallas justas.
   (c) NO PUEDE TAPAR EL TITULAR NI EL BOTON DEL HERO, y eso no lo garantiza el CSS sino la medida: el
       titular del hero esta anclado ABAJO en una tarjeta que empieza bajo la cabecera, y el menu cuelga
       de la cabecera hacia abajo; la comprobacion por rects a 1280, 1440 y 1920 esta en el arnes.
   NI UN HEX: todo sale de los tokens de la plantilla, asi que el modo noche lo decide el mismo sitio. */
.lz-more { position: relative; }
.lz-more-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0;
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.lz-more-chev { width: 14px; height: 14px; flex: none; transition: transform .2s ease; }
.lz-more.open .lz-more-chev { transform: rotate(180deg); }
.lz-more-menu { display: none; position: absolute; top: 100%; right: 0; margin-top: 10px; width: max-content;
  background: var(--bg3); border: 1px solid var(--border); border-radius: var(--r-md, 14px);
  box-shadow: 0 18px 44px rgba(0,0,0,.16); padding: 6px 0; z-index: 40; }
.lz-more.open .lz-more-menu { display: block; }
.lz-more-menu a { display: block; padding: 10px 18px; white-space: nowrap; color: var(--tx); text-decoration: none;
  font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; }
.lz-more-menu a:hover, .lz-more-menu a:focus-visible { background: var(--bg2); color: var(--ink); }
/* EL COMPORTAMIENTO COMPACTO DE MOVIL SE CONSERVA: por debajo de 901 px la barra entera se apila dentro
   del menu de la hamburguesa, asi que el desplegable deja de ser un desplegable y sus entradas caen en la
   lista como una mas. El boton "Mas" desaparece ahi porque no abre nada: seria un control muerto. */
@media (max-width: 900px) {
  .lz-more-btn { display: none; }
  .lz-more-menu { display: block; position: static; margin: 0; width: auto; background: none; border: 0;
    box-shadow: none; padding: 0; }
  .sl-nav.menu-open .lz-more-menu a { padding: 13px 22px; font-size: .82rem; }
}