/* ============================================================
   Casa Bardena Negra • styles.css (optimizado)
   Tema: Ocres / negro (estilo hotel)
   Autor: Alejandro
   Última reorganización: 2025-09-15 + refactor seguro
   ============================================================ */

/* ==========================
   1) Variables y tokens
   ========================== */
:root{
  /* Colores base */
  --bg:#fffdfa;           /* fondo marfil cálido */
  --ink:#0a0a0a;          /* texto principal */
  --accent:#7a5c2e;
  --accent-hover:#6c5028;  /* dorado hover */
  --muted:#6b6b6b;        /* texto atenuado */

  /* Tonos tierra (héroes sin imagen) */
  --earth:#d8cdb6;
  --earth-deep:#c8b293;

  /* Colores marca (reseñas) */
  --brand-booking:#003580;
  --brand-airbnb:#ff5a5f;
  --brand-google:#4285f4;

  /* Dropdown (La Casa) */
  --menu-bg:#322416;                    /* marrón oscuro */
  --menu-border:rgba(163,125,76,.35);   /* borde dorado translúcido */
  --menu-hover:rgba(163,125,76,.18);    /* resalte al pasar */

  /* Sombras comunes (tokens ligeros) */
  --sh-card:0 10px 30px -22px rgba(0,0,0,.4);
  --sh-elev:0 12px 32px -12px rgba(0,0,0,.6);

  /* Medidas globales */
  --header-h:64px;                      /* altura visual del header */
}
@media (max-width:960px){ :root{ --header-h:56px; } }

/* ==========================
   2) Reset y bases tipográficas
   ========================== */
*{ box-sizing:border-box }
html,body{ margin:0; padding:0; overflow-x:hidden }
body{
  font-family:"Barlow",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--ink); background:var(--bg); line-height:1.6;
}
h1,h2,h3,.font-primary{ font-family:"Gilda Display",Georgia,serif }
a{ color:var(--ink); text-decoration:none }
a:hover{ text-decoration:underline }
button{ cursor:pointer }

/* Utilidad: pantalla completa sin desbordes cuando hay fondos que sangran */
@supports (width: 100dvw){
  .full-bleed{ width:100dvw; margin-left:-50dvw; margin-right:-50dvw }
}

/* ==========================
   3) Botones y utilidades
   ========================== */
.btn{
  display:inline-block;
  border:1px solid var(--accent);
  background:var(--accent);
  color:#fff;
  padding:.9rem 1.2rem;
  border-radius:3px;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:600;
  box-shadow:0 8px 20px -12px rgba(0,0,0,.4);
  cursor:pointer;
  transition:transform .06s ease, background-color .2s ease, box-shadow .2s ease;
}
.btn:hover{ background:var(--accent-hover); text-decoration:none }
.btn:active{ transform:translateY(1px) }
.btn.alt{ background:transparent; color:var(--accent) }
.btn.sm{ padding:.45rem .7rem; font-size:.85rem }
button.btn:disabled{ cursor:not-allowed; opacity:.6 }
.btn:focus-visible{
  outline:2px solid #fff; outline-offset:2px; box-shadow:0 0 0 3px rgba(163,125,76,.35)
}
/* Icono Google en botones */
.btn .logo-google{
  display:inline-block; width:18px; height:18px;
  background:url('/images/brands/google.svg') no-repeat center/contain;
  vertical-align:-3px;
}
/* Variantes usadas en FAQ (compatibilidad con marcado existente) */
.btn-primary{ background:var(--accent); color:#fff; border:1px solid var(--accent) }
.btn-primary:hover{ background:var(--accent-hover) }
.btn-ghost{ background:#f5f1e7; color:#2a2a2a; border:1px solid #e5e5e5 }
.btn-ghost:hover{ background:#efe8d9 }

/* Utilidades */
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ==========================
   4) Layouts y helpers
   ========================== */
.container{ max-width:1140px; margin:0 auto; padding:0 15px }
.grid{ display:grid; gap:1.25rem }
.grid.cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)) }
.grid.cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)) }
/* La casa: columnas y ritmo */
.house-cols{ gap:.75rem; margin-top:.75rem; }
.house-cols h3{ margin:.25rem 0 .4rem; }
.house-cols ul{ margin:0; padding-left:1.1rem; }
.house-cols li + li{ margin-top:.25rem; }
@media (max-width:960px){
  .grid.cols-2, .grid.cols-3{ grid-template-columns:1fr }
}
@media (min-width:961px) and (max-width:1140px){
  .grid.cols-3{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}

/* ==========================
   5) Header y navegación
   ========================== */
header.site-header{
  position:fixed; inset:0 0 auto 0; z-index:999;
  background:transparent;
  transform:translateY(0);
  will-change:transform;
  transition: transform .28s ease, background .25s ease, box-shadow .25s ease;
  backdrop-filter:saturate(120%) blur(6px);
}
/* Marca SIEMPRE marrón (también con header transparente) */
header.site-header .brand,
header.site-header .brand:link,
header.site-header .brand:visited{
  color: #fff; /* #7a5c2e */
}
header .nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:.9rem 0; min-height:var(--header-h);
}
.brand{
  display:flex; align-items:center; gap:.6rem;
  line-height:1;
}
.brand-logo{
  width:40px; height:40px; border-radius:50%;
  object-fit:cover; /* rellena el círculo con el centro del logo */
}
.brand-name{
  letter-spacing:.04em; font-weight:600;
}
@media (max-width: 959px){
  .brand-logo{ width:36px; height:36px; }
}

header .nav-links{ display:flex; align-items:center; gap:1rem }
header .nav-links a{
  color:#eaeaea; letter-spacing:.14em; text-transform:uppercase;
  font-size:.78rem; opacity:.9;
}
header .nav-links a:hover{ opacity:1 }
header .nav-links a.cta{
  background:var(--accent); color:#fff; padding:.55rem .9rem;
  border-radius:3px; opacity:1;
}

/* Accesibilidad: foco visible en enlaces/botones del header */
header .nav-links a:focus-visible,
header .sub-toggle:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* Hamburguesa */
.nav-toggle{ display:none; width:40px; height:40px; border:0; background:transparent }
.nav-toggle span{ display:block; height:2px; background:#fff; margin:7px 6px }

/* ===== Estados ===== */
header.site-header.is-scrolled{
  background:var(--bg);
  box-shadow:0 2px 18px rgba(0,0,0,.08);
}
header.site-header.is-scrolled .brand{ color:var(--accent) }
header.site-header.is-scrolled .nav-links a{ color:var(--accent); opacity:1 }
header.site-header.is-scrolled .nav-links a:hover{ text-decoration:underline }
header.site-header.is-scrolled .nav-links a.cta{ background:var(--accent); color:#fff }
header.site-header.is-scrolled .sub-toggle{ color:var(--accent) }
header.site-header.is-scrolled .nav-toggle span{ background:var(--accent) }

/* Header oscuro cuando el menú móvil está ABIERTO */
header.site-header.open{
  background:rgba(10,10,10,.82);
  box-shadow:0 2px 18px rgba(0,0,0,.35);
}
header.site-header.open .brand{ color:#fff }
header.site-header.open .nav-links a{ color:#eaeaea }
header.site-header.open .sub-toggle{ color:#fff }
header.site-header.open .nav-toggle span{ background:#fff }

/* Ocultar el header al hacer scroll (mantiene accesibilidad) */
header.site-header.is-hidden{
  transform: translateY(calc(-100% - env(safe-area-inset-top, 0px)));
}
/* Interacción: siempre vuelve a mostrarse */
header.site-header.open,
header.site-header:hover,
header.site-header:focus-within{
  transform: translateY(0);
}
/* Respeto Reduce Motion para el header */
@media (prefers-reduced-motion: reduce){
  header.site-header{ transition: background .25s ease, box-shadow .25s ease }
}

/* Menú móvil */
@media (max-width:960px){
  .nav-toggle{ display:inline-block }
  header .nav-links{
    display:none; position:absolute; right:15px; top:100%;
    background:rgba(10,10,10,.95); border:1px solid rgba(255,255,255,.08);
    border-radius:8px; padding:.75rem 1rem; flex-direction:column; min-width:220px;
  }
  header.open .nav-links{ display:flex }
  header .nav-links a{ padding:.35rem 0 }
}

/* ===== Páginas SIN hero: header claro desde el inicio (unificado) ===== */
:is(body:not(:has(.page-hero, .hero)), body.no-hero) header.site-header{
  background:var(--bg);
  box-shadow:0 2px 18px rgba(0,0,0,.08);
}
:is(body:not(:has(.page-hero, .hero)), body.no-hero) header.site-header .brand{ color:var(--accent) }
:is(body:not(:has(.page-hero, .hero)), body.no-hero) header.site-header .nav-links a{ color:var(--accent); opacity:1 }
:is(body:not(:has(.page-hero, .hero)), body.no-hero) header.site-header .nav-links a:hover{ text-decoration:underline }
:is(body:not(:has(.page-hero, .hero)), body.no-hero) header.site-header .nav-links a.cta{ background:var(--accent); color:#fff }
:is(body:not(:has(.page-hero, .hero)), body.no-hero) header.site-header .sub-toggle{ color:var(--accent) }
:is(body:not(:has(.page-hero, .hero)), body.no-hero) header.site-header .nav-toggle span{ background:var(--accent) }

/* Menú móvil en páginas sin hero (unificado) */
:is(body:not(:has(.page-hero, .hero)), body.no-hero) header.site-header.open{
  background:rgba(10,10,10,.82);
  box-shadow:0 2px 18px rgba(0,0,0,.35);
}
:is(body:not(:has(.page-hero, .hero)), body.no-hero) header.site-header.open .brand{ color:#fff }
:is(body:not(:has(.page-hero, .hero)), body.no-hero) header.site-header.open .nav-links a{ color:#eaeaea }
:is(body:not(:has(.page-hero, .hero)), body.no-hero) header.site-header.open .sub-toggle{ color:#fff }
:is(body:not(:has(.page-hero, .hero)), body.no-hero) header.site-header.open .nav-toggle span{ background:#fff }

/* ==========================
   6) Dropdown (La Casa/Entorno)
   ========================== */

/* --- utilidades de visibilidad --- */
.only-mobile{ display:none; } /* por defecto oculto */

/* Contenedor y piezas base */
.nav-links .nav-item{ position:relative; display:inline-flex; align-items:center; gap:.25rem }
.nav-link{ color:#eaeaea; letter-spacing:.14em; text-transform:uppercase; font-size:.78rem }

/* Botón caret (se oculta en desktop más abajo) */
.sub-toggle{
  background:none; border:0; padding:.1rem .2rem; line-height:1;
  color:#eaeaea; opacity:.9; display:inline-flex; align-items:center; justify-content:center;
}
.sub-toggle:hover{ opacity:1 }
.chev{ font-size:.65rem; transform:translateY(-1px); transition:transform .15s ease }

/* Panel del submenú */
.submenu{
  position:absolute; right:0; min-width:220px; z-index:1000;
  top:calc(100% + 2px);
  background:var(--menu-bg); border:1px solid var(--menu-border); border-radius:8px; padding:.5rem;
  display:flex; flex-direction:column; gap:.25rem; box-shadow:var(--sh-elev);
  opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-4px);
  transition:opacity .15s ease, transform .15s ease, visibility .15s;
}
.submenu a{
  color:#f0f0f0; font-size:.9rem; letter-spacing:.02em; text-transform:none;
  padding:.45rem .6rem; border-radius:6px;
}
.submenu a:hover{ background:var(--menu-hover); text-decoration:none }

/* ======== ESCRITORIO (>=961px) ======== */
/* Mostrar por hover/focus SOLO en escritorio */
@media (min-width:961px){
  .has-submenu{ position:relative }
  .has-submenu .submenu::before{ content:""; position:absolute; left:0; right:0; top:-10px; height:10px; }

  .has-submenu:hover .submenu,
  .has-submenu:focus-within .submenu{
    opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);
  }

  /* sin caret en desktop (como querías) */
  .nav .has-submenu:not(.lang-switch) .sub-toggle{ display:none !important; }
}

/* ======== COMPARTIDO (móvil/desktop) ======== */
/* En móvil y en general, el estado visible depende de .sub-open (lo pone/quita JS) */
.has-submenu.sub-open .submenu{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);
}

/* ======== MÓVIL (<=960px) ======== */
@media (max-width:960px){
  .nav .has-submenu{ position:relative; min-height:48px; }

  /* El texto padre no parece enlace y sirve de toggle (JS) */
  .nav .has-submenu > .nav-link{
    padding-right:56px;                 /* hueco para caret grande */
    display:flex; align-items:center;   /* centro vertical */
    cursor:default; text-decoration:none;
    -webkit-tap-highlight-color:transparent;
    -webkit-touch-callout:none;
    user-select:none;
    touch-action:manipulation;
  }
  .nav .has-submenu > .nav-link:active,
  .nav .has-submenu > .nav-link:hover{
    background:transparent; outline:none;
  }

  /* Caret grande y accesible */
  .nav .sub-toggle{
    position:absolute; right:0; top:0;
    width:48px; height:48px;
    display:flex; align-items:center; justify-content:center;
    border:0; background:transparent; cursor:pointer;
    -webkit-tap-highlight-color:transparent; outline:0;
  }
  .nav .sub-toggle .chev{
    font-size:18px; line-height:1; transform:rotate(0deg); transition:transform .18s ease;
  }
  .has-submenu.sub-open .sub-toggle .chev{ transform:rotate(180deg); }

  /* “Ver la sección” SOLO en móvil */
  .only-mobile{ display:block; }

  /* algo más de aire en items de submenú en móvil */
  .nav .submenu a{ padding:.6rem 0; }
}
/* Caret por defecto (apuntando abajo) */
.sub-toggle .chev{
  transform: translateY(-1px);
  transition: transform .18s ease;
}

/* Cuando el submenú está abierto, gira 180º (apunta arriba) */
@media (max-width:960px){
  .sub-toggle[aria-expanded="true"] .chev{
    transform: translateY(-1px) rotate(180deg);
  }
}

/* --------- Estado ACTIVO / Rama actual --------- */
.has-submenu.is-current-branch > .nav-link{
  color:var(--brand, #a37d4c); font-weight:600;
}
@media (min-width:961px){
  .has-submenu.is-current-branch > .nav-link{
    text-decoration:underline .1em; text-underline-offset:.2em;
  }
}

/* Ítem exacto activo dentro del submenú (fondo ligeramente más claro) */
.nav .submenu a.is-active{
  font-weight:700; position:relative;
  background: color-mix(in srgb, #2b1f16 86%, #ffffff 14%);
  border-radius:6px; padding:.6rem .5rem .6rem .9rem;
}
@supports not (color-mix(in srgb, #000 50%, #fff 50%)){
  .nav .submenu a.is-active{ background:#3a2d22; }
}
/* puntito opcional (más visible) */
.nav .submenu a.is-active::before{
  content:""; position:absolute; left:.4rem; top:50%;
  width:6px; height:6px; border-radius:50%;
  background:var(--brand, #a37d4c); transform:translateY(-50%);
}
/* === Selector de idioma === */
.lang-flag{ width:18px; height:18px; border-radius:2px; object-fit:cover; box-shadow:0 0 0 1px rgba(0,0,0,.12) }
#submenu-lang a{ display:flex; align-items:center; gap:.5rem }

/* ==========================
   7) Hero (home) y slider
   ========================== */
.full-bleed{ position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; width:100vw }
.hero{ position:relative; height:78vh; min-height:520px; overflow:hidden }
.hero .overlay{ position:absolute; inset:0; background:rgba(0,0,0,.45); z-index:5 }
.hero .inner{ position:relative; z-index:10; height:100%; display:flex; align-items:center }
.hero .kicker{ color:#fff; opacity:.82; letter-spacing:.35em; text-transform:uppercase; font-size:.78rem; margin-bottom:.5rem }
.hero h1{
  color:#fff; font-size:clamp(2.2rem,6vw,3.75rem); line-height:1.12; text-transform:uppercase;
  text-shadow:0 2px 20px rgba(0,0,0,.35)
}
.hero .actions{ margin-top:1.2rem }

/* Hero: botón secundario en blanco */
.hero .btn.alt{
  color:#fff; border-color:rgba(255,255,255,.9);
}
.hero .btn.alt:hover{
  background:rgba(255,255,255,.12);
  text-decoration:none;
}
.hero .btn.alt:focus-visible{
  outline:2px solid #fff; outline-offset:2px; box-shadow:0 0 0 3px rgba(255,255,255,.35);
}
.hero .actions .btn + .btn{ margin-left:.6rem }
/* Slider: 3 imágenes */
/* Contenedor y capas */
.hero.hero-slider{ position:relative; overflow:hidden }
.hero-slider .overlay{ position:absolute; inset:0; z-index:2 }  /* oscurecedor encima de las fotos */
.hero-slider .inner{ position:relative; z-index:3 }              /* texto por encima */

/* Slides + animación (igual que tenías) */
.hero-slider .slide{
  position:absolute; inset:0;
  opacity:0; animation:heroFade 12s infinite; z-index:1;
  will-change:opacity;
}
.hero-slider .slide:nth-child(1){ animation-delay:0s }  /* se anula justo abajo */
.hero-slider .slide:nth-child(2){ animation-delay:4s }
.hero-slider .slide:nth-child(3){ animation-delay:8s }

/* CLAVE LCP: el primer slide visible y sin animación */
.hero-slider .slide:first-child{
  opacity:1;
  animation:none;
}

@keyframes heroFade{
  0%{opacity:0} 6%{opacity:1} 30%{opacity:1} 36%{opacity:0} 100%{opacity:0}
}
@media (prefers-reduced-motion: reduce){
  .hero-slider .slide{ animation:none }
}

/* Imagen del slide (rellena todo el hero) */
.hero-slider .slide picture,
.hero-slider .slide .hero-bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; display:block;
}

/* Responsive hero home */
@media (max-width:960px){
  .hero{ height:72vh; min-height:480px }
  .hero .inner{ justify-content:center; text-align:center; padding:0 16px }
}


/* ==========================
   8) Hero de página (internas)
   ========================== */
.page-hero{
  position:relative; height:40vh; min-height:260px;
  background-size:cover; background-position:center;
  padding-top:var(--header-h); box-sizing:border-box
}
.page-hero .overlay{ position:absolute; inset:0; background:rgba(0,0,0,.30); z-index:2 }
.page-hero .inner{ position:relative; z-index:3; display:flex; flex-direction:column; justify-content:flex-end; height:100%; padding:40px 0 }

/* Variantes */
.page-hero.noimg{ background:var(--earth) }
.page-hero.tierra .overlay{ background:linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.28)) }
.page-hero.sm{ height:calc(28vh + var(--header-h)); min-height:calc(220px + var(--header-h)) }
.page-hero.auto{ height:auto; min-height:0; padding:calc(var(--header-h) + 16px) 0 56px }

/* Títulos/lead en héroes */
.page-hero h1{ font-size:clamp(1.9rem,5vw,3rem); margin:0 }
.page-lead{ color:#fff; opacity:.9; max-width:65ch; margin:.4rem 0 0 }

/* Ajustes de separación tras hero */
.page-hero + .container,
.page-hero + section.container{ margin-top:1rem }

/* Extensiones mínimas */
.page-hero .kicker{
  letter-spacing:.06em; text-transform:uppercase; font-weight:600;
  opacity:.9; margin:0 0 .25rem; color:#fff;
}

/* Páginas sin hero: primera sección con margen de seguridad */
main > section.container.prose:first-of-type{ padding-top:calc(var(--header-h) + 16px) }
main > section.container.prose:first-of-type .card:first-child{ margin-top:0 !important }
/* Hero con <picture>/<img> en lugar de background-image */
.page-hero picture,
.page-hero .hero-bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; z-index:1;
}
/* ==========================
   9) Tarjetas, secciones y prosa
   ========================== */
.card{ background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:8px; padding:1.25rem; box-shadow:var(--sh-card) }
.card h3{ font-family:"Gilda Display",Georgia,serif; margin:.2rem 0 .65rem }
.badge-dot{ display:inline-block }
.section{ margin-top:2rem }
.section .section-title{ font-family:"Gilda Display",Georgia,serif; font-size:1.8rem; margin:.2rem 0 .8rem }
.prose{ max-width:820px; margin:1.6rem auto }
.prose h1,.prose h2,.prose h3{ font-family:"Gilda Display",Georgia,serif; line-height:1.2; margin:1.2rem 0 .6rem }
.prose h1{ font-size:clamp(1.8rem,3.6vw,2.4rem) }
.prose h2{ font-size:clamp(1.4rem,3vw,1.8rem) }
.prose h3{ font-size:clamp(1.2rem,2.4vw,1.4rem) }
.prose p{ margin:.6rem 0 }
.prose ul,.prose ol{ padding-left:1.2rem; margin:.6rem 0 }
.prose a:not(.btn){ color:var(--accent) }

/* ==========================
   10) Iconos de equipamiento
   ========================== */
.features{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.8rem; list-style:none; padding:0; margin:0 }
@media (max-width:960px){ .features{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
.feature{
  display:flex; align-items:center; gap:.7rem; padding:.8rem 1rem;
  border:1px solid rgba(0,0,0,.06); border-radius:10px; background:#fff; box-shadow:0 10px 22px -20px rgba(0,0,0,.45);
}
.icon-24{ width:32px; height:32px; border-radius:999px; background:#efe7dc; display:inline-flex; align-items:center; justify-content:center; flex:0 0 32px }
.icon-24 svg{ width:18px; height:18px; stroke:var(--accent); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }

/* ==========================
   11) Galería y Lightbox
   ========================== */
.figure{ border-radius:10px; overflow:hidden; box-shadow:0 10px 30px -22px rgba(0,0,0,.35); background:#f3eee6 }
.figure img{ display:block; width:100%; height:auto }
.gallery-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem }
@media (max-width:960px){ .gallery-grid{ grid-template-columns:1fr 1fr } }
@media (max-width:640px){ .gallery-grid{ grid-template-columns:1fr } }

/* Lightbox */
.lb-backdrop{ position:fixed; inset:0; z-index:2000; background:rgba(0,0,0,.92); display:none; align-items:center; justify-content:center; padding:24px }
.lb-backdrop.open{ display:flex }
.lb-figure{ position:relative; max-width:min(96vw,1400px); max-height:90vh }
.lb-figure img{ display:block; max-width:100%; max-height:90vh; border-radius:10px }
.lb-caption{ color:#eaeaea; text-align:center; margin-top:.6rem; font-size:.95rem }
.lb-btn{ position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:999px; border:0; cursor:pointer; background:rgba(255,255,255,.15); color:#fff; font-size:24px; line-height:44px }
.lb-btn:hover{ background:rgba(255,255,255,.28) }
.lb-prev{ left:-60px } .lb-next{ right:-60px }
.lb-close{ position:absolute; top:22px; right:22px; width:40px; height:40px; border-radius:999px; border:0; background:rgba(255,255,255,.18); color:#fff; font-size:24px; cursor:pointer }
.lb-close:hover{ background:rgba(255,255,255,.32) }
@media (max-width:960px){ .lb-prev{ left:8px } .lb-next{ right:8px } }

/* Filtros de galería */
.gallery-filters{ display:flex; flex-wrap:wrap; gap:.5rem; margin:.5rem 0 1rem }
.chip{ border:1px solid rgba(0,0,0,.1); background:#fff; padding:.4rem .8rem; border-radius:999px; cursor:pointer; font-weight:600; letter-spacing:.02em }
.chip.is-active{ border-color:var(--accent); color:#fff; background:var(--accent) }
.gallery-h2{ margin:1rem 0 .6rem }

/* Galería destacada: 3 thumbs iguales */
.gallery-equal > figure{
  border-radius:8px; overflow:hidden; margin:0;
  aspect-ratio: 3 / 2;      /* alto uniforme para las 3 */
  position:relative;
}
.gallery-equal > figure picture,
.gallery-equal > figure img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;          /* recorta suavemente si alguna se sale */
}
@media (max-width: 900px){
  .gallery-equal > figure{ aspect-ratio: 4 / 3; } /* opcional en móvil */
}

/* ==========================
   12) Inventario (equipamiento interno)
   ========================== */
.printable{ padding:1.25rem }
.inv-meta{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem; padding:.6rem 0; border-bottom:1px dashed rgba(0,0,0,.15); margin-bottom:1rem }
.editable{ padding:.1rem .3rem; border:1px dashed rgba(0,0,0,.15); border-radius:4px }
.inv-h2{ margin:1.1rem 0 .4rem }
.inv-grid{ list-style:none; padding:0; margin:0 0 .6rem 0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.45rem .9rem }
.inv-item label{ display:flex; align-items:center; gap:.55rem; padding:.35rem .5rem; border:1px solid rgba(0,0,0,.07); border-radius:8px; background:#fff }
.inv-item .chk{ width:18px; height:18px }
.inv-item .txt{ user-select:none }
.inv-firmas{ display:flex; gap:2rem; flex-wrap:wrap; margin-top:.9rem; border-top:1px dashed rgba(0,0,0,.15); padding-top:.8rem }
@media (max-width:960px){
  .inv-meta{ grid-template-columns:1fr }
  .inv-grid{ grid-template-columns:1fr }
}

/* ==========================
   13) Footer (con mapa unificado)
   ========================== */
footer.site-footer{
  padding:2.2rem 0 2.4rem;
  margin-top:3rem;
  background:#0a0a0a;
  color:#d8d8d8;
}
footer.site-footer a{ color:#fff; text-decoration:none }
footer.site-footer a:hover{ text-decoration:underline }

/* Layout */
.footer-grid{
  display:grid; gap:1.25rem; align-items:start;
  grid-template-columns:1.2fr 1fr 1.2fr;
}

/* Col 1: dirección + contacto */
.f-address{ margin:.25rem 0 .8rem; font-style:normal; color:#e5e5e5 }
.f-contact{ display:flex; flex-direction:column; align-items:flex-start; gap:.45rem }

/* Pastillas de contacto */
.brand-pill{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.36rem .60rem;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  font-weight:700; letter-spacing:.02em;
}
.brand-pill i, .brand-pill svg{ width:16px; height:16px }
.brand-pill:hover{ background:rgba(255,255,255,.10); text-decoration:none }
.brand-pill::before{ display:none !important; content:none !important }

/* Col 2: CTA + plataformas */
/* Footer: dos CTAs apilados, mismo ancho, sin 100% */
.f-cta{
  display: inline-grid;       /* se comporta como “contenido” y no llena toda la columna */
  grid-auto-flow: row;        /* apilados verticalmente */
  row-gap: .6rem;             /* espacio entre botones */
  width: max-content;         /* el bloque mide lo que el botón más ancho */
  max-width: 100%;            /* si en móviles no cabe, que no desborde */
  margin: .25rem auto .6rem;     /* deja el bloque pegado a la izquierda */
  justify-items: stretch;     /* cada botón ocupa el ancho del grid */
}

/* Los dos botones igualan el ancho calculado */
.f-cta .btn{
  width: 100%;
  text-align: center;
  white-space: nowrap;        /* evita que parta en dos líneas */
}

.f-sub{ color:#d8d8d8; opacity:.8; margin:.2rem 0 .4rem; font-size:.95rem }
.f-brand-icons{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center }
.brand-icon{
  width:44px; height:44px; border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  display:inline-block;
  background-image:var(--logo);
  background-repeat:no-repeat; background-position:center; background-size:26px 26px;
  box-shadow:0 12px 24px -16px rgba(0,0,0,.6);
}
.brand-icon:hover{ background-color:rgba(255,255,255,.10) }
.brand-icon.booking{ --logo:url('/images/brands/booking.svg') }
.brand-icon.airbnb { --logo:url('/images/brands/airbnb.svg') }
.brand-icon.google { --logo:url('/images/brands/google.svg') }
.brand-icon.erural{
  --logo: image-set(
    url('/images/brands/escapada_rural.png') 1x,
    url('/images/brands/escapada_rural@2x.png') 2x
  );
  background-image: var(--logo);
}

/* Col 3: Mapa + placeholder (UNIFICADO • antes había duplicados) */
.f-map{
  position:relative; border-radius:10px; overflow:hidden;
  box-shadow:0 20px 40px -28px rgba(0,0,0,.7);
  border:1px solid rgba(255,255,255,.08);
  height:240px; display:flex; align-items:center; justify-content:center;
}
.f-map iframe{ display:block; width:100%; height:100%; border:0 }
@media (max-width:960px){ .f-map{ height:220px } }

.map-placeholder{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  padding:.6rem; border-radius:10px;
  background:rgba(255,255,255,.04); border:1px dashed rgba(255,255,255,.14);
  text-align:left;
}
.map-note{ margin:0; font-size:.95rem; color:#dcdcdc }

/* Fila inferior */
.footer-bottom{
  margin-top:1.3rem; padding-top:.9rem;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  font-size:.95rem;
}
@media (max-width:960px){ .footer-bottom{ flex-direction:column; align-items:flex-start; gap:.35rem } }
.f-legal a{ color:#dcdcdc }

/* ==========================
   14) Cookie Consent (modal + banner)
   ========================== */
.cc-backdrop{
  position:fixed; inset:0; z-index:3000;
  background:rgba(0,0,0,.6);
  display:none; align-items:center; justify-content:center;
}
.cc-backdrop.open{ display:flex }
.cc-modal{
  background:#fff; color:#0a0a0a; width:min(680px, calc(100% - 32px));
  border-radius:12px; box-shadow:0 20px 50px -20px rgba(0,0,0,.5);
}
.cc-modal header{
  padding:16px 20px; border-bottom:1px solid #eee;
  font-family:"Gilda Display", Georgia, serif; font-size:1.25rem;
}
.cc-body{ padding:16px 20px }
.cc-note{ font-size:.92rem; color:#555 }
.cc-actions{
  padding:12px 20px 16px; border-top:1px solid #eee;
  display:flex; gap:.5rem; justify-content:flex-end;
}

/* switches */
.cc-switch{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.55rem .75rem; border:1px solid #eee; border-radius:8px; margin:.5rem 0;
}
.cc-switch .label{ font-weight:700 }
.cc-switch .desc{ font-size:.9rem; color:#555 }
.cc-switch input{ width:44px; height:22px }

/* Botón outline a juego (reutiliza .btn) */
.btn.cc-outline{ background:transparent; color:var(--accent); border:1px solid var(--accent) }

/* ===== Cookie banner ===== */
.cc-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:10000;
  background:#0f0f0f; color:#eaeaea;
  border-top:1px solid rgba(255,255,255,.08);
  box-shadow:0 -20px 40px -30px rgba(0,0,0,.6);
  transform:translateY(100%); transition:transform .25s ease;
}
.cc-banner.open{ transform:translateY(0) }
.cc-banner .inner{
  max-width:1140px; margin:0 auto; padding:.9rem 15px;
  display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
}
.cc-banner p{ margin:0; flex:1 }
.cc-banner .actions{ display:flex; gap:.5rem }

/* Contextos outline (oscuro/claro) */
.cc-banner .btn.cc-outline{
  background:transparent; border:1px solid #fff; color:#fff;
}
.cc-banner .btn.cc-outline:hover{ background:rgba(255,255,255,.12); text-decoration:none }
.cc-modal .btn.cc-outline{
  background:transparent; border:1px solid var(--accent); color:var(--accent);
}
.cc-modal .btn.cc-outline:hover{
  background:rgba(163,125,76,.12); text-decoration:none;
}
/* ===== Cookie banner móvil (compacto) ===== */
@media (max-width:640px){
  #cc-banner{
    padding-bottom: calc(env(safe-area-inset-bottom, 0) + 6px);
  }
  #cc-banner .inner{
    padding: 10px 12px;
    gap: .5rem;
  }
  #cc-banner p{
    flex: 1 1 100%;
    margin: 0 0 6px;
    font-size: .95rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }
  /* Dos botones arriba, en grid */
  #cc-banner .actions{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  /* Preferencias + Aceptar ocupan cada uno media fila */
  #ccb-prefs, #ccb-accept{ width:100% }

  /* "Solo técnicas" como enlace, a todo el ancho abajo */
  #cc-banner .actions .cc-reject{
    grid-column: 1 / -1;
    justify-self: center;
    background: transparent !important;
    border: 0 !important;
    color: #cbd5e1 !important;
    text-decoration: underline;
    padding: 6px 8px;
    font-weight: 500;
  }

  /* Outline legible en fondo oscuro */
  #cc-banner .btn.cc-outline{
    border: 1px solid rgba(255,255,255,.85);
    color:#fff;
  }
}

@media (max-width:360px){
  #cc-banner p{ font-size:.9rem }
  #cc-banner .actions .btn{ padding: 10px 12px }
}

@media (prefers-reduced-motion: reduce){
  #cc-banner{ transition:none }
}
/* ==========================
   15) Print
   ========================== */
@media print{
  .no-print{ display:none !important }
  header.site-header, footer.site-footer{ display:none !important }
  body{ background:#fff }
  .card{ box-shadow:none; border:1px solid #bbb }
  .container{ max-width:none; padding:0 }
  .printable{ padding:0 }
}

/* ==========================
   16) Reseñas (Home)
   ========================== */
/* Badges con SVG */
.platform-badge{ display:inline-flex; align-items:center; padding:0; border:0; background:transparent; box-shadow:none }
.platform-badge .icon{ --s:22px; width:var(--s); height:var(--s); background:var(--logo) no-repeat center/contain }
.platform-badge.booking{ --logo:url('/images/brands/booking.svg') }
.platform-badge.airbnb { --logo:url('/images/brands/airbnb.svg') }
.platform-badge.google { --logo:url('/images/brands/google.svg') }

/* Controles (prev/dots/next) */
.platform-col .controls{ width:100% }
.platform-col .controls .dots{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:.35rem; max-width:100%;
}
.platform-col .controls .dot{
  width:10px; height:10px; border-radius:999px; border:1px solid #d1d5db;
  background:#fff; opacity:.8; cursor:pointer;
}
.platform-col .controls .dot.is-active{
  background:var(--accent); border-color:var(--accent); opacity:1; transform:scale(1.05);
}
.platform-col .controls .prev,
.platform-col .controls .next{ flex:0 0 auto }
.platform-col .prev[hidden], .platform-col .next[hidden]{ display:none !important }

/* Play/Pause */
.platform-col .play-row{ display:flex; justify-content:center; margin-top:.35rem }
.platform-col .play-btn{
  border:1px solid #e5e7eb; background:#fff; border-radius:999px;
  padding:.35rem .8rem; font-weight:600;
}
.platform-col .play-btn.is-paused{ background:#f8fafc }

/* Botón pequeño y enlaces de acción */
.link{ background:none;border:0;padding:0;cursor:pointer;color:var(--accent);text-decoration:underline }
.link:focus-visible{ outline:2px solid var(--accent) }

/* Estrellas */
.review-stars{ white-space:nowrap; font-size:1rem; letter-spacing:.02em; cursor:pointer }
.review-stars .empty{ opacity:.3 }

/* Texto de reseña sin recortes */
.review-card p{ max-height:none; overflow:visible; line-height:1.55 }

/* Panel de rating */
.rating-panel{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; align-items:center }
@media (max-width:960px){ .rating-panel{ grid-template-columns:1fr } }
.rating-big{ display:flex; align-items:center; gap:.8rem }
.rating-big .value{ font-size:2rem; font-weight:700 }
.rating-bars{ display:flex; flex-direction:column; gap:.35rem }
.rating-bars .row{ display:grid; grid-template-columns:18px 1fr 24px; gap:.5rem; align-items:center }
.rating-bars .track{ position:relative; height:8px; border-radius:999px; background:rgba(0,0,0,.08) }
.rating-bars .fill{ position:absolute; inset:0; width:var(--p); border-radius:999px; background:var(--accent) }
.rating-bars .row[role="button"]{ cursor:pointer }

/* Espaciado CTA reseñas */
.reviews-cta{ text-align:center; margin-top:2.25rem; margin-bottom:2rem }

/* Modal de reseñas */
.rev-modal-backdrop{
  position:fixed; inset:0; z-index:1500;
  background:rgba(0,0,0,.55);
  display:flex; align-items:flex-start; justify-content:center;
  padding:24px;
}
.rev-modal-backdrop[hidden]{ display:none }
.rev-modal{
  background:#fff; border-radius:12px; width:min(100%, 960px);
  max-height:85vh; overflow:auto; padding:16px;
  box-shadow:0 30px 80px rgba(0,0,0,.45);
}
.rev-modal-header{
  background:#fff;
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:.4rem; margin-bottom:.4rem;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.rev-modal-close{
  width:36px; height:36px; border-radius:999px;
  border:1px solid #e5e7eb; background:#fff; font-size:22px; line-height:1;
  cursor:pointer;
}
body.modal-open{ overflow:hidden }

/* Meta derecha: logo + nota/estrellas */
.rev-meta-right{ display:flex; align-items:center; gap:.35rem }

/* Logos de plataforma (visibles en modal) */
.plat-logo{
  --s:18px; width:var(--s); height:var(--s);
  background:var(--logo) no-repeat center/contain;
  display:inline-block;
}
.plat-logo.booking{ --logo:url('/images/brands/booking.svg') }
.plat-logo.airbnb { --logo:url('/images/brands/airbnb.svg') }
.plat-logo.google { --logo:url('/images/brands/google.svg') }
/* En columnas se ocultan; en el modal se muestran */
.review-card .plat-logo{ display:none }
.rev-modal .review-card .plat-logo{ display:inline-block }

/* Nota estilo Booking (0–10) */
.score-badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:40px; padding:.2rem .5rem; border-radius:8px;
  font-weight:700; font-feature-settings:"tnum" 1; letter-spacing:.02em;
}
.score-badge.booking{ background: var(--brand-booking); color:#fff; box-shadow:0 2px 10px rgba(0,0,0,.12) }

/* ==========================
   17) Formularios (global)
   ========================== */
.field label{ display:block; font-weight:600; color:var(--ink); margin-bottom:.35rem }
.field .help{ font-size:.9rem; color:var(--muted); margin-top:.35rem }
.inline{ display:flex; align-items:center; gap:.6rem }

.field input,
.field textarea,
.field select{
  width:100%;
  padding:.85rem 1rem;
  border:1px solid rgba(0,0,0,.12);
  border-radius:8px;
  background:#fff;
  font:inherit;
}
.field input:focus,
.field textarea:focus,
.field select:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(163,125,76,.18);
}

/* Avisos del formulario */
.note{
  padding:.75rem 1rem;
  border:1px solid rgba(163,125,76,.25);
  background:rgba(163,125,76,.08);
  border-radius:8px;
}
.note.warn{ border-color:var(--accent) }

/* ==========================
   18) Cartas clicables en Entorno
   ========================== */
.card-link{
  display:block; text-decoration:none; color:inherit;
  transition:transform .12s ease, box-shadow .2s ease, border-color .2s;
}
.card-link .more{ font-weight:700; color:var(--accent); text-decoration:underline }
.card-link:hover{ transform:translateY(-2px); box-shadow:0 16px 40px -24px rgba(0,0,0,.45); text-decoration:none }

/* ==========================
   19) Componentes → FAQ (Acordeón)
   ========================== */
.faq-wrap{
  max-width: 68rem;
  margin: 0 auto;
  padding: 4rem 1.25rem 5rem;
}
.faq-head h1{
  font-size: clamp(2rem, 1.2rem + 2vw, 3rem);
  color: var(--ink);
  text-align: center;
  margin: 0 0 .5rem;
}
.faq-head .lead{
  color: var(--muted);
  text-align: center;
  max-width: 60ch;
  margin: 0 auto 2rem;
}
.faq{ display: grid; gap: 1rem; }

.faq-item{
  border: 1px solid #e9e3d6;
  border-radius: 1rem;
  background: #fffdfa;
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
  overflow: clip;
}
.faq-q{
  list-style: none;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .75rem;
  padding: 1rem 1.25rem;
  cursor: pointer;
}
.faq-q h3{
  margin: 0;
  font-size: 1.0625rem;
  color: var(--ink);
  letter-spacing: .2px;
}
.faq-icon{
  width: 2.25rem; height: 2.25rem;
  display: inline-grid; place-items: center;
  border: 1px solid #ddd2bc;
  border-radius: 999px;
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
  color: var(--ink);
}
/* abierto */
.faq-item[open] .faq-icon{
  transform: rotate(45deg);
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.faq-a{
  padding: 0 1.25rem 1.25rem;
  color: #3d3d3d;
  line-height: 1.6;
}
/* hover / focus accesible */
.faq-q:focus-visible,
.faq-q:hover{ outline: none; }
.faq-q:hover .faq-icon{ border-color: var(--accent-hover); }

/* CTA inferior (compatibilidad con .btn y variantes) */
.faq-ctas{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: .75rem;
  margin-top: 2rem;
}

/* Respeto usuarios con reduce motion */
@media (prefers-reduced-motion: reduce){ .faq-icon{ transition: none } }

/* ==========================
   20) Entorno (layout y componentes)
   ========================== */
.hero-plain { padding: 3rem 0 1.5rem; background: linear-gradient(#b7ae9d, #b7ae9d) top/100% 120px no-repeat; }
.hero-plain .lead { opacity:.9; margin-top:.25rem; }

.entorno-subnav{
  max-width:1140px; padding:0 15px;
  margin: .75rem auto 1.25rem;
  display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap;
}
.entorno-subnav a{ padding:.5rem .75rem; border-radius:999px; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.04); border:1px solid #eee; font-weight:600 }

.entorno-section{ margin-top: 1.25rem }
@media (min-width:960px){ .entorno-section{ margin-top: 1.75rem } }

.entorno-grid{ display:grid; gap:2rem; margin-top:1.25rem }
@media (min-width: 1024px){
  .entorno-grid{ grid-template-columns: 1fr 460px; align-items:start }
}
.map-card{ display:flex; align-items:center; justify-content:center }
.map-ribera{ width:100%; max-width:420px; height:auto; border-radius:18px; box-shadow:0 10px 30px rgba(0,0,0,.06) }

.cards-3{ display:grid; gap:1rem; margin:1.25rem auto }
@media (min-width: 768px){ .cards-3{ grid-template-columns: repeat(3,1fr) } }

.text-link{ border-bottom:1px solid currentColor }

/* Tabs (CSS-only) */
.tabs{ --c:#166534; margin-top:.25rem }
.tabs input{ position:absolute; left:-9999px }
.tabs label{ display:inline-block; padding:.4rem .8rem; margin-right:.4rem; border:1px solid #e5e5e5; border-radius:999px; cursor:pointer }
#tab1:checked ~ label[for="tab1"], #tab2:checked ~ label[for="tab2"]{ background:var(--c); color:#fff; border-color:var(--c) }
.tab-content{ display:none; margin-top:1rem }
#tab1:checked ~ .tab-content[data-for="tab1"],
#tab2:checked ~ .tab-content[data-for="tab2"]{ display:block }

/* Mapa consent-aware */
.map-embed .leaflet-slot{ aspect-ratio: 16/9; width:100%; border-radius:12px; background:#f3f3f3 }
.embed-placeholder{ text-align:center; padding:1rem }
.embed-placeholder .actions{ display:flex; gap:.5rem; justify-content:center; margin-top:.5rem }

/* Tarjetas con estética consistente */
.card > .prose{ max-width: none; margin:0 }
.entorno-section .card{
  border-radius: 8px;
  box-shadow: var(--sh-card);
  border:1px solid rgba(0,0,0,.08);
}
/* Anclas con header fijo */
section[id]{ scroll-margin-top: calc(var(--header-h) + 16px) }

/* CTA final — ancho ajustado al contenido (desktop) */
.cta-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.8rem;
  text-align:center;

  /* clave: encoger al contenido y centrar */
  width: fit-content;            /* se adapta al contenido */
  max-width: min(100%, 48rem);   /* seguridad para no desbordar en pantallas pequeñas */
  margin: 0 auto;                /* centrado dentro del .container */
  /* (mantén tu padding actual si lo habías reducido) */
}

.cta-card h2,
.cta-card p{
  /* limita el ancho de las líneas para que la card no se haga enorme por el titular */
  max-width: 38ch;
  margin: 0 auto;
}

.cta-actions{
  display:flex;
  gap:.6rem;
  justify-content:center;

  /* la fila ocupa lo que miden los botones (no todo el contenedor) */
  width: max-content;
  max-width:100%;
}


/* CTA final — compactar solo en escritorio */
@media (min-width:961px){
  .cta-card{
    padding: .9rem 1.25rem;   /* antes 1.25rem arriba/abajo */
    gap: .6rem;               /* un pelín menos de separación interna */
  }
  .cta-actions{ margin-top: .2rem; } /* microaire bajo el texto */
}


/* Utilidad general */
.text-center{ text-align:center; }

/* === ESCRITORIO (≥961px) — héroes SIN imagen a la IZQUIERDA === */
@media (min-width:961px){
  .page-hero.noimg .inner,
  .page-hero.noimg .container.inner{
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    align-items:flex-start !important;  /* texto a la izquierda */
    text-align:left !important;

    /* CLAVE: el container sigue centrado y con aire lateral */
    margin-inline:auto !important;      /* (antes poníamos 0) */
    padding-inline:15px;                 /* evita que quede pegado a los bordes */
  }

  .page-hero.noimg h1,
  .page-hero.noimg .page-lead{
    margin:0 !important;
    text-align:left !important;
  }

  /* Si por error el HTML lleva .text-center, lo anulamos SOLO aquí */
  .page-hero.noimg .inner.text-center,
  .page-hero.noimg .container.inner.text-center{
    align-items:flex-start !important;
    text-align:left !important;
  }
}

/* ==========================
   21) Media query móvil (única) — LIMPIA
   ========================== */
@media (max-width:960px){
  /* Héroe (home): apilar y centrar botones */
  .hero .actions{ display:flex; flex-direction:column; align-items:center; gap:.6rem; }
  .hero .actions .btn{ width:100%; max-width:320px; margin:0 !important; }
  .hero .actions .btn + .btn{ margin-left:0 }

  /* Héroes de PÁGINA SIN imagen (auto, sm, full-bleed): centrar BLOQUE + TEXTO */
  .page-hero.noimg .inner,
  .page-hero.noimg .container.inner{
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-end !important;   /* no cambiamos vertical */
    align-items:center !important;         /* centra el BLOQUE */
    text-align:center !important;          /* centra el TEXTO */
    margin-inline:auto !important;         /* centra el propio .container/.inner */
    padding: calc(var(--header-h) + 12px) 20px 40px;
    padding-left:  calc(20px + env(safe-area-inset-left));
    padding-right: calc(20px + env(safe-area-inset-right));
  }
  .page-hero.noimg h1{ max-width:28ch; margin:0 auto !important; }
  .page-hero.noimg .page-lead{ max-width:34ch; margin:.35rem auto 0 !important; }

  /* Reseñas: 1 col */
  #reviewsByPlatform{ grid-template-columns:1fr }

  /* Inventario */
  .inv-meta{ grid-template-columns:1fr }
  .inv-grid{ grid-template-columns:1fr }

  /* Lightbox */
  .lb-prev{ left:8px } .lb-next{ right:8px }

  /* Footer */
  .f-map{ height:220px }
  .footer-grid{ grid-template-columns:1fr }
  .footer-bottom{ flex-direction:column; align-items:flex-start; gap:.35rem }

  /* CTA final: apilar */
  .cta-card{ flex-direction:column; align-items:stretch; text-align:center; }
  .cta-actions{ width:100%; flex-direction:column; gap:.9rem; margin-top:.4rem; }
  .cta-actions .btn{ width:100%; margin:0 }

  /* “Para familias”: centrada dentro de la grid cuando pasa a 1 columna */
  .grid.cols-3 > .card.center-narrow{
    justify-self:center !important;
    width:clamp(18rem, 92vw, 28rem) !important;
    margin-inline:auto !important;
    padding-inline:16px;
  }
}
/* MÓVIL: héroes CON imagen → centrado HORIZONTAL por defecto */
@media (max-width:960px){
  .page-hero:not(.noimg) .inner,
  .page-hero:not(.noimg) .container.inner{
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-end;            /* sigue anclado ABAJO por defecto */
    align-items:center !important;       /* ← centra el BLOQUE */
    text-align:center !important;        /* ← centra el TEXTO */
    margin-inline:auto !important;
    padding: calc(var(--header-h) + 12px) 20px 40px;
    padding-left:  calc(20px + env(safe-area-inset-left));
    padding-right: calc(20px + env(safe-area-inset-right));
  }

  .page-hero:not(.noimg) h1{
    max-width:28ch;
    margin:0 auto !important;
    color:#fff;                          /* asegura contraste */
  }

  .page-hero:not(.noimg) .page-lead{
    max-width:34ch;
    margin:.35rem auto 0 !important;
  }

  .page-hero:not(.noimg) .kicker{ text-align:center; }

  /* —— UTILIDADES VERTICALES (opt-in en móvil) —— */
  /* Úsalas en el <section> del hero cuando quieras cambiar el anclaje vertical */
  .page-hero.center-mobile .inner{ justify-content:center !important; }     /* centrado vertical */
  .page-hero.top-mobile    .inner{ justify-content:flex-start !important; } /* anclado arriba  */
}

/* (Opcional) Si activas .center-mobile con frecuencia en héroes "sm",
   quizá prefieras que no dependan de vh en móvil para que respiren como .auto */
@media (max-width:960px){
  .page-hero.sm{ height:auto; min-height:calc(220px + var(--header-h)); }
}
/* Idiomas: el bloque móvil va oculto por defecto */
.lang-block{ display:none; }
/* Móvil (≤960px): lista segmentada en FILAS + menos aire */
@media (max-width:960px){
  /* Bloque y título */
  .lang-block{
    margin:.4rem 0 0; padding:.45rem 0 0;
    border-top:1px solid rgba(255,255,255,.08);
  }

  .lang-title{
    margin:0 0 .3rem; padding:0 .2rem;
    font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
    color:rgba(255,255,255,.6);
  }

  /* Segmentado en vertical */
  .lang-seg{
    display:flex; flex-direction:column; width:100%;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.12);
    border-radius:12px; overflow:hidden;
  }
  .seg-btn{
    width:100%; min-width:0;
    display:flex; align-items:center; justify-content:flex-start; gap:.5rem;
    padding:.5rem .65rem; background:transparent; color:#eaeaea;
    border:0; font:inherit; line-height:1.1; white-space:nowrap;
    text-decoration:none;             /* por si ahora es <a> */
    cursor:pointer;
  }
  .seg-btn + .seg-btn{ border-top:1px solid rgba(255,255,255,.1); }
  .seg-btn .flag{ width:16px; height:16px; border-radius:2px; }
  .seg-btn .code{ font-weight:600; font-size:.85rem; letter-spacing:.03em; }
  .seg-btn.is-active{ background:rgba(22,163,74,.18); color:#fff; }
}

/* Extra fino móviles muy estrechos */
@media (max-width:380px){
  .page-hero.noimg .container.inner{ padding-left:18px; padding-right:18px; }
}
/* ==========================
   22) Accesibilidad global: Reduce Motion
   ========================== */
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ==========================
   24) reCAPTCHA (Netlify) responsive
   ========================== */
/* Contenedor del widget: céntralo y evita scroll horizontal */
/* Este código es para ajustar el reCAPTCHA en pantallas pequeñas */
@media (max-width: 960px) {
  .g-recaptcha {
    transform: scale(0.87);
    transform-origin: 0 0;
  }
}
/* ==========================
   24) Features (La Casa)
   ========================== */

/* Lista con rejilla responsive */
.features{
  list-style:none; margin:0; padding:0;
  display:grid; gap:.75rem;
  /* Mobile-first: 2 columnas en ancho normal, 1 col en móviles muy estrechos */
  grid-template-columns:repeat(2, minmax(0,1fr));
}

/* Teléfonos muy estrechos (≤380px aprox.): 1 columna para que nada se corte */
@media (max-width:380px){
  .features{ grid-template-columns:1fr; }
}

/* Desktop (≥961px): 3 columnas cómodas */
@media (min-width:961px){
  .features{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}

/* Tarjeta de cada feature */
.feature{
  /* grid interior: icono + texto */
  display:grid;
  grid-template-columns:42px minmax(0,1fr); /* ← clave: minmax(0,1fr) evita desbordes */
  align-items:center; gap:.65rem;
  padding:.9rem; border-radius:16px;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 1px 4px rgba(0,0,0,.04);
  min-width:0; /* ← permite que el contenido pueda encoger y envolver */
  font-size:.96rem; line-height:1.35;
  overflow-wrap:anywhere; /* por si aparecen palabras/líneas muy largas */
  -webkit-hyphens:auto; hyphens:auto; /* ayuda a cortar en español si el navegador lo soporta */
}

/* Icono redondo tipo “medalla” */
.icon-24{
  inline-size:36px; block-size:36px;
  display:inline-grid; place-items:center;
  border-radius:999px;
  background:#efe7db;         /* dorado claro (ajústalo si usas variables) */
  color:#9b7b4a;               /* dorado más oscuro para el trazo */
  flex-shrink:0;
}

/* SVGs coherentes */
.icon-24 svg{
  inline-size:20px; block-size:20px;
  stroke:currentColor; fill:none; stroke-width:2;
}

/* Un poco más de aire en pantallas grandes */
@media (min-width:961px){
  .feature{ grid-template-columns:48px minmax(0,1fr); padding:1rem; }
  .icon-24{ inline-size:40px; block-size:40px; }
}

/* Desktop (≥961px): volver a mostrar el botón de idioma */
@media (min-width:961px){
  /* Muchos estilos ocultan .sub-toggle en desktop; reactivamos SOLO el de idioma */
  .lang-switch .sub-toggle{
    display:inline-flex !important;
    align-items:center; gap:.35rem;
    padding:.35rem .55rem;
    border:1px solid rgba(255,255,255,.12);
    border-radius:10px;
    background:rgba(255,255,255,.06);
  }
  .lang-switch .sub-toggle:hover{ background:rgba(255,255,255,.1); }
  .lang-switch .lang-flag{ width:16px; height:16px; border-radius:2px; }
  .lang-switch .lang-code{ font-weight:600; font-size:.85rem; letter-spacing:.03em; }
}

/* ========== NAV: sin cortes de palabras en escritorio ========== */
@media (min-width:961px){
  header .nav-links a,
  .nav .nav-link{
    white-space: nowrap;
    word-break: normal;
  }
}

/* EN/FR: baja el tracking para que no “explote” la tipografía */
html[lang="fr"] header .nav-links a,
html[lang="en"] header .nav-links a,
html[lang="fr"] .nav .nav-link,
html[lang="en"] .nav .nav-link{
  letter-spacing: .08em; /* tu valor normal es .14em */
}

/* ========== IDIOMAS: blindaje responsive (evita duplicados) ========== */
/* Desktop: oculta el bloque móvil sí o sí */
@media (min-width:961px){
  .lang-block{ display:none !important; }
}
/* Móvil: oculta el dropdown de escritorio y muestra el bloque móvil */
@media (max-width:960px){
  .nav-links .lang-switch{ display:none !important; }
  .lang-block{ display:block !important; }
}

/* (por si alguna regla previa lo anulaba) mantener visible el botón de idioma en desktop */
@media (min-width:961px){
  .nav-links .lang-switch{ display:inline-flex !important; align-items:center; }
}
/* ===== FIX: submenú de IDIOMAS sin puntito heredado ===== */
.nav .lang-switch .submenu a::before { content: none !important; display: none !important; }

/* Resalte del idioma activo (sin pseudo-elemento) */
.nav .lang-switch .submenu a.is-active{
  font-weight: 700;
  background: var(--menu-hover);
  border-radius: 6px;
}

/* Asegura layout y alineado bonito */
.nav .lang-switch .submenu a{
  display: flex; align-items: center; gap: .5rem;
  padding: .45rem .6rem;
}

/* Línea de rating compacta y centrada */
.rating-inline{
  display:flex;
  align-items:center;
  gap:.8rem 1rem;
  width:max-content;     /* se encoge al contenido */
  max-width:100%;
  margin:0 auto;         /* centrado en la .container */
}

/* Logos a la derecha del bloque de rating */
.rating-logos{
  display:flex;
  align-items:center;
  gap:.45rem;
}

/* Mobile: apila y centra el texto */
@media (max-width:600px){
  .rating-inline{ flex-direction:column; text-align:center; }
}
/* ===== Lede bajo el hero ===== */
.section-lede{
  margin-top: clamp(1.5rem, 4vw, 3rem);
  margin-bottom: clamp(1rem, 3vw, 2rem);
}
.page-hero + .section-lede,
.hero + .section-lede{
  /* si hay hero, más aire arriba */
  margin-top: clamp(2rem, 6vw, 3.5rem);
}

.card.lede{
  padding: clamp(1rem, 3.2vw, 1.5rem);
  border-radius: 1rem;          /* coherente con tus tarjetas */
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  background: #fff;
}

.lede-title{
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  line-height: 1.2;
  margin: 0 0 .4rem;
}

.lede-text{
  color: var(--muted);
  max-width: 70ch;
  margin: 0;
}
.lede-text strong{
  color: var(--ink);
  font-weight: 600;             /* sube énfasis sin gritar */
}