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

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

body{
font-family:'Poppins',sans-serif;
background:#fff7f0;
color:#222;
overflow-x:hidden;
}

header{
background:#ff8a00;
padding:20px 7%;
display:flex;
align-items:center;
justify-content:space-between;
position:sticky;
top:0;
z-index:1000;
box-shadow:0 4px 10px rgba(0,0,0,.1);
}

.logo{
font-family:'Anton',sans-serif;
font-size:40px;
color:white;
letter-spacing:2px;
}

nav{
display:flex;
gap:30px;
}

nav a{
text-decoration:none;
color:white;
font-weight:600;
transition:.3s;
}

nav a:hover{
color:#002fff;
}

.btn-header{
background:#003cff;
color:white;
border:none;
padding:14px 28px;
border-radius:40px;
font-weight:bold;
font-size:15px;
cursor:pointer;
transition:.3s;
}

.btn-header:hover{
background:#001fa8;
transform:scale(1.05);
}

.hero{
background:linear-gradient(135deg,#ff5a00,#ff7b00);
min-height:90vh;
display:flex;
align-items:center;
justify-content:space-between;
padding:60px 7%;
position:relative;
flex-wrap:wrap;
}

.hero::before{
content:"";
position:absolute;
width:400px;
height:400px;
background:rgba(255,255,255,.08);
border-radius:50%;
right:-100px;
top:-100px;
}

.hero-texto{
max-width:550px;
color:white;
z-index:2;
}

.hero-texto h1{
font-family:'Anton',sans-serif;
font-size:80px;
line-height:1.1;
margin-bottom:25px;
letter-spacing:2px;
}

.hero-texto span{
color:#ffe600;
}

.hero-texto p{
font-size:20px;
line-height:1.7;
margin-bottom:35px;
}

.botones{
display:flex;
gap:20px;
flex-wrap:wrap;
}

.btn{
background:#003cff;
color:white;
padding:16px 35px;
text-decoration:none;
border-radius:12px;
font-weight:700;
transition:.3s;
}

.btn:hover{
transform:translateY(-4px);
}

.blanco{
background:white;
color:#ff5a00;
}

.hero img{
width:500px;
border-radius:30px;
filter:drop-shadow(0 15px 20px rgba(0,0,0,.4));
z-index:2;
}

.beneficios{
padding:100px 7%;
background:white;
text-align:center;
}

.beneficios h2,
.pagina h1,
.texto h1,
.contacto h1{
font-family:'Anton',sans-serif;
font-size:55px;
color:#ff5a00;
margin-bottom:20px;
letter-spacing:2px;
}

.cards,
.cards-menu{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;
margin-top:50px;
}

.card,
.menu-item,
.sucursal,
.promo{
background:white;
padding:25px;
border-radius:25px;
box-shadow:0 10px 25px rgba(0,0,0,.1);
transition:.3s;
}

.card:hover,
.menu-item:hover,
.sucursal:hover,
.promo:hover{
transform:translateY(-8px);
}

.card h3{
font-size:55px;
margin-bottom:15px;
}

.card h4{
font-size:22px;
margin-bottom:10px;
color:#ff5a00;
}

.card p{
line-height:1.7;
}

.pagina{
padding:100px 7%;
text-align:center;
}

.menu-item img,
.sucursal img{
width:100%;
height:220px;
object-fit:cover;
border-radius:20px;
margin-bottom:15px;
}

.menu-item h3,
.sucursal h3{
font-size:24px;
margin-bottom:10px;
}

.menu-item span{
font-size:28px;
font-weight:bold;
color:#ff5a00;
}

.promo{
background:linear-gradient(135deg,#ff7a00,#ff4d00);
color:white;
}

.promo h2{
font-size:32px;
margin-bottom:15px;
}

.promo p{
font-size:20px;
}

.nosotros{
display:flex;
align-items:center;
justify-content:space-between;
padding:100px 7%;
gap:50px;
background:#fff;
flex-wrap:wrap;
}

.texto{
max-width:550px;
}

.texto p{
font-size:19px;
line-height:1.9;
margin-bottom:20px;
}

.nosotros img{
width:500px;
border-radius:30px;
box-shadow:0 10px 25px rgba(0,0,0,.2);
}

.contacto{
padding:100px 7%;
display:flex;
justify-content:space-between;
gap:50px;
background:white;
flex-wrap:wrap;
}

.contacto p{
font-size:18px;
margin-bottom:15px;
}

form{
width:450px;
background:#fff7f0;
padding:35px;
border-radius:25px;
box-shadow:0 10px 25px rgba(0,0,0,.1);
display:flex;
flex-direction:column;
gap:18px;
}

input,
textarea{
padding:18px;
border:none;
border-radius:12px;
font-size:16px;
background:white;
}

textarea{
height:160px;
resize:none;
}

button{
background:#ff5a00;
color:white;
border:none;
padding:18px;
border-radius:12px;
font-size:17px;
font-weight:bold;
cursor:pointer;
transition:.3s;
}

button:hover{
background:#e14c00;
}

footer{
background:#111;
color:white;
text-align:center;
padding:35px;
font-size:15px;
}

@media(max-width:950px){

header{
flex-direction:column;
gap:20px;
}

nav{
flex-wrap:wrap;
justify-content:center;
}

.hero{
text-align:center;
justify-content:center;
}

.hero-texto h1{
font-size:55px;
}

.hero img,
.nosotros img{
width:100%;
max-width:420px;
margin-top:30px;
}

.botones{
justify-content:center;
}

}
```


* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: white;
  color: black;
  font-family: Verdana;
}