:root{

--bg:#050505;

--card:#121212;

--card-2:#1b1b1b;

--text:#ffffff;

--muted:#b8b8b8;

/* COLORES CRIOLLITOS */

--carbon:#121212;      /* Negro principal */

--silver:#C0C0C0;      /* Comercial */

--gold:#C89B3C;        /* Premium */

--bronze:#8B5A2B;      /* Artesanal */

--red:#A81414;         /* Combos y promociones */

--cream:#F5E6CA;       /* Fondo claro y textos destacados */

/* UI */

--primary:var(--gold);

--primary-hover:#D8AE52;

--secondary:var(--bronze);

--secondary-hover:#A06A34;

--border:rgba(255,255,255,.06);

}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body::before{

content:"";

position:fixed;

inset:0;

background:

radial-gradient(
circle at top,
rgba(255,122,0,.08),
transparent 40%
);

pointer-events:none;

z-index:1;

}

body{

background-color:#050505;

background-image:

linear-gradient(
rgba(0,0,0,.82),
rgba(0,0,0,.88)
),

radial-gradient(
circle at top,
rgba(200,155,60,.15),
transparent 45%
),

url("fondo-ladrillo.png");

background-size:cover;

background-position:center top;

background-repeat:no-repeat;

color:var(--text);

font-family:
Inter,
Arial,
sans-serif;

min-height:100vh;

}

/* HERO */

.hero{

position:relative;

padding:
20px 20px 10px;

margin-bottom:8px;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

overflow:hidden;

}


.hero::before{

content:"";

position:absolute;

inset:0;

background:

radial-gradient(
circle at center,
rgba(255,122,0,.18),
transparent 65%
);

pointer-events:none;

z-index:0;

}

.hero::after{

content:"";

position:absolute;

left:50%;

bottom:0;

transform:translateX(-50%);

width:220px;

height:4px;

border-radius:999px;

background:
linear-gradient(
90deg,
transparent,
#FF7A00,
transparent);

box-shadow:
0 0 20px rgba(255,122,0,.55);

}

.logo-principal{

position:relative;

z-index:2;

width:100%;

max-width:320px;

height:auto;

display:block;

margin:auto;

filter:
drop-shadow(
0 0 24px rgba(255,122,0,.28));

}

/* APP */

.app{

width:100%;

max-width:1550px;

margin:auto;

padding:20px;

position:relative;

z-index:2;

}

/* GRID */

.products-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(280px,1fr));

gap:22px;

align-items:start;

}

/* CARD */

.card::before{

content:"";

position:absolute;

top:0;

left:0;

right:0;

height:120px;

background:

linear-gradient(
180deg,
rgba(255,122,0,.08),
transparent);

pointer-events:none;

}

.card{

background:
linear-gradient(
180deg,
#1a1a1a 0%,
#101010 100%);

border-radius:30px;

overflow:hidden;

border:
1px solid rgba(255,122,0,.08);

box-shadow:
0 6px 18px rgba(0,0,0,.28);

transition:.2s ease;

position:relative;

display:flex;

flex-direction:column;

height:100%;

}

.card:hover{

transform:
translateY(-4px);

}

.card:hover .card__image{

transform:scale(1.03);

}

/* IMAGE */

.card__image{

width:100%;

height:250px;

object-fit:cover;

display:block;

}

/* CONTENT */

.card__content{

padding:20px;

display:flex;

flex-direction:column;

}

/* BADGES */

.badge{

position:absolute;

top:0;

left:0;

width:100%;

z-index:10;

display:flex;

align-items:center;

justify-content:center;

padding:14px 12px;

font-size:13px;

font-weight:900;

letter-spacing:.8px;

text-align:center;

margin:0;

border-radius:0 0 16px 16px;

}

.badge--comercial{
background:#C0C0C0;
color:#111111;
}

.badge--artesanal{
background:#8B5A2B;
color:#FFFFFF;
}

.badge--premium{
background:#C89B3C;
color:#111111;
}

.badge--combos{
background:#A81414;
color:#FFFFFF;
}

.badge--promociones{
background:#D4AF37;
color:#111111;
}

/* TITLE */

.card__title{

  height:84px;

  overflow:hidden;

  line-height:1.05;
  
  margin-bottom: 7px;

}

/* DESCRIPTION */

.card__description{

  height:auto;

  overflow:hidden;

  display:-webkit-box;

  -webkit-line-clamp:4;

  -webkit-box-orient:vertical;

}

/* PRICE */

.card__price{

  margin-top:7px;
  
  margin-bottom:7px;

  text-align:center;

  font-size:42px;

  font-weight:900;

  color:var(--gold);
  
  text-shadow:
0 0 10px rgba(212,175,55,.3);

}

/* CONTROLS */

.controls{

display:flex;

align-items:center;

justify-content:center;

gap:16px;

margin-top:7px;

}

.controls__button{

width:58px;

height:58px;

border:none;

border-radius:18px;

background:var(--gold);

color:#111111;

font-size:30px;

font-weight:900;

cursor:pointer;

transition:
transform .15s ease;

}

.controls__button:hover{

background:#D8AE52;

transform:scale(1.04);

}

.controls__button:active{

transform:
scale(.96);

}

.controls__count{

font-size:34px;

font-weight:900;

min-width:40px;

text-align:center;

}

/* CHECKOUT */

.checkout{

position:sticky;

bottom:0;

margin-top:10px;

background:
linear-gradient(
180deg,
rgba(20,20,20,.96),
rgba(8,8,8,.98));

border:
1px solid rgba(255,255,255,.05);

border-radius:34px;

padding:30px;

box-shadow:
0 -20px 50px rgba(0,0,0,.45);

backdrop-filter:
blur(10px);

z-index:1000;

}

/* TITLE */

.checkout__title{

font-size:34px;

font-weight:900;

color:var(--cream);

margin-bottom:18px;

letter-spacing:-1px;

}

/* INPUT */

.checkout__input{

width:100%;

height:68px;

border:1px solid rgba(255,255,255,.08);

outline:none;

border-radius:20px;

padding:0 22px;

background:
linear-gradient(
180deg,
#242424,
#1B1B1B
);

color:#FFFFFF;

font-size:18px;

font-weight:600;

margin-bottom:22px;

transition:.2s ease;

}

.checkout__input::placeholder{

color:#9A9A9A;

opacity:1;

}

.checkout__input:focus{

border-color:#C89B3C;

box-shadow:
0 0 0 3px rgba(200,155,60,.15);

}

/* TOTAL */

.checkout__total{

display:flex;

justify-content:space-between;

align-items:center;

font-size:42px;

font-weight:900;

margin-top:10px;

}

/* BUTTON */

.checkout__button{

width:100%;

height:60px;

border:none;

border-radius:22px;

margin-top:26px;

background:
linear-gradient(
180deg,
#D41717,
#930F0F
);

color:white;

font-size:22px;

font-weight:900;

letter-spacing:.5px;

cursor:pointer;

transition:
transform .15s ease;

}

.checkout__button:hover{

transform:
translateY(-2px);

filter:brightness(1.08);

}

.checkout__total{

display:flex;

justify-content:space-between;

align-items:center;

font-size:42px;

font-weight:900;

margin-top:10px;

color:#F5E6CA;

}

.checkout__title{

font-size:34px;

font-weight:900;

color:var(--gold);

margin-bottom:18px;

letter-spacing:-1px;

}


/* MOBILE */

@media(max-width:768px){

.logo-principal{

max-width:280px;

}

.card__image{

width:100%;

height:240px;

object-fit:cover;

display:block;

}

.card__title{

font-size:22px;

}

.card__price{

font-size:28px;

}

.checkout{

padding:18px;

}

.checkout__title{

font-size:20px;

}

.checkout__total{

font-size:20px;

}

}

.filters{

display:flex;
gap:12px;
flex-wrap:wrap;
justify-content:center;

margin-top:0px;
margin-bottom:10px;

}

.filters button{

padding:16px 28px;

font-size:16px;

font-weight:900;

border-radius:999px;

min-height:56px;

border:none;

}

.filters button:hover{

background:#D4AF37;

color:#111111;

border-color:#D4AF37;

transform:translateY(-2px);

box-shadow:
0 0 18px rgba(212,175,55,.35);

}

.filter-btn{

border:1px solid rgba(255,255,255,.08);

transition:.2s ease;

}

/* TODOS */

.filter-btn--all{

background:#F5E6CA80;

color:#F5E6CA;

}

/* COMERCIAL */

.filter-btn--comercial{
background:rgba(192,192,192,.45);
color:#E5E5E5;
}

/* ARTESANAL */

.filter-btn--artesanal{

background:#8B5A2B80;

color:#F5E6CA;

}

/* PREMIUM */

.filter-btn--premium{

background:#C89B3C80;

color:#FFF3C4;

}

/* COMBOS */

.filter-btn--combos{

background:#A8141480;

color:#FFD0D0;

}

.filter-btn--all.active{
background:#F5E6CA;
color:#111111;
}

.filter-btn--comercial.active{
background:#C0C0C0;
color:#111111;
box-shadow:0 0 12px rgba(192,192,192,.45);
}

.filter-btn--artesanal.active{
background:#8B5A2B;
color:#FFFFFF;
}

.filter-btn--premium.active{
background:#C89B3C;
color:#111111;
}

.filter-btn--combos.active{
background:#A81414;
color:#FFFFFF;
}

.filter-btn--promociones.active{
background:#D4AF37;
color:#111111;
}