/* ============================================================
   SAFIR PLUS NARGILE CAFE — Master Stylesheet
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Inter:wght@300;400;500;600;700&display=swap');

/* ── VARIABLES ─────────────────────────────────────────────── */
:root {
    --deep:        #0B1F3A;
    --mid:         #1A3A6B;
    --sapphire:    #1E4D9B;
    --gold:        #C9A260;
    --gold-light:  #E4C882;
    --gold-pale:   rgba(201,162,96,.10);
    --gold-border: rgba(201,162,96,.28);
    --gold-glow:   rgba(201,162,96,.35);
    --cream:       #FAF7F2;
    --cream-dark:  #F0EAE0;
    --white:       #FFFFFF;

    --text-1: #1A1A2E;
    --text-2: #4A5568;
    --text-3: #8E9AAF;

    --grad-hero:  linear-gradient(150deg,#0B1F3A 0%,#1A3A6B 55%,#1E4D9B 100%);
    --grad-card:  linear-gradient(135deg,rgba(201,162,96,.06) 0%,transparent 100%);

    --sh-xs: 0 1px  6px rgba(11,31,58,.06);
    --sh-sm: 0 2px 12px rgba(11,31,58,.09);
    --sh-md: 0 6px 24px rgba(11,31,58,.13);
    --sh-lg: 0 12px 48px rgba(11,31,58,.18);
    --sh-gold: 0 4px 20px rgba(201,162,96,.28);

    --max-w-mobile:  480px;
    --max-w-desktop: 1160px;
    --max-w:         var(--max-w-mobile);
    --hdr-h:     64px;
    --r-sm:      10px;
    --r-md:      16px;
    --r-lg:      24px;
    --r-full:    9999px;
    --transition: all .25s cubic-bezier(.4,0,.2,1);
    --transition-slow: all .4s cubic-bezier(.4,0,.2,1);
}

/* ── RESET ──────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
    font-family:'Inter',system-ui,sans-serif;
    font-size:15px;
    line-height:1.6;
    color:var(--text-1);
    background:var(--cream);
    overflow-x:hidden;
    min-height:100vh;
}
img { max-width:100%; height:auto; display:block; }
a   { text-decoration:none; color:inherit; }
button { cursor:pointer; border:none; background:none; font-family:inherit; }
ul,ol { list-style:none; }

/* ── LAYOUT ─────────────────────────────────────────────────── */
.site-wrapper {
    max-width:var(--max-w);
    margin:0 auto;
    min-height:100vh;
    background:var(--cream);
    position:relative;
}
@media (min-width:520px){
    .site-wrapper{
        box-shadow:0 0 100px rgba(11,31,58,.2);
    }
}
.main-content { padding-top:var(--hdr-h); }

/* ── TYPOGRAPHY ─────────────────────────────────────────────── */
h1,h2,h3,h4,h5 {
    font-family:'Playfair Display',Georgia,serif;
    font-weight:700;
    line-height:1.2;
    color:var(--text-1);
}
.section-title {
    font-family:'Playfair Display',Georgia,serif;
    font-size:22px;
    font-weight:700;
    color:var(--deep);
    text-align:center;
    margin-bottom:4px;
}
.section-sub {
    font-size:13px;
    color:var(--text-3);
    text-align:center;
    margin-bottom:24px;
}

/* ── HEADER ─────────────────────────────────────────────────── */
.site-header {
    position:fixed;
    top:0; left:50%;
    transform:translateX(-50%);
    width:100%;
    max-width:var(--max-w);
    height:var(--hdr-h);
    background:var(--grad-hero);
    z-index:1000;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 18px;
    border-bottom:1px solid rgba(201,162,96,.18);
}
@media (min-width:520px){
    .site-header{ box-shadow:0 4px 24px rgba(11,31,58,.35); }
}

.header-logo {
    display:flex; align-items:center; gap:10px;
    text-decoration:none; flex-shrink:0;
}
.logo-svg-wrap { width:42px; height:42px; flex-shrink:0; }
.logo-text-wrap { display:flex; flex-direction:column; line-height:1.1; }
.logo-text-wrap .name {
    font-family:'Playfair Display',serif;
    font-size:15px; font-weight:700;
    color:var(--gold-light); letter-spacing:.4px;
}
.logo-text-wrap .sub {
    font-size:9px; color:rgba(228,200,130,.65);
    letter-spacing:2.5px; text-transform:uppercase;
}

.header-right { display:flex; align-items:center; gap:8px; }

.lang-toggle {
    display:flex; align-items:center;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(201,162,96,.28);
    border-radius:var(--r-full); overflow:hidden;
}
.lang-btn {
    padding:5px 9px; font-size:11px;
    font-weight:600; letter-spacing:.5px;
    color:rgba(255,255,255,.55); transition:var(--transition);
    cursor:pointer;
}
.lang-btn.active { background:var(--gold); color:var(--deep); }

.hamburger {
    width:40px; height:40px;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:5px;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(201,162,96,.28);
    border-radius:var(--r-sm); cursor:pointer;
    transition:var(--transition);
}
.hamburger:active { background:rgba(255,255,255,.14); }
.hamburger span {
    display:block; width:18px; height:2px;
    background:var(--gold-light); border-radius:2px;
    transition:var(--transition);
}
.hamburger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; transform:scaleX(0); }
.hamburger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ── NAV OVERLAY ────────────────────────────────────────────── */
.nav-overlay {
    position:fixed;
    top:var(--hdr-h); left:50%;
    transform:translateX(-50%);
    width:100%; max-width:var(--max-w);
    background:rgba(9,20,38,.97);
    backdrop-filter:blur(16px);
    z-index:999;
    overflow:hidden; max-height:0;
    transition:max-height .35s cubic-bezier(.4,0,.2,1);
    border-bottom:1px solid rgba(201,162,96,.15);
}
.nav-overlay.open { max-height:360px; }
.nav-menu { padding:8px 0; }
.nav-menu li a {
    display:flex; align-items:center; gap:14px;
    padding:15px 24px;
    color:rgba(255,255,255,.8);
    font-size:15px; font-weight:500;
    border-bottom:1px solid rgba(255,255,255,.05);
    transition:var(--transition);
}
.nav-menu li:last-child a { border-bottom:none; }
.nav-menu li a:hover,
.nav-menu li a.active {
    color:var(--gold); background:rgba(201,162,96,.07);
    padding-left:34px;
}
.nav-icon { width:22px; text-align:center; font-size:17px; }

/* ── BUTTONS ────────────────────────────────────────────────── */
.btn {
    display:inline-flex; align-items:center;
    justify-content:center; gap:7px;
    padding:12px 22px; border-radius:var(--r-full);
    font-size:14px; font-weight:600;
    transition:var(--transition); cursor:pointer;
    border:none; white-space:nowrap;
}
.btn-gold {
    background:var(--gold); color:var(--deep);
    box-shadow:var(--sh-gold);
}
.btn-gold:hover,
.btn-gold:active {
    background:var(--gold-light);
    transform:translateY(-2px);
    box-shadow:0 6px 24px rgba(201,162,96,.42);
}
.btn-outline {
    background:rgba(255,255,255,.08); color:#fff;
    border:1.5px solid rgba(255,255,255,.28);
    backdrop-filter:blur(4px);
}
.btn-outline:hover { background:rgba(255,255,255,.15); transform:translateY(-2px); }
.btn-ghost {
    background:transparent; color:var(--gold);
    border:1.5px solid var(--gold-border);
}
.btn-ghost:hover { background:var(--gold-pale); }
.btn-whatsapp {
    background:#25D366; color:#fff;
    box-shadow:0 4px 16px rgba(37,211,102,.3);
}
.btn-whatsapp:hover { background:#1ebe5a; transform:translateY(-2px); }
.btn-dark {
    background:var(--deep); color:var(--gold-light);
    border:1px solid rgba(201,162,96,.25);
}
.btn-dark:hover { background:var(--mid); }
.btn-sm  { padding:9px 18px; font-size:13px; }
.btn-lg  { padding:15px 30px; font-size:15px; }
.btn-full{ width:100%; }

/* ── HERO ───────────────────────────────────────────────────── */
.hero {
    background:var(--grad-hero);
    margin-top:calc(-1 * var(--hdr-h));
    padding:calc(56px + var(--hdr-h)) 24px 52px;
    text-align:center; position:relative; overflow:hidden;
}
.hero::before {
    content:'';
    position:absolute; top:-120px; right:-80px;
    width:340px; height:340px;
    background:radial-gradient(circle,rgba(201,162,96,.14) 0%,transparent 70%);
    pointer-events:none;
}
.hero::after {
    content:'';
    position:absolute; bottom:-60px; left:-60px;
    width:280px; height:280px;
    background:radial-gradient(circle,rgba(30,77,155,.35) 0%,transparent 70%);
    pointer-events:none;
}

/* Smoke rings */
.hero-smoke { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.smoke-ring {
    position:absolute; border-radius:50%;
    background:radial-gradient(circle,rgba(255,255,255,.035) 0%,transparent 65%);
    animation:smokeRise var(--dur,9s) ease-in-out infinite;
    animation-delay:var(--dly,0s);
}
.smoke-ring:nth-child(1){ width:130px;height:130px; left:8%; bottom:-65px; --dur:11s; --dly:0s; }
.smoke-ring:nth-child(2){ width:80px; height:80px;  left:62%;bottom:-40px; --dur:8s;  --dly:2.5s; }
.smoke-ring:nth-child(3){ width:170px;height:170px; left:28%;bottom:-85px; --dur:13s; --dly:5s; }
@keyframes smokeRise{
    0%  { transform:translateY(0) scale(1);   opacity:0; }
    20% { opacity:1; }
    80% { opacity:.25; }
    100%{ transform:translateY(-320px) scale(2.2); opacity:0; }
}

.hero-logo-wrap {
    position:relative; z-index:1;
    width:128px; height:128px;
    margin:0 auto 26px;
}
.hero-logo-wrap::before {
    content:''; position:absolute; inset:-14px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(201,162,96,.22) 0%,transparent 70%);
    animation:logoPulse 3.2s ease-in-out infinite;
}
@keyframes logoPulse{
    0%,100%{ transform:scale(1);   opacity:1; }
    50%    { transform:scale(1.09);opacity:.65; }
}
.hero-logo-wrap svg { width:100%; height:100%; }

.hero-content { position:relative; z-index:1; }
.hero-badge {
    display:inline-flex; align-items:center; gap:5px;
    background:rgba(201,162,96,.13);
    border:1px solid rgba(201,162,96,.38);
    border-radius:var(--r-full);
    padding:5px 14px;
    font-size:10px; font-weight:700;
    color:var(--gold-light); letter-spacing:1.8px;
    text-transform:uppercase; margin-bottom:14px;
}
.hero h1 {
    font-family:'Playfair Display',serif;
    font-size:clamp(28px,8vw,36px);
    font-weight:700; color:#fff;
    margin-bottom:10px; line-height:1.15;
}
.hero h1 .accent { color:var(--gold); }
.hero-sub {
    font-size:14px; color:rgba(255,255,255,.62);
    max-width:300px; margin:0 auto 30px; line-height:1.65;
}
.hero-btns {
    display:flex; gap:10px;
    justify-content:center; flex-wrap:wrap;
}

/* ── ANNOUNCE BANNER ────────────────────────────────────────── */
.announce-banner {
    background:linear-gradient(90deg,var(--gold) 0%,var(--gold-light) 50%,var(--gold) 100%);
    background-size:200% 100%;
    animation:goldShimmer 4s ease-in-out infinite;
    padding:11px 20px; text-align:center;
}
.announce-banner a { text-decoration:none; }
@keyframes goldShimmer{
    0%,100%{ background-position:0% 50%; }
    50%    { background-position:100% 50%; }
}
.announce-text { font-size:12.5px; font-weight:700; color:var(--deep); letter-spacing:.2px; }

/* ── QUICK ACTIONS ──────────────────────────────────────────── */
.quick-actions {
    display:grid; grid-template-columns:repeat(3,1fr);
    gap:10px; padding:18px 14px;
    background:var(--white);
    border-bottom:1px solid var(--cream-dark);
}
.qa-item {
    display:flex; flex-direction:column;
    align-items:center; gap:8px;
    padding:16px 6px;
    border-radius:var(--r-md);
    background:var(--cream);
    border:1px solid var(--gold-border);
    text-decoration:none; transition:var(--transition); cursor:pointer;
}
.qa-item:hover { background:var(--gold-pale); border-color:var(--gold); transform:translateY(-3px); box-shadow:var(--sh-md); }
.qa-icon {
    width:44px; height:44px; border-radius:50%;
    background:var(--grad-hero);
    display:flex; align-items:center; justify-content:center;
    font-size:20px; box-shadow:var(--sh-sm);
}
.qa-label { font-size:11.5px; font-weight:700; color:var(--text-1); text-align:center; }

/* ── STATS BAR ──────────────────────────────────────────────── */
.stats-bar {
    background:var(--grad-hero);
    padding:22px 16px;
    display:grid; grid-template-columns:repeat(4,1fr);
    gap:4px; position:relative; overflow:hidden;
}
.stats-bar::before {
    content:''; position:absolute; inset:0;
    background:radial-gradient(ellipse at 50% 100%,rgba(201,162,96,.1) 0%,transparent 60%);
}
.stat-item { text-align:center; position:relative; z-index:1; }
.stat-value {
    font-family:'Playfair Display',serif;
    font-size:18px; font-weight:700; color:var(--gold);
    display:block; line-height:1.1;
}
.stat-label { font-size:10px; color:rgba(255,255,255,.55); letter-spacing:.3px; margin-top:3px; }

/* ── FEATURES ───────────────────────────────────────────────── */
.features-section { padding:36px 16px; background:var(--cream); }
.features-grid {
    display:grid; grid-template-columns:1fr 1fr;
    gap:12px; margin-top:4px;
}
.feat-card {
    background:var(--white);
    border:1px solid var(--gold-border);
    border-radius:var(--r-md);
    padding:18px 14px;
    transition:var(--transition);
}
.feat-card:hover { transform:translateY(-4px); box-shadow:var(--sh-md); border-color:var(--gold); }
.feat-icon { font-size:26px; margin-bottom:10px; display:block; }
.feat-title {
    font-family:'Playfair Display',serif;
    font-size:14px; font-weight:700; color:var(--deep);
    margin-bottom:4px;
}
.feat-desc { font-size:11.5px; color:var(--text-3); line-height:1.55; }

/* ── REVIEWS ────────────────────────────────────────────────── */
.reviews-section { padding:36px 16px; background:var(--white); }
.rating-row {
    display:flex; align-items:center; justify-content:center;
    gap:8px; margin-top:6px; margin-bottom:24px;
}
.stars { color:#F5A623; font-size:16px; letter-spacing:2px; }
.rating-num {
    font-family:'Playfair Display',serif;
    font-size:22px; font-weight:700; color:var(--deep);
}
.rating-cnt { font-size:12px; color:var(--text-3); }
.reviews-list { display:flex; flex-direction:column; gap:12px; }
.review-card {
    background:var(--cream);
    border-radius:var(--r-md);
    padding:18px 18px 14px;
    border:1px solid var(--gold-border);
    box-shadow:var(--sh-xs); position:relative;
}
.review-card::after {
    content:'\201C';
    position:absolute; top:8px; right:14px;
    font-family:'Playfair Display',serif;
    font-size:56px; color:rgba(201,162,96,.13);
    line-height:1; pointer-events:none;
}
.rev-head { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.rev-avatar {
    width:38px; height:38px; border-radius:50%;
    background:var(--grad-hero);
    display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:15px; color:var(--gold); flex-shrink:0;
}
.rev-name { font-weight:700; font-size:13.5px; color:var(--text-1); }
.rev-stars { color:#F5A623; font-size:11px; letter-spacing:1px; margin-top:1px; }
.rev-text { font-size:13px; color:var(--text-2); line-height:1.6; font-style:italic; }
.rev-source {
    display:inline-flex; align-items:center; gap:4px;
    margin-top:10px; font-size:10.5px; color:var(--text-3); font-weight:500;
}

/* ── INSTAGRAM ──────────────────────────────────────────────── */
.instagram-section {
    background:var(--grad-hero);
    padding:36px 20px; text-align:center;
    position:relative; overflow:hidden;
}
.instagram-section::before {
    content:''; position:absolute; inset:0;
    background:url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='20' cy='20' r='1' fill='%23C9A260' fill-opacity='0.07'/%3E%3C/svg%3E");
    pointer-events:none;
}
.instagram-section .section-title { color:var(--gold); }
.ig-handle { font-size:15px; color:rgba(255,255,255,.7); margin:4px 0 22px; font-weight:500; }
.ig-grid {
    display:grid; grid-template-columns:repeat(3,1fr);
    gap:5px; border-radius:var(--r-sm);
    overflow:hidden; margin-bottom:22px;
}
.ig-img {
    width:100%; aspect-ratio:1; object-fit:cover;
    filter:brightness(.8); transition:var(--transition);
}
.ig-img:hover { filter:brightness(1); transform:scale(1.04); }

/* ── MENU PAGE ──────────────────────────────────────────────── */
.menu-hero {
    background:var(--grad-hero);
    margin-top:calc(-1 * var(--hdr-h));
    padding:calc(44px + var(--hdr-h)) 22px 32px;
    text-align:center; position:relative; overflow:hidden;
}
.menu-hero::before {
    content:''; position:absolute; top:-60px; right:-60px;
    width:220px; height:220px;
    background:radial-gradient(circle,rgba(201,162,96,.15) 0%,transparent 65%);
}
.menu-page-title {
    font-family:'Playfair Display',serif;
    font-size:28px; font-weight:700; color:#fff;
    position:relative; z-index:1; margin-bottom:6px;
}
.menu-page-sub { font-size:13px; color:rgba(255,255,255,.6); position:relative; z-index:1; }
.menu-price-pill {
    display:inline-flex; align-items:center; gap:5px;
    background:rgba(201,162,96,.18);
    border:1px solid rgba(201,162,96,.38);
    border-radius:var(--r-full);
    padding:5px 14px;
    font-size:11.5px; font-weight:700;
    color:var(--gold-light); margin-top:10px;
    position:relative; z-index:1;
}

/* Category Tabs */
.menu-tabs-bar {
    position:sticky; top:var(--hdr-h); z-index:100;
    background:var(--white);
    border-bottom:1px solid rgba(201,162,96,.18);
    box-shadow:var(--sh-sm);
}
.menu-tabs {
    display:flex; gap:7px;
    overflow-x:auto; scrollbar-width:none;
    -ms-overflow-style:none;
    padding:11px 14px;
}
.menu-tabs::-webkit-scrollbar { display:none; }
.menu-tab {
    flex-shrink:0; padding:8px 15px;
    border-radius:var(--r-full);
    border:1.5px solid rgba(201,162,96,.28);
    background:transparent; color:var(--text-2);
    font-size:12px; font-weight:600;
    cursor:pointer; transition:var(--transition);
    display:flex; align-items:center; gap:5px;
    white-space:nowrap;
}
.menu-tab:hover { border-color:var(--gold); color:var(--deep); background:var(--gold-pale); }
.menu-tab.active { background:var(--gold); border-color:var(--gold); color:var(--deep); box-shadow:var(--sh-gold); }

/* Menu sections */
.menu-body { padding:18px 14px 32px; }
.menu-cat { display:none; animation:fadeUp .3s ease-out; }
.menu-cat.active { display:block; }
@keyframes fadeUp{
    from{ opacity:0; transform:translateY(10px); }
    to  { opacity:1; transform:translateY(0); }
}
.cat-header {
    display:flex; align-items:center; gap:10px;
    margin-bottom:18px; padding-bottom:12px;
    border-bottom:2px solid var(--gold-border);
}
.cat-header-icon { font-size:22px; }
.cat-header-title {
    font-family:'Playfair Display',serif;
    font-size:19px; font-weight:700; color:var(--deep);
}

/* Grid items */
.items-grid {
    display:grid; grid-template-columns:1fr 1fr;
    gap:12px;
}
.item-card {
    background:var(--white);
    border-radius:var(--r-md); overflow:hidden;
    border:1px solid var(--gold-border);
    box-shadow:var(--sh-xs); transition:var(--transition);
}
.item-card:hover { transform:translateY(-4px); box-shadow:var(--sh-md); border-color:var(--gold); }
.item-img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.item-body { padding:11px; }
.item-name {
    font-family:'Playfair Display',serif;
    font-size:13px; font-weight:700; color:var(--text-1);
    margin-bottom:3px;
}
.item-desc { font-size:11px; color:var(--text-3); line-height:1.4; margin-bottom:8px; }
.item-price { font-family:'Playfair Display',serif; font-size:14px; font-weight:700; color:var(--gold); }

/* Flavors list */
.flavors-note {
    background:var(--gold-pale);
    border:1px solid var(--gold-border);
    border-radius:var(--r-sm);
    padding:12px 14px; font-size:12.5px;
    color:var(--text-2); margin-bottom:16px;
    line-height:1.55;
}
.flavors-grid {
    display:flex; flex-direction:column; gap:7px;
}
.flavor-row {
    display:flex; align-items:center;
    justify-content:space-between;
    padding:11px 14px;
    background:var(--white);
    border-radius:var(--r-sm);
    border:1px solid var(--gold-border);
    transition:var(--transition);
}
.flavor-row:hover { background:var(--gold-pale); border-color:var(--gold); }
.flavor-left { display:flex; align-items:center; gap:10px; }
.flavor-emoji { font-size:20px; width:26px; text-align:center; }
.flavor-name-tr { font-weight:700; font-size:13.5px; color:var(--text-1); }
.flavor-name-en { font-size:11px; color:var(--text-3); }
.flavor-pill {
    padding:3px 10px;
    background:var(--gold-pale);
    border:1px solid var(--gold-border);
    border-radius:var(--r-full);
    font-size:10px; font-weight:700; color:var(--gold);
    text-transform:uppercase; letter-spacing:.5px;
}

/* ── ABOUT PAGE ─────────────────────────────────────────────── */
.about-hero {
    background:var(--grad-hero);
    margin-top:calc(-1 * var(--hdr-h));
    padding:calc(52px + var(--hdr-h)) 24px 42px;
    text-align:center; position:relative; overflow:hidden;
}
.about-hero::before {
    content:''; position:absolute; inset:0;
    background:radial-gradient(ellipse at 50% 0%,rgba(201,162,96,.12) 0%,transparent 55%);
}
.about-hero-title {
    font-family:'Playfair Display',serif;
    font-size:30px; color:#fff;
    position:relative; z-index:1; margin-bottom:10px;
}
.about-hero-line {
    width:50px; height:2px; background:var(--gold);
    margin:0 auto; border-radius:2px; position:relative; z-index:1;
}

.about-story-section { padding:32px 18px; background:var(--white); }
.story-text { font-size:14px; line-height:1.85; color:var(--text-2); text-align:center; }

.info-cards { padding:0 16px 28px; display:flex; flex-direction:column; gap:10px; }
.info-card {
    background:var(--white);
    border-radius:var(--r-md); padding:17px;
    border:1px solid var(--gold-border);
    display:flex; align-items:flex-start; gap:14px;
    box-shadow:var(--sh-xs); transition:var(--transition);
}
.info-card:hover { box-shadow:var(--sh-md); border-color:var(--gold); }
.info-icon {
    width:44px; height:44px; flex-shrink:0;
    border-radius:var(--r-sm);
    background:var(--grad-hero);
    display:flex; align-items:center; justify-content:center; font-size:19px;
}
.info-content { flex:1; }
.info-label { font-size:10.5px; font-weight:700; color:var(--text-3); text-transform:uppercase; letter-spacing:1px; margin-bottom:3px; }
.info-value { font-size:13.5px; font-weight:500; color:var(--text-1); line-height:1.5; }
.info-value a { color:var(--sapphire); }

.map-section { padding:0 16px 28px; }
.map-frame {
    border-radius:var(--r-md); overflow:hidden;
    border:2px solid var(--gold-border);
    box-shadow:var(--sh-md); height:230px;
}
.map-frame iframe { width:100%; height:100%; border:none; display:block; }

.services-section { padding:28px 16px; background:var(--white); }
.services-grid {
    display:grid; grid-template-columns:repeat(3,1fr);
    gap:10px; margin-top:14px;
}
.svc-badge {
    display:flex; flex-direction:column;
    align-items:center; gap:6px;
    padding:13px 6px;
    background:var(--cream);
    border-radius:var(--r-sm);
    border:1px solid var(--gold-border);
    transition:var(--transition); text-align:center;
}
.svc-badge:hover { background:var(--gold-pale); border-color:var(--gold); }
.svc-icon { font-size:22px; }
.svc-label { font-size:10.5px; font-weight:700; color:var(--text-2); }

.payment-section { padding:28px 16px; }
.payment-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; justify-content:center; }
.pay-badge {
    display:flex; align-items:center; gap:6px;
    padding:8px 14px;
    background:var(--white);
    border:1px solid var(--gold-border);
    border-radius:var(--r-sm);
    font-size:12.5px; font-weight:600; color:var(--text-2);
}

/* ── CONTACT PAGE ───────────────────────────────────────────── */
.contact-hero {
    background:var(--grad-hero);
    margin-top:calc(-1 * var(--hdr-h));
    padding:calc(52px + var(--hdr-h)) 24px 40px;
    text-align:center; position:relative; overflow:hidden;
}
.contact-hero::before {
    content:''; position:absolute; inset:0;
    background:radial-gradient(ellipse at 50% 0%,rgba(201,162,96,.12) 0%,transparent 55%);
}
.contact-hero-title {
    font-family:'Playfair Display',serif;
    font-size:28px; color:#fff;
    position:relative; z-index:1; margin-bottom:6px;
}
.contact-hero-sub { font-size:13px; color:rgba(255,255,255,.6); position:relative; z-index:1; }

.contact-form-section { padding:28px 16px; background:var(--white); }
.form-title {
    font-family:'Playfair Display',serif;
    font-size:18px; font-weight:700; color:var(--deep);
    margin-bottom:20px;
}
.contact-form { display:flex; flex-direction:column; gap:14px; }
.form-group { display:flex; flex-direction:column; gap:5px; }
.form-label { font-size:11px; font-weight:700; color:var(--text-3); text-transform:uppercase; letter-spacing:.8px; }
.form-input,
.form-textarea {
    padding:13px 15px;
    border:1.5px solid rgba(201,162,96,.3);
    border-radius:var(--r-sm);
    font-size:14px; font-family:'Inter',sans-serif;
    color:var(--text-1); background:var(--cream);
    transition:var(--transition); outline:none; width:100%;
}
.form-input:focus,
.form-textarea:focus {
    border-color:var(--gold);
    background:var(--white);
    box-shadow:0 0 0 3px rgba(201,162,96,.12);
}
.form-input::placeholder,
.form-textarea::placeholder { color:var(--text-3); }
.form-textarea { resize:vertical; min-height:115px; line-height:1.6; }

.contact-channels { padding:8px 16px 28px; }
.channel-title {
    font-family:'Playfair Display',serif;
    font-size:17px; font-weight:700; color:var(--deep);
    margin-bottom:14px;
}
.channel-item {
    display:flex; align-items:center; gap:13px;
    padding:15px 16px;
    background:var(--cream);
    border-radius:var(--r-md);
    border:1px solid var(--gold-border);
    text-decoration:none;
    transition:var(--transition);
    box-shadow:var(--sh-xs); margin-bottom:9px;
}
.channel-item:hover { border-color:var(--gold); box-shadow:var(--sh-md); transform:translateX(4px); }
.channel-icon {
    width:42px; height:42px;
    border-radius:var(--r-sm);
    display:flex; align-items:center; justify-content:center;
    font-size:19px; flex-shrink:0;
}
.ch-phone     { background:linear-gradient(135deg,#0B2D59,#1A4D9E); }
.ch-whatsapp  { background:linear-gradient(135deg,#128C7E,#25D366); }
.ch-instagram { background:linear-gradient(135deg,#405DE6,#E1306C); }
.ch-location  { background:linear-gradient(135deg,var(--mid),var(--gold)); }
.channel-text strong { display:block; font-size:13px; font-weight:700; color:var(--text-1); margin-bottom:1px; }
.channel-text span   { font-size:11.5px; color:var(--text-3); }

/* ── FOOTER ─────────────────────────────────────────────────── */
.site-footer {
    background:var(--deep); color:rgba(255,255,255,.8);
    padding:36px 18px 22px; position:relative; overflow:hidden;
}
.site-footer::before {
    content:''; position:absolute; top:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg,var(--mid),var(--gold),var(--mid));
}
.footer-top { text-align:center; margin-bottom:28px; }
.footer-logo-svg { width:72px; height:72px; margin:0 auto 10px; }
.footer-tagline { font-size:12.5px; color:rgba(255,255,255,.45); font-style:italic; margin-top:2px; }
.footer-grid {
    display:grid; grid-template-columns:1fr 1fr;
    gap:24px; margin-bottom:26px;
}
.footer-col-title {
    font-family:'Playfair Display',serif;
    font-size:13.5px; font-weight:700; color:var(--gold);
    margin-bottom:12px; letter-spacing:.4px;
}
.footer-links { display:flex; flex-direction:column; gap:8px; }
.footer-links a {
    font-size:12.5px; color:rgba(255,255,255,.6);
    transition:var(--transition);
    display:flex; align-items:center; gap:6px;
}
.footer-links a:hover { color:var(--gold); transform:translateX(3px); }
.footer-info-row {
    display:flex; align-items:flex-start; gap:8px;
    margin-bottom:9px; font-size:12px;
    color:rgba(255,255,255,.6); line-height:1.5;
}
.footer-divider { border:none; border-top:1px solid rgba(255,255,255,.08); margin:18px 0; }
.footer-social { display:flex; justify-content:center; gap:10px; margin-bottom:16px; }
.social-link {
    width:38px; height:38px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:17px;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.1);
    color:rgba(255,255,255,.8); text-decoration:none;
    transition:var(--transition);
}
.social-link:hover { background:rgba(201,162,96,.2); border-color:var(--gold); color:var(--gold); transform:translateY(-3px); }
.footer-bottom { text-align:center; font-size:11px; color:rgba(255,255,255,.3); letter-spacing:.3px; }

/* ── WHATSAPP FLOAT ─────────────────────────────────────────── */
.wa-float {
    position:fixed; bottom:22px; right:22px; z-index:500;
    width:54px; height:54px; border-radius:50%;
    background:#25D366; color:#fff; font-size:26px;
    display:flex; align-items:center; justify-content:center;
    text-decoration:none;
    box-shadow:0 6px 24px rgba(37,211,102,.42);
    animation:waBounce 3s ease-in-out infinite;
    transition:var(--transition);
}
.wa-float:hover { transform:scale(1.12); box-shadow:0 8px 32px rgba(37,211,102,.55); animation:none; }
@media (min-width:520px){
    .wa-float{
        right:max(22px,calc((100vw - var(--max-w))/2 + 22px));
    }
}
@keyframes waBounce{
    0%,100%{ transform:translateY(0); }
    50%    { transform:translateY(-7px); }
}

/* ── GOLD DIVIDER ───────────────────────────────────────────── */
.gold-divider {
    display:flex; align-items:center; gap:10px; margin-bottom:22px;
}
.gold-divider::before,
.gold-divider::after { content:''; flex:1; height:1px; background:var(--gold-border); }
.gold-divider-dot { color:var(--gold); font-size:14px; }

/* ── SCROLL ANIMATIONS ──────────────────────────────────────── */
.fade-up { opacity:0; transform:translateY(22px); transition:opacity .55s ease,transform .55s ease; }
.fade-up.visible { opacity:1; transform:translateY(0); }
.page-fade { animation:pageIn .4s ease-out; }
@keyframes pageIn{ from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }

/* ── BACK TO TOP ────────────────────────────────────────────── */
#backToTop {
    display:flex; align-items:center; justify-content:center; gap:6px;
    width:100%; padding:12px;
    color:rgba(255,255,255,.4); font-size:12px; cursor:pointer;
    border:none; background:transparent; font-family:inherit;
    transition:var(--transition);
}
#backToTop:hover { color:var(--gold); }

/* ── PAGE TITLE BAR (utility) ───────────────────────────────── */
.page-title-bar {
    background:var(--white); padding:20px 18px 0;
    border-bottom:1px solid var(--cream-dark);
}

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width:360px){
    .hero h1    { font-size:24px; }
    .hero-logo-wrap { width:108px; height:108px; }
    .items-grid { grid-template-columns:1fr; }
    .features-grid { grid-template-columns:1fr; }
    .stats-bar  { grid-template-columns:repeat(2,1fr); gap:12px; padding:18px; }
}
@media (min-width:400px){
    .hero { padding:60px 28px 54px; }
}

/* Desktop layout: keep mobile intact, widen only for large screens */
@media (min-width:1024px){
    :root{
        --max-w:100%;
    }

    .site-wrapper{
        border-left:none;
        border-right:none;
        box-shadow:none;
    }

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

    .features-grid{
        grid-template-columns:repeat(4,minmax(0,1fr));
    }

    .wa-float{
        right:22px;
    }

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

    .footer-grid > div:last-child{
        justify-self:end;
    }
}

/* ── SECTION PADDING HELPER ─────────────────────────────────── */
.section-pad { padding:32px 16px; }
.section-pad-white { padding:32px 16px; background:var(--white); }