/* ==========================================================================
   Casaserena — sistema visual "revista" (portada, Reservá)
   Paleta 2026-08-11: --beige/--crema aclarados a gris piedra neutro (pedido
   del dueño: "ni beige ni terroso, o un gris" — se descartó cualquier resto
   de matiz cacao en el fondo, que seguía leyéndose cálido incluso aclarado).
   --verde-claro reemplaza a --verde: el verde real del logo (#7b922d) no
   pasaba WCAG AA como texto sobre --cacao/--cacao-2 (~2.1:1) ni tal cual
   como fondo de chip — --verde-claro (~6.9:1 sobre --cacao) resuelve el
   caso de texto sobre fondo oscuro, --verde-hondo sigue siendo el texto
   sobre fondo claro. Tipografía: Lato reemplaza a Roboto (--sans), y se
   suma Cabin como --display (UI/botones/nav) — Aller, pedido originalmente,
   no es gratis para web. Evaluado por ui-designer + accessibility-auditor +
   brand-guardian en paralelo, ver docs/Manual_de_Marca_Basico_CasaSerena.md.
   ========================================================================== */
:root{
  --cacao:#35241C; --cacao-2:#241A12; --marron:#634C42; --marron-soft:#6E5951;
  --beige:#F4F4F4; --crema:#F9F9F9;
  --gris-piedra-claro:#E4E2DF; --gris-linea:rgba(30,30,30,.12);
  --naranja:#FCA03B; --naranja-claro:#FDB86C;
  --verde-claro:#A9B877; --verde-hondo:#505F1D;
  --serif:"Fraunces",Georgia,serif; --display:"Cabin",system-ui,sans-serif; --sans:"Lato",system-ui,sans-serif; --mono:"DM Mono",ui-monospace,monospace;
  --wrap:1200px; --r:16px; --ease:cubic-bezier(.22,.61,.36,1);
  --header-alto:70px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:106.25%}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--sans);background:var(--beige);color:var(--cacao);line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--naranja);color:var(--cacao)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
[id]{scroll-margin-top:calc(var(--header-alto) + 20px)}
h1,h2,h3,.parada__nombre{text-wrap:balance}
.post p.body,.post-lead,.pull p,.widget p,.faq__item p,.foot p,.feat .eyebrow,.act__nombre{text-wrap:pretty}
.eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--verde-hondo);display:inline-block}

/* Foco de teclado visible en todo el sitio */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:3px solid var(--naranja);outline-offset:3px;border-radius:6px;
}

.skip-link{
  position:absolute;left:12px;top:-60px;z-index:200;background:var(--cacao);color:var(--crema);
  padding:12px 20px;border-radius:8px;transition:top .2s var(--ease);
}
.skip-link:focus{top:12px}

/* ---------- Header / top bar ----------
   2026-08-27: nav pasó de --cacao (oscuro) a blanco, con una línea gris
   fina abajo (--gris-linea) para separarlo del contenido sin usar sombra —
   pedido explícito del dueño. Todo lo que antes usaba tonos crema/cacao-2
   (pensados para fondo oscuro) se invirtió a tonos oscuros sobre --crema. */
.top{background:var(--crema);color:var(--cacao);position:sticky;top:0;z-index:60;border-bottom:1px solid var(--gris-linea)}
.top-bar{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;max-width:var(--wrap);margin:0 auto;gap:16px;min-height:var(--header-alto)}
.brand{display:inline-flex;align-items:center}
.brand img{flex-shrink:0;height:34px;width:auto}
.menu{display:none;gap:24px;align-items:center}
.menu a{font-family:var(--display);font-size:.9rem;color:var(--marron);transition:color .2s}
.menu a:hover,.menu a:focus-visible{color:var(--verde-hondo)}
.wa{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);background:var(--naranja);color:var(--cacao);font-weight:500;font-size:.85rem;padding:9px 15px;border-radius:100px;transition:transform .2s var(--ease),background .2s}
.wa:hover{transform:translateY(-1px);background:var(--naranja-claro)}
.wa svg{width:16px;height:16px}
.menu-toggle{
  display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  background:transparent;border:1px solid rgba(53,36,28,.25);border-radius:10px;color:var(--cacao);cursor:pointer;
}
.menu-toggle svg{width:20px;height:20px}
@media(min-width:960px){
  .menu{display:flex}
  .menu-toggle{display:none}
}
/* Menú mobile: el boton .menu-toggle togglea esta clase en <body> */
@media(max-width:959px){
  .menu{
    display:flex;flex-direction:column;align-items:flex-start;gap:2px;
    position:absolute;top:100%;left:0;right:0;background:var(--crema);
    padding:10px 24px 18px;box-shadow:0 12px 24px rgba(0,0,0,.12);border-bottom:1px solid var(--gris-linea);
    max-height:0;overflow:hidden;opacity:0;visibility:hidden;pointer-events:none;
    transition:max-height .3s var(--ease),opacity .2s ease,visibility 0s linear .3s;
  }
  .menu a{padding:12px 0;width:100%;border-top:1px solid var(--gris-linea)}
  .menu a:first-child{border-top:0}
  body.menu-abierto .menu{max-height:400px;opacity:1;visibility:visible;pointer-events:auto;transition:max-height .3s var(--ease),opacity .2s ease}
}

/* ---------- Hero ---------- */
.feat{position:relative;min-height:78vh;display:flex;align-items:flex-end;color:var(--crema);overflow:hidden}
.feat .bg-scroll{position:absolute;inset:0}
.feat .bg{position:absolute;inset:0;background-size:cover;background-position:center 40%}
/* Solo las .bg apiladas dentro de .bg-scroll (carrusel del hero de portada)
   arrancan invisibles a la espera de .is-active — el .bg suelto de Reservá
   y de la banda CTA final (una sola imagen fija, sin carrusel) tiene que
   verse siempre, así que no hereda el opacity:0 de acá. */
.feat .bg-scroll .bg{opacity:0;transition:opacity 1.6s var(--ease)}
.feat .bg-scroll .bg.is-active{opacity:1}
@media(prefers-reduced-motion:reduce){.feat .bg-scroll .bg{transition:none}}
.feat .scrim{position:absolute;inset:0;background:linear-gradient(180deg, rgba(36,26,17,.59) 0%, rgba(36,26,17,.57) 40%, rgba(36,26,17,.75) 100%)}
.feat .inner{position:relative;z-index:2;padding:52px 24px;max-width:var(--wrap);margin:0 auto;width:100%}
.feat .eyebrow{color:var(--naranja-claro);display:block;max-width:36ch}
.feat h1{font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,6vw,4.2rem);line-height:1.05;letter-spacing:-.015em;max-width:23ch;margin:16px 0 0;text-shadow:0 2px 30px rgba(36,26,17,.6)}
/* Piso extra angosto (celulares muy chicos, ~320px): 1.9rem ya no entra en
   2 líneas con "Vení a sorprenderte" — bajamos el piso solo ahí. */
@media(max-width:340px){.feat h1{font-size:1.55rem}}
.feat h1 em{font-style:italic;color:var(--naranja-claro)}
.feat p{max-width:54ch;color:rgba(247,240,227,.92);font-size:clamp(1rem,1.5vw,1.16rem);margin-top:16px;text-shadow:0 1px 16px rgba(36,26,17,.75)}
.feat .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.feat--chico{min-height:44vh}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);font-weight:500;font-size:.96rem;padding:13px 22px;border-radius:100px;cursor:pointer;border:1px solid transparent;transition:transform .2s var(--ease),background .2s,box-shadow .2s,color .2s,border-color .2s}
.btn svg{width:18px;height:18px}
.btn-primary{background:var(--naranja);color:var(--cacao)}
.btn-primary:hover{transform:translateY(-2px);background:var(--naranja-claro);box-shadow:0 6px 16px rgba(36,26,17,.18)}
.btn-ghost{background:rgba(247,240,227,.12);color:var(--crema);border-color:rgba(247,240,227,.4)}
.btn-ghost:hover{background:rgba(247,240,227,.22);transform:translateY(-2px)}
.btn-contorno{background:transparent;border-color:var(--marron-soft);color:var(--cacao)}
.btn-contorno:hover{background:var(--cacao);border-color:var(--cacao);color:var(--crema);transform:translateY(-2px)}

/* ---------- Layout revista ---------- */
.blog{padding:clamp(48px,7vw,84px) 0}
.grid{display:grid;gap:52px;grid-template-columns:1fr}
@media(min-width:960px){.grid{grid-template-columns:minmax(0,1fr) 320px;gap:56px}}
.post{margin-bottom:60px}
.post:last-child{margin-bottom:0}
.kicker{margin-bottom:12px}
.post h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.6rem,3.3vw,2.4rem);line-height:1.1;letter-spacing:-.01em}
.post h2 em{font-style:italic;color:var(--verde-hondo)}
.post-lead{color:var(--marron);font-size:1.08rem;margin-top:14px;max-width:62ch}
.post p.body{margin-top:16px;color:var(--cacao);max-width:64ch}
.post p.body + p.body{margin-top:12px}
.divider{height:1px;background:rgba(99,76,66,.24);margin:48px 0;border:0}
.figure{border-radius:var(--r);overflow:hidden;margin-top:24px;background:var(--marron);position:relative}
.figure img{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in}
.figure.wide{aspect-ratio:21/9}
.figure.tall{aspect-ratio:4/3}
.figure::after,.gal a::after{content:"";position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:100px;background:rgba(36,26,17,.55);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F9F9F9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3M11 8v6M8 11h6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:16px;opacity:0;transition:opacity .2s var(--ease);pointer-events:none}
.figure:hover::after,.gal a:hover::after{opacity:1}

.pull{margin:22px 0 0;padding:16px 20px;background:var(--crema);border:1px solid rgba(99,76,66,.14);border-left:2px solid rgba(99,76,66,.3);border-radius:0 var(--r) var(--r) 0}
.pull p{font-family:var(--serif);font-style:italic;font-size:clamp(.95rem,1.3vw,1.05rem);line-height:1.45;color:var(--marron-soft);max-width:50ch}

.gal{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:24px}
@media(min-width:620px){.gal{grid-template-columns:repeat(3,1fr)}}
.gal a{border-radius:12px;overflow:hidden;aspect-ratio:1;display:block;background:var(--marron);position:relative;cursor:zoom-in}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.gal a:hover img{transform:scale(1.06)}

.amen-icons{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.amen-icons span{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-size:.86rem;font-weight:500;color:var(--cacao);background:var(--verde-claro);padding:8px 14px;border-radius:100px}
.amen-cols{display:grid;gap:26px;grid-template-columns:1fr;margin-top:28px}
@media(min-width:620px){.amen-cols{grid-template-columns:1fr 1fr}}
.amen-cols h3{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--verde-hondo);margin-bottom:14px;font-weight:500}
.amen-cols ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.amen-cols li{display:flex;align-items:flex-start;gap:10px;font-size:.98rem;color:var(--marron-soft)}
.amen-cols li small{display:block;font-size:.8rem;color:var(--marron-soft);opacity:.8;margin-top:2px}
.amen-cols svg{width:15px;height:15px;color:var(--marron);flex-shrink:0;margin-top:6px}

/* ---------- FAQ visible (#faq) ---------- */
.faq{display:flex;flex-direction:column;gap:16px;margin-top:26px}
.faq__item{padding:18px 20px;background:var(--crema);border:1px solid rgba(99,76,66,.16);border-radius:var(--r)}
.faq__item h3{font-family:var(--serif);font-weight:500;font-size:1.08rem;color:var(--cacao);margin-bottom:8px}
.faq__item p{color:var(--marron-soft);font-size:.96rem;max-width:60ch}

/* ---------- "Qué hacer cerca": ruta de mojones (reemplaza a .loc-grid) ----------
   Portado de casaserena-que-hacer-ruta.html (diseño ya revisado). El wrapper
   real es el .post/.grid existente, no el .ruta__wrap propio del standalone.
   --linea/--linea-fuerte/--hairline son derivados nuevos, mismas rgba que
   ya usa el resto del sitio (rgba(99,76,66,…) = --marron) para hairlines. */
:root{
  --linea: rgba(99,76,66,.22);
  --linea-fuerte: rgba(99,76,66,.4);
  --hairline: rgba(99,76,66,.16);
}

.ruta__filtros{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:32px}
.ruta__filtros-label{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--marron-soft);margin-right:2px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-family:var(--display);font-weight:500;font-size:.84rem;letter-spacing:.01em;padding:9px 17px;border:1px solid rgba(99,76,66,.32);border-radius:100px;background:var(--crema);color:var(--marron);cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease)}
.chip:hover{border-color:var(--naranja);color:var(--cacao);transform:translateY(-1px)}
.chip:active{transform:translateY(0) scale(.97)}
.chip[aria-pressed="true"]{background:var(--naranja);border-color:var(--naranja);color:var(--cacao)}
.chip[aria-pressed="true"]:hover{background:var(--naranja-claro);border-color:var(--naranja-claro)}

.ruta__conteo{font-family:var(--mono);font-size:.8rem;color:var(--marron-soft);margin:16px 0 4px;min-height:1.3em}

.eje{margin-top:20px;border-top:1px solid var(--linea)}

.parada,.aca,.rumbo{display:grid;grid-template-columns:80px 32px 1fr;align-items:start}

.rumbo{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--marron-soft)}
.rumbo__ruta{position:relative;align-self:stretch}
.rumbo__ruta::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--linea);transform:translateX(-50%)}
.rumbo:first-child .rumbo__ruta::before{top:50%}
.rumbo__texto{display:flex;align-items:center;gap:7px;padding:18px 0 14px}
.rumbo__texto svg{width:13px;height:13px;flex-shrink:0;opacity:.75}

.parada{border-bottom:1px solid var(--linea);transition:background .25s var(--ease),box-shadow .25s var(--ease)}
.parada:hover{background:var(--crema)}
.parada[open]{background:var(--crema);box-shadow:inset 3px 0 0 var(--naranja)}
.parada--oculta{opacity:.24}

.parada__km{font-family:var(--mono);font-size:.76rem;color:var(--marron-soft);padding:22px 12px 0 0;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.parada__km b{font-weight:500;color:var(--cacao)}
.parada__km span{opacity:.68;margin-left:3px}

.parada__ruta{position:relative;align-self:stretch}
.parada__ruta::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--linea);transform:translateX(-50%)}
.parada__punto{position:absolute;left:50%;top:28px;width:7px;height:7px;border-radius:50%;background:var(--marron-soft);transform:translate(-50%,-50%);transition:background .2s var(--ease),transform .2s var(--ease)}
.parada[open] .parada__punto,.parada:hover .parada__punto{background:var(--naranja);transform:translate(-50%,-50%) scale(1.6)}

.parada__cuerpo{min-width:0}
.parada__h{margin:0;font-weight:inherit}
.parada__btn{display:flex;align-items:baseline;gap:12px;width:100%;background:none;border:0;padding:18px 0 20px;margin:0;cursor:pointer;text-align:left;color:inherit;font:inherit}
.parada__nombre{font-family:var(--serif);font-size:clamp(1.1rem,1.6vw,1.28rem);font-weight:500;color:var(--cacao);line-height:1.2}
.parada__resumen{font-family:var(--mono);font-size:.72rem;color:var(--marron-soft);letter-spacing:.02em;margin-left:auto;padding-left:16px;white-space:nowrap;align-self:center}
.parada__mas{font-family:var(--sans);font-size:1.15rem;color:var(--marron-soft);line-height:1;transition:transform .3s var(--ease),color .2s var(--ease);align-self:center;flex-shrink:0}
.parada[open] .parada__mas{transform:rotate(135deg);color:var(--naranja)}

.parada__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.parada[open] .parada__panel{grid-template-rows:1fr}
.parada__panel-inner{overflow:hidden}
.parada__inner{padding:2px 0 30px}

.acts{list-style:none;margin:0;padding:0;display:grid;gap:1px;grid-template-columns:repeat(auto-fill,minmax(226px,1fr));background:var(--hairline);border:1px solid var(--hairline);border-radius:var(--r);overflow:hidden}
.act{background:var(--crema);padding:13px 15px;transition:opacity .25s var(--ease),filter .25s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease)}
.act:hover{background:#fff}
.act--oculta{opacity:.32;filter:saturate(.5)}
/* verde-hondo, no naranja: mismo criterio que .loc .h .km / .eyebrow / .link-mapa
   de más abajo — naranja sobre fondo claro (~2:1) no pasa WCAG AA para texto,
   verde-hondo sí (es el acento "seguro" que el sitio ya usa sobre --crema) */
.act--match{box-shadow:inset 2px 0 0 var(--verde-hondo)}
.act__nombre{display:block;font-size:.92rem;color:var(--cacao);line-height:1.35}
.act__tag{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;color:var(--marron-soft);margin-top:5px;transition:color .2s var(--ease)}
.act--match .act__tag{color:var(--verde-hondo)}

.fotos{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0 0}
.fotos img{width:100%;height:132px;object-fit:cover;border-radius:calc(var(--r) - 4px);background:var(--marron);display:block;transition:transform .5s var(--ease)}
.fotos a{display:block;overflow:hidden;border-radius:calc(var(--r) - 4px);cursor:zoom-in}
.fotos a:hover img{transform:scale(1.06)}

.aca{border-top:1px solid var(--cacao);border-bottom:1px solid var(--cacao);background:var(--cacao);color:var(--crema);border-radius:var(--r);margin:2px 0}
.aca__km{font-family:var(--mono);font-size:.76rem;text-align:right;padding:22px 12px 0 0;color:rgba(249,249,249,.55);font-variant-numeric:tabular-nums}
.aca__ruta{position:relative;align-self:stretch}
.aca__ruta::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(249,249,249,.28);transform:translateX(-50%)}
.aca__punto{position:absolute;left:50%;top:29px;width:11px;height:11px;background:var(--naranja);transform:translate(-50%,-50%) rotate(45deg);border-radius:2px;animation:pulso 2.6s var(--ease) infinite}
@keyframes pulso{
  0%{box-shadow:0 0 0 0 rgba(252,160,59,.5)}
  70%{box-shadow:0 0 0 11px rgba(252,160,59,0)}
  100%{box-shadow:0 0 0 0 rgba(252,160,59,0)}
}
.aca__texto{padding:20px 0 22px}
.aca__nombre{margin:0;font-family:var(--serif);font-size:clamp(1.3rem,2vw,1.55rem);font-weight:600;font-style:italic;color:var(--crema);line-height:1.15}
.aca__nota{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--naranja-claro);margin-top:5px}
.aca__lugares{list-style:none;display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:12px}
.aca__lugares li{position:relative;padding-left:14px;font-size:.86rem;color:rgba(249,249,249,.85)}
.aca__lugares li::before{content:"";position:absolute;left:0;top:.5em;width:5px;height:5px;border-radius:50%;background:var(--naranja);transform:translateY(-50%)}

@media(max-width:640px){
  .parada,.aca,.rumbo{grid-template-columns:52px 24px 1fr}
  .parada__km,.aca__km{font-size:.68rem;padding-right:8px}
  .parada__nombre{font-size:1.05rem}
  .parada__resumen{display:none}
  .parada__btn{padding:15px 0 17px;gap:8px}
  .acts{grid-template-columns:1fr}
  .fotos img{height:104px}
  .aca__nombre{font-size:1.2rem}
}

@media(prefers-reduced-motion:reduce){
  .chip,.parada,.parada__punto,.parada__mas,.parada__panel,.act,.fotos img{transition:none}
  .aca__punto{animation:none}
}

/* ---------- Aside / widgets ---------- */
.aside{display:flex;flex-direction:column;gap:22px}
@media(min-width:960px){.aside{position:sticky;top:calc(var(--header-alto) + 24px);align-self:start}}
.widget{background:var(--crema);border:1px solid rgba(99,76,66,.16);border-radius:var(--r);padding:24px}
.widget.reservar{background:var(--cacao);border-color:transparent;color:var(--crema)}
.widget h3{font-family:var(--display);font-size:22px;margin-bottom:10px}
.widget p{color:var(--marron-soft);font-size:15.5px;margin-bottom:0}
.widget .etiqueta{margin-bottom:10px}
.widget.reservar .etiqueta{color:var(--naranja-claro)}
.widget.reservar .eyebrow{color:var(--naranja-claro)}
.widget.reservar h3{color:var(--crema)}
.widget.reservar p{color:rgba(251,250,246,.82);margin-bottom:20px}
.widget.reservar .btn{width:100%;justify-content:center}
.widget.reservar .modulo__tel{display:block;margin-top:14px;text-align:center;font-family:var(--mono);font-size:13.5px;letter-spacing:.4px;color:rgba(251,250,246,.7)}
.widget.reservar :focus-visible{outline-color:var(--crema)}
.lista-distancias{list-style:none}
.lista-distancias li{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid rgba(99,76,66,.16);font-size:15px}
.lista-distancias li:first-child{border-top:0;padding-top:0}
.lista-distancias .km{font-family:var(--mono);font-size:13.5px;color:var(--verde-hondo)}
.info-contacto{display:flex;flex-direction:column;gap:16px;margin-bottom:16px}
.info-contacto li{display:flex;gap:10px;align-items:flex-start;font-size:15px;list-style:none}
.info-contacto svg{width:16px;height:16px;color:var(--marron);flex-shrink:0;margin-top:3px}
.mapa{border-radius:12px;overflow:hidden;border:1px solid rgba(99,76,66,.2)}
.mapa iframe{width:100%;height:150px;border:0;display:block}
.link-mapa{display:inline-block;margin-top:12px;font-size:15px;font-weight:700;color:var(--verde-hondo);text-decoration:underline}

/* ---------- Calendario de Reservá (selector de rango, sin datos en vivo) ---------- */
.reserva-calendario{background:var(--crema);border:1px solid rgba(99,76,66,.16);border-radius:var(--r);padding:24px;margin-top:22px}
.cal-encabezado{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.cal-nav{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:1px solid rgba(99,76,66,.24);background:var(--beige);color:var(--cacao);cursor:pointer;transition:background .2s ease,opacity .2s ease}
.cal-nav svg{width:18px;height:18px}
.cal-nav:hover:not(:disabled){background:var(--naranja-claro)}
.cal-nav:disabled{opacity:.35;cursor:not-allowed}
.cal-meses{display:grid;grid-template-columns:1fr;gap:28px}
@media(min-width:640px){.cal-meses{grid-template-columns:1fr 1fr}}
.cal-mes__titulo{text-align:center;font-family:var(--serif);font-size:1.05rem;margin-bottom:12px;text-transform:capitalize}
.cal-semana{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:6px}
.cal-semana span{text-align:center;font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;color:var(--marron-soft);text-transform:uppercase}
.cal-dias{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-vacio{aspect-ratio:1}
.dia{
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  border:1px solid transparent;border-radius:8px;background:transparent;color:var(--cacao);
  font-family:var(--sans);font-size:.88rem;cursor:pointer;transition:background .15s ease,color .15s ease;
}
.dia:hover:not(:disabled):not(.dia--inicio):not(.dia--fin){background:var(--beige);border-color:rgba(99,76,66,.2)}
.dia--pasado{color:var(--marron-soft);opacity:.35;cursor:not-allowed;text-decoration:line-through}
.dia--rango{background:rgba(252,160,59,.18);border-radius:0}
.dia--inicio,.dia--fin{background:var(--naranja);color:var(--cacao);font-weight:700;position:relative}
.dia--inicio{border-radius:8px 0 0 8px}
.dia--fin{border-radius:0 8px 8px 0}
.dia--inicio:only-child,.dia--inicio.dia--fin{border-radius:8px}
.dia--inicio::after,.dia--fin::after{content:"";position:absolute;bottom:4px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:var(--cacao)}
.cal-pie{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:16px;flex-wrap:wrap}
.cal-resumen{font-size:.9rem;color:var(--marron)}
.cal-limpiar{background:none;border:0;padding:0;font-size:.84rem;color:var(--verde-hondo);text-decoration:underline;cursor:pointer}

/* ---------- Formulario de contacto ---------- */
.formulario{background:var(--crema);padding:32px;border-radius:var(--r);border:1px solid rgba(99,76,66,.16)}
.campo{margin-bottom:20px}
.campo label{display:block;font-family:var(--display);font-size:14px;font-weight:700;letter-spacing:.3px;margin-bottom:8px;color:var(--cacao)}
.campo input,.campo textarea{
  width:100%;padding:13px 15px;border:1px solid rgba(99,76,66,.28);border-radius:10px;
  font-family:var(--sans);font-size:16px;background:var(--beige);color:var(--cacao);
  transition:border-color .3s ease,background .3s ease;
}
.campo input:focus,.campo textarea:focus{border-color:var(--naranja);background:var(--crema);outline:none}
.campo-fila{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:560px){.campo-fila{grid-template-columns:1fr}}
.campo__ayuda{display:block;margin-top:7px;font-size:13.5px;color:var(--marron-soft);line-height:1.5}
.formulario__exito{background:var(--crema);border:1px solid rgba(99,76,66,.16);border-radius:var(--r);padding:40px 32px;text-align:center}
.formulario__exito[hidden]{display:none}
.formulario__exito svg{width:42px;height:42px;color:var(--verde-hondo);margin:0 auto 18px}
.formulario__exito p{color:var(--cacao);font-size:17px;line-height:1.6}
.formulario__error{margin-top:14px;padding:13px 16px;border-radius:10px;border:1px solid #c0392b;background:#fdecea;color:#922b21;font-size:14.5px;line-height:1.5}
.formulario__error[hidden]{display:none}

/* ---------- Banda CTA final ---------- */
.band-cta{position:relative;color:var(--crema);text-align:center;padding:clamp(80px,12vw,150px) 24px;overflow:hidden;background:var(--cacao-2)}
.band-cta .bg{position:absolute;inset:0;background-size:cover;background-position:center}
.band-cta .scrim2{position:absolute;inset:0;background:linear-gradient(180deg, rgba(36,26,17,.8) 0%, rgba(36,26,17,.92) 100%)}
.band-cta .inner{position:relative;z-index:1;max-width:640px;margin:0 auto}
.band-cta .eyebrow{color:var(--naranja-claro)}
.band-cta h2{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,4.8vw,3.4rem);line-height:1.05;margin:16px 0 0}
@media(max-width:340px){.band-cta h2{font-size:1.6rem}}
.band-cta h2 em{font-style:italic;color:var(--naranja-claro)}
.band-cta p{color:rgba(251,250,246,.92);margin:18px auto 30px;max-width:44ch;font-size:1.08rem}
.band-cta .tel{margin-top:20px;font-family:var(--mono);font-size:.8rem;letter-spacing:.05em;color:rgba(251,250,246,.75)}
.band-cta :focus-visible{outline-color:var(--crema)}

/* ---------- Footer ----------
   2026-08-27: pasó de --cacao-2 (marrón oscuro) a --gris-piedra-claro (gris
   piedra claro) — pedido del dueño. Fondo claro = paleta de texto/acentos
   invertida respecto de la versión oscura anterior: texto oscuro (--marron/
   --cacao, como el resto del sitio sobre fondo claro), logo oscuro
   (logo-wordmark.svg, no la variante -claro) y acento --verde-hondo en vez
   de --naranja-claro (mismo criterio ya usado en el nav — naranja sobre
   fondo claro no pasa WCAG AA como texto, verde-hondo sí). */
.foot{background:var(--gris-piedra-claro);color:var(--marron);padding:54px 0 38px}
.foot-grid{display:grid;gap:32px;grid-template-columns:1fr}
@media(min-width:700px){.foot-grid{grid-template-columns:1.5fr 1fr 1fr}}
.foot-logo{height:32px;width:auto;margin-bottom:14px}
.foot p{font-size:.9rem;max-width:32ch}
.foot h4{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--verde-hondo);margin-bottom:14px;font-weight:500}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.foot ul a{font-size:.9rem;transition:color .2s}
.foot ul a:hover{color:var(--verde-hondo)}
.foot-bottom{margin-top:44px;padding-top:22px;border-top:1px solid var(--gris-linea);display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;font-size:.76rem;color:var(--marron-soft)}

/* ---------- Reveal al scroll ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---------- Split text: entrada palabra por palabra ----------
   Solo en el titulo del hero (carga) y el cierre final (scroll) — no en
   cada encabezado, para no sumar movimiento a una pagina que ya tiene
   scroll-reveal por seccion. */
.split-text .word{display:inline-block;opacity:0;filter:blur(6px);transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease),filter .6s var(--ease)}
.split-text.is-visible .word{opacity:1;filter:blur(0);transform:none}

/* ---------- Tilt fotografico: leve inclinacion 3D siguiendo el cursor ---------- */
.figure img,.gal img{transform-origin:center}

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

/* ---------- Lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:rgba(24,17,11,.92);padding:min(6vh,60px) min(7vw,70px);opacity:0;transition:opacity .25s var(--ease)}
.lightbox[hidden]{display:none}
.lightbox.is-visible{opacity:1}
.lightbox figure{margin:0;max-width:min(92vw,1100px);max-height:88vh;display:flex;flex-direction:column;align-items:center;gap:14px}
.lightbox-img{max-width:100%;max-height:78vh;width:auto;height:auto;object-fit:contain;border-radius:10px;background:var(--marron);box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lightbox-caption{font-family:var(--sans);font-size:.9rem;color:var(--crema);text-align:center;max-width:60ch}
.lightbox-cerrar{position:absolute;top:18px;right:18px;width:44px;height:44px;border-radius:100px;background:rgba(249,249,249,.1);color:var(--crema);display:flex;align-items:center;justify-content:center;transition:background .2s}
.lightbox-cerrar:hover{background:rgba(249,249,249,.2)}
.lightbox-cerrar svg{width:20px;height:20px}
.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:100px;background:rgba(249,249,249,.1);color:var(--crema);display:flex;align-items:center;justify-content:center;transition:background .2s}
.lightbox-nav:hover{background:rgba(249,249,249,.2)}
.lightbox-nav svg{width:22px;height:22px}
.lightbox-prev{left:min(2vw,18px)}
.lightbox-next{right:min(2vw,18px)}
body.lightbox-abierto{overflow:hidden}

/* ---------- Easter egg del atardecer ----------
   demo.js activa [data-momento="atardecer"] en <html> SOLO cuando
   /api/clima trajo sunset_unix y Date.now() cae en la ventana real
   [-40min, +25min] alrededor de la puesta de sol de hoy — nunca por un
   horario asumido. Re-declara ÚNICAMENTE tokens de color (--naranja/
   --naranja-claro, un poco más rojizos/cálidos que el naranja de marca),
   nada de layout/tamaño/tipografía. Contraste verificado (WCAG AA, texto
   normal ≥4.5:1) contra --cacao y --cacao-2, los dos fondos oscuros donde
   se usan como texto o como fondo de botón:
     --naranja sobre --cacao (texto de .btn-primary/.chip activo/.dia
       seleccionado): 6.2:1 (era 7.2:1)
     --naranja-claro sobre --cacao (texto de .widget.reservar): 7.4:1 (era 8.6:1)
     --naranja-claro sobre --cacao-2 (eyebrows sobre scrim oscuro): 8.6:1
       (era 9.9:1)
   Las transiciones van en las propiedades finales (color/background),
   nunca en la custom property de :root — animar custom properties no
   tiene soporte consistente entre navegadores. El footer quedó afuera de
   este viraje desde que pasó a fondo claro (--verde-hondo, no --naranja). */
:root[data-momento="atardecer"]{
  --naranja:#F98B3D;
  --naranja-claro:#FAA370;
}
.feat .eyebrow,.feat h1 em,.band-cta .eyebrow,.band-cta h2 em,
.widget.reservar .etiqueta,.widget.reservar .eyebrow{transition:color .6s ease}
/* .btn/.chip/.dia ya traen transition:background/color propio (para sus
   estados hover/activo) — ese mismo transition cubre el viraje de paleta
   sin declarar nada nuevo ahí. */

/* ---------- Easter egg de la noche ----------
   demo.js activa [data-momento="noche"] en <html> con la misma fuente de
   datos que el atardecer (sunset_unix/sunrise_unix de /api/clima), fuera
   de la ventana del atardecer y fuera de la ventana [-40min] del amanecer.
   Foto de fondo del hero de portada (#top) + viraje de --naranja/--naranja-
   claro a azulado (mismo mecanismo de tokens que el atardecer de arriba,
   mismos selectores de texto ya con transition), más un tinte azul sobre
   el scrim del hero (por defecto es un marrón --cacao-2). Contraste
   verificado (WCAG AA, texto normal ≥4.5:1) contra los mismos fondos que
   el atardecer:
     --naranja sobre --cacao (texto de .btn-primary/.chip activo/.dia
       seleccionado): 5.5:1
     --naranja-claro sobre --cacao (texto de .widget.reservar): 8.2:1
     --naranja-claro sobre --cacao-2 (eyebrows sobre scrim oscuro): 9.5:1
   !important porque #top .bg trae background-image/-position inline en el
   HTML (mismo patrón que el resto de los fondos del sitio) — un selector
   de clases nunca le gana a un inline style sin esto. */
:root[data-momento="noche"]{
  --naranja:#6FA0DE;
  --naranja-claro:#9DC4F5;
}
:root[data-momento="noche"] #top .bg{
  background-image:url('/images/real/cielo-estrellado.jpg') !important;
  background-position:50% 30% !important;
}
:root[data-momento="noche"] #top .scrim{
  background:linear-gradient(180deg, rgba(9,16,32,.74) 0%, rgba(9,16,32,.72) 40%, rgba(9,16,32,.92) 100%);
}

@media(prefers-reduced-motion:reduce){
  .feat .eyebrow,.feat h1 em,.band-cta .eyebrow,.band-cta h2 em,
  .widget.reservar .etiqueta,.widget.reservar .eyebrow{transition:none}
}
@media(max-width:640px){.lightbox{padding:14vh 10px 8vh}.lightbox-nav{width:40px;height:40px}.lightbox-cerrar{top:12px;right:12px}}