/* =========================
   HOME
========================= */

/* HERO */
.home-hero{
  padding-top: 54px;
}

.hero-subtitle{
  margin: 0;
  max-width: 520px;
  font-size: 1.2rem;
  line-height: 1.55;
}

.ct-subtitle{
  margin: 0 auto 22px;
  max-width: 820px;
  font-size: 1.12rem;
  line-height: 1.55;
  color: #64748b;
  text-align: center;
}

.hero-image-wrap{
  border-radius: 26px;
  overflow: hidden;
  background: #e9eef5;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 18px 30px rgba(15, 23, 42, 0.08);
  min-height: 320px;
}

/* (si alguna vez usas imagen simple en vez de carrusel) */
.hero-image{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}



/* =========================
   RECORDATORIO 15 KG
========================= */
.home-limit{
  padding-top: 70px;
}

.home-limit-content{
  max-width: 520px; /* similar al texto del hero */
}

.home-limit-title{
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 12px 0;
  font-size: clamp(2rem, 2.6vw, 2.2rem);
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 10px;
}

.home-limit-title i{
  color: #F5930B; /* tono parecido al CTA naranjo */
  font-size: 1.3em;
}

.home-limit-subtitle{
  max-width: 520px;
  font-size: 1.2rem;
}

.home-limit-list{
  margin: 14px 0 0 0;
  padding-left: 18px;
  color: #64748b;
  line-height: 1.55;
  font-size: 1.2rem;
}

.home-limit-list li{
  margin-bottom: 8px;
}


/* Imagen fija para recordatorio 15kg */
.home-limit-image{
  height: 380px;           /* mismo “alto visual” que el hero */
  overflow: hidden;        /* clave: no se desborda */
}

.home-limit-image .hero-image{
  width: 100%;
  height: 100%;
  object-fit: cover;       /* recorta sin deformar */
  object-position: center;
  display: block;
}



/* =========================
   BOTONES HOME (antes en components/buttons.css)
========================= */
.hero-actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.btn-hero{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid rgba(15, 23, 42, 0.10);
}

.btn-hero-primary{
  background: rgba(37,99,235,1);
  color: #fff;
  border-color: rgba(37,99,235,1);
  box-shadow: 0 10px 18px rgba(37, 99, 235, 0.20);
}

.btn-hero-primary:hover{
  transform: translateY(-1px);
  opacity: .95;
  background: rgb(30, 75, 170);
  color: #fff;
  border-color: rgb(30, 75, 170);
  box-shadow: 0 10px 18px rgba(37, 99, 235, 0.20);
}

/* CTA button (naranjo) */
.cta-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border-radius: 14px;
  background: #F5930B;
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
  transition: transform .08s ease, filter .15s ease;
}

.cta-btn:hover{
  transform: translateY(-1px);
  opacity: .95;
  background: #d18213;
  color: #ffffff;
  border-color: #d18213;
  box-shadow: 0 10px 18px rgba(245, 147, 11, 0.20);
}

.cta-btn:active{
  transform: translateY(1px);
}

/* =========================
   SECCIONES HOME (antes en components/cards.css)
========================= */
.home-section-title{
  text-align: center;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f172a;
  margin: 0;
  font-size: 2rem;
}

/* CÓMO FUNCIONA */
.home-how{
  padding-top: 60px;
}

.how-title{
  text-align: center;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f172a;
  margin: 0 0 18px 0;
  font-size: 2rem;
}

.how-card{
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 22px;
  padding: 26px 22px;
  box-shadow: 0 14px 26px rgba(15, 23, 42, 0.06);
  height: 100%;
  text-align: center;
}

.how-icon{
  width: 62px;
  height: 62px;
  border-radius: 999px;
  margin: 0 auto 14px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(37, 99, 235, 0.10);
  color: rgba(37,99,235,1);
  font-size: 24px;
}

.how-icon-img{
  width: 36px;
  height: 36px; 
  object-fit: contain;
  display: block;
}

.how-card-title{
  font-weight: 800;
  font-size: 1.05rem;
  margin: 0 0 8px 0;
  color: #111827;
}

.how-card-text{
  margin: 0;
  color: #64748b;
  line-height: 1.5;
  font-size: 0.95rem;
}

/* POR QUÉ ELEGIRNOS */
.home-why{
  padding-top: 70px;
}

.why-card{
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 18px;
  padding: 18px 16px;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.05);
  text-align: center;
  height: 100%;
}

.why-icon{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  margin: 0 auto 10px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(37, 99, 235, 0.10);
  color: rgba(37,99,235,1);
  font-size: 18px;
}

.why-title{
  margin: 0 0 6px 0;
  font-weight: 800;
  font-size: 1rem;
  color: #111827;
}

.why-text{
  margin: 0;
  color: rgba(37, 99, 235, 0.65);
  line-height: 1.45;
  font-size: 0.92rem;
}

/* PASAJEROS FELICES */
.home-passengers{
  padding-top: 70px;
}

.photo-card{
  border-radius: 26px;
  overflow: hidden;
  background: #e9eef5;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 18px 30px rgba(15, 23, 42, 0.08);
  height: 280px;
}

.photo-img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.photo-placeholder{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(15, 23, 42, 0.25);
  font-size: 34px;
}

/* CTA FINAL (azul) */
.home-cta{
  padding-top: 70px;
  padding-bottom: 34px;
}

.cta-box{
  background: #1d63f2;
  border-radius: 26px;
  padding: 44px 22px;
  text-align: center;
  box-shadow: 0 18px 30px rgba(15, 23, 42, 0.10);
}

.cta-title{
  margin: 0 0 18px 0;
  color: #ffffff;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
}

/* Mensaje final */
.hero-title2{
  text-align: center;
  font-weight: 800;
  margin: 0;
  color: #0f172a;
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
}

/* =========================
   RESPONSIVE (Home)
========================= */
@media (max-width: 991px){
  .home-hero{ padding-top: 34px; }
  .hero-image-wrap{ min-height: 260px; }

  .home-how, .home-why, .home-passengers{ padding-top: 50px; }
  .photo-card{ height: 240px; }
}

@media (max-width: 576px){
  .home-hero{ padding-top: 22px; }

  .how-card{ padding: 22px 18px; }
  .why-card{ padding: 16px 14px; }

  .photo-card{ height: 210px; }

  .cta-box{ padding: 34px 18px; }
  .cta-btn{ width: 70%; }

  .btn-hero{ width: 100%; }
}


@media (max-width: 991px){
  .home-limit-image{ height: 260px; }
}

@media (max-width: 576px){
  .home-limit-image{ height: 220px; }
}

.home-bullets{
  margin: 0 0 18px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  padding-left: 1.4rem; /* espacio para el punto */

}

.home-bullets li{
  margin: 0 0 18px;
  line-height: 1.55;
}