/* =========================================================
   LOING LOGISTICS - MAIN CSS (OPTIMIZADO Y ORDENADO)
   - Mantiene tu diseño
   - Quita duplicados / mejora consistencia
   ========================================================= */


/* =========================================================
   1) VARIABLES (COLORES / RADIOS / SOMBRAS)
   ========================================================= */
:root{
  --c-primary: #052362;                 /* azul principal */
  --c-accent: #ffb44a;                  /* naranja */
  --c-success: #fddb1d;                 /* verde */
  --c-hero-highlight: #e98b63;

  --c-text: #0f172a;
  --c-white: #ffffff;

  --glass-bg: rgba(15, 23, 42, 0.92);
  --glass-border: rgba(255,255,255,0.18);

  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;

  --shadow-sm: 0 10px 30px rgba(0,0,0,0.10);
  --shadow-md: 0 18px 45px rgba(0,0,0,0.18);
  --shadow-lg: 0 18px 55px rgba(0,0,0,0.12);

  --t-fast: 0.2s ease;
  --t-med: 0.3s ease;
}


/* =========================================================
   2) NAVBAR + DROPDOWN SERVICIOS
   ========================================================= */

/* ---------- Submenu SERVICIOS (Dropdown) ---------- */
.dropdown-menu-custom{
  border-radius: 14px;
  padding: 10px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  min-width: 220px;
  box-shadow: 0 18px 45px rgba(0,0,0,0.25);
}

.dropdown-menu-custom .dropdown-item{
  color: rgba(255,255,255,0.92);
  font-weight: 600;
  padding: 10px 12px;
  border-radius: 10px;
}

.dropdown-menu-custom .dropdown-item:hover{
  background: rgba(221, 241, 250, 0.14);
  color: #38bdf8;
}

/* Desktop: abrir al pasar el mouse */
@media (min-width: 992px){
  .navbar .dropdown:hover > .dropdown-menu{
    display: block;
    margin-top: 8px;
  }
}

/* Dropdown-toggle button como link */
.navbar-custom .nav-link.dropdown-toggle{
  background: transparent;
  border: 0;
  padding: 0; /* Bootstrap nav-link ya trae padding */
  cursor: pointer;
}

/* ---------- NAV (Estado inicial) ---------- */
/* .navbar-custom{
  background-color: transparent;
  padding: 75px 0 25px;
  transition: background-color var(--t-med),
              padding var(--t-med),
              height var(--t-med),
              box-shadow var(--t-med);
} */

.navbar-custom{
  background-color: transparent;
  padding: 75px 0 25px;
  transition: background-color var(--t-med),
              padding var(--t-med),
              box-shadow var(--t-med);
  /* icono toggler blanco (bootstrap var) */
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.95)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Logo */
.logo-img{
  height: 60px;
  transition: height var(--t-med);
}

/* Links */
.navbar-custom .nav-link{
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 0.5px;
  color: var(--c-white);
  transition: color var(--t-fast), font-size var(--t-med);
}

.navbar-custom .nav-link:hover{
  color: #ffaa0c;
}

/* ---------- Brand stack (logo + texto) ---------- */
.brand-stack{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.brand-text{
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.2px;
  color: rgba(255,255,255,0.85);
  margin-top: 8px;
  text-transform: uppercase;
}

/* ---------- NAV (Scrolled) ---------- */
.navbar-custom.scrolled{
  background-color: var(--c-primary);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  height: 120px;
  padding: 0;

  display: flex;
  align-items: center;

  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}

.navbar-custom.scrolled .container{
  height: 100%;
  display: flex;
  align-items: center;
}

.navbar-custom.scrolled .navbar-brand{
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
  align-items: center;
}

.navbar-custom.scrolled .logo-img{ height: 70px; }

.navbar-custom.scrolled .navbar-nav{
  align-items: center;
  gap: 18px;
}

.navbar-custom.scrolled .nav-link{
  padding: 10px 12px;
  font-size: 20px;
  font-weight: 600;
  color: rgba(255, 197, 120, 0.92);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.navbar-custom.scrolled .nav-link:hover{
  color: var(--c-success);
}



/* ---------- Hamburger toggler ---------- */
.navbar-custom:not(.scrolled) .navbar-toggler{
  border-color: rgba(235, 119, 11, 0.4);
}

.navbar-custom:not(.scrolled) .navbar-toggler-icon{ filter: none; }

.navbar-custom.scrolled .navbar-toggler{
  border-color: rgba(255, 255, 255, 0.5);
}

.navbar-custom.scrolled .navbar-toggler-icon{
  filter: brightness(0) invert(1);
}

/* Centrar contenido inicial */
.navbar-custom:not(.scrolled) .container{
  display: flex;
  align-items: center;
}

/* ---------- Responsive NAV ---------- */
@media (max-width: 991.98px){
  .navbar-custom{ padding: 18px 0; }

    /* ===== FIX: brand + toggler en móvil (evita desbordes) ===== */
  .navbar-custom .container{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  /* el brand debe poder encogerse para no empujar el toggler */
  .navbar-custom .navbar-brand{
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;           /* CLAVE */
  }

  .navbar-custom .brand-stack{
    align-items: flex-start; /* en móvil mejor a la izquierda */
    min-width: 0;
    width: 100%;
  }

  .navbar-custom .brand-text{
    display: block;
    max-width: 100%;
    white-space: nowrap;     /* 1 línea */
    overflow: hidden;
    text-overflow: ellipsis; /* "..." */
    font-size: 11px;
    margin-top: 4px;
  }

  /* la hamburguesa no se encoge */
  .navbar-custom .navbar-toggler{
    flex: 0 0 auto;
    margin-left: 8px;
  }


  .navbar-custom.scrolled{ height: 86px; }

  .logo-img{ height: 40px; }
  .navbar-custom.scrolled .logo-img{ height: 44px; }

  .navbar-custom .navbar-collapse{
    margin-top: 12px;
    padding: 12px;
    border-radius: 14px;
    background: rgba(6, 4, 136, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .navbar-custom .navbar-nav{
    align-items: stretch !important;
  }

  .navbar-custom .nav-link{
    font-size: 16px;
    padding: 10px 12px;
    border-radius: 10px;
    color: #ef961a;
  }

  .navbar-custom .nav-link:hover{
    background: rgba(252, 26, 26, 0.08);
    color: #ffa1db;
  }

  
}

@media (max-width: 575.98px){
  .navbar-custom .container{
    padding-left: 14px;
    padding-right: 14px;
  }
  .logo-img{ height: 42px; }
  .navbar-custom .navbar-collapse{ padding: 10px; }
  .navbar-custom .nav-link{ font-size: 15px; }
}
@media (max-width: 380px){
  .navbar-custom .brand-text{
    display: none;
  }
}


/* =========================================================
   3) HERO VIDEO (Video + Overlay + Texto + Flechas)
   ========================================================= */
.hero-video{
  position: relative;
  height: clamp(820px, 100vh, 900px);
  overflow: hidden;
}

.hero-video-layer{
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;

  opacity: 0;
  transition: opacity 0.9s ease, transform 2.2s ease;
  transform: scale(1.05);
}

.hero-bg-video.is-active{
  opacity: 1;
  transform: scale(1.02);
}

.hero-bg-video.spin-once{
  transform: scale(1.04) rotate(1.2deg);
}

.hero-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(15, 23, 42, 0.85) 0%,
    rgba(15, 23, 42, 0.55) 25%,
    rgba(15, 23, 42, 0.25) 100%
  );
}

.hero-content{
  position: relative;
  z-index: 2;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0;
}

.hero-content .container{
  transform: translateY(20px);
}

.hero-kicker{
  color: var(--c-accent);
  letter-spacing: 2px;
  font-weight: 600;
  margin-bottom: 10px;
}

.hero-title{
  color: var(--c-white);
  font-weight: 800;
  line-height: 1.05;
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  margin-bottom: 16px;
}

.hero-highlight{ color: var(--c-hero-highlight); }

.hero-subtitle{
  color: rgba(255, 255, 255, 0.85);
  font-size: clamp(1.15rem, 2vw, 1.6rem);
  max-width: 52ch;
  margin: 0 auto 26px auto;
}

.hero-actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.btn-hero-primary{
  background: var(--c-accent);
  border: 1px solid var(--c-success);
  color: var(--c-white);
  font-weight: 700;
  padding: 12px 25px;
  border-radius: var(--radius-sm);
}
.btn-hero-primary:hover{ opacity: 0.92; color: var(--c-white); }

.btn-hero-outline{
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: var(--c-white);
  font-weight: 700;
  padding: 12px 25px;
  border-radius: var(--radius-sm);
}
.btn-hero-outline:hover{ border-color: var(--c-success); color: var(--c-accent); }

/* Flechas */
.hero-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;

  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(236, 241, 255, 0.35);
  color: #fff;

  display: grid;
  place-items: center;

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  cursor: pointer;
  transition: transform var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}

.hero-arrow:hover{
  background: rgba(137, 170, 248, 0.55);
  border-color: rgba(248, 117, 56, 0.7);
}

.hero-arrow:active{
  transform: translateY(-50%) scale(0.96);
}

.hero-arrow-left{ left: 18px; }
.hero-arrow-right{ right: 18px; }

/* Animación texto */
.hero-kicker,
.hero-title,
.hero-subtitle,
.hero-actions{
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.hero-anim-in .hero-kicker{ opacity: 0; transform: translateY(-10px); }
.hero-anim-in .hero-title{ opacity: 0; transform: translateY(14px); }
.hero-anim-in .hero-subtitle{ opacity: 0; transform: translateY(18px); }
.hero-anim-in .hero-actions{ opacity: 0; transform: translateY(22px); }

@media (max-width: 991.98px){
  .hero-content .container{ transform: translateY(10px); }
}

@media (max-width: 575.98px){
  .hero-arrow{ top: 58%; width: 40px; height: 40px; }
  .hero-arrow-left{ left: 12px; }
  .hero-arrow-right{ right: 12px; }
}

@media (prefers-reduced-motion: reduce){
  .hero-arrow,
  .hero-kicker,
  .hero-title,
  .hero-subtitle,
  .hero-actions,
  .hero-bg-video{
    transition: none !important;
  }
}


/* =========================================================
   4) PRIMERA SECCIÓN (SERVICIOS)
   ========================================================= */
.section-first{
  padding: 85px 0;
  background: #ffffff;
}

.first-title{
  font-weight: 900;
  color: var(--c-primary);
  font-size: clamp(2rem, 2.7vw, 2.9rem);
  margin-bottom: 10px;
}

.first-subtitle{
  color: rgba(105, 50, 13, 0.75);
  font-size: clamp(1rem, 1vw, 1.2rem);
  max-width: 62ch;
  margin: 0 auto;
}

/* Cards servicios */
.service-tile{
  position: relative;
  display: block;
  height: 290px;
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;

  background-image: var(--bg);
  background-size: cover;
  background-position: center;

  transform: translateY(0);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  will-change: transform;
}

.service-tile:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 45px rgba(12, 30, 60, 0.18);
}

.service-tile-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.08) 0%,
      rgba(0,0,0,.35) 55%,
      rgba(0,0,0,.72) 100%
  );
}

.service-tile-content{
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  z-index: 1;
}

.service-miniicon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  flex: 0 0 auto;
}

.service-name{
  color: #ffffff;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  font-size: 20px;
}



.service-text{
  min-width: 0; /* clave para ellipsis */
}

.service-title{
  display: block;
  color: #fff;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .8px;
  font-size: 16px;
  line-height: 1.05;
}

.service-desc{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;

  line-clamp: 2;        /* estándar (future-proof) */
  overflow: hidden;

  margin-top: 6px;
  color: rgba(255,255,255,.92);
  font-weight: 700;
  letter-spacing: .2px;
  font-size: 14px;
  line-height: 1.2;
}

@media (max-width: 575.98px){
  .service-tile{ height: 200px; }
  .service-title{ font-size: 15px; }
  .service-desc{ font-size: 13px; -webkit-line-clamp: 2; line-clamp: 2; }
}
/* =========================================================
   5) INFO BAR
   ========================================================= */
.info-bar{
  background: var(--c-primary);
  color: #ffffff;
  padding: 70px 0;
}

.info-bar .row{ justify-content: center; }

.info-bar .col-12{
  display: flex;
  justify-content: center;
  text-align: center;
}

.info-icon{
  width: 55px;
  height: 55px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.14);
  font-size: 18px;
}

.info-text strong{
  display: block;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.info-text p{
  margin: 0;
  font-size: 20px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.4;
}

@media (max-width: 767.98px){
  .info-bar{ padding: 28px 0; }
  .info-text{ text-align: center; }
}

/* ================= INFO BAR: LINKS BLANCOS ================= */
.info-bar a{
  color: rgba(255,255,255,0.95);
  text-decoration: none;
}

.info-bar a:hover{
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Si algún estilo de Bootstrap está ganando, usa este extra: */
.info-bar a:visited{
  color: rgba(255,255,255,0.95);
}


/* =========================================================
   6) WHY (POR QUÉ CONTRATARNOS) + BENEFICIOS
   - Se elimina “doble cuadro”
   ========================================================= */
.section-why{
  padding: 95px 0;
  background: #ffffff;
  overflow: hidden;
}

.why-head{ margin-bottom: 18px; }

.why-kicker{
  margin: 0 0 8px 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  color: rgba(5, 35, 98, 0.70);
  text-transform: uppercase;
}

.why-title{
  margin: 0;
  font-weight: 900;
  color: var(--c-primary);
  font-size: clamp(1.9rem, 3vw, 2.6rem);
}

.why-image img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* Panel único (aquí vive todo el contenido derecho) */
.why-panel{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(5,35,98,0.10);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 55px rgba(0,0,0,0.08);
  padding: 26px 22px;
}

.why-item{
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.why-icon{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(5,35,98,.08);
  border: 1px solid rgba(5,35,98,.10);
  color: var(--c-primary);
  display: grid;
  place-items: center;
  flex: 0 0 44px;
}

.why-item h4{
  margin: 0 0 4px 0;
  font-weight: 900;
  color: var(--c-primary);
  font-size: 1rem;
}

.why-item p{
  margin: 0;
  color: rgba(15, 23, 42, 0.72);
  font-size: 0.92rem;
  line-height: 1.35;
}

.btn-why{
  background: var(--c-success);
  border: 1px solid var(--c-success);
  color: var(--c-white);
  font-weight: 900;
  padding: 12px 18px;
  border-radius: 999px;
  letter-spacing: 0.3px;
}
.btn-why:hover{ opacity: 0.92; color: var(--c-white); }

/* Botón ▶ */
.section-why .container{ position: relative; }

.why-next{
  position: absolute;
  right: 12px;
  top: 12px;

  width: 46px;
  height: 46px;
  border-radius: 999px;

  border: 1px solid rgba(5,35,98,.15);
  background: rgba(5,35,98,.10);
  color: var(--c-primary);

  display: grid;
  place-items: center;

  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  transition: transform .2s ease, background .2s ease;
}

.why-next:hover{
  background: rgba(5,35,98,.18);
  transform: scale(1.05);
}

.why-next i{ margin-left: 2px; }

/* Animación de cambio */
.why-fade{
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease;
}

.why-fade.is-show{
  opacity: 1;
  transform: translateY(0);
}

/* BENEFICIOS */
.benefits-title{
  font-weight: 900;
  color: var(--c-primary);
  letter-spacing: .6px;
  margin: 0 0 14px 0;
  font-size: 1.1rem;
  text-transform: uppercase;
  position: relative;
}

.benefits-title::after{
  content:"";
  display:block;
  height: 4px;
  width: 220px;
  max-width: 100%;
  margin-top: 10px;
  border-radius: 999px;
  background: #ff7a1a;
}

.benefits-list{
  margin: 16px 0 0 0;
  padding-left: 18px;
  display: grid;
  gap: 14px;
}

.benefits-list li{
  color: rgba(15,23,42,.78);
  line-height: 1.55;
  font-size: .98rem;
}

.benefits-list strong{
  color: var(--c-primary);
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 991.98px){
  .section-why{ padding: 80px 0; }
}
@media (max-width: 767.98px){
  .why-next{ top: 6px; right: 6px; }
}
@media (max-width: 575.98px){
  .why-panel{ padding: 20px 16px; }
}


/* =========================================================
   7) ABOUT (QUIÉNES SOMOS)
   ========================================================= */
.section-about{
  padding: 100px 0;
  background: rgba(15, 23, 42, 0.03);
}

.about-kicker{
  color: var(--c-accent);
  font-weight: 800;
  letter-spacing: 2px;
  margin-bottom: 8px;
  font-size: 13px;
}

.about-title{
  font-weight: 900;
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  color: var(--c-text);
  margin-bottom: 14px;
}

.about-text{
  color: rgba(15, 23, 42, 0.75);
  line-height: 1.7;
  margin-bottom: 18px;
}

.about-points{
  display: grid;
  gap: 10px;
  margin-bottom: 26px;
}

.about-point{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: rgba(42, 31, 15, 0.82);
}

.about-point i{
  color: #92f838;
  margin-top: 3px;
}

.about-actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.btn-about-primary{
  background: #0f2a2a;
  border: 1px solid #0f172a;
  color: var(--c-white);
  font-weight: 800;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.btn-about-primary:hover{
  opacity: 0.92;
  color: #94e0c7;
  transform: translateY(-2px);
}

.btn-about-outline{
  background: transparent;
  border: 1px solid rgba(15, 23, 42, 0.25);
  color: #2a290f;
  font-weight: 800;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.btn-about-outline:hover{
  border-color: #f8a838;
  color: #38f865;
}

.about-image img{
  width: 100%;
  border-radius: 18px;
  object-fit: cover;
  box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}

@media (max-width: 991.98px){
  .section-about{ padding: 80px 0; }
}


/* =========================================================
   8) COTIZACIÓN (FORM + CARDS DERECHA)
   ========================================================= */
.quote-section{
  position: relative;
  min-height: 640px;
  padding: 90px 0;
  overflow: hidden;
}

/* Fondo */
.quote-bg{
  position: absolute;
  inset: 0;
  background: url("../img/cajas.jpg") center/cover no-repeat;
  transform: scale(1.02);
  z-index: 0;
}

.quote-overlay{
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  z-index: 1;
}

.quote-wrap{
  position: relative;
  z-index: 2;
}

.quote-wrap .row{
  justify-content: center;
  align-items: flex-start;
}

/* Card form */
.quote-card{
  background: var(--c-white);
  border-radius: var(--radius-md);
  padding: 28px 26px;
  box-shadow: 0 18px 45px rgba(0,0,0,0.22);
  transform: translateY(-20px);
}

.quote-mini{
  text-align: center;
  font-weight: 800;
  letter-spacing: 2px;
  font-size: 12px;
  margin-bottom: 4px;
  color: rgba(15, 23, 42, 0.70);
}

.quote-title{
  text-align: center;
  font-weight: 900;
  font-size: 50px;
  margin-bottom: 18px;
  color: #ffd61f;
}

.quote-input{
  border-radius: 999px;
  padding: 12px 14px;
  border: 1px solid rgba(15, 23, 42, 0.18);
  font-size: 16px;
}

.quote-input:focus{
  border-color: rgba(56, 189, 248, 0.9);
  box-shadow: 0 0 0 0.2rem rgba(56, 189, 248, 0.18);
}

textarea.quote-input{ border-radius: 14px; }

.quote-btn{
  background: #ffc71f;
  border: 1px solid #ffcb1f;
  color: var(--c-white);
  font-weight: 900;
  padding: 12px 16px;
  border-radius: 999px;
  letter-spacing: 0.5px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.quote-btn:hover{
  opacity: 0.92;
  color: #ff831e;
  transform: translateY(-2px);
}

/* Cards derecha */

.qcontact-text{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: rgba(255,255,255,.9);
  font-size: 15px;
  line-height: 1.35;
  margin-bottom: 10px;
}

.qcontact-text i{
  color: #ffb020;
  margin-top: 2px;
  flex: 0 0 auto;
}

.qcontact-card{
  background: rgba(5,35,98,0.55);
  border-radius: var(--radius-md);
  padding: 18px;
  color: #fff;
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 40px rgba(0,0,0,.22);
  height: 100%;
  text-align: center;
}

.qcontact-title{ font-weight: 900; margin-bottom: 2px; }
.qcontact-sub{ font-weight: 700; opacity: .85; margin-bottom: 10px; }

/* Links (unificado: aquí estaba duplicado en tu CSS) */
.qcontact-link{
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  font-size: .95rem;

  text-decoration: none;
  color: #fff;
  cursor: pointer;
  transition: opacity .2s ease, transform .2s ease;
}

.qcontact-link i{ color: var(--c-accent); }

.qcontact-link:hover{
  opacity: .9;
  transform: translateY(-1px);
}

.qcontact-link-block{
  display: block;
  margin-bottom: 10px;
  line-height: 1.45;
}

.qcontact-link-center{ justify-content: center; }
.qcontact-card-center{ text-align: center; }

/* Centrado columna derecha */
.quote-side-center{
  display: flex;
  align-items: center;
  justify-content: center;
}

.quote-side-center .qcontact-wrap{
  width: 100%;
  max-width: 860px;
}

@media (min-width: 992px){
  .quote-side-center{
    min-height: 520px;
    transform: translateX(160px);
  }
}

@media (max-width: 991.98px){
  .quote-section{
    padding: 70px 0;
    min-height: auto;
  }
}


/* =========================================================
   9) CONTACTO (PÁGINA CONTACTO)
   ========================================================= */
.contact-page{ background: #ffffff; }

.contact-hero{
  min-height: 90vh;
  padding-top: 150px; /* navbar fixed */
}

.contact-media{
  min-height: 520px;
  background: url("../img/exportacion.jpg") center/cover no-repeat;
}

.contact-panel{
  background: #eef4f8;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 18px;
}

.contact-box{
  width: min(560px, 100%);
  background: transparent;
}

.contact-title{
  font-weight: 900;
  color: #2d0b45;
  margin-bottom: 18px;
}

.contact-input{
  border-radius: 999px;
  padding: 12px 14px;
  border: 1px solid rgba(15, 23, 42, 0.18);
  font-size: 14px;
}

.contact-input:focus{
  border-color: rgba(56, 189, 248, 0.9);
  box-shadow: 0 0 0 0.2rem rgba(56, 189, 248, 0.18);
}

.contact-textarea{ border-radius: 14px; }

.contact-link{
  color: #ff3b1f;
  font-weight: 800;
  text-decoration: none;
}
.contact-link:hover{ text-decoration: underline; }

.contact-btn{
  background: #1f7cff;
  border: 1px solid #ff3b1f;
  color: var(--c-white);
  font-weight: 900;
  padding: 12px 18px;
  border-radius: 999px;
  width: 210px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.contact-btn:hover{ opacity: 0.92; color: #1f87f5; }

@media (max-width: 767.98px){
  .contact-btn{ width: 100%; }
}

/* NAV sólido en contacto */
.page-contact .navbar-custom{
  background-color: var(--c-primary);
  padding: 30px 0;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}
.page-contact .navbar-custom .logo-img{ height: 48px; }
.page-contact .navbar-custom .nav-link{
  color: var(--c-white);
  font-size: 22;
  font-weight: 600;
}
.page-contact .navbar-custom .nav-link:hover{ color: #c97d26; }
.page-contact .navbar-custom .navbar-toggler{ border-color: rgba(255,255,255,0.5); }
.page-contact .navbar-custom .navbar-toggler-icon{ filter: brightness(0) invert(1); }

/* ================= CONTACTO PAGE: SEPARAR DEL NAV + CENTRAR ================= */

/* MÁS espacio arriba (navbar fixed) */
.page-contact .contact-hero{
  padding-top: 180px;   /* súbele/bájale: 180-260 */
  min-height: 100vh;    /* que se vea centrado en pantalla */
}

/* Centrar vertical el contenido (panel derecho) */
.page-contact .contact-panel{
  min-height: calc(100vh - 220px); /* mismo valor que el padding-top */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Si quieres el título/inputs un poquito más centrados visualmente */
.page-contact .contact-box{
  padding-top: 0;
}

/* Responsive: en móvil menos espacio arriba */
@media (max-width: 767.98px){
  .page-contact .contact-hero{
    padding-top: 150px;
  }
  .page-contact .contact-panel{
    min-height: calc(100vh - 150px);
    padding-top: 10px;
    padding-bottom: 30px;
  }
}

/* ================= CONTACTO: FORM MÁS GRANDE Y LEGIBLE ================= */

/* Título */
.page-contact .contact-title{
  font-size: clamp(2rem, 2.8vw, 2.6rem);
  font-weight: 900;
  margin-bottom: 28px;
}

/* Inputs y textarea */
.page-contact .contact-input{
  font-size: 16px;              /* texto más grande */
  padding: 14px 18px;           /* más alto */
}

/* Textarea más cómoda */
.page-contact .contact-textarea{
  min-height: 160px;
  padding: 16px 18px;
}

/* Separación entre campos */
.page-contact .contact-form .row{
  row-gap: 18px;
}

/* Botón más grande y pro */
.page-contact .contact-btn{
  margin-top: 10px;
  font-size: 16px;
  padding: 14px 26px;
}

/* Caja del formulario un poco más ancha */
.page-contact .contact-box{
  width: min(620px, 100%);
}

/* Desktop grande: todavía más presencia */
@media (min-width: 1200px){
  .page-contact .contact-title{
    font-size: 2.8rem;
  }

  .page-contact .contact-input{
    font-size: 17px;
    padding: 16px 20px;
  }

  .page-contact .contact-textarea{
    min-height: 180px;
  }
}


/* =========================================================
   10) HERO IMAGEN (OTRAS PÁGINAS)
   ========================================================= */
.hero-img{
  position: relative;
  height: clamp(620px, 90vh, 860px);
  overflow: hidden;
}

.hero-img-layer{
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg-img{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.9s ease, transform 2.2s ease;
  transform: scale(1.05);
}

.hero-bg-img.is-active{
  opacity: 1;
  transform: scale(1.02);
}


/* =========================================================
   11) NOSOTROS (SPLIT + MISIÓN/VALORES + TEAM)
   ========================================================= */

/* Split */
.about-split{
  padding: 100px 0;
  background: #ffffff;
}

.about-split-title{
  font-weight: 900;
  font-size: clamp(2rem, 3.2vw, 3rem);
  color: #3b0764;
  margin-bottom: 18px;
  line-height: 1.1;
}

.about-split-title span{ color: #ffa51f; }

.about-split-text{
  color: rgba(15, 23, 42, 0.78);
  line-height: 1.8;
  margin-bottom: 16px;
  max-width: 60ch;
}

.about-split-media{
  display: flex;
  justify-content: center;
  align-items: center;
}

.about-split-media img{
  width: min(520px, 100%);
  height: auto;
}

.btn-about-split{
  background: #39ff1f;
  border: 1px solid #ff3b1f;
  color: var(--c-white);
  font-weight: 900;
  padding: 12px 20px;
  border-radius: 999px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.btn-about-split:hover{
  opacity: 0.92;
  color: var(--c-white);
  transform: translateY(-2px);
}

@media (max-width: 991.98px){
  .about-split{
    padding: 80px 0;
    text-align: center;
  }
  .about-split-text{
    margin-left: auto;
    margin-right: auto;
  }
}

/* Misión/Valores */
.mission-values{
  padding: 100px 0;
  background: rgba(15, 23, 42, 0.03);
}

.mv-image img{
  width: 100%;
  border-radius: 18px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}

.mv-title{
  font-weight: 900;
  font-size: clamp(2rem, 3vw, 2.6rem);
  color: #3b0764;
  margin-bottom: 24px;
}

.mv-box{
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: #ffffff;
  padding: 18px 18px;
  border-radius: var(--radius-md);
  margin-bottom: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.mv-icon{
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 59, 31, 0.12);
  color: #ff3b1f;
  font-size: 20px;
  flex-shrink: 0;
}

.mv-box h4{
  font-weight: 800;
  margin-bottom: 6px;
  color: #2d0b45;
}

.mv-box p,
.mv-values li{
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  color: rgba(15, 23, 42, 0.78);
}

@media (max-width: 991.98px){
  .mission-values{ padding: 80px 0; }
  .mv-title{ text-align: center; }
}

.mv-head-title{
  font-weight: 900;
  font-size: clamp(2rem, 3vw, 2.8rem);
  color: #dd812b;
  margin-bottom: 6px;
}

.mv-values{
  list-style: none;
  padding: 0;
  margin: 8px 0 0 0;
}

.mv-values li{
  position: relative;
  padding-left: 22px;
  margin-bottom: 6px;
  color: rgba(15, 23, 42, 0.78);
  font-size: 15px;
  line-height: 1.5;
}

.mv-values li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  background: #ff7a1a;
  border-radius: 50%;
}

/* ================= TEAM ================= */
.team-section{
  padding: 110px 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(173, 216, 230, 0.18) 100%
  );
}

.team-head{ margin-bottom: 18px; }

.team-kicker{
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
  color: rgba(15, 23, 42, 0.75);
  margin-bottom: 6px;
  text-transform: uppercase;
}

.team-title{
  font-weight: 900;
  font-size: clamp(2.2rem, 3.4vw, 3.2rem);
  color: #ff3b1f;
  margin: 0;
}

/* ================= CARD ================= */
.team-card{
  background: transparent;
  border-radius: 18px;
  padding: 22px;
  height: 100%;
  transition: transform .3s ease, box-shadow .3s ease;
}

.team-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0,0,0,.12);
}

/* ================= LOGO CARD ================= */
.team-card-logo{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 360px;
  padding: 0;
  box-shadow: none;
}

.team-logo{
  width: min(220px, 70%);
  height: auto;
  opacity: 0.9;
}

/* ================= AVATAR SIN FOTO ================= */
.team-avatar{
  width: 160px;
  height: 160px;
  margin: 0 auto 22px;
  background: linear-gradient(135deg, hsl(28, 100%, 68%), #ff6a3d);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  transition: transform .3s ease;
}

.team-card:hover .team-avatar{
  transform: scale(1.05);
}

.team-avatar span{
  font-size: 48px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 2px;
}

/* ================= TEXTO ================= */
.team-meta{ padding-top: 6px; }

.team-name{
  font-weight: 900;
  color: #fb8840;
  font-size: 18px;
  margin-bottom: 2px;
}

.team-role{
  margin: 0;
  color: rgba(15, 23, 42, 0.75);
  font-weight: 600;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 991.98px){
  .team-section{ padding: 90px 0; }

  .team-card-logo{ min-height: 280px; }

  .team-avatar{
    width: 130px;
    height: 130px;
  }

  .team-avatar span{
    font-size: 38px;
  }
}



/* =========================================================
   12) WHATSAPP FLOAT
   ========================================================= */
.whatsapp-float{
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 9999;
  text-decoration: none;
}

.whatsapp-bubble{
  background: #ffffff;
  color: #ff0303;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  transition: transform .25s ease, opacity .25s ease;
}

.whatsapp-icon{
  width: 64px;
  height: 64px;
  background: #25D366;
  color: #ffffff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 32px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  transition: transform .25s ease;
}

.whatsapp-float:hover .whatsapp-icon{ transform: scale(1.08); }
.whatsapp-float:hover .whatsapp-bubble{ transform: translateX(-4px); }

@media (max-width: 575.98px){
  .whatsapp-bubble{ display: none; }
}

/* ================= NAV: SEPARACIÓN ENTRE LINKS ================= */

/* Desktop */
.navbar-custom .navbar-nav{
  gap: 26px;   /* prueba 22–32px */
}

/* En estado scrolled */
.navbar-custom.scrolled .navbar-nav{
  gap: 28px;
}

/* En contacto (nav sólido) */
.page-contact .navbar-custom .navbar-nav{
  gap: 26px;
}

/* =========================================================
   SERVICIOS TRANSPORTE (page) – HERO CENTRADO + ANIMADO
   ========================================================= */

.page-services{
  background:#ffffff;
}

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

.service-hero{
  position: relative;
  min-height: 86vh;
  padding-top: 160px;       /* espacio navbar fixed */
  padding-bottom: 80px;    /* balance visual */
  overflow: hidden;

  display: flex;
  align-items: center;     /* centro vertical */
}

/* Fondo */
.service-hero-bg{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.01);  /* leve zoom sin blur */
  z-index: 0;
}

/* Overlay optimizado (no lavado) */
.service-hero-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(5,35,98,0.65) 0%,
    rgba(5,35,98,0.38) 45%,
    rgba(5,35,98,0.12) 100%
  );
}

/* ================= CONTENIDO ================= */

.service-hero-content2{
  position: relative;
  z-index: 2;

  max-width: 980px;
  width: 100%;
  margin: 0 auto;
  padding-left: 15px;
  padding-right: 15px;

  text-align: center;

  /* posición tipo corporativo (ligeramente arriba) */
  transform: translateY(-30px);

  /* animación entrada */
  animation: heroFadeUp 0.9s ease-out both;
}

/* Kicker */
.service-hero-kicker{
  color: #ffb44a;
  font-weight: 900;
  letter-spacing: 2px;
  margin: 0 0 12px 0;
  text-transform: uppercase;

  animation: heroFadeUp 0.9s ease-out both;
  animation-delay: 0.1s;
}

/* Título */
.service-hero-title{
  color: #ffffff;
  font-weight: 900;
  line-height: 1.05;
  font-size: clamp(2.4rem, 3.8vw, 3.6rem);
  margin: 0 0 16px 0;

  animation: heroFadeUp 0.9s ease-out both;
  animation-delay: 0.2s;
}

/* Subtítulo */
.service-hero-subtitle{
  color: rgba(255,255,255,0.88);
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  max-width: 62ch;
  margin: 0 auto 28px auto;

  animation: heroFadeUp 0.9s ease-out both;
  animation-delay: 0.35s;
}

/* Botones */
.service-hero-actions{
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;

  animation: heroFadeUp 0.9s ease-out both;
  animation-delay: 0.5s;
}

/* ================= ANIMACIÓN ================= */

@keyframes heroFadeUp{
  from{
    opacity: 0;
    transform: translateY(30px);
  }
  to{
    opacity: 1;
    transform: translateY(-30px);
  }
}

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

@media (max-width: 991.98px){
  .service-hero{
    padding-top: 140px;
    padding-bottom: 60px;
  }

  .service-hero-content2{
    transform: translateY(-15px);
  }
}

@media (max-width: 575.98px){
  .service-hero{
    min-height: 92vh;
    padding-top: 120px;
  }

  .service-hero-content2{
    transform: translateY(0);
  }
}

/* =========================================================
   COBERTURA NACIONAL (TRANSPORTE)
   ========================================================= */
/* ================= TÍTULO COBERTURA ================= */
.coverage-head{
  margin-bottom: 35px;
}

.coverage-kicker{
  font-weight: 800;
  letter-spacing: 2px;
  color: #ffb44a;
  font-size: 13px;
  margin-bottom: 6px;
}

.coverage-title{
  font-size: clamp(1.2rem, 2.1vw, 2rem);
  font-weight: 200;
  color: var(--c-primary);
  margin-bottom: 8px;
}

.coverage-subtitle{
  max-width: 60ch;
  margin: 0 auto;
  color: rgba(15,23,42,0.65);
  font-size: 1.05rem;
}

.transport-section{
  padding: 95px 0;
  background: #ffffff;
}

.transport-head{
  margin-bottom: 22px;
}

.transport-title{
  font-weight: 900;
  color: #052362;
  font-size: clamp(2rem, 3vw, 2.8rem);
  margin: 0 0 10px 0;
}

.transport-subtitle{
  color: rgba(15,23,42,.70);
  max-width: 70ch;
  margin: 0 auto;
  font-size: 1.05rem;
}

/* Card */
.transport-card{
  height: 100%;
  background: #ffffff;
  border: 1px solid rgba(5,35,98,.12);
  border-radius: 18px;
  padding: 18px 18px 20px;
  box-shadow: 0 14px 35px rgba(0,0,0,.08);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.transport-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 22px 55px rgba(0,0,0,.12);
  border-color: rgba(255,180,74,.45);
}

/* Imagen fija (evita que se deforme / tamaño consistente) */
.transport-media{
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(5,35,98,.06);
  border: 1px solid rgba(5,35,98,.10);
  aspect-ratio: 16 / 10; /* se ve moderno y parejo */
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}

.transport-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Títulos y textos */
.transport-card-title{
  font-weight: 900;
  color: #052362;
  font-size: 1.25rem;
  margin: 0 0 8px 0;
  line-height: 1.15;
}

.transport-card-text{
  margin: 0;
  color: rgba(15,23,42,.72);
  line-height: 1.55;
  font-size: 0.98rem;
}

/* Responsive */
@media (max-width: 991.98px){
  .transport-section{ padding: 80px 0; }
}

@media (max-width: 575.98px){
  .transport-card{ padding: 16px; }
  .transport-card-title{ font-size: 1.15rem; }
}
/* =========================================================
   SECCIÓN: MAPA + BENEFICIOS (COBERTURA)
   ========================================================= */
.transport-coverage-section{
  padding: 80px 0 90px;
  background: #ffffff;
}

/* Caja principal */
.transport-feature{
  background: rgba(15,23,42,0.03);
  border-radius: 26px;
  padding: 40px 32px;
  box-shadow: 0 20px 55px rgba(0,0,0,0.06);
}

/* Bullets */
.transport-bullets{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.transport-bullets li{
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: #ffffff;
  padding: 16px 18px;
  border-radius: 14px;
  font-weight: 600;
  color: rgba(15,23,42,0.8);
  box-shadow: 0 10px 28px rgba(0,0,0,0.06);
}

.transport-bullets i{
  color: #ffb44a;
  font-size: 18px;
  margin-top: 3px;
}

/* Mapa */
.transport-map{
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 18px 45px rgba(0,0,0,0.12);
}

.transport-map img{
  width: 100%;
  height: auto;
  display: block;
}

/* Responsive */
@media (max-width: 991.98px){
  .transport-feature{
    padding: 30px 22px;
  }

  .transport-bullets{
    gap: 18px;
  }
}


/* =========================================================
   RASTREO SATELITAL (GPS)
   ========================================================= */

.tracking-section{
  padding: 70px 0 100px;
  background: rgba(15, 23, 42, 0.03);
}

.tracking-card{
  background: #ffffff;
  border: 1px solid rgba(5,35,98,.10);
  border-radius: 22px;
  box-shadow: 0 18px 55px rgba(0,0,0,0.10);
  padding: 28px;
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 18px;
  align-items: start;
}

/* Icono redondo */
.tracking-icon{
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: rgba(5,35,98,.08);
  border: 1px solid rgba(5,35,98,.12);
  color: #052362;
  display: grid;
  place-items: center;
  font-size: 26px;
}

.tracking-title{
  margin: 0 0 10px 0;
  font-weight: 900;
  color: #052362;
  font-size: clamp(1.6rem, 2.2vw, 2rem);
}

.tracking-text{
  margin: 0 0 16px 0;
  color: rgba(15,23,42,.76);
  line-height: 1.75;
  font-size: 1.02rem;
  max-width: 90ch;
}

/* Pills */
.tracking-pills{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.tracking-pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,180,74,.16);
  border: 1px solid rgba(255,180,74,.32);
  color: rgba(15,23,42,.85);
  font-weight: 700;
  font-size: 0.95rem;
}

/* Botón */
.tracking-actions .btn-why{
  padding: 14px 22px;
  font-size: 1rem;
}

/* Responsive */
@media (max-width: 767.98px){
  .tracking-card{
    grid-template-columns: 1fr;
    padding: 22px;
  }
  .tracking-icon{
    width: 58px;
    height: 58px;
    border-radius: 16px;
  }
}

/* SEPARACIÓN ENTRE INFO BAR y COTIZACIÓN */
.info-bar{
  margin-bottom: 70px; /* prueba 50-110px */
}

/* En móvil menos separación */
@media (max-width: 767.98px){
  .info-bar{
    margin-bottom: 45px;
  }
}

/* =========================================================
   ALMACENAJE (page) - estilos extra
   ========================================================= */

.page-storage .service-hero-actions{
  justify-content: center;
}

/* Tarjeta tipo “Almacenaje y Distribución” (la de tu imagen) */
.storage-tile-section{
  padding: 95px 0 70px;
  background: #ffffff;
}

.storage-tile{
  width: 240px;
  border: 1.6px solid rgba(5,35,98,.28);
  border-radius: 22px;
  background: rgba(15,23,42,0.03);
  padding: 18px 18px 20px;
  text-align: center;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
}

.storage-tile-media{
  width: 108px;
  height: 108px;
  border-radius: 18px;
  overflow: hidden;
  margin: 0 auto 14px;
  background: #fff;
}

.storage-tile-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.storage-tile-title{
  margin: 0;
  font-weight: 900;
  color: rgba(15,23,42,.92);
  font-size: 18px;
  line-height: 1.15;
}

/* Cards de capacidades (aprovecha tu transport-card base) */
.storage-caps .transport-card{
  height: 100%;
  text-align: left;
}

.storage-card{
  transition: transform .22s ease, box-shadow .22s ease;
}

.storage-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
}

.storage-card-icon{
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(5,35,98,.08);
  border: 1px solid rgba(5,35,98,.12);
  color: #052362;
  font-size: 20px;
  margin-bottom: 12px;
}

.transport-card .transport-card-title{
  font-weight: 900;
  color: #052362;
  margin: 0 0 6px 0;
  font-size: 18px;
}

.transport-card .transport-card-text{
  margin: 0;
  color: rgba(15,23,42,.72);
  line-height: 1.55;
}

/* CTA */
.storage-cta{
  padding: 70px 0 95px;
  background: rgba(15,23,42,0.03);
}

.storage-cta-card{
  border-radius: 22px;
  padding: 26px 22px;
  background: #ffffff;
  border: 1px solid rgba(5,35,98,.10);
  box-shadow: 0 18px 50px rgba(0,0,0,.08);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.storage-cta-title{
  margin: 0 0 6px 0;
  font-weight: 900;
  color: #052362;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
}

.storage-cta-text{
  margin: 0;
  color: rgba(15,23,42,.70);
}

.storage-cta-actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}


/* =========================================================
   ANIMACIONES SUAVES (Reveal on scroll)
   ========================================================= */
.reveal{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s ease, transform .55s ease;
  will-change: opacity, transform;
}

.reveal.in-view{
  opacity: 1;
  transform: translateY(0);
}

.reveal-zoom{
  opacity: 0;
  transform: translateY(14px) scale(.98);
  transition: opacity .55s ease, transform .55s ease;
  will-change: opacity, transform;
}
.reveal-zoom.in-view{
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Stagger (delay por variable CSS) */
[data-delay]{
  transition-delay: var(--d, 0ms);
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-zoom{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}



/* =========================================================
   FIX NAV MOBILE: evita que el brand se coma la hamburguesa
   (PEGAR AL FINAL DEL CSS)
   ========================================================= */
@media (max-width: 991.98px){

  /* vuelve a comportarse como Bootstrap: brand izquierda + toggler derecha */
  .navbar-custom .container{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 10px;
  }

  /* el brand NO debe centrarse ni crecer infinito */
  .navbar-custom .navbar-brand{
    flex: 1 1 auto !important;
    min-width: 0 !important;       /* CLAVE para que recorte */
    margin: 0 !important;
  }

  /* quita el "centrado" en columna para móvil */
  .navbar-custom .brand-stack{
    align-items: flex-start !important;
  }

  /* el texto recorta y no empuja */
  .navbar-custom .brand-text{
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 11px !important;
    margin-top: 4px !important;
  }

  /* la hamburguesa nunca se encoge */
  .navbar-custom .navbar-toggler{
    flex: 0 0 auto !important;
    margin-left: 8px !important;
    z-index: 5;
  }
}

@media (max-width: 991.98px){
  .navbar-custom .container{
    flex-wrap: wrap !important;
  }
  .navbar-custom .navbar-collapse{
    width: 100% !important;
    flex-basis: 100% !important;
    margin-top: 12px;
  }
}

/* =========================================================
   FIX BRAND MOBILE: que no empuje al toggler
   ========================================================= */
@media (max-width: 575.98px){

  /* que el brand no sea "columnota" */
  .navbar-custom .navbar-brand.brand-stack{
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px;
  }

  /* el texto del slogan: que no se desborde */
  .navbar-custom .brand-text{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;     /* máximo 2 líneas */
    overflow: hidden;
    max-width: 190px;          /* ajusta 160-220 según te guste */
    margin-top: 0 !important;
    line-height: 1.15;
    font-size: 11px;
  }

  /* logo más chico para que quepa */
  .navbar-custom .logo-img{
    height: 40px !important;
  }
}

/* ================= HAMBURGER VISIBLE EN MÓVIL ================= */
@media (max-width: 991.98px){

  .navbar-custom .navbar-toggler{
    background: rgba(255, 206, 138, 0.774);   /* naranja LOING */
    border: 2px solid #ffffff;
    border-radius: 10px;
    padding: 6px 10px;
    box-shadow: 0 6px 18px rgba(255, 255, 255, 0.25);
  }

  /* icono blanco */
  .navbar-custom .navbar-toggler-icon{
    filter: brightness(0) invert(1);
  }

  .navbar-custom .navbar-toggler:focus{
    box-shadow: 0 0 0 0.15rem rgba(255,180,74,.45);
  }
}


/* ================= INFO BAR: móvil más limpio ================= */
@media (max-width: 575.98px){

  .info-bar{
    padding: 34px 0;           /* menos alto pero más ordenado */
  }

  .info-bar .row{
    row-gap: 18px;             /* separa cada bloque (Horario/Llámanos/Contáctanos) */
  }

  .info-bar .col-12{
    justify-content: flex-start; /* evita que se vea “apretado” al centro */
    text-align: left;
  }

  .info-icon{
    width: 46px;
    height: 46px;
    font-size: 16px;
    flex: 0 0 46px;
  }

  .info-text strong{
    font-size: 12px;
    margin-bottom: 4px;
    letter-spacing: 1px;
  }

  .info-text p{
    font-size: 16px;           /* antes 20px */
    line-height: 1.35;
  }

  /* “aire” entre líneas (tel/tel/correo) */
  .info-text p a{
    display: inline-block;
    margin-top: 4px;
  }
}
/* ================= FIX: logo se pierde en SCROLLED (móvil) ================= */
.navbar-custom.scrolled{
  overflow: visible; /* por si algo se estaba recortando */
}

@media (max-width: 991.98px){

  /* en scrolled, quita el texto largo para que no se corte */
  .navbar-custom.scrolled .brand-text{
    display: none;
  }

  /* mantén el logo a un tamaño seguro */
  .navbar-custom.scrolled .logo-img{
    height: 44px;      /* prueba 40-48 */
  }

  /* el brand no debe crecer en alto */
  .navbar-custom.scrolled .navbar-brand.brand-stack{
    flex-direction: row;     /* logo en línea */
    gap: 10px;
    align-items: center;
  }

  /* y si quieres conservar texto, usa versión corta */
  /* (opcional: si tienes un span corto, aquí lo muestras) */
}

/* ===========================
   FIX HAMBURGER (MOBILE)
   =========================== */
.navbar-custom .navbar-toggler{
  background: rgba(5,35,98,.55) !important;   /* azul LOING */
  border: 1px solid rgba(255,255,255,.35) !important;
  border-radius: 14px !important;
  padding: 10px 12px !important;
  box-shadow: 0 10px 25px rgba(0,0,0,.22) !important;
}

.navbar-custom .navbar-toggler:focus,
.navbar-custom .navbar-toggler:active{
  outline: none !important;
  box-shadow: 0 10px 25px rgba(0,0,0,.22) !important;
}

/* Ícono BLANCO (Bootstrap usa variable para el SVG) */
.navbar-custom{
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.95)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

.navbar-custom .navbar-toggler-icon{
  background-image: var(--bs-navbar-toggler-icon-bg) !important;
  filter: none !important;
}

/* Evita que el contenido se "salga" en scrolled */
.navbar-custom.scrolled{
  height: auto !important;          /* quita el alto fijo que rompe en móvil */
  min-height: 86px;                 /* tu alto deseado */
  padding: 10px 0 !important;       /* da aire arriba/abajo */
  overflow: visible !important;     /* que no corte sombras */
}

.navbar-custom.scrolled .container{
  align-items: center !important;
}

@media (max-width: 991.98px){
  .navbar-custom{
    padding: 12px 0 !important;
  }

  .navbar-custom .navbar-toggler{
    margin: 0 !important;
    transform: none !important;
    position: relative;
    top: 0;
  }

  /* si tu logo/brand stack es alto, esto ayuda */
  .navbar-custom .navbar-brand{
    margin: 0 !important;
    padding: 0 !important;
  }
}

@media (max-width: 991.98px){
  .navbar-custom .navbar-toggler{
    box-shadow: 0 6px 16px rgba(0,0,0,.18) !important;
  }
}

/* ================= RENT BENEFITS CLEAN ================= */
.rent-benefits-clean {
  padding: 100px 0;
  background-color: #ffffff;
}

.rent-title {
  font-size: 28px;
  font-weight: 700;
  color: #1f3aa9;
  margin-bottom: 30px;
}

.rent-item {
  max-width: 280px;
  margin: 0 auto;
}

.rent-icon {
  width: 90px;
  height: 90px;
  background-color: #ffb44a;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
}

.rent-icon i {
  font-size: 36px;
  color: #ffffff;
}

.rent-item p {
  font-size: 16px;
  color: #555;
  line-height: 1.6;
  margin: 0;
}
.rent-item:hover .rent-icon {
  transform: scale(1.08);
  transition: transform 0.3s ease;
}