/**styles_sitio.css**/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css');

:root{
  --lila:#8b5cf6;
  --lila-dark:#6d28d9;
  --lila-soft:#c4b5fd;
  --alizarin:#e53229;
  --text:#0f172a;
  --muted:#6b7280;
  --bg:#f8fafc;
}

body{
  font-family:'Montserrat', sans-serif;
  background:var(--bg);
  color:var(--text);
}

/* NAVBAR */
.navbar{
  background:var(--lila-dark);
  padding:.9rem 0;
}
.navbar-brand img{
  height:70px;
}
.nav-link{
  color:#f3e8ff !important;
  font-weight:500;
  margin:0 .4rem;
}
.nav-link:hover{
  color:#fff !important;
}

/* Submenú lateral */
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-left: .1rem;
  margin-right: .1rem;
  
}

/* Quitar el fondo lila global */
.dropdown-menu {
    background: #ffffff !important;
    border-radius: 12px !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 8px 25px rgba(0,0,0,.15) !important;
}

/* Texto correcto dentro de dropdowns */
.dropdown-menu .dropdown-item {
    color: #1f2937 !important;
    font-weight: 500;
}


.navbar .dropdown-menu {
    background: #ffffff !important;
}

/* Hover igual al resto del sitio */
.dropdown-menu .dropdown-item:hover {
    background: #f3f4f6 !important;
    color: #111827 !important;
}

/* Flecha visual */
.dropdown-submenu > a::after {
  content: "›";
  float: right;
  font-size: 1rem;
  margin-top: 2px;
  opacity: .6;
}

/* Hover para escritorio */
@media (min-width: 992px) {
  
  .dropdown-hover:hover > .dropdown-menu {
    display: block;
    color:black !important;
  }
  .dropdown-submenu:hover > .dropdown-menu {
    display: block;
  }
}


/* BOTÓN LOGIN */
.btn-login{
  background:var(--alizarin);
  color:#fff;
  border:none;
  padding:.45rem 1.2rem;
  border-radius:999px;
  font-weight:600;
  font-size:.85rem;
}
.btn-login:hover{
  background:#c3251f;
}

/* BOTÓN PSE */
.btn-pse{
  background:var(--lila);
  color:#fff;
  display:flex;
  align-items:center;
  gap:.45rem;
  padding:.45rem 1rem;
  border-radius:999px;
  font-weight:600;
  font-size:.85rem;
  border:none;
  transition:.25s ease;
}
.btn-pse:hover{
  background:var(--lila-dark);
}
.btn-pse img{
  height:20px;
}

/* HERO */
.hero{
  position:relative;
  height:70vh;
  display:flex;
  align-items:center;
  background:url('../../../assets/images/pasamar perfil-f.jpg') center/cover no-repeat;
}
.hero::after{
  content:'';
  position:absolute;
  inset:0;
  /*background:linear-gradient(90deg, rgba(109,40,217,.85) 0%, rgba(139,92,246,.45) 40%, transparent 100%);*/
  background: linear-gradient(90deg,
    rgba(109,40,217,.4) 0%,
    transparent 15%
);

}
.hero-content {
  position: absolute;
  z-index: 2;
  color: #fff;
  max-width: 500px;
  padding-left: 1rem;
  margin-top: -170px; /* sube el bloque */
}

/*
.hero-content{
  position:relative;
  z-index:2;
  color:white;
  max-width:600px;
}
*/
.hero-content h1{
  font-size:2.8rem;
  font-weight:800;
  color:#6a4bc3;
}
.hero-content p{
  font-size:1rem;
  color:#6a4bc3;
  margin-top:.5rem;
}

/* HERO */
.hero-servicio{
  height:55vh;
  background:center/cover no-repeat;
  position:relative;
  display:flex;
  align-items:center;
}

/* SLIDER CORPORATIVO */
.slider-corp {
  width: 100%;
  height: 55vh; /* Altura ideal para banners horizontales */
  margin-top: 2rem;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  background: #f3f3f3; /* fallback */
}

/* Cada slide */
.slider-corp .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Imagen del banner */
.slider-corp img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Mantiene proporción sin deformar */
  object-position: center; /* Centra el contenido importante */
  border-radius: 18px;
  display: block;
  transition: transform .6s ease;
}

/* Efecto premium */
.slider-corp:hover img {
  transform: scale(1.03);
}

/* Paginación Swiper */
.slider-corp .swiper-pagination-bullet {
  background: #ffffffaa;
  opacity: 1;
}

.slider-corp .swiper-pagination-bullet-active {
  background: #6a4bc3; /* Lila Pasamar */
}

/* Responsivo */
@media (max-width: 992px) {
  .slider-corp {
    height: 45vh;
  }
}

@media (max-width: 768px) {
  .slider-corp {
    height: 38vh;
  }
}

@media (max-width: 480px) {
  .slider-corp {
    height: 32vh;
  }
}


/* SOBRE NOSOTROS */
.section-title{
  font-size:1.6rem;
  font-weight:700;
  color:var(--lila-dark);
}
.section p{
  font-size:1rem;
  color:var(--muted);
  max-width:620px;
}
.sobre-img{
  width:100%;
  border-radius:18px;
  box-shadow:0 18px 45px rgba(0,0,0,.18);
}

.servicios-slider{
  background:linear-gradient(180deg,#e8ecff,#f7f8ff);
}

.servicio-card{
  background:white;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 6px 20px rgba(0,0,0,.12);
  transition:.25s ease;
  height:100%;
  display:flex;
  flex-direction:column;
}

.servicio-card:hover{
  transform:translateY(-6px);
  box-shadow:0 10px 28px rgba(0,0,0,.18);
}

.servicio-img{
  width:100%;
  height:180px;
  object-fit:cover;
}

.servicio-body{
  padding:1.3rem;
  flex-grow:1;
}

.servicio-body h5{
  font-weight:700;
  color:#1f2937;
}

.servicio-body p{
  color:#4b5563;
  font-size:.95rem;
  margin-bottom:1rem;
}

.btn-servicio{
  background:#8b5cf6;
  color:white;
  border:none;
  padding:.45rem 1.2rem;
  border-radius:8px;
  font-weight:600;
  transition:.25s ease;
}

.btn-servicio:hover{
  background:#6d28d9;
}


/* NUEVO CLIENTE */
.nuevo-box{
  background:#ffffff;
  border-radius:18px;
  padding:2rem;
  border:1px solid #e5e7eb;
  box-shadow:0 10px 25px rgba(0,0,0,.08);
}
.nuevo-box input{
  height:48px;
}

/* CONTACTOS */
.contacts-box{
  background:var(--lila-soft);
  border-radius:16px;
  padding:1.4rem;
  border:1px solid #e0e7ff;
}
.contacts-title{
  font-size:.9rem;
  font-weight:700;
  color:var(--lila-dark);
  text-transform:uppercase;
  letter-spacing:.1em;
}
.contacts-list span{
  font-size:.95rem;
  font-weight:600;
  margin-right:1.2rem;
}

/* FOOTER */
footer{
  background:#1e1b4b;
  color:#d1d5db;
  padding:1.8rem 0;
  font-size:.85rem;
}
footer .brand{
  color:#fff;
  font-weight:700;
}

/* MODAL ANIMATION */
.modal-zoom {
  animation: zoomIn .35s ease;
}


@keyframes zoomIn {
  from { transform: scale(.85); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}



@keyframes zoomIn {
  from { transform: scale(.85); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* RESPONSIVE */
@media(max-width: 1300px){
  .hero{ height:55vh; }
  .hero-content h1{ font-size:2.2rem; }
}
@media(max-width: 10px){
  .hero{ height:55vh; align-items:flex-end; padding-bottom:2.5rem; }
  .hero-content{ padding-left:0; }
  .hero-content h1{ font-size:1.9rem; }
  .slider-corp{ height:32vh; }
}
@keyframes spin {
  from { transform:rotate(0deg); }
  to { transform:rotate(360deg); }
}

#loader.fade-out {
  opacity:0;
  transition:opacity .6s ease;
  pointer-events:none;
}


.sede-card {
    background: #fff;
    border-radius: 14px;
    min-height: 260px; /* ajusta según tu diseño */
    padding: 20px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.sede-ciudad {
    color: #6d28d9;
    font-weight: 700;
    margin-bottom: 10px;
}

.sede-tipo {
    font-weight: 600;
    margin-bottom: 6px;
}

.btn-mapa {
    background: #6d28d9;
    color: #fff;
    border: none;
    padding: 10px 14px;
    border-radius: 10px;
    margin-top: 12px;
    font-weight: 600;
    cursor: pointer;
}

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

.sede-img {
  width:100%;
  height:160px;
  object-fit:cover;
}

.sede-content {
  padding:1.2rem;
}

.sede-title {
  font-weight:700;
  color:var(--lila-dark);
  margin-bottom:.4rem;
}

.sede-sub {
  font-weight:600;
  color:var(--lila);
}

.sede-text {
  color:#6b6b6b;
  font-size:.95rem;
}

.modal-zoom {
  animation: zoomIn .35s ease;
}

@keyframes zoomIn {
  from { transform: scale(.85); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* BOTONES LATERALES PASAMAR */
/* BOTONES LATERALES PASAMAR (compactos) */
.pasamar-side-buttons{
    position:fixed;
    right:15px;
    top:62%;
    transform:translateY(-50%);
    display:flex;
    flex-direction:column;
    gap:6px; /* MÁS JUNTOS */
    z-index:9999;
    transition: opacity .35s ease, transform .35s ease;
}

.pasamar-side-buttons div{
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,.25);
    padding:6px 10px; /* MÁS PEQUEÑOS */
    border-radius:10px;
    display:flex;
    align-items:center;
    gap:6px;
    color:white;
    font-weight:600;
    cursor:pointer;
    transition:.25s ease;
    box-shadow:0 3px 10px rgba(0,0,0,.25);
    font-size:.85rem; /* TEXTO MÁS PEQUEÑO */
}

.pasamar-side-buttons div:hover{
    transform:translateX(-4px);
    background:rgba(255,255,255,.22);
}

.pasamar-side-buttons i{
    font-size:1.1rem; /* ICONOS MÁS PEQUEÑOS */
}

/* RESPONSIVE (solo iconos en móvil) */
@media(max-width:768px){
    .pasamar-side-buttons{
        right:8px;
        gap:6px;
    }
    .pasamar-side-buttons div span{
        display:none;
    }
    .pasamar-side-buttons div{
        padding:8px;
        border-radius:50%;
        width:42px;
        height:42px;
        justify-content:center;
    }
    .pasamar-side-buttons i{
        font-size:1.2rem;
    }
}

.pasamar-hidden{
    opacity:0;
    pointer-events:none;
    transform:translateY(20px);
}






/* ===== COLORES SUAVES + GLOW TRANSPARENTE POR RED SOCIAL ===== */

/* WhatsApp */
.pasamar-side-buttons div:nth-child(1){
    background:rgba(37,211,102,0.35);
    box-shadow:0 0 10px rgba(37,211,102,0.45);
}
.pasamar-side-buttons div:nth-child(1):hover{
    background:rgba(37,211,102,0.55);
    box-shadow:0 0 16px rgba(37,211,102,0.75);
}

/* Instagram */
.pasamar-side-buttons div:nth-child(2){
    background:linear-gradient(45deg,
        rgba(254,218,117,0.35),
        rgba(250,126,30,0.35),
        rgba(214,41,118,0.35),
        rgba(150,47,191,0.35),
        rgba(79,91,213,0.35)
    );
    box-shadow:0 0 10px rgba(214,41,118,0.45);
}
.pasamar-side-buttons div:nth-child(2):hover{
    filter:brightness(1.2);
    box-shadow:0 0 16px rgba(214,41,118,0.75);
}

/* Facebook */
.pasamar-side-buttons div:nth-child(3){
    background:rgba(24,119,242,0.35);
    box-shadow:0 0 10px rgba(24,119,242,0.45);
}
.pasamar-side-buttons div:nth-child(3):hover{
    background:rgba(24,119,242,0.55);
    box-shadow:0 0 16px rgba(24,119,242,0.75);
}

/* TikTok */
.pasamar-side-buttons div:nth-child(4){
    background:rgba(0,0,0,0.35);
    box-shadow:0 0 10px rgba(0,0,0,0.45);
}
.pasamar-side-buttons div:nth-child(4):hover{
    background:rgba(0,0,0,0.55);
    box-shadow:0 0 16px rgba(0,0,0,0.75);
}

/* YouTube */
.pasamar-side-buttons div:nth-child(5){
    background:rgba(255,0,0,0.35);
    box-shadow:0 0 10px rgba(255,0,0,0.45);
}
.pasamar-side-buttons div:nth-child(5):hover{
    background:rgba(255,0,0,0.55);
    box-shadow:0 0 16px rgba(255,0,0,0.75);
}

/* LinkedIn */
.pasamar-side-buttons div:nth-child(6){
    background:rgba(10,102,194,0.35);
    box-shadow:0 0 10px rgba(10,102,194,0.45);
}
.pasamar-side-buttons div:nth-child(6):hover{
    background:rgba(10,102,194,0.55);
    box-shadow:0 0 16px rgba(10,102,194,0.75);
}

/* Web (Lila Metanoia) */
.pasamar-side-buttons div:nth-child(7){
    background:rgba(109,40,217,0.35);
    box-shadow:0 0 10px rgba(109,40,217,0.45);
}
.pasamar-side-buttons div:nth-child(7):hover{
    background:rgba(109,40,217,0.55);
    box-shadow:0 0 16px rgba(109,40,217,0.75);
}

/* Escríbenos (Rojo Pasamar) */
.pasamar-side-buttons div:nth-child(8){
    background:rgba(229,50,41,0.35);
    box-shadow:0 0 10px rgba(229,50,41,0.45);
}
.pasamar-side-buttons div:nth-child(8):hover{
    background:rgba(229,50,41,0.55);
    box-shadow:0 0 16px rgba(229,50,41,0.75);
}

/* ICONOS BLANCOS */
.pasamar-side-buttons i{
    color:white;
}



.footer-pasamar{
    background:#0f0f0f;
    color:white;
    padding:40px 0;
    border-top:3px solid #6d28d9; /* Lila Metanoia */
}

.footer-pasamar img{
    filter:brightness(1.1);
}

.footer-links{
    list-style:none;
    padding:0;
    margin:0;
}

.footer-links li{
    margin-bottom:8px;
}

.footer-links a{
    color:#dcdcdc;
    text-decoration:none;
    transition:.25s ease;
}

.footer-links a:hover{
    color:#6d28d9;
    padding-left:4px;
}

/* Redes sociales */
.footer-social a{
    display:inline-flex;
    justify-content:center;
    align-items:center;
    width:42px;
    height:42px;
    border-radius:50%;
    margin-right:10px;
    font-size:1.3rem;
    color:white;
    transition:.25s ease;
}

/* Colores suaves */
.footer-social a.whatsapp{ background:rgba(37,211,102,0.35); }
.footer-social a.instagram{ background:rgba(214,41,118,0.35); }
.footer-social a.facebook{ background:rgba(24,119,242,0.35); }
.footer-social a.tiktok{ background:rgba(0,0,0,0.35); }
.footer-social a.youtube{ background:rgba(255,0,0,0.35); }
.footer-social a.linkedin{ background:rgba(10,102,194,0.35); }

/* Hover con glow */
.footer-social a:hover{
    transform:translateY(-4px);
    box-shadow:0 0 12px currentColor;
    filter:brightness(1.3);
}

.equipo-card{
    background:white;
    border-radius:18px;
    box-shadow:0 4px 18px rgba(0,0,0,.08);
    transition:.25s ease;
}

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

.equipo-foto{
    width:120px;
    height:120px;
    object-fit:cover;
    border-radius:50%;
    border:4px solid var(--lila-dark);
}

.foto-full{
    width: 100%;
    height: auto;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 12px;
}






.sedesSwiper{
    padding-bottom:40px;
}

.regional-card{
    background:white;
    border-radius:18px;
    padding:1.8rem;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    border:1px solid #e5d9ff;
    height:100%;
}

.regional-title{
    font-size:1.4rem;
    font-weight:800;
    color:#6d28d9;
    margin-bottom:1.2rem;
    text-transform:uppercase;
}

.regional-sedes{
    display:flex;
    flex-direction:column;
    gap:1.2rem;
}

.sede-item{
    background:#faf7ff;
    border-radius:14px;
    padding:1rem 1.2rem;
    border-left:5px solid #6d28d9;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:1rem;
}

.sede-info{
    flex-grow:1;
}




.sede-direccion{
    color:#6b6b6b;
    margin-bottom:.2rem;
}

.sede-tel{
    color:#444;
    font-weight:600;
}


.btn-mapa:hover{
    background:#4c1d95;
}

.pasamar-bluebar-mini{
  background:#c4b5fd; /* Azul profundo */
  width:100%;
  padding:4px 0;
  border-bottom:3px solid #6d28d9; /* Lila Metanoia */
}

/* Contenedor alineado a la derecha */
.bluebar-content{
  display:flex;
  justify-content:flex-end; /* Alineado a la derecha */
  gap:22px; /* Separación igual a la imagen */
}

/* Enlaces */
.pasamar-bluebar-mini a{
  color:white;
  text-decoration:none;
  font-weight:600;
  font-size:.9rem;
  transition:.25s ease;
  padding:2px 0;
}

.pasamar-bluebar-mini a:hover{
  color:#e9d5ff; /* Lila suave Metanoia */
}



/* SECCIONES */
.section-title{
  font-size:1.8rem;
  font-weight:700;
  color:var(--lila-dark);
}


.section-text{
  color:var(--muted);
  font-size:1.05rem;
  line-height:1.7;
}



/* BENEFICIOS */
.beneficio-card{
  background:white;
  border-radius:16px;
  padding:1.5rem;
  box-shadow:0 8px 25px rgba(0,0,0,.08);
  transition:.25s ease;
}
.beneficio-card:hover{
  transform:translateY(-6px);
}

/* GALERÍA */
.galeria-img{
  width:100%;
  height:220px;
  object-fit:cover;
  border-radius:16px;
}

/* CTA */
.btn-cta{
  background:var(--alizarin);
  color:white;
  padding:.8rem 1.8rem;
  border-radius:999px;
  font-weight:700;
  border:none;
  transition:.25s ease;
}
.btn-cta:hover{
  background:#c3251f;
}

/* ———— BOTÓN PREMIUM VOLVER AL INICIO ———— */
.btn-back-premium{
  position:fixed;
  bottom:28px;
  left:28px;
  width:58px;
  height:58px;
  background:rgba(139,92,246,0.85);
  backdrop-filter:blur(10px);
  color:white;
  border-radius:50%;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:1.4rem;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  z-index:9999;
  transition:.3s ease;
  animation:fadeInBackBtn .6s ease forwards;
  border:1px solid rgba(255,255,255,0.25);
}

.btn-back-premium:hover{
  background:rgba(109,40,217,0.95);
  transform:translateY(-6px) scale(1.05);
  box-shadow:0 14px 35px rgba(109,40,217,.45);
}

@keyframes fadeInBackBtn{
  from{ opacity:0; transform:translateY(20px) scale(.9); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}

@media(max-width:768px){
  .btn-back-premium{
    width:52px;
    height:52px;
    font-size:1.2rem;
    bottom:20px;
    left:20px;
  }
}

/* BENEFICIOS */
.beneficio-card{
  background:white;
  border-radius:16px;
  padding:1.5rem;
  box-shadow:0 8px 25px rgba(0,0,0,.08);
  transition:.25s ease;
}
.beneficio-card:hover{
  transform:translateY(-6px);
}

/* GALERÍA */
.galeria-img{
  width:100%;
  height:220px;
  object-fit:cover;
  border-radius:16px;
}

/* CTA */
.btn-cta{
  background:var(--alizarin);
  color:white;
  padding:.8rem 1.8rem;
  border-radius:999px;
  font-weight:700;
  border:none;
  transition:.25s ease;
}
.btn-cta:hover{
  background:#c3251f;
}

/* ———— BOTÓN PREMIUM VOLVER AL INICIO ———— */
.btn-back-premium{
  position:fixed;
  bottom:28px;
  left:28px;
  width:58px;
  height:58px;
  background:rgba(139,92,246,0.85);
  backdrop-filter:blur(10px);
  color:white;
  border-radius:50%;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:1.4rem;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  z-index:9999;
  transition:.3s ease;
  animation:fadeInBackBtn .6s ease forwards;
  border:1px solid rgba(255,255,255,0.25);
}

.btn-back-premium:hover{
  background:rgba(109,40,217,0.95);
  transform:translateY(-6px) scale(1.05);
  box-shadow:0 14px 35px rgba(109,40,217,.45);
}

@keyframes fadeInBackBtn{
  from{ opacity:0; transform:translateY(20px) scale(.9); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}

@media(max-width:768px){
  .btn-back-premium{
    width:52px;
    height:52px;
    font-size:1.2rem;
    bottom:20px;
    left:20px;
  }
}

/* CONTENEDOR GENERAL */
/* CONTENEDOR GENERAL */
.tracking-invoice-bar {
  background: transparent;
  padding: 0;
  margin-top: -40px;
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 20;
}

/* TARJETAS UNIDAS */
/* TARJETAS UNIDAS */
.tracking-invoice-wrap {
  display: flex;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
}

/* TARJETA */
.tracking-card {
  flex: 1;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #fff;
  background: rgba(109, 40, 217, 0.55);
  backdrop-filter: blur(8px);
  transition: transform .2s ease, box-shadow .2s ease;
}

/* TARJETA ROJA */
.tracking-card.red {
  background: rgba(220, 38, 38, 0.55);
}

/* ESQUINAS EXTERNAS */
.tracking-card:first-child {
  border-radius: 12px 0 0 12px;
}
.tracking-card:last-child {
  border-radius: 0 12px 12px 0;
}

/* ICONOS */
.card-icon {
  width: 28px;
  height: 28px;
}

/* FILA INTERNA */
.card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

/* ÍCONO + TEXTO */
.card-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.card-icon {
  width: 22px;
  height: 22px;
  opacity: 0.95;
}

/* TEXTO */
.card-label {
  font-size: 15px;
  font-weight: 700;
}

/* BOTÓN */
.card-btn {
  display: inline-flex;
  align-items: center;
  background: #fff;
  color: #333;
  padding: 3px 12px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 12px;
}

.card-btn i {
  margin-left: 6px;
  font-size: 11px;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .tracking-invoice-wrap {
    flex-direction: column;
    max-width: 90%;
  }

  .tracking-card:first-child,
  .tracking-card:last-child {
    border-radius: 12px;
  }

  .card-row {
    justify-content: center;
    gap: 10px;
  }
}
/* ======== MÓVIL (solo íconos, lado a lado) ======== */
@media (max-width: 768px) {

  .tracking-invoice-wrap {
    display: flex;
    flex-direction: row;        /* Mantenerlos lado a lado */
    justify-content: center;
    gap: 8px;                   /* Separación entre tarjetas */
    max-width: 200px;           /* Compacto */
  }

  .tracking-card {
    flex: none;                 /* Evita que se estiren */
    width: 60px;                /* Tamaño compacto */
    height: 60px;
    padding: 8px;
    border-radius: 12px !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .card-row,
  .card-left {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .card-label,
  .card-btn {
    display: none !important;   /* Ocultar textos */
  }

  .card-icon {
    width: 32px;
    height: 32px;
  }

  /* Redondear ambas tarjetas en móvil */
  .tracking-card:first-child {
    border-radius: 12px;
  }
  .tracking-card:last-child {
    border-radius: 12px;
  }
}