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

body{
font-family:Poppins,sans-serif;
background:#f7f7f7;
color:#222;
}

img{
display:block;
max-width:100%;
}

a{
text-decoration:none;
}

.contenedor{
width:1200px;
max-width:95%;
margin:auto;
}

/************ HEADER ************/

header{

background:#071B3A;

position:sticky;

top:0;

z-index:999;

box-shadow:0 5px 15px rgba(0,0,0,.15);

}

header .contenedor{

display:flex;

justify-content:space-between;

align-items:center;

padding:15px 0;

}

.logo{

display:flex;

align-items:center;

gap:15px;

}

.logo img{

height:65px;

}

.logo h2{

font-size:28px;

color:white;

font-family:'Bebas Neue';

letter-spacing:1px;

}

.logo p{

color:#ddd;

font-size:13px;

}

nav{

display:flex;

gap:28px;

}

nav a{

color:white;

font-weight:600;

transition:.3s;

}

nav a:hover{

color:#ff8400;

}

.btn-menu{

background:#ff8400;

padding:12px 28px;

border-radius:12px;

font-weight:600;

color:white;

transition:.3s;

}

.btn-menu:hover{

background:white;

color:#071B3A;

}

/******** HERO ********/

.hero{

background:linear-gradient(130deg,#ff7a00,#ff9a22);

padding:60px 0;

overflow:hidden;

}

.hero-grid{

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:50px;

}

.subtitulo{

color:white;

font-weight:600;

font-size:18px;

}

.hero-texto h1{

font-family:'Bebas Neue';

font-size:95px;

line-height:85px;

color:white;

margin:20px 0;

}

.hero-texto span{

color:#071B3A;

}

.hero-texto p{

font-size:18px;

line-height:32px;

color:white;

max-width:550px;

}

.hero-botones{

margin-top:40px;

display:flex;

gap:20px;

}

.btn-principal{

background:#071B3A;

padding:16px 34px;

border-radius:12px;

color:white;

font-weight:600;

}

.btn-secundario{

background:white;

padding:16px 34px;

border-radius:12px;

color:#ff7a00;

font-weight:600;

}

.hero-imagen{

display:flex;

justify-content:center;

}

.hero-imagen img{

max-width:520px;

animation:flotar 5s ease-in-out infinite;

}

@keyframes flotar{

0%{transform:translateY(0px);}

50%{transform:translateY(-10px);}

100%{transform:translateY(0px);}

}

/******** RESPONSIVE ********/

@media(max-width:900px){

header .contenedor{

flex-direction:column;

gap:20px;

}

nav{

flex-wrap:wrap;

justify-content:center;

gap:15px;

}

.hero-grid{

grid-template-columns:1fr;

text-align:center;

}

.hero-imagen{

order:-1;

}

.hero-imagen img{

max-width:280px;

}

.hero-texto h1{

font-size:65px;

line-height:60px;

}

.hero-texto p{

margin:auto;

}

.hero-botones{

justify-content:center;

flex-wrap:wrap;

}

}

/*==================================
APPLE BANNERS
==================================*/

.apple-section{

    padding:70px 0;

    background:#f5f5f7;

}

.apple-slider{

    display:flex;

    gap:25px;

    overflow-x:auto;

    scroll-behavior:smooth;

    scroll-snap-type:x mandatory;

    padding-bottom:15px;

}

.apple-slider::-webkit-scrollbar{

    height:8px;

}

.apple-slider::-webkit-scrollbar-thumb{

    background:#ff7a00;

    border-radius:20px;

}

.apple-banner{

    flex:0 0 auto;

    width:900px;

    border-radius:30px;

    scroll-snap-align:center;

    transition:.35s;

    box-shadow:0 10px 35px rgba(0,0,0,.18);

}

.apple-banner:hover{

    transform:scale(1.02);

}