/* =========================================================
   uBunTu Cabo de Palos — hoja de estilos compartida
   Paleta corporativa: teal #29B0A8 + negro + blanco/crema
   ========================================================= */
:root{
  --teal:#29B0A8;
  --teal-oscuro:#1E827C;
  --teal-suave:#E4F5F4;
  --negro:#181818;
  --blanco:#FFFFFF;
  --crema:#F6F4EF;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Manrope',sans-serif; color:var(--negro); background:var(--blanco);}
h1,h2,h3{font-family:'Fraunces',serif; font-weight:600;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
ul{list-style:none;}
:focus-visible{outline:3px solid var(--teal); outline-offset:2px;}

/* ---------- HEADER / NAV ---------- */
.site-header{
  position:absolute; top:0; left:0; right:0; z-index:30;
  display:flex; justify-content:space-between; align-items:center;
  padding:26px 6vw; color:#fff;
}
.site-header.solido{position:relative; background:var(--negro);}
.site-header img.logo{height:44px;}
.site-header nav ul{display:flex; gap:32px; font-size:.9rem; letter-spacing:.03em;}
.site-header nav a{position:relative; padding:4px 0;}
.site-header nav a:hover, .site-header nav a.activo{color:var(--teal);}
.site-header nav a.activo::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; background:var(--teal);
}
.menu-toggle{display:none; background:none; border:none; color:#fff; font-size:1.6rem; cursor:pointer;}

@media(max-width:800px){
  .site-header nav ul{
    position:fixed; inset:0 0 0 auto; width:78vw; background:var(--negro);
    flex-direction:column; padding:100px 40px; gap:28px; font-size:1.1rem;
    transform:translateX(100%); transition:transform .3s ease;
    overflow-y:auto;
  }
  .site-header nav ul.abierto{transform:translateX(0);}
  .menu-toggle{display:block; z-index:40;}
}
body.menu-abierto{overflow:hidden;}

/* ---------- HERO SLIDER (home) ---------- */
.hero{position:relative; height:100vh; min-height:600px; overflow:hidden; color:#fff;}
.slide{position:absolute; inset:0; opacity:0; transition:opacity 1.2s ease; background-position:center; background-size:cover;}
.slide.activo{opacity:1;}
.slide::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(24,24,24,.35), rgba(24,24,24,.78) 85%);}
.hero-content{position:relative; z-index:5; height:100%; display:flex; align-items:flex-end; padding:8vw 6vw;}
.hero-content .box{max-width:640px;}
.eyebrow{text-transform:uppercase; letter-spacing:.2em; font-size:.75rem; color:var(--teal); margin-bottom:18px; font-weight:700; display:block;}
.hero h1{font-size:clamp(2.6rem,6vw,4.6rem); line-height:1.05; margin-bottom:20px;}
.hero p.quote{font-style:italic; font-size:1.15rem; max-width:420px; margin-bottom:32px; color:#F1F1F1;}

.slider-nav{position:absolute; z-index:10; bottom:36px; right:6vw; display:flex; gap:10px;}
.slider-nav button{width:34px; height:34px; border-radius:50%; border:1.5px solid rgba(255,255,255,.6); background:transparent; color:#fff; cursor:pointer; font-size:1rem; display:flex; align-items:center; justify-content:center;}
.slider-nav button:hover{background:var(--teal); border-color:var(--teal);}
.slider-dots{position:absolute; z-index:10; bottom:44px; left:6vw; display:flex; gap:10px;}
.slider-dots span{width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.4); cursor:pointer; transition:.25s;}
.slider-dots span.activo{background:var(--teal); width:26px; border-radius:6px;}

/* ---------- HERO SIMPLE (páginas interiores) ---------- */
.hero-simple{
  position:relative; height:56vh; min-height:340px; display:flex; align-items:flex-end;
  background-position:center; background-size:cover; color:#fff; padding:0 6vw 60px;
}
.hero-simple::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(24,24,24,.25), rgba(24,24,24,.8));}
.hero-simple .box{position:relative; z-index:2;}
.hero-simple h1{font-size:clamp(2.2rem,5vw,3.4rem);}
.migas{position:relative; z-index:2; font-size:.8rem; opacity:.8; margin-top:14px;}
.migas a:hover{color:var(--teal);}

/* ---------- BOTONES ---------- */
.btn{display:inline-block; background:var(--teal); color:#fff; padding:16px 34px; border-radius:2px; font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700; transition:background .25s; border:none; cursor:pointer;}
.btn:hover{background:var(--teal-oscuro);}
.btn.oscuro{background:var(--negro);}
.btn.oscuro:hover{background:#000;}
.btn.linea{background:transparent; border:1.5px solid var(--teal); color:var(--negro);}
.btn.linea:hover{background:var(--teal); color:#fff;}

/* ---------- FILOSOFIA ---------- */
.filosofia{padding:110px 6vw; background:var(--negro); color:#fff; display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}
.filosofia.compacta{padding:56px 6vw;}
.filosofia img{border-radius:2px; border-top:4px solid var(--teal);}
.filosofia h2{font-size:2rem; color:#fff; margin-bottom:24px;}
.filosofia p{line-height:1.7; opacity:.85;}
.filosofia .firma{margin-top:24px; font-style:italic; color:var(--teal);}

/* ---------- OFERTA / TARJETAS ---------- */
.oferta{padding:40px 6vw 110px;}
.oferta .eyebrow{color:var(--teal-oscuro);}
.oferta h2{font-size:2.2rem; margin:14px 0 14px;}
.oferta > p.intro{max-width:560px; margin-bottom:60px; line-height:1.6;}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.card{background:var(--crema); overflow:hidden; border-radius:3px; border-bottom:4px solid var(--teal); transition:transform .25s;}
.card:hover{transform:translateY(-6px);}
.card img{height:260px; width:100%; object-fit:cover;}
.card-body{padding:24px;}
.card-body span{font-size:.7rem; letter-spacing:.15em; text-transform:uppercase; color:var(--teal-oscuro); font-weight:700;}
.card-body h3{margin:8px 0 10px; font-size:1.25rem;}
.card-body a{font-size:.85rem; font-weight:700; color:var(--teal-oscuro);}

/* ---------- FRANJA RESERVA ---------- */
.franja{background:var(--teal); color:#fff; padding:90px 6vw; text-align:center;}
.franja h2{font-size:2rem; margin-bottom:18px;}

/* ---------- CONTENIDO GENÉRICO (páginas interiores) ---------- */
.contenido{padding:100px 6vw; max-width:900px; margin:0 auto;}
.contenido h2{font-size:2rem; margin-bottom:26px;}
.contenido p{line-height:1.8; margin-bottom:20px; opacity:.85;}
.dos-col{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; padding:100px 6vw;}
.dos-col img{border-radius:2px; border-top:4px solid var(--teal);}
.dos-col h2{font-size:2rem; margin-bottom:22px;}
.dos-col p{line-height:1.8; opacity:.85; margin-bottom:16px;}

.chips{display:flex; flex-wrap:wrap; gap:14px; padding:0 6vw 100px;}
.chip{background:var(--teal-suave); color:var(--teal-oscuro); padding:12px 22px; border-radius:50px; font-weight:700; font-size:.85rem;}

/* ---------- LISTAS DE CARTA (menu / vinos / buffet) ---------- */
.carta{padding:100px 6vw; max-width:900px; margin:0 auto;}
.carta.espacio-reducido{padding-top:50px;}
.carta .aviso{background:var(--teal-suave); color:var(--teal-oscuro); padding:20px 26px; border-radius:4px; font-size:.9rem; margin-bottom:60px; line-height:1.6;}
.categoria{margin-bottom:60px;}
.categoria h3{font-size:1.5rem; margin-bottom:22px; padding-bottom:12px; border-bottom:2px solid var(--negro); display:inline-block;}
.plato{display:flex; justify-content:space-between; align-items:flex-start; gap:20px; padding:16px 0; border-bottom:1px dashed rgba(0,0,0,.15);}
.plato .nombre{font-weight:700;}
.plato .desc{font-size:.85rem; opacity:.65; margin-top:4px; font-weight:400;}
.plato .precio{font-weight:700; white-space:nowrap; margin-left:24px;}

/* ---------- CONTACTO ---------- */
.contacto-grid{display:grid; grid-template-columns:1fr 1fr; gap:0;}
.contacto-info{padding:100px 6vw; display:flex; flex-direction:column; justify-content:center; gap:28px;}
.contacto-info h2{font-size:2.1rem; margin-top:-28px;}
.contacto-item{display:flex; align-items:flex-start; gap:16px;}
.contacto-item .ic{width:44px; height:44px; border-radius:50%; background:var(--teal-suave); color:var(--teal-oscuro); display:flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0;}
.contacto-item h4{font-size:1rem; margin-bottom:4px;}
.contacto-item p, .contacto-item a{font-size:.9rem; opacity:.8;}
.contacto-item a:hover{color:var(--teal-oscuro); opacity:1;}
.mapa{min-height:420px;}
.mapa iframe{width:100%; height:100%; min-height:420px; border:0;}

/* ---------- FOOTER ---------- */
footer{background:var(--negro); color:#DCDCDC; padding:70px 6vw 40px; display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px;}
footer h4{font-family:'Fraunces',serif; font-size:1.1rem; margin-bottom:16px; color:var(--teal);}
footer p, footer a{font-size:.9rem; line-height:2;}
footer a:hover{color:var(--teal);}
.social-links{display:flex; gap:14px; margin-top:4px;}
.social-links a{display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.25); transition:.25s;}
.social-links a:hover{background:var(--teal); border-color:var(--teal); color:var(--negro);}
.social-links svg{width:18px; height:18px; fill:currentColor;}
.copy{grid-column:1/-1; margin-top:50px; font-size:.75rem; opacity:.6; border-top:1px solid rgba(255,255,255,.15); padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}
.copy a{opacity:1;}
.copy a:hover{color:var(--teal);}

/* ---------- RESPONSIVE ---------- */
@media(max-width:800px){
  .filosofia, .dos-col, .contacto-grid{grid-template-columns:1fr;}
  .cards{grid-template-columns:1fr;}
  footer{grid-template-columns:1fr;}
  .slider-nav{display:none;}

  /* Menos scroll para llegar antes a la carta al entrar desde el QR de mesa */
  .hero-simple{height:38vh; min-height:220px; padding-bottom:36px;}
  .carta{padding:50px 6vw;}
  .carta .aviso{margin-bottom:36px;}
  .categoria{margin-bottom:40px;}
  .categoria h3{font-size:1.3rem; margin-bottom:16px;}

  /* Plato: nombre+precio en la misma línea, descripción debajo sin quedar descentrada */
  .plato{padding:14px 0;}
  .plato .precio{margin-left:16px;}
}