/* styles.css — Es Rebost de Cort (mix v6)
   Base visual tuya + fixes de móvil, menú y selector de idioma. */

/* ============ Variables y base ============ */
:root{
  --bg:#fffdf8;
  --ink:#2c2a26;
  --muted:#5e5a54;
  --primary:#2e6f6b;     /* verde mediterráneo */
  --accent:#d5a057;      /* dorado suave */
  --rose:#f6efef;        /* floral */
  --card:#ffffff;
  --ring:rgba(46,111,107,.25);
  --shadow:0 10px 22px rgba(0,0,0,.07);
  --radius:20px;
  --container:min(1100px,92vw);
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink);
  background:var(--bg);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.6;
}
h1,h2,h3{font-family:"Cormorant Garamond",serif; line-height:1.2; margin:0 0 .4em}
h1{font-size:clamp(2rem,3.5vw+1rem,3.1rem)}
h2{font-size:clamp(1.6rem,2.2vw+1rem,2.1rem)}
h3{font-size:clamp(1.1rem,1.1vw+.9rem,1.35rem)}
a{color:var(--primary); text-decoration:none}
a:hover{text-decoration:underline}
p{margin:.35em 0 .95em}
.muted{color:var(--muted)}
.center{text-align:center}
.container{width:var(--container); margin-inline:auto}
.no-scroll{overflow:hidden}

/* Fondo floral suave */
.bg-motifs{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60% 60% at 12% 14%, rgba(246,239,239,.52), transparent 60%),
    radial-gradient(35% 35% at 88% 12%, rgba(213,160,87,.08), transparent 60%),
    radial-gradient(50% 50% at 80% 78%, rgba(46,111,107,.08), transparent 60%),
    linear-gradient(180deg, #fffdf8, #fff9ef 60%, #fffdf8);
}

/* ============ Topbar ============ */
.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(255,253,248,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid #eee;
}
.topbar-inner{
  display:flex; align-items:center; gap:16px; padding:10px 0;
}
.brand{
  font-family:"Cormorant Garamond",serif; font-weight:700; letter-spacing:.4px;
  font-size:1.22rem; color:var(--ink); text-decoration:none;
  border-bottom:2px solid var(--accent); padding-bottom:2px;
}
.nav{display:flex; gap:18px; margin-left:24px; flex:1}
.nav a{color:var(--ink); opacity:.9; font-size:.98rem}
.nav a:hover{opacity:1}

/* ===== Selector de idioma (escritorio y móvil) ===== */
.lang-switch{position:relative; margin-left:auto}
.langbtn{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:8px 12px; border:1px solid #e6e6e6; border-radius:999px;
  background:#fff; color:#2f2a25; cursor:pointer; font-weight:600;
}
.langbtn .caret{font-size:.8rem; opacity:.7}
.langmenu{
  position:absolute; top:110%; right:0; min-width:190px;
  background:#fff; border:1px solid #e6e6e6; border-radius:12px;
  box-shadow:0 12px 24px rgba(0,0,0,.12); padding:6px; z-index:9999;
}
.langmenu a{
  display:flex; align-items:center; gap:10px; padding:8px 10px;
  border-radius:8px; color:#2c2a26; text-decoration:none;
}
.langmenu a:hover{background:#f6f6f6}

/* Banderas (CSS puro) */
.flag{width:18px;height:12px;display:inline-block;border-radius:2px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.flag.es{background:linear-gradient(#aa151b 0 33%,#f1bf00 33% 66%,#aa151b 66%)}
.flag.gb{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3CclipPath id='a'%3E%3Cpath d='M0 0v30h60V0z'/%3E%3C/clipPath%3E%3Cpath fill='%2300247d' d='M0 0h60v30H0z'/%3E%3Cpath stroke='%23fff' stroke-width='6' d='M0 0l60 30M60 0L0 30' clip-path='url(%23a)'/%3E%3Cpath stroke='%23cf142b' stroke-width='4' d='M0 0l60 30M60 0L0 30' clip-path='url(%23a)'/%3E%3Cpath fill='%23fff' d='M25 0h10v30H25zM0 10h60v10H0z'/%3E%3Cpath fill='%23cf142b' d='M27 0h6v30h-6zM0 12h60v6H0z'/%3E%3C/svg%3E") no-repeat center/cover}
.flag.fr{background:linear-gradient(90deg,#0055a4 0 33%,#fff 33% 66%,#ef4135 66%)}
.flag.de{background:linear-gradient(#000 0 33%,#dd0000 33% 66%,#ffce00 66%)}

/* ===== Menú hamburguesa ===== */
.burger{display:none; background:none; border:none; padding:6px; cursor:pointer; margin-left:8px}
.burger span{display:block; width:24px; height:2px; background:var(--ink); border-radius:2px; margin:4px 0}

/* Panel móvil */
.mobile-menu{
  background:#fff; border-top:1px solid #eee2d6;
  box-shadow:0 10px 25px rgba(0,0,0,.06);
  padding:8px 16px;
}
.mobile-menu a{
  display:block; padding:14px 2px; color:#2f2a25; text-decoration:none;
  border-bottom:1px solid #efe6db;  /* línea sutil */
}
.mobile-menu a:last-child{border-bottom:0}

/* Desplazamiento de anclas bajo cabecera */
#sobre,#carta,#horario,#reservas,#ubicacion{scroll-margin-top:90px}

/* ============ Hero ============ */
.hero{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; padding:60px 0; align-items:center}
.hero-text p{color:var(--muted)}
.hero-image img{
  width:100%; height:330px; object-fit:cover; border-radius:var(--radius);
  box-shadow:0 12px 24px rgba(0,0,0,.08);
  transition:transform .4s ease, box-shadow .4s ease;
}
.hero-image img:hover{transform:scale(1.015); box-shadow:0 18px 30px rgba(0,0,0,.12)}

/* Botones */
.btn{display:inline-block; padding:12px 18px; border-radius:999px; font-weight:600; border:1px solid var(--primary)}
.btn.primary{background:var(--primary); color:#fff}
.btn.ghost{background:transparent; color:var(--primary)}
.btn.small{padding:8px 14px; font-size:.95rem}

/* ============ Secciones y tarjetas ============ */
.section{padding:60px 0}
.section-head{margin-bottom:18px; text-align:center}
.section-head .menu-image{
  margin-top:18px; max-width:700px; width:100%; border-radius:var(--radius);
  box-shadow:0 8px 22px rgba(0,0,0,.08); object-fit:cover;
}
.grid{display:grid; gap:20px}
.about{grid-template-columns:repeat(3,1fr)}
.times{grid-template-columns:1.1fr .9fr; align-items:stretch}
.map{grid-template-columns:1.2fr .8fr; align-items:stretch}
.tile{background:#fff; border:1px solid #eee; border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}

/* ============ Carta (accordion, puntos, precios) ============ */
.accordion{
  background:#fff; border:1px solid #e9efee; border-radius:16px; margin:10px 0; padding:0;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
}
.accordion summary{
  cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 14px; font-weight:600; font-size:1.06rem; color:#0b564f;
  border-bottom:1px solid #eaeaea; border-radius:16px;
  background:linear-gradient(180deg,#fff,#fffdf8);
}
.accordion[open] summary{ color:#0d6b63 }
summary::after{content:"▸"; font-size:1.05rem; color:#888; margin-left:8px}
details[open] > summary::after{content:"▾"}
.panel{padding:10px 12px 14px; border-top:1px solid rgba(0,0,0,.06)}

.menu-list{list-style:none; margin:0; padding:0}
.menu-list .item{
  display:grid; grid-template-columns:auto 1fr auto; /* nombre | puntos | precio */
  align-items:center; gap:10px; padding:8px 4px;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.menu-list .item:last-child{border-bottom:0}
.menu-list .item .name{white-space:normal}
.menu-list .item .dots{height:0; border-bottom:1px dotted rgba(0,0,0,.28); transform:translateY(1px)}
.menu-list .item .price{white-space:nowrap; font-weight:600}

/* Subtítulos dentro de bebidas */
.subtle{
  font-size:1.05rem; font-weight:700; color:#165c3e;
  margin:16px 2px 8px; padding-bottom:3px; border-bottom:2px solid #cfe9dc;
}

/* Vinos */
.wine-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.wine-grid h4{
  margin:0 0 6px; padding-bottom:4px; border-bottom:1px solid #e2efe8; color:#0d6b63; font-weight:700
}

/* Nota informativa */
.nota{font-size:.92rem; color:var(--muted); text-align:center; margin-top:12px}

/* Horario */
.hours{list-style:none; margin:0; padding:0}
.hours li{padding:8px 0; border-bottom:1px dashed #eee}
.callout{background:linear-gradient(180deg,#f8fffd,#fff); border-color:#e7f2f1}

/* Mapa y foto exterior */
.tile.flush{padding:0; overflow:hidden}
.tile.flush iframe{display:block; width:100%; height:100%; min-height:360px; border:0; border-radius:inherit}
.ubicacion-img{
  margin-top:14px; width:100%; height:240px; object-fit:cover; border-radius:var(--radius);
  box-shadow:0 8px 22px rgba(0,0,0,.08);
}

/* ===== Opiniones ===== */
.google-badge{
  display:inline-flex; gap:8px; align-items:center; padding:6px 10px;
  background:#fff; border:1px solid #eee; border-radius:999px; box-shadow:0 4px 12px rgba(0,0,0,.04);
}
.google-badge .gmark{display:block}
.google-badge span{font-weight:600; color:#202124}

.reviews-grid{grid-template-columns:repeat(3,1fr); gap:18px; margin-top:14px}
.review{background:#fff; border:1px solid #eee; border-radius:16px; padding:14px; box-shadow:0 8px 20px rgba(0,0,0,.05)}
.review-head{display:flex; align-items:center; gap:10px; margin-bottom:8px}
.review .avatar{
  width:40px; height:40px; border-radius:50%;
  background:#e9f2f1; color:#0b564f; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:1rem;
}
.review .author a{color:#1a73e8; text-decoration:none}
.review .author a:hover{text-decoration:underline}
.review .stars{color:#f4b000; letter-spacing:.8px; font-size:.96rem}
.review blockquote{margin:8px 0; color:#2c2a26}
.review .when{color:#777; font-size:.9rem}

/* PDF */
.pdf-inline{text-align:center; margin-top:10px}

/* ===== Footer ===== */
.footer{margin-top:40px; padding:22px 0; background:linear-gradient(180deg,#fff,#fbfaf6); border-top:1px solid #eee}
.footer-inner{display:flex; justify-content:space-between; align-items:center; gap:14px}
.footer-nav{display:flex; gap:14px}
.footer a{color:#2c2a26; text-decoration:none}
.footer a:hover{text-decoration:underline}
.small{font-size:.92rem; color:var(--muted)}

/* Estados de foco accesibles */
a:focus,button:focus,summary:focus{outline:3px solid var(--ring); outline-offset:2px; border-radius:8px}

/* ============ Responsive ============ */
@media (max-width:980px){
  .nav{display:none}
  .burger{display:block}
  .hero{grid-template-columns:1fr; padding:40px 0}
  .about,.times,.map{grid-template-columns:1fr}
  .section-head .menu-image{max-width:100%}
}
@media (max-width:768px){
  /* compacto idioma en topbar (solo globo + caret si quieres) */
  .topbar .lang-switch .langbtn{padding:6px 10px; min-height:36px}
}
@media (max-width:640px){
  .section{padding:44px 0}
  .menu-list .item{gap:8px}
  .footer-inner{flex-direction:column; gap:6px}
  .wine-grid{grid-template-columns:1fr}
  .reviews-grid{grid-template-columns:1fr}
}