@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; gap:3px; background:var(--fondo-2); border:1px solid var(--linea); border-radius:999px; padding:3px; flex-shrink:0}
.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 ---------- */
.hero{position:relative; overflow:hidden; background:var(--verde-900); padding:0}
.hero-medio{position:absolute; inset:0}
.hero-medio img,.hero-medio video{width:100%; height:100%; object-fit:cover; object-position:center 42%}
.hero-velo{
  position:absolute; inset:0;
  background:linear-gradient(105deg, rgba(5,63,46,.94) 0%, rgba(5,63,46,.86) 42%, rgba(5,63,46,.35) 100%);
}
.hero-in{position:relative; padding:96px 0 104px; max-width:660px; color:#fff}
.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}
.galeria img{width:100%; height:100%; object-fit:cover; aspect-ratio:3/4; transition:transform .5s ease}
.galeria figure:hover img{transform:scale(1.05)}
.galeria figure.alta{grid-row:span 2; aspect-ratio:auto}
.galeria figure.alta img{aspect-ratio:3/5.1}

/* ---------- 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}
.mapa-caja{
  position:relative; border-radius:var(--radio); overflow:hidden; box-shadow:var(--sombra-lg);
  border:1px solid var(--linea); min-height:430px; background:#e8eeec;
}
.mapa-caja iframe{width:100%; height:100%; min-height:430px; border:0; display:block}
/* Aviso previo: el mapa no se carga hasta que el visitante lo pide */
.mapa-consentir{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; text-align:center; padding:34px 28px;
  background:
    linear-gradient(rgba(246,250,248,.93), rgba(246,250,248,.93)),
    repeating-linear-gradient(45deg, #dce7e2 0 2px, transparent 2px 14px);
}
.mapa-consentir svg{color:var(--verde-700)}
.mapa-consentir h4{margin:0; font-size:1.12rem; font-weight:700}
.mapa-consentir p{margin:0; max-width:40ch; font-size:.93rem; color:var(--tinta-2)}
.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,.93) 0%, rgba(5,63,46,.88) 55%, rgba(5,63,46,.74) 100%)}
  .dos-col{grid-template-columns:1fr; gap:40px}
  .mapa-grid{grid-template-columns:1fr}
  .mapa-caja{min-height:340px} .mapa-caja iframe{min-height:340px}
  .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 figure.alta{grid-row:span 1}
  .galeria figure.alta img{aspect-ratio:3/4}
  .legal{padding:48px 20px 72px}
  .legal .ficha dl{grid-template-columns:1fr; gap:3px 0}
  .legal .ficha dd{margin-bottom:12px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
}