/* ============================================================
   1. TOKENS Y CONFIGURACIÓN BASE
   ============================================================ */
:root{
  --noche: #002147;
  --noche-2: #043a7a;
  --concreto: #f8fbff;
  --concreto-2: #ffffff;
  --ambar: #0b5ed7;
  --ambar-2: #0a4ebd;
  --farol: #002147;
  --linea: #cdd7e5;
  --texto-alto: #002147;
  --texto-bajo: #5b6b78;
  --f-display: 'Barlow Condensed', sans-serif;
  --f-body: 'Work Sans', sans-serif;
  --f-mono: 'JetBrains Mono', monospace;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:104px; }
body{ font-family: var(--f-body); background: var(--concreto); color: var(--texto-alto); overflow-x: hidden; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto !important; }
  *, *::before, *::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}
h1,h2,h3,h4{ font-family: var(--f-display); letter-spacing:0.01em; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{ outline:3px solid rgba(11,94,215,0.45); outline-offset:2px; }

/* ============================================================
   2. COMPONENTES GLOBALES (Botones, Eyebrow, Reveal)
   ============================================================ */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal-stagger > *{ opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
.reveal-stagger.is-visible > *{ opacity:1; transform:translateY(0); }
.reveal-stagger.is-visible > *:nth-child(1){ transition-delay:.05s; }
.reveal-stagger.is-visible > *:nth-child(2){ transition-delay:.14s; }
.reveal-stagger.is-visible > *:nth-child(3){ transition-delay:.23s; }
.reveal-stagger.is-visible > *:nth-child(4){ transition-delay:.32s; }

.eyebrow {
  font-family: var(--f-mono); color: var(--ambar); letter-spacing: 0.16em; font-size: 0.78rem; text-transform: uppercase;
  margin-bottom: 18px; display: inline-flex; align-items: center; gap: 12px; 
}
.eyebrow::before { content: ''; width: 26px; height: 2px; background: var(--ambar); display: inline-block; }

/* BOTONES BASE Y UNIFICADOS */
.btn {
  padding: 14px 28px; text-decoration: none; border-radius: 8px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
  font-size: 1rem; position: relative; z-index: 1; border: 1px solid var(--ambar); background: var(--ambar); color: #fff;
  font-family: var(--f-body); cursor: pointer; transition: background .25s ease, transform .25s ease, box-shadow .25s ease, color .35s ease;
}
.btn:hover { background: var(--ambar-2); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(11,94,215,0.22); }
.btn:disabled { opacity: .7; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-azul { background: var(--ambar); color: #fff; overflow: hidden; }
.btn-azul::before {
  content: ''; position: absolute; top: var(--y, 50%); left: var(--x, 50%); width: 420px; height: 420px; background-color: #ffffff;
  border-radius: 50%; transform: translate(-50%, -50%) scale(0); z-index: -1; transition: transform .5s ease-out;
}
.btn-azul:hover::before { transform: translate(-50%, -50%) scale(1); }
.btn-azul:hover { color: var(--noche); box-shadow: 0 10px 24px rgba(0,0,0,0.28); }

.btn-secundario { background: rgba(255,255,255,0.10); color: #fff; border-color: transparent; }
.btn-secundario:hover { background: rgba(255,255,255,0.16); }

#form-transportistas .btn { width: 100%; } /* Solo el botón de registro de transporte usa el 100% de ancho en computadoras */

/* ============================================================
   3. NAVEGACIÓN Y FOOTER
   ============================================================ */
nav{ background: var(--noche); padding: 14px 60px; display:flex; justify-content:space-between; align-items:center; position:sticky; top:0; z-index:1000; border-bottom: 1px solid rgba(255,255,255,0.06); }
.nav-izquierda{ display:flex; align-items:center; gap:44px; }
.logo img{ height:70px; width:auto; display:block; }
.enlaces{ display:flex; gap:6px; }
.enlaces a{ color: rgba(255,255,255,0.75); text-decoration:none; font-weight:600; font-size:0.95rem; padding: 8px 14px; border-radius:100px; transition: color .25s ease, background .25s ease; }
.enlaces a:hover, .enlaces a.activo { color:#fff; background: rgba(255,255,255,0.15); }

.whatsapp-nav a{
  color: #ffffff; text-decoration:none; font-weight:700; font-size:0.92rem; display:flex; align-items:center; gap:8px;
  background: #25D366; padding: 10px 20px; border-radius: 100px; transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.whatsapp-nav a:hover{ background: #128C7E; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(37, 211, 102, 0.35); }
.whatsapp-icon{ width:18px; height:18px; fill: #ffffff; }

.nav-toggle{ display:none; align-items:center; justify-content:center; width:44px; height:44px; border-radius:8px; border:none; background: rgba(255,255,255,0.08); cursor:pointer; flex-shrink:0; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{ content:''; display:block; width:20px; height:2px; background:#fff; border-radius:2px; position:relative; transition: transform .25s ease, opacity .25s ease; }
.nav-toggle span::before{ position:absolute; top:-6px; }
.nav-toggle span::after{ position:absolute; top:6px; }
.nav-toggle[aria-expanded="true"] span{ background:transparent; }
.nav-toggle[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }

.whatsapp-flotante{ display:none; position:fixed; right:18px; bottom:18px; z-index:1200; width:58px; height:58px; border-radius:50%; background:#25D366; align-items:center; justify-content:center; box-shadow:0 8px 22px rgba(0,0,0,0.32); }
.whatsapp-flotante svg{ width:28px; height:28px; fill:#fff; }
.whatsapp-flotante::after{ content:''; position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 0 rgba(37,211,102,0.55); animation: pulsoWpp 2.4s ease-out infinite; }
@keyframes pulsoWpp{ 0%{ box-shadow:0 0 0 0 rgba(37,211,102,0.55);} 100%{ box-shadow:0 0 0 16px rgba(37,211,102,0);} }

.volver-arriba{ position:fixed; right:18px; bottom:88px; z-index:1150; width:46px; height:46px; border-radius:50%; border:none; background:var(--noche); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px rgba(0,33,71,0.32); opacity:0; pointer-events:none; transform:translateY(10px); transition:opacity .25s ease, transform .25s ease, background .25s ease; }
.volver-arriba.visible{ opacity:1; pointer-events:auto; transform:translateY(0); }
.volver-arriba:hover{ background:var(--ambar); }
.volver-arriba svg{ width:20px; height:20px; }

.footer-nuevo{ background-color: var(--noche); color:white; padding:64px 40px 30px 40px; border-radius:28px 28px 0 0; margin:0 15px; }
.footer-contenedor{ max-width:1120px; margin:0 auto; display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:40px; padding-bottom:50px; }
.footer-columna{ display:flex; flex-direction:column; gap:15px; }
.footer-columna h3{ font-size:1.05rem; margin-bottom:5px; color:white; font-weight:700; }
.footer-columna a{ color:#c1d4eb; text-decoration:none; font-size:0.9rem; transition: color .3s; }
.footer-columna a:hover{ color: var(--ambar); }
.col-newsletter{ max-width:320px; }
.col-newsletter p{ font-size:0.95rem; line-height:1.55; margin-bottom:24px; }
.input-grupo{ display:flex; align-items:center; border-bottom:1px solid rgba(255,255,255,0.28); padding-bottom:10px; transition: border-color .3s ease; }
.input-grupo:focus-within{ border-bottom:1px solid var(--ambar); }
.input-email{ background:transparent; border:none; color:white; font-size:1rem; outline:none; flex-grow:1; padding:5px 0; width:100%; font-family: var(--f-body); }
.input-email::placeholder{ color:#c1d4eb; }
.btn-suscribite{ background-color: var(--ambar); color: var(--noche); border:none; padding:10px 20px; border-radius:100px; font-size:0.78rem; font-weight:700; cursor:pointer; letter-spacing:0.03em; transition: transform .2s; }
.btn-suscribite:hover{ background-color:#0a4ebd; transform: translateY(-2px); }
.col-contacto{ max-width:300px; }
.item-contacto{ display:flex; align-items:center; gap:15px; font-size:0.9rem; color:#c1d4eb; line-height:1.5; }
.item-contacto strong{ color:white; }
.icono-circular{ background-color: var(--ambar); width:30px; height:30px; border-radius:50%; display:flex; justify-content:center; align-items:center; flex-shrink:0; }
.icono-circular svg{ stroke: var(--noche); }
.separador-contacto{ border:none; border-top:1px dashed rgba(255,255,255,0.18); margin:10px 0; }
.footer-bottom{ max-width:1120px; margin:0 auto; border-top:1px solid rgba(255,255,255,0.12); padding-top:28px; display:flex; justify-content:space-between; align-items:center; font-size:0.85rem; color:white; font-weight:600; }
.footer-social-bottom{ display:flex; gap:16px; align-items: center; }
.footer-social-bottom a{ color:white; display:flex; transition: color .3s, transform .3s; }
.footer-social-bottom a:hover{ color: var(--ambar); transform: translateY(-3px); }

/* ============================================================
   4. SECCIONES GENERALES Y PÁGINA INICIO
   ============================================================ */
header{
  position:relative; background: linear-gradient(180deg, rgba(6,14,24,0.55) 0%, rgba(6,14,24,0.78) 60%, var(--noche) 100%), url('img/portada.webp') center/cover no-repeat;
  background-color: var(--noche); color:white; padding: 130px 60px 0 60px; display:flex; align-items:center; min-height: 86vh; overflow:hidden;
}
.hero-contenido{ max-width:720px; text-align:left; position:relative; z-index:2; padding-bottom: 90px; }
.hero-eyebrow{ display:flex; align-items:center; gap:12px; font-family: var(--f-mono); font-size:0.78rem; letter-spacing:0.14em; color: #fff; text-transform:uppercase; margin-bottom:22px; opacity:0; animation: subeYAparece .7s ease forwards; animation-delay:.1s; }
.hero-eyebrow .puntito{ width:7px; height:7px; border-radius:50%; background:var(--ambar); box-shadow:0 0 0 4px rgba(255,176,32,0.18); animation: pulso 2s ease-in-out infinite; }
header h1{ font-size: 4.4rem; font-weight:700; line-height:0.98; margin-bottom:30px; font-family: var(--f-display); }
header h1 .linea{ display:block; opacity:0; transform:translateY(26px); animation: subeYAparece .8s cubic-bezier(.2,.8,.2,1) forwards; }
header h1 .linea:nth-child(1){ animation-delay:.18s; } header h1 .linea:nth-child(2){ animation-delay:.30s; } header h1 .linea:nth-child(3){ animation-delay:.42s; color: var(--ambar); }
@keyframes subeYAparece{ to{ opacity:1; transform:translateY(0); } }
@keyframes pulso{ 0%,100%{ box-shadow:0 0 0 4px rgba(255,176,32,0.18);} 50%{ box-shadow:0 0 0 9px rgba(255,176,32,0.06);} }
.hero-cta-row{ display:flex; align-items:center; gap:28px; flex-wrap:wrap; opacity:0; animation: subeYAparece .8s ease forwards; animation-delay:.56s; }
.telefono-hero{ font-weight:600; font-size:1.05rem; display:flex; align-items:center; gap:10px; color:rgba(255,255,255,0.88); text-decoration:none; }
.hero-ruta{ position:absolute; left:0; right:0; bottom:0; height:64px; z-index:1; background: linear-gradient(180deg, transparent, rgba(6,14,24,0.9)); }
.hero-linea-vial{ position:absolute; left:0; right:0; bottom:26px; height:4px; background-image: linear-gradient(90deg, var(--ambar) 0 50%, transparent 50% 100%); background-size:80px 4px; background-repeat:repeat-x; opacity:0.85; animation: correrLinea 1.6s linear infinite; -webkit-mask-image:linear-gradient(90deg, transparent, black 100px, black calc(100% - 100px), transparent); mask-image:linear-gradient(90deg, transparent, black 100px, black calc(100% - 100px), transparent); }
@keyframes correrLinea{ from{ background-position-x:0; } to{ background-position-x:-80px; } }
.hero-camion{ position:absolute; bottom:10px; left:-120px; width:86px; height:auto; z-index:2; animation: entraCamion 1.6s cubic-bezier(.2,.8,.2,1) forwards; animation-delay:.9s; }
@keyframes entraCamion{ to{ left: 7%; } }

.seccion{ padding:110px 20px; text-align:center; background: var(--concreto); position:relative; }
.seccion h2{ color: var(--texto-alto); margin-bottom:56px; font-size:2.6rem; font-weight:700; line-height:1.12; }

.grilla-servicios{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; max-width:1220px; margin:0 auto; }
.tarjeta-servicio{ background: var(--concreto-2); padding: 38px 24px 30px 24px; position:relative; text-align:left; border-radius: 4px; border: 1px solid #cdd7e5; border-top: 4px solid var(--ambar); display:block; color:inherit; text-decoration:none; cursor:pointer; transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-top-color .3s ease; }
.tarjeta-servicio::before, .tarjeta-servicio::after{ content:''; position:absolute; top:12px; width:6px; height:6px; border-radius:50%; background:#b7c4d6; }
.tarjeta-servicio::before{ left:12px; } .tarjeta-servicio::after{ right:12px; }
.tarjeta-servicio:hover{ transform: translateY(-6px); box-shadow: 0 18px 34px rgba(11,24,38,0.12); border-top-color: var(--farol); }
.tarjeta-servicio .km{ font-family: var(--f-mono); font-size:0.72rem; color: var(--texto-bajo); letter-spacing:0.08em; margin-bottom:18px; display:block; }
.tarjeta-servicio .icono-servicio { width: 56px; height: 56px; object-fit: contain; margin-bottom: 18px; border-radius: 6px; }
.tarjeta-servicio h3{ color: var(--texto-alto); margin-bottom:12px; font-size:1.28rem; font-weight:700; }
.tarjeta-servicio p{ color: var(--texto-bajo); font-size:0.92rem; line-height:1.55; }
.tarjeta-servicio .ver-mas{ display:inline-flex; margin-top:18px; color:var(--ambar-2); font-weight:800; font-size:.82rem; transition:transform .25s ease; }
.tarjeta-servicio:hover .ver-mas{ transform:translateX(4px); }

.seccion-compromiso{ background-color: var(--noche); color:white; padding:100px 20px 110px 20px; position:relative; border-radius:28px; margin:0 15px; }
.seccion-compromiso .eyebrow { color: #fff; }
.seccion-compromiso h2{ font-size:2.5rem; margin-bottom:56px; text-align:center; color:white; }
.grilla-compromiso{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; max-width:1120px; margin:0 auto; }
.tarjeta-compromiso{ background-color: var(--noche-2); border-radius:14px; text-align:left; overflow:hidden; display:flex; flex-direction:column; border: 1px solid rgba(255,255,255,0.06); }
.cuadrante-imagen{ padding:18px 18px 0 18px; }
.marco-imagen{ width:100%; height:180px; border-radius:10px; overflow:hidden; background-color:rgba(255,255,255,0.06); }
.marco-imagen img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.tarjeta-compromiso:hover .marco-imagen img{ transform: scale(1.1); }
.cuadrante-texto{ padding:26px 22px 30px 22px; position:relative; z-index:1; flex-grow:1; }
.cuadrante-texto::before{ content:''; position:absolute; bottom:0; left:0; width:100%; height:100%; background-color: #ffffff; transform:translateY(100%); transition: transform .4s cubic-bezier(.2,.8,.2,1); z-index:-1; }
.tarjeta-compromiso:hover .cuadrante-texto::before{ transform:translateY(0); }
.cuadrante-texto h3{ font-size:1.18rem; line-height:1.4; color:white; margin:0; font-weight:700; transition: color .35s ease; }
.tarjeta-compromiso:hover .cuadrante-texto h3{ color: var(--noche); }

.cinta-texto{ background-color: var(--concreto); padding:44px 0; overflow:hidden; white-space:nowrap; border-top: 1px dashed #cdd7e5; border-bottom: 1px dashed #cdd7e5; -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent); mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent); }
.cinta-animada { display: flex; width: max-content; align-items: center; animation: deslizarDerecha 20s linear infinite; }
.grupo-texto{ display:flex; align-items:center; gap:22px; padding-right:52px; font-size:2.6rem; font-weight:800; font-family: var(--f-display); text-transform:uppercase; }
@keyframes deslizarDerecha { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.texto-hueco{ color:transparent; -webkit-text-stroke:1.5px #c1d4eb; }
.texto-solido{ color: var(--noche); }
.cinta-camioncito{ height: 38px; width: auto; object-fit: contain; opacity: 0.9; }

.seccion-sobre-nosotros{ background-color: var(--concreto); padding:40px 20px 110px 20px; }
.titulo-sobre-nosotros{ color: var(--texto-alto); font-size:1.9rem; text-align:center; margin-bottom:70px; line-height:1.35; max-width:820px; margin-left:auto; margin-right:auto; font-weight:700; }
.contenedor-sobre-nosotros{ display:flex; max-width:1040px; margin:0 auto; gap:64px; align-items:center; }
.sobre-imagen{ flex:1; position:relative; width:100%; }
.sobre-imagen img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:10px; }
.sello-circular{ position:absolute; top:16px; right:16px; width:88px; height:88px; background-color: #fff ; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 24px rgba(0,0,0,0.22); }
.sello-circular img{ width:100%; height:100%; object-fit:contain; }
.sobre-texto{ flex:1; text-align:left; }
.etiqueta-sobre{ color: var(--ambar-2); font-size:0.78rem; letter-spacing:0.14em; margin-bottom:16px; font-weight:700; font-family: var(--f-mono); text-transform:uppercase; }
.sobre-texto h3{ color: var(--texto-alto); font-size:1.5rem; margin-bottom:20px; line-height:1.35; font-weight:700; }
.sobre-texto p{ color: var(--texto-bajo); line-height:1.65; margin-bottom:38px; font-size:0.98rem; }
.acciones-sobre{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.link-correo{ display:flex; align-items:center; gap:8px; color: var(--texto-alto); text-decoration:none; font-weight:700; font-size:0.9rem; transition: color .3s ease; }
.link-correo:hover{ color: var(--ambar-2); }

.seccion-estadisticas-nueva{ background-color: var(--noche); color:white; padding:76px 44px; border-radius:28px; margin:0 15px 30px 15px; background-image: repeating-linear-gradient(90deg, transparent 0 118px, rgba(255,255,255,0.035) 118px 120px); }
.estadisticas-contenedor{ max-width:1120px; margin:0 auto; }
.estadisticas-cabecera{ display:flex; justify-content:space-between; align-items:center; margin-bottom:54px; border-bottom:1px dashed rgba(255,255,255,0.16); padding-bottom:50px; }
.estadisticas-cabecera h2{ font-size:2.1rem; margin:0; text-align:left; font-weight:700; }
.estadisticas-cuerpo{ display:flex; justify-content:space-between; }
.stat-item{ display:flex; align-items:center; gap:16px; }
.stat-num{ font-size:3.6rem; font-weight:700; font-family: var(--f-mono); color: var(--ambar); }
.stat-text{ font-size:0.78rem; font-weight:700; text-align:left; line-height:1.5; border-left:2px solid rgba(255,255,255,0.28); padding-left:16px; letter-spacing:0.03em; }

.seccion-ubicacion{ margin:0 15px 30px 15px; border-radius:28px; overflow:hidden; height:360px; box-shadow:0 14px 34px rgba(11,24,38,0.10); border:1px solid #cdd7e5; filter: grayscale(0.15) contrast(1.03); }

.grilla-testimonios{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; max-width:1220px; margin:0 auto; }
.tarjeta-testimonio{ background:var(--concreto-2); border:1px solid var(--linea); border-top:4px solid var(--ambar); border-radius:4px; padding:30px 24px; text-align:left; display:flex; flex-direction:column; transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease; }
.tarjeta-testimonio:hover{ transform:translateY(-6px); box-shadow:0 18px 34px rgba(11,24,38,0.12); }
.tarjeta-testimonio .estrellas{ color:var(--ambar); font-size:1.05rem; letter-spacing:2px; margin-bottom:14px; }
.tarjeta-testimonio p{ color:var(--texto-bajo); line-height:1.6; font-size:.92rem; flex-grow:1; margin-bottom:20px; }
.autor-testimonio{ display:flex; align-items:center; gap:12px; }
.avatar-testimonio{ width:38px; height:38px; border-radius:50%; background:var(--noche); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-family:var(--f-display); font-size:1.05rem; flex-shrink:0; }
.autor-testimonio strong{ display:block; font-size:.9rem; color:var(--texto-alto); }
.autor-testimonio span{ display:block; font-size:.76rem; color:var(--texto-bajo); }

.seccion-cotizador{ background:var(--concreto-2); border:1px solid var(--linea); border-radius:24px; max-width:1120px; margin:24px auto 0; padding:38px 40px; position:relative; z-index:5; box-shadow:0 20px 48px rgba(11,24,38,0.12); }
.cotizador-cabecera{ text-align:center; margin-bottom:26px; }
.cotizador-cabecera h2{ font-size:1.7rem; color:var(--texto-alto); margin-bottom:8px; }
.cotizador-cabecera p{ color:var(--texto-bajo); font-size:.95rem; }
.form-cotizador{ display:grid; grid-template-columns:repeat(5, 1fr); gap:14px; align-items:end; }
.campo-cotizador{ display:flex; flex-direction:column; gap:6px; }
.campo-cotizador label{ font-size:.78rem; font-weight:700; color:var(--texto-alto); }
.campo-cotizador input, .campo-cotizador select{ border:1px solid var(--linea); border-radius:8px; padding:12px 12px; font-family:var(--f-body); font-size:.92rem; color:var(--texto-alto); background:#fff; outline:none; transition:border-color .25s ease, box-shadow .25s ease; }
.campo-cotizador input:focus, .campo-cotizador select:focus{ border-color:var(--ambar); box-shadow:0 0 0 4px rgba(11,94,215,0.12); }
.btn-cotizador{ border:none; background:var(--ambar); color:#fff; font-weight:800; font-family:var(--f-body); padding:13px 18px; border-radius:8px; cursor:pointer; font-size:.92rem; display:flex; align-items:center; justify-content:center; gap:8px; transition:background .25s ease, transform .25s ease; }
.btn-cotizador:hover{ background:var(--ambar-2); transform:translateY(-2px); }
.btn-cotizador svg{ width:16px; height:16px; fill:#fff; }
.error-cotizador{ grid-column:1 / -1; color:#b3261e; font-size:.82rem; font-weight:600; display:none; }
.error-cotizador.visible{ display:block; }

/* ============================================================
   5. PÁGINA SERVICIOS
   ============================================================ */
.pagina-servicios{ padding:58px 20px 92px; background: linear-gradient(180deg, rgba(11,94,215,0.06) 0%, rgba(248,251,255,0) 260px), var(--concreto); }
.hero-servicios{ background:var(--noche); color:#fff; border-radius:22px; padding:52px 52px 88px; position:relative; overflow:hidden; box-shadow:0 18px 42px rgba(0,33,71,0.18); }
.hero-servicios::after{ content:''; position:absolute; left:0; right:0; bottom:26px; height:4px; background-image:linear-gradient(90deg, var(--ambar) 0 50%, transparent 50% 100%); background-size:80px 4px; background-repeat:repeat-x; opacity:.72; animation:correrLinea 1.6s linear infinite; -webkit-mask-image:linear-gradient(90deg, transparent, black 100px, black calc(100% - 100px), transparent); mask-image:linear-gradient(90deg, transparent, black 100px, black calc(100% - 100px), transparent); }
.hero-servicios img{ position:absolute; right:52px; bottom:10px; width:86px; height:auto; z-index:1; animation:apareceCamion .9s cubic-bezier(.2,.8,.2,1) both; animation-delay:.5s; }
.hero-servicios .eyebrow{ opacity:0; transform:translateY(26px); animation:subeYAparece .7s ease forwards; animation-delay:.1s; }
.hero-servicios h1{ font-size:3.4rem; line-height:1; margin-bottom:22px; max-width:760px; opacity:0; transform:translateY(26px); animation:subeYAparece .8s cubic-bezier(.2,.8,.2,1) forwards; animation-delay:.22s; }
.hero-servicios p{ color:#d8e6f7; line-height:1.65; font-size:1.02rem; max-width:760px; opacity:0; transform:translateY(26px); animation:subeYAparece .7s ease forwards; animation-delay:.36s; }
.indice-servicios{ display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; margin:28px 0 22px; }
.indice-servicios a{ background:#fff; border:1px solid var(--linea); border-top:4px solid var(--ambar); color:var(--texto-alto); text-decoration:none; border-radius:10px; padding:18px 16px; font-weight:800; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.indice-servicios a:hover, .indice-servicios a:focus-visible{ transform:translateY(-3px); box-shadow:0 14px 28px rgba(11,24,38,0.10); border-color:var(--ambar); outline:none; }
.detalle-servicio{ display:grid; grid-template-columns:360px minmax(0, 1fr); gap:42px; align-items:center; padding:58px 0; border-top:1px dashed var(--linea); }
.detalle-servicio.invertido{ grid-template-columns:minmax(0, 1fr) 360px; }
.detalle-servicio.invertido .media-servicio{ order:2; }
.media-servicio{ min-height:280px; border-radius:16px; border:1px solid var(--linea); border-top:4px solid var(--ambar); background: linear-gradient(180deg, rgba(11,94,215,0.08), rgba(255,255,255,0) 70%), #fff; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.media-servicio::after{ content:''; position:absolute; left:0; right:0; bottom:28px; height:3px; background-image:repeating-linear-gradient(90deg, var(--ambar) 0 34px, transparent 34px 68px); opacity:.45; }
.media-servicio img{ width:132px; height:132px; object-fit:contain; position:relative; z-index:1; }
.contenido-servicio .km{ font-family:var(--f-mono); color:var(--texto-bajo); letter-spacing:.1em; font-size:.76rem; text-transform:uppercase; display:block; margin-bottom:12px; }
.contenido-servicio h2{ font-size:2.35rem; line-height:1.08; margin-bottom:16px; }
.contenido-servicio p{ color:var(--texto-bajo); line-height:1.7; margin-bottom:18px; }
.lista-servicio{ display:grid; gap:10px; list-style:none; margin-top:20px; }
.lista-servicio li{ padding-left:28px; position:relative; color:var(--texto-alto); line-height:1.55; font-weight:600; }
.lista-servicio li::before{ content:''; position:absolute; left:0; top:.45em; width:10px; height:10px; border-radius:50%; background:var(--ambar); box-shadow:0 0 0 5px rgba(11,94,215,0.12); }
.cta-servicios{ margin-top:22px; background:var(--noche); color:#fff; border-radius:18px; padding:40px; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.cta-servicios h2{ font-size:2rem; margin-bottom:8px; }
.cta-servicios p{ color:#d8e6f7; line-height:1.6; }
.acciones{ display:flex; gap:12px; flex-wrap:wrap; }

/* ============================================================
   6. PÁGINA FORMULARIO
   ============================================================ */
.pagina-formulario{ min-height:100vh; padding:64px 20px 92px; background: linear-gradient(180deg, rgba(11,94,215,0.06) 0%, rgba(248,251,255,0) 240px), var(--concreto); }
.cabecera{ display:block; }
.presentacion{ background:var(--noche); color:white; border-radius:22px; padding:46px 48px 78px; position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0, 1fr) minmax(260px, 330px); gap:34px; align-items:center; box-shadow:0 18px 42px rgba(0,33,71,0.18); }
.presentacion::after{ content:''; position:absolute; left:0; right:0; bottom:26px; height:4px; background-image:linear-gradient(90deg, var(--ambar) 0 50%, transparent 50% 100%); background-size:80px 4px; background-repeat:repeat-x; opacity:.65; animation:correrLinea 1.6s linear infinite; -webkit-mask-image:linear-gradient(90deg, transparent, black 100px, black calc(100% - 100px), transparent); mask-image:linear-gradient(90deg, transparent, black 100px, black calc(100% - 100px), transparent); }
.camion-formulario{ position:absolute; right:52px; bottom:10px; width:86px; height:auto; z-index:1; animation:apareceCamion .9s cubic-bezier(.2,.8,.2,1) both; animation-delay:.62s; }
@keyframes apareceCamion{ from{ opacity:0; transform:translateX(26px); } to{ opacity:1; transform:translateX(0); } }
.presentacion .eyebrow{ opacity:0; transform:translateY(26px); animation:subeYAparece .7s ease forwards; animation-delay:.1s; }
.presentacion h1{ font-size:3rem; line-height:1; margin-bottom:24px; max-width:720px; opacity:0; transform:translateY(26px); animation:subeYAparece .8s cubic-bezier(.2,.8,.2,1) forwards; animation-delay:.22s; }
.presentacion p{ color:#d8e6f7; line-height:1.65; margin-bottom:18px; font-size:1rem; opacity:0; transform:translateY(26px); animation:subeYAparece .7s ease forwards; animation-delay:.36s; }
.presentacion p + p{ animation-delay:.46s; }
.aviso{ border-left:4px solid var(--ambar); padding:14px 16px; background:rgba(255,255,255,0.08); border-radius:12px; margin-top:0; color:#fff; font-weight:600; line-height:1.55; align-self:stretch; display:flex; align-items:center; opacity:0; transform:translateY(26px); animation:subeYAparece .7s ease forwards; animation-delay:.56s; }
.formulario-card{ background:var(--concreto-2); border:1px solid var(--linea); border-top:4px solid var(--ambar); border-radius:16px; box-shadow:0 18px 40px rgba(11,24,38,0.10); padding:42px; max-width:920px; margin:34px auto 0; }
.formulario-card h2{ font-size:2rem; margin-bottom:10px; }
.nota-obligatorio{ color:var(--texto-bajo); font-size:.92rem; margin-bottom:28px; }
.bloque-form{ padding:28px 0 8px; border-top:1px dashed var(--linea); }
.bloque-form:first-of-type{ border-top:none; padding-top:0; }
.bloque-cabecera{ display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.bloque-numero{ width:34px; height:34px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; background:rgba(11,94,215,0.12); color:var(--ambar-2); font-family:var(--f-mono); font-size:.76rem; font-weight:800; }
.bloque-cabecera h3{ font-size:1.35rem; color:var(--texto-alto); }
.campo{ margin-bottom:20px; }
.campo label, .grupo-label{ display:block; font-weight:700; color:var(--texto-alto); margin-bottom:8px; line-height:1.35; }
.obligatorio{ color:var(--ambar-2); }
.ayuda{ color:var(--texto-bajo); font-size:.86rem; line-height:1.45; margin-top:7px; }
input, select, textarea{ width:100%; border:1px solid var(--linea); background:#fff; color:var(--texto-alto); border-radius:10px; padding:14px 14px; font-family:var(--f-body); font-size:1rem; outline:none; transition:border-color .25s ease, box-shadow .25s ease; }
textarea{ min-height:118px; resize:vertical; }
input:focus, select:focus, textarea:focus{ border-color:var(--ambar); box-shadow:0 0 0 4px rgba(11,94,215,0.12); }
.opciones{ display:grid; gap:10px; }
.opciones.columnas{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
.opciones.documentacion{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
.opcion{ display:flex; align-items:flex-start; gap:10px; border:1px solid var(--linea); border-radius:10px; padding:12px 14px; background:#fff; transition:border-color .25s ease, background .25s ease, box-shadow .25s ease; }
.opcion:hover{ border-color:rgba(11,94,215,0.45); background:#fafdff; }
.opcion input{ width:auto; margin-top:3px; accent-color:var(--ambar); }
.opcion span{ line-height:1.4; }
.grupo-error .opcion{ border-color:#d55c5c; background:#fff8f8; }
.grid-doble{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.campo-condicional[hidden]{ display:none; }
.mensaje-formulario{ display:none; margin-top:18px; padding:14px 16px; border-radius:10px; font-weight:600; line-height:1.45; }
.mensaje-formulario.visible{ display:block; }
.mensaje-formulario.ok{ background:#e8f7ee; color:#176334; border:1px solid #a8dec0; }
.mensaje-formulario.error{ background:#fff0f0; color:#8a1f1f; border:1px solid #f0b8b8; }
.nota-contacto{ margin-top:16px; color:var(--texto-bajo); font-size:.9rem; text-align:center; line-height:1.55; }
.nota-contacto a{ color:var(--ambar-2); font-weight:700; text-decoration:none; }

/* ============================================================
   7. MEDIA QUERIES (RESPONSIVE PARA CELULARES)
   ============================================================ */
@media (max-width:1024px){
  .grilla-testimonios, .grilla-servicios, .form-cotizador{ grid-template-columns:repeat(2,1fr); }
  .btn-cotizador{ grid-column:1 / -1; padding:15px; }
}

@media (max-width:900px){
  html{ scroll-padding-top:78px; }
  nav{ flex-direction:row; flex-wrap:wrap; padding:12px 16px; gap:0; justify-content:space-between; }
  .nav-izquierda{ flex-direction:row; gap:0; width:auto; }
  .logo img{ height:52px; }
  .nav-toggle{ display:flex; order:2; }
  .whatsapp-nav{ order:1; margin-right:10px; }
  .whatsapp-nav a{ padding:9px 14px; font-size:0.85rem; }
  .enlaces{ display:flex; flex-direction:column; width:100%; order:3; max-height:0; overflow:hidden; opacity:0; gap:2px; transition: max-height .3s ease, opacity .25s ease, margin-top .3s ease; margin-top:0; }
  .enlaces.abierto{ max-height:320px; opacity:1; margin-top:14px; }
  .enlaces a{ text-align:center; padding:13px 14px; border-radius:10px; font-size:1rem; }

  header{ padding:40px 20px 0 20px; text-align:center; min-height:64vh; }
  .hero-contenido{ display:flex; flex-direction:column; align-items:center; text-align:center; padding-bottom:70px; }
  header h1{ font-size:2.5rem; }
  .hero-eyebrow{ justify-content:center; }

  .seccion{ padding:70px 15px; }
  .seccion h2, .seccion-compromiso h2, .titulo-sobre-nosotros, .estadisticas-cabecera h2{ font-size:1.85rem; }
  .seccion-compromiso, .seccion-estadisticas-nueva{ border-radius:20px; margin:0 10px 30px 10px; padding:44px 20px; }

  .grilla-compromiso{ grid-template-columns:1fr; gap:34px; }
  .cinta-texto .grupo-texto{ font-size:1.9rem; }
  .contenedor-sobre-nosotros{ flex-direction:column; gap:40px; }
  .sobre-texto{ text-align:center; }
  .acciones-sobre{ flex-direction:column; align-items:center; }
  .estadisticas-cabecera{ flex-direction:column; text-align:center; gap:20px; padding-bottom:30px; margin-bottom:30px; }
  .estadisticas-cuerpo{ flex-direction:column; gap:36px; }
  .stat-item{ flex-direction:column; justify-content:center; gap:10px; }
  .stat-text{ text-align:center; border-left:none; border-top:2px solid rgba(255,255,255,0.28); padding-left:0; padding-top:14px; }

  .footer-nuevo{ padding:40px 20px 20px 20px; border-radius:20px 20px 0 0; }
  .footer-contenedor{ flex-direction:column; gap:36px; align-items:center; text-align:center; }
  .col-newsletter{ max-width:100%; }
  .input-grupo{ justify-content:center; }
  .footer-columna{ align-items:center; }
  .item-contacto{ flex-direction:column; gap:8px; }
  .separador-contacto{ width:50%; margin:14px auto; }
  .footer-bottom{ flex-direction:column; gap:18px; text-align:center; padding-top:20px; }
  
  .seccion-cotizador{ margin:16px 14px 0; padding:28px 22px; border-radius:18px; }

  /* Ajustes de botones para celulares (Se adaptan al 100% de la pantalla) */
  .btn { width: 100%; }
  .hero-cta-row { justify-content: center; width: 100%; }

  .pagina-servicios{ padding:44px 14px 72px; }
  .hero-servicios{ padding:36px 24px 78px; border-radius:18px; }
  .hero-servicios h1{ font-size:2.35rem; }
  .hero-servicios img{ right:24px; width:76px; }
  .indice-servicios{ grid-template-columns:1fr 1fr; }
  .detalle-servicio, .detalle-servicio.invertido{ grid-template-columns:1fr; gap:24px; padding:42px 0; }
  .detalle-servicio.invertido .media-servicio{ order:0; }
  .media-servicio{ min-height:220px; }
  .cta-servicios{ flex-direction:column; align-items:flex-start; padding:30px 24px; }
  
  .cabecera{ display:block; }
  .presentacion{ display:block; padding:34px 24px 76px; border-radius:18px; }
  .presentacion h1{ font-size:2.25rem; }
  .aviso{ margin-top:24px; }
  .camion-formulario{ right:24px; width:74px; }
  .formulario-card{ padding:26px 20px; border-radius:16px; }
  .grid-doble{ grid-template-columns:1fr; gap:0; }
  .opciones.columnas, .opciones.documentacion{ grid-template-columns:1fr; }
}

@media (max-width:600px){
  .grilla-testimonios, .grilla-servicios, .form-cotizador{ grid-template-columns:1fr; }
  header h1{ font-size:2.1rem; }
  .whatsapp-flotante{ display:flex; }
  .whatsapp-nav{ display:none; }
}

@media (max-width:520px){
  .indice-servicios{ grid-template-columns:1fr; }
  .contenido-servicio h2{ font-size:1.9rem; }
  .acciones { width:100%; }
}

@media (max-width:480px){
  .pagina-formulario{ padding:44px 14px 70px; }
  .presentacion h1{ font-size:1.85rem; }
  .formulario-card h2{ font-size:1.65rem; }
  .enlaces a{ font-size:.9rem; padding:8px 10px; }
}

@media (max-width:420px){
  header h1{ font-size:1.72rem; }
  .hero-eyebrow{ font-size:0.68rem; }
  .seccion{ padding:56px 14px; }
  .seccion h2, .seccion-compromiso h2, .titulo-sobre-nosotros, .estadisticas-cabecera h2{ font-size:1.55rem; }
  .titulo-sobre-nosotros{ margin-bottom:44px; }
  .tarjeta-servicio{ padding:28px 18px 24px 18px; }
  .cinta-texto .grupo-texto{ font-size:1.4rem; gap:14px; padding-right:32px; }
  .stat-num{ font-size:2.7rem; }
  .seccion-ubicacion{ height:280px; margin:0 10px 24px 10px; border-radius:18px; }
  .footer-nuevo{ padding:32px 16px 18px 16px; }
  .logo img{ height:44px; }
}

@media (max-width:900px){
  .btn{ padding:15px 28px; }
  a, button{ -webkit-tap-highlight-color: rgba(11,94,215,0.15); }
}

/* --- ESTILOS PARA VISTA PREVIA DE ARCHIVOS --- */
.preview-container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
}
.preview-item {
  position: relative;
  width: 90px;
  height: 90px;
  border: 1px solid var(--linea);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.preview-item .pdf-badge {
  font-family: var(--f-mono);
  font-size: 0.75rem;
  font-weight: 700;
  color: #8a1f1f;
  background: #fff0f0;
  padding: 4px;
  border-radius: 4px;
  text-align: center;
}
.preview-item .btn-eliminar-archivo {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(0, 33, 71, 0.85);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.preview-item .btn-eliminar-archivo:hover {
  background: #d55c5c;
}