/* =========================================
   La Trucha Grilla — main.css
   Mobile-first, WCAG AA compliant
   ========================================= */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,600&family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');

/* --- CSS Variables --- */
:root {
  /* Palette */
  --carbon:      #0D0D0B;
  --carbon-mid:  #161410;
  --carbon-soft: #1E1C17;
  --crema:       #F4EBCE;
  --crema-off:   #EAD9B2;
  --amber:       #C4813E;
  --amber-light: #DCA46A;
  --amber-dark:  #7A4018;  /* WCAG AA sobre crema: ratio ~8:1 */
  --verde:       #2D5016;

  /* Text */
  --texto-dark:    #1E160E;
  --texto-muted:   #6E5035;
  --texto-crema:   rgba(244,235,206,0.88);
  --texto-crema-2: rgba(244,235,206,0.72);
  --borde:         #D5C49A;
  --borde-dark:    rgba(244,235,206,0.1);

  /* Typography */
  --font-titulo: 'Fraunces', Georgia, serif;
  --font-body:   'Lora', Georgia, serif;

  /* Shadows & shapes */
  --sombra-suave: 0 2px 16px rgba(196,129,62,0.12);
  --sombra-media: 0 4px 32px rgba(196,129,62,0.18);
  --radio:       12px;
  --radio-grande: 20px;
}


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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: clamp(15px, 0.94rem + 0.2vw, 17px);
  line-height: 1.7;
  color: var(--texto-dark);
  /* Color de relleno para que los gaps entre secciones no muestren blanco */
  background: var(--carbon);
  -webkit-font-smoothing: antialiased;
}

/* Grain / textura de papel rústico sobre todo el sitio */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.032;
  pointer-events: none;
  z-index: 9998;
}

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

a {
  color: inherit;
  text-decoration: none;
}

/* --- Focus visible (accesibilidad) --- */
:focus-visible {
  outline: 3px solid var(--verde);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- Skip link (WCAG 2.4.1) --- */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  background: var(--carbon);
  color: var(--crema);
  padding: 0.7rem 1.2rem;
  border-radius: 4px;
  font-weight: 600;
  text-decoration: none;
  z-index: 9999;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 1rem;
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

/* --- Tipografía --- */
h1, h2, h3, h4 {
  font-family: var(--font-titulo);
  font-variation-settings: 'opsz' 72;   /* Fraunces optical sizing — más carácter en display */
  line-height: 1.12;
  color: var(--carbon-mid);
}

h1 { font-size: clamp(2.4rem, 5.5vw, 4.2rem); font-variation-settings: 'opsz' 144; }
h2 { font-size: clamp(1.9rem, 3.8vw, 3rem);   font-variation-settings: 'opsz' 72;  }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.65rem);font-variation-settings: 'opsz' 32;  }

p { max-width: 65ch; }

/* =========================================
   HEADER / NAV
   ========================================= */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(250, 247, 240, 0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--borde);
  padding: 0 1.5rem;
  transition: box-shadow 0.3s;
}

.site-header.scrolled {
  box-shadow: var(--sombra-suave);
}

.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  gap: 1rem;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.nav-logo img {
  height: 48px;
  width: 48px;
  object-fit: contain;
  border-radius: 50%;
}

.nav-logo-text {
  font-family: var(--font-titulo);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--verde);
  line-height: 1.2;
}

.nav-logo-text span {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--texto-muted);
  font-family: var(--font-body);
}

/* Desktop nav */
.nav-links {
  display: none;
  list-style: none;
  gap: 2rem;
  align-items: center;
}

.nav-links a {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--texto-dark);
  transition: color 0.2s;
  cursor: pointer;
}

.nav-links a:hover { color: var(--verde); }

.nav-cta {
  display: none;
  background: var(--verde);
  color: var(--crema) !important;
  padding: 0.6rem 1.4rem;
  border-radius: 30px;
  font-weight: 600;
  transition: background 0.2s, transform 0.1s;
  min-height: 44px;
  align-items: center;
}

.nav-cta:hover { background: #1d3310; transform: translateY(-1px); }

/* Language switcher — circular flag buttons */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
}

.lang-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: transparent;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, opacity 0.2s;
  opacity: 0.45;
  padding: 0;
}

.lang-btn.active {
  border-color: var(--verde);
  box-shadow: 0 0 0 2px rgba(45, 80, 22, 0.18);
  opacity: 1;
}

.lang-btn:not(.active):hover {
  opacity: 0.75;
  border-color: rgba(45, 80, 22, 0.35);
}

/* Hamburger */
.nav-hamburger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 8px;
  background: none;
  border: none;
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  transition: background 0.2s;
}

.nav-hamburger:hover { background: var(--crema); }

.nav-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--texto-dark);
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}

.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.nav-drawer {
  display: none;
  position: fixed;
  top: 70px;
  left: 0;
  right: 0;
  background: var(--crema);
  border-bottom: 1px solid var(--borde);
  padding: 1.5rem;
  z-index: 99;
  box-shadow: var(--sombra-media);
}

.nav-drawer.open { display: block; }

.nav-drawer ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.nav-drawer li a {
  display: block;
  padding: 0.85rem 0;
  font-weight: 500;
  color: var(--texto-dark);
  border-bottom: 1px solid var(--borde);
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.nav-drawer li:last-child a { border-bottom: none; }

.nav-drawer .drawer-cta {
  display: block;
  margin-top: 1.25rem;
  background: var(--verde);
  color: var(--crema);
  text-align: center;
  padding: 0.85rem;
  border-radius: var(--radio);
  font-weight: 600;
  min-height: 44px;
}

/* =========================================
   HERO
   ========================================= */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background-image: url('../assets/foto-principal.jpg');
  background-size: cover;
  background-position: center;
  transform: scale(1.05);
  transition: transform 8s ease;
}

.hero-bg.loaded { transform: scale(1); }

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(29, 37, 14, 0.82) 0%,
    rgba(29, 37, 14, 0.55) 60%,
    rgba(29, 37, 14, 0.3) 100%
  );
}

.hero-content {
  position: relative;
  z-index: 1;
  padding: 120px 1.5rem 4rem;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(245, 237, 215, 0.15);
  border: 1px solid rgba(245, 237, 215, 0.35);
  color: var(--crema);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.4rem 1rem;
  border-radius: 30px;
  margin-bottom: 1.25rem;
}

.hero-title {
  color: var(--crema);
  font-size: clamp(2.4rem, 6vw, 4.5rem);
  margin-bottom: 1rem;
  max-width: 14ch;
}

.hero-title em {
  color: #C8E6A0;
  font-style: normal;
}

.hero-desc {
  color: var(--texto-crema);
  font-size: clamp(1rem, 2vw, 1.15rem);
  max-width: 48ch;
  margin-bottom: 2rem;
}

.hero-rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 2rem;
  color: var(--crema);
  font-size: 0.9rem;
}

.hero-rating .stars {
  color: #F5C842;
  font-size: 1.1rem;
  letter-spacing: 2px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--verde);
  color: var(--crema);
  padding: 0.85rem 2rem;
  border-radius: 50px;
  font-weight: 600;
  font-size: 1rem;
  min-height: 52px;
  transition: background 0.2s, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s;
  box-shadow: 0 4px 16px rgba(45, 80, 22, 0.35);
  cursor: pointer;
}

.btn-primary:hover {
  background: var(--verde);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(45, 80, 22, 0.45);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: rgba(245, 237, 215, 0.15);
  border: 2px solid rgba(245, 237, 215, 0.5);
  color: var(--crema);
  padding: 0.85rem 1.75rem;
  border-radius: 50px;
  font-weight: 500;
  font-size: 1rem;
  min-height: 52px;
  transition: background 0.2s, border-color 0.2s, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.btn-secondary:hover {
  background: rgba(245, 237, 215, 0.25);
  border-color: var(--crema);
}

.hero-scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  color: var(--texto-crema-2);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  animation: bounce 2s infinite;
}

.hero-scroll svg { opacity: 0.6; }

@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(6px); }
}

/* =========================================
   SECTION BASE
   ========================================= */
.section {
  padding: 4.5rem 1.5rem;
}

.section-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.section-label {
  display: inline-block;
  font-size: clamp(1.1rem, 1.5vw, 1.5rem);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 0.75rem;
}

.section-title {
  margin-bottom: 0.75rem;
  color: var(--carbon-mid);
}

.section-desc {
  color: var(--texto-muted);
  margin-bottom: 3rem;
  font-size: 1.05rem;
}

/* =========================================
   ESPECIALIDADES
   ========================================= */
.especialidades {
  background: var(--crema);
}

.especialidades-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.especialidad-card {
  background: var(--crema-off);
  border-radius: var(--radio-grande);
  overflow: hidden;
  box-shadow: var(--sombra-suave);
  transition: transform 0.25s, box-shadow 0.25s;
  display: flex;
  flex-direction: column;
}

.especialidad-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-media);
}

.especialidad-img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.especialidad-body {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.especialidad-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--verde);
  background: rgba(45, 80, 22, 0.1);
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  margin-bottom: 0.75rem;
  width: fit-content;
}

.especialidad-body h3 {
  margin-bottom: 0.5rem;
  color: var(--carbon-mid);
}

.especialidad-body p {
  color: var(--texto-muted);
  font-size: 0.95rem;
  flex: 1;
}

/* =========================================
   MENU
   ========================================= */
.menu {
  background: var(--crema);
}

.menu .section-label { color: var(--amber-dark); }
.menu .section-title { color: var(--texto-dark); }
.menu .section-desc  { color: var(--texto-muted); }

/* Esp-cards en fondo claro */
.menu .esp-card {
  background: rgba(0,0,0,0.03);
  border-color: rgba(196,129,62,0.25);
}
.menu .esp-card:hover {
  background: rgba(196,129,62,0.07);
  border-color: var(--amber);
}
.menu .esp-card h3 { color: var(--texto-dark); }
.menu .esp-card p  { color: var(--texto-muted); }

.menu-tabs {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}

.menu-tab {
  padding: 0.55rem 1.25rem;
  border-radius: 30px;
  border: 2px solid rgba(196,129,62,0.35);
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--texto-muted);
  cursor: pointer;
  min-height: 44px;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.menu-tab.active, .menu-tab:hover {
  background: var(--amber);
  color: #fff;
  border-color: var(--amber);
}

.menu-panel {
  display: none;
}

.menu-panel.active {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

.menu-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  background: rgba(196,129,62,0.04);
  border: 1px solid rgba(196,129,62,0.15);
  border-radius: var(--radio);
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}
.menu-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
}

/* Imagen grande arriba */
.menu-item-img {
  width: 100%;
  height: 200px;
  border-radius: 0;
  background-size: cover;
  background-position: center;
  background-color: rgba(196,129,62,0.1);
  flex-shrink: 0;
}

.menu-item-info {
  flex: 1;
  padding: 1rem 1.25rem;
}

.menu-item-info h4 {
  font-family: var(--font-titulo);
  font-size: 1.05rem;
  color: var(--texto-dark);
  margin-bottom: 0.25rem;
}

.menu-item-info p {
  font-size: 0.875rem;
  color: var(--texto-muted);
}

.menu-nota {
  margin-top: 2rem;
  padding: 1rem 1.25rem;
  background: rgba(45, 80, 22, 0.06);
  border-radius: var(--radio);
  border: 1px solid rgba(45, 80, 22, 0.2);
  color: var(--texto-muted);
  font-size: 0.875rem;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

/* =========================================
   GALERÍA
   ========================================= */
.galeria {
  position: relative;
  background: var(--carbon-mid);
  padding: 4.5rem 1.5rem;
  overflow: hidden;
}

.galeria .section-title { color: var(--crema); }
.galeria .section-label { color: var(--amber); }
.galeria .section-desc { color: var(--texto-crema-2); }

/* ---- Gallery expandable strip ---- */
.galeria-strip {
  display: flex;
  gap: 0.5rem;
  height: 22rem;
  width: 100%;
}

.galeria-item {
  flex: 1;
  height: 100%; /* explicit height so children can resolve height:100% in all browsers */
  position: relative;
  overflow: hidden;
  border-radius: var(--radio);
  cursor: zoom-in;
  border: none;
  padding: 0;
  background: #0a1a10;
  transition: flex 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.galeria-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
  pointer-events: none;
}

.galeria-item:hover img { transform: scale(1.05); }

/* Overlay fades on hover */
.galeria-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10, 5, 2, 0.42);
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.galeria-item:hover::after { opacity: 0; }

/* Zoom icon */
.galeria-zoom-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(245, 237, 215, 0.9);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 2;
}

.galeria-item:hover .galeria-zoom-hint { opacity: 1; }

/* Expanded / compressed states (set via JS on hover) */
.galeria-item.lb-expanded   { flex: 2.5; }
.galeria-item.lb-compressed { flex: 0.5; }

/* =========================================
   BLOG
   ========================================= */
.section.blog {
  background: var(--crema);
  padding: 4.5rem 1.5rem;
}

.section.blog .section-title { color: var(--texto-dark); }
.section.blog .section-label { color: var(--amber-dark); }
.section.blog .section-desc  { color: var(--texto-muted); }

/* ---- Tabs ---- */
.blog-tabs {
  display: flex;
  gap: 0.5rem;
  margin: 2rem 0 1.75rem;
  flex-wrap: wrap;
}

.blog-tab {
  padding: 0.5rem 1.25rem;
  border-radius: 50px;
  background: transparent;
  border: 1.5px solid rgba(196,129,62,0.35);
  color: var(--texto-muted);
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}

.blog-tab:hover {
  border-color: var(--amber);
  color: var(--amber);
}

.blog-tab.active {
  background: var(--amber);
  border-color: var(--amber);
  color: #fff;
  font-weight: 600;
}

/* ---- Panels ---- */
.blog-panel { display: none; }
.blog-panel.active { display: block; }

/* ---- Carousel ---- */
.blog-carousel { position: relative; }
.blog-slide { display: none; }
.blog-slide.active { display: block; }

/* Layout: hero top, 2 sub-cards below */
.blog-layout {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ---- Hero card ---- */
.blog-card--hero {
  display: flex;
  flex-direction: row;
  height: 280px;
  border-radius: var(--radio-grande);
  overflow: hidden;
  background: #1a1815;
  cursor: pointer;
  transition: box-shadow 0.2s;
}

.blog-card--hero:hover {
  box-shadow: 0 8px 32px rgba(196,129,62,0.18);
}

.blog-card--hero .bcard-img {
  width: 55%;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  background-color: #0d0d0b;
}

.blog-card--hero .bcard-body {
  width: 45%;
  padding: 2rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.75rem;
}

.blog-card--hero .bcard-body h3 {
  font-family: var(--font-titulo);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--crema);
  line-height: 1.35;
  margin: 0;
}

.blog-card--hero .bcard-body p {
  font-size: 0.88rem;
  color: var(--texto-crema-2);
  line-height: 1.6;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- Sub-cards row ---- */
.blog-cards-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.blog-card--sub {
  display: flex;
  flex-direction: row;
  height: 160px;
  border-radius: var(--radio);
  overflow: hidden;
  background: #F4EBCE;
  cursor: pointer;
  transition: box-shadow 0.2s;
}

.blog-card--sub:hover {
  box-shadow: 0 4px 20px rgba(196,129,62,0.22);
}

.blog-card--sub .bcard-img {
  width: 38%;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  background-color: #c4a87a;
}

.blog-card--sub .bcard-body {
  width: 62%;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
}

.blog-card--sub .bcard-body h3 {
  font-family: var(--font-titulo);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--texto-dark);
  line-height: 1.35;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card--sub .bcard-body p {
  display: none; /* sub-cards show only title + tag */
}

/* ---- Tag & link ---- */
.bcard-tag {
  display: inline-block;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--amber);
  font-family: var(--font-body);
}

.blog-card--sub .bcard-tag { color: var(--amber); }

.bcard-link {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--amber-light);
  margin-top: auto;
  letter-spacing: 0.02em;
}

/* ---- Carousel controls ---- */
.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.carousel-btn {
  background: transparent;
  border: 1.5px solid rgba(196,129,62,0.4);
  color: var(--amber);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s, border-color 0.18s;
  flex-shrink: 0;
}

.carousel-btn:hover:not(:disabled) {
  background: rgba(196,129,62,0.15);
  border-color: var(--amber);
}

.carousel-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.carousel-dots {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(196,129,62,0.25);
  cursor: pointer;
  transition: background 0.18s;
}

.carousel-dot.active { background: var(--amber); }

.carousel-btn { color: var(--amber); }

/* =========================================
   REVIEWS CAROUSEL
   ========================================= */
.reviews-carousel-section {
  background: var(--carbon-soft);
  padding: 4.5rem 1.5rem;
  overflow: hidden;
}

.reviews-carousel-inner {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.reviews-top {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}

.reviews-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(245, 237, 215, 0.08);
  border: 1px solid rgba(245, 237, 215, 0.18);
  border-radius: 30px;
  padding: 0.4rem 1.1rem;
  color: #F5C842;
  font-size: 0.95rem;
}

.reviews-badge strong {
  color: var(--crema);
  font-size: 1rem;
}

.reviews-source {
  color: rgba(245, 237, 215, 0.55);
  font-size: 0.82rem;
}

.reviews-headline {
  font-family: var(--font-titulo);
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--crema);
  max-width: 36ch;
  text-align: center;
  line-height: 1.3;
}

/* =========================================
   MARQUEE TICKER de reviews
   ========================================= */
.marquee-outer {
  width: 82%;
  margin: 0 auto;
  overflow: hidden;
  /* fade suave en los bordes */
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  );
  cursor: default;
}

.marquee-track {
  display: flex;
  gap: 1rem;
  width: max-content;
  animation: marqueeScroll 42s linear infinite;
}

/* Pausa al hacer hover */
.marquee-outer:hover .marquee-track {
  animation-play-state: paused;
}

@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Card compacta */
.review-sm {
  flex-shrink: 0;
  width: 270px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(245, 237, 215, 0.1);
  border-radius: var(--radio);
  padding: 1.1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition: border-color 0.25s, background 0.25s;
}

.review-sm:hover {
  background: rgba(255,255,255,0.09);
  border-color: rgba(245,237,215,0.22);
}

.rsm-stars {
  font-size: 0.78rem;
  letter-spacing: 2px;
  /* shimmer heredado del selector .review-stars en animaciones extendidas — redefinir aquí */
  background: linear-gradient(90deg, #F5C842 0%, #FFE066 45%, #F5C842 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: starShimmer 2.8s linear infinite;
}

.rsm-text {
  font-family: var(--font-titulo);
  font-size: 0.88rem;
  color: rgba(245, 237, 215, 0.88);
  line-height: 1.55;
  font-style: italic;
  max-width: none;
  /* limitar a 3 líneas */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rsm-footer {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin-top: auto;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(245,237,215,0.08);
}

.rsm-author {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--crema);
}

.rsm-platform {
  font-size: 0.82rem;
  color: rgba(245, 237, 215, 0.62);
}

.reviews-link {
  font-size: 0.82rem;
  color: rgba(245, 237, 215, 0.72);
  transition: color 0.2s;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.reviews-link:hover { color: rgba(245, 237, 215, 0.85); }

/* =========================================
   CHEF BIO — ambiente rústico / madera y piedra
   ========================================= */
.chef-section {
  background: var(--carbon);
  overflow: hidden;
  position: relative;
}

/* Wrapper que recorta el canvas exactamente al área del chef bio */
.embers-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.embers-canvas {
  display: block;
  width: 100%;
  mix-blend-mode: screen;
  opacity: 0.9;
}

.chef-inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
}

/* Glow de fuego — sobre el section, detrás del chef-inner */
.chef-section::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 260px;
  background: linear-gradient(
    to top,
    rgba(160, 40, 5, 0.5) 0%,
    rgba(200, 90, 15, 0.2) 35%,
    rgba(196, 129, 62, 0.05) 70%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
  animation: flamePulse 3s ease-in-out infinite alternate;
}

@keyframes flamePulse {
  from { opacity: 0.55; }
  to   { opacity: 1;    }
}

.chef-foto-col {
  position: relative;
  background: #0A0A0A;
}

/* Gradiente de fusión foto → texto (solo desktop donde hay columna de texto a la derecha) */
.chef-foto-col::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 40%;
  background: linear-gradient(to right, transparent, var(--carbon));
  pointer-events: none;
  z-index: 2;
  display: none; /* oculto en mobile; se activa en desktop */
}

.chef-foto-wrap {
  overflow: hidden;
  max-height: 640px;
}

.chef-foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  filter: brightness(0.97) contrast(1.02);
}

.chef-foto-credito {
  position: absolute;
  bottom: 0.5rem;
  right: 0.75rem;
  font-size: 0.68rem;
  color: rgba(255,255,255,0.4);
  max-width: none;
}

.chef-foto-credito a { color: inherit; text-decoration: underline; }

.chef-texto-col {
  padding: 3rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  justify-content: center;
  background: linear-gradient(160deg, var(--carbon-soft) 0%, var(--carbon) 100%);
  position: relative;
  z-index: 5;
}

.chef-label {
  color: var(--amber);
  margin-bottom: 0.6rem;
  display: block;
}

.chef-nombre {
  font-family: var(--font-titulo);
  line-height: 1.0;
  margin-bottom: 0.5rem;
  text-shadow: 0 2px 32px rgba(196,129,62,0.3);
}

.chef-nombre-first {
  display: block;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 400;
  font-style: italic;
  color: var(--amber-light);
  letter-spacing: 0.06em;
  margin-bottom: 0.1rem;
}

.chef-nombre-last {
  display: block;
  font-size: clamp(2.8rem, 6vw, 5rem);
  font-weight: 700;
  color: var(--crema);
  letter-spacing: -0.01em;
  line-height: 0.95;
}

/* Stats row */
.chef-stats {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin: 1.5rem 0 1.75rem;
  padding: 1.25rem 0;
  border-top: 1px solid rgba(196,129,62,0.18);
  border-bottom: 1px solid rgba(196,129,62,0.18);
}

.chef-stat {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.chef-stat-num {
  font-family: var(--font-titulo);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  color: var(--amber);
  line-height: 1;
}

.chef-stat-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(245,220,190,0.72);
}

.chef-stat-divider {
  width: 1px;
  height: 2.5rem;
  background: rgba(196,129,62,0.22);
  flex-shrink: 0;
}

.chef-cargo {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(245,220,190,0.48);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: 1.75rem;
  max-width: none;
}

.chef-bio {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin-bottom: 1.75rem;
}

.chef-bio p {
  color: rgba(245,220,190,0.78);
  font-size: 0.96rem;
  line-height: 1.72;
  max-width: 56ch;
}

.chef-bio strong {
  color: #FAF0E0;
  font-weight: 600;
}

.chef-quote {
  border-left: 3px solid var(--amber);
  padding: 1.1rem 1.25rem;
  background: rgba(196,129,62,0.08);
  border-radius: 0 var(--radio) var(--radio) 0;
  margin-bottom: 1.75rem;
  font-family: var(--font-titulo);
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  color: var(--crema);
  font-style: italic;
  line-height: 1.5;
  position: relative;
  animation: quoteBorderRustic 5s ease-in-out infinite;
}

@keyframes quoteBorderRustic {
  0%,100% { border-left-color: var(--amber); }
  50%      { border-left-color: var(--amber-light); }
}

.chef-quote-mark {
  font-family: var(--font-titulo);
  font-size: 3rem;
  color: var(--amber);
  line-height: 0.6;
  display: inline;
  margin-right: 0.1rem;
  opacity: 0.45;
  vertical-align: middle;
}

.chef-quote cite {
  display: block;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.8rem;
  color: var(--amber);
  font-weight: 600;
  margin-top: 0.65rem;
  letter-spacing: 0.04em;
}

.chef-prensa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.65rem;
}

.chef-prensa-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(245,220,190,0.4);
}

.chef-prensa a {
  font-size: 0.8rem;
  font-weight: 500;
  color: #E8A050;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 0.2s;
}

.chef-prensa a:hover { opacity: 0.7; }

.chef-foto-credito a { color: inherit; text-decoration: underline; }

/* =========================================
   RESEÑAS (legacy — estilos conservados)
   ========================================= */
.resenas {
  background: var(--crema-off);
}

.resenas-rating-general {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 1.5rem;
  background: var(--crema);
  border-radius: var(--radio-grande);
  margin-bottom: 2.5rem;
  border: 1px solid var(--borde);
}

.rating-numero {
  font-family: var(--font-titulo);
  font-size: 3.5rem;
  font-weight: 700;
  color: var(--verde);
  line-height: 1;
}

.rating-info { flex: 1; min-width: 160px; }

.rating-estrellas {
  color: #E8A500;
  font-size: 1.4rem;
  letter-spacing: 3px;
}

.rating-count {
  color: var(--texto-muted);
  font-size: 0.9rem;
  margin-top: 0.25rem;
}

.rating-badge {
  background: rgba(45, 80, 22, 0.1);
  color: var(--verde);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.5rem 1rem;
  border-radius: var(--radio);
}

.resenas-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.resena-card {
  background: var(--crema);
  border-radius: var(--radio-grande);
  padding: 1.5rem;
  box-shadow: var(--sombra-suave);
}

.resena-header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1rem;
}

.resena-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--verde);
  color: var(--crema);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-titulo);
  font-size: 1.1rem;
  font-weight: 700;
  flex-shrink: 0;
}

.resena-autor { font-weight: 600; color: var(--carbon-mid); }
.resena-fecha { font-size: 0.8rem; color: var(--texto-muted); }

.resena-estrellas {
  color: #E8A500;
  font-size: 0.95rem;
  letter-spacing: 2px;
  margin-bottom: 0.75rem;
}

.resena-card p {
  color: var(--texto-dark);
  font-size: 0.95rem;
  line-height: 1.6;
  font-style: italic;
}

/* =========================================
   CONTACTO
   ========================================= */
.contacto {
  position: relative;
  background: var(--crema);
  padding: 4rem 1.5rem 4.5rem;
  overflow: hidden;
}

/* Textura suave sobre fondo crema */
.contacto::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse 400px 300px at 90% 20%, rgba(196,129,62,0.08) 0%, transparent 100%),
    radial-gradient(ellipse 300px 250px at 5% 85%, rgba(196,129,62,0.06) 0%, transparent 100%);
  z-index: 0;
  pointer-events: none;
}

.contacto .section-label  { color: var(--amber-dark); }
.contacto .section-title  { color: var(--texto-dark); }
.contacto .section-desc   { color: var(--texto-muted); max-width: 600px; }

.contacto-header {
  text-align: center;
  margin-bottom: 3rem;
}

.contacto-header .section-desc { margin: 0 auto; }

/* ---- 3 info cards ---- */
.cinfo-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.cinfo-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.65rem;
  padding: 2rem 1.5rem;
  background: var(--crema);
  border-radius: var(--radio-grande);
  border: 1px solid rgba(196,129,62,0.18);
  box-shadow: 0 2px 16px rgba(196,129,62,0.08);
}

.cinfo-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(196,129,62,0.1);
  border: 1px solid rgba(196,129,62,0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--amber);
  margin-bottom: 0.25rem;
}

.cinfo-card-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--texto-muted);
  font-weight: 700;
  margin: 0;
}

.cinfo-card-value {
  color: var(--texto-dark);
  font-size: 1rem;
  line-height: 1.55;
  margin: 0;
}

.cinfo-card-value strong {
  color: var(--amber);
  font-weight: 700;
}

.cinfo-tel {
  color: var(--amber);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: color 0.2s;
}

.cinfo-tel:hover { color: var(--texto-dark); }

/* ---- Mapa full-width ---- */
.mapa-wrap {
  border-radius: var(--radio-grande);
  overflow: hidden;
  height: 380px;
  margin-bottom: 3rem;
  box-shadow:
    0 0 0 3px rgba(196,129,62,0.2),
    0 16px 48px rgba(0,0,0,0.14);
}

.mapa-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ---- CTAs centrados ---- */
.contacto-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: 0.5rem;
  margin-bottom: 2.5rem;
  width: 100%;
  text-align: center;
}

.btn-wa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 1rem 2.5rem;
  border-radius: 50px;
  background: #25D366;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  min-height: 54px;
  width: 100%;
  max-width: 360px;
  box-shadow: 0 6px 24px rgba(37,211,102,0.28);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.15s;
  cursor: pointer;
}

.btn-wa:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(37,211,102,0.38);
}

.btn-maps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.9rem 2.5rem;
  border-radius: 50px;
  background: transparent;
  color: var(--texto-dark);
  font-weight: 600;
  font-size: 0.95rem;
  min-height: 52px;
  width: 100%;
  max-width: 360px;
  border: 2px solid rgba(196,129,62,0.45);
  transition: border-color 0.2s, background 0.2s, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.btn-maps:hover {
  border-color: var(--amber);
  background: rgba(196,129,62,0.08);
  transform: translateY(-2px);
}

.mapa-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  text-align: center;
  font-size: 0.83rem;
  color: var(--texto-muted);
  margin: 0;
  padding: 0.5rem 0 1rem;
}

.mapa-hint svg { flex-shrink: 0; color: var(--amber); }

/* =========================================
   REVIEWS — mejoras marquee
   ========================================= */

/* Ampliar el inner para que el marquee respire */
.reviews-carousel-inner {
  max-width: 100% !important;
  padding: 0;
}

.reviews-top {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Cards más grandes y elegantes */
.review-sm {
  width: 320px;
  padding: 1.6rem 1.75rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--borde-dark);
  border-radius: 16px;
  position: relative;
}

.review-sm::before {
  content: '\201C';
  position: absolute;
  top: 0.6rem;
  left: 1.2rem;
  font-family: var(--font-titulo);
  font-size: 3.5rem;
  color: var(--amber);
  opacity: 0.35;
  line-height: 1;
  pointer-events: none;
}

.rsm-text {
  font-size: 0.92rem;
  padding-top: 1rem;
}

/* Fade edges más ancho */
.marquee-outer {
  mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%) !important;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%) !important;
}

.marquee-track {
  gap: 1.25rem;
  padding: 0.5rem 0;
  animation-duration: 52s !important;
}

/* =========================================
   ACTIVIDADES — cards cinematográficas
   ========================================= */

.actividades {
  background: var(--carbon-soft);
  position: relative;
}

.actividades .section-label { color: var(--amber); }
.actividades .section-title { color: var(--crema); }
.actividades .section-desc  { color: var(--texto-crema-2); }

.actividades-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 3rem;
}

/* Card editorial con imagen full-bleed */
.actividad-card {
  position: relative;
  border-radius: var(--radio-grande);
  overflow: hidden;
  aspect-ratio: 4/3;
  cursor: pointer;
  /* imagen via CSS custom property */
}

/* La imagen de fondo */
.act-img {
  position: absolute;
  inset: 0;
  background-image: var(--act-img);
  background-size: cover;
  background-position: center;
  transition: transform 0.65s cubic-bezier(0.4,0,0.2,1);
  will-change: transform;
}

.actividad-card:hover .act-img {
  transform: scale(1.07);
}

/* Gradiente overlay */
.act-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.88) 0%,
    rgba(0,0,0,0.45) 40%,
    rgba(0,0,0,0.12) 70%,
    transparent 100%
  );
  transition: opacity 0.4s;
}

.actividad-card:hover .act-overlay {
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.92) 0%,
    rgba(0,0,0,0.55) 50%,
    rgba(0,0,0,0.2) 75%,
    transparent 100%
  );
}

/* Badge de dificultad — top left */
.act-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.28rem 0.7rem;
  border-radius: 20px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.act-badge--alta  { background: rgba(180,40,30,0.75); color: #fff; }
.act-badge--media { background: rgba(200,133,90,0.75); color: #fff; }
.act-badge--baja  { background: rgba(45,80,22,0.75);  color: #fff; }

/* Contenido en la parte inferior */
.act-body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 1.4rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.act-body h3 {
  font-family: var(--font-titulo);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  color: #fff;
  line-height: 1.15;
  margin: 0;
  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}

/* Descripción — oculta, aparece en hover */
.act-desc {
  font-size: 0.84rem;
  color: rgba(255,255,255,0.82);
  line-height: 1.55;
  max-width: none;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s ease, opacity 0.35s ease;
  margin: 0;
}

.actividad-card:hover .act-desc {
  max-height: 6rem;
  opacity: 1;
}

.act-meta {
  display: flex;
  gap: 0.75rem 1.25rem;
  flex-wrap: wrap;
}

.act-meta span {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.65);
  font-weight: 500;
}

.actividades-nota {
  text-align: center;
  font-family: var(--font-titulo);
  font-size: clamp(1.15rem, 2.5vw, 1.6rem);
  font-style: italic;
  color: var(--amber);
  margin-top: 3rem;
  max-width: none;
}

/* =========================================
   BLOG / ARTÍCULOS
   ========================================= */

.blog {
  background: var(--crema);
  position: relative;
}

.blog .section-label { color: var(--amber-dark); }
.blog .section-title { color: var(--texto-dark); }
.blog .section-desc  { color: var(--texto-muted); }

/* ---- Blog tabs ---- */
.blog-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2.5rem;
}

.blog-tab {
  padding: 0.45rem 1.1rem;
  border-radius: 999px;
  border: 1.5px solid rgba(196,129,62,0.4);
  background: transparent;
  color: var(--texto-muted);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
}
.blog-tab:hover {
  border-color: var(--amber);
  color: var(--amber);
}
.blog-tab.active {
  background: var(--amber);
  border-color: var(--amber);
  color: #fff;
}

/* ---- Blog panels ---- */
.blog-panel { display: none; }
.blog-panel.active { display: block; }

/* ---- Shared bcard base styles ---- */
.bcard-tag {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--amber);
}
.bcard-link {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--amber);
  text-decoration: none;
  transition: opacity 0.2s;
}
.bcard-link:hover { opacity: 0.75; }

/* ---- Blog carousel layout ---- */
.blog-carousel { position: relative; }

.blog-slide { display: none; }
.blog-slide.active { display: block; }

.blog-layout {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Hero card */
.blog-card--hero {
  display: flex;
  flex-direction: row;
  height: 300px;
  border-radius: var(--radio-grande);
  overflow: hidden;
  background: #1a1815;
  cursor: pointer;
  box-shadow: 0 4px 24px rgba(0,0,0,0.25);
  transition: box-shadow 0.25s, transform 0.2s;
}
.blog-card--hero:hover {
  box-shadow: 0 16px 48px rgba(0,0,0,0.4);
  transform: translateY(-2px);
}

.blog-card--hero .bcard-img {
  width: 55%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: filter 0.35s ease;
  flex-shrink: 0;
  position: relative;
}
/* Gradiente suave que fusiona imagen con la sección de texto */
.blog-card--hero .bcard-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 60%, #1a1815 100%);
}
.blog-card--hero:hover .bcard-img { filter: brightness(0.9) saturate(1.1); }

.blog-card--hero .bcard-body {
  width: 45%;
  padding: 2rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.7rem;
}
.blog-card--hero .bcard-body h3 {
  font-family: var(--font-titulo);
  font-size: clamp(1.1rem, 1vw + 0.8rem, 1.55rem);
  font-weight: 600;
  color: var(--crema);
  line-height: 1.3;
  margin: 0;
  /* No clamp — el card es lo suficientemente alto */
}
.blog-card--hero .bcard-body p {
  font-size: 0.87rem;
  color: rgba(244,235,206,0.6);
  line-height: 1.65;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}
.blog-card--hero .bcard-tag {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber);
  background: rgba(196,129,62,0.15);
  border: 1px solid rgba(196,129,62,0.3);
  padding: 0.2rem 0.75rem;
  border-radius: 50px;
}
.blog-card--hero .bcard-link {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--amber-light);
  margin-top: 0.25rem;
  letter-spacing: 0.02em;
}

/* Sub cards row */
.blog-cards-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.blog-card--sub {
  display: flex;
  flex-direction: row;
  height: 175px;
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--crema);
  cursor: pointer;
  border: 1px solid rgba(196,129,62,0.15);
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
  transition: transform 0.2s, box-shadow 0.2s;
}
.blog-card--sub:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 32px rgba(0,0,0,0.14);
  border-color: rgba(196,129,62,0.3);
}

.blog-card--sub .bcard-img {
  width: 40%;
  height: 100%;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  transition: filter 0.3s ease;
}
.blog-card--sub:hover .bcard-img { filter: brightness(0.9) saturate(1.1); }

.blog-card--sub .bcard-body {
  width: 60%;
  padding: 1.25rem 1.4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
}
.blog-card--sub .bcard-body h3 {
  font-family: var(--font-titulo);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--texto-dark);
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-card--sub .bcard-body p { display: none; }

/* Tag como badge de color en sub-cards */
.blog-card--sub .bcard-tag {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber);
  background: rgba(196,129,62,0.12);
  border: 1px solid rgba(196,129,62,0.25);
  padding: 0.18rem 0.6rem;
  border-radius: 50px;
  width: fit-content;
}
.blog-card--sub .bcard-link {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--amber);
  letter-spacing: 0.02em;
}

/* Carousel controls */
.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.25rem;
}
.carousel-btn {
  background: transparent;
  border: 1.5px solid rgba(196,129,62,0.4);
  color: var(--amber);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.carousel-btn:hover:not(:disabled) { background: var(--amber); color: #fff; border-color: var(--amber); }
.carousel-btn:disabled { opacity: 0.25; cursor: default; }
.carousel-dots { display: flex; gap: 0.5rem; align-items: center; }
.carousel-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(196,129,62,0.3);
  cursor: pointer;
  transition: background 0.2s;
}
.carousel-dot.active { background: var(--amber); }

/* Mobile */
@media (max-width: 768px) {
  .blog-card--hero { flex-direction: column; height: auto; }
  .blog-card--hero .bcard-img { width: 100%; height: 200px; }
  /* En mobile el layout es columnar: quitar el gradiente que oscurece la derecha de la imagen */
  .blog-card--hero .bcard-img::after { display: none; }
  .blog-card--hero .bcard-body { width: 100%; padding: 1.25rem; }
  .blog-cards-row { grid-template-columns: 1fr; }
  .blog-card--sub { height: 130px; }
  .blog-card--sub .bcard-body { padding: 0.9rem 1rem; }
  .carousel-btn { width: 44px; height: 44px; }
}

/* ---- Actividades mobile ---- */
@media (max-width: 640px) {
  .actividades-grid { grid-template-columns: 1fr !important; }

  /* Liberar aspect-ratio fijo y convertir en flex-column
     para que badge y body fluyan sin solaparse */
  .actividad-card {
    aspect-ratio: auto;
    min-height: 240px;
    display: flex;
    flex-direction: column;
  }

  /* img y overlay siguen siendo fondo absoluto — no cambian */

  /* Badge sale del flujo absoluto: fluye arriba del título */
  .act-badge {
    position: relative;
    top: auto;
    left: auto;
    align-self: flex-start;
    margin: 1rem 0 0 1rem;
    z-index: 3;
  }

  /* Body sale del absolute-bottom, empuja hacia abajo con margin-top:auto */
  .act-body {
    position: relative;
    bottom: auto;
    margin-top: auto;
    z-index: 3;
  }

  /* Overlay más oscuro desde arriba para cubrir badge+body cuando la card crece */
  .act-overlay {
    background: linear-gradient(
      to top,
      rgba(0,0,0,0.90) 0%,
      rgba(0,0,0,0.60) 30%,
      rgba(0,0,0,0.35) 60%,
      rgba(0,0,0,0.15) 100%
    );
  }

  /* En 1 columna hay espacio, mostrar descripción siempre */
  .actividad-card .act-desc {
    max-height: 5rem;
    opacity: 1;
  }

  .act-meta { display: flex; }
}

@media (min-width: 641px) and (max-width: 767px) {
  .actividades-grid { grid-template-columns: 1fr 1fr; }
  .actividad-card { aspect-ratio: 3/4; }
  .act-body { padding: 1rem 1rem 1.1rem; gap: 0.35rem; }
  .act-body h3 { font-size: 1rem; }
  .act-meta { display: none; }
  .act-badge { font-size: 0.82rem; padding: 0.2rem 0.55rem; }
}

@media (max-width: 600px) {
  .art-footer { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  .art-share { gap: 0.5rem; }
}

/* ---- Category row (legacy, hidden) ---- */
.blog-category {
  margin-bottom: 4.5rem;
}
.blog-category:last-child { margin-bottom: 0; }

/* Category header bar */
.blog-cat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  padding-bottom: 0.875rem;
  border-bottom: 1px solid var(--borde);
}

.blog-cat-name {
  font-family: var(--font-titulo);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--texto-dark);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.blog-cat-name::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 1.4em;
  background: var(--cat-color, var(--amber));
  border-radius: 2px;
  flex-shrink: 0;
}

.blog-cat-link {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cat-color, var(--amber));
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 0.2s;
}
.blog-cat-link:hover { opacity: 1; }

/* Category grid: mobile = stack, tablet+ = featured | side stack */
.blog-cat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

/* ---- All blog cards share base tilt styles ---- */
.blog-card {
  position: relative;
  border-radius: var(--radio-grande);
  overflow: hidden;
  cursor: pointer;
  will-change: transform;
  transform-style: preserve-3d;
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

/* Tilt spotlight overlay */
.tilt-spotlight {
  position: absolute;
  inset: 0;
  z-index: 10;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
  border-radius: inherit;
}

.tilt-spotlight-inner {
  position: absolute;
  width: 200%;
  height: 200%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,255,255,0.14) 0%, transparent 40%);
}

/* ---- Featured card (full-bleed overlay) ---- */
.blog-card--featured {
  min-height: 380px;
  display: flex;
  align-items: flex-end;
}

.blog-card--featured .bcard-img {
  position: absolute;
  inset: 0;
  background-image: var(--card-img);
  background-size: cover;
  background-position: center;
  transition: transform 0.65s cubic-bezier(0.4,0,0.2,1);
}
.blog-card--featured:hover .bcard-img { transform: scale(1.05); }

.blog-card--featured .bcard-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.93) 0%, rgba(0,0,0,0.55) 40%, rgba(0,0,0,0.08) 100%);
}

.blog-card--featured .bcard-tag {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  z-index: 15;
}

.blog-card--featured .bcard-body {
  position: relative;
  z-index: 15;
  padding: 1.75rem;
  color: var(--crema);
}

.blog-card--featured .bcard-body h3 {
  font-family: var(--font-titulo);
  font-size: clamp(1.2rem, 3vw, 1.65rem);
  line-height: 1.25;
  margin-bottom: 0.5rem;
}

.blog-card--featured .bcard-body p {
  font-size: 0.9rem;
  color: rgba(245,237,215,0.72);
  margin-bottom: 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.55;
  max-width: 540px;
}

/* ---- Standard card (image top + body bottom) ---- */
.blog-card--std {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(245,237,215,0.09);
  display: flex;
  flex-direction: column;
}

.bcard-img-wrap {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  flex-shrink: 0;
}

.bcard-img-wrap .bcard-img {
  position: absolute;
  inset: 0;
  background-image: var(--card-img);
  background-size: cover;
  background-position: center;
  transition: transform 0.6s cubic-bezier(0.4,0,0.2,1);
}
.blog-card--std:hover .bcard-img { transform: scale(1.07); }

.blog-card--std .bcard-body {
  padding: 1.1rem 1.35rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  flex: 1;
}

.blog-card--std .bcard-body h3 {
  font-family: var(--font-titulo);
  font-size: 1rem;
  color: var(--crema);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card--std .bcard-body p {
  font-size: 0.85rem;
  color: rgba(245,237,215,0.75);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: none;
}

/* Side stack: two std cards stacked */
.blog-cat-side {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ---- Shared card elements ---- */
.bcard-tag {
  display: inline-flex;
  align-items: center;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cat-color, var(--amber));
  padding: 0.2em 0.55em;
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--cat-color, var(--amber));
  border-radius: 3px;
  width: fit-content;
  margin-bottom: 0.1rem;
}

.bcard-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cat-color, var(--amber));
  text-decoration: none;
  margin-top: auto;
  padding-top: 0.5rem;
  transition: gap 0.2s, opacity 0.2s;
}
.bcard-link:hover { gap: 0.6rem; opacity: 0.8; }

/* =========================================
   FONDOS TENANGO (background decorativo)
   ========================================= */

/* Overlay Tenango SVG: vectores folk-art en secciones oscuras */
.tenango-bg {
  position: absolute;
  inset: 0;
  background-size: contain;
  background-position: center right;
  background-repeat: no-repeat;
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
}

/* Tenango en reviews: ocupa mitad derecha del bloque */
.chef-reviews-wrap .tenango-bg {
  background-size: 120% auto;
  background-position: right center;
  opacity: 0.18;
}

/* Gradiente de fondo sobre el tenango: desvanece hacia la izquierda */
.chef-reviews-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #0D0D0B 40%, transparent 68%);
  pointer-events: none;
  z-index: 0;
}

/* Tenango en actividades: venado, mix-blend-mode screen elimina fondo negro */
.actividades .tenango-bg {
  background-size: cover;
  background-position: center;
  opacity: 0.55;
  mix-blend-mode: screen;
}

.actividades::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to left, #1E1C17 35%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Tenango en galería: mariposa lado derecho, degradado oculta el lado izquierdo */
.galeria .tenango-bg {
  background-size: 50% auto;
  background-position: right center;
  opacity: 0.50;
  mix-blend-mode: screen;
}

.galeria::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to left, transparent 22%, #161410 60%);
  pointer-events: none;
  z-index: 0;
}

/* Las secciones que tienen Tenango deben ser position:relative */
.chef-section,
.actividades,
.galeria {
  position: relative;
}

/* El contenido va encima del fondo Tenango */
.chef-section > *:not(.embers-wrap),
.actividades > *:not(.tenango-bg),
.galeria > *:not(.tenango-bg) {
  position: relative;
  z-index: 1;
}

/* =========================================
   FOOTER
   ========================================= */
.site-footer {
  background: var(--carbon-mid);
  color: rgba(245, 237, 215, 0.7);
  padding: 3rem 1.5rem 2rem;
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.footer-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(245, 237, 215, 0.1);
  margin-bottom: 2rem;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.footer-brand img {
  height: 44px;
  width: 44px;
  object-fit: contain;
  border-radius: 50%;
}

.footer-brand-name {
  font-family: var(--font-titulo);
  font-size: 1.1rem;
  color: var(--crema);
  font-weight: 700;
}

.footer-tagline {
  font-size: 0.9rem;
  line-height: 1.6;
  max-width: 38ch;
}

.footer-col h4 {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--crema);
  margin-bottom: 1rem;
}

.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-col a {
  font-size: 0.9rem;
  color: rgba(245, 237, 215, 0.65);
  transition: color 0.2s;
  cursor: pointer;
}

.footer-col a:hover { color: var(--crema); }

.footer-horario {
  color: rgba(245, 237, 215, 0.65);
  font-size: 0.85rem;
  line-height: 1.7;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
}

/* =========================================
   WHATSAPP FLOTANTE
   ========================================= */
.whatsapp-float {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}

.whatsapp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  background: #25D366;
  border-radius: 50%;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.5);
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
}

.whatsapp-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 28px rgba(37, 211, 102, 0.65);
}

.whatsapp-btn svg { width: 28px; height: 28px; fill: white; }

.whatsapp-tooltip {
  background: var(--carbon-mid);
  color: var(--crema);
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.4rem 0.85rem;
  border-radius: 20px;
  white-space: nowrap;
  box-shadow: var(--sombra-suave);
  opacity: 0;
  transform: translateX(8px);
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: none;
}

.whatsapp-float:hover .whatsapp-tooltip {
  opacity: 1;
  transform: translateX(0);
}

/* =========================================
   SCROLL TO TOP
   ========================================= */
.scroll-top {
  position: fixed;
  bottom: 5.5rem;
  right: 1.5rem;
  z-index: 199;
  width: 44px;
  height: 44px;
  background: var(--crema);
  border: 2px solid var(--borde);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--sombra-suave);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.3s, transform 0.3s;
  color: var(--texto-dark);
}

.scroll-top.visible {
  opacity: 1;
  transform: translateY(0);
}

.scroll-top:hover { background: var(--crema-off); }

/* =========================================
   ANIMACIONES (Intersection Observer)
   ========================================= */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}


.fade-in-delay-1 { transition-delay: 0.1s; }
.fade-in-delay-2 { transition-delay: 0.2s; }
.fade-in-delay-3 { transition-delay: 0.3s; }

/* =========================================
   ANIMACIONES EXTENDIDAS
   ========================================= */
.anim-x-left {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity 0.85s cubic-bezier(0.2,0,0.2,1),
              transform 0.85s cubic-bezier(0.2,0,0.2,1);
}
.anim-x-right {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 0.85s cubic-bezier(0.2,0,0.2,1),
              transform 0.85s cubic-bezier(0.2,0,0.2,1);
}
.anim-scale {
  opacity: 0;
  transform: scale(0.95) translateY(20px);
  transition: opacity 0.75s ease,
              transform 0.75s cubic-bezier(0.16,1,0.3,1);
}
.anim-x-left.visible,
.anim-x-right.visible,
.anim-scale.visible {
  opacity: 1;
  transform: none;
}
.anim-d1 { transition-delay: 0.1s; }
.anim-d2 { transition-delay: 0.22s; }
.anim-d3 { transition-delay: 0.34s; }
.anim-d4 { transition-delay: 0.46s; }

/* =========================================
   PARALLAX (controlado por JS)
   ========================================= */
[data-parallax] {
  will-change: transform;
}

/* DIAGONAL DIVIDERS eliminados — bordes rectos */

/* =========================================
   REVIEWS: fondo animado flotante
   ========================================= */
.chef-reviews-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 85% 15%, rgba(139,94,60,0.18) 0%, transparent 70%),
    radial-gradient(ellipse 50% 60% at 15% 85%, rgba(45,80,22,0.14) 0%, transparent 70%);
  pointer-events: none;
  animation: bgFloat 9s ease-in-out infinite alternate;
  z-index: 0;
}
.chef-reviews-wrap > *:not(.tenango-bg) { position: relative; z-index: 1; }
.reviews-carousel-inner { position: relative; z-index: 1; }

@keyframes bgFloat {
  from { transform: scale(1)   translateY(0);   opacity: 0.7; }
  to   { transform: scale(1.06) translateY(-10px); opacity: 1; }
}

/* =========================================
   HERO: anillos decorativos
   ========================================= */
.hero-rings {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.hero-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(245,237,215,0.07);
}
.hero-ring:nth-child(1) { width: 700px; height: 700px; animation: ringPulse 7s ease-in-out infinite; }
.hero-ring:nth-child(2) { width: 500px; height: 500px; animation: ringPulse 7s ease-in-out infinite 1.8s; }
.hero-ring:nth-child(3) { width: 300px; height: 300px; animation: ringPulse 7s ease-in-out infinite 3.6s; }

@keyframes ringPulse {
  0%, 100% { transform: scale(1);    opacity: 0.35; }
  50%       { transform: scale(1.06); opacity: 0.75; }
}

/* =========================================
   HERO: emoji pez flotante
   ========================================= */
.hero-eyebrow span:first-child {
  display: inline-block;
  animation: fishSwim 3.5s ease-in-out infinite;
}
@keyframes fishSwim {
  0%, 100% { transform: translateX(0)   rotate(0deg); }
  30%       { transform: translateX(5px)  rotate(6deg); }
  70%       { transform: translateX(-3px) rotate(-4deg); }
}

/* =========================================
   STARS: shimmer dorado (compartido)
   ========================================= */
@keyframes starShimmer {
  from { background-position: 0%   center; }
  to   { background-position: 200% center; }
}

/* =========================================
   CHEF QUOTE: borde animado
   ========================================= */
@keyframes quoteBorder {
  0%,100% { border-left-color: var(--amber); }
  50%      { border-left-color: var(--verde); }
}
.chef-quote { animation: quoteBorder 5s ease-in-out infinite; }

/* =========================================
   MENU ITEMS: slide desde la izquierda al cambiar tab
   ========================================= */
.menu-item {
  opacity: 0;
  transform: translateX(-18px);
  transition: opacity 0.4s ease, transform 0.4s ease,
              box-shadow 0.25s, border-left-color 0.25s;
}
.menu-panel.active .menu-item            { opacity: 1 !important; transform: none; }
.menu-panel.active .menu-item:nth-child(1) { transition-delay: 0.04s; }
.menu-panel.active .menu-item:nth-child(2) { transition-delay: 0.10s; }
.menu-panel.active .menu-item:nth-child(3) { transition-delay: 0.16s; }
.menu-panel.active .menu-item:nth-child(4) { transition-delay: 0.22s; }
.menu-panel.active .menu-item:nth-child(5) { transition-delay: 0.28s; }
.menu-panel.active .menu-item:nth-child(6) { transition-delay: 0.34s; }
.menu-item:hover {
  border-left-color: var(--amber-light);
  box-shadow: -3px 0 10px rgba(196,129,62,0.14), var(--sombra-suave);
}

/* =========================================
   WHATSAPP: anillo de pulso
   ========================================= */
.whatsapp-btn { position: relative; }
.whatsapp-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25D366;
  animation: waPulse 2.8s ease-out infinite;
  z-index: -1;
}
@keyframes waPulse {
  0%   { transform: scale(1);    opacity: 0.65; }
  70%  { transform: scale(1.6);  opacity: 0; }
  100% { transform: scale(1.6);  opacity: 0; }
}

/* =========================================
   GALERÍA: mobile 2-col grid fallback
   ========================================= */
@media (max-width: 767px) {
  .galeria-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: auto;
  }
  .galeria-item {
    flex: none;
    height: 160px;
    cursor: zoom-in;
  }
  .galeria-item img {
    height: 160px; /* explícito — no depende de height:100% sobre el flex item */
  }
  .galeria-item:first-child,
  .galeria-item:last-child {
    grid-column: 1 / -1;
    height: 210px;
  }
  .galeria-item:first-child img,
  .galeria-item:last-child img {
    height: 210px;
  }
  .galeria-item.lb-expanded,
  .galeria-item.lb-compressed { flex: none; }
}

/* =========================================
   LIGHTBOX
   ========================================= */
.lb-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 4, 1, 0.97);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(6px);
  outline: none;
}

.lb-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.lb-img-wrap {
  max-width: min(88vw, 1100px);
  max-height: 82vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#lb-img {
  max-width: 100%;
  max-height: 82vh;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 32px 96px rgba(0,0,0,0.7);
  transform: scale(0.88);
  opacity: 0;
  transition: transform 0.38s cubic-bezier(0.34, 1.42, 0.64, 1), opacity 0.3s ease;
}

.lb-overlay.open #lb-img {
  transform: scale(1);
  opacity: 1;
}

.lb-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(245,237,215,0.1);
  border: 1px solid rgba(245,237,215,0.18);
  color: var(--crema);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
  z-index: 2;
}

.lb-close:hover { background: rgba(245,237,215,0.22); }

.lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(196,129,62,0.12);
  border: 1px solid rgba(196,129,62,0.25);
  color: var(--crema);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  z-index: 2;
}

.lb-prev { left: 1.25rem; }
.lb-next { right: 1.25rem; }

.lb-prev:hover { background: rgba(196,129,62,0.24); transform: translateY(-50%) translateX(-2px); }
.lb-next:hover { background: rgba(196,129,62,0.24); transform: translateY(-50%) translateX(2px); }

/* =========================================
   ARTICLE MODAL READER (full-page — #article-modal)
   ========================================= */
#article-modal {
  position: fixed;
  inset: 0;
  z-index: 1500;
  background: var(--crema);
  opacity: 0;
  pointer-events: none;
  transform: translateY(18px);
  transition: opacity 0.32s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}
#article-modal.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
body.art-open { overflow: hidden; }

.art-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 1520;
  background: rgba(196,129,62,0.12);
}
.art-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--amber);
  transition: width 0.1s linear;
}

.art-close {
  position: fixed;
  top: 1.25rem;
  right: 1.5rem;
  z-index: 1510;
  width: 44px;
  height: 44px;
  background: rgba(22,20,16,0.6);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  backdrop-filter: blur(4px);
  transition: background 0.2s;
}
.art-close:hover { background: rgba(22,20,16,0.88); }

.art-scroll {
  height: 100vh;
  overflow-y: scroll;
  overscroll-behavior: contain;
}

.art-hero {
  width: 100%;
  height: 42vh;
  min-height: 240px;
  max-height: 480px;
  background-size: cover;
  background-position: center;
  background-color: var(--carbon-dark);
  flex-shrink: 0;
}

.art-content {
  max-width: 720px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 5rem;
}

.art-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.art-tag {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber);
  background: rgba(196,129,62,0.12);
  border: 1px solid rgba(196,129,62,0.28);
  padding: 0.18rem 0.7rem;
  border-radius: 50px;
}
.art-date, .art-sep, .art-read {
  font-size: 0.82rem;
  color: var(--texto-muted);
}

.art-title {
  font-family: var(--font-titulo);
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--texto-dark);
  line-height: 1.15;
  margin: 0 0 2rem;
}

.art-body p {
  font-size: 1.05rem;
  line-height: 1.82;
  color: var(--texto-dark);
  margin-bottom: 1.5rem;
}
.art-body h2 {
  font-family: var(--font-titulo);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--texto-dark);
  margin: 2.5rem 0 0.9rem;
  border-bottom: 1px solid rgba(196,129,62,0.18);
  padding-bottom: 0.4rem;
}
.art-body blockquote {
  margin: 2rem 0;
  padding: 1.25rem 1.75rem;
  border-left: 4px solid var(--amber);
  background: rgba(196,129,62,0.06);
  border-radius: 0 var(--radio) var(--radio) 0;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--texto-dark);
  line-height: 1.7;
}
.art-body ul, .art-body ol {
  padding-left: 1.5rem;
  margin-bottom: 1.5rem;
}
.art-body li {
  font-size: 1rem;
  line-height: 1.72;
  color: var(--texto-dark);
  margin-bottom: 0.35rem;
}
.art-body strong { color: var(--texto-dark); font-weight: 700; }
.art-body em { font-style: italic; }

.art-footer {
  margin-top: 3rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
}
.art-back {
  background: none;
  border: 1.5px solid rgba(196,129,62,0.35);
  border-radius: 50px;
  padding: 0.65rem 1.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--amber);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  letter-spacing: 0.03em;
  flex-shrink: 0;
}
.art-back:hover {
  background: rgba(196,129,62,0.08);
  border-color: var(--amber);
}
.art-share {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.art-share-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-muted);
}
.art-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: 1.5px solid rgba(196,129,62,0.25);
  border-radius: 50px;
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  letter-spacing: 0.02em;
}
.art-share-wa {
  color: #25D366;
  border-color: rgba(37,211,102,0.3);
}
.art-share-wa:hover {
  background: rgba(37,211,102,0.08);
  border-color: #25D366;
}
.art-share-copy {
  color: var(--amber);
}
.art-share-copy:hover {
  background: rgba(196,129,62,0.08);
  border-color: var(--amber);
}

/* ---- Artículos relacionados ---- */
.art-related {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 1.5rem 5rem;
  border-top: 1px solid rgba(196,129,62,0.15);
  padding-top: 3rem;
}
.art-related-title {
  font-family: var(--font-titulo);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--texto-muted);
  letter-spacing: 0.04em;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
  font-size: 0.78rem;
}
.art-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.art-rel-card {
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--crema);
  border: 1px solid rgba(196,129,62,0.15);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
.art-rel-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}
.art-rel-img {
  height: 100px;
  background-size: cover;
  background-position: center;
}
.art-rel-body {
  padding: 0.85rem 1rem;
}
.art-rel-tag {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber);
  display: block;
  margin-bottom: 0.35rem;
}
.art-rel-title {
  font-family: var(--font-titulo);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--texto-dark);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 600px) {
  .art-hero { height: 30vh; min-height: 180px; }
  .art-title { font-size: clamp(1.5rem, 6vw, 2rem); }
  .art-body p { font-size: 0.97rem; }
  .art-related-grid { grid-template-columns: 1fr 1fr; }
  .art-related-grid .art-rel-card:last-child { display: none; }
}

.lb-counter {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(245,237,215,0.45);
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  font-family: var(--font-titulo);
}

/* =========================================
   SPECIALTY ICON CARDS (reemplaza especialidades con fotos)
   ========================================= */
.esp-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-bottom: 4rem;
}

.esp-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--borde-dark);
  border-radius: var(--radio-grande);
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition: border-color 0.25s, background 0.25s;
}
.esp-card:hover {
  border-color: var(--amber);
  background: rgba(196,129,62,0.05);
}

.esp-card-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(196,129,62,0.1);
  border: 1px solid rgba(196,129,62,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--amber);
  margin-bottom: 0.5rem;
}

.esp-card-tag {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber);
}

.esp-card h3 {
  font-family: var(--font-titulo);
  font-size: clamp(1.1rem, 2.5vw, 1.35rem);
  color: var(--crema);
  line-height: 1.2;
  margin: 0;
}

.esp-card p {
  font-size: 0.9rem;
  color: var(--texto-crema-2);
  line-height: 1.6;
  max-width: none;
}

/* =========================================
   Reviews integradas en chef section
   ========================================= */
.chef-reviews-wrap {
  position: relative;
  border-top: 1px solid rgba(244,235,206,0.08);
  margin-top: 0;
  padding: 3rem 1.5rem;
  overflow: hidden;
}
.chef-reviews-wrap .reviews-top {
  text-align: center;
  margin-bottom: 2rem;
}
.chef-reviews-wrap .section-label {
  color: var(--amber);
}

/* =========================================
   BLOG — COLLAPSE / EXPAND
   ========================================= */
.blog-cat { margin-bottom: 3.5rem; }
.blog-cat:last-child { margin-bottom: 0; }

.blog-cat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 0.875rem;
  border-bottom: 1px solid var(--borde-dark);
}

.blog-cat-name {
  font-family: var(--font-titulo);
  font-size: 1.15rem;
  color: var(--crema);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.blog-cat-name::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 1.4em;
  background: var(--cat-color, var(--amber));
  border-radius: 2px;
}

.blog-cat-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: 1px solid var(--borde-dark);
  color: var(--amber);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.4rem 0.85rem;
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.blog-cat-toggle:hover {
  background: rgba(196,129,62,0.1);
  border-color: var(--amber);
}
.blog-cat-toggle .toggle-arrow {
  transition: transform 0.3s ease;
}
.blog-cat-toggle[aria-expanded="true"] .toggle-arrow {
  transform: rotate(180deg);
}

.blog-cat-preview { margin-bottom: 0.75rem; }

.blog-more-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.875rem;
  margin-top: 0.875rem;
}

/* =========================================
   ARTICLE MODAL (legacy box — #art-modal)
   Scoped to #art-modal so it doesn't clobber
   the full-page reader (#article-modal) above.
   ========================================= */
#art-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
#art-modal.is-open {
  opacity: 1;
  pointer-events: all;
}

.art-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10,9,7,0.88);
  backdrop-filter: blur(4px);
}

.art-modal-box {
  position: relative;
  z-index: 1;
  background: var(--carbon-soft);
  border: 1px solid var(--borde-dark);
  border-radius: var(--radio-grande);
  max-width: 720px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  transform: translateY(24px) scale(0.97);
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
}
.art-modal.is-open .art-modal-box {
  transform: translateY(0) scale(1);
}

.art-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 5;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--borde-dark);
  background: rgba(10,9,7,0.7);
  color: var(--crema);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
}
.art-modal-close:hover { background: rgba(196,129,62,0.2); }

.art-modal-img {
  height: 280px;
  background-size: cover;
  background-position: center;
  border-radius: var(--radio-grande) var(--radio-grande) 0 0;
}

.art-modal-body {
  padding: 1.75rem 2rem 2.25rem;
}

.art-modal-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber);
  border: 1px solid var(--amber);
  padding: 0.2em 0.55em;
  border-radius: 3px;
  margin-bottom: 0.75rem;
}

.art-modal-title {
  font-family: var(--font-titulo);
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  color: var(--crema);
  line-height: 1.2;
  margin-bottom: 1.25rem;
}

.art-modal-text {
  font-size: 0.95rem;
  color: var(--texto-crema-2);
  line-height: 1.75;
  max-width: none;
}

/* =========================================
   MOBILE — forzar visibilidad de animaciones
   (va al final del archivo para ganar la cascada)
   ========================================= */
@media (max-width: 767px) {
  .fade-in,
  .fade-in.visible         { opacity: 1 !important; transform: translateY(0) !important; transition: none !important; }
  .anim-x-left,
  .anim-x-left.visible     { opacity: 1 !important; transform: translateX(0) !important; transition: none !important; }
  .anim-x-right,
  .anim-x-right.visible    { opacity: 1 !important; transform: translateX(0) !important; transition: none !important; }
  .anim-scale,
  .anim-scale.visible      { opacity: 1 !important; transform: none !important; transition: none !important; }
  .menu-item               { opacity: 1 !important; transform: translateX(0) !important; }

  /* Menú: 1 columna en pantallas pequeñas para que las imágenes de comida no queden como tiras */
  .menu-panel.active { grid-template-columns: 1fr; }
  .menu-item-img     { height: 180px; }
}

/* Blog card clickable cursor */
.blog-card[data-article] { cursor: pointer; }

/* =========================================
   DELIGHT 2 — Status badge de horario
   ========================================= */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: clamp(0.72rem, 1.2vw, 0.82rem);
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1),
              transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  pointer-events: none;
  user-select: none;
}
.status-badge.badge-visible {
  opacity: 1;
  transform: translateY(0);
}
.status-badge--open {
  background: rgba(45, 80, 22, 0.32);
  border: 1px solid rgba(80, 160, 40, 0.45);
  color: #a8e06a;
}
.status-badge--closing {
  background: rgba(196, 129, 62, 0.22);
  border: 1px solid rgba(196, 129, 62, 0.5);
  color: var(--amber-light);
}
.status-badge--closed {
  background: rgba(13, 13, 11, 0.45);
  border: 1px solid rgba(244, 235, 206, 0.18);
  color: rgba(244, 235, 206, 0.6);
}
.status-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-badge--open    .status-badge-dot { background: #7ecb3a; box-shadow: 0 0 5px #7ecb3a; }
.status-badge--closing .status-badge-dot { background: var(--amber-light); box-shadow: 0 0 5px var(--amber-light); }
.status-badge--closed  .status-badge-dot { background: rgba(244,235,206,0.3); }

/* Badge en el cinfo-card de horario — overrides para fondo blanco (#fff)
   Las reglas base (.status-badge--open/closing/closed) no se tocan.
   Todos los colores aquí pasan WCAG AA (≥4.5:1) contra #fff. */
.cinfo-card .status-badge {
  margin-top: 0.6rem;
  margin-left: auto;
  margin-right: auto;
  padding: 0.35rem 0.7rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 999px;
  background: transparent;
  border: 1px solid currentColor;
  align-self: center;
}
/* --open : verde oscuro #3a7a1a — ratio ~7.6:1 vs #fff (AAA) */
.cinfo-card .status-badge--open {
  background: rgba(80, 160, 40, 0.10);
  border-color: rgba(80, 160, 40, 0.45);
  color: #3a7a1a;
}
/* --closing : ámbar oscuro #8a4a18 — ratio ~9.4:1 vs #fff (AAA) */
.cinfo-card .status-badge--closing {
  background: rgba(196, 129, 62, 0.10);
  border-color: rgba(196, 129, 62, 0.45);
  color: #8a4a18;
}
/* --closed : gris neutro #555 — ratio ~7.3:1 vs #fff (AAA) */
.cinfo-card .status-badge--closed {
  background: rgba(80, 80, 80, 0.06);
  border-color: rgba(80, 80, 80, 0.30);
  color: #555;
}
/* Dots dentro de .cinfo-card */
.cinfo-card .status-badge--open    .status-badge-dot { background: #4a9c1f; box-shadow: 0 0 4px rgba(74, 156, 31, 0.55); }
.cinfo-card .status-badge--closing .status-badge-dot { background: #c4813e; box-shadow: 0 0 4px rgba(196, 129, 62, 0.55); }
.cinfo-card .status-badge--closed  .status-badge-dot { background: #888; box-shadow: none; }
/* Sin animación de pulso en prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .cinfo-card .status-badge--open .status-badge-dot { animation: none; }
}

/* =========================================
   DELIGHT 3 — Menu item image zoom + shimmer
   ========================================= */
.menu-item {
  position: relative;
  overflow: hidden;
}
.menu-item-img {
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  will-change: transform;
}
.menu-item:hover .menu-item-img {
  transform: scale(1.06);
}
.menu-item::after {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(244, 235, 206, 0) 0%,
    rgba(244, 235, 206, 0.12) 50%,
    rgba(244, 235, 206, 0) 100%
  );
  transform: skewX(-20deg);
  opacity: 0;
  transition: opacity 0s;
  pointer-events: none;
}
.menu-item:hover::after {
  opacity: 1;
  animation: menuShimmer 0.55s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
@keyframes menuShimmer {
  0%   { left: -75%; opacity: 1; }
  100% { left: 125%; opacity: 0; }
}

/* =========================================
   prefers-reduced-motion
   ========================================= */
@media (prefers-reduced-motion: reduce) {
  .fade-in, .anim-x-left, .anim-x-right, .anim-scale {
    opacity: 1; transform: none; transition: none;
  }
  .hero-bg, .hero-ring, .hero-eyebrow span:first-child,
  .rsm-stars, .chef-quote, .whatsapp-btn::before,
  .chef-reviews-wrap::before, .marquee-track {
    animation: none; transition: none;
  }
  .marquee-track { overflow-x: auto; }
  .embers-canvas { display: none; }
  .chef-section::before { animation: none; }
  [data-parallax] { transform: none !important; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* =========================================
   RESPONSIVE — TABLET 768px
   ========================================= */
@media (min-width: 768px) {
  .section { padding: 5.5rem 2rem; }

  .nav-links { display: flex; }
  .nav-cta { display: inline-flex; }
  .nav-hamburger { display: none; }

  .review-card { padding: 2.5rem; }

  .chef-foto-wrap { max-height: 640px; }
  .chef-texto-col { padding: 3.5rem 2.5rem; }

  .especialidades-grid { grid-template-columns: 1fr 1fr; }

  .menu-panel.active { grid-template-columns: 1fr 1fr; }

  .galeria-strip { height: 26rem; }

  .resenas-grid { grid-template-columns: 1fr 1fr; }

  .actividades-grid { grid-template-columns: repeat(4, 1fr); }
  .actividad-card { aspect-ratio: 3/4; }

  .blog-cat-grid { grid-template-columns: 2fr 1fr; }
  .blog-card--featured { min-height: 460px; }
  .blog-more-grid { grid-template-columns: 1fr 1fr; }
  .esp-cards { grid-template-columns: repeat(3, 1fr); }

  .cinfo-cards { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
  .mapa-wrap { height: 460px; }
  .contacto-actions { flex-direction: row; justify-content: center; }
  .btn-wa, .btn-maps { width: auto; }
  .mapa-wrap { height: 420px; }

  .footer-top { grid-template-columns: 1.5fr 1fr 1fr; }
}

/* =========================================
   RESPONSIVE — DESKTOP 1024px+
   ========================================= */
@media (min-width: 1024px) {
  .section { padding: 7rem 2rem; }

  .hero-content { padding: 140px 2rem 5rem; }

  .chef-inner {
    grid-template-columns: 48% 52%;
    min-height: 720px;
  }
  .chef-foto-wrap {
    max-height: none;
    height: 100%;
    min-height: 720px;
  }
  .chef-foto { height: 100%; }
  .chef-texto-col { padding: 5rem 4.5rem; }

  /* Gradiente lateral de la foto del chef: solo tiene sentido en layout 2 columnas */
  .chef-foto-col::after { display: block; }

  .especialidades-grid { grid-template-columns: repeat(3, 1fr); }

  .galeria-strip { height: 30rem; }

  .resenas-grid { grid-template-columns: repeat(3, 1fr); }

  .mapa-wrap { height: 500px; }
}

/* ===== OVERRIDES DE CENTRADO — Visitanos ===== */
section.contacto .contacto-actions {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  text-align: center !important;
}

@media (min-width: 768px) {
  section.contacto .contacto-actions {
    flex-direction: row !important;
  }
}

@media (max-width: 767px) {
  section.contacto .contacto-actions {
    flex-direction: column !important;
  }
}

section.contacto .mapa-hint {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

section.contacto .cinfo-card .status-badge {
  display: inline-flex !important;
  margin-left: auto !important;
  margin-right: auto !important;
  align-self: center !important;
}

/* ============ Footer · Social icons ============ */
.footer-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
}
.footer-socials > li {
  padding: 0;
  margin: 0;
  list-style: none;
}
.footer-socials > li::before { content: none; }

.social-icon {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(244, 235, 206, 0.06);
  border: 1px solid rgba(244, 235, 206, 0.18);
  color: var(--crema-off, rgba(244, 235, 206, 0.78));
  text-decoration: none;
  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.social-icon[href]:not([href="#"]):not([href=""]) {
  display: inline-flex;
}
.social-icon:hover,
.social-icon:focus-visible {
  transform: translateY(-2px);
  background: var(--amber, #C4813E);
  border-color: var(--amber, #C4813E);
  color: var(--carbon, #0D0D0B);
}
.social-icon:focus-visible {
  outline: 2px solid var(--amber-light, #DCA46A);
  outline-offset: 2px;
}
.social-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

/* ============ Menú · Patrón hero por categoría (Round 2 — 2026-05-25) ============ */

/* El grid de 2 columnas que ya existe sigue aplicando para el panel Bebidas.
   Para los paneles --hero, override a block layout. */
.menu-panel.menu-panel--hero.active {
  display: block;
  grid-template-columns: none;
  gap: 0;
}

.menu-hero-banner {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  border-radius: var(--radio);
  background-size: cover;
  background-position: center;
  background-color: rgba(196, 129, 62, 0.1);
  margin-bottom: 2.25rem;
  overflow: hidden;
}
.menu-hero-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 13, 11, 0) 35%, rgba(13, 13, 11, 0.78) 100%);
}
.menu-hero-title {
  position: absolute;
  bottom: 1.25rem;
  left: 1.75rem;
  z-index: 1;
  font-family: var(--font-titulo);
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  color: var(--crema);
  letter-spacing: 0.02em;
  line-height: 1.05;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}

.menu-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem 2.5rem;
}
.menu-list--single {
  grid-template-columns: 1fr;
  max-width: 720px;
  margin: 0 auto;
}

.menu-row {
  background: rgba(196, 129, 62, 0.04);
  border: 1px solid rgba(196, 129, 62, 0.15);
  border-radius: var(--radio);
  padding: 1.15rem 1.4rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.menu-row:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  background: rgba(196, 129, 62, 0.07);
  border-color: rgba(196, 129, 62, 0.28);
}
.menu-row h4 {
  font-family: var(--font-titulo);
  font-size: 1.1rem;
  color: var(--texto-dark);
  margin-bottom: 0.4rem;
  letter-spacing: 0.015em;
}
.menu-row p {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--texto-muted);
  max-width: 65ch;
}

.menu-row--featured h4 {
  color: var(--amber);
  font-size: 1.2rem;
}
.menu-row--featured h4::before {
  content: '★ ';
  font-size: 0.85em;
  color: var(--amber);
  margin-right: 0.15em;
}

.menu-row__variant {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: rgba(196, 129, 62, 0.85);
  font-style: italic;
}

.menu-row__guarnicion {
  grid-column: 1 / -1;
  background: transparent;
  border: none;
  padding: 0.5rem 0 0;
  text-align: center;
}
.menu-row__guarnicion:hover {
  transform: none;
  box-shadow: none;
  background: transparent;
  border-color: transparent;
}
.menu-row__guarnicion p {
  font-size: 0.88rem;
  color: rgba(196, 129, 62, 0.78);
  max-width: none;
}

/* Mobile: 1 columna + hero más bajito */
@media (max-width: 720px) {
  .menu-list { grid-template-columns: 1fr; gap: 1.25rem; }
  .menu-hero-banner { aspect-ratio: 4 / 3; margin-bottom: 1.5rem; }
  .menu-hero-title { font-size: clamp(1.4rem, 5vw, 2rem); left: 1.25rem; bottom: 1rem; }
}

/* Tabs: scroll horizontal en mobile (7 tabs no caben en una fila) */
@media (max-width: 720px) {
  .menu-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(90deg, transparent 0, black 4%, black 96%, transparent 100%);
  }
  .menu-tab { flex: 0 0 auto; }
}