@import url('fonts/fuentes.css');

:root{
  --verde-900:#053f2e; --verde-700:#047857; --verde-600:#059669; --verde-500:#10b981;
  --verde-050:#ecfdf5; --verde-100:#d1fae5;
  --magenta:#b8258c;
  --tinta:#0d1b16; --tinta-2:#3f5a50; --tinta-3:#6b8279;
  --linea:#e2ebe7; --fondo:#ffffff; --fondo-2:#f6faf8;
  --radio:18px; --radio-s:12px;
  --sombra:0 1px 2px rgba(5,63,46,.05), 0 8px 24px -12px rgba(5,63,46,.18);
  --sombra-lg:0 24px 60px -24px rgba(5,63,46,.35);
  --max:1160px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:86px}
body{
  margin:0; background:var(--fondo); color:var(--tinta);
  font-family:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}
.wrap{max-width:var(--max); margin:0 auto; padding:0 20px}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  padding:.85em 1.5em; border-radius:999px; font-weight:600; font-size:1rem;
  text-decoration:none; border:1.5px solid transparent; cursor:pointer;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
  line-height:1.2; font-family:inherit;
}
.btn:hover{transform:translateY(-2px)}
.btn-primario{background:var(--verde-700); color:#fff; box-shadow:0 10px 24px -12px rgba(4,120,87,.9)}
.btn-primario:hover{background:var(--verde-900)}
.btn-fantasma{background:#fff; color:var(--verde-900); border-color:var(--linea)}
.btn-fantasma:hover{border-color:var(--verde-500); background:var(--verde-050)}
.btn-claro{background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.4); backdrop-filter:blur(6px)}
.btn-claro:hover{background:rgba(255,255,255,.26)}
.btn-grande{padding:1.05em 2em; font-size:1.08rem}

/* ---------- Cabecera ---------- */
header{
  position:sticky; top:0; z-index:60; background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--linea);
}
.nav{display:flex; align-items:center; gap:22px; height:74px}
.marca{display:flex; align-items:center; gap:11px; text-decoration:none; flex-shrink:0}
.marca-cruz{
  width:38px; height:38px; border-radius:11px; background:var(--verde-700);
  display:grid; place-items:center; color:#fff; flex-shrink:0;
}
.marca-txt strong{display:block; font-size:1.02rem; font-weight:700; letter-spacing:-.02em; line-height:1.15}
.marca-txt span{display:block; font-size:.74rem; color:var(--tinta-3); letter-spacing:.09em; text-transform:uppercase; font-weight:600}
.menu{display:flex; gap:2px; margin-left:auto}
.menu a{
  text-decoration:none; font-size:.94rem; font-weight:500; color:var(--tinta-2);
  padding:.5em .8em; border-radius:9px; transition:.18s;
}
.menu a:hover{color:var(--verde-700); background:var(--verde-050)}
.nav .btn{flex-shrink:0}
.hamburguesa{display:none; margin-left:auto; background:none; border:1.5px solid var(--linea); border-radius:10px; width:44px; height:44px; cursor:pointer; color:var(--tinta)}

/* Selector de idioma */
.idiomas{
  display:flex; align-items:center; gap:7px; background:var(--fondo-2);
  border:1px solid var(--linea); border-radius:999px; padding:.42em .9em .42em 1em;
  flex-shrink:0; color:var(--tinta-3); transition:.18s;
}
.idiomas:hover{border-color:var(--verde-500); color:var(--verde-700)}
.idiomas:focus-within{border-color:var(--verde-500); box-shadow:0 0 0 4px var(--verde-050)}
.idiomas svg{flex-shrink:0}
.idiomas select{
  appearance:none; -webkit-appearance:none; border:0; background:transparent; padding:0 1.15em 0 0;
  font-family:inherit; font-size:.88rem; font-weight:600; color:var(--tinta); cursor:pointer;
  width:auto; line-height:1.3;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b8279' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right center; background-size:13px;
}
.idiomas select:focus{outline:0}
/* Las páginas legales conservan el par de enlaces ES/EN */
.idiomas a{
  text-decoration:none; font-size:.78rem; font-weight:700; letter-spacing:.05em;
  padding:.38em .8em; border-radius:999px; color:var(--tinta-3); transition:.18s;
}
.idiomas a:hover{color:var(--verde-700)}
.idiomas a[aria-current="true"]{background:var(--verde-700); color:#fff}

/* ---------- Hero ---------- */
/* El vídeo de fondo es vertical (9:16). Dando altura al hero se reduce la
   franja que hay que recortar y se conserva el encuadre del travelling. */
.hero{position:relative; overflow:hidden; background:var(--verde-900); padding:0; min-height:min(82vh,760px); display:flex; align-items:center}
.hero-medio{position:absolute; inset:0}
.hero-medio img,.hero-medio video{width:100%; height:100%; object-fit:cover; object-position:center center}
.hero-velo{
  position:absolute; inset:0;
  background:linear-gradient(105deg, rgba(5,63,46,.92) 0%, rgba(5,63,46,.78) 44%, rgba(5,63,46,.22) 100%);
}
/* Cortinilla que oscurece el primer y el último medio segundo del vídeo,
   para que el corte del bucle no se note. La sincroniza web.js. */
.hero-corte{
  position:absolute; inset:0; background:var(--verde-900); pointer-events:none;
  opacity:0; transition:opacity .45s linear;
}
.hero-corte.activa{opacity:1}
.hero-in{position:relative; padding:96px 0 104px; max-width:660px; color:#fff; width:100%}
.chip{
  display:inline-flex; align-items:center; gap:.5em; font-size:.83rem; font-weight:600;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28);
  padding:.45em 1em; border-radius:999px; margin-bottom:22px; backdrop-filter:blur(6px);
}
.punto{width:8px; height:8px; border-radius:50%; background:#4ade80; box-shadow:0 0 0 0 rgba(74,222,128,.7); animation:latido 2.2s infinite}
.punto.cerrado{background:#fbbf24; animation:none}
@keyframes latido{70%{box-shadow:0 0 0 9px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}
.hero h1{font-size:clamp(2.3rem,5.4vw,3.85rem); line-height:1.05; letter-spacing:-.035em; font-weight:800; margin:0 0 20px}
.hero h1 em{font-style:normal; color:#6ee7b7}
.hero p.lead{font-size:1.16rem; color:rgba(255,255,255,.88); margin:0 0 34px; max-width:52ch}
.hero-acciones{display:flex; flex-wrap:wrap; gap:12px}
.hero-nota{margin-top:26px; font-size:.9rem; color:rgba(255,255,255,.72)}

/* ---------- Franja de datos ---------- */
.franja{background:var(--verde-050); border-bottom:1px solid var(--linea)}
.franja-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding:26px 0}
.dato{text-align:center; padding:6px 10px}
.dato b{display:block; font-size:1.55rem; font-weight:800; color:var(--verde-700); letter-spacing:-.03em; line-height:1.1}
.dato span{display:block; font-size:.86rem; color:var(--tinta-2); margin-top:3px}

/* ---------- Secciones ---------- */
section{padding:88px 0}
.seccion-cabecera{max-width:640px; margin:0 0 46px}
.seccion-cabecera.centrada{margin:0 auto 46px; text-align:center}
.etiqueta{display:inline-block; font-size:.78rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--magenta); margin-bottom:12px}
h2{font-size:clamp(1.85rem,3.6vw,2.6rem); line-height:1.12; letter-spacing:-.03em; font-weight:800; margin:0 0 16px}
.seccion-cabecera p{font-size:1.08rem; color:var(--tinta-2); margin:0}

/* ---------- Servicios ---------- */
.servicios{background:var(--fondo-2)}
.rejilla{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px}
.tarjeta{background:#fff; border:1px solid var(--linea); border-radius:var(--radio); padding:30px 26px; box-shadow:var(--sombra); transition:.22s ease}
.tarjeta:hover{transform:translateY(-4px); box-shadow:var(--sombra-lg); border-color:var(--verde-100)}
.icono{width:48px; height:48px; border-radius:13px; background:var(--verde-050); color:var(--verde-700); display:grid; place-items:center; margin-bottom:18px}
.tarjeta h3{font-size:1.14rem; font-weight:700; margin:0 0 9px; letter-spacing:-.015em}
.tarjeta p{margin:0; font-size:.97rem; color:var(--tinta-2); line-height:1.6}

/* ---------- Sobre + galería ---------- */
.dos-col{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
.lista-check{list-style:none; padding:0; margin:26px 0 0; display:grid; gap:13px}
.lista-check li{display:flex; gap:12px; align-items:flex-start; font-size:1rem; color:var(--tinta-2)}
.lista-check svg{flex-shrink:0; margin-top:4px; color:var(--verde-600)}
.galeria{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.galeria figure{margin:0; border-radius:var(--radio); overflow:hidden; box-shadow:var(--sombra); cursor:zoom-in; background:#eef4f1}
/* Columna izquierda: una foto vertical a doble altura.
   Columna derecha: dos fotos horizontales, que conservan su proporción. */
.galeria img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; transition:transform .5s ease}
.galeria figure:hover img{transform:scale(1.05)}
.galeria figure.alta{grid-row:span 2}
.galeria figure.alta img{aspect-ratio:auto; min-height:100%}

/* ---------- Valoración ---------- */
.valoracion{background:var(--verde-900); color:#fff; text-align:center}
.estrellas{display:flex; justify-content:center; gap:5px; margin-bottom:18px; color:#fbbf24}
.nota-grande{font-size:clamp(3.4rem,9vw,5rem); font-weight:800; letter-spacing:-.05em; line-height:1; margin:0}
.valoracion p{color:rgba(255,255,255,.8); font-size:1.08rem; margin:14px auto 30px; max-width:46ch}

/* ---------- Cómo llegar ---------- */
.visitar{background:var(--fondo-2)}
.mapa-grid{display:grid; grid-template-columns:minmax(0,1fr) 400px; gap:36px; align-items:stretch}
/* Nada de mapa incrustado: una foto de la fachada que enlaza a Google Maps.
   Cero cookies de terceros y, de paso, el visitante reconoce el local. */
.mapa-enlace{
  position:relative; display:block; border-radius:var(--radio); overflow:hidden;
  box-shadow:var(--sombra-lg); border:1px solid var(--linea); background:#e8eeec;
  min-height:430px; text-decoration:none;
}
.mapa-enlace img{width:100%; height:100%; min-height:430px; object-fit:cover; object-position:center 38%; transition:transform .6s ease}
.mapa-enlace:hover img{transform:scale(1.04)}
.mapa-enlace::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(5,63,46,.55) 0%, rgba(5,63,46,0) 45%);
}
.mapa-pastilla{
  position:absolute; left:20px; bottom:20px; z-index:1;
  display:inline-flex; align-items:center; gap:.5em;
  background:#fff; color:var(--verde-900); font-weight:600; font-size:.95rem;
  padding:.75em 1.3em; border-radius:999px; box-shadow:0 10px 26px -12px rgba(5,63,46,.6);
  transition:transform .18s ease;
}
.mapa-enlace:hover .mapa-pastilla{transform:translateY(-3px)}
.mapa-pastilla svg{color:var(--verde-700)}
.info-caja{background:#fff; border:1px solid var(--linea); border-radius:var(--radio); padding:32px 28px; box-shadow:var(--sombra)}
.info-fila{display:flex; gap:15px; padding:17px 0; border-bottom:1px solid var(--linea)}
.info-fila:last-of-type{border-bottom:0}
.info-fila .icono{width:40px; height:40px; border-radius:11px; margin:0; flex-shrink:0}
.info-fila h4{margin:0 0 3px; font-size:.79rem; text-transform:uppercase; letter-spacing:.09em; color:var(--tinta-3); font-weight:700}
.info-fila p, .info-fila a{margin:0; font-size:1.02rem; color:var(--tinta); font-weight:500; text-decoration:none}
.info-fila a:hover{color:var(--verde-700)}
.info-caja .btn{width:100%; margin-top:22px}

/* ---------- Barra móvil ---------- */
.barra-movil{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:70;
  background:rgba(255,255,255,.96); backdrop-filter:blur(14px);
  border-top:1px solid var(--linea); padding:10px 14px calc(10px + env(safe-area-inset-bottom)); gap:10px;
}
.barra-movil .btn{flex:1; padding:.8em 1em; font-size:.95rem}

/* ---------- Pie ---------- */
footer{background:var(--verde-900); color:rgba(255,255,255,.7); padding:62px 0 34px; font-size:.94rem}
.pie-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:40px; margin-bottom:42px}
footer h5{color:#fff; font-size:.79rem; text-transform:uppercase; letter-spacing:.11em; margin:0 0 15px; font-weight:700}
footer a{color:rgba(255,255,255,.7); text-decoration:none; transition:.18s}
footer a:hover{color:#6ee7b7}
.pie-lista{list-style:none; padding:0; margin:0; display:grid; gap:9px}
.pie-marca{display:flex; align-items:center; gap:11px; margin-bottom:15px}
.pie-marca .marca-cruz{background:rgba(255,255,255,.14)}
.pie-marca strong{color:#fff; font-size:1.04rem}
.pie-abajo{border-top:1px solid rgba(255,255,255,.14); padding-top:24px; display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; font-size:.86rem}
.pie-abajo a{text-decoration:underline; text-underline-offset:3px}
.redes{display:flex; gap:10px}
.redes a{width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.1); display:grid; place-items:center}
.redes a:hover{background:rgba(255,255,255,.2)}
.sin-cookies{display:inline-flex; align-items:center; gap:.45em; color:#6ee7b7; font-weight:600}

/* ---------- Lightbox ---------- */
.lightbox{position:fixed; inset:0; z-index:100; background:rgba(5,25,18,.93); display:none; align-items:center; justify-content:center; padding:28px; cursor:zoom-out}
.lightbox.abierto{display:flex}
.lightbox img{max-width:min(94vw,860px); max-height:90vh; border-radius:14px; object-fit:contain}

/* ---------- Páginas legales ---------- */
.legal-hero{background:var(--verde-900); color:#fff; padding:64px 0 54px}
.legal-hero h1{font-size:clamp(2rem,4.6vw,3rem); margin:0 0 10px; letter-spacing:-.03em; font-weight:800}
.legal-hero p{margin:0; color:rgba(255,255,255,.78)}
.legal-hero .volver{display:inline-flex; align-items:center; gap:.45em; color:#6ee7b7; text-decoration:none; font-size:.92rem; font-weight:600; margin-bottom:20px}
.legal-hero .volver:hover{text-decoration:underline}
.legal{max-width:790px; margin:0 auto; padding:64px 20px 96px}
.legal h2{font-size:1.5rem; margin:52px 0 14px; letter-spacing:-.02em}
.legal h2:first-child{margin-top:0}
.legal h3{font-size:1.14rem; margin:32px 0 10px; font-weight:700; color:var(--verde-900)}
.legal p{margin:0 0 16px; color:var(--tinta-2)}
.legal ul{margin:0 0 18px; padding-left:20px; color:var(--tinta-2)}
.legal li{margin-bottom:8px}
.legal li::marker{color:var(--verde-600)}
.legal a{color:var(--verde-700)}
.legal .ficha{
  background:var(--fondo-2); border:1px solid var(--linea); border-radius:var(--radio);
  padding:26px 28px; margin:0 0 12px;
}
.legal .ficha dl{display:grid; grid-template-columns:160px 1fr; gap:11px 18px; margin:0}
.legal .ficha dt{font-weight:700; font-size:.88rem; text-transform:uppercase; letter-spacing:.06em; color:var(--tinta-3)}
.legal .ficha dd{margin:0; color:var(--tinta)}
.legal .destacado{border-left:4px solid var(--verde-500); background:var(--verde-050); padding:18px 22px; border-radius:0 var(--radio-s) var(--radio-s) 0; margin:0 0 20px}
.legal .destacado p:last-child{margin-bottom:0}
.legal .fecha{font-size:.9rem; color:var(--tinta-3); margin-top:46px; padding-top:22px; border-top:1px solid var(--linea)}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  /* En pantallas estrechas el texto queda sobre el centro de la imagen:
     el velo tiene que cubrir de lado a lado para no perder contraste. */
  .hero-velo{background:linear-gradient(170deg, rgba(5,63,46,.86) 0%, rgba(5,63,46,.76) 45%, rgba(5,63,46,.88) 100%)}
  .dos-col{grid-template-columns:1fr; gap:40px}
  .mapa-grid{grid-template-columns:1fr}
  /* La fachada es vertical: sin tope, en una sola columna ocuparía toda la
     pantalla de alto. La recortamos a una banda apaisada. */
  .mapa-enlace{height:320px; min-height:0}
  .mapa-enlace img{height:100%; min-height:0}
  .pie-grid{grid-template-columns:1fr 1fr; gap:32px}
}
@media (max-width:820px){
  .menu{display:none}
  .nav > .btn{display:none}
  .hamburguesa{display:grid; place-items:center; margin-left:auto}
  .idiomas{margin-left:0}
  .menu.abierto{
    display:flex; flex-direction:column; position:absolute; top:74px; left:0; right:0;
    background:#fff; border-bottom:1px solid var(--linea); padding:14px 20px 22px; gap:2px;
    box-shadow:var(--sombra-lg);
  }
  .menu.abierto a{padding:.8em .6em; font-size:1.02rem}
}
@media (max-width:760px){
  body{font-size:16px; padding-bottom:74px}
  section{padding:62px 0}
  .hero-in{padding:66px 0 76px}
  .franja-grid{grid-template-columns:1fr 1fr; gap:4px}
  .pie-grid{grid-template-columns:1fr}
  .barra-movil{display:flex}
  .galeria{grid-template-columns:1fr}
  .galeria figure.alta{grid-row:span 1}
  .galeria figure.alta img{aspect-ratio:3/4; min-height:0}
  .legal{padding:48px 20px 72px}
  .legal .ficha dl{grid-template-columns:1fr; gap:3px 0}
  .legal .ficha dd{margin-bottom:12px}
}

/* ---------- Cabecera en pantallas estrechas ----------
   A 375 px la cabecera no daba de sí: marca + hamburguesa + selector de
   idioma sumaban más que el ancho de pantalla y aparecía scroll horizontal.

   El selector pasa a ser solo el icono del globo: el <select> se coloca
   encima, transparente y a tamaño completo, de modo que al tocarlo sigue
   abriéndose la lista nativa con los seis idiomas escritos. */
@media (max-width:560px){
  .marca{min-width:0}
  .marca-txt{min-width:0}
  .marca-txt strong,
  .marca-txt span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

  .idiomas{position:relative; gap:0; padding:.55em .7em; flex-shrink:0}
  .idiomas select{
    position:absolute; inset:0; width:100%; height:100%;
    opacity:0; padding:0; background-image:none; cursor:pointer;
  }
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
}