@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Montserrat:wght@300;400;500;600&display=swap');

:root{
    --black:#050505;
    --black-2:#101010;
    --black-3:#171717;
    --gold:#c9953e;
    --gold-light:#e8c477;
    --gold-dark:#8f6327;
    --cream:#f5f0e6;
    --muted:#b9b0a2;
    --border:rgba(201,149,62,.32);
}

*{box-sizing:border-box}
body{
    margin:0;
    background:var(--black);
    color:var(--cream);
    font-family:Montserrat,Arial,sans-serif;
}
a{color:inherit;text-decoration:none}
.container{width:min(1180px,92%);margin:auto}
.topbar{
    background:#000;
    border-bottom:1px solid var(--border);
    color:var(--muted);
    font-size:12px;
    padding:8px 0;
}
.header{
    background:linear-gradient(180deg,#080808,#111);
    border-bottom:1px solid var(--border);
}
.header-main{
    min-height:118px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
}
.logo{
    width:135px;
    height:90px;
    object-fit:contain;
    background:#050505;
}
.search{
    flex:1;
    max-width:520px;
    display:flex;
}
.search input{
    flex:1;
    background:#171717;
    color:#fff;
    border:1px solid var(--border);
    border-right:0;
    padding:14px 16px;
    outline:none;
}
.search button,.btn{
    background:linear-gradient(135deg,var(--gold-light),var(--gold-dark));
    color:#050505;
    border:0;
    padding:13px 20px;
    font-weight:700;
    cursor:pointer;
}
.header-actions{display:flex;gap:18px;font-size:13px}
.header-actions span{display:block;color:var(--gold-light);font-size:11px;margin-bottom:3px}
.nav{
    border-top:1px solid rgba(201,149,62,.15);
    border-bottom:1px solid var(--border);
}
.nav ul{
    margin:0;padding:0;list-style:none;display:flex;justify-content:center;gap:30px;
}
.nav a{
    display:block;padding:15px 0;font-family:Cinzel,serif;font-size:13px;letter-spacing:.08em;
}
.nav a:hover{color:var(--gold-light)}
.hero{
    min-height:440px;
    display:flex;
    align-items:center;
    background:
      radial-gradient(circle at 70% 50%,rgba(201,149,62,.12),transparent 35%),
      linear-gradient(90deg,#050505 35%,rgba(5,5,5,.65)),
      url('../images/logo-casa-de-oya.jpeg') center/cover no-repeat;
    border-bottom:1px solid var(--border);
}
.hero-content{max-width:560px;padding:55px 0}
.eyebrow{color:var(--gold-light);font-family:Cinzel,serif;letter-spacing:.18em;font-size:13px}
h1,h2,h3{font-family:Cinzel,serif;font-weight:500}
.hero h1{font-size:48px;line-height:1.1;margin:15px 0}
.hero p{color:var(--muted);line-height:1.8}
.section{padding:55px 0}
.section-title{text-align:center;margin-bottom:32px}
.section-title h2{font-size:30px;margin:0 0 10px}
.section-title p{color:var(--muted);font-size:13px}
.categories,.products{display:grid;gap:18px}
.categories{grid-template-columns:repeat(5,1fr)}
.category{
    border:1px solid var(--border);
    background:linear-gradient(145deg,#111,#080808);
    padding:30px 15px;text-align:center;
    transition:.2s;
}
.category:hover{transform:translateY(-3px);border-color:var(--gold)}
.category-icon{font-size:27px;color:var(--gold-light);margin-bottom:12px}
.category h3{font-size:14px;margin:0}
.products{grid-template-columns:repeat(4,1fr)}
.product{
    background:#0d0d0d;
    border:1px solid rgba(201,149,62,.22);
    overflow:hidden;
}
.product-image{
    height:245px;
    background:#151515;
    display:flex;align-items:center;justify-content:center;
}
.product-image img{width:100%;height:100%;object-fit:cover}
.product-info{padding:17px}
.product-name{font-family:Cinzel,serif;font-size:15px;min-height:42px}
.price{color:var(--gold-light);font-size:19px;font-weight:600;margin:12px 0}
.features{
    display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);
    border-top:1px solid var(--border);border-bottom:1px solid var(--border);
}
.feature{background:#0b0b0b;padding:25px;text-align:center}
.feature strong{display:block;color:var(--gold-light);font-family:Cinzel,serif;margin-bottom:6px}
.feature small{color:var(--muted)}
.footer{background:#080808;border-top:1px solid var(--border);padding:45px 0 20px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:35px}
.footer h3{color:var(--gold-light);font-size:15px}
.footer p,.footer li{color:var(--muted);font-size:13px;line-height:1.8}
.footer ul{list-style:none;padding:0}
.copyright{border-top:1px solid rgba(201,149,62,.15);margin-top:30px;padding-top:18px;color:#777;font-size:11px;text-align:center}
.whatsapp{
    position:fixed;right:20px;bottom:20px;background:#25d366;color:#fff;
    width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-size:23px;
    box-shadow:0 8px 25px #000;
}
@media(max-width:900px){
    .header-main{flex-wrap:wrap;padding:15px 0}
    .search{order:3;max-width:none;flex-basis:100%}
    .nav ul{overflow:auto;justify-content:flex-start;padding:0 4%}
    .categories{grid-template-columns:repeat(2,1fr)}
    .products{grid-template-columns:repeat(2,1fr)}
    .features{grid-template-columns:repeat(2,1fr)}
    .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
    .hero{min-height:520px}
    .hero h1{font-size:35px}
    .products{grid-template-columns:1fr 1fr;gap:10px}
    .product-image{height:180px}
    .header-actions{width:100%;justify-content:space-between}
    .footer-grid{grid-template-columns:1fr}
}


/* ===== Etapa 6: checkout / admin ===== */
.payment-page { padding: 55px 0 90px; }
.payment-grid { max-width: 900px; margin: 0 auto; }
.checkout-card, .admin-card { background:#111; border:1px solid rgba(201,149,62,.22); border-radius:18px; padding:28px; box-shadow:0 16px 50px rgba(0,0,0,.18); }
.pix-area { margin-top:25px; text-align:center; padding:25px; border:1px solid rgba(201,149,62,.35); border-radius:15px; }
.pix-qr { display:block; width:260px; max-width:100%; margin:18px auto; background:#fff; padding:10px; border-radius:10px; }
#pix-copy { width:100%; min-height:95px; background:#050505; color:#e8c477; border:1px solid #8f6327; border-radius:10px; padding:12px; }
.notice { margin:18px 0; padding:15px 18px; background:rgba(201,149,62,.08); border:1px solid rgba(201,149,62,.25); border-radius:10px; color:#e8c477; }
.muted { color:#b9b0a2; }
.payment-success { max-width:700px; margin:40px auto; padding:35px; text-align:center; background:#111; border:1px solid rgba(201,149,62,.3); border-radius:18px; }

.admin-body { background:#070707; color:#f5f0e6; min-height:100vh; }
.admin-top { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 30px; border-bottom:1px solid rgba(201,149,62,.2); background:#0d0d0d; }
.admin-brand { color:#e8c477; text-decoration:none; font-family:Cinzel,serif; letter-spacing:1px; }
.admin-brand small { display:block; font-family:Montserrat,sans-serif; font-size:9px; letter-spacing:3px; }
.admin-top nav { display:flex; gap:16px; flex-wrap:wrap; }
.admin-top nav a { color:#f5f0e6; text-decoration:none; font-size:13px; }
.admin-main { max-width:1250px; margin:0 auto; padding:35px 22px 70px; }
.admin-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:25px; }
.admin-heading h1 { margin:4px 0 0; }
.admin-card { margin-bottom:22px; }
.admin-form { display:grid; gap:22px; }
.admin-form label { display:grid; gap:8px; color:#e8c477; font-size:13px; }
.admin-form input,.admin-form select,.admin-form textarea { width:100%; box-sizing:border-box; padding:12px 13px; background:#050505; color:#f5f0e6; border:1px solid #44351f; border-radius:8px; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.table-wrap { overflow:auto; }
.admin-table { width:100%; border-collapse:collapse; min-width:750px; }
.admin-table th,.admin-table td { padding:12px 10px; border-bottom:1px solid rgba(255,255,255,.08); text-align:left; }
.admin-table th { color:#e8c477; font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.alert.success { padding:14px; border:1px solid #597b45; background:rgba(89,123,69,.12); color:#cde7bb; border-radius:10px; margin-bottom:20px; }
@media(max-width:760px){ .admin-top{align-items:flex-start; flex-direction:column}.form-grid{grid-template-columns:1fr}.admin-main{padding:25px 14px} }

/* ===== Etapa 11 — vitrine profissional ===== */
.topbar-inner{display:flex;justify-content:space-between;gap:20px}
.brand-logo{display:flex;align-items:center}
.cart-count{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;margin-left:4px;border-radius:99px;background:var(--gold);color:#050505;font-size:10px}
.banner-slider{background:#050505;border-bottom:1px solid var(--border)}
.banner-track{position:relative;overflow:hidden;min-height:430px}
.banner-slide{display:none;position:relative;height:430px;overflow:hidden}
.banner-slide.active{display:block}
.banner-slide img{width:100%;height:100%;object-fit:cover;filter:saturate(.85)}
.banner-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:50px;max-width:680px;background:linear-gradient(90deg,rgba(5,5,5,.94),rgba(5,5,5,.35),transparent)}
.banner-overlay h1{font-size:44px;line-height:1.1;margin:12px 0}.banner-overlay p{color:#ddd;line-height:1.7;max-width:520px}
.category img{width:100%;height:100px;object-fit:cover;margin-bottom:14px}.category-large{min-height:220px}.category-large p{color:var(--muted);font-size:12px;line-height:1.6}
.products-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.product-card{background:#0d0d0d;border:1px solid rgba(201,149,62,.2);transition:.22s;position:relative}.product-card:hover{transform:translateY(-4px);border-color:var(--gold)}
.product-card-link{display:block}.product-card-image{height:280px;background:#131313;position:relative;display:grid;place-items:center;overflow:hidden}.product-card-image img{width:100%;height:100%;object-fit:cover;transition:transform .3s}.product-card:hover img{transform:scale(1.035)}
.product-placeholder{font:16px Cinzel;color:var(--gold-dark);letter-spacing:.1em}.product-badge{position:absolute;top:12px;left:12px;background:var(--gold-light);color:#080808;padding:6px 9px;font-size:9px;font-weight:700;letter-spacing:.08em}.product-badge.new{left:auto;right:12px;background:#151515;color:var(--gold-light);border:1px solid var(--gold-dark)}
.product-card-info{padding:17px}.product-category{display:block;color:var(--gold-dark);font-size:10px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:7px}.product-card-info h3{font-size:16px;line-height:1.35;margin:0;min-height:44px}.product-old-price{color:#777;text-decoration:line-through;font-size:12px;margin-top:10px}.product-price{font-size:21px;color:var(--gold-light);font-weight:600;margin:5px 0 10px}.product-link{font-size:10px;letter-spacing:.08em;color:#aaa}.section-dark{background:#090909}.empty-state{grid-column:1/-1;padding:45px;text-align:center;color:var(--muted);border:1px dashed rgba(201,149,62,.25)}
.benefits{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:#0b0b0b}.benefits-grid{display:grid;grid-template-columns:repeat(4,1fr)}.benefits-grid>div{padding:28px 18px;text-align:center;border-right:1px solid rgba(201,149,62,.12)}.benefits-grid>div:last-child{border-right:0}.benefits-grid b{display:block;color:var(--gold-light);font:13px Cinzel;margin-bottom:7px}.benefits-grid span{display:block;color:var(--muted);font-size:11px;line-height:1.5}
.catalog-hero{padding:65px 0 55px;background:radial-gradient(circle at 75% 50%,rgba(201,149,62,.13),transparent 35%),#080808;border-bottom:1px solid var(--border)}.catalog-hero h1{font-size:42px;margin:12px 0}.catalog-hero p{margin:0;color:var(--muted);max-width:650px;line-height:1.7}.catalog-toolbar{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:24px;color:var(--muted);font-size:13px}.catalog-toolbar a{color:var(--gold-light)}
.content-page{max-width:850px}.content-page h2{color:var(--gold-light);margin-top:30px}.content-page p{color:var(--muted);line-height:1.9}.content-highlight{margin-top:35px;padding:30px;border:1px solid var(--border);background:#0d0d0d;display:flex;flex-direction:column;gap:8px}.content-highlight strong{font:24px Cinzel;color:var(--gold-light)}.content-highlight span{color:var(--muted)}
.contact-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:25px}.contact-card{border:1px solid var(--border);padding:35px;background:#0d0d0d}.contact-card h2{font-size:28px}.contact-card p{color:var(--muted);line-height:1.7}.tracking-wrap{max-width:900px}.tracking-form{display:grid;grid-template-columns:1fr 35px 1fr auto;gap:12px;align-items:end;background:#0d0d0d;border:1px solid var(--border);padding:25px}.tracking-form label{color:var(--gold-light);font-size:12px}.tracking-form input{display:block;width:100%;margin-top:8px;background:#151515;border:1px solid var(--border);color:#fff;padding:13px}.tracking-form .or{color:#777;text-align:center;padding-bottom:12px}.tracking-result{margin-top:25px;padding:28px;background:#0d0d0d;border:1px solid var(--border)}.tracking-head{display:flex;justify-content:space-between;gap:20px;align-items:center}.tracking-head h2{margin:7px 0}.status-pill{display:inline-block;padding:8px 12px;border:1px solid var(--gold-dark);color:var(--gold-light);font-size:11px;text-transform:uppercase}.timeline{margin-top:25px;border-left:1px solid var(--gold-dark);padding-left:25px}.timeline-item{position:relative;padding-bottom:22px}.timeline-item>span{position:absolute;left:-31px;top:2px;width:11px;height:11px;border-radius:50%;background:var(--gold)}.timeline-item strong{color:var(--gold-light);font-size:13px}.timeline-item p{margin:5px 0;color:var(--muted);font-size:13px}.timeline-item small{color:#777}.notice.error{color:#ffb1b1;border-color:rgba(255,120,120,.3)}
@media(max-width:1000px){.products-grid{grid-template-columns:repeat(3,1fr)}.benefits-grid{grid-template-columns:repeat(2,1fr)}.contact-grid{grid-template-columns:1fr}.tracking-form{grid-template-columns:1fr 25px 1fr}.tracking-form .btn{grid-column:1/-1}}
@media(max-width:700px){.topbar-inner{justify-content:center}.topbar-inner span:last-child{display:none}.banner-track,.banner-slide{min-height:390px;height:390px}.banner-overlay{padding:30px}.banner-overlay h1{font-size:32px}.products-grid{grid-template-columns:repeat(2,1fr);gap:10px}.product-card-image{height:210px}.benefits-grid{grid-template-columns:1fr}.benefits-grid>div{border-right:0;border-bottom:1px solid rgba(201,149,62,.12)}.catalog-hero{padding:45px 0}.catalog-hero h1{font-size:34px}.tracking-form{grid-template-columns:1fr}.tracking-form .or{padding:0}.tracking-head{align-items:flex-start;flex-direction:column}}


/* ===== Etapa 12 — experiência responsiva para celular e tablet ===== */
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body { overflow-wrap:anywhere; }
img, video, iframe { max-width:100%; }
input, select, textarea, button { font:inherit; }
button, .btn, input, select, textarea { min-height:44px; }
input, select, textarea { max-width:100%; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:2px solid var(--gold-light); outline-offset:3px; }
.mobile-menu-toggle, .admin-menu-toggle { display:none; }

/* Evita que campos e tabelas ultrapassem a largura do celular. */
.admin-main, .admin-page, .admin-card, .checkout-card, .content-page, .contact-card { min-width:0; }
.admin-table { min-width:680px; }
.table-wrap { max-width:100%; -webkit-overflow-scrolling:touch; }
.admin-form .btn, .admin-form button, .checkout-card button, .checkout-card .btn { max-width:100%; }

@media (max-width: 760px) {
  .container { width:min(100% - 28px, 1180px); }
  .topbar { font-size:10px; text-align:center; padding:8px 0; }
  .topbar-inner { gap:6px; }
  .header-main { min-height:0; display:grid; grid-template-columns:72px minmax(0,1fr); gap:12px; padding:12px 0; }
  .brand-logo { grid-column:1; grid-row:1; }
  .logo { width:72px; height:65px; }
  .header-actions { grid-column:2; grid-row:1; width:auto; gap:10px; justify-content:flex-end; align-items:center; font-size:12px; }
  .header-actions a { display:block; padding:8px 5px; text-align:center; }
  .header-actions span { font-size:9px; }
  .search { grid-column:1 / -1; grid-row:2; display:flex; width:100%; max-width:none; }
  .search input { width:0; min-width:0; padding:12px; }
  .search button { padding:10px 12px; font-size:11px; }
  .nav { border-bottom:1px solid var(--border); }
  .mobile-menu-toggle { display:flex; width:100%; align-items:center; justify-content:flex-start; gap:10px; padding:12px 0; border:0; background:transparent; color:var(--gold-light); font-family:Cinzel,serif; letter-spacing:.12em; text-align:left; }
  .mobile-menu-icon { font-size:20px; line-height:1; }
  .nav ul { display:none; flex-direction:column; gap:0; padding:0 0 10px; overflow:visible; }
  .nav ul.is-open { display:flex; }
  .nav li { border-top:1px solid rgba(201,149,62,.12); }
  .nav a { padding:13px 5px; font-size:12px; }
  .hero { min-height:410px; background-position:60% center; }
  .hero-content { padding:38px 0; }
  .hero h1 { font-size:clamp(29px,8vw,38px); }
  .section { padding:38px 0; }
  .section-title h2 { font-size:25px; }
  .categories { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .category { padding:20px 10px; min-width:0; }
  .category-large { min-height:0; }
  .category img { height:85px; }
  .products, .products-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .product-image { height:clamp(130px,42vw,200px); }
  .product-card-image { height:clamp(140px,44vw,210px); }
  .product-info, .product-card-info { padding:11px; }
  .product-name, .product-card-info h3 { font-size:13px; min-height:0; line-height:1.4; }
  .price, .product-price { font-size:17px; }
  .product-badge { top:7px; left:7px; padding:5px 6px; font-size:8px; }
  .product-badge.new { right:7px; }
  .features, .benefits-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .feature { padding:18px 10px; }
  .benefits-grid>div { padding:20px 12px; }
  .footer { padding:32px 0 18px; }
  .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
  .footer-brand { grid-column:1 / -1; }
  .banner-track, .banner-slide { min-height:350px; height:350px; }
  .banner-overlay { padding:22px; max-width:100%; width:100%; background:linear-gradient(90deg,rgba(5,5,5,.94),rgba(5,5,5,.6)); }
  .banner-overlay h1 { font-size:clamp(27px,7vw,34px); }
  .banner-overlay p { font-size:13px; }
  .catalog-hero { padding:38px 0; }
  .catalog-hero h1 { font-size:32px; }
  .catalog-toolbar { align-items:flex-start; flex-direction:column; gap:10px; }
  .contact-grid { grid-template-columns:minmax(0,1fr); }
  .contact-card { padding:22px; }
  .tracking-form { grid-template-columns:minmax(0,1fr); padding:16px; gap:12px; }
  .tracking-form .or { padding:0; }
  .tracking-form .btn { grid-column:auto; width:100%; }
  .tracking-head { flex-direction:column; align-items:flex-start; }
  .tracking-result { padding:18px; }
  .payment-page { padding:30px 0 55px; }
  .checkout-card, .admin-card { padding:18px; border-radius:12px; }
  .pix-area { padding:15px; }
  #paymentBrick_container { width:100%; min-width:0; }
  .form-grid { grid-template-columns:minmax(0,1fr); }
  .admin-top { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; padding:14px; gap:12px; }
  .admin-brand { font-size:13px; }
  .admin-menu-toggle { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:42px; padding:9px 12px; background:#171717; border:1px solid var(--border); color:var(--gold-light); border-radius:8px; }
  .admin-top nav { display:none; grid-column:1 / -1; width:100%; flex-direction:column; gap:0; }
  .admin-top nav.is-open { display:flex; }
  .admin-top nav a { padding:13px 10px; border-top:1px solid rgba(201,149,62,.14); font-size:14px; }
  .admin-main { padding:22px 12px 45px; }
  .admin-heading { align-items:flex-start; flex-direction:column; gap:12px; }
  .admin-heading h1 { font-size:27px; }
  .admin-card { overflow:hidden; }
  .admin-form { gap:14px; }
  .admin-form label { font-size:12px; }
  .admin-form input, .admin-form select, .admin-form textarea { font-size:16px; padding:12px; }
  .admin-table { min-width:620px; font-size:12px; }
  .admin-table th, .admin-table td { padding:10px 8px; }
  .admin-main .btn, .admin-main button { max-width:100%; }
}

@media (max-width: 380px) {
  .container { width:calc(100% - 22px); }
  .header-main { grid-template-columns:60px minmax(0,1fr); gap:8px; }
  .logo { width:60px; height:58px; }
  .header-actions { gap:4px; font-size:11px; }
  .search button { padding:9px; font-size:10px; }
  .products-grid, .products { gap:8px; }
  .product-card-info { padding:9px; }
  .product-price { font-size:16px; }
  .footer-grid { grid-template-columns:minmax(0,1fr); }
  .footer-brand { grid-column:auto; }
}