/*
Theme Name: Qublogistic WP
Theme URI: https://tusitio.com
Author: Tu nombre o empresa
Author URI: https://tusitio.com
Description: Descripción breve de tu tema.
Version: 1.0
License: GNU GPL v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: qublogistic-wp
*/

/* =============================================================================
   00) VARIABLES & BASE
============================================================================= */
:root{
  --azul-osc:#0b1e3a; --azul:#0b66b3; --azul-claro:#1a73e8;
  --grad-azul:linear-gradient(135deg, rgba(11,102,179,.95), rgba(26,115,232,.95));
  --white:#fff; --text:#e9f1fb; --muted:#bcd1ea;
  --radius:16px; --shadow:0 10px 25px rgba(0,0,0,.35);
  --ff-a:Poppins,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  --ff-b:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  --t-norm:.3s ease; --t-fast:.15s ease;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; color:var(--text); background:#0d1117;
  font-family:var(--ff-a); line-height:1.55;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
a:focus{ outline:2px dashed rgba(255,255,255,.35); outline-offset:2px; }

/* =============================================================================
   01) HELPERS & LAYOUT
============================================================================= */
.container{ width:min(1100px,92%); margin-inline:auto; padding-inline:20px; }
.grid{ display:grid; gap:24px; }
.title{ font-family:var(--ff-a); }
.card{
  background:rgba(255,255,255,.08); backdrop-filter:blur(8px);
  border-radius:12px; padding:18px 16px; box-shadow:0 4px 14px rgba(0,0,0,.25);
  transition:transform .35s, box-shadow .35s;
}
.card:hover{ transform:translateY(-6px) scale(1.02); box-shadow:0 10px 30px rgba(0,0,0,.35); }

.section-title{
  text-align:center; font-size:2.5rem; margin:0 0 40px; font-weight:700; color:#fff;
}

/* Botones */
.btn{
  display:inline-block; padding:14px 24px; border-radius:10px; font-weight:700;
  transition:transform var(--t-norm), box-shadow var(--t-norm), background var(--t-norm);
  box-shadow:0 4px 10px rgba(0,0,0,.15); color:#fff;
}
.btn-primary{ background:linear-gradient(90deg,#0057B7,#007BFF); }
.btn-primary:hover{ transform:scale(1.05); background:linear-gradient(90deg,#00449E,#0066CC); }

/* Accesibilidad: reduce motion */
@media (prefers-reduced-motion: reduce){
  .reveal, .hero .logo, .sidebar-qub::before { animation:none !important; transform:none !important; }
  .reveal{ opacity:1 !important; }
}

/* =============================================================================
   02) ANIMACIONES (ÚNICAS)
============================================================================= */
@keyframes floatLogo{ 0%{transform:translateY(0) scale(1)} 50%{transform:translateY(-8px) scale(1.02)} 100%{transform:translateY(0) scale(1)} }
@keyframes spinLight{ to{ transform:rotate(360deg) } }
@keyframes moveBackground{ 0%{transform:translate(0,0)} 50%{transform:translate(-50px,-50px)} 100%{transform:translate(0,0)} }
@keyframes fadeInUp{ 0%{opacity:0; transform:translateY(30px)} 100%{opacity:1; transform:translateY(0)} }
@keyframes fadeInDown{ from{opacity:0; transform:translateY(-20px)} to{opacity:1; transform:translateY(0)} }
@keyframes float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
@keyframes bounce{ 0%{transform:translateY(0)} 30%{transform:translateY(-6px)} 50%{transform:translateY(0)} 70%{transform:translateY(-3px)} 100%{transform:translateY(0)} }
@keyframes qub-slicer-left{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* Reveal genérico */
.reveal{ opacity:0; transform:translateY(30px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in, .reveal.active{ opacity:1; transform:translateY(0); }

/* =============================================================================
   03) SECCIONES
============================================================================= */

/* HERO (encabezado) */
.hero{
  color:var(--white); text-align:center; padding:60px 0; position:relative; overflow:hidden;
  background:linear-gradient(135deg,#0d1b2a,#1b263b);
}
.hero .logo{ width:300px; height:auto; animation:floatLogo 4s ease-in-out infinite; }

/* Sub-hero (bloque de entrada) */
.hero-section{
  background:linear-gradient(135deg,#002244,#0057B7); color:#fff; text-align:center;
  padding:80px 20px; position:relative; overflow:hidden; font-family:var(--ff-a);
}
.hero-section::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle, rgba(255,255,255,.05) 2%, transparent 70%);
  animation:moveBackground 20s linear infinite;
}
.hero-title{ font-size:2.5rem; font-weight:700; margin:0 0 15px; position:relative; z-index:1; animation:fadeInDown 1s ease-out; }
.hero-subtitle{ font-size:1.2rem; max-width:600px; margin:0 auto; color:#dfeeff; position:relative; z-index:1; animation:fadeInUp 1.2s ease-out; }

/* QUIÉNES SOMOS */
.sobre{ position:relative; padding:60px 0; background:linear-gradient(135deg,#e8f0fe,#ffffff); }
.sobre .card{ background:#fff; color:#0b66b3; border:1px solid #e6eef8; }
.sobre .card p{ color:#333; }

/* SERVICIOS */
.services-section{
  position:relative; padding:60px 20px; color:#fff; overflow:hidden;
  background: linear-gradient(135deg, rgba(11,102,179,.9), rgba(15,147,232,.9)),
              url('assets/img/servicios-bg.jpg') center/cover fixed no-repeat;
}
.services-bg{ position:absolute; inset:0; z-index:1; }
.services-bg .float-circle{ position:absolute; border-radius:50%; background:rgba(255,255,255,.15); animation:float 6s ease-in-out infinite; }
.services-bg .circle-1{ top:10%; left:5%; width:60px; height:60px; }
.services-bg .circle-2{ bottom:15%; right:8%; width:80px; height:80px; background:rgba(255,255,255,.1); }

.services-section .section-title{ position:relative; z-index:2; animation:fadeInUp 1s ease forwards; }
.services-content{
  position:relative; z-index:2; display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:24px; max-width:1100px; margin:0 auto;
}
.service-box{
  background:rgba(0,0,0,.5); backdrop-filter:blur(8px); padding:20px; border-radius:12px;
  transition:transform .4s ease, box-shadow .4s ease, background .4s ease;
  opacity:0; animation:fadeInUp .8s ease forwards; animation-delay:calc(var(--i) * .2s);
  box-shadow:0 2px 6px rgba(0,0,0,.4);
}
.service-box:hover{ background:rgba(0,0,0,.75); transform:translateY(-10px) scale(1.05); box-shadow:0 12px 30px rgba(0,0,0,.6); }
.service-box h4{ margin:0 0 10px; color:#fff; font-size:1.3rem; }
.service-box p{ font-size:1rem; color:#ddd; line-height:1.4; }

/* REGISTRO */
.registro-section{
  position:relative; padding:60px 20px; text-align:center; color:#fff; overflow:hidden; font-family:var(--ff-b);
  background: linear-gradient(135deg,#0b66b3,#0f93e8),
              url('assets/img/registro-bg.jpg') center/cover fixed no-repeat;
  background-blend-mode: overlay;
}
.registro-overlay{ position:absolute; inset:0; background:rgba(11,102,179,.6); z-index:1; pointer-events:none; }
.registro-container{ position:relative; z-index:2; max-width:1000px; margin:0 auto; }
.registro-section .section-title{ font-size:2rem; margin-bottom:20px; }
.section-description{ font-size:1.1rem; margin-bottom:40px; text-align: center; }

.registro-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px; }
.registro-card{
  background:rgba(0,0,0,.6); backdrop-filter:blur(8px); padding:24px; border-radius:12px;
  box-shadow:0 6px 15px rgba(0,0,0,.3); text-align:center; opacity:0;
  animation:fadeInUp .8s ease forwards; animation-delay:var(--delay);
  transition:transform .3s ease, box-shadow .3s ease, background .3s ease;
}
.registro-card:hover{ transform:translateY(-8px) scale(1.03); background:rgba(0,0,0,.8); box-shadow:0 10px 25px rgba(0,0,0,.5); }
.registro-card h3{ margin:0 0 12px; font-size:1.4rem; color:#fff; }
.registro-card p{ font-size:1rem; color:#ddd; margin:0 0 20px; }

.btn-transportista{ background:linear-gradient(135deg,#1F8F3E,#2ECC71); }
.btn-transportista:hover{ background:linear-gradient(135deg,#2ECC71,#1F8F3E); transform:translateY(-4px) scale(1.05); }
.btn-importador{ background:linear-gradient(135deg,#0057B7,#1A73E8); }
.btn-importador:hover{ background:linear-gradient(135deg,#1A73E8,#0057B7); transform:translateY(-4px) scale(1.05); }

/* CONTACTO */
.contact-section{
  background:linear-gradient(135deg,#0d1b2a,#1b263b);
  padding:50px 25px; border-radius:20px; box-shadow:0 8px 25px rgba(0,0,0,.3);
  max-width:650px; margin:50px auto; color:#fff; text-align:center; font-family:var(--ff-a);
}
.contact-section h2{ font-size:2.2rem; font-weight:700; margin:0 0 15px; }
.contact-section p{ font-size:1.1rem; color:#dfe6ed; margin:0 0 30px; line-height:1.6; }
.contact-buttons{ display:flex; flex-direction:column; gap:20px; }
.contact-buttons a{
  display:flex; align-items:center; justify-content:center; gap:12px;
  background:rgba(255,255,255,.08); padding:16px 20px; border-radius:12px; color:#fff; font-weight:500; font-size:1rem;
  box-shadow:0 4px 15px rgba(0,0,0,.25); backdrop-filter:blur(6px);
  transition:transform var(--t-norm), box-shadow var(--t-norm), background var(--t-norm);
}
.contact-buttons a:hover, .contact-buttons a:focus{ background:rgba(255,255,255,.2); transform:translateY(-4px) scale(1.03); box-shadow:0 8px 20px rgba(0,0,0,.35); outline:none; }
.contact-buttons .contact-icon{ width:28px; height:28px; transition:transform var(--t-norm); }
.contact-buttons a:hover .contact-icon, .contact-buttons a:focus .contact-icon{ animation:bounce .5s; }

/* SIDEBAR: HABILITACIONES + SLICER */
.sidebar-qub{
  position:sticky; top:20px; padding:30px 22px; color:#fff; border-radius:var(--radius);
  background:linear-gradient(135deg, rgba(0,34,68,.95), rgba(0,87,183,.95)); box-shadow:var(--shadow);
  overflow:hidden; isolation:isolate;
}
.sidebar-qub::before{
  content:""; position:absolute; inset:-60%;
  background:radial-gradient(circle,rgba(255,255,255,.08) 0%, transparent 60%);
  animation:spinLight 12s linear infinite; z-index:-1;
}

/* Slicer (1 fila, derecha→izquierda) */
.sidebar-qub .qub-slicer{ position:relative; padding:16px 0; }
.sidebar-qub .qub-slicer-viewport{ overflow:hidden; width:100%; }
.sidebar-qub .qub-slicer-track{
  display:flex; flex-direction:row; flex-wrap:nowrap; align-items:center; gap:28px;
  will-change:transform; animation:qub-slicer-left var(--qub-slicer-duration, 30s) linear infinite;
}
.sidebar-qub .qub-slicer-item{
  flex:0 0 auto; display:grid; place-items:center; padding:10px 14px; border-radius:12px; background:rgba(255,255,255,.04);
}
.sidebar-qub .qub-slicer-item img{
  height:100px; width:auto; filter:grayscale(100%) contrast(1.1) brightness(1.05); opacity:.9; transition:filter .25s, opacity .25s;
}
.sidebar-qub .qub-slicer-item:hover img{ filter:none; opacity:1; }
.sidebar-qub .qub-slicer:hover .qub-slicer-track{ animation-play-state:paused; }

/* =============================================================================
   04) RESPONSIVE
============================================================================= */
@media (max-width:1024px){
  .section-title{ font-size:2.2rem; }
}
@media (max-width:768px){
  .section-title{ font-size:2rem; }
  .contact-section{ margin:38px auto; }
}
@media (max-width:500px){
  .contact-section{ padding:40px 15px; }
  .contact-buttons a{ padding:14px 16px; font-size:.95rem; }
  .contact-buttons .contact-icon{ width:24px; height:24px; }
}


/* === Centrar logo del hero === */
.hero .logo {
  display: block;
  margin-inline: auto; /* centrado horizontal */
  max-width: 320px;    /* ajusta a gusto */
}

/* === Encabezado fijo === */
.site-header{
  position: sticky; /* o fixed si preferís */
  top: 0; inset-inline: 0;
  z-index: 1000;
  backdrop-filter: blur(8px);
  background: rgba(7, 20, 35, 0.75); /* semi-transparente */
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.header-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  gap: 16px;
}

.brand {
  background: transparent;
  padding: 0;
  border-radius: 0;
}

.main-nav{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.nav-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 700;
  color: #fff;
  background: rgba(255,255,255,0.06);
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.nav-link:hover,
.nav-link:focus{
  background: rgba(255,255,255,0.18);
  transform: translateY(-2px);
  outline: none;
}

/* Activo (sección visible) */
.nav-link.active{
  background: linear-gradient(135deg,#0057B7,#1A73E8);
  box-shadow: 0 6px 16px rgba(0,0,0,.3);
}

/* Compensación del header fijo al hacer anchor jump */
section, aside.sidebar-qub {
  scroll-margin-top: 90px; /* igual o mayor a la altura del header */
}

/* Responsivo header */
@media (max-width: 768px){
  .header-inner { min-height: 58px; }
  .nav-link { padding: 8px 12px; font-size: .95rem; }
}

/* === Header fijado en todas las vistas === */
:root{ --header-h: 64px; }
.site-header{
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  backdrop-filter: blur(8px);
  background: rgba(7,20,35,.78);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
body{ padding-top: var(--header-h); } /* Compensa el header fijo */

.header-inner{
  min-height: var(--header-h);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand {
  background: transparent;
  padding: 0;
  border-radius: 0;
}

/* Botones de escritorio */
.main-nav{ display:flex; gap:10px; flex-wrap:wrap; }
.nav-link{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:10px; font-weight:700; color:#fff;
  background:rgba(255,255,255,.06);
  box-shadow:0 2px 8px rgba(0,0,0,.15);
  transition:transform .2s, background .2s, box-shadow .2s;
}
.nav-link:hover, .nav-link:focus{ background:rgba(255,255,255,.18); transform:translateY(-2px); outline:none; }
.nav-link.active{
  background:linear-gradient(135deg,#0057B7,#1A73E8);
  box-shadow:0 6px 16px rgba(0,0,0,.3);
}

/* === Hamburguesa (visible solo en móvil) === */
.hamburger{
  display:none; position:relative; width:44px; height:44px;
  border:0; border-radius:10px; background:rgba(255,255,255,.08); cursor:pointer;
}
.hamburger span{
  position:absolute; left:10px; right:10px; height:2px; background:#fff; border-radius:2px;
  transition: transform .2s ease, opacity .2s ease, top .2s ease;
}
.hamburger span:nth-child(1){ top:14px; }
.hamburger span:nth-child(2){ top:21px; }
.hamburger span:nth-child(3){ top:28px; }
.hamburger.is-open span:nth-child(1){ top:21px; transform:rotate(45deg); }
.hamburger.is-open span:nth-child(2){ opacity:0; }
.hamburger.is-open span:nth-child(3){ top:21px; transform:rotate(-45deg); }

/* === Drawer lateral derecho (móvil) === */
.mobile-drawer{
  position: fixed; inset: 0 0 0 auto; width: 80vw; max-width: 360px;
  height: 100vh; transform: translateX(100%);
  background: rgba(7,20,35,.98);
  backdrop-filter: blur(6px);
  border-left: 1px solid rgba(255,255,255,.08);
  z-index: 1100; transition: transform .25s ease;
  padding: 16px;
}
.mobile-drawer.is-open{ transform: translateX(0); }
.mobile-nav{
  display:flex; flex-direction:column; gap:10px; margin-top: 8px;
}
.mnav-link{
  display:block; color:#fff; font-weight:700; border-radius:10px;
  padding:12px 14px; background:rgba(255,255,255,.06);
  box-shadow:0 2px 8px rgba(0,0,0,.15);
  transition: background .2s, transform .2s;
}
.mnav-link:hover, .mnav-link:focus{ background:rgba(255,255,255,.18); transform: translateX(-2px); outline:none; }
.mnav-link.active{ background:linear-gradient(135deg,#0057B7,#1A73E8); }

/* Fondo oscuro detrás del drawer */
.drawer-backdrop{
  position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1090;
}

/* === Responsivo header === */
@media (max-width: 992px){
  .main-nav{ display:none; }      /* oculta los botones de escritorio */
  .hamburger{ display:inline-block; }
  :root{ --header-h: 58px; }
}


/* ===== Banner principal / Slider ===== */
.banner{
  position: relative;
  background: #0b1e3a;
  color: #fff;
  isolation: isolate;
}

/* altura del banner */
.banner-viewport{
  position: relative;
  overflow: hidden;
  height: clamp(56vh, 68vh, 78vh);
}

/* track */
.banner-track{
  display: flex;
  height: 100%;
  will-change: transform;
  transform: translateX(0);
  transition: transform .6s ease;
}

/* slide */
.banner-slide{
  position: relative;
  min-width: 100%;
  height: 100%;
}
.banner-media{
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  filter: saturate(1.05) contrast(1.02);
}
.banner-overlay{
  position: absolute; inset: 0;
  background:
    linear-gradient(120deg, rgba(6,16,30,.65), rgba(11,102,179,.35));
  z-index: 1;
}

/* contenido centrado */
.banner-content{
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  text-align: center; padding: 20px;
  gap: 12px;
}
.banner-title{ font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; margin: 0; }
.banner-subtitle{
  max-width: 820px; margin: 0 auto 8px; color: #dfe6ed;
  font-size: clamp(1rem, 1.8vw, 1.15rem); line-height: 1.6;
}
.banner-logo img{ width: clamp(140px, 18vw, 260px); height:auto; display:block; margin-inline:auto; }

/* flechas */
.banner-arrow{
  position: absolute; z-index: 3; top: 50%; translate: 0 -50%;
  width: 44px; height: 44px; border: 0; border-radius: 12px; cursor: pointer;
  background: rgba(255,255,255,.14); color: #fff; font-size: 26px; line-height: 1;
  display: grid; place-items: center; transition: background .2s, transform .2s;
}
.banner-arrow:hover{ background: rgba(255,255,255,.28); transform: translateY(-1px); }
.banner-arrow.prev{ left: 16px; }
.banner-arrow.next{ right: 16px; }

/* dots */
.banner-dots{
  position: absolute; z-index: 3; bottom: 14px; left: 0; right: 0;
  display: flex; justify-content: center; gap: 8px;
}
.banner-dots button{
  width: 8px; height: 8px; border-radius: 999px; border: 0; cursor: pointer;
  background: rgba(255,255,255,.35); transition: transform .2s, background .2s, width .2s;
}
.banner-dots button.is-active{
  background: #fff; width: 18px;
}

/* responsive */
@media (max-width: 768px){
  .banner-viewport{ height: 56vh; }
  .banner-arrow{ width: 38px; height: 38px; font-size: 22px; }
}
@media (max-width: 480px){
  .banner-viewport{ height: 52vh; }
}

.logo img {
  height: 48px;       /* Ajusta el alto según tu header */
  width: auto;        /* Mantiene proporción */
  display: block;
}

@media (max-width: 768px) {
  .logo img {
    height: 40px;
  }
}

.brand img{ height:110px; width:auto; display:block; }
@media (max-width:768px){ .brand img{ height:40px; } }

/* ===== Habilitaciones: marquee continuo ===== */
#habilitaciones .qub-slicer { overflow: hidden; position: relative; }
#habilitaciones .qub-slicer-viewport { overflow: hidden; }

#habilitaciones .qub-slicer-track{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--qub-gap, 16px);   /* usá gap, no margin en items */
  will-change: transform;
  animation: qub-marquee var(--qub-dur, 30s) linear infinite;
}

#habilitaciones .qub-slicer-item{ flex: 0 0 auto; }
#habilitaciones .qub-slicer-item img{ display:block; height:auto; }

/* Animación recorre exactamente la mitad (segunda mitad es clon idéntico) */
@keyframes qub-marquee {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-50%,0,0); }
}

/* Respeta “prefiere reducir movimientos” */
@media (prefers-reduced-motion: reduce){
  #habilitaciones .qub-slicer-track{ animation: none !important; transform: none !important; }
}

/* Tuning mobile (ya lo tenías, lo recuerdo aquí) */
@media (max-width: 768px){
  #habilitaciones .qub-slicer-track{ --qub-gap: 12px; }
  #habilitaciones .qub-slicer-item img{ height: 64px; }
}
@media (max-width: 400px){
  #habilitaciones .qub-slicer-track{ --qub-gap: 10px; }
  #habilitaciones .qub-slicer-item img{ height: 56px; }
}