/*==================================================
SERVICIOS CAJESQUIPAX SRL
Autor: ChatGPT
Versión: 1.0
==================================================*/

:root{

--primary:#0F4C81;
--secondary:#1E88E5;
--dark:#1F2937;
--light:#F8FAFC;
--white:#FFFFFF;
--gray:#6B7280;
--success:#16A34A;
--shadow:0 10px 35px rgba(0,0,0,.12);

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Poppins',sans-serif;
background:#fff;
color:#333;
line-height:1.7;

}

/*======================
NAVBAR
=======================*/

.navbar{

background:rgba(255,255,255,.95);
backdrop-filter:blur(10px);
box-shadow:0 2px 15px rgba(0,0,0,.08);
transition:.4s;

}

.navbar-item{

font-weight:600;
color:#333;

}

.navbar-item:hover{

color:var(--primary)!important;

}

.navbar img{

max-height:55px;

}

.button.is-primary{

background:var(--primary);
border:none;
transition:.3s;

}

.button.is-primary:hover{

background:#09365c;
transform:translateY(-3px);

}

/*======================
HERO
=======================*/

.hero-home{

position:relative;
overflow:hidden;
background:linear-gradient(135deg,#0F4C81,#1976D2);

}

.hero-overlay{

position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.35);

}

.hero-body{

position:relative;
z-index:2;

}

.hero-title{

font-size:3.8rem;
font-weight:800;
color:#fff;

}

.hero-text{

color:#fff;
font-size:1.15rem;
margin-top:20px;

}

.hero-image{

max-width:100%;
animation:float 5s ease-in-out infinite;

}

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-15px);

}

100%{

transform:translateY(0);

}

}

/*======================
SECCIONES
=======================*/

.section{

padding:90px 20px;

}

.title{

color:var(--dark);

}

.subtitle{

color:#666;

}

/*======================
CARDS
=======================*/

.card{

border:none;
border-radius:18px;
overflow:hidden;
box-shadow:var(--shadow);
transition:.4s;

}

.card:hover{

transform:translateY(-10px);

}

.card-image img{

height:220px;
object-fit:cover;

}

.card-content{

padding:30px;

}

.service-card i{

color:var(--primary);

}

.info-box{

border-radius:15px;
transition:.3s;

}

.info-box:hover{

transform:translateY(-6px);

}

.feature-box{

padding:35px;
border-radius:15px;
transition:.4s;

}

.feature-box:hover{

transform:translateY(-8px);

box-shadow:var(--shadow);

}

.value-card{

padding:35px;
transition:.4s;

}

.value-card:hover{

transform:translateY(-8px);

}

.value-card i{

color:var(--primary);

}

/*======================
ESTADISTICAS
=======================*/

.hero.is-primary{

background:linear-gradient(135deg,#0F4C81,#1565C0);

}

.counter{

font-size:3rem;
font-weight:700;

}

/*=========================================
FORMULARIO
=========================================*/

.field{

margin-bottom:20px;

}

.input,
.textarea{

border-radius:12px;
border:1px solid #dcdcdc;
padding:15px;
transition:.3s;

}

.input:focus,
.textarea:focus{

border-color:var(--primary);
box-shadow:0 0 0 0.125em rgba(15,76,129,.25);

}

.label{

font-weight:600;
color:var(--dark);

}

/*=========================================
FAQ
=========================================*/

details{

background:#fff;
padding:20px;
margin-bottom:15px;
border-radius:12px;
box-shadow:var(--shadow);
cursor:pointer;
transition:.3s;

}

details:hover{

transform:translateY(-3px);

}

summary{

font-weight:600;
font-size:1.05rem;
list-style:none;

}

summary::-webkit-details-marker{

display:none;

}

details p{

margin-top:15px;
color:#666;

}

/*=========================================
FOOTER
=========================================*/

.footer{

background:#0F172A;
color:#E5E7EB;
padding:70px 20px 40px;

}

.footer .title{

color:#fff;

}

.footer a{

color:#CBD5E1;
transition:.3s;
text-decoration:none;

}

.footer a:hover{

color:#fff;

}

.footer ul{

list-style:none;
padding:0;

}

.footer li{

margin-bottom:10px;

}

.footer hr{

background:#334155;
margin:40px 0;

}

/*=========================================
DISCLAIMER
=========================================*/

.notification.is-warning{

border-left:6px solid #F59E0B;
border-radius:12px;

}

/*=========================================
BOTON SUBIR
=========================================*/

#topBtn{

position:fixed;
bottom:25px;
right:25px;
width:50px;
height:50px;
border:none;
border-radius:50%;
background:var(--primary);
color:#fff;
cursor:pointer;
display:none;
z-index:999;
transition:.3s;

}

#topBtn:hover{

transform:translateY(-5px);
background:#0b3d67;

}

/*=========================================
WHATSAPP
=========================================*/

.whatsapp{

position:fixed;
bottom:90px;
right:25px;
width:60px;
height:60px;
background:#25D366;
color:#fff;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:30px;
text-decoration:none;
box-shadow:var(--shadow);
z-index:999;
transition:.3s;

}

.whatsapp:hover{

transform:scale(1.1);

}

/*=========================================
ANIMACIONES
=========================================*/

.fade-up{

animation:fadeUp .8s ease;

}

@keyframes fadeUp{

from{

opacity:0;
transform:translateY(40px);

}

to{

opacity:1;
transform:translateY(0);

}

}

/*=========================================
IMAGENES
=========================================*/

img{

max-width:100%;
height:auto;
display:block;

}

/*=========================================
RESPONSIVE
=========================================*/

@media screen and (max-width:1023px){

.hero-title{

font-size:2.8rem;

}

.section{

padding:70px 20px;

}

}

@media screen and (max-width:768px){

.hero-title{

font-size:2.2rem;
text-align:center;

}

.hero-text{

text-align:center;

}

.buttons{

justify-content:center;

}

.navbar-item strong{

font-size:.9rem;

}

.card-image img{

height:180px;

}

.hero-image{

margin-top:40px;

}

.whatsapp{

width:55px;
height:55px;
font-size:26px;

}

#topBtn{

width:45px;
height:45px;

}

}

@media screen and (max-width:480px){

.section{

padding:60px 15px;

}

.title{

font-size:1.8rem;

}

.subtitle{

font-size:1rem;

}

.hero-title{

font-size:1.9rem;

}

.hero-text{

font-size:1rem;

}

}

/*=========================================
SCROLLBAR
=========================================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#E5E7EB;

}

::-webkit-scrollbar-thumb{

background:var(--primary);
border-radius:10px;

}

::-webkit-scrollbar-thumb:hover{

background:#0b3d67;

}