/* Estilos modernos y centrados para Bar La Castellana - usa imágenes en ../images/ */

:root{
  --bg: #fbfbfb;
  --surface: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --accent: #8B0000;
  --radius: 14px;
  --container-w: 1200px;
  --gap: 1rem;
  --shadow: 0 10px 30px rgba(16,32,48,0.08);
  --card-gap: 1.1rem;

  /* navbar height used to offset anchors */
  --nav-height: 68px;
}

/* Hacer la nav fija y dejar espacio en el body para que no tape el contenido */
header.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  z-index: 1100;
  display: block;
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.9));
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(16,32,48,0.04);
  box-shadow: 0 6px 18px rgba(16,32,48,0.04);
}
.site-header .container{ height:100%; display:flex; align-items:center; gap:1rem; padding:0 1rem; box-sizing:border-box; }

/* Dejar espacio para la barra fija */
html { scroll-padding-top: calc(var(--nav-height) + 12px); }
body { padding-top: var(--nav-height); }

/* Ajustes visuales existentes (mantengo el resto) */
.container{max-width:var(--container-w); margin:0 auto; padding:1rem; text-align:center}
.brand{font-weight:800; color:var(--accent); text-decoration:none; font-size:1.05rem; letter-spacing:0.2px}
.nav-toggle{display:none; background:none; border:none; font-size:22px; cursor:pointer; color:var(--text)}
.site-nav{display:flex; gap:0.6rem; margin-left:auto; align-items:center}
.site-nav a{
  display:inline-block;
  padding:8px 12px;
  text-decoration:none;
  color:var(--text);
  border-radius:10px;
  font-weight:700;
  transition: all .18s ease;
}
.site-nav a:hover,
.site-nav a:focus{
  background: rgba(139,0,0,0.08);
  color:var(--accent);
  transform: translateY(-2px);
  outline: none;
}

/* Hero (se mantiene) */
.hero{
  padding:5rem 0 3rem;
  text-align:center;
  position:relative;
  color:#fff;
  background-image: linear-gradient(180deg, rgba(10,10,10,0.32), rgba(10,10,10,0.18)), url("../images/hero.jpg");
  background-size:cover;
  background-position:center;
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
  box-shadow: var(--shadow);
}
.hero .container{position:relative; z-index:1}
.hero h1{margin:0; font-size:clamp(26px,4.6vw,44px); font-family: "Playfair Display", serif; letter-spacing:0.6px}
.lead{color: rgba(255,255,255,0.92); margin-top:.6rem; max-width:780px; margin-left:auto; margin-right:auto; font-size:1.05rem}

/* Secciones centradas */
.section{padding:2rem 0; text-align:center}
.section h2{margin:0 0 1rem; font-size:1.6rem; text-align:center; font-family:"Playfair Display", serif; scroll-margin-top: calc(var(--nav-height) + 12px);}

/* Grid que permite 2-3 por línea y centra los elementos sobrantes */
.menu-grid{
  display: block;            /* apilar las secciones una tras otra */
  gap: var(--card-gap);
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Card for menu group */
.menu-card{
  width: 100%;
  max-width: none;          /* ocupar todo el ancho disponible */
  margin: 1.25rem 0;
  padding: 1.25rem;
  box-sizing: border-box;
  text-align: center;
}
.menu-card:hover{ transform: translateY(-6px); box-shadow: 0 20px 40px rgba(16,32,48,0.12); }

/* título de sección centrado y con margen para el header fijo */
.menu-card h3 {
  margin: 0 0 1rem;
  font-size: 1.3rem;
  scroll-margin-top: calc(var(--nav-height) + 18px);
}

/* Menu list: center text, thumbnail above */
.menu-list{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; justify-content:center;   /* centra filas incompletas */ gap: 1rem; align-items:start; }

/* cada plato intenta ocupar 20% del ancho (5 por fila), pero respeta min/max */
.menu-list li {
  box-sizing: border-box;
  flex: 0 1 calc(20% - 1rem); /* intención: 5 por fila */
  max-width: 280px;           /* evita tarjetas demasiado anchas */
  min-width: 160px;           /* evita comprimirse demasiado */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,250,250,0.98));
  border: 1px solid rgba(16,32,48,0.03);
}

/* quitar pseudo-miniaturas (usaremos <img> en HTML) */
.menu-list li::before {
  display: none;
  content: none;
}

/* estilo para las imágenes reales dentro de cada plato */
.menu-list li img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(16,32,48,0.06);
  display: block;
}

/* ajustar altura de imagen en responsive */
@media (max-width: 900px){
  .menu-list li img { height: 140px; }
}

/* texto y precio centrados */
.menu-list li strong,
.menu-list li p,
.menu-list li .price {
  text-align: center;
}

/* responsive: 3 por fila en tablet, 2 por fila en móvil ancho, 1 en móvil estrecho */
@media (max-width: 1100px) {
  .menu-list li { flex: 0 1 calc(33.333% - 1rem); max-width: 360px; }
}
@media (max-width: 700px) {
  .menu-list li { flex: 0 1 calc(50% - 1rem); max-width: 420px; }
}
@media (max-width: 420px) {
  .menu-list li { flex: 0 1 100%; max-width: none; }
}

/* Price styling */
.price{
  margin-top:6px;
  font-weight:800;
  color:var(--accent);
  font-size:1rem;
  background: linear-gradient(180deg, rgba(139,0,0,0.08), rgba(139,0,0,0.03));
  padding:6px 10px;
  border-radius:999px;
  display:inline-block;
}

/* Responsive: single column and slightly smaller thumbs on mobile */
@media (max-width: 900px){
  .menu-grid{ grid-template-columns: 1fr; padding:0 1rem }
  .menu-card{ max-width:760px; }
  .menu-list li::before{ width:100%; max-width:420px; height:160px; }
  .hero{ padding:3.5rem 0; background-position:center 30% }
}

/* Map wrapper and contact */
.map-wrap{ margin-top:.8rem; border-radius:10px; overflow:hidden; box-shadow: 0 10px 30px rgba(16,32,48,0.06) }
.map-wrap iframe{ width:100%; height:360px; border:0; display:block }

/* Footer and socials */
.site-footer{ padding:1.2rem 0; text-align:center; color:var(--muted); border-top:1px solid rgba(16,32,48,0.04) }
.socials{ display:flex; gap:0.6rem; justify-content:center; margin-top:.6rem }
.socials a{ text-decoration:none; color:var(--accent); padding:8px 10px; border-radius:8px; background:rgba(139,0,0,0.06); font-weight:700 }

/* small screens adjustments */
@media (max-width: 720px){
  .nav-toggle{display:block}
  .site-nav{ position:fixed; top:calc(var(--nav-height)); right:0; left:0; background:var(--surface); flex-direction:column; padding:12px; gap:10px; transform:translateY(-120%); transition:transform .22s ease; box-shadow:0 12px 30px rgba(0,0,0,0.08) }
  .site-nav.show{ transform:translateY(0) }
  .site-nav a{ padding:12px }
  .hero h1{ font-size:1.4rem }
  .map-wrap iframe{ height:240px }
}

/* Accessibility focus */
a:focus, button:focus{ outline:3px solid rgba(139,0,0,0.12); outline-offset:3px }

/* PREVIEW - tarjeta y secciones */
.preview-card {
  max-width: 1100px;
  margin: 0 auto;
}
.preview-link { text-decoration: none; color: inherit; display: block; }
.preview-content {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,250,250,0.98));
  box-shadow: 0 12px 30px rgba(16,32,48,0.06);
}
.preview-header h3 { margin: 6px 0; font-size: 1.25rem; }
.preview-header p { margin: 0; color: var(--muted); }

/* contenedor de miniaturas */
.preview-sections {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  width: 100%;
}

/* cada tile */
.preview-tile {
  width: 180px;
  height: 120px;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,0.65);
  background-size: cover;
  background-position: center;
  box-shadow: 0 8px 20px rgba(16,32,48,0.08);
  transition: transform .18s ease, box-shadow .18s ease;
}
.preview-tile strong { font-size: 1.05rem; display:block; }
.preview-tile small { opacity: 0.95; }

/* hover */
.preview-link:hover .preview-tile,
.preview-link:focus .preview-tile { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(16,32,48,0.12); }

/* acciones */
.preview-actions { display:flex; justify-content:center; }
.preview-actions .btn {
  cursor: pointer;
  padding: 8px 14px;
  border-radius: 10px;
  border: 0;
  background: linear-gradient(180deg, var(--accent), #6b0000);
  color: #fff;
  font-weight: 700;
}

/* Imágenes por sección (ajusta nombres si es necesario).
   La ruta es relativa al archivo CSS (css/avanzada.css) -> ../images/ */
.tile-entrantes  { background-image: url("../images/entrante1.jpg"); }
.tile-primeros   { background-image: url("../images/primero1.jpg"); }
.tile-segundos   { background-image: url("../images/segundo1.jpg"); }
.tile-postres    { background-image: url("../images/postre1.jpg"); }
.tile-bebidas    { background-image: url("../images/bebida1.jpg"); }

/* responsive: reducir tiles en pantallas pequeñas */
@media (max-width: 520px) {
  .preview-tile { width: 140px; height: 100px; }
  .preview-header h3 { font-size: 1.05rem; }
}

/* Añadir al final del archivo: estilos para formularios de contacto y reservas */

.form {
  max-width: 980px;
  margin: 0 auto;
  text-align: left;
}
.form-row {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="tel"],
.form-row input[type="date"],
.form-row input[type="time"],
.form-row input[type="number"],
.form-row textarea,
.form-row input[type="search"] {
  flex: 1 1 220px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(16,32,48,0.08);
  background: #fff;
  color: var(--text);
  font-size: 0.95rem;
  box-shadow: 0 6px 18px rgba(16,32,48,0.02);
}
.form-row textarea { resize: vertical; min-height: 72px; }

.form-actions { display:flex; justify-content:center; margin-top:6px; }
.form .btn { padding: 10px 16px; border-radius:10px; border:0; cursor:pointer; background: linear-gradient(180deg,var(--accent),#6b0000); color:#fff; font-weight:700; }

.form-feedback {
  margin-top:10px;
  text-align:center;
  font-weight:700;
  color: green;
  min-height: 1.2em;
}

/* error styling */
.form-feedback.error { color: #b00000; }

/* pequeña mejora visual para inputs en focus */
.form-row input:focus, .form-row textarea:focus {
  outline: none;
  box-shadow: 0 8px 24px rgba(16,32,48,0.08);
  border-color: rgba(139,0,0,0.28);
}

/* responsive: stack inputs */
@media (max-width:720px) {
  .form-row { flex-direction: column; }
}