/* =================================================================
   portada.css — Pantalla de selección (Acampada / Bungalows).
   Split-hero a pantalla completa con foto real por lado + pie de
   información genérico. Apila en vertical en móvil.
   ================================================================= */

* { box-sizing:border-box; }
body {
  margin:0;
  font-family:"Trebuchet MS","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  color:#fff;
  background:#15110d;
}

/* ---------- Split-hero ---------- */
.portada {
  position:relative;
  display:flex;
  min-height:100vh;
  min-height:100svh;
  width:100%;
}

.portada__half {
  position:relative;
  flex:1 1 50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  color:#fff;
  overflow:hidden;
  text-decoration:none;
  transition:flex-grow .5s cubic-bezier(.22,1,.36,1);
}

/* Imagen de fondo */
.portada__half::before {
  content:""; position:absolute; inset:0;
  background-size:cover; background-position:center;
  transform:scale(1.06);
  transition:transform .8s ease, filter .5s ease;
  z-index:0;
}
.portada__half--camping::before      { background-image:url(../img/portada-camping.jpg); }
.portada__half--apartamentos::before { background-image:url(../img/portada-apartamentos.jpg); }

/* Velo de color + degradado inferior para legibilidad */
.portada__half::after {
  content:""; position:absolute; inset:0; z-index:1;
  transition:opacity .5s ease;
}
.portada__half--camping::after {
  background:linear-gradient(180deg, rgba(12,81,49,.30) 0%, rgba(12,81,49,.20) 45%, rgba(8,50,30,.82) 100%);
}
.portada__half--apartamentos::after {
  background:linear-gradient(180deg, rgba(94,61,34,.32) 0%, rgba(94,61,34,.22) 45%, rgba(54,34,18,.85) 100%);
}

/* Hover / foco: la mitad activa crece y la foto se realza */
.portada__half:hover, .portada__half:focus-visible { flex-grow:1.5; outline:none; }
.portada__half:hover::before, .portada__half:focus-visible::before { transform:scale(1); }
.portada__half:hover::after,  .portada__half:focus-visible::after  { opacity:.78; }

.portada__content {
  position:relative; z-index:2; padding:2rem;
  transform:translateY(8px); transition:transform .5s ease;
}
.portada__half:hover .portada__content,
.portada__half:focus-visible .portada__content { transform:translateY(0); }

.portada__content h2 {
  font-size:clamp(2.1rem,5vw,3.6rem); margin:0 0 .5rem; color:#fff;
  text-shadow:0 3px 22px rgba(0,0,0,.55); letter-spacing:.03em; text-transform:uppercase;
}
.portada__content p {
  font-size:clamp(1rem,1.5vw,1.2rem); margin:0 auto 1.6rem; max-width:30ch;
  opacity:.96; text-shadow:0 1px 10px rgba(0,0,0,.6);
}
.portada__cta {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.85rem 2.2rem; border-radius:999px;
  background:rgba(255,255,255,.96); color:#1d1d1d; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; font-size:.9rem;
  box-shadow:0 8px 24px rgba(0,0,0,.3); transition:transform .25s ease, background .25s ease;
}
.portada__cta::after { content:"\2192"; transition:transform .25s ease; }
.portada__half:hover .portada__cta { transform:translateY(-3px); }
.portada__half:hover .portada__cta::after { transform:translateX(4px); }

/* Separador central */
.portada__half + .portada__half { box-shadow:-1px 0 0 rgba(255,255,255,.25); }

/* ---------- Marca + idiomas (sobre el hero) ---------- */
.portada__brand {
  position:absolute; top:1.4rem; left:50%; transform:translateX(-50%); z-index:10;
  text-align:center;
}
.portada__brand img {
  max-height:74px; padding:.6rem .9rem;
  background:rgba(0,0,0,.28); border-radius:12px;
  filter:drop-shadow(0 3px 14px rgba(0,0,0,.5));
}
.portada__brand-text {
  display:inline-block; padding:.5rem 1.1rem;
  font-size:clamp(1.3rem,2.6vw,1.9rem); font-weight:700; letter-spacing:.04em;
  color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.55);
  background:rgba(0,0,0,.28); border-radius:12px;
}

.portada__langs {
  position:absolute; top:1.6rem; right:1.6rem; z-index:10;
  display:flex; gap:.5rem;
}
.portada__langs a { opacity:.85; transition:opacity .2s ease, transform .2s ease; }
.portada__langs a:hover, .portada__langs a[aria-current="true"] { opacity:1; transform:scale(1.12); }
.portada__langs img { width:30px; border-radius:4px; box-shadow:0 1px 6px rgba(0,0,0,.5); }

/* ================================================================
   Pie de información genérico
   ================================================================ */
.portada-footer {
  background:#0c0a08;
  color:#cfc7bd;
  padding:2.5rem 1.5rem 1.5rem;
}
.portada-footer__grid {
  width:min(100% - 2rem, 1100px); margin-inline:auto;
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2rem; align-items:start;
}
.portada-footer h3 {
  color:#fff; font-size:1.15rem; margin:0 0 .6rem; letter-spacing:.02em;
}
.portada-footer p { margin:.25rem 0; line-height:1.6; font-size:.95rem; }
.portada-footer a { color:#e7dfd4; text-decoration:none; }
.portada-footer a:hover { color:#f2a541; }
.portada-footer__contact strong { color:#fff; font-size:1.1rem; }
.portada-footer__links { display:flex; flex-direction:column; gap:.35rem; }
.portada-footer__logos { display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap; }
.portada-footer__logos img { display:block; }
.portada-footer__bottom {
  width:min(100% - 2rem, 1100px); margin:1.5rem auto 0; padding-top:1rem;
  border-top:1px solid rgba(255,255,255,.10);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-size:.82rem; color:#8d857a;
}

/* ---------- Responsive ---------- */
@media (max-width:760px){
  .portada { flex-direction:column; min-height:auto; }
  .portada__half { min-height:62vh; }
  .portada__half + .portada__half { box-shadow:0 -1px 0 rgba(255,255,255,.25); }
  .portada__half:hover, .portada__half:focus-visible { flex-grow:1; }
  .portada__brand { position:static; transform:none; padding-top:1.4rem; }
  .portada__brand img { background:none; }
  .portada__langs { top:1.2rem; right:1.2rem; }
  .portada-footer__grid { grid-template-columns:1fr; gap:1.5rem; text-align:center; }
  .portada-footer__links { align-items:center; }
  .portada-footer__logos { justify-content:center; }
  .portada-footer__bottom { justify-content:center; text-align:center; }
}