/* ============================================================
   TEMA v3 — Grupo Comercial Macalpin · Premium editorial
   Dirección: tipografía grande, mucho aire, foto full-bleed,
   secciones oscuras de peso, animaciones sutiles.
   Referente: navieras/logísticas grandes (DHL, Maersk).
   Sobre Bootstrap 5. Tokens en :root; el resto hereda.
   ============================================================ */

:root {
  /* --- TOKENS DE MARCA --- */
  --brand:       #C8102E;
  --brand-dark:  #9E0B22;
  --ink:         #101014;       /* casi negro, cálido */
  --ink-2:       #1b1b21;       /* superficies oscuras */
  --ink-soft:    #5e5e66;
  --paper:       #ffffff;
  --paper-2:     #f4f4f5;
  --line:        #e6e6e9;
  --line-dark:   rgba(255,255,255,.14);
  --link:        var(--brand-dark);

  /* tipografías */
  --font-display: "Sora", "Inter", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;

  /* forma (premium editorial) */
  --radius: 2px;
  --speed: 300ms;
  --ease: cubic-bezier(.22,.61,.36,1);
  --section-y: 8rem;

  /* mapeo Bootstrap */
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--paper);
  --bs-primary: var(--brand);
  --bs-link-color: var(--link);
  --bs-link-hover-color: var(--brand-dark);
  --bs-border-color: var(--line);
}

/* ---------- Base ---------- */
body { font-family: var(--font-body); color: var(--ink); background: var(--paper); line-height: 1.75; -webkit-font-smoothing: antialiased; }
h1,h2,h3,h4,h5,.font-display { font-family: var(--font-display); font-weight: 700; letter-spacing: -.03em; color: var(--ink); }
.eyebrow { display:inline-flex; align-items:center; gap:.7rem; text-transform: uppercase; letter-spacing: .26em; font-size: .72rem; font-weight: 700; color: var(--brand); }
.eyebrow::before { content:""; width:34px; height:2px; background: var(--brand); }
.lead-soft { font-size: 1.2rem; color: var(--ink-soft); font-weight: 400; line-height: 1.7; }
.accent-word { color: var(--brand); }
.text-brand { color: var(--brand) !important; }
::selection { background: var(--brand); color:#fff; }

.display-xl { font-size: clamp(3rem, 7vw, 5.6rem); line-height: 1.0; font-weight: 800; letter-spacing: -.035em; }
.display-l  { font-size: clamp(2.2rem, 4.4vw, 3.4rem); line-height: 1.08; font-weight: 750; }

/* ---------- Botones ---------- */
.btn { border-radius: var(--radius); font-weight: 600; padding: .9rem 2rem; transition: all var(--speed) var(--ease); letter-spacing: .01em; }
.btn-brand { background: var(--brand); color:#fff; border:1px solid var(--brand); }
.btn-brand:hover { background: var(--brand-dark); border-color: var(--brand-dark); color:#fff; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(200,16,46,.30); }
.btn-light-line { background: transparent; color:#fff; border:1px solid rgba(255,255,255,.55); }
.btn-light-line:hover { background:#fff; color:var(--ink); border-color:#fff; }
.btn-dark-line { background: transparent; color: var(--ink); border:1px solid var(--ink); }
.btn-dark-line:hover { background: var(--ink); color:#fff; }
.btn-arrow::after { content:"→"; display:inline-block; margin-left:.65rem; transition: transform var(--speed) var(--ease); }
.btn-arrow:hover::after { transform: translateX(5px); }
.btn:active { transform: translateY(1px); }

/* ---------- Navbar (transparente sobre el hero) ---------- */
.navbar-site { background: transparent; transition: background var(--speed) ease, box-shadow var(--speed) ease; padding-top:1rem; padding-bottom:1rem; }
.navbar-site .navbar-brand img { height: 44px; }
.navbar-site .nav-link { color:#fff; font-weight: 500; font-size:.95rem; margin: 0 .5rem; opacity:.92; }
.navbar-site .nav-link:hover, .navbar-site .nav-link.active { color:#fff; opacity:1; }
.navbar-site .nav-link.active { text-decoration: underline; text-decoration-color: var(--brand); text-decoration-thickness: 2px; text-underline-offset: 8px; }
.navbar-site.scrolled { background: rgba(16,16,20,.92); backdrop-filter: blur(10px); box-shadow: 0 6px 24px rgba(0,0,0,.25); }
.navbar-toggler i { color:#fff; }

/* ---------- Hero full-bleed ---------- */
.hero { position: relative; min-height: 92vh; display:flex; align-items:center; color:#fff; overflow:hidden; background: var(--ink); /* navbar fixed-top queda encima, sin huecos */ }
.hero::before { content:""; position:absolute; inset:0; background-image:
  linear-gradient(75deg, rgba(10,10,14,.92) 0%, rgba(10,10,14,.72) 38%, rgba(10,10,14,.30) 68%, rgba(10,10,14,.15) 100%),
  url('../img/hero.jpg');
  background-size: cover; background-position: center; }
.hero > .container { position: relative; z-index: 2; padding-top: 8rem; padding-bottom: 6rem; }

/* Variante con video: el <video> queda detrás del degradado.
   La foto de .hero::before sirve de fondo si el video no carga. */
.hero-video .hero-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.hero-video::before { background-image:
  linear-gradient(75deg, rgba(10,10,14,.92) 0%, rgba(10,10,14,.72) 38%, rgba(10,10,14,.30) 68%, rgba(10,10,14,.15) 100%);
  z-index:1; }

.hero h1 { color:#fff; }
.hero .lead-soft { color: rgba(255,255,255,.82); }
.hero .eyebrow { color:#fff; }
.hero .eyebrow::before { background: var(--brand); }

/* línea de scroll */
.scroll-hint { position:absolute; bottom:2rem; left:50%; transform:translateX(-50%); z-index:2; color:rgba(255,255,255,.7); font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; text-align:center; }
.scroll-hint::after { content:""; display:block; width:1px; height:44px; background:linear-gradient(to bottom, rgba(255,255,255,.7), transparent); margin:.6rem auto 0; animation: drop 2s var(--ease) infinite; }
@keyframes drop { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------- Franja KPI que muerde el hero ---------- */
.kpi-band { position: relative; z-index: 3; margin-top: -4.5rem; }
.kpi-card { background: var(--paper); border-radius: var(--radius); box-shadow: 0 30px 80px rgba(10,10,14,.18); padding: 2.6rem 1rem; }
.kpi { text-align:center; padding: .5rem 1.5rem; border-left:1px solid var(--line); }
.kpi:first-child { border-left:0; }
.kpi .n { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.4rem, 4vw, 3.4rem); letter-spacing: -.03em; line-height:1; color: var(--ink); }
.kpi .n .u { color: var(--brand); }
.kpi .l { color: var(--ink-soft); font-size:.9rem; margin-top:.5rem; }
@media (max-width:767px){ .kpi { border-left:0; border-top:1px solid var(--line); padding:1.2rem .5rem; } .kpi:first-child { border-top:0; } }

/* ---------- Secciones ---------- */
.section { padding: var(--section-y) 0; }
.section-dark { background: var(--ink); color:#fff; }
.section-dark h2,.section-dark h3,.section-dark h4 { color:#fff; }
.section-dark .lead-soft { color: rgba(255,255,255,.72); }
.section-dark .eyebrow { color:#fff; }
.section-alt { background: var(--paper-2); }
@media (max-width:991px){ :root { --section-y: 4.5rem; } }

/* ---------- Servicios (cards editoriales con número gigante) ---------- */
.svc-card { position: relative; background: var(--paper); border:1px solid var(--line); border-radius: var(--radius); padding: 2.6rem 2.2rem 2.2rem; height:100%; overflow:hidden; transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease), border-color var(--speed) var(--ease); }
.svc-card:hover { transform: translateY(-8px); box-shadow: 0 30px 60px rgba(10,10,14,.12); border-color: transparent; }
.svc-card .ghost-num { position:absolute; top:-1.4rem; right:.6rem; font-family:var(--font-display); font-weight:800; font-size:7rem; line-height:1; color:var(--paper-2); z-index:0; transition: color var(--speed) var(--ease); }
.svc-card:hover .ghost-num { color: rgba(200,16,46,.10); }
.svc-card > * { position: relative; z-index:1; }
.svc-card i.s-icon { font-size:1.7rem; color:var(--brand); }
.svc-card h3 { font-size:1.3rem; margin:1.1rem 0 .6rem; }
.svc-card p { color: var(--ink-soft); margin:0; font-size:.97rem; }
.svc-card .bar { width:38px; height:3px; background:var(--brand); margin-bottom:1.2rem; transition: width var(--speed) var(--ease); }
.svc-card:hover .bar { width:70px; }

/* ---------- Cita editorial gigante ---------- */
.quote-hero { font-family: var(--font-display); font-weight: 750; font-size: clamp(1.9rem, 4.2vw, 3.2rem); letter-spacing:-.03em; line-height:1.18; color:#fff; }
.quote-hero .accent-word { color: var(--brand); }
.quote-mark { font-family: Georgia, serif; font-size: 5rem; line-height:.6; color: var(--brand); display:block; margin-bottom:1.2rem; }

/* ---------- Valores en línea editorial ---------- */
.value-row { display:flex; gap:1.4rem; align-items:baseline; padding:1.3rem 0; border-top:1px solid var(--line-dark); }
.value-row:last-child { border-bottom:1px solid var(--line-dark); }
.value-row .v-num { font-family:var(--font-display); font-weight:800; color:var(--brand); font-size:.9rem; letter-spacing:.1em; }
.value-row strong { font-family:var(--font-display); min-width:150px; color:#fff; }
.value-row span { color:rgba(255,255,255,.65); font-size:.95rem; }

/* ---------- Cobertura ---------- */
.region-block { border-top: 2px solid var(--ink); padding: 1.5rem 0 0; height:100%; }
.region-block.core { border-top-color: var(--brand); }
.region-block h3 { font-size: 1.05rem; }
.region-block.core h3 { color: var(--brand); }
.region-block p { color: var(--ink-soft); font-size: .93rem; margin:0; }

/* ---------- Respaldo / certificaciones ---------- */
.cert-line { display:flex; align-items:center; gap:.8rem; color:#fff; font-size:.92rem; font-weight:600; }
.cert-line i { color:var(--brand); font-size:1.2rem; width:24px; text-align:center; }
.cert-line span small { display:block; color:rgba(255,255,255,.55); font-weight:400; }

/* ---------- CTA full-bleed con foto ---------- */
.cta-photo { position:relative; color:#fff; padding: 7rem 0; overflow:hidden; }
.cta-photo::before { content:""; position:absolute; inset:0; background-image:
  linear-gradient(rgba(10,10,14,.82), rgba(10,10,14,.82)), url('../img/hero.jpg');
  background-size:cover; background-position:center 30%; background-attachment: fixed; }
@supports (-webkit-touch-callout: none) { .cta-photo::before { background-attachment: scroll; } }
.cta-photo > .container { position:relative; z-index:2; }
.cta-photo h2 { color:#fff; }
.cta-photo p { color: rgba(255,255,255,.75); }

/* ---------- Formulario ---------- */
.form-control, .form-select { border-radius: var(--radius); border:1px solid #d4d4d8; padding:.8rem .95rem; }
.form-control:focus, .form-select:focus { border-color: var(--ink); box-shadow: none; }
.form-label { font-size:.85rem; font-weight:600; }
.form-panel { background:var(--paper); border-radius:var(--radius); box-shadow: 0 30px 70px rgba(10,10,14,.10); padding: 2.6rem; }

.contact-item { display:flex; gap:1rem; padding:1.05rem 0; border-top:1px solid var(--line); align-items:baseline; }
.contact-item:last-child { border-bottom:1px solid var(--line); }
.contact-item i { color:var(--brand); width:20px; text-align:center; }
.contact-item a { color:var(--ink); text-decoration:none; font-weight:600; }
.contact-item a:hover { color:var(--brand-dark); }

/* ---------- Footer oscuro ---------- */
.footer { background: var(--ink); color:#fff; padding: 4rem 0 1.5rem; }
.footer a { color: rgba(255,255,255,.75); text-decoration:none; transition: color var(--speed) ease; }
.footer a:hover { color: var(--brand); }
.footer .brand-name { font-family:var(--font-display); font-weight:800; font-size:1.4rem; letter-spacing:-.01em; }
.footer .brand-name .accent { color: var(--brand); }
.footer h6 { color:#fff; text-transform:uppercase; letter-spacing:.16em; font-size:.78rem; margin-bottom:1rem; }
.footer-bottom { border-top:1px solid var(--line-dark); margin-top:2.6rem; padding-top:1.3rem; font-size:.83rem; color:rgba(255,255,255,.55); display:flex; flex-wrap:wrap; gap:.5rem; justify-content:space-between; }

/* ---------- Placeholder visible ---------- */
.placeholder-flag { display:inline-block; background:repeating-linear-gradient(45deg,#fff6cc,#fff6cc 6px,#ffe9a8 6px,#ffe9a8 12px); border:1px dashed #c79a12; color:#8a6d0b; font-size:.68rem; font-weight:700; padding:1px 6px; }

/* ---------- Accesibilidad ---------- */
.skip-link { position:absolute; left:-999px; top:0; z-index:2000; background:var(--brand); color:#fff; padding:.6rem 1rem; font-weight:700; }
.skip-link:focus { left:0; }
a:focus-visible, button:focus-visible, .btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible, .nav-link:focus-visible { outline:3px solid var(--brand); outline-offset:2px; }
.footer .social a, .navbar-toggler { min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; }

/* ---------- Scroll reveal (más amplio, premium) ---------- */
.reveal { opacity:0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible { opacity:1; transform:none; }

/* WhatsApp flotante */
.wa-float { position:fixed; right:20px; bottom:20px; z-index:1030; width:56px; height:56px; border-radius:50%; background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.7rem; box-shadow:0 12px 30px rgba(0,0,0,.3); text-decoration:none; transition:transform var(--speed) var(--ease); }
.wa-float:hover { transform: scale(1.08); color:#fff; }

/* menú móvil sobre hero: fondo oscuro al desplegar */
@media (max-width: 991px) {
  .navbar-site .navbar-collapse { background: rgba(16,16,20,.97); margin: .8rem -12px 0; padding: 1rem 1.2rem 1.4rem; border-radius: var(--radius); }
}

/* ---------- prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal { opacity:1 !important; transform:none !important; }
  .scroll-hint::after { display:none; }
  .cta-photo::before { background-attachment: scroll; }
}