/* ------------------------------------------------------------------
   Casa Rural Carmen Luna · styles.css
   Tema: Montaña (piedra, madera, pino, lago) — limpio, cálido, competitivo
   Mantiene compatibilidad con tu HTML existente.
-------------------------------------------------------------------*/

/* =Variables de tema */
:root{
  /* Colores base */
  --stone:#7f7567;              /* piedra templada */
  --wood:#8b5e3c;               /* madera envejecida */
  --pine:#284a3f;               /* verde pino (principal) */
  --sage:#759b7d;               /* verde salvia (acento) */
  --lake:#36678a;               /* azul embalse (links) */
  --cream:#f5efe6;              /* crema cálida (fondos) */
  --snow:#fbf9f6;               /* casi blanco para paneles */
  --ink:#1e2320;                /* texto */
  --muted:#6b6f6c;

  /* Estados */
  --success:#2c7a7b;
  --warn:#b7791f;

  /* Sombra, radios, contenedor */
  --shadow:0 12px 30px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04);
  --inner:inset 0 1px 0 rgba(255,255,255,.35);
  --radius:18px;
  --radius-lg:24px;
  --container:1120px;
  --space: clamp(12px, 2.2vw, 22px);

  /* Gradientes */
  --g-wood:linear-gradient(135deg, rgba(139,94,60,.18), rgba(139,94,60,.04));
  --g-pine:linear-gradient(135deg, rgba(40,74,63,.12), rgba(40,74,63,.04));
  --g-cream:linear-gradient(180deg, #faf6f0 0%, #f1eadf 100%);
}

/* =Reset y base tipográfica */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink); background:#fff; line-height:1.65;
  text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:Lora,Georgia,serif; line-height:1.24; margin:0 0 .6rem}
h1{font-size:clamp(28px,4.2vw,46px)}
h2{font-size:clamp(22px,2.6vw,32px)}
h3{font-size:clamp(18px,2vw,22px)}
p{margin:.4rem 0 1rem}
small,.fine{color:var(--muted); font-size:.94rem}
img{max-width:100%; border-radius:var(--radius)}
a{color:var(--lake); text-underline-offset:2px}

/* =Contenedor */
.container{max-width:var(--container); margin:0 auto; padding:0 var(--space)}

/* =Header */
.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(160%) blur(10px);
  background:rgba(255,255,255,.88);
  border-bottom:1px solid #eee;
}
.nav{display:flex; align-items:center; justify-content:space-between; height:68px}
.brand{
  font-weight:800; text-decoration:none; letter-spacing:.2px;
  color:var(--pine);
  font-family:Lora,Georgia,serif;
}
nav{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.nav-link{
  color:#3e423f; text-decoration:none; padding:8px 12px; border-radius:12px; transition:.2s;
}
.nav-link:hover{background:#f3f3f3}
.nav-link.active{background:rgba(40,74,63,.12); color:var(--pine)}
.nav .btn{margin-left:4px}

/* =Botones */
.btn{
  display:inline-block; padding:10px 16px; border-radius:14px; text-decoration:none;
  border:1px solid #dcdcdc; transition:transform .08s ease, box-shadow .25s, background .25s, color .25s;
  box-shadow:var(--inner);
}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--pine); border-color:var(--pine); color:#fff; box-shadow:var(--shadow)}
.btn.primary:hover{filter:brightness(1.04)}
.btn.ghost{background:#fff; color:var(--pine); border-color:var(--pine)}
.btn.ghost:hover{background:rgba(40,74,63,.06)}
.btn.warning{background:var(--warn); border-color:var(--warn); color:#fff}
.btn.block{display:flex; justify-content:center; width:100%}

/* Accesibilidad botones y enlaces */
a:focus-visible,.btn:focus-visible{outline:3px solid #bcd; outline-offset:2px}

/* =Hero (con foto de montaña + panel “cristal rural”) */
.hero{background:var(--cream)}
.hero-image{
  position:relative; isolation:isolate; color:#17201b; background:#ddd;
  background-size:cover; background-position:center center;
}
.hero-image::before{
  /* Scrim suave en diagonal con pino y transparente para legibilidad */
  content:""; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(1200px 400px at 10% 85%, rgba(245,239,230,.85), rgba(245,239,230,.55) 60%, transparent 100%),
    linear-gradient(120deg, rgba(40,74,63,.10) 0%, rgba(40,74,63,.00) 60%);
}
.hero .hero-inner{padding:74px 0 56px; min-height:48vh; display:flex; align-items:flex-end; position:relative; z-index:1}
.hero-panel{
  display:inline-block;
  background:color-mix(in srgb, var(--snow) 92%, transparent);
  border:1px solid rgba(0,0,0,.06);
  border-radius:var(--radius-lg);
  padding:20px 22px;
  box-shadow:var(--shadow);
  max-width:min(760px, 94%);
  backdrop-filter:blur(3px) saturate(110%);
}
.hero-lead{margin-bottom:.8rem;}
.hero-quick{display:flex; gap:8px; flex-wrap:wrap; margin:-4px 0 12px; padding:0; list-style:none;}
.hero-quick span{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:14px;
  background:rgba(40,74,63,.08); color:var(--pine);
  border:1px solid rgba(40,74,63,.18);
  font-weight:600; font-size:.96rem;
}
.hero-quick span::before{content:"•"; font-size:1.1rem; color:rgba(40,74,63,.66);}
.hero-peek{display:none; gap:10px; margin:0 0 12px;}
.hero-peek img{height:120px; width:100%; object-fit:cover; border-radius:14px; box-shadow:var(--shadow);}
.hero h1{margin:0 0 .35rem}
.hero p{max-width:62ch; margin:0 0 .8rem}
.hero-ctas{display:flex; gap:12px}

/* =Hero secundario para páginas interiores */
.page-hero{
  position:relative;
  display:flex;
  align-items:flex-end;
  padding:clamp(120px, 26vw, 240px) 0 clamp(68px, 14vw, 140px);
  color:#f5f3ee;
  overflow:hidden;
  margin-bottom:clamp(32px, 8vw, 80px);
}
.page-hero::before{
  content:"";
  position:absolute;
  inset:-2px;
  background-image:var(--hero-bg);
  background-size:cover;
  background-position:center;
  filter:saturate(1.1);
  z-index:0;
}
.page-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, rgba(15,31,27,.85) 0%, rgba(15,31,27,.62) 55%, rgba(15,31,27,.45) 100%);
  z-index:0;
}
.page-hero .container{
  position:relative;
  z-index:1;
  max-width:min(760px, 92%);
}
.page-hero h1{margin-bottom:1.1rem; font-size:clamp(32px, 5vw, 52px);}
.page-hero p{color:color-mix(in srgb, #ffffff 88%, transparent); max-width:68ch; margin-bottom:1rem;}

/* =Secciones con imagen de fondo integrada */
.section.scenic{
  position:relative;
  color:#f5f3ee;
  overflow:hidden;
}
.section.scenic::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    linear-gradient(135deg, rgba(16,32,27,.82), rgba(16,32,27,.58)),
    var(--section-bg);
  background-size:cover;
  background-position:center;
  filter:saturate(1.05);
  z-index:0;
}
.section.scenic > .container{
  position:relative;
  z-index:1;
}
.section.scenic h2{color:inherit;}
.section.scenic p,
.section.scenic li,
.section.scenic .fine{color:color-mix(in srgb, #ffffff 84%, transparent);}
.section.scenic a{color:color-mix(in srgb, #ffffff 92%, var(--cream) 8%);}
.section.scenic .card{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.32);
  box-shadow:0 24px 48px rgba(0,0,0,.28);
  color:#fff;
  backdrop-filter:blur(4px);
}
.section.scenic .card h3{color:#fff;}
.section.scenic .card p,
.section.scenic .card li{color:color-mix(in srgb, #ffffff 88%, transparent);}
.section.scenic .card .fine{color:color-mix(in srgb, #ffffff 72%, transparent);}

/* =Secciones, tarjetas y rejillas */
.section{padding:38px 0 56px}
.section.alt{background:var(--g-cream)}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space)}
.features .grid-3{margin:32px 0 48px}
.card{
  padding:18px; border:1px solid #e9e6e0; border-radius:var(--radius);
  background:#fff; box-shadow:var(--shadow);
  background-image:var(--g-pine);
}
.card h3{margin-top:2px}

/* Listas con hoja (opcional: añade class .leaf-list al <ul>) */
.leaf-list{list-style:none; padding-left:0; margin:0}
.leaf-list li{
  padding-left:28px; position:relative; margin:.5rem 0;
}
.leaf-list li::before{
  content:""; position:absolute; left:0; top:.25rem; width:18px; height:18px;
  background: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill=\"%23000\" viewBox=\"0 0 24 24\"><path d=\"M12 2c5.5 0 10 4.5 10 10 0 3.9-2.2 7.3-5.5 9-1.7-2.4-3.9-4.1-6.6-5 2.5-1.1 4.9-3.5 6-6-2.6 2.1-6.2 3.6-9.9 3.8C6.4 7.5 9 2 12 2z\"/></svg>') center/contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill=\"%23000\" viewBox=\"0 0 24 24\"><path d=\"M12 2c5.5 0 10 4.5 10 10 0 3.9-2.2 7.3-5.5 9-1.7-2.4-3.9-4.1-6.6-5 2.5-1.1 4.9-3.5 6-6-2.6 2.1-6.2 3.6-9.9 3.8C6.4 7.5 9 2 12 2z\"/></svg>') center/contain no-repeat;
  opacity:.8;
}

/* =Galería */
#galeria-casa{display:flex; flex-direction:column; gap:56px}
.gallery-section h3{margin-bottom:.3rem}
.gallery-intro{margin:0 0 1.2rem; color:var(--muted)}
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space)}
.gallery a{display:block; border-radius:var(--radius); overflow:hidden; position:relative}
.gallery img{
  width:100%; height:230px; object-fit:cover; transition:transform .55s ease, filter .35s;
}
.gallery a:hover img{transform:scale(1.035); filter:brightness(1.05)}
.badge{
  position:absolute; left:12px; top:12px; padding:4px 8px; border-radius:12px;
  background:rgba(40,74,63,.85); color:#fff; font-size:.82rem; letter-spacing:.2px;
}

/* =Bloques de precio/booking */
.booking{display:grid; gap:12px; max-width:520px}
.field-row{display:grid; gap:12px}
.field-row.two{grid-template-columns:repeat(2,1fr)}
.field-row.three{grid-template-columns:repeat(3,1fr)}
.price{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 14px; border:1px dashed #ddd; border-radius:14px; background:#fbfbfb
}
.price strong{font-size:1.1rem}

/* =Formularios */
form label{display:flex; flex-direction:column; gap:6px; font-weight:600; color:#2b312e}
form label.checkbox{flex-direction:row; align-items:flex-start; gap:10px; font-weight:500}
form label.checkbox input{margin-top:4px}
input, select, textarea{
  font:inherit; padding:10px 12px; border-radius:12px; border:1px solid #d9d6cf; background:#fff;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
input::placeholder,textarea::placeholder{color:#9aa29e}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--pine); box-shadow:0 0 0 3px color-mix(in srgb, var(--pine) 20%, transparent);
}
textarea{resize:vertical}

/* =Footer */
.site-footer{border-top:1px solid #eee; margin-top:40px; background: radial-gradient(1200px 200px at 50% 0%, rgba(40,74,63,.06), transparent 60%)}
.site-footer .container{padding:24px 0; display:flex; flex-direction:column; gap:8px}
.site-footer nav{display:flex; flex-wrap:wrap; gap:12px; font-size:.92rem}
.site-footer nav a{color:inherit; text-decoration:none}
.site-footer nav a:hover,.site-footer nav a:focus-visible{text-decoration:underline}
.fine{color:#666; font-size:.92rem}

/* =Utilidades de layout/tema */
.kicker{font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--sage); font-size:.8rem}
.muted{color:var(--muted)}
.center{display:grid; place-items:center}
.visually-hidden{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.sticky-cta{
  position:sticky; bottom:16px; z-index:30; padding:12px; border-radius:16px;
  background:rgba(255,255,255,.9); backdrop-filter:blur(8px); border:1px solid #e9e6e0; box-shadow:var(--shadow);
}

/* Páginas legales: ancho más estrecho y texto centrado en móvil */
.legal-page main{max-width:860px; margin:0 auto;}
.legal-page main h1,.legal-page main h2{letter-spacing:-.01em;}
.legal-page main ul{padding-left:1rem;}
@media (max-width: 768px){
  .legal-page main{ text-align:center; }
  .legal-page main ul{ list-style-position:inside; padding-left:0; }
  .legal-page main li{ margin-bottom:8px; }
}

/* =Accesibilidad y movimiento reducido */
:focus-visible{outline:3px solid #bcd; outline-offset:2px}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important}
}

/* =Dark mode (auto) */
@media (prefers-color-scheme: dark){
  :root{
    --cream:#171a18; --snow:#1b1f1c; --ink:#eaece9; --muted:#9aa29e;
  }
  body{background:#0f1211}
  .site-header{background:rgba(18,22,20,.7); border-color:#223;}
  .card{background:#141816; border-color:#222; background-image:none}
  .hero-panel{background:rgba(27,31,28,.82); border-color:#222}
  .nav-link{color:#dfe3e0}
  .nav-link.active{background:rgba(117,155,125,.18); color:#dfe3e0}
  input,select,textarea{background:#121513; border-color:#2a2f2c; color:#eaece9}
  .price{background:#111514; border-color:#2a2f2c}
  .site-footer{background: radial-gradient(1200px 200px at 50% 0%, rgba(117,155,125,.08), transparent 60%)}
}

/* =Responsive */
@media (max-width:1120px){
  .container{padding:0 calc(var(--space) * .9)}
}
@media (max-width:920px){
  .features .grid-3,.grid-3{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr}
  .hero .hero-inner{padding:56px 0 36px}
  .hero-panel{max-width:96%}
}
@media (max-width:560px){
  .nav{height:auto; padding:10px 0; gap:8px}
  .brand{font-size:1.08rem}
  .btn{padding:10px 14px}
  .gallery img{height:200px}
}
/* ====== TEMA CLARO FIJO (sin dark mode) ================================== */
/* Forzamos esquema claro del navegador */
:root{ color-scheme: light; }

/* Fondo claro con matiz beis + detalle verde muy suave */
body{
  background:#faf6ef; /* base beis */
  background-image:
    radial-gradient(700px 240px at 0% 0%, rgba(117,155,125,.08), transparent 60%),     /* bruma verde clara esquina sup-izda */
    radial-gradient(700px 240px at 100% 100%, rgba(117,155,125,.06), transparent 60%), /* bruma verde clara esquina inf-dcha */
    linear-gradient(180deg, #ffffff 0%, #f9f4ea 55%, #f2eadf 100%);                    /* beis suave vertical */
}

/* Panel del héroe ligeramente más claro, sin oscurecer la foto */
.hero-image::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(1200px 420px at 10% 85%, rgba(255,255,255,.88), rgba(250,246,239,.70) 60%, transparent 100%),
    linear-gradient(120deg, rgba(40,74,63,.06) 0%, rgba(40,74,63,.00) 60%);
}

/* Tarjetas y superficies claras */
.card{
  background:#fff;
  background-image: linear-gradient(135deg, rgba(40,74,63,.06), rgba(40,74,63,.02));
  border-color:#e9e6e0;
}

/* Footer con detalle claro (verde muy sutil arriba) */
.site-footer{
  background: radial-gradient(900px 180px at 50% 0%, rgba(117,155,125,.10), transparent 60%);
}

/* Enlaces activos del menú: verde pino sutil sobre claro */
.nav-link.active{ background:rgba(40,74,63,.10); color:#284a3f }

/* ====== ANULAMOS “modo oscuro” previo (si existiera en tu CSS) ============ */
/* Si tu hoja tenía un bloque @media (prefers-color-scheme: dark),
   lo neutralizamos forzando los colores claros aquí. */
@media (prefers-color-scheme: dark){
  body{ background:#faf6ef; color:#1e2320; }
  .site-header{ background:rgba(255,255,255,.88); border-color:#eee; }
  .hero-panel{ background:rgba(255,255,255,.92); border-color:rgba(0,0,0,.06); }
  .card{ background:#ffffff; border-color:#e9e6e0; }
  .nav-link{ color:#3e423f; }
  input,select,textarea{ background:#fff; border-color:#d9d6cf; color:#1e2320; }
  .price{ background:#fbfbfb; border-color:#ddd; }
}
/* ==================== NAV: botones superiores más llamativos ==================== */
.nav{ height:78px; }

/* Aumentamos tamaño, peso y área clicable (WCAG: 44px) */
.nav-link,
.nav .btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:700;
  font-size:clamp(15px, 1.15vw, 17px);
  padding:12px 16px;
  min-height:44px;
  border-radius:16px;
  line-height:1;
  letter-spacing:.1px;
  transition:transform .08s ease, box-shadow .25s, background .25s, color .25s, border-color .25s;
}

/* Enlaces normales del menú */
.nav-link{
  color:#2b312e;
  background:transparent;
  border:1px solid transparent;
}
.nav-link:hover{
  background:rgba(40,74,63,.10);
  transform:translateY(-1px);
}
.nav-link:active{ transform:translateY(0); }
.nav-link.active{
  background:rgba(40,74,63,.18);
  border-color:rgba(40,74,63,.24);
  color:var(--pine);
  box-shadow:0 6px 18px rgba(40,74,63,.12);
}

/* CTA de la derecha (“Contacto”) – estilo botón primario siempre visible */
.nav .btn{
  background:var(--pine);
  color:#fff;
  border:1px solid var(--pine);
  box-shadow:0 8px 24px rgba(40,74,63,.18), inset 0 1px 0 rgba(255,255,255,.35);
}
.nav .btn:hover{
  filter:brightness(1.08);
  transform:translateY(-1px);
}
.nav .btn:active{ transform:translateY(0); }

/* Pulso sutil para atraer la vista (desactivable quitando este bloque) */
.nav .btn{
  position:relative;
  isolation:isolate;
}
.nav .btn::after{
  content:"";
  position:absolute; inset:-6px; border-radius:20px; z-index:-1;
  box-shadow:0 0 0 0 rgba(40,74,63,.28);
  animation:navPulse 2.6s ease-in-out infinite;
}
@keyframes navPulse{
  0%   { box-shadow:0 0 0 0 rgba(40,74,63,.25) }
  70%  { box-shadow:0 0 0 12px rgba(40,74,63,0) }
  100% { box-shadow:0 0 0 0 rgba(40,74,63,0) }
}

/* Responsive: en pantallas pequeñas quepan mejor y sigan siendo grandes */
@media (max-width:920px){
  nav{ gap:6px }
  .nav-link, .nav .btn{ padding:12px 14px }
}
@media (max-width:560px){
  .nav{ padding:8px 0; gap:6px }
  .nav-link, .nav .btn{ font-size:16px; }
}

/* =================== Mobile polish: más aire y legibilidad =================== */
@media (max-width: 768px){
  /* Contenedor y tipografía */
  body{ font-size:15px; }
  .container{ padding:0 calc(var(--space) * .9); }
  h1{ font-size:clamp(26px, 6.6vw, 34px); }
  h2{ font-size:clamp(20px, 5.4vw, 26px); }
  p{ line-height:1.6; }
  .section{ padding:28px 0 40px; }

  /* Menú: envuelto en dos filas, centrado y sin scroll horizontal */
  .nav{ flex-direction:column; align-items:center; height:auto; gap:10px; padding:10px 0; }
  .nav > nav{ width:100%; display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
  .nav-link, .nav .btn{ flex:1 1 calc(50% - 10px); text-align:center; padding:10px 12px; font-size:15px; min-height:42px; border-radius:14px; }
  .nav .btn::after{ display:none; }

  /* Hero menos alto y panel centrado */
  .hero .hero-inner{ padding:38px 0 26px; min-height:auto; }
  .hero-panel{ max-width:100%; padding:16px; text-align:center; }

  .hero-panel h1{ margin-bottom:.4rem; }
  .hero-ctas{ flex-direction:column; gap:10px; }
  .hero-ctas .btn{ width:100%; justify-content:center; }
  .hero-quick{ justify-content:center; }
  .hero-quick span{ flex:1 1 calc(50% - 10px); justify-content:center; }
  .hero-peek{ display:grid; grid-template-columns:repeat(2,1fr); }
  .hero-ctas{ flex-direction:column; gap:10px; }
  .hero-ctas .btn{ width:100%; justify-content:center; }

  /* Rejillas: una sola columna y más separación */
  .grid-3{ grid-template-columns:1fr; gap: calc(var(--space) * 1.15); }

  /* Tarjetas con más aire */
  .card{ padding:16px; border-radius:16px; }

  /* Galería más baja para que respiren las fotos */
  .gallery img{ height: 180px; }
  #galeria-casa{ gap:36px; }
  .gallery-intro{ margin-bottom:.6rem; }

  /* Formularios cómodos y botones grandes */
  .booking{ max-width:none; }
  .field-row.two,.field-row.three{ grid-template-columns:1fr; }
  .card .btn{ width:100%; } /* hace los botones de tarjetas y CTAs a todo el ancho */

  /* Si algún elemento usa "grid-column: span 2" (como el formulario), forzamos 1 col en móvil */
  .grid-3 > [style*="span 2"]{ grid-column: auto !important; }

  /* Bloques de CTA en fila responsiva */
  .cta-row{ display:flex; gap:10px; flex-direction:column; }
  .cta-row .btn{ flex:1; width:100%; }

  /* Footer centrado y con enlaces agrupados */
  .site-footer .container{ align-items:center; text-align:center; }
  .site-footer nav{ justify-content:center; }
}

/* Un pelín más de aire aún en móviles muy pequeños */
@media (max-width: 420px){
  .container{ padding:0 calc(var(--space) * .7); }
  .gallery img{ height: 170px; }
}

@media (max-width:768px){
  .calendar-embed{ height:520px !important; }
}
@media (max-width:420px){
  .calendar-embed{ height:460px !important; }
}
/* ==== CABECERA MÓVIL: 1 fila, sin solapes, scroll horizontal cómodo ==== */
@supports(padding: max(0px)) {
  .site-header { padding-top: env(safe-area-inset-top); }
}

@media (max-width: 760px){
  /* Header compacto */
  .site-header{
    backdrop-filter:saturate(160%) blur(10px);
    background:rgba(255,255,255,.92);
    border-bottom:1px solid #ece8e1;
  }
  .nav{
    height:auto;
    padding:10px var(--space);
    gap:10px;
    align-items:center;
  }

  /* Marca en una sola línea (no partir “Casa Rural”) */
  .brand{
    white-space:nowrap;
    font-size:1.05rem;
    line-height:1;
    margin-right:6px;
  }

  /* Menú: dos filas centradas y sin desplazamiento lateral */
  .nav > nav{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px;
    overflow:visible;
  }

  /* Pills compactos y centrados */
  .nav-link,
  .nav .btn{
    flex:1 1 calc(50% - 10px);
    min-height:42px;
    padding:10px 12px;
    border-radius:14px;
    font-size:15px;
    line-height:1;
  }

  /* Quitamos el efecto “pulse” para que no invada otros pills */
  .nav .btn::after{ display:none; }

  /* Activo/hover más limpio, sin sombra grande */
  .nav-link.active{
    background:rgba(40,74,63,.14);
    border:1px solid rgba(40,74,63,.22);
    box-shadow:none;
    color:var(--pine);
  }
  .nav-link:hover{ background:rgba(40,74,63,.10); }

  /* Evitar que la cabecera tape el inicio del contenido en anclas */
  :target{ scroll-margin-top: 70px; }
}