:root{
  --crimson:#ce2a45;        /* Rojo corporativo general */
  --crimson-dark:#990019;
  --crimson-light:#63232581;  /* Rojo más claro para el HERO */
  --crimson-light-2:#C61B2C;
  --navy:#071d6d;           /* Azul corporativo para textos del HERO */
  --amber:#e8bf2d;
  --amber-dark:#E6B800;
  --slate-50:#f8fafc;
  --slate-100:#f1f5f9;
  --slate-200:#e2e8f0;
  --slate-600:#475569;
  --slate-700:#223f68;
  --text:#27417d;
  --radius: 22px;
  --shadow: 0 10px 30px rgba(2,8,23,.09), 0 2px 8px rgba(2,8,23,.05);
  --shadow-lg: 0 20px 50px rgba(2,8,23,.12), 0 6px 20px rgba(2,8,23,.08);

  /* Degradado sutil para toda la página (fuera del hero) */
  --site-grad: linear-gradient(to bottom, rgba(30,78,158,0.10), rgba(175,200,230,0.22));

  /* Alto del header (para header fijo) */
  --header-h:78px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;color:var(--text);background: var(--site-grad);overflow-x:hidden;}
img,svg,video{max-width:100%;height:auto;}

/* Header fijo: permite navegar sin volver arriba */
body{padding-top:var(--header-h);}
html{scroll-padding-top:calc(var(--header-h) + 18px);}

.container{max-width:1160px;margin:0 auto;padding:0 24px}

/* Un poco más de espacio horizontal en el header (para que el menú respire) */
.header .container{padding:0 14px}

/* Header / Footer */
.header.strong{background:linear-gradient(90deg,#0B1B55,var(--crimson));color:#fff;box-shadow:var(--shadow)}
.header{position:fixed;top:0;left:0;right:0;z-index:999}
.header .bar{
  display:grid;
  grid-template-columns:auto 1fr auto auto;
  align-items:center;
  gap:18px;
  padding:14px 0;
}

/* Menú horizontal, ordenado y con espacio uniforme */
.header nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  flex-wrap:nowrap;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
}
.header nav::-webkit-scrollbar{height:6px}
.header nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25);border-radius:999px}

.header nav a{
  color:#fff;
  text-decoration:none;
  margin:0;
  font-weight:700;
  font-size:14px;
  opacity:.98;
  white-space:nowrap;
}
.header nav a:hover{color:var(--amber)}
.logo{display:flex;align-items:center;gap:12px;justify-self:start}
.logo img{height:72px}

/* Evita que el CTA se parta en dos líneas */
.header .btn{white-space:nowrap;}

/* CTA del header un poco más compacto para que no "apriete" el menú */
.header .btn.strong-cta{padding:10px 14px;border-radius:12px}

.footer.strong{background:linear-gradient(90deg,#0B1B55,var(--crimson));color:#fff}
.footer .row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:24px 0}
.footer a{color:#fff;text-decoration:none}
.footer a:hover{text-decoration:underline}

/* Sections */
.section{padding:90px 0}
.section.alt{background:rgba(255,255,255,0.55);backdrop-filter:saturate(1.1) blur(0.6px)}
.center{text-align:center}
h1{font-size:clamp(32px,5vw,54px);line-height:1.1;margin:0 0 12px;color:var(--navy)}
h2{font-size:clamp(28px,4vw,42px);margin:0 0 10px;color:var(--navy)}
h3{font-size:22px;margin:0 0 10px;color:var(--navy)}
.subtitle{font-size:24px;color:var(--navy);font-weight:800}
.crimson{color:var(--crimson)}

/* HERO — rojo más claro y textos azules */
.hero-red.light{background:linear-gradient(90deg, var(--crimson-light) 0%, var(--crimson-light-2) 100%);}
.hero-red.light h1,
.hero-red.light h2,
.hero-red.light p,
.hero-red.light .kpi span,
.hero-red.light .kpi b{color:var(--navy)}
.hero-red .hero-outline{border-color:var(--navy)!important;color:var(--navy)!important}
.hero-red .hero-outline:hover{background:rgba(11,27,85,.08)}
.hero img{border-radius:26px;box-shadow:var(--shadow-lg);border:none}

.grid{display:grid;gap:28px}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
.grid-4{grid-template-columns:1fr 1fr}
@media(min-width:880px){
  .grid-2{grid-template-columns:1.1fr .9fr}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-4{grid-template-columns:repeat(4,1fr)}
}

.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:14px;border:2px solid var(--slate-200);background:#fff;cursor:pointer;text-decoration:none;color:var(--text);font-weight:700}
.btn.primary{background:var(--crimson);color:#fff;border-color:var(--crimson)}
.btn.primary:hover{background:var(--crimson-dark)}
.btn.outline{background:#fff;color:var(--navy);border-color:var(--navy)}
.btn.outline:hover{background:#f2f5ff}
.strong-cta{background:var(--amber)!important;color:var(--navy)!important;border-color:var(--amber)!important}
.strong-cta:hover{background:var(--amber-dark)!important}

/* Cards / accents */
.card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;border:1px solid var(--slate-200)}
.card.no-bg{background:transparent;box-shadow:none;border:none;padding:0}

.card .title{font-weight:900;color:var(--navy)}
.accent-top{position:relative}
.accent-top::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;background:linear-gradient(90deg,#0B1B55,var(--crimson));border-top-left-radius:var(--radius);border-top-right-radius:var(--radius)}
.accent-left{position:relative}
.accent-left::before{content:"";position:absolute;inset:0 auto 0 0;width:6px;background:linear-gradient(180deg,var(--crimson),#0B1B55);border-top-left-radius:var(--radius);border-bottom-left-radius:var(--radius)}

.badges{display:flex;gap:24px;flex-wrap:wrap;justify-content:center;margin-top:18px}
.badge{display:flex;flex-direction:column;align-items:center;gap:6px}
.badge .dot{height:44px;width:44px;border-radius:12px;background:linear-gradient(135deg,#ffe9a6,#ffd1d8);display:grid;place-items:center;color:var(--navy);font-weight:900}

.gallery img{width:100%;height:100%;object-fit:cover;border-radius:18px;box-shadow:var(--shadow);transition:transform .25s ease,box-shadow .25s ease}
.gallery .tile:hover img{transform:translateY(-3px);box-shadow:var(--shadow-lg)}

.cta-band.strong{background:linear-gradient(90deg,#0B1B55,var(--crimson));color:#fff;text-align:center;padding:80px 0}
.cta-band p{color:rgba(255,255,255,.92)}

.checks{list-style:none;padding:0;margin:0}
.checks li{margin:6px 0;color:var(--slate-700)}

.pillrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.pill{border:1px solid var(--slate-200);border-radius:999px;padding:6px 12px;background:#fff;color:#0f172a;font-size:12px}

/* Routes */
.routes-col{display:flex;flex-direction:column;gap:16px}
.route-card{background:#fff;border:1px solid var(--slate-200);border-left:5px solid var(--crimson);border-radius:16px;padding:16px;box-shadow:var(--shadow)}
.map-small{max-width:75%;border-radius:18px;box-shadow:var(--shadow);border:2px solid var(--navy)}

/* Animations */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1;transform:translateY(0)}

.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:24px}
.kpi{background:#fff;border:2px solid var(--slate-200);border-radius:16px;padding:16px;text-align:center;box-shadow:var(--shadow)}
.kpi b{display:block;font-size:22px;color:#111827}
.kpi span{color:var(--slate-600)}

/* Section with subtle local gradient */
.subtle-gradient{background: linear-gradient(to bottom, rgba(30,78,158,0.06), rgba(175,200,230,0.16));}


/* === COTIZAR (sección destacada) === */
.cotizar-section{
  background:#fff8e1; /* amarillo suave, serio */
  border-top: 1px solid rgba(0,0,0,.06);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.cotizar-card{background:#fff;}

/* Formulario */
.tm-form{display:flex;flex-direction:column;gap:14px;margin-top:8px}
.field{display:flex;flex-direction:column;gap:6px}
.field span{font-weight:700;color:var(--navy,#1e293b)}
.field input,.field textarea{
  width:100%; padding:12px 14px; border-radius:12px;
  border:1.5px solid var(--slate-200,#cbd5e1); background:#fff; color:#0f172a;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--crimson,#c62828);box-shadow:0 0 0 3px rgba(198,40,40,.12)}
.form-status{margin-top:6px;font-size:14px;color:var(--slate-700,#334155)}
.form-status.ok{color:#0a7a2f}
.form-status.err{color:#b00020}

/* Tips */
.cotizar-tips{margin:0 0 10px 18px}
.cotizar-tips li{margin:6px 0}
.small{font-size:.95rem;opacity:.9}
/* Imagen destacada por sección (agregado) */
.section-img{
  width:100%;
  max-width: 980px;
  height:auto;
  border-radius: 18px;
  box-shadow: none;
  margin-top: 16px;
}

.card img{
  max-height: 180px;
  object-fit: cover;
}
.hero img{
  max-height: 380px;
  width: 100%;
  object-fit: cover;
}
@media (max-width: 640px){
  .card img{max-height: 160px;}
  .hero img{max-height: 280px;}
}

/* Servicios más compactos */
#servicios .card{
  padding: 16px;
}
#servicios h3{
  margin-top: 10px;
}


/* --- Imágenes más pequeñas (ajuste) --- */
.card img{
  max-height: 170px;
  object-fit: cover;
}
.hero img{
  max-height: 300px;
  width: 100%;
  object-fit: cover;
}
@media (max-width: 640px){
  .card img{max-height: 120px;}
  .hero img{max-height: 240px;}
}


/* Ajuste específico: Seguridad y Seguros
   - Mantener imágenes dentro de cards compactas
   - Dejar la imagen grande de la sección (handshake) completa (sin recorte)
*/
#seguros .card img{max-height: 230px;object-fit:cover;}
#seguros .section-img{
  max-height: 100px;
  width:100%;
  height:auto;
  object-fit:contain;
  margin-top: 18px;
}


/* === Toque premium: sección Cotizar === */
.cotizar-section{
  background: linear-gradient(180deg, #fff3bf 0%, #fff8e1 45%, #ffffff 100%);
  position: relative;
  overflow: hidden;
}
.cotizar-section::before{
  content:"";
  position:absolute;
  inset:-80px -120px auto auto;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle at center, rgba(37,99,235,.18), rgba(37,99,235,0) 60%);
  filter: blur(1px);
  pointer-events:none;
}
.cotizar-section::after{
  content:"";
  position:absolute;
  inset:auto auto -140px -140px;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle at center, rgba(245,158,11,.22), rgba(245,158,11,0) 65%);
  pointer-events:none;
}
#cotizar .container{ position: relative; }
#cotizar h2{
  letter-spacing: .2px;
}
#cotizar h2::after{
  content:"";
  display:block;
  width: 84px;
  height: 4px;
  margin: 10px auto 0;
  border-radius: 999px;
  background: #2563eb;
  opacity: .9;
}
.cotizar-card{
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 14px 30px rgba(2,6,23,.10);
  border-radius: 16px;
}
.cotizar-card:hover{
  transform: translateY(-2px);
  transition: transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 18px 36px rgba(2,6,23,.12);
}
.tm-form .field input,
.tm-form .field textarea{
  border-radius: 14px;
  border: 1.5px solid rgba(15,23,42,.14);
}
.tm-form .field input:focus,
.tm-form .field textarea:focus{
  border-color: #2563eb;
  box-shadow: 0 0 0 4px rgba(37,99,235,.14);
}
/* Botón más premium */
.btn.primary{
  background: #2563eb;
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 10px 18px rgba(37,99,235,.22);
}
.btn.primary:hover{
  background: #1d4ed8;
  box-shadow: 0 14px 22px rgba(29,78,216,.26);
  transform: translateY(-1px);
}
.btn.primary:active{
  transform: translateY(0);
  box-shadow: 0 8px 14px rgba(29,78,216,.22);
}


/* === Badge Cotización rápida === */
.cotizar-badge{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  margin: 10px 0 18px;
}
.cotizar-badge span{
  background:#2563eb;
  color:#fff;
  padding:6px 14px;
  border-radius:999px;
  font-weight:700;
  font-size:.95rem;
  box-shadow:0 6px 14px rgba(37,99,235,.28);
}
.cotizar-badge small{
  color:#334155;
  font-size:.9rem;
}


/* Mensaje de éxito personalizado */
.form-status.ok{
  background: rgba(37,99,235,.08);
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(37,99,235,.18);
}


/* Mensaje: fade suave */
.form-status{
  transition: opacity .26s ease, transform .26s ease;
}
.form-status.fade{
  opacity: 0;
  transform: translateY(-2px);
}

/* Línea de confianza */
.cotizar-trust{
  margin-top: 10px;
  font-size: .92rem;
  color: #475569;
  opacity: .95;
}



/* ===============================
   Ajustes solicitados (2026-01)
   =============================== */

/* 1) Menú móvil: reemplazar "3 puntos" por "Ver más" (botón visible y llamativo) */
.menu-toggle{
  display:none;
  background: #FFD400;
  border: 0;
  color:#000;
  padding:10px 16px;
  border-radius:10px;
  font-weight:900;
  letter-spacing:.3px;
  cursor:pointer;
  white-space:nowrap;
  box-shadow: 0 10px 18px rgba(0,0,0,.18);
}
.menu-toggle:hover{filter:brightness(.95);}

/* 2) Logo un poco más grande */
.logo img{height:62px}

/* Logo presente (sobrio) en secciones */
.section-brand{
  display:flex;
  justify-content:center;
  margin: 0 0 18px;
  opacity:.92;
}
.section-brand img{
  height:54px;
  width:auto;
  filter: drop-shadow(0 8px 18px rgba(2,6,23,.18));
}

/* 3) Nuestra flota: 3 imágenes lado a lado */
.fleet-grid{
  display:grid;
  gap:14px;
  grid-template-columns:1fr;
}
.fleet-grid img{
  background:#fff;
  width:100%;
  height:220px;
  object-fit: contain;
  border-radius:18px;
  box-shadow: var(--shadow);
  border:1px solid rgba(15,23,42,.10);
}

.fleet-item{position:relative;}
.fleet-caption{
  position:absolute;
  left:12px;
  right:12px;
  bottom:12px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(0,0,0,.55);
  color:#fff;
  font-weight:600;
  font-size:.95rem;
  line-height:1.25;
}
@media(min-width:760px){
  .fleet-grid{grid-template-columns:repeat(3,1fr);}
  .fleet-grid img{height:200px;}
}

/* 4) Cada sección ocupa el 100% de la pantalla (sin “asomar” otras secciones)
   Nota: si una sección tiene mucho contenido, seguirá creciendo y permitirá scroll. */
.section{
  min-height: calc(100vh - var(--header-h));
  display:flex;
  align-items:center;
}
.section > .container{width:100%}

/* 5) Imagen "foto conduciendo camión" (Equipo profesional) un poco más pequeña */
#quienes .section-img{
  max-width: 620px;
}
@media (max-width: 640px){
  #quienes .section-img{max-width: 520px;}
}

/* Navegación móvil desplegable */
@media(max-width: 900px){
  .header .bar{
    grid-template-columns:auto 1fr auto auto;
  }
  .menu-toggle{display:inline-flex; align-items:center; justify-content:center;}
  .header nav.site-nav{
    display:none;
    position:absolute;
    top: calc(var(--header-h) - 6px);
    left: 12px;
    right: 12px;
    background: linear-gradient(180deg, rgba(11,27,85,.98), rgba(206,42,69,.96));
    border-radius: 16px;
    padding: 14px;
    box-shadow: var(--shadow-lg);
    flex-direction:column;
    align-items:flex-start;
    gap: 10px;
    overflow: hidden;
  }
  .header nav.site-nav a{
    font-size: 16px;
    padding: 8px 10px;
    width: 100%;
    border-radius: 12px;
    background: rgba(255,255,255,.06);
  }
  .header nav.site-nav a:hover{
    background: rgba(255,255,255,.12);
    color: #fff;
  }
  body.nav-open .header nav.site-nav{display:flex;}
}

/* Desktop mantiene menú horizontal */
@media(min-width: 901px){
  .header nav.site-nav{display:flex;}
}


/* Botón Ver más con fondo amarillo */
.mobile-menu-btn {
    background-color: #FFD400;
    color: #000;
    font-weight: 800;
    padding: 10px 16px;
    border-radius: 6px;
    text-transform: uppercase;
}

/* Logo fijo arriba a la izquierda en cada sección */
.section {
    position: relative;
    min-height: auto;
}

.section .section-logo {
    position: absolute;
    top: 20px;
    left: 20px;
}

.section .section-logo img {
    width: 140px; /* logo más grande */
}

/* Header logo más grande */
.header-logo img {
    width: 160px;
}


/* ===== LOGO CORPORATIVO ===== */

/* Logo en header */
.header-logo img {
    width: 180px; /* un poco más grande, sobrio */
    height: auto;
}

/* Logo en cada sección */
.section-logo {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 10;
}

.section-logo img {
    width: 160px; /* apenas más chico que el header */
    height: auto;
}

/* Asegura que cada sección permita el logo */
section {
    position: relative;
}


/* Fuerza logo en cada sección: arriba izquierda (no centrado) */
.section-logo{
  position:absolute !important;
  top:18px !important;
  left:18px !important;
  z-index:20 !important;
  display:block !important;
}
.section-logo img{
  width:170px;
  height:auto;
}
/* Por si queda algún logo centrado antiguo */
.section-brand{display:none !important;}


/* =========================
   Nuestros camiones - imágenes (2 arriba de tarjetas)
   ========================= */
.fleet-grid.two{
  display:grid;
  gap:16px;
  grid-template-columns:1fr;
}
.fleet-grid.two img{
  width:100%;
  height:220px;
  object-fit:cover;
  border-radius:18px;
  box-shadow: var(--shadow);
  border:1px solid rgba(15,23,42,.10);
}
@media(min-width:768px){
  .fleet-grid.two{
    grid-template-columns:1fr 1fr;
  }
}


/* =========================
   Nuestros camiones - 3 imágenes bajo la información
   ========================= */
.fleet-grid.three{
  display:grid;
  gap:16px;
  grid-template-columns:1fr;
}
.fleet-grid.three img{
  width:100%;
  height:200px;
  object-fit:cover;
  border-radius:18px;
  box-shadow: var(--shadow);
}
@media(min-width:768px){
  .fleet-grid.three{
    grid-template-columns:repeat(3,1fr);
  }
}


/* ===== Robustez: si JS no carga, igual se ve el contenido ===== */
.reveal{opacity:1;transform:none;}
html.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease, transform .6s ease}
html.js .reveal.in{opacity:1;transform:translateY(0)}


/* ===== V2: Secciones sin imágenes más entretenidas ===== */
.section::after{
  content:"";
  display:block;
  height:32px;
  margin-top:40px;
  background:
    radial-gradient(22px 11px at 10% 50%, rgba(37,99,235,.25), transparent 70%),
    radial-gradient(22px 11px at 30% 50%, rgba(206,42,69,.25), transparent 70%),
    radial-gradient(22px 11px at 50% 50%, rgba(37,99,235,.25), transparent 70%),
    radial-gradient(22px 11px at 70% 50%, rgba(206,42,69,.25), transparent 70%),
    radial-gradient(22px 11px at 90% 50%, rgba(37,99,235,.25), transparent 70%);
  opacity:.9;
}
.section[data-icon] .container{ position:relative; }
.section[data-icon] .container::before{
  content: attr(data-icon);
  position:absolute;
  right:-10px;
  top:-10px;
  font-size:96px;
  opacity:.08;
  transform: rotate(-8deg);
  pointer-events:none;
  user-select:none;
}



/* ===== V2 FIX: que SI se noten los cambios ===== */

/* 1) Icono decorativo: attr() debe estar en el MISMO elemento */
.section[data-icon]{position:relative; overflow:hidden;}
.section[data-icon]::before{
  content: attr(data-icon);
  position:absolute;
  right:18px;
  top:64px; /* debajo del logo de sección */
  font-size:120px;
  line-height:1;
  opacity:.10;
  transform: rotate(-10deg);
  pointer-events:none;
  user-select:none;
  filter: drop-shadow(0 12px 18px rgba(2,6,23,.10));
}

/* 2) Fondo con patrón sutil (hace que se vea menos “plano” aunque no haya fotos) */
.section{
  background-image:
    radial-gradient(circle at 12% 22%, rgba(37,99,235,.10), transparent 42%),
    radial-gradient(circle at 82% 32%, rgba(206,42,69,.10), transparent 44%),
    radial-gradient(circle at 46% 78%, rgba(245,158,11,.10), transparent 46%);
}

/* Mantener el fondo alternativo en .alt, pero con patrón encima */
.section.alt{
  background-color: rgba(255,255,255,0.55);
}

/* 3) Separador “wave dots” visible incluso con display:flex */
.section::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:10px;
  height:34px;
  background:
    radial-gradient(22px 11px at 10% 50%, rgba(37,99,235,.26), transparent 70%),
    radial-gradient(22px 11px at 30% 50%, rgba(206,42,69,.26), transparent 70%),
    radial-gradient(22px 11px at 50% 50%, rgba(37,99,235,.26), transparent 70%),
    radial-gradient(22px 11px at 70% 50%, rgba(206,42,69,.26), transparent 70%),
    radial-gradient(22px 11px at 90% 50%, rgba(37,99,235,.26), transparent 70%);
  opacity:.95;
  pointer-events:none;
}

/* 4) Pequeña “etiqueta” arriba de cada card para dar más diseño */
.card{
  position:relative;
  border:1px solid rgba(15,23,42,.10);
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
.card::after{
  content:"";
  position:absolute;
  inset:auto 18px -10px 18px;
  height:14px;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(37,99,235,.22), rgba(206,42,69,.18));
  filter: blur(0.2px);
  opacity:.55;
}



/* ===== Líneas horizontales de color por sección ===== */
.section{
  position:relative;
}

/* Línea superior */
.section::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:6px;
  background: linear-gradient(90deg,
    #2563eb 0%,
    #ce2a45 50%,
    #f59e0b 100%);
  opacity:.85;
}

/* Línea inferior */
.section::after{
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:6px;
  background: linear-gradient(90deg,
    #f59e0b 0%,
    #ce2a45 50%,
    #2563eb 100%);
  opacity:.85;
}



/* ===== Líneas horizontales V2: más gruesas y separadas ===== */
.section{
  position:relative;
}

/* Línea superior */
.section::before{
  content:"";
  position:absolute;
  top:18px;              /* separación desde arriba */
  left:40px;
  right:40px;
  height:12px;           /* más gruesa */
  border-radius:999px;
  background: linear-gradient(90deg,
    #2563eb 0%,
    #ce2a45 50%,
    #f59e0b 100%);
  opacity:.9;
}

/* Línea inferior */
.section::after{
  content:"";
  position:absolute;
  bottom:18px;           /* separación desde abajo */
  left:40px;
  right:40px;
  height:12px;           /* más gruesa */
  border-radius:999px;
  background: linear-gradient(90deg,
    #f59e0b 0%,
    #ce2a45 50%,
    #2563eb 100%);
  opacity:.9;
}

/* Ajuste mobile */
@media (max-width:640px){
  .section::before,
  .section::after{
    left:20px;
    right:20px;
    height:10px;
  }
}



/* ===== LIMPIEZA: quitar iconos decorativos ===== */
.section[data-icon]::before{
  content:none !important;
}

/* ===== NUEVO ENFOQUE: fondo y color ===== */

/* Fondo base más rico */
.section{
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.85)),
    radial-gradient(circle at 12% 18%, rgba(37,99,235,.12), transparent 40%),
    radial-gradient(circle at 88% 32%, rgba(206,42,69,.12), transparent 42%),
    radial-gradient(circle at 48% 78%, rgba(245,158,11,.10), transparent 45%);
}

/* Secciones alternas un poco más contrastadas */
.section.alt{
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.92)),
    radial-gradient(circle at 14% 20%, rgba(206,42,69,.14), transparent 42%),
    radial-gradient(circle at 86% 70%, rgba(37,99,235,.14), transparent 46%);
}

/* Subtle gradient mantiene identidad */
.section.subtle-gradient{
  background-image:
    linear-gradient(180deg, rgba(240,245,255,.9), rgba(255,255,255,.9)),
    radial-gradient(circle at 18% 22%, rgba(37,99,235,.18), transparent 44%),
    radial-gradient(circle at 82% 78%, rgba(206,42,69,.18), transparent 48%);
}

/* Refuerzo visual: cards destacan más sobre el fondo */
.section .card{
  background:#fff;
  box-shadow: 0 14px 30px rgba(2,6,23,.14);
}

/* Ajuste para que las líneas de sección respiren bien */
.section::before,
.section::after{
  z-index:1;
}
.section > .container{
  position:relative;
  z-index:2;
}



/* ===== AJUSTE FINAL DE COLORES ===== */

/* Líneas más gruesas en degradado de rojos */
.section::before,
.section::after{
  height:18px;
  border-radius:999px;
  background: linear-gradient(90deg,
    #7a0c1d 0%,
    #ce2a45 45%,
    #ff6b81 100%);
  opacity:.95;
}

/* Separación cómoda */
.section::before{ top:20px; }
.section::after{ bottom:20px; }

/* Secciones celeste claro */
.section{
  background-image:
    linear-gradient(180deg, rgba(240,248,255,.95), rgba(240,248,255,.95)),
    radial-gradient(circle at 15% 20%, rgba(96,165,250,.18), transparent 42%),
    radial-gradient(circle at 85% 70%, rgba(147,197,253,.18), transparent 48%);
}

/* Secciones celeste un poco más oscuro */
.section.alt{
  background-image:
    linear-gradient(180deg, rgba(224,242,254,.95), rgba(224,242,254,.95)),
    radial-gradient(circle at 18% 22%, rgba(59,130,246,.22), transparent 44%),
    radial-gradient(circle at 82% 78%, rgba(96,165,250,.22), transparent 48%);
}

/* Mantener legibilidad */
.section h1,
.section h2,
.section h3,
.section p{
  color: var(--navy);
}

/* Cotizar: amarillo claro destacado */
.cotizar-section{
  background-image:
    linear-gradient(180deg, #fff7cc 0%, #fffbe6 55%, #ffffff 100%),
    radial-gradient(circle at 20% 20%, rgba(250,204,21,.35), transparent 45%),
    radial-gradient(circle at 80% 80%, rgba(253,224,71,.35), transparent 48%);
}

/* Cards neutras para no competir */
.section .card{
  background:#ffffff;
}



/* ===== AJUSTES: líneas cuadradas full-width + más azul + más contraste ===== */

/* Líneas: cuadradas (sin borde redondeado) y a todo el ancho */
.section::before,
.section::after{
  left:0 !important;
  right:0 !important;
  border-radius:0 !important;      /* cuadradas */
  height:18px !important;
  opacity:1 !important;
  background: linear-gradient(90deg,
    #0b1b55 0%,
    #2563eb 55%,
    #60a5fa 100%) !important;      /* más azul */
}

/* Pegadas arriba/abajo (sin separación) */
.section::before{ top:0 !important; }
.section::after{ bottom:0 !important; }

/* Más contraste entre secciones (celeste claro vs celeste más profundo) */
.section{
  background-image:
    linear-gradient(180deg, rgba(244,251,255,.98), rgba(244,251,255,.98)),
    radial-gradient(circle at 15% 18%, rgba(96,165,250,.18), transparent 42%),
    radial-gradient(circle at 85% 72%, rgba(147,197,253,.18), transparent 48%) !important;
}
.section.alt{
  background-image:
    linear-gradient(180deg, rgba(214,239,255,.98), rgba(214,239,255,.98)),
    radial-gradient(circle at 18% 20%, rgba(37,99,235,.26), transparent 44%),
    radial-gradient(circle at 82% 80%, rgba(96,165,250,.24), transparent 48%) !important;
}

/* Importante: que las líneas NO aparezcan en Cotizar */
.cotizar-section::before,
.cotizar-section::after{
  display:none !important;
  content:none !important;
}



/* ===== AJUSTE FINAL DEFINITIVO ===== */

/* 1) NO tocar HERO rojo ni Cotizar amarillo (solo ajustes específicos abajo) */

/* 2) Líneas: MÁS gruesas, rojas, separadas de orillas */
.section::before,
.section::after{
  left:48px !important;
  right:48px !important;
  height:22px !important;
  border-radius:0 !important;
  background: linear-gradient(90deg,
    #7a0c1d 0%,
    #ce2a45 50%,
    #ff6b81 100%) !important;
  opacity:1 !important;
}
.section::before{ top:22px !important; }
.section::after{ bottom:22px !important; }

@media (max-width:640px){
  .section::before,
  .section::after{
    left:24px !important;
    right:24px !important;
    height:18px !important;
  }
}

/* 3) Azules más oscuros (pero siempre celestes) */
.section:not(.hero):not(.cotizar-section){
  background-image:
    linear-gradient(180deg, rgba(220,235,255,.98), rgba(220,235,255,.98)),
    radial-gradient(circle at 15% 18%, rgba(59,130,246,.28), transparent 42%),
    radial-gradient(circle at 85% 72%, rgba(96,165,250,.28), transparent 48%) !important;
}

.section.alt:not(.hero):not(.cotizar-section){
  background-image:
    linear-gradient(180deg, rgba(190,220,255,.98), rgba(190,220,255,.98)),
    radial-gradient(circle at 18% 20%, rgba(37,99,235,.34), transparent 44%),
    radial-gradient(circle at 82% 80%, rgba(59,130,246,.34), transparent 48%) !important;
}

/* 4) Asegurar que Cotizar mantenga su amarillo y SIN líneas */
.cotizar-section{
  background-image:
    linear-gradient(180deg, #fff7cc 0%, #fffbe6 55%, #ffffff 100%) !important;
}
.cotizar-section::before,
.cotizar-section::after{
  display:none !important;
}

/* 5) Hero intacto */
.hero-red.light{
  background: linear-gradient(90deg, #8a1424 0%, #c62840 45%, #e9445f 75%, #ff6b81 100%) !important;
}



/* ===== COLORES DEFINIDOS POR CLIENTE (2026-01) =====
   Oscuro: #7B94B8
   Claro:  #8099BF
   Barras: rojo degradado, full width, separadas del logo
*/

/* Asegurar stacking */
.section{ position:relative; }
.section::before, .section::after{ z-index:1; pointer-events:none; }
.section > .container{ position:relative; z-index:2; }

/* Barras: FULL WIDTH + cuadradas + lejos del logo (logo está ~18px desde arriba) */
.section::before,
.section::after{
  left:0 !important;
  right:0 !important;
  height:24px !important;          /* más gruesas */
  border-radius:0 !important;      /* cuadradas */
  background: linear-gradient(90deg,
    #7a0c1d 0%,
    #ce2a45 50%,
    #ff6b81 100%) !important;
  opacity:1 !important;
}

/* Distancia respecto al logo: bajar la barra superior */
.section::before{ top:76px !important; }   /* deja aire bajo el logo de sección */
.section::after{ bottom:22px !important; }

@media (max-width:640px){
  .section::before, .section::after{
    height:20px !important;
  }
  .section::before{ top:68px !important; }
  .section::after{ bottom:18px !important; }
}

/* Fondos: alternancia claro/oscuro (tirado a celeste) SIN afectar hero ni cotizar */
.section:not(.hero):not(.cotizar-section){
  background-color: #8099BF !important; /* claro */
  background-image:
    radial-gradient(circle at 15% 18%, rgba(255,255,255,.18), transparent 44%),
    radial-gradient(circle at 85% 72%, rgba(255,255,255,.14), transparent 48%);
}

.section.alt:not(.hero):not(.cotizar-section){
  background-color: #7B94B8 !important; /* oscuro */
  background-image:
    radial-gradient(circle at 18% 20%, rgba(255,255,255,.18), transparent 44%),
    radial-gradient(circle at 82% 80%, rgba(255,255,255,.14), transparent 48%);
}

/* Mantener Cotizar amarillo y SIN barras */
.cotizar-section::before,
.cotizar-section::after{ display:none !important; }

/* Mantener hero rojo intacto */
.hero-red.light{
  background: linear-gradient(90deg, #8a1424 0%, #c62840 45%, #e9445f 75%, #ff6b81 100%) !important;
}



/* ===== AJUSTE: barras más cerca de la orilla y solo en secciones (NO hero / NO cotizar) ===== */

/* Mostrar barras SOLO en secciones estándar */
.section::before,
.section::after{
  left:0 !important;
  right:0 !important;
}

/* Más cerca de la orilla (para no chocar con el logo de sección) */
.section::before{ top:10px !important; }
.section::after{ bottom:10px !important; }

@media (max-width:640px){
  .section::before{ top:8px !important; }
  .section::after{ bottom:8px !important; }
}

/* Quitar barras en la primera sección (Hero/Inicio) */
.hero::before,
.hero::after{
  display:none !important;
  content:none !important;
}

/* Mantener Cotizar SIN barras */
.cotizar-section::before,
.cotizar-section::after{
  display:none !important;
  content:none !important;
}



/* ===== FIX DEFINITIVO: BARRAS EN TODAS LAS SECCIONES ===== */

/* Reset previo por seguridad */
.section::before,
.section::after{
  content:"";
  display:block;
}

/* Aplicar barras a TODAS las secciones */
.section:not(.hero):not(.cotizar-section)::before,
.section:not(.hero):not(.cotizar-section)::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:24px;
  background: linear-gradient(90deg,
    #7a0c1d 0%,
    #ce2a45 50%,
    #ff6b81 100%);
  opacity:1;
  border-radius:0;
  pointer-events:none;
}

/* Posición: cerca de la orilla */
.section:not(.hero):not(.cotizar-section)::before{
  top:10px;
}
.section:not(.hero):not(.cotizar-section)::after{
  bottom:10px;
}

/* Mobile */
@media (max-width:640px){
  .section:not(.hero):not(.cotizar-section)::before{
    top:8px;
    height:20px;
  }
  .section:not(.hero):not(.cotizar-section)::after{
    bottom:8px;
    height:20px;
  }
}

/* Hero SIN barras */
.hero::before,
.hero::after{
  display:none !important;
}

/* Cotizar SIN barras */
.cotizar-section::before,
.cotizar-section::after{
  display:none !important;
}



/* ===== FIX FINAL DEFINITIVO: BARRA SUPERIOR SIEMPRE VISIBLE ===== */

/* Garantizar espacio interno para la barra superior */
.section:not(.hero):not(.cotizar-section){
  padding-top: calc(90px + 34px); /* padding original + barra */
  padding-bottom: calc(90px + 34px);
  position:relative;
}

/* Barra superior */
.section:not(.hero):not(.cotizar-section)::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:24px;
  background: linear-gradient(90deg,
    #7a0c1d 0%,
    #ce2a45 50%,
    #ff6b81 100%);
  z-index:5; /* sobre fondos */
}

/* Barra inferior */
.section:not(.hero):not(.cotizar-section)::after{
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:24px;
  background: linear-gradient(90deg,
    #7a0c1d 0%,
    #ce2a45 50%,
    #ff6b81 100%);
  z-index:5;
}

/* Logo y contenido por debajo de la barra */
.section-logo{
  z-index:10;
}
.section > .container{
  position:relative;
  z-index:10;
}

/* Hero y Cotizar sin barras */
.hero::before,
.hero::after,
.cotizar-section::before,
.cotizar-section::after{
  display:none !important;
}



/* ===== OVERRIDE: asegurar barra superior aunque existan reglas legacy ===== */
.section:not(.hero):not(.cotizar-section)::before{
  content:"" !important;
  display:block !important;
}
.section:not(.hero):not(.cotizar-section)::after{
  content:"" !important;
  display:block !important;
}


/* =========================
   Mejoras responsive: secciones con logo fijo (arriba a la izquierda)
   - Evita superposición del logo con el contenido
   - Logo más grande en desktop
   ========================= */

/* Da espacio superior adicional solo a secciones que incluyen el logo fijo */
.section.with-logo{padding-top:220px;}

/* Tamaño del logo por sección */
.section-logo img{width:200px;height:auto;}

@media(max-width:900px){
  .section.with-logo{padding-top:190px;}
  .section-logo img{width:160px;}
}

@media(max-width:600px){
  .section.with-logo{padding-top:150px;}
  .section-logo{top:12px !important;left:12px !important;}
  .section-logo img{width:110px;}
}

/* Logo del header: un poco más grande en escritorio */
@media(min-width:641px){
  .logo img{height:78px;}
}

/* Bloque Talleres propios */
.workshop-img{
  width:100%;
  height:260px;
  object-fit:cover;
  border-radius:18px;
  box-shadow: var(--shadow);
  border:1px solid rgba(15,23,42,.10);
}
@media(max-width:600px){
  .workshop-img{height:200px;}
}



.card.media{padding:0;overflow:hidden}
.card.media img{display:block;width:100%;height:240px;object-fit:cover}

/* Fallback for existing image cards */
.card-img{display:block;width:100%;height:240px;object-fit:cover;border-radius:var(--radius)}


/* Media cards (full image visible) */
.card.media{
  padding:16px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.card.media img{
  width:100%;
  height:auto;
  max-height:380px;
  object-fit:contain;
}


/* Servicios images without cards */
.image-row{
  align-items:stretch;
}
.rounded-img{
  width:100%;
  height:300px;
  object-fit:cover;
  border-radius:18px;
}


/* Ajuste tamaño imagen handshake */
.card.no-bg .card-img{
  max-width:70%;
  height:auto;
  margin:0 auto;
}


/* Handshake image without card */
.handshake-img{display:block;margin:0 auto;max-width:70%;height:auto;background:transparent;box-shadow:none;border:none;border-radius:0}


/* Handshake image inside seguros, no background */
.seguros, .seguros * {
  background: transparent !important;
}

.handshake-img {
  display: block;
  margin: 2rem auto 0;
  max-width: 70%;
  height: auto;
}

/* Ajuste tamaño imagen seguridad/seguros */
.section-img--big{max-width: 2000px;}

/* Ajuste imagen seguridad */
.seguridad-imagen img{max-width:100%;width:100%;}

.seguros-cards{margin-bottom:32px;}
.seguros-img-wrap{
  max-width:1100px;
  margin:0 auto;
}
.seguros-img{
  width:100%;
  height:360px;
  object-fit:cover;
  border-radius:16px;
}
@media(max-width:768px){
  .seguros-img{height:240px;}
}

/* HERO: ocupa pantalla sin forzar todas las secciones a 100vh */
.hero{padding:70px 0 60px;min-height:calc(100svh - var(--header-h));}

@supports (height: 100dvh){
  .hero{min-height:calc(100dvh - var(--header-h));}
}

@media(max-width:520px){
  .hero{padding:48px 0 40px;}
  .hero img{width:100%;max-height:42vh;object-fit:cover}
  .kpis{gap:10px}
  .kpi{padding:10px 12px}
}


@media (max-width:640px){
  .section{padding:72px 0;}
  :root{--header-h:68px;}
  .logo img{height:52px;}
  .header .bar{padding:10px 0;}
}
@media (max-width:520px){
  .logo strong{display:none;}
  .header .btn.strong-cta{padding:9px 10px;font-size:12px;border-radius:12px;}
  .menu-toggle{padding:9px 10px;font-size:12px;border-radius:10px;}
}


/* FIX DEFINITIVO HERO MOBILE */
@media(max-width:520px){
  .hero{
    min-height:auto !important;
    padding-top:40px;
    padding-bottom:24px;
  }
  .hero-grid{
    grid-template-columns:1fr !important;
  }
  .hero img{
    max-height:34vh;
    margin-top:12px;
  }
}


/* HERO MOBILE: que todo quepa en la primera pantalla */
@media (max-width:520px){
  .hero{padding-top:26px !important;padding-bottom:18px !important;}
  .hero h1{font-size:26px !important;line-height:1.12;margin-bottom:10px;}
  .hero p{font-size:14px !important;line-height:1.35;}
  .btns{gap:10px;flex-wrap:wrap;}
  .btn{padding:10px 14px;font-size:14px;}
  .kpis{grid-template-columns:repeat(2,1fr) !important;gap:10px;margin-top:14px;}
  .kpi{padding:10px 12px;border-radius:14px;}
  .kpi b{font-size:14px;}
  .kpi span{font-size:12px;}
  .hero img{max-height:26vh !important;object-fit:contain;}
  /* Si queda un KPI solo en la última fila, que ocupe todo el ancho */
  .kpis .kpi:nth-child(3){grid-column:1 / -1;}
}