/* =====================================================================
   REALPROMO — GLOBAL.CSS  (realpromo.get4real.com)
   Tokens de design + componentes compartilhados por todas as páginas.

   Tema escuro único. A cor de ação é o amarelo "etiqueta de promoção"
   (--color-primary). Verde fica reservado para economia/sucesso.
   Campanhas podem sobrescrever só as cores de ação com
   <html data-campaign="esquenta">.
   ===================================================================== */

/* `hidden` sempre vence, mesmo quando a classe define display:flex. */
[hidden] { display: none !important; }

:root{
  color-scheme: dark;

  /* ---- Estrutura ---- */
  --color-background: #060607;
  --color-surface: #101012;
  --color-surface-alt: #17171A;
  --color-surface-raised: #1E1E22;
  --color-border: rgba(255,255,255,0.08);
  --color-border-strong: rgba(255,255,255,0.18);
  --color-text: #F4F4F0;
  --color-text-dim: #A3A3AB;
  --color-text-faint: #6E6E77;

  /* ---- Funcionais ---- */
  --color-success: #3DDC97;
  --color-success-soft: rgba(61,220,151,0.12);
  --color-warning: #FFB547;
  --color-danger: #FF5C61;
  --color-danger-soft: rgba(255,92,97,0.12);
  --color-info: #8B9BFF;
  --color-info-soft: rgba(139,155,255,0.12);

  /* ---- Ação (amarelo etiqueta) ---- */
  --color-primary: #FFD23F;
  --color-primary-dark: #FFD23F;   /* usado como "texto de destaque" no tema escuro */
  --color-on-primary: #0A0A0B;
  --color-accent: #FFD23F;
  --color-on-accent: #0A0A0B;
  --color-accent-soft: rgba(255,210,63,0.10);
  --color-accent-line: rgba(255,210,63,0.35);
  --color-badge-discount-bg: var(--color-primary);
  --color-badge-discount-text: var(--color-on-primary);
  --gradient-campaign: linear-gradient(135deg, #FFD23F, #FF9F1C);
  --shadow-glow: rgba(255,210,63,0.22);

  /* ---- Vidro ---- */
  --glass-bg: rgba(255,255,255,0.045);
  --glass-border: rgba(255,255,255,0.11);
  --glass-blur: blur(22px) saturate(140%);

  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 24px;
  --radius-pill: 999px;

  --font-display: 'Unbounded', 'Geist', system-ui, sans-serif;
  --font-body: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --announce-h: 36px;
  --header-h: 68px;
  --ease: cubic-bezier(.22,1,.36,1);
}

/* ---- Campanha ESQUENTA: só as cores de ação mudam ---- */
[data-campaign="esquenta"]{
  --color-primary: #FF3B47;
  --color-primary-dark: #FF6B73;
  --color-on-primary: #FFFFFF;
  --color-accent: #FF3B47;
  --color-on-accent: #FFFFFF;
  --color-accent-soft: rgba(255,59,71,0.12);
  --color-accent-line: rgba(255,59,71,0.4);
  --gradient-campaign: linear-gradient(135deg, #FF3B47, #8C0F1E);
  --shadow-glow: rgba(255,59,71,0.3);
}

*,*::before,*::after{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px);}

/* Troca suave entre páginas do site (Chrome/Edge; nos outros a troca é normal).
   O header tem nome próprio, então fica parado enquanto o conteúdo faz o fade. */
@view-transition{ navigation:auto; }
::view-transition-old(root){animation:pageOut .18s var(--ease) both;}
::view-transition-new(root){animation:pageIn .32s var(--ease) both;}
@keyframes pageOut{to{opacity:0;}}
@keyframes pageIn{from{opacity:0; transform:translate3d(0,8px,0);}}
.site-header{view-transition-name:site-header;}
@media (prefers-reduced-motion: reduce){ @view-transition{ navigation:none; } }
body{
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  background: var(--color-background);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  padding-bottom: 78px;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit;}
input, select, textarea{font-family:inherit; color:inherit;}
ul{list-style:none;}
.container{width:100%; max-width:1240px; margin:0 auto; padding:0 20px;}
::selection{background:var(--color-primary); color:var(--color-on-primary);}

.material-symbols-outlined{
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 22;
  line-height:1; user-select:none;
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--color-primary); outline-offset:3px; border-radius:6px;
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
  html{scroll-behavior:auto;}
}
.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;}

/* ===================== LOGO ===================== */
.logo{display:inline-flex; align-items:center; gap:9px; flex-shrink:0; color:var(--color-text);}
.logo-mark{width:30px; height:30px; flex-shrink:0;}
.logo-word{font-family:var(--font-display); font-size:19px; letter-spacing:-0.6px; line-height:1;}
.logo-word b{font-weight:700;}
.logo-word span{font-weight:300;}
.logo-by{display:block; font-family:var(--font-body); font-size:10.5px; color:var(--color-text-faint); letter-spacing:0; margin-top:3px; font-weight:500;}
.logo-img{height:30px; width:auto; display:block;}

/* ===================== ANNOUNCEMENT BAR ===================== */
.announce{
  height:var(--announce-h); background:var(--color-primary); color:var(--color-on-primary);
  display:flex; align-items:center; justify-content:center; gap:14px;
  font-size:12.5px; font-weight:600; position:relative; z-index:101; overflow:hidden;
}
.announce a{display:inline-flex; align-items:center; gap:6px;}
.announce .material-symbols-outlined{font-size:16px;}
.announce-msg{transition:opacity .35s var(--ease), transform .35s var(--ease); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:86vw;}
.announce-msg.is-out{opacity:0; transform:translateY(-6px);}

/* ===================== HEADER ===================== */
.site-header{
  position:sticky; top:0; z-index:100; height:var(--header-h);
  display:flex; align-items:center;
  background: rgba(6,6,7,0.72);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom:1px solid var(--color-border);
}
.header-inner{display:flex; align-items:center; width:100%; gap:14px;}

.nav-links{display:none; align-items:center; gap:4px; margin-left:28px;}
.nav-links a{
  font-size:14px; font-weight:500; color:var(--color-text-dim);
  padding:8px 14px; border-radius:var(--radius-pill); transition:color .2s, background .2s;
}
.nav-links a:hover{color:var(--color-text); background:rgba(255,255,255,0.06);}
.nav-links a.active{color:var(--color-text); background:rgba(255,255,255,0.08);}

.header-actions{display:flex; align-items:center; gap:8px; margin-left:auto;}
.icon-btn{
  width:40px; height:40px; border-radius:50%; position:relative;
  display:flex; align-items:center; justify-content:center;
  background:transparent; color:var(--color-text-dim);
  border:1px solid var(--color-border);
  transition: border-color .2s, color .2s, background .2s, transform .15s;
}
.icon-btn .material-symbols-outlined{font-size:20px;}
.icon-btn:hover{border-color:var(--color-border-strong); color:var(--color-text); background:rgba(255,255,255,0.05);}
.icon-btn:active{transform:scale(0.94);}

/* ===================== BUTTONS ===================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:600; font-size:14px; border-radius:var(--radius-pill);
  padding:10px 18px; border:1px solid transparent;
  transition: transform .15s var(--ease), background .2s, border-color .2s, opacity .2s, color .2s, box-shadow .25s;
  white-space:nowrap; font-family:var(--font-body); line-height:1.2;
}
.btn:active{transform:scale(0.97);}
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none;}
.btn .material-symbols-outlined{font-size:19px;}
/* "dark" = botão principal neutro (branco no tema escuro) */
.btn-dark{background:var(--color-text); color:#0A0A0B;}
.btn-dark:hover{background:#FFFFFF; box-shadow:0 8px 28px rgba(255,255,255,0.14);}
.btn-outline{background:rgba(255,255,255,0.02); border-color:var(--color-border-strong); color:var(--color-text);}
.btn-outline:hover{border-color:rgba(255,255,255,0.4); background:rgba(255,255,255,0.06);}
.btn-accent{background:var(--color-accent); color:var(--color-on-accent);}
.btn-accent:hover{box-shadow:0 10px 32px var(--shadow-glow); filter:brightness(1.05);}
.btn-ghost{background:transparent; color:var(--color-text-dim);}
.btn-ghost:hover{color:var(--color-text);}
.btn-danger{background:var(--color-danger); color:#fff;}
.btn-danger:hover{opacity:.9;}
.btn-block{width:100%;}
.btn-sm{padding:8px 13px; font-size:13px;}
.btn-lg{padding:15px 24px; font-size:15px;}
.hide-mobile{display:none !important;}
.hide-desktop{display:inline-flex;}

/* ===================== SEARCH ===================== */
.search-wrap{padding:6px 0 4px;}
.search-box{
  display:flex; align-items:center; gap:10px;
  background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-pill); padding:12px 18px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.search-box:focus-within{border-color:var(--color-accent-line); box-shadow:0 0 0 4px var(--color-accent-soft);}
.search-box .material-symbols-outlined{color:var(--color-text-faint); font-size:20px;}
.search-box input{flex:1; border:none; outline:none; background:none; font-size:14.5px; color:var(--color-text); min-width:0;}
.search-box input::placeholder{color:var(--color-text-faint);}
.search-box input:focus-visible{outline:none;}
.search-clear{display:none; color:var(--color-text-faint); padding:2px; border-radius:6px;}
.search-clear.show{display:flex;}
.search-clear:hover{color:var(--color-text);}
.search-meta{display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:12.5px; color:var(--color-text-faint); margin-top:10px; padding:0 4px;}
#resultCount b{color:var(--color-text); font-weight:600;}

/* ===================== SECTION HEAD + CHIPS ===================== */
.section-head{display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:20px; gap:16px; flex-wrap:wrap;}
.section-head h2{
  font-family:var(--font-display); font-size:clamp(22px, 3.2vw, 32px); font-weight:600;
  letter-spacing:-0.8px; line-height:1.1; display:flex; align-items:center; gap:10px;
}
.section-head p{color:var(--color-text-dim); font-size:14px; margin-top:6px; max-width:52ch;}
.section-link{display:inline-flex; align-items:center; gap:4px; font-size:14px; font-weight:600; color:var(--color-text); white-space:nowrap;}
.section-link .material-symbols-outlined{font-size:18px; transition:transform .2s var(--ease);}
.section-link:hover .material-symbols-outlined{transform:translateX(3px);}

.chips-row{
  display:flex; gap:4px; overflow-x:auto; padding:5px; scrollbar-width:none;
  background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-pill);
  width:fit-content; max-width:100%;
}
.chips-row::-webkit-scrollbar{display:none;}
.chip{
  flex-shrink:0; display:flex; align-items:center; gap:7px;
  padding:9px 16px; border-radius:var(--radius-pill);
  font-size:13.5px; font-weight:500; color:var(--color-text-dim);
  transition: background .25s var(--ease), color .2s;
}
.chip .material-symbols-outlined{font-size:17px;}
.chip:hover{color:var(--color-text);}
.chip.active{background:var(--color-primary); color:var(--color-on-primary); font-weight:600;}

/* ===================== TOOLBAR ===================== */
.toolbar{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:18px 0 16px; flex-wrap:wrap;}
.sort-wrap{position:relative; display:flex; align-items:center;}
.sort-wrap .material-symbols-outlined.lead{position:absolute; left:13px; font-size:17px; color:var(--color-text-faint); pointer-events:none;}
.sort-select{
  appearance:none; -webkit-appearance:none;
  background:var(--color-surface); border:1px solid var(--color-border); color:var(--color-text);
  font-size:13.5px; font-weight:500; padding:10px 36px 10px 38px; border-radius:var(--radius-pill); cursor:pointer;
}
.sort-select option{background:var(--color-surface); color:var(--color-text);}
.sort-wrap .material-symbols-outlined.chev{position:absolute; right:12px; font-size:18px; color:var(--color-text-faint); pointer-events:none;}
.result-tag{font-size:12.5px; color:var(--color-text-faint); font-weight:500;}

/* ===================== PRODUCT GRID / CARD ===================== */
.product-grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px;}
/* Animações dos cards só mexem em transform e opacity (rodam na GPU, sem
   recalcular layout). A sombra do hover é um pseudo-elemento que só muda
   de opacidade, em vez de animar box-shadow (caro a cada quadro). */
.product-card{
  position:relative; display:flex; flex-direction:column; min-width:0;
  background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-m);
  cursor:pointer; isolation:isolate;
  transition: transform .45s var(--ease), border-color .3s var(--ease);
  animation: cardIn .6s var(--ease) both;
}
.product-card::after{
  content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none;
  box-shadow:0 24px 50px -12px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,210,63,0.06);
  opacity:0; transition:opacity .45s var(--ease);
}
.product-card:nth-child(2){animation-delay:.04s;} .product-card:nth-child(3){animation-delay:.08s;}
.product-card:nth-child(4){animation-delay:.12s;} .product-card:nth-child(5){animation-delay:.16s;}
.product-card:nth-child(6){animation-delay:.2s;}  .product-card:nth-child(7){animation-delay:.24s;}
.product-card:nth-child(8){animation-delay:.28s;} .product-card:nth-child(n+9){animation-delay:.32s;}
@keyframes cardIn{ from{opacity:0; transform:translate3d(0,14px,0);} to{opacity:1; transform:none;} }
@media (hover:hover){
  .product-card:hover{border-color:var(--color-border-strong); transform:translate3d(0,-5px,0);}
  .product-card:hover::after{opacity:1;}
}
.product-card:active{transform:scale(.985); transition-duration:.15s;}
.card-link-wrap{display:flex; flex-direction:column; height:100%; border-radius:inherit; overflow:hidden;}
.card-media{position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--color-surface-alt);}
/* A imagem aparece suave quando termina de carregar (classe posta pelo productCard.js). */
.card-media img{width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.02); transition:opacity .5s var(--ease), transform .8s var(--ease);}
.card-media img.is-loaded{opacity:1; transform:none;}
@media (hover:hover){ .product-card:hover .card-media img.is-loaded{transform:scale(1.06);} }
.card-badges{position:absolute; top:10px; left:10px; right:10px; display:flex; justify-content:space-between; align-items:flex-start; gap:6px; pointer-events:none;}
.card-flags{position:absolute; left:10px; bottom:10px; display:flex; gap:6px; flex-wrap:wrap; pointer-events:none;}

.badge{display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:600; padding:5px 10px; border-radius:var(--radius-pill); line-height:1.2;}
.badge .material-symbols-outlined{font-size:14px;}
/* Etiqueta de desconto: formato de tag de preço, a "assinatura" dos cards */
.badge-discount{
  background:var(--color-badge-discount-bg); color:var(--color-badge-discount-text);
  font-family:var(--font-display); font-weight:700; font-size:12px; letter-spacing:-0.2px;
  border-radius:4px 8px 8px 4px; padding:5px 9px 5px 15px;
  clip-path:polygon(7px 0, 100% 0, 100% 100%, 7px 100%, 0 50%);
  position:relative;
}
.badge-discount::before{content:''; position:absolute; left:6px; top:50%; width:4px; height:4px; margin-top:-2px; border-radius:50%; background:var(--color-badge-discount-text); opacity:.55;}
.badge-new{background:var(--color-info); color:#0A0A0B;}
.badge-cat{background:rgba(10,10,12,0.82); color:var(--color-text); border:1px solid rgba(255,255,255,0.12);}
.badge-instant{background:rgba(10,10,12,0.82); color:var(--color-success); border:1px solid rgba(61,220,151,0.3);}
.badge-status-active{background:var(--color-success-soft); color:var(--color-success);}
.badge-status-inactive{background:var(--color-surface-alt); color:var(--color-text-faint);}
.badge-status-expired{background:var(--color-danger-soft); color:var(--color-danger);}

.card-body{padding:14px 14px 14px; display:flex; flex-direction:column; gap:4px; flex:1;}
.card-brand{font-size:12px; font-weight:500; color:var(--color-text-faint);}
.card-name{
  font-size:14.5px; font-weight:500; color:var(--color-text); line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:39px;
}
.card-prices{margin-top:8px; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;}
.card-old-price{font-size:12.5px; color:var(--color-text-faint); text-decoration:line-through;}
.card-price{font-family:var(--font-display); font-size:19px; font-weight:600; color:var(--color-text); letter-spacing:-0.6px; font-variant-numeric:tabular-nums;}
.card-save{font-size:12px; font-weight:600; color:var(--color-success);}
.card-store-row{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; padding-top:12px;}
.card-store{display:flex; align-items:center; gap:5px; font-size:12px; color:var(--color-text-dim); font-weight:500; min-width:0;}
.card-store span:last-child{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.card-store .material-symbols-outlined{font-size:15px; color:var(--color-text-faint);}
.card-go{
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  background:var(--color-surface-raised); display:flex; align-items:center; justify-content:center;
  color:var(--color-text); transition: background .25s var(--ease), color .2s, transform .25s var(--ease);
}
.card-go .material-symbols-outlined{font-size:18px;}
@media (hover:hover){ .product-card:hover .card-go{background:var(--color-primary); color:var(--color-on-primary); transform:rotate(-45deg);} }
.product-card:has(.card-link-wrap:focus-visible){outline:2px solid var(--color-primary); outline-offset:3px;}
.card-link-wrap:focus-visible{outline:none;}

/* Empty / erro / skeleton */
.state-block{display:none; flex-direction:column; align-items:center; text-align:center; padding:70px 20px; grid-column:1/-1;}
.state-block.show{display:flex;}
.state-block .icon-wrap{
  width:64px; height:64px; border-radius:50%; background:var(--color-surface); border:1px solid var(--color-border);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px; color:var(--color-text-faint);
}
.state-block.is-error .icon-wrap{background:var(--color-danger-soft); color:var(--color-danger); border-color:transparent;}
.state-block .icon-wrap .material-symbols-outlined{font-size:28px;}
.state-block h3{font-family:var(--font-display); font-size:17px; font-weight:600; margin-bottom:6px;}
.state-block p{color:var(--color-text-dim); font-size:14px; max-width:320px; margin-bottom:18px; line-height:1.55;}

.skeleton-card{background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-m); overflow:hidden;}
.skeleton-media{aspect-ratio:1/1;}
.skeleton-media, .skeleton-line{
  background:linear-gradient(90deg, var(--color-surface-alt) 25%, var(--color-surface-raised) 50%, var(--color-surface-alt) 75%);
  background-size:200% 100%; animation:shimmer 1.4s infinite;
}
.skeleton-lines{padding:14px;}
.skeleton-line{height:11px; border-radius:6px; margin-bottom:8px;}
.skeleton-line.w-60{width:60%;} .skeleton-line.w-90{width:90%;} .skeleton-line.w-40{width:40%; height:20px; margin-top:12px;}
@keyframes shimmer{ 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }

/* ===================== FOOTER ===================== */
.site-footer{border-top:1px solid var(--color-border); padding:48px 0 96px; background:var(--color-background); margin-top:40px;}
.footer-grid{display:grid; grid-template-columns:1fr 1fr; gap:32px 24px;}
.footer-brand{grid-column:1/-1;}
.footer-brand p{color:var(--color-text-dim); font-size:14px; margin-top:14px; line-height:1.6; max-width:36ch;}
.footer-col h4{font-size:13px; font-weight:600; margin-bottom:14px; color:var(--color-text);}
.footer-col ul{display:flex; flex-direction:column; gap:10px;}
.footer-col a{font-size:14px; color:var(--color-text-dim); transition:color .2s;}
.footer-col a:hover{color:var(--color-text);}
.footer-social{display:flex; gap:8px; margin-top:18px;}
.footer-trust{display:flex; flex-wrap:wrap; gap:8px; margin-top:32px;}
.footer-trust span{
  display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--color-text-dim);
  padding:7px 12px; border-radius:var(--radius-pill); border:1px solid var(--color-border);
}
.footer-trust .material-symbols-outlined{font-size:16px; color:var(--color-success);}
.legal-note{margin-top:28px; padding-top:22px; border-top:1px solid var(--color-border); font-size:12px; color:var(--color-text-faint); line-height:1.65; max-width:90ch;}
.legal-note strong{color:var(--color-text-dim); font-weight:600;}
.footer-bottom{margin-top:20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; font-size:12px; color:var(--color-text-faint);}
.footer-bottom a{color:var(--color-text-dim);}
.footer-bottom a:hover{color:var(--color-text);}

/* ===================== BOTTOM NAV (mobile) ===================== */
.bottom-nav{
  position:fixed; bottom:0; left:0; right:0; z-index:150;
  display:flex; justify-content:space-around; align-items:center;
  background:rgba(10,10,11,0.86); backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-top:1px solid var(--color-border);
  padding:8px 6px calc(8px + env(safe-area-inset-bottom));
}
.bottom-nav > span{display:contents;}
.bn-item{display:flex; flex-direction:column; align-items:center; gap:3px; color:var(--color-text-faint); font-size:10.5px; font-weight:500; padding:4px 12px; border-radius:12px; transition:color .2s;}
.bn-item .material-symbols-outlined{font-size:22px;}
.bn-item.active{color:var(--color-text);}
.bn-item.active .material-symbols-outlined{font-variation-settings:'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 22; color:var(--color-primary);}

/* ===================== TOAST ===================== */
.toast{
  position:fixed; bottom:92px; left:50%; transform:translateX(-50%) translateY(16px);
  background:var(--color-surface-raised); color:var(--color-text); border:1px solid var(--color-border-strong);
  padding:12px 18px; border-radius:var(--radius-pill);
  font-size:13.5px; font-weight:500; display:flex; align-items:center; gap:8px;
  box-shadow:0 20px 50px rgba(0,0,0,0.5); z-index:400; opacity:0; pointer-events:none; transition:opacity .3s var(--ease), transform .35s var(--ease);
  max-width:90vw;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
.toast.is-error{background:var(--color-danger); color:#fff; border-color:transparent;}
.toast .material-symbols-outlined{font-size:18px; color:var(--color-success);}
.toast.is-error .material-symbols-outlined{color:#fff;}

/* ===================== FORM ELEMENTS ===================== */
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:16px;}
.field label{font-size:13px; font-weight:600; color:var(--color-text);}
.field .hint{font-size:12px; color:var(--color-text-faint);}
.field input, .field select, .field textarea{
  border:1px solid var(--color-border-strong); border-radius:12px; padding:12px 14px; font-size:14.5px; color:var(--color-text);
  background:var(--color-surface-alt); transition:border-color .2s, box-shadow .2s;
}
.field input::placeholder, .field textarea::placeholder{color:var(--color-text-faint);}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--color-accent-line); box-shadow:0 0 0 4px var(--color-accent-soft);
}
.field select option{background:var(--color-surface); color:var(--color-text);}
.field textarea{resize:vertical; min-height:90px;}
.field.has-error input, .field.has-error select, .field.has-error textarea{border-color:var(--color-danger);}
.field-error{font-size:12px; color:var(--color-danger); display:none;}
.field.has-error .field-error{display:block;}
.field-row{display:grid; grid-template-columns:1fr; gap:14px;}
.checkbox-row{display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--color-text-dim); font-weight:500;}
.checkbox-row input{width:16px; height:16px; accent-color:var(--color-accent);}

.account-btn{
  display:flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:50%;
  background:transparent; border:1px solid var(--color-border); color:var(--color-text-dim);
  transition: border-color .2s, color .2s, transform .15s; -webkit-tap-highlight-color:transparent;
}
.account-btn .material-symbols-outlined{font-size:23px;}
.account-btn:hover{border-color:var(--color-border-strong); color:var(--color-text);}
.account-btn:active{transform:scale(0.94);}

/* ===================== CAROUSEL DE BANNERS ===================== */
.carousel-container{
  position:relative; width:100%; overflow:hidden; border-radius:var(--radius-l);
  background:var(--color-surface); border:1px solid var(--color-border);
}
.carousel-track{display:flex; width:100%;}
.carousel-slide{min-width:100%; display:flex; justify-content:center; align-items:center; position:relative; overflow:hidden;}
.carousel-slide::before{
  content:''; position:absolute; inset:-10%;
  background-image:var(--bg-img); background-size:cover; background-position:center;
  filter:blur(24px) brightness(0.35); z-index:1;
}
.carousel-slide img{position:relative; z-index:2; width:100%; max-height:440px; object-fit:contain;}
.carousel-dots{position:absolute; bottom:14px; left:50%; transform:translateX(-50%); display:flex; gap:6px; z-index:10;}
.carousel-dots .dot{width:8px; height:8px; background:rgba(255,255,255,0.4); border-radius:var(--radius-pill); cursor:pointer; transition:width .3s var(--ease), background .3s; border:0; padding:0;}
.carousel-dots .dot.active{width:22px; background:#fff;}

/* ===================== RESPONSIVO ===================== */
@media (min-width:640px){
  .container{padding:0 28px;}
  .product-grid{grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px;}
  .field-row.cols-2{grid-template-columns:1fr 1fr;}
  .card-body{padding:16px;}
}
@media (min-width:900px){
  body{padding-bottom:0;}
  .bottom-nav{display:none;}
  .hide-mobile{display:inline-flex !important;}
  .hide-desktop{display:none !important;}
  .nav-links{display:flex;}
  .product-grid{grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px;}
  .footer-grid{grid-template-columns:1.6fr 1fr 1fr 1fr;}
  .footer-brand{grid-column:auto;}
  .site-footer{padding-bottom:48px;}
  .toast{bottom:28px;}
}
@media (min-width:1200px){
  .product-grid{grid-template-columns:repeat(5, minmax(0,1fr));}
}