/* global React */ const { useState, useEffect, useRef } = React; /* ===================================================================== TACOS AL PASTOR AZ — CATERING HOUSE Diseño cálido, restaurante familiar. Catering como protagonista. Conversión por WhatsApp + formulario. ===================================================================== */ function Proposal1Trompo({ tweaks = {} }) { const accent = tweaks.accent || "#e8453a"; // rojo restaurante cálido (dark mode) const highlight = tweaks.highlight || "#f0a04f"; // naranja cálido (dark mode) const cream = tweaks.cream || "#1a1410"; // fondo oscuro cálido (dark mode) const ink = tweaks.ink || "#f5eada"; // texto crema (dark mode) const headline = tweaks.headline || "Llevamos el trompo a tu evento."; const showMarquee = tweaks.showMarquee !== false; const data = window.MENU_DATA; const contact = data.contact; const catering = data.catering; const location = data.locations[0]; const [activeCat, setActiveCat] = useState("tacos"); const [meat, setMeat] = useState("Pastor"); const [drawerOpen, setDrawerOpen] = useState(false); const [openFaq, setOpenFaq] = useState(0); const [form, setForm] = useState({ nombre: "", telefono: "", fecha: "", personas: "" }); const [submitted, setSubmitted] = useState(false); useEffect(() => { document.body.style.overflow = drawerOpen ? "hidden" : ""; return () => { document.body.style.overflow = ""; }; }, [drawerOpen]); const active = data.categories.find((c) => c.id === activeCat); const s = warmStyles; const marquee = "BODAS · QUINCEAÑERAS · CORPORATIVOS · CUMPLEAÑOS · FIESTAS · TROMPO EN VIVO · "; const waText = encodeURIComponent("Hola, me interesa cotizar catering para mi evento. ¿Me pueden dar más información?"); const waLink = `https://wa.me/${contact.whatsappDigits}?text=${waText}`; function handleFormSubmit(e) { e.preventDefault(); const msg = `Hola, soy ${form.nombre}. Me interesa cotizar catering para el ${form.fecha}, para ${form.personas} personas. Mi teléfono: ${form.telefono}.`; const url = `https://wa.me/${contact.whatsappDigits}?text=${encodeURIComponent(msg)}`; window.open(url, "_blank", "noopener,noreferrer"); setSubmitted(true); } function setField(k, v) { setForm((prev) => ({ ...prev, [k]: v })); } return (
{/* TOP BAR */}
CATERING DISPONIBLE · Phoenix metro · Llamadas y WhatsApp
Llámanos · {contact.whatsappDisplay}
{/* NAV */}
{/* MOBILE DRAWER */}
setDrawerOpen(false)}>Catering setDrawerOpen(false)}>Paquetes setDrawerOpen(false)}>Menú setDrawerOpen(false)}>FAQ setDrawerOpen(false)}>Visítanos setDrawerOpen(false)}>COTIZAR CATERING → setDrawerOpen(false)}> WHATSAPP DIRECTO
{/* HERO CATERING — protagonista */}
CATERING AUTÉNTICO · ARIZONA

Llevamos el
trompo
a tu evento.

Catering de tacos al pastor para bodas, quinceañeras, corporativos y fiestas privadas. El trompo en vivo, taquero en sitio, y el sabor que tu evento se merece.

SOLICITA TU COTIZACIÓN → CHATEA POR WHATSAPP
Trompo de pastor
{/* MARQUEE de eventos */} {showMarquee && (
{marquee.repeat(4)}
)} {/* TIPOS DE EVENTOS */}
Para cualquier ocasión

Tu evento, nuestro sabor.

Atendemos eventos de todo tipo y tamaño en el área de Phoenix. Llevamos todo: trompo, taquero, salsas, tortillas hechas a mano y la fiesta del sabor.

{catering.eventTypes.map((ev, i) => (
{ev.name}
{ev.desc}
))}
{/* PAQUETES */}
Paquetes de catering

Elige el tuyo,
nosotros llevamos la fiesta.

Precios por persona, mínimo 30 invitados. Personalizamos cada paquete según tu evento.

{catering.packages.map((pkg, i) => (
{pkg.highlighted &&
MÁS POPULAR
}
{pkg.name}
{pkg.tagline}
desde ${pkg.priceFrom} /persona
    {pkg.features.map((f, j) => (
  • ✓ {f}
    • ))}
COTIZAR {pkg.name.toUpperCase()}
))}
{/* TROMPO STORY */}
El corazón de la fiesta

12 horas de marinada,
fuego sin parar.

Achiote, guajillo, piña, vinagre, ajo. Lomo de cerdo apilado en el trompo, rostizado a fuego lento, rebanado al momento sobre tortilla de maíz hecha a mano. Piña, cebolla, cilantro, limón. El al pastor de verdad — el que tu evento se merece.

12h
Marinado
40lb
Por trompo
100%
Hecho a mano
Trompo
{/* FAQ */}
Preguntas frecuentes

Todo lo que necesitas saber.

{catering.faq.map((item, i) => (
{openFaq === i &&
{item.a}
}
))}
{/* CONTACTO: FORMULARIO + WHATSAPP */}
Solicita tu cotización

Cuéntanos de
tu evento.

Llena el formulario y te respondemos por WhatsApp con tu cotización personalizada. Sin compromiso.

{!submitted ? (
Al enviar se abrirá WhatsApp con tu mensaje listo. Respondemos en menos de 24 horas.
) : (
✓
¡Listo!
Te abrimos WhatsApp con tu mensaje. Si no se abrió, haz click aquí.
)}
RESPUESTA INMEDIATA
¿Prefieres chatear?
Mándanos un mensaje directo por WhatsApp y resolvemos cualquier duda.
CHATEA AHORA
{contact.whatsappDisplay}
Horario de atención
Lun – Sáb 9AM — 9PM
Domingo 10AM — 6PM
{/* MENU */} {/* INTERIOR FULL-BLEED PHOTO */}
Interior del restaurante
Visítanos en Peoria
Familia, fuego
y buen sabor.

Una taquería de familia, hecha con cariño desde el día uno.

{/* UBICACIÓN */}
Nuestro restaurante

Pasa a visitarnos.

{location.kind}

{location.name}

{location.address}
{location.city}
Tel {location.phone}
{location.hours.map(([d, h], j) => (
{d} {h}
))}
CÓMO LLEGAR → WHATSAPP
Interior
{/* FOOTER */} {/* FLOATING WHATSAPP BUTTON */}
); } /* ─────────────── subcomponents ─────────────── */ function Stat({ num, lab, accent }) { return (
{num}
{lab}
); } function BrandMark({ size = 44 }) { return (
T
); } function WhatsAppIcon({ size = 20, color = "currentColor" }) { return ( ); } function EventIcon({ name, accent }) { const icons = { "Bodas": "M12 2 L12 22 M4 8 L20 8 M4 8 Q4 14 8 18 M20 8 Q20 14 16 18 M8 18 L16 18", "Quinceañeras": "M3 18 L21 18 M5 18 L7 8 L9 12 L12 6 L15 12 L17 8 L19 18 M8 22 L16 22", "Corporativos": "M3 8 L21 8 L21 20 L3 20 Z M9 8 L9 5 L15 5 L15 8 M9 14 L15 14", "Cumpleaños": "M5 21 L19 21 M5 21 L5 12 L19 12 L19 21 M7 12 L7 9 Q7 7 9 7 L9 4 M15 4 L15 7 Q17 7 17 9 L17 12 M3 16 Q6 14 9 16 Q12 14 15 16 Q18 14 21 16", "Fiestas Privadas": "M9 18 V5 L21 3 V16 M9 18 Q9 21 6 21 Q3 21 3 18 Q3 15 6 15 Q9 15 9 18 M21 16 Q21 19 18 19 Q15 19 15 16 Q15 13 18 13 Q21 13 21 16", }; const path = icons[name] || icons["Fiestas Privadas"]; return ( ); } /* ─────────────── styles ─────────────── */ const warmStyles = { root: { width: "100%", background: "var(--warm-cream)", color: "var(--warm-ink)", fontFamily: "'Inter', system-ui, sans-serif", }, /* HEADER */ stickyHeader: { position: "sticky", top: 0, zIndex: 50, background: "rgba(15,10,7,0.92)", backdropFilter: "blur(10px)", borderBottom: "1px solid var(--warm-line)", }, topbar: { background: "var(--warm-deep)", color: "var(--warm-ink)", fontSize: 11, fontWeight: 600, letterSpacing: "0.1em", padding: "9px 0", }, topbarInner: { maxWidth: 1400, margin: "0 auto", padding: "0 40px", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 24, }, topbarLeft: { display: "flex", alignItems: "center", gap: 10, whiteSpace: "nowrap" }, topbarRight: { display: "flex", alignItems: "center", gap: 10, whiteSpace: "nowrap" }, liveDot: { width: 7, height: 7, borderRadius: "50%", background: "var(--warm-orange)", animation: "softPulse 2s ease-in-out infinite", }, topbarStrong: { fontWeight: 700, letterSpacing: "0.14em", color: "var(--warm-ink)" }, topbarMuted: { opacity: 0.7 }, topbarSep: { opacity: 0.4 }, nav: { maxWidth: 1400, margin: "0 auto", padding: "18px 40px", display: "flex", alignItems: "center", justifyContent: "space-between", }, navLogo: { display: "flex", alignItems: "center", gap: 14 }, navLogoTop: { fontFamily: "'Anton', sans-serif", fontSize: 22, letterSpacing: "0.04em", lineHeight: 1, color: "var(--warm-ink)" }, navLogoBot: { fontFamily: "'Inter', sans-serif", fontSize: 10, color: "var(--warm-red)", letterSpacing: "0.2em", marginTop: 5, fontWeight: 700 }, navLinks: { display: "flex", gap: 32 }, navLink: { fontSize: 14, fontWeight: 600, color: "var(--warm-ink)" }, orderBtn: { display: "inline-block", background: "var(--warm-red)", color: "#fff", border: "none", padding: "13px 22px", fontWeight: 800, fontSize: 12, letterSpacing: "0.15em", borderRadius: 8, textDecoration: "none", }, /* HERO */ hero: { position: "relative", overflow: "hidden", padding: "60px 0 90px", background: "linear-gradient(180deg, var(--warm-cream) 0%, var(--warm-alt) 100%)", }, heroGlow1: { position: "absolute", top: "10%", left: "10%", width: 380, height: 380, borderRadius: "50%", background: "radial-gradient(circle, rgba(232,140,42,0.18), transparent 70%)", filter: "blur(40px)", pointerEvents: "none", }, heroGlow2: { position: "absolute", bottom: "5%", right: "10%", width: 420, height: 420, borderRadius: "50%", background: "radial-gradient(circle, rgba(201,58,44,0.12), transparent 70%)", filter: "blur(40px)", pointerEvents: "none", }, heroGrid: { position: "relative", zIndex: 2, maxWidth: 1400, margin: "0 auto", padding: "0 40px", display: "grid", gridTemplateColumns: "1.1fr 0.9fr", gap: 60, alignItems: "center", }, heroLeft: {}, heroEyebrow: { display: "inline-flex", alignItems: "center", gap: 10, fontFamily: "'Inter', sans-serif", fontSize: 11, fontWeight: 700, color: "var(--warm-red)", letterSpacing: "0.22em", textTransform: "uppercase", marginBottom: 28, padding: "8px 16px", border: "1px solid rgba(201,58,44,0.3)", borderRadius: 999, background: "rgba(201,58,44,0.06)", }, heroEyebrowDot: { width: 7, height: 7, borderRadius: "50%", background: "var(--warm-red)", animation: "softPulse 2s ease-in-out infinite", }, heroH1: { fontFamily: "'Anton', sans-serif", fontSize: "clamp(64px, 8vw, 124px)", lineHeight: 0.9, letterSpacing: "-0.015em", margin: 0, fontWeight: 400, color: "var(--warm-ink)", }, heroH1Top: { display: "inline-block" }, heroH1Big: { display: "inline-block", color: "var(--warm-red)" }, heroH1Script: { display: "inline-block", fontFamily: "'Pacifico', cursive", fontSize: "0.65em", lineHeight: 1.1, fontWeight: 400, marginTop: 6, color: "var(--warm-ink)", }, heroSub: { fontFamily: "'Fraunces', Georgia, serif", fontSize: 20, lineHeight: 1.55, maxWidth: 520, marginTop: 28, color: "var(--warm-soft)", }, heroCtas: { display: "flex", gap: 12, marginTop: 36, alignItems: "center", flexWrap: "wrap" }, btnPrimary: { background: "var(--warm-red)", color: "#fff", border: "none", padding: "18px 28px", fontSize: 13, letterSpacing: "0.18em", fontWeight: 800, borderRadius: 10, textDecoration: "none", display: "inline-flex", alignItems: "center", gap: 8, boxShadow: "0 8px 18px rgba(201,58,44,0.22)", }, btnWa: { background: "var(--wa-green)", color: "#fff", border: "none", padding: "18px 26px", fontSize: 13, letterSpacing: "0.16em", fontWeight: 800, borderRadius: 10, textDecoration: "none", display: "inline-flex", alignItems: "center", gap: 10, boxShadow: "0 8px 18px rgba(37,211,102,0.28)", }, heroStats: { display: "flex", gap: 48, marginTop: 60, paddingTop: 28, borderTop: "1px solid var(--warm-line)", flexWrap: "wrap", }, heroRight: { position: "relative", height: 540 }, heroPhotoFrame: { position: "relative", width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center", }, heroTrompo: { height: "92%", width: "auto", animation: "trompoSway 6s ease-in-out infinite", transformOrigin: "top center", filter: "drop-shadow(0 30px 50px rgba(0,0,0,0.6))", }, heroPhotoTag: { position: "absolute", left: 16, bottom: 24, fontFamily: "'Inter', sans-serif", fontSize: 11, fontWeight: 700, color: "var(--warm-ink)", letterSpacing: "0.22em", background: "#fff", padding: "10px 14px", border: "1px solid var(--warm-line)", borderRadius: 999, display: "inline-flex", alignItems: "center", gap: 8, boxShadow: "0 6px 18px rgba(0,0,0,0.5)", }, heroPhotoTagDot: { width: 7, height: 7, borderRadius: "50%", background: "var(--warm-red)", animation: "softPulse 2s ease-in-out infinite", }, /* MARQUEE */ marqueeWrap: { background: "var(--warm-red)", color: "#fff", overflow: "hidden", padding: "16px 0", borderTop: "1px solid rgba(0,0,0,0.06)", borderBottom: "1px solid rgba(0,0,0,0.06)", }, marqueeTrack: { fontFamily: "'Anton', sans-serif", fontSize: 28, letterSpacing: "0.04em", whiteSpace: "nowrap", animation: "trompoMarquee 50s linear infinite", }, /* SECTION HEADERS — shared */ secHeader: { display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 40, marginBottom: 24 }, secEyebrow: { fontFamily: "'Inter', sans-serif", fontSize: 12, fontWeight: 700, color: "var(--warm-red)", letterSpacing: "0.22em", textTransform: "uppercase", paddingBottom: 6, }, secH2: { fontFamily: "'Anton', sans-serif", fontSize: "clamp(48px, 6vw, 84px)", lineHeight: 0.95, margin: 0, textAlign: "right", letterSpacing: "-0.01em", color: "var(--warm-ink)", fontWeight: 400, }, secLead: { fontFamily: "'Fraunces', Georgia, serif", fontSize: 18, lineHeight: 1.55, color: "var(--warm-soft)", maxWidth: 620, margin: "0 0 48px", }, /* EVENTS */ eventsSec: { maxWidth: 1400, margin: "0 auto", padding: "100px 40px", background: "var(--warm-cream)" }, eventsGrid: { display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 16 }, eventCard: { background: "var(--warm-card)", border: "1px solid var(--warm-line)", borderRadius: 14, padding: 26, display: "flex", flexDirection: "column", alignItems: "flex-start", boxShadow: "0 4px 14px rgba(0,0,0,0.4)", }, eventName: { fontFamily: "'Anton', sans-serif", fontSize: 22, letterSpacing: "0.02em", color: "var(--warm-ink)", marginBottom: 8 }, eventDesc: { fontSize: 14, color: "var(--warm-soft)", lineHeight: 1.5 }, /* PAQUETES */ pkgSec: { padding: "100px 40px", background: "var(--warm-alt)" }, pkgGrid: { maxWidth: 1400, margin: "0 auto", display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 28 }, pkgCard: { position: "relative", background: "var(--warm-card)", border: "1px solid var(--warm-line)", borderRadius: 18, padding: 36, display: "flex", flexDirection: "column", boxShadow: "0 8px 26px rgba(0,0,0,0.5)", }, pkgCardHi: { background: "var(--warm-red)", color: "#fff", border: "1px solid var(--warm-red)", boxShadow: "0 18px 40px rgba(201,58,44,0.32)", transform: "scale(1.02)", }, pkgBadge: { position: "absolute", top: -14, left: "50%", transform: "translateX(-50%)", background: "var(--warm-orange)", color: "#fff", padding: "7px 18px", borderRadius: 999, fontSize: 11, fontWeight: 800, letterSpacing: "0.18em", boxShadow: "0 4px 12px rgba(232,140,42,0.4)", }, pkgName: { fontFamily: "'Anton', sans-serif", fontSize: 36, letterSpacing: "0.02em", lineHeight: 1, marginBottom: 6 }, pkgTagline: { fontFamily: "'Fraunces', serif", fontStyle: "italic", fontSize: 16, opacity: 0.8, marginBottom: 22 }, pkgPrice: { display: "flex", alignItems: "baseline", gap: 8, paddingBottom: 24, marginBottom: 24, borderBottom: "1px solid rgba(0,0,0,0.1)", }, pkgPriceLabel: { fontSize: 13, opacity: 0.7, fontWeight: 600 }, pkgPriceNum: { fontFamily: "'Anton', sans-serif", fontSize: 52, lineHeight: 1 }, pkgPriceUnit: { fontSize: 14, opacity: 0.7 }, pkgFeatures: { listStyle: "none", padding: 0, margin: "0 0 28px", display: "flex", flexDirection: "column", gap: 12 }, pkgFeature: { display: "flex", alignItems: "flex-start", gap: 10, fontSize: 15, lineHeight: 1.4 }, pkgCheck: { fontWeight: 800, flexShrink: 0, marginTop: 1 }, pkgBtn: { marginTop: "auto", background: "var(--warm-red)", color: "#fff", border: "none", padding: "16px 22px", fontSize: 12, letterSpacing: "0.16em", fontWeight: 800, borderRadius: 10, textDecoration: "none", textAlign: "center", display: "block", }, pkgBtnHi: { marginTop: "auto", background: "#fff", color: "var(--warm-red)", border: "none", padding: "16px 22px", fontSize: 12, letterSpacing: "0.16em", fontWeight: 800, borderRadius: 10, textDecoration: "none", textAlign: "center", display: "block", }, /* TROMPO STORY */ trompoSec: { padding: "100px 40px", background: "var(--warm-cream)" }, trompoGrid: { maxWidth: 1400, margin: "0 auto", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center" }, trompoLeft: {}, trompoH2: { fontFamily: "'Anton', sans-serif", fontSize: "clamp(48px, 6vw, 88px)", lineHeight: 0.95, margin: "12px 0 24px", letterSpacing: "-0.01em", color: "var(--warm-ink)", fontWeight: 400, }, trompoCopy: { fontFamily: "'Fraunces', Georgia, serif", fontSize: 19, lineHeight: 1.6, color: "var(--warm-soft)", maxWidth: 540, }, trompoStats: { display: "flex", alignItems: "center", gap: 24, marginTop: 36, paddingTop: 28, borderTop: "1px solid var(--warm-line)", flexWrap: "wrap", }, trompoStat: {}, trompoStatNum: { fontFamily: "'Anton', sans-serif", fontSize: 52, lineHeight: 1, color: "var(--warm-red)", }, trompoStatUnit: { fontSize: 22, color: "var(--warm-orange)", marginLeft: 4 }, trompoStatLab: { fontFamily: "'Inter', sans-serif", fontSize: 11, letterSpacing: "0.18em", opacity: 0.65, marginTop: 8, textTransform: "uppercase", fontWeight: 600, }, trompoStatDiv: { width: 1, height: 50, background: "var(--warm-line)" }, trompoRight: {}, trompoStage: { position: "relative", height: 580, overflow: "hidden", borderRadius: 18, background: "linear-gradient(180deg, #2a1c12 0%, #170f0a 100%)", border: "1px solid var(--warm-line)", }, trompoBacklight: { position: "absolute", left: "50%", top: "50%", transform: "translate(-50%, -50%)", width: 360, height: 360, borderRadius: "50%", background: "radial-gradient(circle, rgba(232,140,42,0.45) 0%, transparent 65%)", filter: "blur(30px)", animation: "softPulse 4s ease-in-out infinite", }, trompoImg: { position: "absolute", left: "50%", top: 20, transform: "translateX(-50%)", height: "92%", width: "auto", animation: "trompoSway 6s ease-in-out infinite", transformOrigin: "top center", filter: "drop-shadow(0 20px 30px rgba(0,0,0,0.55))", }, /* FAQ */ faqSec: { padding: "100px 40px", background: "var(--warm-cream)", maxWidth: 1400, margin: "0 auto" }, faqList: { maxWidth: 880, margin: "0 auto" }, faqItem: { borderBottom: "1px solid var(--warm-line)" }, faqQ: { width: "100%", textAlign: "left", background: "transparent", border: "none", padding: "22px 4px", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16, fontFamily: "'Anton', sans-serif", fontSize: 22, letterSpacing: "0.01em", color: "var(--warm-ink)", }, faqIcon: { fontSize: 28, color: "var(--warm-red)", transition: "transform 240ms ease", lineHeight: 1, fontWeight: 300 }, faqA: { padding: "0 4px 24px", fontSize: 16, lineHeight: 1.65, color: "var(--warm-soft)", fontFamily: "'Fraunces', serif", maxWidth: 720, }, /* CONTACTO */ contactSec: { padding: "100px 40px", background: "var(--warm-alt)" }, contactGrid: { maxWidth: 1400, margin: "0 auto", display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 60, alignItems: "flex-start" }, contactLeft: {}, contactH2: { fontFamily: "'Anton', sans-serif", fontSize: "clamp(44px, 5.5vw, 76px)", lineHeight: 0.95, margin: "10px 0 20px", letterSpacing: "-0.01em", color: "var(--warm-ink)", fontWeight: 400, }, contactLead: { fontFamily: "'Fraunces', serif", fontSize: 17, lineHeight: 1.55, color: "var(--warm-soft)", marginBottom: 32, maxWidth: 540 }, form: { background: "var(--warm-card)", padding: 32, borderRadius: 16, border: "1px solid var(--warm-line)", boxShadow: "0 12px 32px rgba(0,0,0,0.55)" }, formFields: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18, marginBottom: 22 }, field: { display: "flex", flexDirection: "column", gap: 8 }, fieldLabel: { fontSize: 12, fontWeight: 700, letterSpacing: "0.1em", color: "var(--warm-ink)", textTransform: "uppercase" }, input: { width: "100%", boxSizing: "border-box", fontFamily: "inherit", fontSize: 16, padding: "14px 16px", border: "1px solid var(--warm-line)", borderRadius: 8, background: "var(--warm-cream)", color: "var(--warm-ink)", transition: "border-color 160ms ease, box-shadow 160ms ease", }, formSubmit: { width: "100%", background: "var(--warm-red)", color: "#fff", border: "none", padding: "18px 24px", fontSize: 14, letterSpacing: "0.18em", fontWeight: 800, borderRadius: 10, cursor: "pointer", boxShadow: "0 10px 24px rgba(201,58,44,0.28)", }, formNote: { marginTop: 14, fontSize: 13, color: "var(--warm-soft)", textAlign: "center", lineHeight: 1.5 }, formSuccess: { background: "var(--warm-card)", padding: 48, borderRadius: 16, border: "1px solid var(--warm-line)", textAlign: "center" }, formSuccessIcon: { width: 64, height: 64, borderRadius: "50%", background: "var(--wa-green)", color: "#fff", fontSize: 32, fontWeight: 800, display: "inline-flex", alignItems: "center", justifyContent: "center", marginBottom: 16 }, formSuccessTitle: { fontFamily: "'Anton', sans-serif", fontSize: 36, color: "var(--warm-ink)", marginBottom: 8 }, formSuccessMsg: { fontSize: 15, color: "var(--warm-soft)", lineHeight: 1.55, marginBottom: 24 }, formReset: { background: "transparent", border: "1px solid var(--warm-line)", color: "var(--warm-ink)", padding: "12px 22px", borderRadius: 8, fontSize: 13, fontWeight: 600, cursor: "pointer" }, contactRight: { display: "flex", flexDirection: "column", gap: 18 }, waCard: { background: "var(--wa-green)", color: "#fff", padding: 32, borderRadius: 16, boxShadow: "0 16px 36px rgba(37,211,102,0.3)", }, waBadge: { display: "inline-flex", alignItems: "center", gap: 8, background: "rgba(255,255,255,0.18)", padding: "7px 14px", borderRadius: 999, fontSize: 11, fontWeight: 800, letterSpacing: "0.16em", marginBottom: 16, }, waTitle: { fontFamily: "'Anton', sans-serif", fontSize: 34, lineHeight: 1.05, marginBottom: 10 }, waSubtitle: { fontSize: 15, lineHeight: 1.5, opacity: 0.95, marginBottom: 22 }, waBtn: { display: "inline-flex", alignItems: "center", gap: 10, background: "#fff", color: "var(--wa-green-dark)", padding: "16px 24px", borderRadius: 10, fontSize: 13, letterSpacing: "0.16em", fontWeight: 800, textDecoration: "none", boxShadow: "0 6px 14px rgba(0,0,0,0.12)", }, waNumber: { marginTop: 16, fontSize: 13, opacity: 0.9, fontWeight: 600, letterSpacing: "0.04em" }, contactInfoCard: { background: "var(--warm-card)", padding: 26, borderRadius: 16, border: "1px solid var(--warm-line)" }, contactInfoH: { fontFamily: "'Inter', sans-serif", fontSize: 12, fontWeight: 700, letterSpacing: "0.18em", color: "var(--warm-red)", textTransform: "uppercase", marginBottom: 16 }, contactInfoRow: { display: "flex", justifyContent: "space-between", padding: "8px 0", fontSize: 14, color: "var(--warm-ink)" }, /* MENU */ menuSec: { maxWidth: 1400, margin: "0 auto", padding: "100px 40px", background: "var(--warm-cream)" }, meatPicker: { marginBottom: 32 }, meatPickerLabel: { fontFamily: "'Inter', sans-serif", fontSize: 11, fontWeight: 700, color: "var(--warm-red)", letterSpacing: "0.22em", textTransform: "uppercase", marginBottom: 14 }, meatPills: { display: "flex", gap: 10, flexWrap: "wrap" }, meatPill: { background: "var(--warm-card)", color: "var(--warm-ink)", border: "1px solid var(--warm-line)", padding: "12px 20px", borderRadius: 999, fontFamily: "'Anton', sans-serif", fontSize: 16, letterSpacing: "0.04em", whiteSpace: "nowrap", cursor: "pointer", }, meatPillActive: { background: "var(--warm-red)", borderColor: "var(--warm-red)", color: "#fff", boxShadow: "0 6px 14px rgba(201,58,44,0.28)", }, menuLayout: { display: "grid", gridTemplateColumns: "260px 1fr", gap: 36, marginTop: 28 }, catTabs: { display: "flex", flexDirection: "column", borderTop: "1px solid var(--warm-line)" }, catTab: { display: "flex", flexDirection: "column", alignItems: "flex-start", gap: 2, background: "transparent", color: "var(--warm-ink)", border: "none", borderBottom: "1px solid var(--warm-line)", padding: "16px 12px 16px 0", textAlign: "left", }, catTabActive: { color: "var(--warm-red)", boxShadow: "inset 3px 0 0 var(--warm-red)", paddingLeft: 14, background: "rgba(201,58,44,0.04)", }, catEs: { fontFamily: "'Anton', sans-serif", fontSize: 22, letterSpacing: "0.02em", lineHeight: 1 }, catEn: { fontFamily: "'Inter', sans-serif", fontSize: 10, opacity: 0.6, letterSpacing: "0.15em", fontWeight: 600, textTransform: "uppercase" }, menuPanel: { position: "relative", overflow: "hidden", background: "var(--warm-card)", border: "1px solid var(--warm-line)", borderRadius: 16, padding: 40, boxShadow: "0 8px 26px rgba(0,0,0,0.5)", }, menuPanelHead: { display: "flex", justifyContent: "space-between", alignItems: "flex-end", paddingBottom: 22, borderBottom: "1px solid var(--warm-line)", marginBottom: 22, }, menuPanelEs: { fontFamily: "'Anton', sans-serif", fontSize: 56, lineHeight: 0.95, color: "var(--warm-ink)" }, menuPanelEn: { fontFamily: "'Inter', sans-serif", fontSize: 11, letterSpacing: "0.22em", color: "var(--warm-red)", marginTop: 6, fontWeight: 700, textTransform: "uppercase" }, menuPanelMeat: { fontFamily: "'Inter', sans-serif", fontSize: 13, letterSpacing: "0.1em", opacity: 0.8, fontWeight: 600 }, menuPanelBlurb: { fontFamily: "'Fraunces', serif", fontStyle: "italic", fontSize: 16, lineHeight: 1.55, color: "var(--warm-soft)", maxWidth: 600, margin: "0 0 26px" }, menuItems: { display: "flex", flexDirection: "column", gap: 18 }, menuItem: { display: "flex", alignItems: "baseline", gap: 14 }, menuItemL: { flexShrink: 0 }, menuItemName: { fontFamily: "'Anton', sans-serif", fontSize: 22, letterSpacing: "0.02em", color: "var(--warm-ink)" }, menuItemDesc: { fontSize: 13, color: "var(--warm-soft)", marginTop: 4, maxWidth: 360 }, menuItemDots: { flex: 1, borderBottom: "1px dotted var(--warm-line)", marginBottom: 4 }, menuItemPrice: { fontFamily: "'Anton', sans-serif", fontSize: 24, color: "var(--warm-red)" }, menuPanelFoot: { marginTop: 30, paddingTop: 20, borderTop: "1px solid var(--warm-line)", fontFamily: "'Fraunces', serif", fontStyle: "italic", fontSize: 14, color: "var(--warm-soft)", }, /* BLEED */ bleed: { position: "relative", height: "60vh", minHeight: 440, overflow: "hidden" }, bleedImg: { width: "100%", height: "100%", objectFit: "cover", display: "block" }, bleedOverlay: { position: "absolute", inset: 0, background: "linear-gradient(90deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.55) 55%, rgba(0,0,0,0.25) 100%)", }, bleedCaption: { position: "absolute", left: 60, bottom: 60, right: 60, maxWidth: 600, zIndex: 2, color: "#fdf8ee", }, bleedEyebrow: { fontSize: 12, fontWeight: 700, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--warm-orange)", marginBottom: 10 }, bleedTitle: { fontFamily: "'Anton', sans-serif", fontSize: "clamp(44px, 5.5vw, 88px)", lineHeight: 0.95, margin: "12px 0 18px", color: "#fdf8ee", }, bleedSub: { fontFamily: "'Fraunces', serif", fontStyle: "italic", fontSize: 18, lineHeight: 1.55, opacity: 0.92, }, /* LOCATION */ locSec: { padding: "100px 40px", background: "var(--warm-cream)", maxWidth: 1400, margin: "0 auto" }, locGrid: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 36, alignItems: "stretch" }, locCard: { background: "var(--warm-card)", border: "1px solid var(--warm-line)", borderRadius: 18, padding: 40, boxShadow: "0 8px 26px rgba(0,0,0,0.5)", }, locKindWrap: { marginBottom: 20 }, locKind: { fontFamily: "'Inter', sans-serif", fontSize: 11, letterSpacing: "0.22em", background: "var(--warm-red)", color: "#fff", padding: "7px 14px", borderRadius: 999, fontWeight: 800, textTransform: "uppercase", }, locName: { fontFamily: "'Anton', sans-serif", fontSize: 44, margin: "0 0 14px", letterSpacing: "0.02em", color: "var(--warm-ink)", fontWeight: 400 }, locAddr: { fontSize: 16, color: "var(--warm-soft)", lineHeight: 1.55 }, locPhone: { marginTop: 22, display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap", }, locPhoneLab: { fontSize: 10, letterSpacing: "0.22em", color: "var(--warm-red)", border: "1px solid rgba(201,58,44,0.4)", padding: "4px 10px", borderRadius: 999, fontWeight: 800, textTransform: "uppercase", }, locPhoneNum: { fontSize: 18, fontWeight: 700, color: "var(--warm-ink)" }, locHours: { marginTop: 26, paddingTop: 22, borderTop: "1px solid var(--warm-line)", display: "grid", gap: 10, }, locHourRow: { display: "grid", gridTemplateColumns: "120px 1fr", alignItems: "baseline", fontSize: 14, }, locHourDay: { color: "var(--warm-soft)", letterSpacing: "0.04em" }, locHourTime: { color: "var(--warm-ink)", fontWeight: 600 }, locActions: { display: "flex", gap: 10, marginTop: 28, flexWrap: "wrap" }, btnPrimarySm: { display: "inline-flex", alignItems: "center", gap: 8, background: "var(--warm-red)", color: "#fff", border: "none", padding: "13px 20px", fontSize: 12, letterSpacing: "0.16em", fontWeight: 800, borderRadius: 8, textDecoration: "none", }, btnGhostSm: { display: "inline-flex", alignItems: "center", gap: 8, background: "transparent", color: "var(--warm-ink)", border: "1px solid var(--warm-line)", padding: "13px 20px", fontSize: 12, letterSpacing: "0.16em", fontWeight: 800, borderRadius: 8, textDecoration: "none", }, locPhotoFrame: { position: "relative", borderRadius: 18, overflow: "hidden", minHeight: 420, border: "1px solid var(--warm-line)", boxShadow: "0 8px 26px rgba(0,0,0,0.55)", }, locPhoto: { width: "100%", height: "100%", objectFit: "cover", display: "block", position: "absolute", inset: 0 }, /* FOOTER */ footer: { background: "var(--warm-deep)", color: "var(--warm-ink)", padding: "80px 40px 40px", }, footerGrid: { maxWidth: 1400, margin: "0 auto", display: "grid", gridTemplateColumns: "1.6fr 1fr 1fr 1fr", gap: 40 }, footerTagline: { marginTop: 18, fontSize: 14, opacity: 0.7, maxWidth: 320, lineHeight: 1.55, fontFamily: "'Fraunces', serif", fontStyle: "italic" }, footerSocial: { display: "flex", gap: 8, marginTop: 22 }, footerSocialLink: { width: 38, height: 38, borderRadius: "50%", border: "1px solid rgba(245,234,218,0.3)", display: "inline-flex", alignItems: "center", justifyContent: "center", fontSize: 11, fontWeight: 800, letterSpacing: "0.1em", color: "var(--warm-orange)", textDecoration: "none", }, footH: { fontFamily: "'Inter', sans-serif", fontSize: 11, color: "var(--warm-orange)", letterSpacing: "0.22em", marginBottom: 18, fontWeight: 800, textTransform: "uppercase" }, footL: { display: "flex", alignItems: "center", gap: 6, fontSize: 14, padding: "6px 0", opacity: 0.8, textDecoration: "none", color: "var(--warm-ink)" }, footerBottom: { maxWidth: 1400, margin: "60px auto 0", paddingTop: 24, borderTop: "1px solid rgba(245,234,218,0.15)", fontSize: 12, opacity: 0.55, display: "flex", gap: 14, flexWrap: "wrap", }, /* FLOATING WHATSAPP BUTTON */ fab: { position: "fixed", bottom: 28, right: 28, zIndex: 90, width: 64, height: 64, borderRadius: "50%", background: "var(--wa-green)", color: "#fff", display: "inline-flex", alignItems: "center", justifyContent: "center", boxShadow: "0 10px 26px rgba(37,211,102,0.4)", textDecoration: "none", }, }; window.Proposal1Trompo = Proposal1Trompo;