/* ════════════════════════════════════════════════════════════
   ROSSO — BRUTALIST TRATTORIA (restyle rompedor)
   Hormigón · rojo tomate · negro · Big Shoulders / Inter / JetBrains Mono
   Rejilla expuesta · bordes negros gruesos · sombras duras · bloques rojos
   Cargado DESPUÉS de style.css → gana por orden
   ════════════════════════════════════════════════════════════ */

/* ─── TIPOGRAFÍA INDUSTRIAL ─── */
h1, h2, h3, h4,
.section-title, .logo-main, .lux-splash-logo,
.story-stat-num, .event-day, .event-title, .hero-sub {
  font-family: var(--serif) !important;
  font-weight: 800;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}
.section-eyebrow, .hero-flag-tag-text, .story-stat-label, .event-tag,
.logo-sub, .lux-splash-sub, .review-platform, .form-label, .footer-col h4,
.specials-ticker, .nav a, .lang-btn, .book-info-block h4 {
  font-family: var(--mono) !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
body, p, .section-lead, .review-text, .event-desc, .form-input, .btn {
  font-family: var(--sans);
}

/* ─── ESQUINAS AFILADAS + BORDES DUROS (global brutalist) ─── */
.btn, .event-card, .review-card, .story-img-frame, .book-form-wrap,
.form-input, .book-map, .carta-slide, .book-info-block, .hero-flag-tag,
.lightbox-inner, .nav-cta, .review-avatar, .book-wa-btn, .form-wa-link {
  border-radius: 0 !important;
}

/* ─── HEADER ─── */
.header { background: var(--panna); border-bottom: 3px solid var(--nero); }
.header-stripe { background: var(--rosso); height: 4px; }
.logo-main { font-size: 1.7rem; font-weight: 900; letter-spacing: 0.01em; color: var(--nero); line-height: 0.9; }
.logo-main span { color: var(--rosso); }
.logo-sub { font-size: 0.6rem; color: var(--grigio); letter-spacing: 0.24em; }
.nav a { font-size: 0.75rem; font-weight: 700; color: var(--carbone); }
.nav a:hover { color: var(--rosso); }
.nav-cta {
  background: var(--rosso) !important; color: #fff !important;
  border: 2px solid var(--nero); font-family: var(--mono) !important;
  padding: 0.55rem 1rem; box-shadow: 3px 3px 0 var(--nero);
}
.nav-cta:hover { background: var(--nero) !important; transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--rosso); }
.lang-toggle { color: var(--carbone); border: 2px solid var(--nero); padding: 0.15rem 0.15rem; }
.lang-btn { font-size: 0.72rem; font-weight: 700; color: var(--carbone) !important; padding: 0.2rem 0.5rem; }
.lang-btn.active { color: #fff !important; background: var(--rosso); }
.lang-btn:hover { color: var(--rosso) !important; }
.lang-btn.active:hover { color: #fff !important; }

/* texto de ayuda del formulario (tarjeta clara) — legible */
.form-small { color: var(--grigio) !important; }
.form-wa-link { color: var(--rosso) !important; font-weight: 700; text-decoration: underline; }

/* ─── SPLASH BRUTALIST ─── */
.lux-splash { background: var(--panna); }
.lux-splash-logo { font-family: var(--serif) !important; font-weight: 900; color: var(--nero); font-size: clamp(4rem, 18vw, 10rem); line-height: 0.82; letter-spacing: 0.01em; }
.lux-splash-logo span { color: var(--rosso); }
.lux-splash-rule { background: var(--rosso); height: 4px; }
.lux-splash-sub { color: var(--carbone); font-weight: 700; letter-spacing: 0.4em; }
.lux-splash-flag span { border-radius: 0; }
.lux-splash-flag .g { background: var(--nero); }
.lux-splash-flag .w { background: var(--panna3); }
.lux-splash-flag .r { background: var(--rosso); }
.lux-splash-loader span { background: var(--rosso); border-radius: 0; }

/* ─── BOTONES ─── */
.btn {
  font-family: var(--mono) !important;
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700;
  border-radius: 0; padding: 0.95rem 1.7rem;
}
.btn-red { background: var(--rosso); color: #fff; border: 2px solid var(--nero); box-shadow: 4px 4px 0 var(--nero); }
.btn-red:hover { background: var(--nero); color: #fff; transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--rosso); }
.btn-outline-cream, .btn--cream {
  background: transparent; color: var(--nero); border: 2px solid var(--nero); box-shadow: 4px 4px 0 transparent;
}
.btn-outline-cream:hover, .btn--cream:hover { background: var(--nero); color: var(--panna); transform: translate(-2px,-2px); box-shadow: 4px 4px 0 var(--rosso); }
.btn-submit { background: var(--rosso); color: #fff; border: 2px solid var(--nero); box-shadow: 4px 4px 0 var(--nero); }

/* ─── HERO ─── */
.hero {
  background:
    linear-gradient(var(--line2) 1px, transparent 1px) 0 0 / 100% 44px,
    var(--panna);
  border-bottom: 3px solid var(--nero);
}
.hero h1 { font-size: clamp(3.4rem, 12vw, 8.5rem); font-weight: 900; line-height: 0.86; color: var(--nero); }
.hero h1 .italic { font-style: normal; color: var(--rosso); }
.hero h1 .outline {
  -webkit-text-stroke: 2.5px var(--nero); color: transparent;
  font-style: normal;
}
.hero-sub { font-family: var(--serif) !important; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--carbone); font-size: clamp(1.1rem,2.4vw,1.5rem); }
.hero-flag-tag {
  background: var(--nero); color: var(--panna); border: 2px solid var(--nero);
  padding: 0.3rem 0.3rem 0.3rem 0.55rem; box-shadow: 3px 3px 0 var(--rosso);
}
.hero-flag-tag-text { color: var(--panna); font-size: 0.66rem; letter-spacing: 0.12em; }
.hero-flag-tag-bar span { border-radius: 0; }
.hero-flag-tag-bar .g { background: var(--rosso); }
.hero-flag-tag-bar .w { background: var(--panna); }
.hero-flag-tag-bar .r { background: var(--rosso); }

/* ─── TICKER: banda roja tipografía negra ─── */
.specials-banner { background: var(--rosso); border-block: 3px solid var(--nero); }
.specials-ticker span { font-family: var(--serif) !important; font-weight: 800; text-transform: uppercase; color: var(--nero); font-size: 1.15rem; letter-spacing: 0.02em; }

/* ─── SECTION HEADERS ─── */
.section-eyebrow { color: var(--rosso); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.2em; }
.section-title, .section-title-dark { font-weight: 900; letter-spacing: 0.005em; color: var(--nero); font-size: clamp(2.4rem,5.5vw,4.4rem); line-height: 0.92; }
.section-title .red, .section-title .italic { color: var(--rosso); font-style: normal; }
.section-lead { font-family: var(--serif) !important; font-weight: 700; text-transform: uppercase; color: var(--carbone); letter-spacing: 0.01em; }

/* ─── STORY ─── */
.story-img-frame { border: 3px solid var(--nero); box-shadow: 12px 12px 0 var(--rosso); border-radius: 0; overflow: hidden; }
.story-img-caption { font-family: var(--mono); text-transform: uppercase; font-size: 0.62rem; letter-spacing: 0.1em; background: var(--nero); color: var(--panna); border-radius: 0; }
.story-accent { background: var(--rosso); }
.story-stat { border-left: 3px solid var(--rosso); padding-left: 0.9rem; }
.story-stat-num { font-family: var(--serif) !important; font-weight: 900; color: var(--rosso); font-size: 2.9rem; line-height: 0.9; }
.story-stat-label { font-family: var(--mono) !important; font-size: 0.6rem; letter-spacing: 0.1em; color: var(--carbone); }

/* ─── EVENTS ─── */
.event-card { background: var(--panna2); border: 2.5px solid var(--nero); border-radius: 0; box-shadow: 6px 6px 0 rgba(20,18,16,0.16); }
.event-card:hover { transform: translate(-3px,-3px); box-shadow: 10px 10px 0 var(--rosso); }
.event-day { font-family: var(--serif) !important; font-weight: 900; color: var(--rosso); }
.event-title { font-weight: 800; color: var(--nero); }
.event-desc { color: var(--carbone); }
.event-tag { border-radius: 0 !important; border: 1.5px solid var(--nero); font-family: var(--mono) !important; font-weight: 700; letter-spacing: 0.06em; background: var(--panna); color: var(--nero); }
.event-tag--special, .event-tag--exclusive { background: var(--rosso); color: #fff; }
.event-tag--wine, .event-tag--workshop { background: var(--nero); color: var(--panna); }

/* ─── REVIEWS ─── */
.review-card { background: var(--panna2); border: 2.5px solid var(--nero); border-radius: 0; box-shadow: 6px 6px 0 rgba(20,18,16,0.14); }
.review-stars { color: var(--rosso); }
.review-avatar { border: 2px solid var(--nero); border-radius: 0; }
.review-name { font-family: var(--serif) !important; font-weight: 800; text-transform: uppercase; color: var(--nero); }
.review-platform { font-family: var(--mono) !important; color: var(--grigio); font-size: 0.62rem; }

/* ─── CARTA CAROUSEL (preview menú) ─── */
.carta-slide { border: 3px solid var(--nero); border-radius: 0; }
.carta-slide-label { font-family: var(--serif) !important; font-weight: 800; text-transform: uppercase; }
.carta-dot { border-radius: 0 !important; }
.carta-dot.active { background: var(--rosso) !important; }
.carta-arrow { border-radius: 0 !important; border: 2px solid var(--nero); background: var(--panna); color: var(--nero); }

/* ─── BOOK (banda oscura — texto claro del diseño original) ─── */
.book-section { background: var(--nero); border-top: 4px solid var(--rosso); }
.book-section .section-title { color: var(--panna); }
.book-section .section-eyebrow { color: var(--rosso3); }
.book-section .section-lead { color: rgba(244,236,222,0.6); }
.book-info-block h4, .book-info-block h3, .book-info-block p, .book-info-block a { color: var(--panna2); }
.book-info-block h4 { color: var(--rosso3) !important; }
.book-form-wrap { background: var(--panna); border: 3px solid var(--nero); border-radius: 0; box-shadow: 10px 10px 0 var(--rosso); }
.form-input { border: 2px solid var(--nero); border-radius: 0; background: var(--panna); }
.form-input:focus { outline: none; border-color: var(--rosso); box-shadow: 0 0 0 3px rgba(216,30,5,0.16); }
.form-label { font-family: var(--mono) !important; font-size: 0.66rem; letter-spacing: 0.08em; color: var(--carbone); }
.book-map { border: 3px solid var(--nero); border-radius: 0; }
.book-info-block h4, .book-info-block h3 { font-family: var(--serif) !important; text-transform: uppercase; }
.book-wa-btn { background: #128C3E; color: #fff; border: 2px solid var(--nero); border-radius: 0; box-shadow: 4px 4px 0 var(--nero); }

/* ─── FOOTER (bloque negro) ─── */
.footer { background: var(--nero); color: var(--panna2); border-top: 4px solid var(--rosso); }
.footer-brand .logo-main, .footer .logo-main { color: var(--panna); }
.footer-brand .logo-main span, .footer .logo-main span { color: var(--rosso); }
.footer-col h4 { color: var(--rosso); font-family: var(--mono) !important; letter-spacing: 0.14em; }
.footer-col a:hover { color: var(--rosso); }
.footer-social a { border: 2px solid var(--panna3); border-radius: 0; color: var(--panna2); }
.footer-social a:hover { background: var(--rosso); border-color: var(--rosso); color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); }

/* ─── FLOTANTES ─── */
.scroll-top, .wa-float { border-radius: 0 !important; border: 2px solid var(--nero); }
.scroll-top { background: var(--nero); color: var(--panna); }

/* ─── TEXTURA HORMIGÓN/REJILLA sutil en secciones ─── */
.section, .events-section {
  background-image: linear-gradient(var(--line) 1px, transparent 1px);
  background-size: 100% 44px;
}

/* ─── HAMBURGER visible sobre header hormigón ─── */
.hamburger span { background: var(--nero) !important; height: 2.5px; width: 26px; }
.hamburger.open span { background: var(--panna) !important; }

/* ─── MENÚ MÓVIL brutalist (drawer oscuro, texto claro) ─── */
.mobile-nav { background: var(--nero); }
.mobile-nav a { font-family: var(--serif) !important; font-style: normal; text-transform: uppercase; font-weight: 800; color: var(--panna); letter-spacing: 0.01em; }
.mobile-nav a:hover { color: var(--rosso3); }
.mobile-nav .lang-toggle { border-color: var(--panna3); }
.mobile-nav .lang-btn { color: var(--panna) !important; }
.mobile-nav .lang-btn.active { color: #fff !important; background: var(--rosso); }

/* ─── FOOTER: motivo SVG "dientes" rojos (brutalist) ─── */
.footer { position: relative; border-top: none; }
.footer::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='14' viewBox='0 0 36 14'%3E%3Cpath d='M0 0 L18 14 L36 0 Z' fill='%23d81e05'/%3E%3C/svg%3E");
  background-size: 36px 14px; background-repeat: repeat-x;
}
.footer-top, .footer-inner { padding-top: 1.5rem; }

/* ─── MÓVIL ─── */
@media (max-width: 767px) {
  .story-img-frame { box-shadow: 8px 8px 0 var(--rosso); }
  .book-form-wrap { box-shadow: 6px 6px 0 var(--rosso); }
  .event-card:hover { transform: none; }
  .hero h1 { font-size: clamp(3rem, 16vw, 5rem); }
}