:root{
  --bg:#f7fbfd;
  --card:#ffffff;
  --ink:#0a2a33;
  --ink-soft:#4b6b74;
  --brand:#1fb6ff;
  --brand-dark:#007c9b;
  --accent:#8fe8ff;
  --shadow:0 8px 20px rgba(0,0,0,.08);
}

/* Reset básico y contención */
*{box-sizing:border-box}
html,body{width:100%;overflow-x:hidden}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Ubuntu,'Helvetica Neue',Arial,sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
}
.container{
  max-width:1100px;
  margin:auto;
  padding: clamp(16px, 3vw, 24px);
}

/* ===================== Header ===================== */
.site-header{
  position:sticky; top:0;
  background:#fff;
  border-bottom:1px solid #e8f2f6;
  box-shadow:var(--shadow);
  z-index:10;
}
.site-header .brand{
  display:flex; align-items:center; gap:16px;
  max-width:1100px; margin:auto;
  padding: clamp(8px, 2vw, 12px) clamp(16px, 3vw, 24px);
}
.logo{
  height: clamp(56px, 10vw, 80px);
  width:auto; display:block; margin:0 auto; object-fit:contain;
}
.brand-sub{
  margin: clamp(6px, 1.2vw, 10px) auto 0;
  max-width: 900px;
  text-align:center;
  color:var(--ink-soft);
  font-size: clamp(16px, 2.2vw, 18px);
  font-weight:600;
  line-height:1.4;
  padding: 0 clamp(8px, 2.5vw, 12px);
}
.brand-title{margin:0;font-size:28px;letter-spacing:2px;font-weight:800;color:var(--brand-dark)}
.brand-title span{color:var(--brand)}

.main-nav{
  display:flex; gap: clamp(8px, 2vw, 14px);
  justify-content:center;
  padding: clamp(6px, 1.8vw, 8px) clamp(16px, 3vw, 24px);
  border-top:1px solid #eef5f8; background:#fcfeff;
}
.nav-link{
  padding: clamp(6px, 1.6vw, 8px) clamp(10px, 2vw, 14px);
  border-radius:999px; text-decoration:none;
  color:var(--brand-dark); font-weight:600;
  border:1px solid #cfeaf5; background:#fff;
}
.nav-link:hover{background:var(--accent)}

/* ===================== Hero ===================== */
.hero{
  background:linear-gradient(180deg,#e8f8ff,#ffffff);
  border-radius:20px;
  padding: clamp(18px, 4vw, 28px);
  box-shadow:var(--shadow);
  text-align:center;
}
.hero h2{margin:0 0 6px; font-size: clamp(20px, 3.4vw, 28px)}
.hero p{margin:0; font-size: clamp(14px, 2.6vw, 16px)}

/* ===================== Gallery ===================== */
.gallery h3{margin-top: clamp(18px, 4vw, 28px)}
.gallery-grid{
  display:flex; flex-wrap:wrap; gap: clamp(10px, 2vw, 16px);
}
.gallery-grid .card{
  flex:1 1 clamp(220px, 30%, 340px);
  max-width: calc(33% - 10px);
  background:var(--card); border-radius:20px;
  box-shadow:var(--shadow); overflow:hidden; position:relative; text-decoration:none;
}
.gallery-grid img{
  display:block; width:100%; height: clamp(180px, 28vw, 220px); object-fit:cover;
}
.zoom-hint{
  position:absolute; right:10px; bottom:10px;
  background:#fff; padding:6px 10px; border-radius:999px;
  border:1px solid #e3eef3; font-size:12px; color:var(--ink-soft)
}
@media (max-width:900px){ .gallery-grid .card{max-width:48%} }
@media (max-width:600px){ .gallery-grid .card{max-width:100%} }

/* ===================== CTA ===================== */
.cta-cards{
  display:flex; gap: clamp(10px, 2vw, 16px);
  margin-top: clamp(18px, 4vw, 28px);
  flex-wrap:wrap;
}
.cta{
  flex:1 1 240px; background:var(--card);
  border-radius:20px; box-shadow:var(--shadow);
  padding: clamp(14px, 3vw, 18px);
}
.btn{
  display:inline-block;
  padding: clamp(8px, 1.8vw, 10px) clamp(12px, 2.2vw, 14px);
  border-radius:12px; border:1px solid var(--brand-dark);
  text-decoration:none; color:#fff; background:var(--brand-dark); font-weight:600;
}
.btn.ghost{background:#fff;color:var(--brand-dark)}

/* ===================== Map ===================== */
.map-wrap{margin-top: clamp(18px, 4vw, 28px)}
.map-embed{border-radius:20px; overflow:hidden; box-shadow:var(--shadow)}
.map-embed iframe{
  width:100%; height: clamp(300px, 46vw, 420px); border:0;
}
.map-note{
  margin-top:12px; font-size:16px; font-weight:700; color:#333;
  text-align:center; background:#f2f2f2; padding:10px; border-radius:8px
}

/* ===================== Contact ===================== */
.form{
  background:var(--card); box-shadow:var(--shadow); border-radius:20px;
  padding: clamp(14px, 3vw, 18px)
}
.form .row{display:flex; gap:16px; flex-wrap:wrap}
.form label{display:flex; flex-direction:column; gap:6px; font-weight:600; color:var(--ink)}
input,textarea{
  border:1px solid #d9eaf1; border-radius:12px; padding:12px; font:inherit;
}
.actions{display:flex; gap:10px; margin-top:10px}
.gmaps-photo{margin-top:16px; text-align:center}
.gmaps-photo img{max-width:100%; border-radius:18px; box-shadow:var(--shadow)}

/* ===================== Blog ===================== */
.post{
  display:flex; gap: clamp(12px, 2.5vw, 18px);
  background:var(--card); border-radius:20px; box-shadow:var(--shadow);
  padding: clamp(14px, 3vw, 18px);
  flex-wrap:wrap;
  min-width:0;
}
.post-img{
  display:block;
  flex: 1 1 300px;
  max-width: 100%;
  width: 100%;
  height: auto;
  border-radius:16px;
  object-fit: cover;
}
.post-body{flex:1 1 300px; min-width:0}
.tips{padding-left: clamp(12px, 2vw, 18px)}
@media (max-width:640px){
  .post{display:block; overflow:hidden;}
}

/* ===================== Footer ===================== */
.site-footer{
  background:#0b3a47;
  color:#e9fcff;
  margin-top: clamp(26px, 5vw, 40px)
}
.site-footer a{color:#8fe8ff}

.site-footer .footer-grid{
  /* 2 columnas en escritorio; 1 en móvil */
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2.5vw, 28px);
  max-width:1100px; margin:auto;
  padding: clamp(16px, 3.2vw, 22px) clamp(16px, 3.2vw, 24px);
  align-items:start;
}
@media (max-width: 820px){
  .site-footer .footer-grid{ grid-template-columns: 1fr; }
}

.site-footer h4{margin:0 0 8px 0}
.horario{margin-top:8px}

/* Redes sociales (footer) */
.social{
  display:flex; gap:12px; align-items:center; margin-top:8px;
}
.social svg{ width:22px; height:22px; display:block; }

/* === Footer: atajos en 3x2 con separación clara === */
.mini-nav{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-auto-rows:min-content;
  grid-template-columns:repeat(3, auto); /* 3 columnas arriba */
  column-gap:20px;                       /* separación horizontal */
  row-gap:14px;                          /* separación vertical dentro de la lista */
  justify-items:start;
}

.mini-nav a{
  display:inline-block;
  white-space:nowrap;                    /* que no parta en 2 líneas */
  text-decoration:none;
  color:#8fe8ff;
  padding:4px 10px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
}
.mini-nav a:hover{ background:rgba(255,255,255,.12) }

/* separación ENTRE las dos listas (la segunda siempre baja un poco) */
.footer-grid .mini-nav + .mini-nav{
  margin-top:12px;
}

/* Tablet: 2 por fila */
@media (max-width:760px){
  .mini-nav{ grid-template-columns:repeat(2, auto); }
}

/* Móvil estrecho: 1 por fila */
@media (max-width:420px){
  .mini-nav{ grid-template-columns:1fr; }
  .mini-nav a{ width:100%; text-align:center; }
}

/* ===================== One-image Lightbox (overlay) ===================== */
.lb-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.85);
  display:none; align-items:center; justify-content:center;
  padding: clamp(16px, 3vw, 24px); z-index:9999
}
.lb-overlay img{
  max-width:96vw; max-height:90vh; width:auto; height:auto;
  border-radius:18px; box-shadow:var(--shadow)
}
.lb-overlay.show{display:flex}
.lb-close{
  position:fixed; top:14px; right:18px;
  background:#fff; border:0; border-radius:999px;
  width:42px; height:42px; font-size:28px; line-height:42px; cursor:pointer;
  box-shadow:var(--shadow)
}

/* Lightbox: vídeo centrado y responsivo */
.lb-overlay video{
  display:block;
  max-width:96vw;
  max-height:80vh;
  width:auto;
  height:auto;
  border-radius:18px;
  box-shadow:var(--shadow);
  object-fit:contain;
}

/* Si pones un vídeo “card” en la galería, que no desborde */
.gallery-grid video{
  display:block;
  width:100%;
  height: clamp(180px, 28vw, 220px);
  object-fit:cover;
  border:0;
}
@media (max-width: 480px){
  .lb-overlay{ padding: 16px; }
  .lb-overlay video{ max-width: 100vw; }
}

/* === Páginas legales (aviso, privacidad, cookies) === */
.legal-page{
  max-width:900px;
  margin:auto;
  padding: clamp(16px,3vw,24px);
}
.legal-card{
  background:var(--card);
  border-radius:20px;
  box-shadow:var(--shadow);
  padding: clamp(16px,3vw,24px);
}
.legal-page h1{
  margin:0 0 12px;
  font-size: clamp(24px,3.4vw,32px);
  letter-spacing:.2px;
  color:var(--brand-dark);
}
.legal-page h2{
  margin:18px 0 8px;
  font-size: clamp(18px,2.8vw,22px);
  color:#0a2a33;
}
.legal-page p, .legal-page li{ color:var(--ink); }
.legal-meta{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
@media (max-width:720px){ .legal-meta{grid-template-columns:1fr} }

/* === Cookie banner === */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0;
  background:rgba(11,58,71,.98);
  color:#e9fcff;
  z-index:99999;
  box-shadow:0 -8px 24px rgba(0,0,0,.22);
}
.cookie-inner{
  max-width:1100px; margin:auto;
  padding: clamp(12px,2.5vw,16px);
  display:flex; gap:12px; align-items:center; justify-content:space-between;
}
.cookie-inner p{margin:0; font-size:15px}
.cookie-inner a{color:#8fe8ff}
.cookie-actions{display:flex; gap:8px}
@media (max-width:740px){
  .cookie-inner{flex-direction:column; align-items:flex-start}
  .cookie-actions{width:100%}
  .cookie-actions .btn, .cookie-actions .btn.ghost{width:100%}
}

/* Footer – línea de copyright centrada y contenida */
.site-footer .copy{
  text-align: center;          /* centra el texto */
  padding: 12px;
  border-top: 1px solid rgba(255,255,255,.15);
  max-width: 1100px;           /* mismo ancho que el resto del footer */
  margin: 0 auto;              /* centra el bloque en el footer */
  display: block;              /* asegura que ocupa toda la fila */
}