/* ====================================================================
   Web pública white-label — administrada desde /sistema (módulo Sitio web).
   Estética de paneles que suben y tarjetas glass: la de EAM / Matías Opazo
   (Patron_Web_Publica_Institucional).
   PALETA Y LETRAS: todo es var(--…). Los valores de abajo son los defaults
   NEUTROS del producto; los de cada cliente los imprime web_tema_css()
   (lib_web.php) en un <style> del <head> a partir de las claves web.color_* y
   web.fuente_*, y pisan a estos. Acá no va el color de ningún cliente.
   ==================================================================== */
:root {
  --primario: #1E293B; --primario-900: #141b26; --primario-700: #434f5f; --primario-rgb: 30,41,59;
  --acento: #2563EB; --acento-claro: #789ff2; --acento-rgb: 37,99,235; --acento-claro-rgb: 120,159,242;
  --fondo: #F4F6F8; --fondo-2: #e5e7e9;
  --tinta: #1d2330; --gris: #5f6673; --borde: #d7d9db;
  --wa: #25d366;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --maxw: 1200px;
  --gut: clamp(18px, 5vw, 64px);
  --ease: cubic-bezier(.22, 1, .36, 1);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* overflow-anchor: none → al navegar HACIA ARRIBA a un panel sticky el navegador "ancla" y deshace
   el scroll (se ve trabado). Con esto el scrollTo hacia arriba se respeta. */
html { -webkit-text-size-adjust: 100%; overflow-anchor: none; }
body { font-family: var(--sans); color: var(--tinta); background: var(--primario-900); line-height: 1.65;
  overflow-x: clip; overflow-anchor: none; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
::selection { background: var(--acento); color: #fff; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.1; letter-spacing: -.005em; }
.env { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.saltos { white-space: pre-line; }

/* -------- reveal al scrollear (sitio.js) -------- */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; } }

/* -------- botones -------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: 999px;
  padding: 13px 24px; font-size: .98rem; font-weight: 600; transition: transform .15s ease, filter .15s ease, background .2s; }
.btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.btn svg { width: 19px; height: 19px; }
.btn.wa { background: var(--wa); color: #fff; }
.btn.acento { background: var(--acento); color: #fff; }
.btn.claro { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.3); }
.btn.linea { border: 1px solid var(--acento); color: var(--primario); }
.btn.linea:hover { background: var(--acento); color: #fff; }
.acciones { display: flex; gap: 12px; flex-wrap: wrap; }

/* -------- barra sticky con scrollspy -------- */
header.barra { position: sticky; top: 0; z-index: 100; background: rgba(var(--primario-rgb),.94); border-bottom: 1px solid rgba(var(--acento-claro-rgb),.18); }
/* el desenfoque va en una capa aparte: un backdrop-filter en la barra la vuelve «contenedor» de todo lo
   position:fixed de adentro, y el menú del celular quedaba encerrado en los 64px de la barra */
header.barra::before { content: ""; position: absolute; inset: 0; z-index: -1; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 0; }
.nav__logo img { height: 54px; width: auto; }
.nav__nombre { font-family: var(--serif); font-size: 1.5rem; color: #fff; }
.foot-nombre { display: block; color: var(--primario); font-size: 1.3rem; font-family: var(--serif); margin-bottom: 12px; }
.nav-links { display: flex; gap: 4px; align-items: center; font-size: .86rem; }
.nav-links a { color: #cfd5df; font-weight: 500; padding: 8px 14px; border-radius: 999px; white-space: nowrap; transition: background .2s, color .2s; }
.nav-links a:hover { background: rgba(255,255,255,.1); color: #fff; }
.nav-links a.activo { background: var(--acento); color: #fff; }
.nav-cta { flex: 0 0 auto; }
@media (max-width: 980px) { .nav-cta { display: none; } }
/* celular: logo + ☰; el menú se abre a pantalla completa (la tira de botones corrida de costado
   parecía encajada a la fuerza) */
.nav-burger { display: none; width: 46px; height: 46px; border-radius: 12px; border: 1px solid rgba(var(--acento-claro-rgb),.35); background: rgba(255,255,255,.04);
  flex-direction: column; align-items: center; justify-content: center; gap: 5px; flex: 0 0 auto; }
.nav-burger span { width: 20px; height: 2px; border-radius: 2px; background: #f1f5f9; transition: transform .3s var(--ease), opacity .2s; }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 820px) {
  .nav { padding: 10px 0; }
  .nav__logo img { height: 42px; }
  .nav-burger { display: flex; }
  .nav-links { position: fixed; left: 0; right: 0; top: var(--nav-h, 64px); bottom: 0; z-index: 99; display: flex; flex-direction: column; align-items: stretch;
    gap: 4px; padding: 22px var(--gut) calc(30px + env(safe-area-inset-bottom)); background: rgba(var(--primario-rgb),.985); overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s, transform .3s var(--ease), visibility 0s .3s; font-size: 1.15rem; }
  .nav-links.abierto { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .3s var(--ease); }
  .nav-links a { padding: 16px 18px; border-radius: 14px; color: #e8ecf2; border-bottom: 1px solid rgba(255,255,255,.06); font-family: var(--serif); font-size: 1.5rem; font-weight: 600; }
  .nav-links a.activo { background: rgba(var(--acento-rgb),.18); color: var(--acento-claro); }
  body.menu-abierto { overflow: hidden; }
}

/* -------- foto fija de fondo (una sola, detrás de hero y áreas) -------- */
.fondo-foto { position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--primario-rgb),.55) 0%, rgba(var(--primario-rgb),.72) 100%), var(--hero-img, none) center 30% / cover no-repeat, var(--primario-900); }
/* sin foto del inicio cargada: un degradé con la paleta (nada de fábrica) */
.fondo-foto.sin-foto { background: radial-gradient(ellipse at 20% 10%, rgba(var(--acento-rgb),.35), transparent 55%), radial-gradient(ellipse at 85% 80%, rgba(var(--acento-claro-rgb),.22), transparent 50%), linear-gradient(160deg, var(--primario-700), var(--primario-900)); }

/* -------- hero -------- */
.hero { position: relative; z-index: 1; color: #fff; padding: clamp(70px, 12vh, 140px) 0 clamp(60px, 9vh, 110px);
  background: linear-gradient(100deg, rgba(var(--primario-rgb),.86) 0%, rgba(var(--primario-rgb),.45) 60%, rgba(var(--primario-rgb),.1) 100%); }
.hero__sobre { display: inline-flex; align-items: center; gap: 12px; font-size: .78rem; letter-spacing: .28em; text-transform: uppercase; color: var(--acento-claro); margin-bottom: 22px; }
.hero__sobre::before { content: ""; width: 38px; height: 1px; background: var(--acento-claro); }
.hero h1 { font-size: clamp(2.3rem, 6vw, 4.4rem); margin-bottom: 20px; max-width: 16ch; }
.hero h1 .word { display: inline-block; opacity: 0; transform: translateY(24px); animation: wordIn .9s var(--ease) forwards; animation-delay: var(--d, 0s); }
@keyframes wordIn { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero h1 .word { opacity: 1; transform: none; animation: none; } }
.hero p.bajada { font-size: 1.1rem; color: #d7dce4; max-width: 58ch; margin-bottom: 30px; }
.contadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-top: clamp(40px, 7vh, 72px); }
.contador { border-radius: 18px; padding: 18px 20px; background: rgba(255,255,255,.08);
  backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255,255,255,.16); }
.contador b { display: block; font-family: var(--serif); font-size: 2.4rem; line-height: 1; color: var(--acento-claro); font-weight: 600; }
.contador span { font-size: .85rem; color: #d7dce4; }

/* ====================================================================
   PANELES QUE SUBEN: sticky + fondo opaco + z creciente (--z).
   Ojo: ningún ancestro con overflow:hidden (mata el sticky) → body usa overflow-x:clip.
   ==================================================================== */
section { padding: clamp(56px, 8vw, 96px) 0 clamp(80px, 10vw, 120px); }
.panel { position: relative; z-index: var(--z, 2); background: #fff; border-radius: 42px 42px 0 0; box-shadow: 0 -26px 60px rgba(var(--primario-rgb),.35); }
.panel.suave { background: var(--fondo); }
.panel.oscuro { background: var(--primario); color: #fff; }
.panel--rise { position: sticky; top: var(--nav-h, 70px); }
.panel--rise.sin-clavar { position: relative; top: auto; }
section[id], .panel[id], footer[id] { scroll-margin-top: calc(var(--nav-h, 70px) + 8px); }
@media (max-width: 900px) { .panel { border-radius: 28px 28px 0 0; box-shadow: 0 -18px 40px rgba(var(--primario-rgb),.3); } }
@media (prefers-reduced-motion: reduce) { .panel--rise { position: relative; } }

.cab { margin-bottom: clamp(30px, 4vw, 50px); max-width: 720px; }
.cab__idx { display: inline-flex; align-items: center; gap: 12px; font-size: .74rem; letter-spacing: .28em; text-transform: uppercase; color: var(--acento); font-weight: 600; margin-bottom: 12px; }
.cab__idx::before { content: ""; width: 30px; height: 1px; background: currentColor; }
.cab h2 { font-size: clamp(2rem, 4.4vw, 3.1rem); color: var(--primario); }
.cab p { color: var(--gris); margin-top: 10px; }
.oscuro .cab h2, .vidrio .cab h2 { color: #fff; }
.oscuro .cab p, .vidrio .cab p { color: #cfd5df; }

/* -------- áreas: tarjetas glass sobre la foto fija -------- */
#areas { overflow: hidden; background: rgba(var(--primario-rgb),.5); color: #fff; }
/* Con la sección de alojamientos antes (27/10/26), Servicios sube ENCIMA de ella: un vidrio translúcido la dejaría ver a
   través (CIA, panel-rise: fondo OPACO). Sin alojamientos sigue el vidrio sobre la foto fija de siempre. */
#unidades + #areas { background: linear-gradient(160deg, var(--primario-700), var(--primario-900)); }
#areas > .env { position: relative; z-index: 1; }
#areas::before, #areas::after { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; filter: blur(80px); opacity: .35; pointer-events: none; }
#areas::before { background: var(--acento); top: -160px; right: -120px; }
#areas::after { background: var(--primario-700); bottom: -200px; left: -160px; }
.areas { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
.area { border-radius: 22px; padding: 28px 26px 24px; display: flex; flex-direction: column; gap: 12px;
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%);
  box-shadow: 0 12px 34px rgba(0,0,0,.22); transition: transform .45s var(--ease), background .45s, box-shadow .45s; }
.area:hover { transform: translateY(-6px); background: rgba(255,255,255,.14); box-shadow: 0 22px 48px rgba(0,0,0,.3); }
.area__ico { font-size: 1.9rem; line-height: 1; }
.area h3 { font-size: 1.65rem; color: #fff; }
.area p { color: #d7dce4; font-size: .95rem; flex: 1; }
.area a { align-self: flex-start; font-size: .86rem; font-weight: 600; color: var(--acento-claro); border-bottom: 1px solid rgba(var(--acento-claro-rgb),.45); padding-bottom: 2px; }
.area a:hover { color: #fff; border-color: #fff; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .area, .contador { background: rgba(var(--primario-rgb),.72); } }

/* -------- nosotros (equipo) -------- */
.equipo { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(20px, 3vw, 34px); }
.persona { background: #fff; border: 1px solid var(--borde); border-radius: 24px; padding: 30px; box-shadow: 0 14px 40px rgba(var(--primario-rgb),.07); display: flex; flex-direction: column; gap: 16px; }
.persona__cab { display: flex; gap: 18px; align-items: center; }
.persona__foto { width: 86px; height: 86px; border-radius: 50%; flex: 0 0 auto; object-fit: cover; background: var(--primario); color: var(--acento-claro);
  display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 2rem; font-weight: 600; border: 2px solid var(--acento-claro); }
.persona h3 { font-size: 1.7rem; color: var(--primario); }
.persona__cargo { color: var(--acento); font-size: .86rem; font-weight: 600; letter-spacing: .02em; }
.persona__bio { color: #3a4150; }
.persona__mas { color: #3a4150; display: none; }
.persona.abierta .persona__mas { display: block; }
.persona__toggle { align-self: flex-start; color: var(--primario); font-weight: 600; font-size: .9rem; border-bottom: 1px solid var(--acento); padding-bottom: 2px; }

/* -------- cómo trabajamos -------- */
.cita { font-family: var(--serif); font-size: clamp(1.7rem, 3.6vw, 2.6rem); line-height: 1.2; color: var(--primario); font-style: italic; max-width: 26ch; position: relative; padding-left: 26px; border-left: 3px solid var(--acento); }
.cita-autor { margin: 12px 0 0 29px; color: var(--acento); font-weight: 600; font-size: .9rem; letter-spacing: .06em; }
.metodo { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(30px, 5vw, 70px); align-items: start; }
.metodo__texto { color: #3a4150; }
@media (max-width: 860px) { .metodo { grid-template-columns: 1fr; } }
.pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin-top: clamp(36px, 5vw, 60px); counter-reset: paso; }
.paso { background: #fff; border-radius: 20px; padding: 24px; border: 1px solid var(--borde); position: relative; transition: transform .4s var(--ease), box-shadow .4s; }
.paso:hover { transform: translateY(-4px); box-shadow: 0 16px 38px rgba(var(--primario-rgb),.1); }
.paso::before { counter-increment: paso; content: "0" counter(paso); font-family: var(--serif); font-size: 2.2rem; color: var(--acento); line-height: 1; display: block; margin-bottom: 10px; }
.paso h3 { font-size: 1.45rem; color: var(--primario); margin-bottom: 4px; }
.paso p { color: var(--gris); font-size: .93rem; }

/* -------- novedades -------- */
.nov-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.6vw, 30px); }
.nov { display: flex; flex-direction: column; background: #fff; border-radius: 20px; overflow: hidden; border: 1px solid var(--borde); transition: transform .45s var(--ease), box-shadow .45s; }
.nov:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(var(--primario-rgb),.12); }
.nov__media { aspect-ratio: 16/10; background: var(--primario) center / cover no-repeat; position: relative; }
.nov__media.sin { display: flex; align-items: center; justify-content: center; }
.nov__media.sin img { width: 56px; opacity: .8; }
.nov__cuerpo { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.nov__fecha { font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--acento); font-weight: 600; }
.nov h3 { font-size: 1.45rem; color: var(--primario); }
.nov p { color: var(--gris); font-size: .92rem; flex: 1; }
.nov__ir { font-size: .85rem; font-weight: 600; color: var(--primario); }
@media (max-width: 980px) { .nov-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .nov-grid { grid-template-columns: 1fr; } }

/* -------- preguntas frecuentes -------- */
.faq { max-width: 860px; }
.faq details { border-bottom: 1px solid var(--borde); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 20px 4px; font-family: var(--serif); font-size: 1.4rem; font-weight: 600; color: var(--primario); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--sans); font-size: 1.5rem; color: var(--acento); transition: transform .3s var(--ease); flex: 0 0 auto; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details .faq__r { padding: 0 4px 22px; color: #3a4150; }
/* Textos con formato del editor (Quill → web_html_seguro): párrafos, listas, títulos y citas con la tipografía del sitio */
.rico > * + * { margin-top: .7em; }
.rico ul, .rico ol { padding-left: 1.3em; }
.rico li + li { margin-top: .25em; }
.rico h2, .rico h3 { font-family: var(--serif); color: inherit; line-height: 1.2; }
.rico h2 { font-size: 1.45rem; } .rico h3 { font-size: 1.2rem; }
.rico blockquote { border-left: 3px solid var(--acento); padding-left: .9em; font-style: italic; }
.rico a { color: var(--acento); text-decoration: underline; }
.area .rico { flex: 1; color: #d7dce4; font-size: .95rem; }
.cab .rico { color: var(--gris); margin-top: 10px; }

/* -------- contacto -------- */
#contacto-sec { position: relative; overflow: hidden; }
#contacto-sec.con-foto { background: linear-gradient(180deg, rgba(var(--primario-rgb),.9), rgba(var(--primario-rgb),.94)), var(--contacto-img) center / cover no-repeat; }
.contacto > *, .metodo > *, .equipo > * { min-width: 0; }
.contacto { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(30px, 5vw, 70px); align-items: start; }
@media (max-width: 900px) { .contacto { grid-template-columns: 1fr; } }
.datos { display: flex; flex-direction: column; gap: 14px; margin: 26px 0 30px; }
.dato { display: flex; gap: 14px; align-items: flex-start; color: #e6e9ef; }
.dato .ico { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(var(--acento-claro-rgb),.5); display: flex; align-items: center; justify-content: center; color: var(--acento-claro); flex: 0 0 auto; }
.dato .ico svg { width: 19px; height: 19px; }
.dato a:hover { color: var(--acento-claro); }
.dato small { display: block; color: #9aa3b2; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.form { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 26px; padding: clamp(22px, 3vw, 34px);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.form h3 { color: #fff; font-size: 1.9rem; margin-bottom: 18px; }
.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.campo label { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: #b8c0cd; }
.campo input, .campo textarea, .campo select { font: inherit; font-size: 16px; color: #fff; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.2); border-radius: 12px; padding: 12px 14px; outline: none; transition: border-color .2s, background .2s;
  width: 100%; max-width: 100%; min-width: 0; }
/* el <select> mide por su opción más larga y se salía de la tarjeta (26/10/26): la celda del grid no puede crecer por él
   (min-width:0) y el control se dibuja propio, con la flecha en SVG inline, para que mida igual que el input de al lado */
.fila2 > .campo { min-width: 0; }
.campo select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8c0cd' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; }
.campo select option { color: var(--tinta); }
.campo input:focus, .campo textarea:focus, .campo select:focus { border-color: var(--acento-claro); background-color: rgba(255,255,255,.1); }   /* background-color, no el shorthand: el select lleva la flecha en background-image */
.campo textarea { min-height: 120px; resize: vertical; }
.fila2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .fila2 { grid-template-columns: 1fr; } }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__msg { margin-top: 12px; font-size: .92rem; min-height: 1.4em; }
.form__msg.ok { color: #7ee2a8; } .form__msg.err { color: #ffb4a8; }
.form .btn[disabled] { opacity: .6; pointer-events: none; }
/* ¿por dónde mandar? dos botones de envío lado a lado, uno por vía (27/10/26) */
.via { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 4px; }
.via .btn { width: 100%; padding-left: 14px; padding-right: 14px; }
.form .btn.wa { background: var(--wa); color: #fff; }
@media (max-width: 420px) { .via { grid-template-columns: 1fr; } }
.legal { font-size: .76rem; color: #8c95a4; margin-top: 10px; }

/* -------- cierre -------- */
.cierre { text-align: center; padding: clamp(60px, 9vw, 110px) 0; }
.cierre h2 { font-size: clamp(2rem, 5vw, 3.4rem); color: var(--primario); margin-bottom: 26px; }

/* -------- pie: un FONDO claro detrás de la última tarjeta --------
   La última sección cierra con los cuatro bordes redondeados y una sombra hacia abajo; el pie va
   debajo de ELLA (z 19: arriba de los paneles fijos anteriores, abajo de la última, z 20) y sube 48px por detrás, así la tarjeta se ve apoyada sobre él. Color arena, distinto
   del color principal de Contacto y del fondo suave de los paneles. */
body > section.panel:last-of-type { border-radius: 42px; box-shadow: 0 -26px 60px rgba(var(--primario-rgb),.35), 0 28px 50px rgba(var(--primario-rgb),.28); z-index: 20; }
@media (max-width: 900px) { body > section.panel:last-of-type { border-radius: 28px; } }
footer.pie { position: relative; z-index: 19; margin-top: -48px; padding: calc(48px + 56px) 0 26px; background: var(--fondo-2); color: #4a5160; font-size: .9rem; }
footer.pie a { color: var(--primario); transition: color .2s; }
footer.pie a:hover { color: var(--acento); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 34px; padding-bottom: 32px; }
@media (max-width: 820px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-brand img { height: 58px; width: auto; margin-bottom: 16px; }
.foot-brand p { max-width: 42ch; }
.foot-col h4 { color: var(--primario); font-family: var(--sans); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 14px; font-weight: 700; }
.foot-col p { margin-bottom: 9px; }
.foot-bottom { border-top: 1px solid rgba(var(--primario-rgb),.15); padding-top: 20px; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: .84rem; }
.foot-cred { color: var(--primario); font-weight: 700; }

/* -------- WhatsApp flotante -------- */
.fab { position: fixed; right: 20px; bottom: 20px; z-index: 60; height: 60px; min-width: 60px; border-radius: 999px; background: var(--wa); color: #fff;
  display: flex; align-items: center; justify-content: center; padding: 0 14px; box-shadow: 0 12px 30px rgba(37,211,102,.45); transition: transform .2s var(--ease), box-shadow .2s, padding .45s var(--ease); }
.fab svg { width: 32px; height: 32px; flex: 0 0 auto; }
.fab__txt { max-width: 0; overflow: hidden; white-space: nowrap; font-weight: 600; opacity: 0; transition: max-width .45s var(--ease), opacity .45s, margin .45s; }
.fab:hover { box-shadow: 0 16px 38px rgba(37,211,102,.55); padding: 0 20px 0 16px; }
.fab:hover .fab__txt { max-width: 160px; opacity: 1; margin-left: 10px; }
.fab::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--wa); z-index: -1; animation: fab-late 2.4s ease-out infinite; }
@keyframes fab-late { 0% { transform: scale(1); opacity: .5 } 70%, 100% { transform: scale(1.5); opacity: 0 } }
@media (prefers-reduced-motion: reduce) { .fab::before { animation: none; } }
@media (max-width: 700px) { .fab { height: 56px; min-width: 56px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); } .fab svg { width: 29px; height: 29px; } .fab:hover .fab__txt { max-width: 0; opacity: 0; margin: 0; } .fab:hover { padding: 0 14px; } }

/* -------- detalle de una novedad -------- */
.det-hero { position: sticky; top: var(--nav-h, 70px); z-index: 1; min-height: 46vh; display: flex; align-items: flex-end; color: #fff;
  background: linear-gradient(to top, rgba(var(--primario-rgb),.95), rgba(var(--primario-rgb),.35)), var(--nov-img, none) center / cover no-repeat, var(--primario); }
.det-hero .env { padding-bottom: 60px; padding-top: 60px; width: 100%; }
.det-hero a.volver { color: var(--acento-claro); font-size: .86rem; display: inline-block; margin-bottom: 14px; }
.det-hero h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); max-width: 22ch; }
.det-hero .fecha { color: #cfd5df; margin-top: 10px; font-size: .9rem; }
.det-cuerpo { max-width: 72ch; font-size: 1.07rem; color: #2e3442; }
.det-cuerpo p, .det-cuerpo ul { margin-bottom: 1.1em; }
.det-cuerpo ul { padding-left: 1.2em; }
.det-cuerpo a { color: var(--acento); text-decoration: underline; }
.det-cuerpo ol { padding-left: 1.4em; margin-bottom: 1.1em; }
.det-cuerpo h2, .det-cuerpo h3 { font-family: var(--serif); color: var(--primario); line-height: 1.2; margin: 1.4em 0 .5em; }
.det-cuerpo h2 { font-size: 1.7rem; }
.det-cuerpo h3 { font-size: 1.35rem; }
.det-cuerpo blockquote { border-left: 3px solid var(--acento); padding: .2em 0 .2em 1em; margin: 0 0 1.1em; color: var(--primario); font-family: var(--serif); font-style: italic; font-size: 1.15em; }
.det-cuerpo strong { color: #1d2433; }
/* Galería de la novedad (las fotos que siguen a la portada) + visor */
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-top: 30px; max-width: 72ch; }
.galeria__item { display: block; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; box-shadow: 0 8px 24px rgba(var(--primario-rgb),.14); }
.galeria__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.galeria__item:hover img { transform: scale(1.05); }
.visor { position: fixed; inset: 0; z-index: 2000; background: rgba(10,16,28,.92); display: flex; align-items: center; justify-content: center; }
.visor img { max-width: 92vw; max-height: 86vh; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.visor button { position: absolute; background: rgba(255,255,255,.12); color: #fff; border: 0; border-radius: 50%; width: 48px; height: 48px; font-size: 1.5rem; cursor: pointer; }
.visor button:hover { background: rgba(255,255,255,.24); }
.visor .v-cerrar { top: 18px; right: 18px; }
.visor .v-ant { left: 14px; top: 50%; transform: translateY(-50%); }
.visor .v-sig { right: 14px; top: 50%; transform: translateY(-50%); }
.visor .v-num { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; color: #cfd5df; font-size: .85rem; }
.det-cuerpo .resumen { font-size: 1.22rem; color: var(--primario); font-family: var(--serif); font-style: italic; margin-bottom: 1.3em; }

/* Las líneas finas entre mosaicos del mapa (redondeo de subpíxeles con zoom de pantalla ≠ 100 %):
   se agrandan los tiles 1px para que se solapen (mismo arreglo que Matías Opazo). */
.leaflet-tile { width: 257px !important; height: 257px !important; }

/* -------- dónde estamos: el mapa como TARJETA ANCHA, con la dirección y «Cómo llegar» al pie -------- */
.mapa-caja { border-radius: 26px; overflow: hidden; background: #fff; border: 1px solid var(--borde); box-shadow: 0 18px 50px rgba(var(--primario-rgb),.12); }
.mapa-caja #mapa { height: clamp(320px, 46vw, 520px); background: #dfe6ee; }
.mapa-pie { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; padding: 20px 26px; }
.mapa-pie__dir { display: flex; flex-direction: column; gap: 2px; }
.mapa-pie__dir b { font-family: var(--serif); font-size: clamp(1.3rem, 2.2vw, 1.7rem); color: var(--primario); font-weight: 600; line-height: 1.2; }
.mapa-pie__dir span { color: var(--gris); }
.mapa-pie__dir small { color: #3a4150; font-size: .88rem; margin-top: 4px; }
.leaflet-popup-content { font-family: var(--sans); color: var(--tinta); }

/* -------- datos de contacto que se tocan: tienen que verse tocables -------- */
.dato--btn { border: 1px solid rgba(255,255,255,.18); border-radius: 16px; padding: 12px 14px; background: rgba(255,255,255,.05); align-items: center;
  transition: background .2s, border-color .2s, transform .15s; }
.dato--btn:hover { background: rgba(255,255,255,.1); border-color: var(--acento-claro); transform: translateY(-1px); }
.dato--btn:hover .dato__ir { background: var(--acento); color: #fff; }
.dato__ir { margin-left: auto; flex: 0 0 auto; font-size: .82rem; font-weight: 600; color: var(--acento-claro); border: 1px solid rgba(var(--acento-claro-rgb),.5); border-radius: 999px; padding: 6px 12px; transition: background .2s, color .2s; }
.dato--wa .ico { background: var(--wa); border-color: var(--wa); color: #fff; }
.dato--wa .dato__ir { color: #7ee2a8; border-color: rgba(37,211,102,.55); }
.dato--wa:hover .dato__ir { background: var(--wa); color: #fff; }
@media (max-width: 420px) { .dato__ir { padding: 5px 9px; font-size: .76rem; } }

/* textos largos (un mail, un teléfono) no pueden empujar la tarjeta fuera de la pantalla */
.dato > span:not(.ico):not(.dato__ir) { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .dato--btn { padding: 10px 12px; gap: 10px; }
  .dato .ico { width: 38px; height: 38px; }
  .dato__ir { padding: 5px 9px; font-size: .74rem; }
  .cab h2 { font-size: clamp(1.8rem, 8vw, 2.4rem); }
}

/* ---------- Alojamientos (módulo unidades, r163): tarjetas en el inicio y ficha por tipo ---------- */
.unid-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.6vw, 30px); }
@media (max-width: 980px) { .unid-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .unid-grid { grid-template-columns: 1fr; } }
.unid { display: flex; flex-direction: column; background: #fff; border-radius: 22px; overflow: hidden; border: 1px solid var(--borde); box-shadow: 0 14px 34px rgba(var(--primario-rgb),.06); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.unid:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(var(--primario-rgb),.12); }
.unid__media { display: block; aspect-ratio: 16/10; background: var(--primario) center / cover no-repeat; position: relative; }
.unid__media.sin { display: flex; align-items: center; justify-content: center; }
.unid__media.sin img { width: 56px; opacity: .8; }
.unid__n { position: absolute; left: 14px; bottom: 12px; background: rgba(0,0,0,.55); color: #fff; font-size: .74rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; backdrop-filter: blur(4px); }
.unid__cuerpo { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.unid__cap { font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--acento); font-weight: 700; }
.unid h3 { font-size: 1.5rem; color: var(--primario); line-height: 1.15; }
.unid h3 a { color: inherit; }
.unid__caract { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: .86rem; color: var(--gris); }
.unid__pie { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; margin-top: auto; padding-top: 8px; }
.unid__desde { color: var(--primario); line-height: 1.1; }
.unid__desde small { font-size: .74rem; color: var(--gris); }
.unid__desde b { font-family: var(--serif); font-size: 1.45rem; font-weight: 600; }
.unid__ir { font-size: .85rem; font-weight: 600; color: var(--primario); white-space: nowrap; }
/* Celular: las tarjetas se apilan al bajar (cada una se clava y la siguiente la tapa, con un escalón de 10 px). */
@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
  #unidades .unid { position: sticky; top: calc(var(--nav-h, 70px) + 14px + var(--i, 0) * 10px);
    box-shadow: 0 -14px 30px rgba(var(--primario-rgb),.16); }
  #unidades .unid:hover { transform: none; }
  #unidades .unid-grid { gap: 26px; }
}
/* PC: la sección se clava y las tarjetas pasan de derecha a izquierda con la rueda (sitio.js pone .hz y --hz-extra). */
#unidades.hz .unid-hz { height: calc(100vh - var(--nav-h, 70px) + var(--hz-extra, 0px)); }
#unidades.hz .unid-hz__pin { position: sticky; top: var(--nav-h, 70px); height: calc(100vh - var(--nav-h, 70px));
  display: flex; flex-direction: column; justify-content: center; }
#unidades.hz .cab { margin-bottom: clamp(14px, 2vw, 26px); }
#unidades.hz .cab h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
#unidades.hz .unid-grid { display: flex; width: max-content; gap: clamp(20px, 2.4vw, 34px); will-change: transform; }
#unidades.hz .unid { width: min(520px, 38vw); flex: none; }
#unidades.hz .unid__media { aspect-ratio: 2/1; }
#unidades.hz .unid__caract { max-height: 4.6em; overflow: hidden; }   /* 3 renglones: la ficha completa está a un clic */
#unidades.hz .unid__cuerpo { padding: 16px 20px 18px; gap: 8px; }
#unidades.hz .unid:hover { transform: none; }
#unidades { overflow-x: clip; }
.unid__wa { display: inline-flex; align-items: center; gap: 8px; font-size: .86rem; font-weight: 600; color: var(--wa); margin-top: 4px; }
.unid__wa svg { width: 18px; height: 18px; }
.unid__wa:hover { text-decoration: underline; }
/* la ficha */
.unid-ficha { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(30px, 5vw, 70px); align-items: start; }
@media (max-width: 900px) { .unid-ficha { grid-template-columns: 1fr; } }
.unid-ficha > * { min-width: 0; }
.unid-sub { font-family: var(--sans); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--acento); font-weight: 700; margin: 28px 0 12px; }
.unid-ficha__txt .unid-sub:first-child, .unid-ficha__lado .unid-sub:first-child { margin-top: 0; }
.unid-desc { max-width: none; }
.caract-lista { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px 18px; color: #2e3442; }
.caract-lista li { display: flex; gap: 10px; align-items: center; }
.caract-ico { width: 34px; height: 34px; border-radius: 10px; background: var(--fondo); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; font-size: 1.05rem; }
.unid-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.unid-chip { border: 1px solid var(--borde); border-radius: 999px; padding: 6px 14px; font-size: .88rem; color: var(--primario); background: #fff; }
.unid-chip small { color: var(--gris); }
.unid-ficha__lado { background: var(--fondo); border: 1px solid var(--borde); border-radius: 24px; padding: clamp(20px, 3vw, 30px); position: sticky; top: calc(var(--nav-h, 70px) + 20px); }
@media (max-width: 900px) { .unid-ficha__lado { position: static; } }
/* 27/10/26 (dueño): «más integrado» — la tabla va sobre el mismo fondo de su recuadro, sin otra caja blanca adentro. */
.tarifas-wrap { overflow-x: auto; }
.tarifas { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tarifas th, .tarifas td { padding: 10px 12px; border-bottom: 1px solid var(--borde); text-align: right; white-space: nowrap; }
.tarifas thead th { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); background: var(--fondo-2); }
.tarifas thead th small { font-weight: 400; letter-spacing: 0; text-transform: none; }
.tarifas tbody th { text-align: left; color: var(--primario); font-weight: 600; }
.tarifas tbody th small { display: block; font-weight: 400; color: var(--gris); font-size: .74rem; }
.tarifas tbody td { font-variant-numeric: tabular-nums; color: #1f2633; font-weight: 600; }
.tarifas tr:last-child th, .tarifas tr:last-child td { border-bottom: 0; }
.tarifas__dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; vertical-align: middle; }
.tarifas__no { color: #b4bcc8; font-weight: 400; }
.tarifas__nota { font-size: .8rem; color: var(--gris); margin: 10px 2px 18px; }
/* 💵 equivalente de referencia (dólares ↔ pesos): chico y gris, debajo del precio; la aclaración, una vez por página */
.unid__eq { display: block; margin-top: 3px; font-size: .76rem; color: var(--gris); }
.tarifas__eq { display: block; font-size: .72rem; font-weight: 400; color: var(--gris); }
.tarifas thead th { background: transparent; border-bottom: 1px solid rgba(var(--primario-rgb),.18); }
/* Celular: cada temporada es un bloque con un renglón por cantidad de personas (sin scroll de costado). */
@media (max-width: 640px) {
  .tarifas, .tarifas tbody, .tarifas tr, .tarifas th, .tarifas td { display: block; width: 100%; }
  .tarifas thead { display: none; }
  .tarifas tbody tr { padding: 12px 0 8px; border-bottom: 1px solid rgba(var(--primario-rgb),.14); }
  .tarifas tbody tr:last-child { border-bottom: 0; }
  .tarifas tbody th { padding: 0 0 6px; border: 0; white-space: normal; font-size: 1rem; }
  .tarifas tbody th small { display: inline; margin-left: 6px; }
  .tarifas tbody td { display: flex; align-items: baseline; gap: 10px; padding: 5px 0; border: 0; text-align: left; }
  .tarifas tbody td::before { content: attr(data-p); flex: 1; font-weight: 400; color: var(--gris); font-size: .88rem; }
  .tarifas tbody td.vacia { display: none; }
  .tarifas__eq { display: inline; margin-left: 6px; }
}
.det-eq { font-size: .85em; opacity: .8; }
.dolar-nota { font-size: .78rem; color: var(--gris); text-align: center; margin: 22px auto 0; max-width: 60ch; }
.unid-ficha__wa { width: 100%; }