/* =========================================================
   TURISMO CONGUILLÍO — v2
   Diseño atemporal: papel, tinta, musgo. Tipografía de libro,
   mucho aire, jerarquía clara. Pensado para leerse fácil,
   no para impresionar a primera vista.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&family=Public+Sans:wght@400;500;600;700&display=swap');

:root{
  --papel: #F2F5F5;
  --tarjeta: #FFFFFF;
  --tinta: #21262A;
  --tinta-70: rgba(33,38,42,.68);
  --tinta-50: rgba(33,38,42,.5);
  --musgo: #34503F;
  --musgo-osc: #1F3327;
  --lago: #2E5A76;
  --oro: #A9822E;
  --linea: rgba(33,38,42,.14);

  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-body: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --maxw: 1080px;
  --pad: clamp(20px, 5vw, 56px);
  --radius: 4px;
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; display:block; }
a{ color: var(--musgo-osc); }

h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.18;
  margin: 0 0 .45em;
  color: var(--tinta);
  letter-spacing: 0;
}
h1{ font-weight: 500; }

p{ margin:0 0 1.1em; max-width: 62ch; }
.lede{ font-size: 1.2rem; color: var(--tinta-70); font-family: var(--font-display); font-style: italic; font-weight: 400; }

.label{
  font-family: var(--font-body); font-weight:600; font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase; color: var(--musgo-osc);
}

a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
  outline: 3px solid var(--oro); outline-offset:3px;
}
.skip-link{ position:absolute; left:-999px; background:var(--tinta); color:var(--papel); padding:.8em 1.2em; z-index:200; }
.skip-link:focus{ left:1rem; top:1rem; }

.container{ max-width: var(--maxw); margin:0 auto; padding:0 var(--pad); }
.section{ padding: clamp(48px,8vw,88px) 0; }
.section--tight{ padding: clamp(32px,5vw,56px) 0; }
.section--dark{ background: var(--musgo-osc); color: var(--papel); }
.section--dark h2, .section--dark h3{ color: var(--papel); }
.section--dark .label{ color: #D8C787; }
.section--dark p{ color: rgba(246,241,231,.82); }

.rule{ border:none; border-top:1px solid var(--linea); margin: 0; }
.rule--thick{ border-top:2px solid var(--tinta); }
.header-rule{ display:flex; align-items:center; gap:16px; margin-bottom: 2em; }
.header-rule .label{ white-space:nowrap; }
.header-rule::after{ content:''; flex:1; border-top:1px solid var(--linea); }

.center{ text-align:center; }
.max-prose{ max-width: 62ch; }
.mx-auto{ margin-left:auto; margin-right:auto; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.55em;
  font-family: var(--font-body); font-weight:600; font-size:.95rem;
  padding: .85em 1.6em; border-radius: var(--radius); text-decoration:none;
  border: 1.5px solid var(--musgo-osc);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn--primary{ background: var(--musgo-osc); border-color: var(--musgo-osc); color: var(--papel); }
.btn--primary:hover{ background: var(--musgo); border-color: var(--musgo); }
.btn--ghost{ background:transparent; color: var(--musgo-osc); }
.btn--ghost:hover{ background: var(--musgo-osc); color: var(--papel); }
.section--dark .btn--ghost{ color: var(--papel); border-color: rgba(246,241,231,.5); }
.section--dark .btn--ghost:hover{ background: var(--papel); color: var(--musgo-osc); }

.pill{
  display:inline-flex; align-items:center; gap:.5em;
  font-size:.85rem; padding:.4em .85em; border:1px solid var(--linea);
  border-radius: 999px; background: var(--tarjeta);
}
.pill--star{ color: var(--oro); border-color: rgba(169,130,46,.4); font-weight:600; }

/* ---------- nav ---------- */
.nav{ border-bottom:1px solid var(--linea); background: var(--papel); position:sticky; top:0; z-index:100; }
.nav .container{ display:flex; align-items:center; justify-content:space-between; padding: 20px var(--pad); }
.brand{ display:flex; align-items:center; gap:.7em; text-decoration:none; color:var(--tinta); }
.brand svg{ width:30px; height:30px; flex:none; }
.brand img{ width:38px; height:38px; flex:none; object-fit:contain; }
.brand-name{ font-family: var(--font-display); font-weight:600; font-size:1.3rem; }

.nav-links{ display:flex; align-items:center; gap:34px; list-style:none; margin:0; padding:0; }
.nav-links a{ color: var(--tinta); text-decoration:none; font-size:.98rem; }
.nav-links a:hover{ color: var(--musgo-osc); text-decoration: underline; text-underline-offset:4px; }
.nav-actions{ display:flex; align-items:center; gap:18px; }
.nav-toggle{ display:none; background:none; border:none; cursor:pointer; }
.nav-toggle span{ display:block; width:22px; height:2px; background:var(--tinta); margin:5px 0; }

@media (max-width: 840px){
  .nav-links{
    position:fixed; inset:69px 0 0 0; background:var(--papel); flex-direction:column; align-items:flex-start;
    padding: 26px var(--pad); gap:22px; transform:translateY(-6px); opacity:0; pointer-events:none;
    transition: opacity .18s ease, transform .18s ease; border-top:1px solid var(--linea);
  }
  .nav-links a{ font-size:1.25rem; }
  .nav.is-open .nav-links{ opacity:1; pointer-events:auto; transform:none; }
  .nav-toggle{ display:block; }
  .nav-actions .btn-label-long{ display:none; }
}

/* ---------- hero (texto arriba, foto completa debajo — nunca se recorta) ---------- */
.hero-plain{ padding: clamp(40px,7vw,72px) 0 12px; }
.hero-plain h1{ max-width:20ch; }

.hero-figure{ margin: 32px 0 0; }
.hero-figure img{
  width:100%; height:auto; display:block; border-radius: var(--radius);
  box-shadow: 0 1px 3px var(--linea);
}
.hero-figure figcaption{ margin-top:10px; font-size:.85rem; color: var(--tinta-50); }

/* foto contenida y con proporción segura para bloques secundarios (no es la portada) */
.figure-safe{ aspect-ratio: 3/2; overflow:hidden; border-radius: var(--radius); }
.figure-safe img{ width:100%; height:100%; object-fit:cover; }
.crumb{ font-size:.85rem; color: var(--tinta-50); margin-bottom:20px; }
.crumb a{ color: var(--tinta-50); text-decoration:none; }
.crumb a:hover{ text-decoration:underline; }

/* ---------- grid ---------- */
.grid{ display:grid; gap:32px; }
.grid--2{ grid-template-columns: repeat(2,1fr); }
.grid--3{ grid-template-columns: repeat(3,1fr); }
.grid--4{ grid-template-columns: repeat(4,1fr); }
@media (max-width:900px){ .grid--3{ grid-template-columns:1fr 1fr; } .grid--4{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .grid--2,.grid--3,.grid--4{ grid-template-columns:1fr; } }

/* ---------- cabin cards ---------- */
.cabin-card{ display:flex; flex-direction:column; }
.cabin-card figure{ margin:0 0 18px; aspect-ratio: 4/3; overflow:hidden; border-radius: var(--radius); background:var(--linea); }
.cabin-card img{ width:100%; height:100%; object-fit:cover; }
.cabin-card h3{ font-size:1.3rem; margin-bottom:.25em; }
.cabin-card .meta{ font-size:.85rem; color: var(--tinta-50); margin-bottom:.6em; }
.cabin-card p{ font-size:.98rem; color: var(--tinta-70); }
.cabin-card .more{ font-weight:600; text-decoration:none; color: var(--musgo-osc); border-bottom:1px solid var(--musgo-osc); align-self:flex-start; }

/* ---------- feature list ---------- */
.feature-list{ display:grid; grid-template-columns: repeat(2,1fr); gap: 28px 40px; }
@media (max-width:640px){ .feature-list{ grid-template-columns:1fr; } }
.feature-list h3{ font-size:1.1rem; }
.feature-list p{ font-size:.98rem; color: var(--tinta-70); margin:0; }
.section--dark .feature-list p{ color: rgba(246,241,231,.78); }

/* ---------- amenities ---------- */
.amenities{ list-style:none; margin:0; padding:0; columns:2; column-gap:32px; }
@media (max-width:600px){ .amenities{ columns:1; } }
.amenities li{ break-inside: avoid; padding: .5em 0; border-bottom:1px solid var(--linea); font-size:.98rem; }

/* ---------- gallery / lightbox ----------
   Grid responsivo: funciona igual de bien con 4 fotos o con 7,
   sin depender de una cantidad fija de columnas/filas. */
.gallery{ display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap:10px; }
.gallery button{ padding:0; border:none; cursor:zoom-in; overflow:hidden; border-radius:var(--radius); background:none; aspect-ratio: 4/3; }
.gallery img{ width:100%; height:100%; object-fit:cover; }
@media (max-width: 720px){
  .gallery{ grid-template-columns: 1fr 1fr; }
}
.lightbox{ position:fixed; inset:0; background:rgba(20,19,16,.94); display:none; align-items:center; justify-content:center; z-index:300; padding:5vh 5vw; }
.lightbox.is-open{ display:flex; }
.lightbox img{ max-height:90vh; max-width:90vw; border-radius: var(--radius); }
.lightbox-close{ position:absolute; top:20px; right:24px; background:none; border:1px solid rgba(246,241,231,.5); color:var(--papel); padding:.5em .9em; cursor:pointer; border-radius:var(--radius); }

/* ---------- quote ---------- */
.quote{ font-family: var(--font-display); font-style:italic; font-size:1.4rem; line-height:1.5; max-width:44ch; color:var(--tinta); }
.quote cite{ display:block; font-style:normal; font-family:var(--font-body); font-size:.85rem; color:var(--tinta-50); margin-top:14px; }

/* ---------- footer ---------- */
.footer{ background: var(--tinta); color: var(--papel); padding: 56px 0 28px; }
.footer a{ color: var(--papel); }
.footer-grid{ display:grid; grid-template-columns: 1.3fr 1fr 1fr; gap:36px; margin-bottom:40px; }
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr; gap:28px; } }
.footer h4{ font-family:var(--font-body); font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:#D8C787; margin-bottom:1em; }
.footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6em; }
.footer ul a{ text-decoration:none; opacity:.88; }
.footer ul a:hover{ opacity:1; text-decoration:underline; }
.footer-bottom{ border-top:1px solid rgba(246,241,231,.15); padding-top:22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.82rem; opacity:.7; }

/* ---------- misc ---------- */
.two-col{ display:grid; grid-template-columns: 1.3fr .7fr; gap:48px; align-items:start; }
@media (max-width:860px){ .two-col{ grid-template-columns:1fr; } }
.stack{ display:flex; flex-direction:column; gap:8px; }
.card{ background: var(--tarjeta); border:1px solid var(--linea); border-radius: var(--radius); padding:26px; }