:root{

--bg:#050505;

--card:#121212;

--card-2:#1b1b1b;

--text:#ffffff;

--muted:#b8b8b8;

/* COLORES KYG */

--carbon:#121212;

--gold:#FFB800;

--fire:#FF1744;

--orange:#FF7A00;

--cream:#F5E6CA;

/* UI */

--primary:var(--fire);

--primary-hover:#ff3360;

--secondary:var(--orange);

--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,.78),
rgba(0,0,0,.82)
),

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:
40px 20px 30px;

margin-bottom:24px;

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--hamburguesas{
background:#FF7A00;
color:#fff;
}

.badge--perros{
background:#E56500;
color:#fff;
}

.badge--pataburguers{
background:#2B2B2B;
color:#fff;
}

.badge--salchipapas{
background:#FFB800;
color:#000;
}

.badge--premium{
background:#FFB800;
color:#000;
}

/* TITLE */

.card__title{

  height:70px;

  overflow:hidden;

  line-height:1.05;

}

/* DESCRIPTION */

.card__description{

  height:130px;

  overflow:hidden;

  display:-webkit-box;

  -webkit-line-clamp:7;

  -webkit-box-orient:vertical;

}

.card__note{

width:100%;

height:52px;

border:none;

outline:none;

border-radius:18px;

padding:0 16px;

margin-top:4px;

margin-bottom:20px;

background:
linear-gradient(
180deg,
#222222,
#1a1a1a);

color:#ffffff;

font-size:14px;

font-weight:600;

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

transition:.18s ease;

}

/* PLACEHOLDER */

.card__note::placeholder{

color:#8d8d8d;

font-weight:500;

}

/* FOCUS */

.card__note:focus{

border-color:
rgba(255,122,0,.45);

background:
linear-gradient(
180deg,
#2a2a2a,
#202020);

box-shadow:
0 0 0 3px rgba(255,122,0,.08);

}

/* PRICE */

.card__price{

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

  text-align:center;

  font-size:30px;

  font-weight:900;

  color:var(--gold);

}

/* 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(--orange);

color:white;

font-size:30px;

font-weight:900;

cursor:pointer;

transition:
transform .15s ease;

}

.controls__button:hover{

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:none;

outline:none;

border-radius:20px;

padding:0 22px;

background:#242424;

color:white;

font-size:18px;

margin-bottom:22px;

}

/* 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:var(--orange);

color:white;

font-size:22px;

font-weight:900;

letter-spacing:.5px;

cursor:pointer;

transition:
transform .15s ease;

}

.checkout__button:hover{

transform:
translateY(-2px);

}

.checkout__button:active{

transform:
scale(.98);

}


.checkout__button:active{

transform:
scale(.98);

}


/* 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:8px;
  flex-wrap:wrap;
  margin-bottom:20px;
  justify-content:center;
}

.filters button{

background:#1a1a1a;

color:#fff;

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

border-radius:999px;

padding:12px 20px;

font-size:14px;

font-weight:700;

transition:.2s;

}

.filters button:hover{

background:#FF7A00;

border-color:#FF7A00;

transform:translateY(-2px);

}

.filters button:active{

background:#FF7A00;

color:#fff;

border-color:#FF7A00;

box-shadow:
0 0 15px rgba(255,122,0,.35);

}