/* =================================================================
   base.css — Estilos compartidos (layout + componentes), agnósticos
   de color. La paleta se inyecta por tema (theme-acampada.css /
   theme-bungalows.css) seleccionado por body[data-seccion].
   Camping Picos de Europa — rediseño 2026.
   ================================================================= */

/* Paleta por defecto (acampada). Cada tema la sobreescribe. */
:root {
  --c-primary:#1f6b3a;
  --c-primary-dark:#0c5131;
  --c-accent:#f2a541;
  --c-bg:#f3f7f2;
  --c-surface:#ffffff;
  --c-text:#10331f;
  --c-muted:#6f8a76;
  --c-border:#dde7dd;

  --font-base:"Trebuchet MS", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --radius:14px;
  --radius-sm:8px;
  --shadow:0 8px 28px rgba(0,0,0,.10);
  --shadow-sm:0 2px 10px rgba(0,0,0,.08);
  --container:1200px;
  --header-h:84px;
}

*,*::before,*::after { box-sizing:border-box; }

html { scroll-behavior:smooth; }

body {
  margin:0;
  font-family:var(--font-base);
  font-size:16px;
  line-height:1.6;
  color:var(--c-text);
  background:var(--c-bg);
}

img { max-width:100%; height:auto; display:block; }

a { color:var(--c-primary); text-decoration:none; transition:color .2s ease; }
a:hover { color:var(--c-accent); }

h1,h2,h3 { line-height:1.2; margin:0 0 .5em; color:var(--c-primary-dark); }
h1 { font-size:clamp(1.8rem,4vw,2.6rem); }
h2 { font-size:clamp(1.3rem,2.5vw,1.7rem); }

.container { width:min(100% - 2rem, var(--container)); margin-inline:auto; }
.ajustar { clear:both; }

/* ---------- Botones ---------- */
.btn {
  display:inline-block;
  padding:.8rem 1.6rem;
  border-radius:var(--radius-sm);
  background:var(--c-primary);
  color:#fff;
  font-weight:600;
  border:0;
  cursor:pointer;
  transition:transform .15s ease, background .2s ease;
}
.btn:hover { background:var(--c-primary-dark); color:#fff; transform:translateY(-2px); }
.btn--accent { background:var(--c-accent); color:#1d1505; }
.btn--accent:hover { filter:brightness(.95); color:#1d1505; }

/* =================================================================
   Cabecera / navegación
   ================================================================= */
.site-header {
  position:sticky; top:0; z-index:100;
  background:var(--c-primary-dark);
  box-shadow:var(--shadow-sm);
}
.site-header__inner {
  display:flex; align-items:center; gap:1.5rem;
  min-height:var(--header-h);
}
.site-header__logo img { max-height:56px; }
.site-header__brand-text { color:#fff; font-weight:700; font-size:1.4rem; letter-spacing:.03em; white-space:nowrap; }
.site-header__spacer { flex:1; }

.nav { display:flex; gap:.25rem; align-items:center; }
.nav a { color:#fff; padding:.6rem .9rem; border-radius:var(--radius-sm); font-weight:600; }
.nav a:hover, .nav a[aria-current="page"] { background:rgba(255,255,255,.14); color:#fff; }

.nav__item { position:relative; }
.nav__sub {
  position:absolute; left:0; top:100%;
  min-width:220px;
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow);
  padding:.4rem;
  display:none;
}
.nav__item:hover .nav__sub,
.nav__item:focus-within .nav__sub { display:block; }
.nav__sub a { color:var(--c-text); display:block; }
.nav__sub a:hover { background:var(--c-bg); color:var(--c-primary); }

/* Selector de idioma */
.langs { display:flex; gap:.4rem; align-items:center; }
.langs a { padding:.2rem; border-radius:4px; opacity:.8; }
.langs a:hover, .langs a[aria-current="true"] { opacity:1; outline:2px solid var(--c-accent); }
.langs img { width:26px; height:auto; border-radius:3px; }

/* Cambiar de sección (volver a la portada) */
.switch-seccion {
  color:#fff; font-weight:600; font-size:.85rem;
  padding:.45rem .8rem; border:1px solid rgba(255,255,255,.4);
  border-radius:999px;
}
.switch-seccion:hover { background:rgba(255,255,255,.15); color:#fff; }

/* Botón hamburguesa (móvil) */
.nav-toggle { display:none; background:none; border:0; cursor:pointer; padding:.5rem; }
.nav-toggle span { display:block; width:26px; height:3px; background:#fff; margin:5px 0; border-radius:2px; }

/* =================================================================
   Hero
   ================================================================= */
.hero {
  position:relative;
  min-height:340px;
  display:grid; place-items:center;
  background:var(--c-primary);
  color:#fff;
  text-align:center;
  overflow:hidden;
}
.hero__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55; }
.hero__inner { position:relative; padding:2rem; z-index:1; }
.hero h1 { color:#fff; text-shadow:0 2px 16px rgba(0,0,0,.4); }

/* =================================================================
   Layout de contenido (principal + barra lateral)
   ================================================================= */
.layout {
  display:grid;
  grid-template-columns:1fr 320px;
  gap:2rem;
  padding-block:2.5rem;
  align-items:start;
}
@media (max-width:900px){ .layout { grid-template-columns:1fr; } }

.barratitulo {
  font-size:1.4rem; font-weight:700; color:var(--c-primary-dark);
  border-bottom:3px solid var(--c-accent);
  padding-bottom:.5rem; margin-bottom:1.5rem;
}

/* Tarjetas de listado (artículos / banners de portada) */
.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1.25rem; }
.card {
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:transform .18s ease, box-shadow .18s ease;
}
.card:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
.card a { color:inherit; display:block; height:100%; }
.card__img { aspect-ratio:16/10; background:var(--c-border); }
.card__img img { width:100%; height:100%; object-fit:cover; }
.card__body { padding:1rem; }
.card__body h2 { font-size:1.1rem; margin:0 0 .4rem; }
.card__body p { margin:0; color:var(--c-muted); font-size:.92rem; }

/* Texto largo de ficha */
.ficha-texto { background:var(--c-surface); border-radius:var(--radius); padding:1.5rem; box-shadow:var(--shadow-sm); }
.ficha-texto p { margin:0 0 1rem; }

/* Galería de fotos (apartamentos, fichas) */
.galeria { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:.75rem; margin-top:1.5rem; }
.galeria__item { display:block; aspect-ratio:4/3; border-radius:var(--radius-sm); overflow:hidden; box-shadow:var(--shadow-sm); }
.galeria__item img { width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.galeria__item:hover img { transform:scale(1.06); }

/* =================================================================
   Barra lateral / reservas
   ================================================================= */
.sidebar { display:flex; flex-direction:column; gap:1.25rem; }

.booking {
  background:var(--c-primary-dark);
  color:#fff;
  border-radius:var(--radius);
  padding:1.25rem;
  box-shadow:var(--shadow);
}
.booking h2 { color:#fff; font-size:1.15rem; }
.booking label { display:block; font-size:.85rem; margin:.6rem 0 .25rem; }
.booking input, .booking select {
  width:100%; padding:.6rem .7rem; border:0; border-radius:var(--radius-sm);
  font-size:1rem; background:#fff; color:var(--c-text);
}
.booking .btn { width:100%; margin-top:1rem; }
.booking__link { display:block; text-align:center; margin-top:.8rem; color:#fff; text-decoration:underline; }
.booking__link:hover { color:var(--c-accent); }

.banner {
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.banner img { width:100%; aspect-ratio:16/9; object-fit:cover; }
.banner__text { padding:.9rem 1rem; }
.banner__text h2 { font-size:1.05rem; margin:0 0 .25rem; }
.banner--destacada { border:2px solid var(--c-accent); }

/* =================================================================
   Pie
   ================================================================= */
.site-footer {
  background:var(--c-primary-dark);
  color:#e9f1ea;
  padding-block:2.5rem;
  margin-top:3rem;
}
.site-footer a { color:#fff; }
.site-footer__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
@media (max-width:800px){ .site-footer__grid { grid-template-columns:1fr; } }
.site-footer h2 { color:#fff; font-size:1.1rem; }
.site-footer iframe { width:100%; height:200px; border:0; border-radius:var(--radius-sm); }
.site-footer__logos { display:flex; gap:1rem; align-items:center; margin-top:1rem; flex-wrap:wrap; }

/* =================================================================
   Responsive — navegación móvil
   ================================================================= */
@media (max-width:820px){
  .nav-toggle { display:block; }
  .nav {
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--c-primary-dark);
    padding:.5rem;
    display:none;
  }
  .nav.is-open { display:flex; }
  .nav__sub { position:static; box-shadow:none; border:0; background:rgba(255,255,255,.06); display:block; }
  .nav__sub a { color:#fff; }
}