/* ========================================================
   TOITA CAFÉ — style.css
   Fuente: Playfair Display (títulos) + Nunito (cuerpo)
   Colores: espresso #1a0f06 · oro #f0c040 · crema #fdf8f0
======================================================== */

/* ── Variables ───────────────────────────────────────── */
:root {
  --espresso: #1a0f06;
  --espresso-2: #2d1a0f;
  --oro: #f0c040;
  --oro-hover: #d4a820;
  --crema: #fdf8f0;
  --crema-2: #f5ede0;
  --texto: #2c1c10;
  --texto-suave: #6b5744;
  --navbar-h: 64px;
  --radius: 12px;
}

/* ── Reset / Base ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Nunito', sans-serif;
  font-size: 16px;
  color: var(--texto);
  background: var(--crema);
}

img { max-width: 100%; display: block; }

/* ── Navbar ───────────────────────────────────────────── */
.toita-nav {
  background: rgba(26, 15, 6, 0.0);
  transition: background 0.35s ease, box-shadow 0.35s ease;
  padding: 8px 0;
}

.toita-nav.scrolled {
  background: rgba(26, 15, 6, 0.97);
  box-shadow: 0 2px 16px rgba(0,0,0,.4);
}

.toita-nav .navbar-toggler {
  border-color: rgba(255,255,255,.4);
}
.toita-nav .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.toita-nav .nav-link {
  color: rgba(255,255,255,.85) !important;
  font-weight: 600;
  font-size: .92rem;
  letter-spacing: .03em;
  padding: 6px 10px;
  border-radius: 6px;
  transition: color .2s, background .2s;
}
.toita-nav .nav-link:hover { color: var(--oro) !important; background: rgba(255,255,255,.08); }

.toita-nav .btn-llamar {
  background: var(--oro) !important;
  color: var(--espresso) !important;
  font-weight: 800;
  border-radius: 20px !important;
  padding: 6px 16px !important;
}
.toita-nav .btn-llamar:hover { background: var(--oro-hover) !important; }

.toita-nav .nav-social { font-size: 1.25rem; padding: 6px 9px !important; }
.toita-nav .nav-social:hover { color: var(--oro) !important; background: rgba(255,255,255,.08); }

/* Menú desplegable móvil */
@media (max-width: 767.98px) {
  .toita-nav .navbar-collapse { background: var(--espresso); border-radius: 0 0 12px 12px; padding: 12px; }
}

/* ── Hero ─────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-top: var(--navbar-h);
}

@keyframes kenburns {
  0%   { transform: scale(1.0) translate(0, 0); }
  50%  { transform: scale(1.10) translate(-1.5%, -1%); }
  100% { transform: scale(1.0) translate(0, 0); }
}

.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}

.hero-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  animation: kenburns 20s ease-in-out infinite;
}

.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(26,15,6,.70) 0%, rgba(26,15,6,.55) 50%, rgba(26,15,6,.85) 100%);
}

.hero-content {
  position: relative; z-index: 2;
  padding: 2rem 1rem;
  max-width: 680px;
  width: 100%;
}

.hero-logo {
  width: min(200px, 55vw);
  height: auto;
  filter: drop-shadow(0 4px 20px rgba(240,192,64,.5));
  margin: 0 auto 1.5rem;
  display: block;
}

.hero-tagline {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.25rem, 4vw, 1.75rem);
  color: #fff;
  margin-bottom: .6rem;
  text-shadow: 0 2px 8px rgba(0,0,0,.5);
}

.hero-addr {
  color: rgba(255,255,255,.75);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .04em;
  margin-bottom: 1.2rem;
}

.hero-hours {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem .75rem;
  margin-bottom: 1.75rem;
}
.hero-hours span {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.9);
  font-size: .82rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 20px;
}
.hero-hours span.closed { opacity: .65; }

.hero-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }

.btn-gold {
  background: var(--oro);
  color: var(--espresso);
  font-weight: 800;
  border: none;
  border-radius: 25px;
  padding: 11px 28px;
  font-size: .95rem;
  transition: background .2s, transform .15s;
}
.btn-gold:hover { background: var(--oro-hover); color: var(--espresso); transform: translateY(-2px); }

.btn-outline-cream {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,.55);
  border-radius: 25px;
  padding: 11px 28px;
  font-size: .95rem;
  font-weight: 700;
  transition: background .2s, border-color .2s;
}
.btn-outline-cream:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }

.hero-scroll {
  position: absolute;
  bottom: 2rem; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: rgba(255,255,255,.6);
  font-size: 1.6rem;
  animation: bounce 2.2s infinite;
  text-decoration: none;
}
@keyframes bounce {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(8px); }
}

/* ── Sections ─────────────────────────────────────────── */
.section-cream  { background: var(--crema);  padding: 80px 0 60px; }
.section-dark   { background: var(--espresso); padding: 80px 0 60px; }
.section-gallery { background: var(--espresso-2); padding: 80px 0 0; }

/* ── Video section ────────────────────────────────────── */
.section-video { position: relative; background: #000; overflow: hidden; line-height: 0; }
.section-video video { display: block; width: 100%; max-height: 72vh; object-fit: cover; }

.section-header { text-align: center; margin-bottom: 2.5rem; }

.section-badge {
  display: inline-block;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texto-suave);
  background: var(--crema-2);
  border: 1px solid rgba(0,0,0,.1);
  padding: 4px 14px;
  border-radius: 20px;
  margin-bottom: .75rem;
}
.section-badge.light { color: rgba(255,255,255,.7); background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); }

.section-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  color: var(--espresso);
  margin-bottom: .5rem;
}
.section-title.light { color: #fff; }

.section-desc {
  color: var(--texto-suave);
  font-size: 1rem;
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.65;
}
.section-desc.light { color: rgba(255,255,255,.7); }

.subsec-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem;
  color: var(--espresso);
  border-bottom: 2px solid var(--oro);
  display: inline-block;
  padding-bottom: 4px;
  margin-bottom: 1rem;
}
.subsec-title.light { color: var(--oro); border-bottom-color: rgba(240,192,64,.4); }

/* ── Menu Cards ───────────────────────────────────────── */
.menu-card {
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
  transition: transform .25s, box-shadow .25s;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.menu-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,.14); }

.menu-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
}

.menu-card-body {
  padding: 9px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.menu-name {
  font-size: .78rem;
  font-weight: 700;
  color: var(--texto);
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.menu-price {
  font-size: .9rem;
  font-weight: 800;
  color: var(--texto-suave);
}

/* Dark cards (in dark section) */
.menu-card.dark {
  background: var(--espresso-2);
  box-shadow: 0 2px 12px rgba(0,0,0,.3);
}
.menu-card.dark .menu-name { color: rgba(255,255,255,.9); }
.menu-price.gold { color: var(--oro); }

/* Carta link button */
.btn-carta {
  border-radius: 25px;
  padding: 10px 28px;
  font-weight: 700;
  font-size: .9rem;
}
.btn-outline-dark.btn-carta:hover { background: var(--espresso); color: #fff; }
.btn-outline-cream.btn-carta {
  border-color: rgba(255,255,255,.45);
  color: rgba(255,255,255,.9);
}
.btn-outline-cream.btn-carta:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }

/* ── Gallery ──────────────────────────────────────────── */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-top: 2rem;
}

.gallery-item {
  overflow: hidden;
  aspect-ratio: 1/1;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.gallery-item:hover img { transform: scale(1.08); }

@media (max-width: 767.98px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Horario ──────────────────────────────────────────── */
.horario-box {
  background: #fff;
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: 0 2px 16px rgba(0,0,0,.08);
}

.horario-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  color: var(--espresso);
  margin-bottom: 1rem;
}

.horario-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
}
.horario-table td { padding: 9px 0; border-bottom: 1px solid rgba(0,0,0,.07); }
.horario-table td.dia { font-weight: 700; color: var(--texto); padding-right: 1rem; }
.horario-table td.hora { font-weight: 800; color: #1a6e35; text-align: right; }
.horario-table tr.cerrado td { color: var(--texto-suave) !important; opacity: .6; }
.horario-table tr.cerrado td.hora { color: #c0392b !important; opacity: .7; }

.horario-aviso {
  background: #fff8e1;
  border-left: 4px solid var(--oro);
  padding: 10px 14px;
  border-radius: 0 8px 8px 0;
  font-size: .85rem;
  color: #7b5b00;
  line-height: 1.5;
}
.horario-aviso i { margin-right: 6px; }

.contacto-box p { font-size: .9rem; line-height: 1.7; }
.contacto-tel {
  display: inline-block;
  background: var(--espresso);
  color: #fff;
  font-weight: 800;
  font-size: 1.1rem;
  padding: 8px 20px;
  border-radius: 25px;
  text-decoration: none;
  transition: background .2s;
}
.contacto-tel:hover { background: var(--espresso-2); color: var(--oro); }
.contacto-tel i { margin-right: 6px; }

.rrss-links { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.rrss-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: .85rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform .15s, filter .15s;
}
.rrss-btn:hover { transform: translateY(-2px); filter: brightness(1.1); }
.rrss-btn.instagram { background: #c13584; color: #fff; }
.rrss-btn.facebook  { background: #1877f2; color: #fff; }

.mapa-wrapper {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.12);
}
.mapa-wrapper iframe { display: block; }

/* ── Footer ───────────────────────────────────────────── */
.footer-dark {
  background: var(--espresso);
  padding: 2.5rem 0 1.5rem;
}

.footer-logo { opacity: .9; }
.footer-addr { color: rgba(255,255,255,.65); font-size: .85rem; }
.footer-tel {
  color: var(--oro);
  font-weight: 800;
  text-decoration: none;
  font-size: 1rem;
}
.footer-tel:hover { color: #fff; }

.footer-social {
  display: inline-block;
  color: rgba(255,255,255,.6);
  font-size: 1.5rem;
  margin-left: .75rem;
  text-decoration: none;
  transition: color .2s, transform .2s;
}
.footer-social:hover { color: var(--oro); transform: scale(1.15); }

.footer-hr { border-color: rgba(255,255,255,.12); margin: 1.5rem 0 1rem; }
.footer-copy { color: rgba(255,255,255,.35); font-size: .8rem; }

/* ── Subpages ─────────────────────────────────────────── */
.page-hero {
  min-height: 320px;
  position: relative;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  padding-top: var(--navbar-h);
}
.page-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(26,15,6,.55) 0%, rgba(26,15,6,.85) 100%);
}
.page-hero-content {
  position: relative; z-index: 2;
  padding: 2.5rem 1.5rem;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.page-hero-content h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 6vw, 3rem);
  color: #fff;
  margin-bottom: .3rem;
  text-shadow: 0 2px 10px rgba(0,0,0,.5);
}
.page-hero-content p {
  color: rgba(255,255,255,.75);
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
}
.breadcrumb-dark { margin-bottom: .75rem; }
.breadcrumb-dark .breadcrumb-item a { color: var(--oro); text-decoration: none; }
.breadcrumb-dark .breadcrumb-item.active { color: rgba(255,255,255,.65); }
.breadcrumb-dark .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.4); }

.cat-section-header {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}
.cat-section-img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 10px;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
}
@media (max-width: 575.98px) {
  .cat-section-img { width: 60px; height: 60px; }
}

.section-divider {
  border: none;
  border-top: 2px dashed rgba(0,0,0,.1);
  margin: 3rem 0;
}

.page-nav-btns {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: center;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(0,0,0,.08);
}

.postre-card { border: 2px solid transparent; transition: border-color .25s, transform .25s, box-shadow .25s; }
.postre-card:hover { border-color: var(--oro); }

.menu-price.badge-season {
  font-size: .72rem;
  background: #fef3c7;
  color: #92400e;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 700;
  display: inline-block;
}

.postre-aviso {
  background: linear-gradient(135deg, #fdf4e7 0%, #fef9f0 100%);
  border: 1px solid #f0d080;
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  max-width: 560px;
  margin: 0 auto;
}
.postre-aviso i { color: #c05; font-size: 1.2rem; flex-shrink: 0; margin-top: 2px; }
.postre-aviso p { margin: 0; color: var(--texto); font-size: .9rem; line-height: 1.6; }

/* ── Alérgenos en tarjetas ────────────────────────────── */
.card-info-alerg { display:flex; align-items:center; justify-content:space-between; gap:4px; width:100%; }
.card-left { display:flex; flex-direction:column; gap:1px; min-width:0; flex-shrink:1; }
.alerg-icons-row { display:flex; flex-wrap:wrap; gap:4px; justify-content:flex-end; flex-shrink:0; max-width:55%; }
.alerg-item { display:flex; flex-direction:column; align-items:center; }
.alerg-ico-circle { width:32px; height:32px; object-fit:contain; }
.alerg-label { display:none; }
.menu-card.dark .alerg-label { display:none; }

/* Postres en portada — iconos alérgenos más pequeños para columnas estrechas */
#postres .alerg-ico-circle { width:22px; height:22px; }
#postres .alerg-icons-row { gap:2px; }

/* ── WhatsApp flotante ────────────────────────────────── */
.wa-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  background: #25D366;
  color: #fff;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.85rem;
  box-shadow: 0 4px 18px rgba(37,211,102,.5);
  transition: transform .2s, box-shadow .2s;
  text-decoration: none;
}
.wa-float:hover, .wa-float:focus {
  transform: scale(1.1);
  box-shadow: 0 6px 26px rgba(37,211,102,.65);
  color: #fff;
}

/* ── Cookie banner ────────────────────────────────────── */
.cookie-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 10000;
  background: #120b04;
  color: var(--crema);
  padding: .9rem 1.5rem;
  box-shadow: 0 -3px 18px rgba(0,0,0,.45);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1.5rem;
}
.cookie-banner p {
  margin: 0;
  font-size: .875rem;
  line-height: 1.55;
  flex: 1 1 280px;
}
.cookie-banner p a { color: var(--oro); }
.cookie-btns { display: flex; gap: .55rem; flex-shrink: 0; }
.btn-cookie-accept {
  background: var(--oro);
  color: var(--espresso);
  border: none;
  padding: .4rem 1.1rem;
  border-radius: 4px;
  font-weight: 700;
  font-size: .875rem;
  cursor: pointer;
}
.btn-cookie-accept:hover { filter: brightness(1.08); }
.btn-cookie-reject {
  background: transparent;
  color: rgba(253,248,240,.7);
  border: 1px solid rgba(253,248,240,.35);
  padding: .4rem 1.1rem;
  border-radius: 4px;
  font-size: .875rem;
  cursor: pointer;
}
.btn-cookie-reject:hover { border-color: var(--crema); color: var(--crema); }

/* ── Footer legal links ───────────────────────────────── */
.footer-legal-link {
  color: rgba(253,248,240,.55);
  text-decoration: none;
  transition: color .2s;
}
.footer-legal-link:hover { color: var(--oro); }

/* ── Páginas legales ──────────────────────────────────── */
.legal-page {
  padding-top: 100px;
  padding-bottom: 64px;
  background: var(--crema);
  min-height: 72vh;
}
.legal-page h1 {
  font-family: 'Playfair Display', serif;
  color: var(--espresso);
  font-size: 2rem;
  margin-bottom: .3rem;
}
.legal-page .legal-date {
  font-size: .8rem;
  color: #8a7060;
  margin-bottom: 2rem;
}
.legal-page h2 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--espresso);
  margin-top: 2rem;
  margin-bottom: .5rem;
  border-left: 3px solid var(--oro);
  padding-left: .55rem;
}
.legal-page p, .legal-page li {
  color: #3a2a1a;
  line-height: 1.8;
  font-size: .93rem;
}
.legal-page a { color: var(--espresso); font-weight: 600; }
.legal-page table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .88rem; }
.legal-page th, .legal-page td { padding: .5rem .75rem; border: 1px solid #d6c9b8; text-align: left; }
.legal-page th { background: var(--espresso); color: var(--crema); font-weight: 700; }
.legal-page tr:nth-child(even) td { background: rgba(240,192,64,.07); }

/* ── Responsive tweaks ────────────────────────────────── */
@media (max-width: 575.98px) {
  .section-cream, .section-dark { padding: 56px 0 40px; }
  .hero-logo { width: 160px; }
  .hero-tagline { font-size: 1.15rem; }
  .horario-box { padding: 1.25rem; }
  .section-gallery { padding: 56px 0 0; }
}