/* ============================================================
   CAPRICHO N8 — INDEX.CSS
   ============================================================ */

/* ---- HERO ---- */
.hero {
  position: relative; height: 100svh; min-height: 620px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
  background:
    linear-gradient(160deg, rgba(20,18,15,.88) 0%, rgba(20,18,15,.42) 55%, rgba(201,169,110,.18) 100%),
    url('https://images.unsplash.com/photo-1555396273-367ea4eb4db5?w=1920&q=85') center/cover no-repeat;
  transform-origin: center bottom;
  transition: transform 0.1s linear;
}
.hero-grain {
  position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
  opacity: .5;
}
.hero-fade-bottom {
  position: absolute; bottom: 0; left: 0; right: 0; height: 280px;
  background: linear-gradient(to top, var(--cream) 0%, transparent 100%);
}
.hero-content {
  position: relative; z-index: 2; text-align: center; padding: 0 20px; max-width: 820px;
}
.hero-eye {
  font-size: .68rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 20px;
  opacity: 0; transform: translateY(20px);
  animation: hreveal .9s var(--ease-smooth) .3s forwards;
}
.hero-title {
  font-family: var(--ff-display);
  font-size: clamp(3.8rem, 10vw, 8.5rem); font-weight: 300;
  color: var(--white); line-height: .92; letter-spacing: -.02em;
  margin-bottom: 20px;
  opacity: 0; transform: translateY(28px);
  animation: hreveal .9s var(--ease-smooth) .5s forwards;
}
.hero-title em { font-style: italic; color: var(--gold-light); }
.hero-sub {
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.55); margin-bottom: 40px;
  opacity: 0; transform: translateY(20px);
  animation: hreveal .9s var(--ease-smooth) .68s forwards;
}
.hero-btns {
  display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
  opacity: 0; transform: translateY(20px);
  animation: hreveal .9s var(--ease-smooth) .82s forwards;
}
@keyframes hreveal { to { opacity: 1; transform: none; } }

.hero-scroll {
  position: absolute; bottom: 36px; left: 50%;
  transform: translateX(-50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.hero-scroll span { font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.35); }
.hero-scroll-line {
  width: 1px; height: 60px;
  background: linear-gradient(to bottom, rgba(255,255,255,.35), transparent);
  animation: scrollPulse 2.2s ease-in-out infinite;
}
@keyframes scrollPulse { 0%,100%{height:50px;opacity:.35} 50%{height:80px;opacity:.7} }

.hero-badge {
  position: absolute; bottom: 64px; right: 64px; z-index: 2;
  width: 120px; height: 120px;
  display: flex; align-items: center; justify-content: center;
  animation: badgeSpin 22s linear infinite;
}
.hero-badge svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-badge svg text { fill: rgba(255,255,255,.4); font-size: 11px; letter-spacing: 2px; font-family: var(--ff-body); }
.hero-badge > span {
  font-family: var(--ff-display); font-size: 1.65rem; font-weight: 300; color: var(--gold);
}
.hero-badge > span sup { font-size: .8rem; }
@keyframes badgeSpin { to { transform: rotate(360deg); } }
@media (max-width: 600px) { .hero-badge { display: none; } }

/* ---- FILOSOFÍA ---- */
.filosofia { padding: 120px 48px; max-width: var(--max-w); margin: 0 auto; }
.filosofia-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.fil-img-wrap { position: relative; aspect-ratio: 4/5; overflow: hidden; border-radius: 4px; }
.fil-img {
  width: 100%; height: 100%;
  background: linear-gradient(180deg,rgba(20,18,15,.2),rgba(20,18,15,.65)),
              url('https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=800&q=80') center/cover;
  transition: transform .8s var(--ease-smooth);
}
.fil-img-wrap:hover .fil-img { transform: scale(1.05); }
.fil-img-badge {
  position: absolute; bottom: 20px; left: 20px;
  display: flex; flex-direction: column;
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.65);
}
.fil-p { font-size: .95rem; line-height: 1.85; color: var(--ink); margin-bottom: 18px; }
.fil-stats { display: flex; gap: 40px; margin-top: 40px; padding-top: 36px; border-top: 1px solid var(--sand); }
.stat { display: flex; flex-direction: column; gap: 4px; }
.sn { font-family: var(--ff-display); font-size: 1.8rem; font-weight: 300; color: var(--charcoal); }
.sl { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ash); }
@media (max-width: 860px) {
  .filosofia-inner { grid-template-columns: 1fr; gap: 48px; }
  .filosofia { padding: 80px 20px; }
}

/* ================================================================
   PLATO DE LA SEMANA
================================================================ */
.week-section {
  position: relative; padding: 100px 0 120px;
  background: var(--charcoal); overflow: hidden;
}
.week-bg-pattern {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(45deg, rgba(201,169,110,.03) 0px, rgba(201,169,110,.03) 1px, transparent 1px, transparent 40px),
    repeating-linear-gradient(-45deg, rgba(201,169,110,.03) 0px, rgba(201,169,110,.03) 1px, transparent 1px, transparent 40px);
}
.week-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 48px; }
.week-header { text-align: center; margin-bottom: 64px; }
.week-label-wrap { display: flex; align-items: center; gap: 12px; justify-content: center; margin-bottom: 16px; }
.week-flame { color: var(--gold); font-size: .8rem; }
.week-subtitle {
  font-size: .9rem; color: rgba(245,240,232,.5);
  max-width: 520px; margin: 16px auto 0; line-height: 1.7;
}

.week-card {
  display: grid; grid-template-columns: 1fr 1.3fr;
  gap: 0;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(201,169,110,.12);
  border-radius: 8px; overflow: hidden;
  margin-bottom: 72px;
}
.week-img-side { position: relative; }
.week-img-wrap {
  height: 100%; min-height: 500px; position: relative; overflow: hidden;
}
.week-img {
  width: 100%; height: 100%;
  background:
    linear-gradient(160deg, rgba(20,18,15,.3), rgba(20,18,15,.6)),
    url('https://images.unsplash.com/photo-1512621776951-a57141f2eefd?w=800&q=80') center/cover;
  transition: transform 1s var(--ease-smooth);
}
.week-card:hover .week-img { transform: scale(1.06); }
.week-img-glow {
  position: absolute; bottom: 0; left: 0; right: 0; height: 200px;
  background: linear-gradient(to top, var(--charcoal), transparent);
}
.week-date-tag {
  position: absolute; top: 24px; left: 24px;
  display: flex; flex-direction: column;
  font-size: .65rem; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(201,169,110,.8);
  background: rgba(28,26,23,.7); backdrop-filter: blur(8px);
  padding: 8px 14px; border-radius: 4px;
  border: 1px solid rgba(201,169,110,.15);
}

.week-content-side { padding: 52px 48px; display: flex; flex-direction: column; gap: 24px; }
.week-badge-row { display: flex; gap: 10px; flex-wrap: wrap; }
.week-tag {
  font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;
  padding: 5px 14px; border-radius: 30px;
  border: 1px solid rgba(201,169,110,.25); color: rgba(201,169,110,.7);
}
.week-tag-new { background: rgba(201,169,110,.12); color: var(--gold); border-color: var(--gold); }
.week-dish-name {
  font-family: var(--ff-display);
  font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 300; line-height: 1.1;
  color: var(--cream);
}
.week-dish-name em { font-style: italic; color: var(--gold-light); display: block; }
.week-desc { font-size: .88rem; line-height: 1.85; color: rgba(245,240,232,.6); }

.week-details { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.week-detail {
  display: flex; gap: 12px; align-items: flex-start;
  background: rgba(255,255,255,.03); padding: 14px 16px; border-radius: 6px;
  border: 1px solid rgba(255,255,255,.05);
}
.wd-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 1px; }
.wd-label { display: block; font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ash-light); margin-bottom: 2px; }
.wd-val { display: block; font-size: .82rem; color: var(--cream); line-height: 1.4; }

.week-price-row { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; margin-top: auto; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.07); }
.week-price-label { display: block; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ash); margin-bottom: 4px; }
.week-price { font-family: var(--ff-display); font-size: 2.4rem; font-weight: 300; color: var(--gold); line-height: 1; }
.week-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* PREVIOUS DISHES */
.week-prev-title {
  font-family: var(--ff-display); font-size: 1.1rem; font-weight: 300;
  color: rgba(245,240,232,.4); margin-bottom: 20px; letter-spacing: .04em;
}
.prev-dishes { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.prev-dish {
  display: flex; flex-direction: column; gap: 10px;
  opacity: .6; transition: opacity .3s;
}
.prev-dish:hover { opacity: 1; }
.prev-dish-img { aspect-ratio: 4/3; border-radius: 4px; }
.prev-dish span { font-size: .75rem; color: rgba(245,240,232,.6); line-height: 1.4; }

@media (max-width: 860px) {
  .week-card { grid-template-columns: 1fr; }
  .week-img-wrap { min-height: 300px; }
  .week-content-side { padding: 32px 24px; }
  .week-details { grid-template-columns: 1fr; }
  .prev-dishes { grid-template-columns: repeat(2,1fr); }
  .week-inner { padding: 0 20px; }
}

/* ================================================================
   QUICK CATEGORIES
================================================================ */
.quick-cats { padding: 100px 48px; max-width: var(--max-w); margin: 0 auto; }
.qc-header { margin-bottom: 52px; }
.qc-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.qc-card {
  display: flex; flex-direction: column; gap: 12px;
  padding: 32px 28px;
  background: var(--white);
  border: 1px solid var(--sand-light);
  border-radius: 6px;
  transition: border-color .3s, transform .35s var(--ease-bounce), box-shadow .3s;
  transition-delay: var(--d, 0s);
  cursor: none;
  text-decoration: none;
}
.qc-card:hover {
  border-color: var(--gold);
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(201,169,110,.15);
}
.qc-icon-wrap { font-size: 2rem; margin-bottom: 4px; }
.qc-card h3 { font-family: var(--ff-display); font-size: 1.3rem; font-weight: 400; color: var(--charcoal); }
.qc-card p { font-size: .8rem; line-height: 1.6; color: var(--ash); flex: 1; }
.qc-arrow { font-size: .85rem; color: var(--gold); margin-top: 8px; }
@media (max-width: 860px) {
  .qc-grid { grid-template-columns: repeat(2,1fr); }
  .quick-cats { padding: 80px 20px; }
}
@media (max-width: 500px) { .qc-grid { grid-template-columns: 1fr; } }

/* ================================================================
   QUOTE SECTION
================================================================ */
.quote-section {
  position: relative; padding: 120px 48px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  overflow: hidden;
}
.quote-bg {
  position: absolute; inset: 0;
  background: linear-gradient(150deg, rgba(20,18,15,.92), rgba(20,18,15,.8)),
              url('https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?w=1600&q=80') center/cover;
}
.quote-grain {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}
.quote-content { position: relative; z-index: 1; text-align: center; max-width: 820px; }
.qmark { font-family: var(--ff-display); font-size: 6rem; line-height: .6; color: var(--gold); opacity: .3; }
.quote-text {
  font-family: var(--ff-display);
  font-size: clamp(1.5rem, 3vw, 2.3rem); font-weight: 300; font-style: italic;
  color: var(--cream); line-height: 1.5; margin: 16px 0;
}
.quote-pills {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 40px;
}
.quote-pills span {
  padding: 7px 20px; border: 1px solid rgba(201,169,110,.25); border-radius: 30px;
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(245,240,232,.5);
}

/* ================================================================
   CTA
================================================================ */
.cta-section { padding: 100px 48px; background: var(--cream-dark); text-align: center; }
.cta-inner { max-width: 680px; margin: 0 auto; }
.cta-sub { font-size: .9rem; color: var(--ash); margin: 16px 0 40px; line-height: 1.7; }
.cta-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 600px) { .cta-section { padding: 80px 20px; } }