/* ══════════════════════════════════════════════════════
   REDMACH Import & Logistics — styles.css v2
   Sitio web corporativo multi-página
   Fuente: Montserrat | Estilo: Industrial Premium
   ══════════════════════════════════════════════════════ */

/* ─── Reset & Base ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* REDMACH Brand */
  --black:      #0A0A0A;
  --black-2:    #111111;
  --black-3:    #1A1A1A;
  --black-4:    #252525;
  --red:        #ED1C24;
  --red-dark:   #B81820;
  --red-glow:   rgba(237,28,36,0.12);
  --red-light:  #FF4A50;   /* rojo para TEXTO sobre fondo oscuro */
  --white:      #FFFFFF;
  --gray-50:    #FAFAFA;
  --gray-100:   #F4F4F4;
  --gray-200:   #E8E8E8;
  --gray-400:   #9E9E9E;
  --gray-600:   #666666;
  --gray-800:   #2D2D2D;
  --line:       rgba(255,255,255,0.08);
  --line-light: rgba(0,0,0,0.09);

  /* KALIA FOODS Brand */
  --kalia-green:       #0D2B1E;
  --kalia-green-dark:  #081510;
  --kalia-green-light: #1a4a30;
  --kalia-gold:        #E08A1A;
  --kalia-gold-light:  #f0a83a;
  --kalia-beige:       #FBF6EE;
  --kalia-cream:       #FEFCF8;

  /* Typography */
  --font: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;

  /* Layout */
  --nav-h:    80px;
  --max-w:    1280px;
  --pad:      2rem;
  --sec-pad:  6rem;
  --radius:   4px;
  --radius-m: 8px;
  --radius-l: 16px;

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:  cubic-bezier(0.7, 0, 0.84, 0);

  /* ── Roles, no colores ─────────────────────────────────────
     Las fichas de arriba son literales (--white, --gray-600) y
     varias son de doble uso: --white es fondo de página en unos
     sitios y texto sobre bloque oscuro en otros. Estas de abajo
     dicen QUÉ ES cada color, y son las únicas que cambian con el
     tema. Las literales se quedan quietas: sostienen los bloques
     que ya eran oscuros —hero, pie, botones rojos— y esos se ven
     igual en los dos temas.
     -------------------------------------------------------- */
  --pagina:       #FFFFFF;   /* el cuerpo */
  --sup:          #FFFFFF;   /* tarjetas y secciones */
  --sup-2:        #FAFAFA;
  --sup-3:        #F4F4F4;
  --linea:        #E8E8E8;
  --linea-suave:  rgba(0,0,0,0.09);
  --tx:           #1A1A1A;   /* titulares y texto principal */
  --tx-2:         #666666;   /* texto secundario */
  --tx-3:         #2D2D2D;   /* cuerpo del documento */

  /* KALIA tiene su propia identidad, y también sus dos caras */
  --k-sup:        #FEFCF8;
  --k-sup-2:      #FBF6EE;
  --k-tx:         #0D2B1E;
  --k-tx-2:       #081510;
  --rojo-tx:      #B81820;   /* rojo para TEXTO; el relleno usa --red-dark */
}

/* ── Tema oscuro ─────────────────────────────────────────────
   El sitio nace claro. Si el equipo del visitante pide oscuro se
   le da, y el botón manda sobre las dos cosas.

   El rojo de marca sobre negro da 3.6:1: suficiente para titular,
   corto para texto corrido. Por eso en oscuro el texto rojo usa
   --red-light, que ya existía para eso mismo.
   ---------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --pagina:      #0A0A0A;
    --sup:         #151515;
    --sup-2:       #101010;
    --sup-3:       #1B1B1B;
    --linea:       rgba(255,255,255,0.10);
    --linea-suave: rgba(255,255,255,0.06);
    --tx:          #F2F2F2;
    --tx-2:        #A9A9A9;
    --tx-3:        #E8E8E8;
    --rojo-tx:     #FF4A50;   /* sobre negro, el rojo oscuro no se lee */
    --k-sup:       #0C130F;
    --k-sup-2:     #111A15;
    --k-tx:        #8FD9B4;
    --k-tx-2:      #B7E8CE;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --pagina:      #0A0A0A;
  --sup:         #151515;
  --sup-2:       #101010;
  --sup-3:       #1B1B1B;
  --linea:       rgba(255,255,255,0.10);
  --linea-suave: rgba(255,255,255,0.06);
  --tx:          #F2F2F2;
  --tx-2:        #A9A9A9;
  --tx-3:        #E8E8E8;
  --rojo-tx:     #FF4A50;
  --k-sup:       #0C130F;
  --k-sup-2:     #111A15;
  --k-tx:        #8FD9B4;
  --k-tx-2:      #B7E8CE;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  overflow-x: clip;
}
body {
  font-family: var(--font);
  font-weight: 400;
  line-height: 1.65;
  color: var(--tx-3);
  background: var(--pagina);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img  { display: block; max-width: 100%; height: auto; }
a    { color: inherit; text-decoration: none; }
ul   { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }

/* ─── Saltar al contenido ───
   Primer elemento enfocable: quien navega con teclado no tiene que pasar
   por los siete enlaces del menu en cada pagina. */
.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  padding: 0.75rem 1.25rem;
  background: var(--red-dark); color: var(--white);
  font-weight: 700; font-size: 0.875rem;
  border-radius: 0 0 var(--radius) 0;
}
.saltar:focus { left: 0; }

/* ─── Container ─── */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* ─── Reveal ─── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal[data-split] { opacity: 1; transform: none; }

/* ═══════════════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.85rem 1.8rem;
  border-radius: var(--radius);
  transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.2s, box-shadow 0.25s;
  white-space: nowrap;
  cursor: pointer;
}
.btn:hover { transform: translateY(-2px); }

.btn-red {
  background: var(--red-dark);
  color: var(--white);
  border: 2px solid var(--red-dark);
}
.btn-red:hover { box-shadow: 0 8px 24px rgba(237,28,36,0.35); }

.btn-outline {
  background: transparent;
  color: var(--white);
  border: 2px solid rgba(255,255,255,0.4);
}
.btn-outline:hover { border-color: var(--white); background: rgba(255,255,255,0.08); }

.btn-outline-dark {
  background: transparent;
  color: var(--tx);
  border: 2px solid var(--linea);
}
.btn-outline-dark:hover { border-color: var(--red); color: var(--rojo-tx); }

.btn-green {
  background: var(--kalia-green);
  color: var(--white);
  border: 2px solid var(--kalia-green);
}
.btn-green:hover { background: var(--kalia-green-dark); border-color: var(--kalia-green-dark); box-shadow: 0 8px 24px rgba(13,43,30,0.3); }

.btn-lg { padding: 1rem 2.2rem; font-size: 0.85rem; }
.btn-sm { padding: 0.65rem 1.3rem; font-size: 0.78rem; }

/* ═══════════════════════════════════════════════════════
   SECTION UTILITIES
═══════════════════════════════════════════════════════ */
.section { padding: var(--sec-pad) 0; }
.section-dark { background: var(--black-3); }
.section-black { background: var(--black-2); }
.section-gray { background: var(--sup-3); }
.section-red { background: var(--red); }

.section-kicker {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rojo-tx);
  margin-bottom: 0.75rem;
}
.section-kicker--white { color: rgba(255,255,255,0.7); }
.section-kicker--green { color: var(--k-tx); }

.section-title {
  font-size: clamp(1.9rem, 3.5vw, 2.8rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--tx);
  text-wrap: balance;
}
.section-title--white { color: var(--white); }
.section-title--green { color: var(--k-tx); }
.section-title em { color: var(--rojo-tx); font-style: italic; }
.section-title em.green { color: var(--k-tx); }

.section-sub {
  margin-top: 1rem;
  font-size: 1rem;
  color: var(--tx-2);
  max-width: 52ch;
  line-height: 1.75;
}
.section-sub--white { color: rgba(255,255,255,0.65); }

.section-header { margin-bottom: 3.5rem; }
.section-header--center { text-align: center; }
.section-header--center .section-sub { margin-left: auto; margin-right: auto; }

.section-actions { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 1rem; }
.section-actions--center { justify-content: center; }

/* ═══════════════════════════════════════════════════════
   NAVIGATION
═══════════════════════════════════════════════════════ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--nav-h);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.4s, border-color 0.4s, backdrop-filter 0.4s;
}
.nav.is-scrolled {
  background: rgba(10,10,10,0.95);
  border-bottom-color: var(--line);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.nav.nav-light { background: var(--sup); border-bottom: 1px solid var(--linea); }
.nav.nav-light .nav-link { color: var(--tx-3); }
.nav.nav-light .nav-link:hover { color: var(--rojo-tx); }
.nav.nav-light.is-scrolled { background: rgba(255,255,255,0.97); }
.nav.nav-light .nav-burger span { background: var(--black-3); }

.nav-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad);
  height: 100%;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.nav-logo { flex-shrink: 0; display: flex; align-items: center; gap: 0.6rem; }
.nav-logo-mark {
  width: 36px; height: 36px;
  background: var(--red);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 1.1rem;
  color: white;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.nav-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.nav-logo-name {
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--white);
}
.nav-logo-tag {
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
.nav-light .nav-logo-name { color: var(--tx); }
.nav-light .nav-logo-tag  { color: var(--gray-400); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  margin-left: auto;
}
.nav-link {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  padding: 0.4rem 0.7rem;
  border-radius: var(--radius);
  transition: color 0.2s, background 0.2s;
  white-space: nowrap;
}
.nav-link:hover, .nav-link.is-active { color: var(--white); }
.nav-link.is-active { color: var(--rojo-tx); }

.nav-cta {
  margin-left: 0.5rem;
  background: var(--red-dark);
  color: var(--white);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.55rem 1.2rem;
  border-radius: var(--radius);
  transition: background 0.2s, transform 0.2s;
  white-space: nowrap;
}
.nav-cta:hover { background: var(--red-dark); transform: translateY(-1px); }

.nav-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  margin-left: auto;
}
.nav-burger span {
  display: block;
  width: 22px; height: 2px;
  background: var(--sup);
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile {
  display: none;
  position: absolute;
  top: var(--nav-h);
  left: 0; right: 0;
  background: rgba(10,10,10,0.98);
  border-bottom: 1px solid var(--line);
  padding: 1.5rem 2rem 2rem;
  flex-direction: column;
  gap: 0.25rem;
  backdrop-filter: blur(16px);
}
.nav-mobile.is-open { display: flex; }
.nav-mobile-link {
  display: block;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.03em;
  color: rgba(255,255,255,0.8);
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
  transition: color 0.2s;
}
.nav-mobile-link:hover { color: var(--rojo-tx); }
.nav-mobile .nav-cta { margin-top: 1rem; display: block; text-align: center; }

@media (max-width: 1080px) {
  .nav-link { padding: 0.4rem 0.5rem; font-size: 0.73rem; }
}
@media (max-width: 900px) {
  .nav-links, .nav-cta { display: none; }
  .nav-burger { display: flex; }
}

/* ═══════════════════════════════════════════════════════
   SPLASH
═══════════════════════════════════════════════════════ */
.splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2rem;
  transition: opacity 0.5s var(--ease-in), transform 0.5s var(--ease-in);
  animation: splashExit 0.01s 1.8s forwards;
}
@keyframes splashExit { to { opacity: 0; pointer-events: none; transform: translateY(-8px); } }
.splash.is-out { opacity: 0; pointer-events: none; transform: translateY(-8px); }

.splash-logo {
  font-size: 2.5rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: white;
}
.splash-logo span { color: var(--rojo-tx); }
.splash-bar { width: 100px; height: 2px; background: var(--black-4); border-radius: 2px; overflow: hidden; }
.splash-bar::after {
  content: "";
  display: block;
  width: 100%; height: 100%;
  background: var(--red);
  transform: translateX(-100%);
  animation: barFill 1s var(--ease-out) 0.2s forwards;
}
@keyframes barFill { to { transform: translateX(0); } }

/* ═══════════════════════════════════════════════════════
   HERO — DARK
═══════════════════════════════════════════════════════ */
.hero {
  min-height: 100vh;
  min-height: 100svh;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: calc(var(--nav-h) + 5rem) var(--pad) 5rem;
  background: var(--black);
}

/* Grid background */
.hero-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(237,28,36,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(237,28,36,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  transform: skewY(-3deg) scale(1.15);
  transform-origin: top left;
}

/* Red glow */
.hero-glow {
  position: absolute;
  top: 10%; right: -5%;
  width: 65vw; height: 80vh;
  background: radial-gradient(ellipse at center, rgba(237,28,36,0.14) 0%, transparent 65%);
  z-index: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-glow { animation: glowPulse 6s ease-in-out infinite alternate; }
}
@keyframes glowPulse {
  0%   { opacity: 0.8; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.08); }
}

/* Red diagonal stripe */
.hero-stripe {
  position: absolute;
  top: 0; right: 0;
  width: 4px; height: 100%;
  background: var(--red);
  z-index: 1;
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: var(--max-w);
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.hero-content {}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rojo-tx);
  margin-bottom: 1.5rem;
}
.hero-eyebrow::before {
  content: "";
  display: block;
  width: 24px; height: 2px;
  background: var(--red);
}

.hero-title {
  font-size: clamp(2.6rem, 5.5vw, 5rem);
  font-weight: 900;
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--white);
  margin-bottom: 1.5rem;
  text-wrap: balance;
}
.hero-title em { color: var(--rojo-tx); font-style: normal; display: block; }

.hero-sub {
  font-size: 1rem;
  color: rgba(255,255,255,0.62);
  max-width: 46ch;
  line-height: 1.75;
  margin-bottom: 2.5rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Hero visual — ship illustration */
.hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-ship {
  width: 100%;
  max-width: 540px;
  opacity: 0.9;
}

/* Stats strip */
.hero-stats {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 3;
  background: rgba(10,10,10,0.85);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(8px);
  padding: 1.5rem 2rem;
}
.hero-stats-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-stat-num {
  font-size: 2rem;
  font-weight: 800;
  color: var(--white);
  line-height: 1;
  min-width: 3ch;
  text-align: center;
}
.hero-stat-num .unit { font-size: 1.2rem; color: var(--rojo-tx); }
.hero-stat-label {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  text-align: center;
}
.hero-stat-div { width: 1px; height: 36px; background: var(--line); }

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-visual { display: none; }
  .hero-stats-inner { gap: 0.5rem; justify-content: space-around; }
  .hero-stat-num { font-size: 1.5rem; }
}

/* ═══════════════════════════════════════════════════════
   PAGE HERO (subpáginas)
═══════════════════════════════════════════════════════ */
.page-hero {
  padding: calc(var(--nav-h) + 4rem) var(--pad) 4rem;
  background: var(--black-3);
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(135deg, transparent 60%, rgba(237,28,36,0.08) 100%);
}
.page-hero-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.page-hero-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.45);
  margin-bottom: 1.5rem;
}
.page-hero-breadcrumb a { transition: color 0.2s; }
.page-hero-breadcrumb a:hover { color: var(--rojo-tx); }
.page-hero-breadcrumb span { color: rgba(255,255,255,0.5); }
.page-hero h1 {
  font-size: clamp(2rem, 4.5vw, 3.8rem);
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--white);
  margin-bottom: 1rem;
  text-wrap: balance;
}
.page-hero h1 em { color: var(--rojo-tx); font-style: normal; }
.page-hero p {
  font-size: 1rem;
  color: rgba(255,255,255,0.6);
  max-width: 50ch;
  line-height: 1.75;
}

/* ═══════════════════════════════════════════════════════
   MARQUEE
═══════════════════════════════════════════════════════ */
.marquee {
  overflow: hidden;
  background: var(--red-dark);
  padding: 0.75rem 0;
}
.marquee-track {
  display: flex;
  gap: 2rem;
  white-space: nowrap;
}
@media (prefers-reduced-motion: no-preference) {
  .marquee-track { animation: marquee 30s linear infinite; }
}
.marquee-track span {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--white);
  flex-shrink: 0;
}
.marquee-dot { font-size: 0.4rem !important; color: rgba(255,255,255,0.5) !important; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ═══════════════════════════════════════════════════════
   SERVICES GRID
═══════════════════════════════════════════════════════ */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
  border-radius: var(--radius-m);
  overflow: hidden;
}
.service-card {
  background: var(--sup);
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
  overflow: hidden;
  transition: background 0.3s, box-shadow 0.3s;
}
.service-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 100%;
  height: 3px;
  background: var(--red);
  transition: right 0.4s var(--ease-out);
}
.service-card:hover { background: var(--sup-2); }
.service-card:hover::before { right: 0; }

.service-card.dark {
  background: var(--black-3);
  color: var(--white);
}
.service-card.dark:hover { background: var(--black-4); }

.service-icon {
  width: 48px; height: 48px;
  transition: transform 0.3s;
}
.service-card:hover .service-icon { transform: scale(1.1); }

.service-num {
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--gray-200);
  line-height: 1;
  transition: color 0.3s;
}
.service-card:hover .service-num { color: rgba(237,28,36,0.15); }
.service-card.dark .service-num { color: rgba(255,255,255,0.06); }

.service-card h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--tx);
  letter-spacing: -0.01em;
}
.service-card.dark h3 { color: var(--white); }
.service-card p {
  font-size: 0.88rem;
  color: var(--tx-2);
  line-height: 1.7;
  flex: 1;
}
.service-card.dark p { color: rgba(255,255,255,0.55); }
.service-link {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rojo-tx);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: gap 0.2s;
}
.service-card:hover .service-link { gap: 0.7rem; }

@media (max-width: 900px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .services-grid { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════
   STATS BAR (section)
═══════════════════════════════════════════════════════ */
.stats-section {
  background: var(--black-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 4rem var(--pad);
}
.stats-grid {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
  gap: 2.5rem;
}
.stat-item { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }
.stat-num {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 900;
  color: var(--white);
  line-height: 1;
}
.stat-num .stat-accent { color: var(--rojo-tx); }
.stat-label {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.66);
  text-align: center;
}
.stat-div { width: 1px; height: 64px; background: var(--line); }

@media (max-width: 700px) { .stat-div { display: none; } }

/* ═══════════════════════════════════════════════════════
   ABOUT / NOSOTROS
═══════════════════════════════════════════════════════ */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}
.about-visual {
  position: relative;
  min-height: 400px;
}
.about-card {
  background: var(--black-3);
  border-radius: var(--radius-m);
  padding: 3rem;
  color: var(--white);
  position: relative;
  overflow: hidden;
  height: 100%;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1rem;
}
.about-card::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 60%; height: 100%;
  background: linear-gradient(135deg, transparent 40%, rgba(237,28,36,0.08) 100%);
}
.about-card-badge {
  background: var(--red-dark);
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: 2px;
  width: fit-content;
}
.about-card h3 {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.2;
  position: relative;
}
.about-card p {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.7;
  position: relative;
  max-width: 38ch;
}
.about-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  position: relative;
}
.about-tag {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 0.3rem 0.7rem;
  border-radius: 2px;
}

.pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.5rem; }
.pillar {
  padding: 1.2rem;
  background: var(--sup-2);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--red);
  border-radius: var(--radius);
}
.pillar h4 {
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tx);
  margin-bottom: 0.4rem;
}
.pillar p { font-size: 0.85rem; color: var(--tx-2); line-height: 1.6; }

@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .pillars { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════
   VALORES
═══════════════════════════════════════════════════════ */
.valores-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.valor-card {
  padding: 2rem 1.5rem;
  background: var(--sup-2);
  border: 1px solid var(--linea);
  border-radius: var(--radius-m);
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.valor-card:hover {
  border-color: var(--red);
  box-shadow: 0 8px 24px rgba(237,28,36,0.1);
  transform: translateY(-4px);
}
.valor-icon { font-size: 2rem; margin-bottom: 1rem; }
.valor-card h4 {
  font-size: 0.9rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tx);
  margin-bottom: 0.5rem;
}
.valor-card p { font-size: 0.85rem; color: var(--tx-2); line-height: 1.65; }

@media (max-width: 900px) { .valores-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .valores-grid { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════
   PROCESO DE IMPORTACIÓN
═══════════════════════════════════════════════════════ */
.process-list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.process-list::before {
  content: "";
  position: absolute;
  left: 28px; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--red), rgba(237,28,36,0.1));
}
.process-item {
  display: flex;
  gap: 2rem;
  padding: 2rem 0;
  position: relative;
  transition: padding-left 0.3s;
}
.process-item:hover { padding-left: 0.5rem; }
.process-num {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--sup);
  border: 2px solid var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 0.95rem;
  color: var(--rojo-tx);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  transition: background 0.3s, color 0.3s;
}
.process-item:hover .process-num { background: var(--red); color: white; }
.process-content { padding-top: 0.5rem; flex: 1; }
.process-content h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--tx);
  margin-bottom: 0.4rem;
}
.process-content p {
  font-size: 0.9rem;
  color: var(--tx-2);
  line-height: 1.65;
  max-width: 55ch;
}

/* ═══════════════════════════════════════════════════════
   BLOG
═══════════════════════════════════════════════════════ */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.blog-card {
  background: var(--sup);
  border: 1px solid var(--linea);
  border-radius: var(--radius-m);
  overflow: hidden;
  transition: box-shadow 0.3s, transform 0.3s;
  display: flex;
  flex-direction: column;
}
.blog-card:hover {
  box-shadow: 0 16px 40px rgba(0,0,0,0.08);
  transform: translateY(-4px);
}
.blog-card-img {
  height: 180px;
  background: var(--black-3);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.blog-card-img-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--black-4) 0%, #1a0a0a 100%);
}
.blog-card-img-icon {
  position: relative;
  z-index: 1;
  font-size: 3rem;
  opacity: 0.35;
}
.blog-cat {
  position: absolute;
  top: 1rem; left: 1rem;
  z-index: 2;
  background: var(--red-dark);
  color: white;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 2px;
}
.blog-card-body {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.blog-card-meta {
  font-size: 0.72rem;
  color: var(--tx-2);
  letter-spacing: 0.05em;
}
.blog-card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--tx);
  line-height: 1.4;
  flex: 1;
}
.blog-card p {
  font-size: 0.85rem;
  color: var(--tx-2);
  line-height: 1.65;
}
.blog-read {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rojo-tx);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: gap 0.2s;
}
.blog-card:hover .blog-read { gap: 0.7rem; }

@media (max-width: 900px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .blog-grid { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════
   CONTACT FORM
═══════════════════════════════════════════════════════ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 5rem;
  align-items: start;
}
.contact-info h2 { margin-bottom: 1rem; }
.contact-dato {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.2rem;
  border: 1px solid var(--linea);
  border-radius: var(--radius-m);
  transition: border-color 0.2s, background 0.2s;
  margin-bottom: 1rem;
}
a.contact-dato:hover { border-color: var(--red); background: rgba(237,28,36,0.02); }
.dato-icon { font-size: 1.2rem; flex-shrink: 0; }
.dato-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-400); margin-bottom: 0.15rem; }
.dato-val { font-size: 0.9rem; color: var(--tx); font-weight: 500; }

.form-wrap {
  background: var(--sup-2);
  border: 1px solid var(--linea);
  border-radius: var(--radius-l);
  padding: 2.5rem;
}
.form-wrap h3 {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--tx);
  margin-bottom: 1.5rem;
  letter-spacing: -0.01em;
}
.form { display: flex; flex-direction: column; gap: 1rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-field { display: flex; flex-direction: column; gap: 0.35rem; }
.form-field label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tx-2);
}
.form-field input,
.form-field select,
.form-field textarea {
  background: var(--sup);
  border: 1px solid var(--linea);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  font-family: var(--font);
  font-size: 0.9rem;
  color: var(--tx);
  width: 100%;
  outline: none;
  transition: border-color 0.2s;
  -webkit-appearance: none;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { border-color: var(--red); }
.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--gray-400); }
.form-field textarea { resize: vertical; min-height: 110px; }
.form-field select { cursor: pointer; }

.form-submit { margin-top: 0.5rem; }
.form-success {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(34,197,94,0.08);
  border: 1px solid rgba(34,197,94,0.25);
  border-radius: var(--radius);
  padding: 0.9rem 1.2rem;
  color: #15803d;
  font-size: 0.9rem;
  font-weight: 500;
  margin-top: 0.75rem;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s, transform 0.4s;
  pointer-events: none;
}
.form-success.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .form-row { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .form-wrap { padding: 1.5rem; }
}

/* ═══════════════════════════════════════════════════════
   MAP
═══════════════════════════════════════════════════════ */
.map-wrap {
  border-radius: var(--radius-m);
  overflow: hidden;
  border: 1px solid var(--linea);
}
.map-wrap iframe { display: block; width: 100%; height: 380px; border: none; }

/* ═══════════════════════════════════════════════════════
   KALIA FOODS — BRAND SECTION
═══════════════════════════════════════════════════════ */
.kalia-section {
  background: var(--k-sup);
  padding: var(--sec-pad) 0;
}
.kalia-hero {
  min-height: 100vh;
  min-height: 100svh;
  background: var(--k-sup);
  padding: calc(var(--nav-h) + 4rem) var(--pad) 5rem;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.kalia-hero::before {
  content: "";
  position: absolute;
  top: -30%; right: -20%;
  width: 80vw; height: 100vh;
  background: radial-gradient(ellipse, rgba(13,43,30,0.06) 0%, transparent 60%);
  pointer-events: none;
}
.kalia-hero-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  position: relative;
  z-index: 1;
}
.kalia-hero-text {
  font-size: 1rem;
  color: var(--tx-2);
  line-height: 1.75;
  max-width: 46ch;
  margin-bottom: 2rem;
}
.kalia-visual-card {
  background: var(--kalia-green);
  border-radius: var(--radius-l);
  padding: 3rem;
  color: white;
  position: relative;
  overflow: hidden;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1.5rem;
}
.kalia-visual-card::before {
  content: "";
  position: absolute;
  top: -20%; right: -20%;
  width: 70%; height: 80%;
  background: radial-gradient(ellipse, rgba(224,138,26,0.2) 0%, transparent 60%);
}
.kalia-card-badge {
  background: var(--kalia-gold);
  color: var(--k-tx-2);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.35rem 0.8rem;
  border-radius: 2px;
  width: fit-content;
  position: relative;
  z-index: 1;
}
.kalia-card-title {
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1.2;
  position: relative;
  z-index: 1;
}
.kalia-card-desc {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.7;
  position: relative;
  z-index: 1;
}

@media (max-width: 900px) {
  .kalia-hero-inner { grid-template-columns: 1fr; }
}

.kalia-products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.kalia-product {
  background: var(--sup);
  border: 1px solid var(--linea);
  border-radius: var(--radius-m);
  overflow: hidden;
  transition: box-shadow 0.3s, transform 0.3s;
}
.kalia-product:hover {
  box-shadow: 0 12px 32px rgba(13,43,30,0.12);
  transform: translateY(-4px);
}
.kalia-product-img {
  height: 160px;
  background: var(--k-sup-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.5rem;
  border-bottom: 1px solid var(--linea);
}
.kalia-product-body { padding: 1.2rem; }
.kalia-product-body h4 {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--k-tx);
  margin-bottom: 0.3rem;
  letter-spacing: -0.01em;
}
.kalia-product-body p { font-size: 0.8rem; color: var(--tx-2); line-height: 1.5; }
.kalia-product-tag {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kalia-gold);
  background: rgba(224,138,26,0.1);
  border: 1px solid rgba(224,138,26,0.3);
  padding: 0.2rem 0.5rem;
  border-radius: 2px;
  margin-top: 0.5rem;
}

@media (max-width: 900px) { .kalia-products-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .kalia-products-grid { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════
   CTA SECTION
═══════════════════════════════════════════════════════ */
.cta-section {
  background: var(--red-dark);
  padding: 5rem var(--pad);
  text-align: center;
}
.cta-section h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 900;
  color: var(--white);
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}
.cta-section p {
  font-size: 1rem;
  color: rgba(255,255,255,0.92);
  margin-bottom: 2rem;
  max-width: 48ch;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
}
.cta-btn-white {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--sup);
  color: var(--rojo-tx);
  font-family: var(--font);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.9rem 2rem;
  border-radius: var(--radius);
  transition: transform 0.2s, box-shadow 0.25s;
  margin: 0 0.4rem;
}
.cta-btn-white:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.2); }
.cta-btn-ghost-w {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  color: var(--white);
  font-family: var(--font);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.9rem 2rem;
  border-radius: var(--radius);
  border: 2px solid rgba(255,255,255,0.5);
  transition: transform 0.2s, border-color 0.2s, background 0.2s;
  margin: 0 0.4rem;
}
.cta-btn-ghost-w:hover { border-color: white; background: rgba(255,255,255,0.1); transform: translateY(-2px); }

/* ═══════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════ */
/* El pie es negro en los dos temas, así que su tinta no puede salir
   de las fichas del tema: lo que no traiga color propio heredaba
   texto oscuro sobre negro. */
.footer { color: rgba(255,255,255,0.78); }

.footer {
  background: var(--black);
  padding: 5rem var(--pad) 2rem;
  border-top: 1px solid var(--line);
}
.footer-top {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 3.5rem;
  border-bottom: 1px solid var(--line);
}
.footer-brand {}
.footer-logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.footer-logo-mark {
  width: 34px; height: 34px;
  background: var(--red);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 1rem;
  color: white;
}
.footer-logo-name {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--white);
  letter-spacing: 0.03em;
}
.footer-tagline {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.62);
  font-style: italic;
  margin-bottom: 1.2rem;
  line-height: 1.5;
}
.footer-ruc {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.62);
  letter-spacing: 0.06em;
}
.footer-col h5 {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 1.2rem;
}
.footer-col ul { display: flex; flex-direction: column; gap: 0.6rem; }
.footer-col a {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.55);
  transition: color 0.2s;
}
.footer-col a:hover { color: var(--white); }
.footer-bottom {
  max-width: var(--max-w);
  margin: 0 auto;
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.footer-bottom p { font-size: 0.78rem; color: rgba(255,255,255,0.62); }
.footer-bottom a { color: rgba(255,255,255,0.62); transition: color 0.2s; }
.footer-bottom a:hover { color: rgba(255,255,255,0.9); }

@media (max-width: 900px) {
  .footer-top { grid-template-columns: repeat(2, 1fr); }
  .footer-brand { grid-column: span 2; }
}
@media (max-width: 540px) {
  .footer-top { grid-template-columns: 1fr; }
  .footer-brand { grid-column: span 1; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ═══════════════════════════════════════════════════════
   WHATSAPP FLOAT
═══════════════════════════════════════════════════════ */
.wa-float {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.75rem;
}
.wa-bubble {
  background: #25D366;
  width: 56px; height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(37,211,102,0.4);
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
  text-decoration: none;
  animation: waPop 0.5s var(--ease-out) 1.5s both;
}
@keyframes waPop {
  from { opacity: 0; transform: scale(0.5); }
  to   { opacity: 1; transform: scale(1); }
}
.wa-bubble:hover { transform: scale(1.1); box-shadow: 0 6px 28px rgba(37,211,102,0.5); }
.wa-bubble svg { width: 28px; height: 28px; }
.wa-tooltip {
  background: var(--black-3);
  color: var(--white);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(8px);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}
.wa-float:hover .wa-tooltip { opacity: 1; transform: translateX(0); }

/* ═══════════════════════════════════════════════════════
   RESPONSIVE UTILITIES
═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  :root { --sec-pad: 4rem; --pad: 1.25rem; }
  .btn { padding: 0.8rem 1.5rem; }
  .btn-lg { padding: 0.9rem 1.8rem; }
}

/* ===================================================
   SERVICIOS PAGE -- Detail Sections
=================================================== */
.srv-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}
.srv-detail-grid--reverse .srv-detail-content { order: 2; }
.srv-detail-grid--reverse .srv-detail-visual   { order: 1; }

.srv-detail-num {
  font-size: 6rem;
  font-weight: 900;
  line-height: 1;
  color: var(--rojo-tx);
  opacity: 0.12;
  letter-spacing: -0.04em;
  margin-bottom: -1.5rem;
  display: block;
}

.srv-features { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 1.5rem; }
.srv-feature {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.88rem;
  color: var(--tx-3);
  line-height: 1.5;
}
.srv-feature svg { flex-shrink: 0; margin-top: 2px; }

.srv-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.5rem;
}
.srv-tag {
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(237,28,36,0.07);
  border: 1px solid rgba(237,28,36,0.15);
  color: var(--rojo-tx);
  padding: 0.3rem 0.75rem;
  border-radius: 20px;
}
.srv-detail-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 900px) {
  .srv-detail-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .srv-detail-grid--reverse .srv-detail-content { order: 1; }
  .srv-detail-grid--reverse .srv-detail-visual   { order: 2; }
  .srv-detail-num { font-size: 4rem; }
}

/* ===================================================
   IMPORTACIONES PAGE
=================================================== */
.origen-cards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 2rem;
}
.origen-card {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  padding: 1.25rem;
  border-radius: var(--radius-m);
  border: 1.5px solid var(--linea);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.origen-card--active { border-color: rgba(237,28,36,0.2); background: rgba(237,28,36,0.025); }
.origen-card--soon   { border-color: var(--linea); opacity: 0.7; }
.origen-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.06); }

.origen-flag { font-size: 2.2rem; line-height: 1; flex-shrink: 0; }
.origen-card strong { display: block; font-weight: 700; font-size: 1rem; color: var(--tx); margin-bottom: 0.2rem; }
.origen-card p { font-size: 0.82rem; color: var(--tx-2); line-height: 1.5; margin-top: 0.3rem; }

.origen-status {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 20px;
  margin-left: 0.5rem;
  vertical-align: middle;
}
.origen-status--active { background: rgba(37,180,80,0.12); color: #25b450; }
.origen-status--soon   { background: rgba(200,160,40,0.12); color: #b08010; }

.proceso-full {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 3rem;
}
.proceso-step-full {
  display: grid;
  grid-template-columns: 80px 1fr 60px;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 2rem 2rem 2rem 2.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: background 0.2s;
}
.proceso-step-full:hover { background: rgba(255,255,255,0.02); }
.proceso-step-full--last { border-bottom: none; }

.proceso-num {
  font-size: 2.5rem;
  font-weight: 900;
  color: rgba(237,28,36,0.88);
  line-height: 1;
  letter-spacing: -0.04em;
  flex-shrink: 0;
}
.proceso-num--accent { color: var(--rojo-tx); opacity: 0.8; }

.proceso-body h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 0.6rem;
  line-height: 1.3;
}
.proceso-body p {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.7;
  margin-bottom: 0.8rem;
}
.proceso-detail {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.62);
  line-height: 1.6;
}
.proceso-icon-wrap {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 0.25rem;
  flex-shrink: 0;
}

@media (max-width: 700px) {
  .proceso-step-full { grid-template-columns: 56px 1fr; padding: 1.5rem 1rem 1.5rem 1.5rem; }
  .proceso-icon-wrap { display: none; }
  .proceso-num { font-size: 1.8rem; }
}

.faq-list { display: flex; flex-direction: column; gap: 0; }
.faq-item { border-bottom: 1px solid var(--linea); }
.faq-item:first-child { border-top: 1px solid var(--linea); }

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.4rem 0;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--tx);
  cursor: pointer;
  gap: 1rem;
  list-style: none;
  user-select: none;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after {
  content: '+';
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--rojo-tx);
  flex-shrink: 0;
  transition: transform 0.25s;
}
details[open] .faq-question::after { transform: rotate(45deg); }
.faq-answer { padding: 0 0 1.4rem 0; }
.faq-answer p { font-size: 0.9rem; color: var(--tx-2); line-height: 1.75; }

.map-visual {
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--black-2);
  padding: 1.5rem;
}

/* ===================================================
   KALIA FOODS PAGE
=================================================== */
.kalia-page { background: var(--k-sup); color: var(--tx); }

.kalia-hero {
  min-height: 90vh;
  display: flex;
  align-items: center;
  background: var(--k-sup);
  padding-top: var(--nav-h);
  position: relative;
  overflow: hidden;
}
.kalia-hero-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 85% 50%, rgba(13,43,30,0.08) 0%, transparent 70%),
              radial-gradient(ellipse 50% 40% at 15% 80%, rgba(224,138,26,0.06) 0%, transparent 60%);
  pointer-events: none;
}
.kalia-hero-content { padding: 4rem 0; }

.kalia-brand-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--k-tx);
  background: rgba(13,43,30,0.08);
  border: 1px solid rgba(13,43,30,0.15);
  padding: 0.35rem 0.9rem;
  border-radius: 20px;
  margin-bottom: 1.5rem;
}

.kalia-hero-title { margin-bottom: 0.25rem; }
.kalia-hero-desc {
  font-size: 0.95rem;
  color: var(--tx-2);
  line-height: 1.75;
  max-width: 480px;
  margin-bottom: 2rem;
}
.kalia-hero-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}
.kalia-hero-can {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.kalia-kicker { color: var(--k-tx) !important; }
.kalia-kicker::before { background: var(--kalia-gold) !important; }
.kalia-title em { color: var(--k-tx); font-style: normal; }
.kalia-about { background: var(--sup); }

.kalia-highlights {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 2rem;
}
.kalia-highlight {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: var(--radius-m);
  border: 1.5px solid rgba(13,43,30,0.12);
  background: rgba(13,43,30,0.03);
}
.kalia-highlight-icon { font-size: 1.5rem; flex-shrink: 0; line-height: 1; }
.kalia-highlight strong { display: block; font-size: 0.85rem; font-weight: 700; color: var(--k-tx); margin-bottom: 0.15rem; }
.kalia-highlight span  { font-size: 0.8rem; color: var(--tx-2); line-height: 1.5; }

.kalia-brand-block {
  border-radius: var(--radius-l);
  background: var(--k-sup-2);
  padding: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
}
.kalia-brand-block-inner { text-align: center; }
.kalia-brand-icon { font-size: 4rem; line-height: 1; margin-bottom: 1rem; }
.kalia-brand-name {
  font-size: 3rem;
  font-weight: 900;
  color: var(--k-tx);
  letter-spacing: -0.04em;
  line-height: 1;
}
.kalia-brand-sub {
  font-size: 1rem;
  font-weight: 700;
  color: var(--kalia-gold);
  letter-spacing: 0.25em;
  margin-top: 0.2rem;
}
.kalia-brand-divider {
  width: 60px;
  height: 2px;
  background: var(--kalia-gold);
  border-radius: 2px;
  margin: 1rem auto;
}
.kalia-brand-claim { font-size: 0.95rem; font-style: italic; color: var(--k-tx); font-weight: 600; margin-bottom: 0.5rem; }
.kalia-brand-detail { font-size: 0.72rem; color: rgba(13,43,30,0.4); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; }

.kalia-productos-section { background: var(--k-sup-2); position: relative; }
.kalia-prods-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(224,138,26,0.06) 0%, transparent 60%);
  pointer-events: none;
}

.kalia-product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}
.kalia-product-card {
  background: var(--sup);
  border-radius: var(--radius-l);
  border: 1.5px solid rgba(13,43,30,0.1);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.25s, transform 0.25s, border-color 0.25s;
}
.kalia-product-card:hover {
  box-shadow: 0 12px 40px rgba(13,43,30,0.12);
  transform: translateY(-4px);
  border-color: rgba(13,43,30,0.2);
}
.kalia-product-icon { font-size: 3rem; line-height: 1; margin-bottom: 1rem; }
.kalia-product-body { flex: 1; }
.kalia-product-cat {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kalia-gold);
  margin-bottom: 0.5rem;
}
.kalia-product-name { font-size: 1.05rem; font-weight: 800; color: var(--k-tx); margin-bottom: 0.75rem; line-height: 1.3; }
.kalia-product-desc { font-size: 0.86rem; color: var(--tx-2); line-height: 1.65; margin-bottom: 1rem; }
.kalia-product-specs { font-size: 0.8rem; color: var(--tx-2); display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 1rem; }
.kalia-product-specs li { display: flex; gap: 0.4rem; }
.kalia-product-specs span { font-weight: 700; color: var(--k-tx); min-width: 90px; flex-shrink: 0; }

.kalia-product-targets { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.25rem; }
.kalia-product-targets span {
  font-size: 0.72rem;
  background: rgba(13,43,30,0.08);
  color: var(--k-tx);
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
}
.kalia-product-cta {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--k-tx);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid rgba(13,43,30,0.1);
  transition: gap 0.2s;
}
.kalia-product-card:hover .kalia-product-cta { gap: 0.6rem; }

.canales-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}
.canal-card {
  background: var(--sup-2);
  border-radius: var(--radius-l);
  border: 1.5px solid var(--linea);
  padding: 2rem;
  transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
}
.canal-card:hover { box-shadow: 0 8px 32px rgba(13,43,30,0.1); transform: translateY(-3px); border-color: rgba(13,43,30,0.2); }
.canal-icon { font-size: 2.5rem; line-height: 1; margin-bottom: 1rem; }
.canal-card h3 { font-size: 1.05rem; font-weight: 800; color: var(--k-tx); margin-bottom: 0.75rem; }
.canal-card p  { font-size: 0.86rem; color: var(--tx-2); line-height: 1.65; margin-bottom: 1rem; }
.canal-list { display: flex; flex-direction: column; gap: 0.4rem; }
.canal-list li { font-size: 0.82rem; color: var(--tx-2); padding-left: 1rem; position: relative; }
.canal-list li::before { content: 'v'; position: absolute; left: 0; color: var(--k-tx); font-weight: 700; }

.kalia-contact-section { background: var(--k-sup-2); position: relative; }
.kalia-contact-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 100%, rgba(13,43,30,0.07) 0%, transparent 60%);
  pointer-events: none;
}
.kalia-wa-note { text-align: center; margin-top: 2rem; }
.kalia-wa-note p { font-size: 0.9rem; color: var(--tx-2); margin-bottom: 0.75rem; }
.kalia-wa-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--kalia-green);
  color: white;
  font-size: 0.88rem;
  font-weight: 700;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  text-decoration: none;
  transition: background 0.2s, transform 0.15s;
}
.kalia-wa-btn:hover { background: var(--kalia-green-dark); transform: translateY(-1px); }

.checkbox-group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.86rem;
  color: var(--tx-2);
  cursor: pointer;
}
.checkbox-label input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--kalia-green); flex-shrink: 0; }

@media (max-width: 900px) {
  .kalia-hero-visual { display: none; }
  .kalia-product-grid { grid-template-columns: 1fr; }
  .canales-grid { grid-template-columns: 1fr; }
  .kalia-highlights { grid-template-columns: 1fr; }
  .checkbox-group { grid-template-columns: 1fr; }
}

/* ===================================================
   BLOG PAGE
=================================================== */
.blog-filter-section {
  background: var(--black-2);
  border-bottom: 1px solid var(--line);
  padding: 1.25rem 0;
}
.blog-filter-bar {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.filter-btn {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.45rem 1.1rem;
  border-radius: 20px;
  border: 1.5px solid var(--line);
  color: rgba(255,255,255,0.45);
  background: transparent;
  cursor: pointer;
  transition: all 0.2s;
}
.filter-btn:hover,
.filter-btn.is-active {
  background: var(--red-dark);
  border-color: var(--red);
  color: var(--white);
}

.blog-listing { background: var(--sup-2); }
#blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 0;
}

.blog-card {
  background: var(--sup);
  border-radius: var(--radius-m);
  overflow: hidden;
  border: 1px solid var(--linea);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.25s, transform 0.25s;
}
.blog-card:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.1); transform: translateY(-4px); }
.blog-card--featured { grid-column: span 3; display: grid; grid-template-columns: 1fr 1fr; }

.blog-card-image {
  height: 200px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.blog-card--featured .blog-card-image { height: auto; min-height: 280px; }

.blog-card-image--1 { background: linear-gradient(135deg, #0A0A0A 0%, #1f1f1f 40%, rgba(237,28,36,0.15) 100%); }
.blog-card-image--2 { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 40%, #0f3460 100%); }
.blog-card-image--3 { background: linear-gradient(135deg, #0a2a0a 0%, #1a4a1a 40%, rgba(13,43,30,0.4) 100%); }
.blog-card-image--4 { background: linear-gradient(135deg, #2a1a0a 0%, #5a3a10 40%, rgba(224,138,26,0.3) 100%); }
.blog-card-image--5 { background: linear-gradient(135deg, #0a1a2a 0%, #1a3a5a 40%, rgba(30,120,180,0.3) 100%); }
.blog-card-image--6 { background: linear-gradient(135deg, #1a0a0a 0%, #3a1010 40%, rgba(237,28,36,0.2) 100%); }
.blog-card-image--7 { background: linear-gradient(135deg, #0a1a10 0%, #1a3a2a 40%, rgba(13,43,30,0.3) 100%); }

.blog-card-image--1::after { content: '📦'; font-size: 3.5rem; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.blog-card-image--2::after { content: '🏛️'; font-size: 3.5rem; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.blog-card-image--3::after { content: '🚢'; font-size: 3.5rem; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.blog-card-image--4::after { content: '🇯🇵'; font-size: 3.5rem; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.blog-card-image--5::after { content: '📋'; font-size: 3.5rem; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.blog-card-image--6::after { content: '🌍'; font-size: 3.5rem; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.blog-card-image--7::after { content: '🗺️'; font-size: 3.5rem; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }

.blog-card-cat-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 1;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--red-dark);
  color: var(--white);
  padding: 0.2rem 0.65rem;
  border-radius: 20px;
}
.blog-card-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.blog-card-meta { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: var(--tx-2); margin-bottom: 0.75rem; }
.blog-card-title { font-size: 1.02rem; font-weight: 800; color: var(--tx); line-height: 1.35; margin-bottom: 0.75rem; }
.blog-card--featured .blog-card-title { font-size: 1.25rem; }
.blog-card-excerpt { font-size: 0.86rem; color: var(--tx-2); line-height: 1.7; flex: 1; margin-bottom: 1.25rem; }
.blog-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--rojo-tx);
  text-decoration: none;
  margin-top: auto;
  transition: gap 0.2s;
}
.blog-card:hover .blog-card-link { gap: 0.7rem; }

.blog-empty { text-align: center; padding: 3rem 0; grid-column: span 3; }
.blog-empty p { color: var(--gray-400); margin-bottom: 1.5rem; }

.newsletter-section { background: var(--sup-3); }
.newsletter-form .newsletter-row { display: flex; gap: 1rem; }
.newsletter-form input[type=email] {
  flex: 1;
  padding: 0.85rem 1.2rem;
  border: 1.5px solid var(--linea);
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: 0.9rem;
  background: var(--sup);
  color: var(--tx);
  outline: none;
  transition: border-color 0.2s;
}
.newsletter-form input[type=email]:focus { border-color: var(--red); }

@media (max-width: 960px) {
  #blog-grid { grid-template-columns: 1fr; }
  .blog-card--featured { grid-column: span 1; grid-template-columns: 1fr; }
  .blog-card--featured .blog-card-image { min-height: 180px; }
  .blog-empty { grid-column: span 1; }
  .newsletter-form .newsletter-row { flex-direction: column; }
}

/* ===================================================
   CONTACTO PAGE
=================================================== */
.contact-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.contact-info-card {
  padding: 2rem;
  border-radius: var(--radius-l);
  border: 1.5px solid var(--linea);
  background: var(--sup-2);
  transition: box-shadow 0.2s, transform 0.2s;
}
.contact-info-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.07); transform: translateY(-2px); }
.contact-info-icon {
  width: 52px; height: 52px;
  background: rgba(237,28,36,0.08);
  border-radius: var(--radius-m);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}
.contact-info-card h3 { font-size: 0.95rem; font-weight: 800; color: var(--tx); margin-bottom: 0.5rem; }
.contact-info-link { display: block; font-size: 1rem; font-weight: 700; color: var(--rojo-tx); text-decoration: none; margin-bottom: 0.4rem; transition: opacity 0.2s; }
.contact-info-link:hover { opacity: 0.75; }
.contact-info-card p { font-size: 0.83rem; color: var(--tx-2); line-height: 1.6; }
.contact-info-address { font-style: normal; font-size: 0.9rem; color: var(--tx); font-weight: 600; line-height: 1.6; margin-bottom: 0.3rem; }

.contact-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }
.contact-tab {
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.6rem 1.25rem;
  border-radius: var(--radius);
  border: 1.5px solid var(--linea);
  color: var(--tx-2);
  background: var(--sup);
  cursor: pointer;
  transition: all 0.2s;
}
.contact-tab:hover    { border-color: var(--red); color: var(--rojo-tx); }
.contact-tab.is-active { background: var(--red-dark); border-color: var(--red); color: var(--white); }

.contact-form-panel { display: none; }
.contact-form-panel.is-active { display: block; }

.mapa-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 4rem;
  align-items: start;
}
.mapa-datos { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 2rem; }
.mapa-dato { display: flex; align-items: flex-start; gap: 1rem; }
.mapa-dato svg { flex-shrink: 0; margin-top: 2px; }
.mapa-dato strong { display: block; font-size: 0.82rem; font-weight: 700; color: var(--tx); margin-bottom: 0.2rem; text-transform: uppercase; letter-spacing: 0.06em; }
.mapa-dato address { font-style: normal; font-size: 0.88rem; color: var(--tx-2); line-height: 1.6; }
.mapa-dato p { font-size: 0.88rem; color: var(--tx-2); line-height: 1.6; }
.mapa-dato a { color: var(--rojo-tx); font-weight: 600; font-size: 0.95rem; transition: opacity 0.2s; }
.mapa-dato a:hover { opacity: 0.75; }

.mapa-embed { width: 100%; }
.mapa-placeholder { width: 100%; border-radius: var(--radius-m); overflow: hidden; background: var(--sup-3); }
.mapa-placeholder iframe { display: block; }

@media (max-width: 900px) {
  .contact-info-grid { grid-template-columns: 1fr; }
  .mapa-grid { grid-template-columns: 1fr; gap: 2rem; }
  .checkbox-group { grid-template-columns: 1fr; }
}

.form-wrapper {
  max-width: 760px;
  margin: 0 auto;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: 2.5rem;
}

@media (max-width: 600px) {
  .form-wrapper { padding: 1.5rem; }
}

/* ══════════════════════════════════════════════════════
   Cadena, operaciones internacionales y expediente
   Secciones nuevas de la portada (2026-08-28).
   Todo con la paleta de la guía: rojo #ED1C24 para gráfica,
   --red-dark para texto y botones sobre claro.
   ══════════════════════════════════════════════════════ */

/* ─── De origen a destino ─── */
.cadena-head { max-width: 60ch; margin-bottom: 3rem; }

.cadena {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  list-style: none;
  counter-reset: eslabon;
}
.cadena-paso {
  position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 0.5rem; padding: 0 0.5rem;
}
/* La línea que une los eslabones: es la cadena, no un adorno. */
.cadena-paso::before {
  content: ""; position: absolute; top: 27px; left: -50%; width: 100%;
  height: 1px; background: var(--line); z-index: 0;
}
.cadena-paso:first-child::before { display: none; }

.cadena-ico {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 54px; height: 54px; flex: none;
  border: 1px solid var(--black-4); border-radius: var(--radius);
  background: var(--black-2); color: var(--rojo-tx);
}
.cadena-ico svg { width: 22px; height: 22px; }
.cadena-paso b {
  font-size: 0.8rem; font-weight: 700; color: var(--white);
  letter-spacing: 0.02em; line-height: 1.3;
}
.cadena-paso span { font-size: 0.72rem; color: var(--gray-400); line-height: 1.3; }
.cadena-paso--fin .cadena-ico { border-color: var(--red); background: var(--red-glow); }

@media (max-width: 900px) {
  .cadena { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; }
  .cadena-paso::before { display: none; }
}
@media (max-width: 420px) { .cadena { grid-template-columns: 1fr; } }

/* ─── Operaciones internacionales ─── */
.ops-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4rem; align-items: center;
}
.ops-bloque { margin-top: 1.75rem; }
.ops-rot {
  display: block; margin-bottom: 0.6rem;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--tx-2);
}
.ops-lista { list-style: none; display: grid; gap: 0.5rem; }
.ops-lista li {
  display: flex; align-items: baseline; gap: 0.75rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--linea-suave); border-radius: var(--radius);
  background: var(--sup-2);
}
.ops-lista b { font-size: 0.95rem; font-weight: 700; color: var(--tx); }
.ops-lista span { font-size: 0.85rem; color: var(--tx-2); }
.ops-lista li::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--red); flex: none; align-self: center;
}
/* Lo que aún no opera se dibuja hueco: la diferencia se ve, no se lee */
.ops-proximo::before { background: transparent !important; border: 2px solid var(--red); }
.ops-proximo b { color: var(--tx-2); }

.ops-mapa {
  padding: 2rem; border-radius: var(--radius-m);
  background: var(--black); border: 1px solid var(--black-4);
}
.ops-mapa svg { width: 100%; height: auto; }
.ops-leyenda {
  display: flex; flex-wrap: wrap; gap: 1.25rem; justify-content: center;
  margin-top: 1.25rem; padding-top: 1.25rem;
  border-top: 1px solid var(--black-4);
}
.ops-clave {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--gray-400);
}
.ops-linea { width: 22px; height: 2px; background: var(--red); }
.ops-linea--punteada {
  background: none;
  border-top: 2px dashed var(--red); opacity: 0.55;
}

@media (max-width: 960px) { .ops-grid { grid-template-columns: 1fr; gap: 2.5rem; } }

/* ─── Expediente de la operación ─── */
.ctrl-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4rem; align-items: center;
}
.ctrl-lista { list-style: none; display: grid; gap: 0.85rem; margin-top: 2rem; }
.ctrl-lista li {
  position: relative; padding-left: 1.75rem;
  font-size: 0.95rem; color: var(--gray-200);
}
.ctrl-lista li::before {
  content: ""; position: absolute; left: 0; top: 0.45em;
  width: 11px; height: 6px;
  border-left: 2px solid var(--red); border-bottom: 2px solid var(--red);
  transform: rotate(-45deg);
}

.ctrl-panel {
  margin: 0; padding: 0;
  border: 1px solid var(--black-4); border-radius: var(--radius-m);
  background: var(--black-2); overflow: hidden;
}
.ctrl-panel-top {
  display: flex; flex-wrap: wrap; gap: 0.75rem;
  align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--black-4);
  background: var(--black);
}
.ctrl-id {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em;
  color: var(--gray-400);
}
.ctrl-estado {
  padding: 0.3rem 0.7rem; border-radius: 999px;
  background: var(--red-glow); border: 1px solid var(--red);
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--white);
}
.ctrl-ruta {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 1rem; align-items: center; padding: 1.5rem 1.25rem;
}
.ctrl-puerto { text-align: center; }
.ctrl-puerto b { display: block; font-size: 1.35rem; font-weight: 800; color: var(--white); }
.ctrl-puerto i { font-style: normal; font-size: 0.7rem; color: var(--gray-400); }
.ctrl-barra { display: block; height: 3px; background: var(--black-4); border-radius: 2px; }
.ctrl-barra i { display: block; height: 100%; background: var(--red); border-radius: 2px; }

.ctrl-timeline {
  list-style: none; display: grid; gap: 0.7rem;
  padding: 0 1.25rem 1.25rem; margin: 0;
}
.ctrl-timeline li {
  position: relative; padding-left: 1.6rem;
  font-size: 0.85rem; color: var(--gray-400);
}
.ctrl-timeline li::before {
  content: ""; position: absolute; left: 0; top: 0.4em;
  width: 9px; height: 9px; border-radius: 50%;
  border: 1.5px solid var(--black-4); background: var(--black-2);
}
.ctrl-timeline .ok { color: var(--gray-200); }
.ctrl-timeline .ok::before { background: var(--gray-600); border-color: var(--gray-600); }
.ctrl-timeline .activo { color: var(--white); font-weight: 600; }
.ctrl-timeline .activo::before { background: var(--red); border-color: var(--red); }

.ctrl-panel-pie {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.9rem 1.25rem; border-top: 1px solid var(--black-4);
  background: var(--black);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.05em; color: var(--gray-400);
}
/* Se dice que es una representación: el visitante no debe creer que
   está viendo una captura de un sistema que aún no le damos. */
.ctrl-nota {
  padding: 0.75rem 1.25rem; margin: 0;
  border-top: 1px solid var(--black-4);
  font-size: 0.7rem; font-style: italic; color: var(--gray-400);
}

@media (max-width: 960px) { .ctrl-grid { grid-template-columns: 1fr; gap: 2.5rem; } }

/* ─── Vista previa del proceso en la portada ───
   Estas clases se usaban en index.html pero nunca se estilaron: .proceso-text
   heredaba el gris del body (#2D2D2D) sobre la sección oscura (#1A1A1A) y
   daba 1.26:1 — texto prácticamente invisible. Las reglas .proceso-*-full de
   más arriba son de importaciones.html y no aplican aquí. */
.proceso-steps { display: grid; gap: 0.75rem; }
.proceso-step {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--black-4); border-radius: var(--radius);
  background: var(--black-2);
}
.proceso-step .proceso-num {
  font-size: 1rem; font-weight: 800; color: var(--red-light);
  min-width: 2ch; line-height: 1;
}
.proceso-text { font-size: 0.92rem; color: var(--gray-200); }
.proceso-more {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-top: 0.5rem; padding: 0.6rem 0;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--gray-400);
  transition: color 0.2s var(--ease-out);
}
.proceso-more:hover { color: var(--white); }

/* La etiqueta de producto KALIA daba 2.45 sobre su propio lavado dorado. */
.kalia-product-tag { color: #8A5410; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .kalia-product-tag { color: var(--kalia-gold-light); }
}
:root[data-theme="dark"] .kalia-product-tag { color: var(--kalia-gold-light); }

/* ══════════════════════════════════════════════════════
   Movimiento
   Una sola idea: la operación está en curso. Nada de efectos
   sueltos — cada animación dice lo mismo que dice el titular.
   Todo se apaga con prefers-reduced-motion.
   ══════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {

  /* ─── Hero: la carga recorre la ruta ─── */
  .hero-carga {
    animation: viaje 9s cubic-bezier(.55,0,.45,1) infinite;
    transform-box: fill-box;
  }
  @keyframes viaje {
    0%        { transform: translateX(80px);  opacity: 0; }
    6%        { opacity: 1; }
    88%       { opacity: 1; }
    94%, 100% { transform: translateX(480px); opacity: 0; }
  }

  /* La línea de fondo fluye; la roja se dibuja bajo la carga */
  .hero-ruta { animation: fluir 2.4s linear infinite; }
  @keyframes fluir { to { stroke-dashoffset: -16; } }

  .hero-ruta-viva {
    stroke-dasharray: 400;
    animation: trazar 9s cubic-bezier(.55,0,.45,1) infinite;
  }
  @keyframes trazar {
    0%        { stroke-dashoffset: 400; }
    94%, 100% { stroke-dashoffset: 0; }
  }

  /* Los nodos laten cuando la carga sale y cuando llega */
  .hero-nodo--origen  { animation: latir 9s ease-in-out infinite; }
  .hero-nodo--destino { animation: latir 9s ease-in-out infinite; animation-delay: 8.1s; }
  @keyframes latir {
    0%, 12%, 100% { r: 4; opacity: .6; }
    4%            { r: 7; opacity: 1; }
  }

  /* El barco flota: 3px, lento. Cualquier cosa mayor parece de dibujos. */
  .hero-ship--flota { animation: flotar 7s ease-in-out infinite; }
  @keyframes flotar {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
  }

  /* ─── La cadena se encadena ─── */
  .cadena-paso::before { transform: scaleX(0); transform-origin: left; }
  .cadena-paso.is-visible::before {
    transform: scaleX(1);
    transition: transform .5s cubic-bezier(.2,.7,.2,1);
  }
  .cadena-paso .cadena-ico { transition: border-color .3s ease, background .3s ease; }
  .cadena-paso.is-visible .cadena-ico { border-color: var(--red); }

  /* ─── El mapa dibuja sus rutas al entrar ─── */
  .ops-mapa path[stroke="#ED1C24"] {
    stroke-dasharray: 340; stroke-dashoffset: 340;
  }
  .ops-mapa.is-visible path[stroke="#ED1C24"] {
    animation: dibujar-ruta 1.5s cubic-bezier(.4,0,.2,1) forwards;
  }
  .ops-mapa.is-visible path[stroke="#ED1C24"]:nth-of-type(2) { animation-delay: .25s; }
  .ops-mapa.is-visible path[stroke="#ED1C24"]:nth-of-type(3) { animation-delay: .5s; }
  @keyframes dibujar-ruta { to { stroke-dashoffset: 0; } }

  /* El destino respira: es donde termina todo */
  .ops-mapa.is-visible circle[r="14"] { animation: respirar 3s ease-in-out infinite 1.4s; }
  @keyframes respirar {
    0%, 100% { opacity: .35; transform: scale(1); }
    50%      { opacity: .1;  transform: scale(1.18); }
  }
  .ops-mapa circle[r="14"] { transform-origin: 268px 300px; transform-box: view-box; }

  /* ─── El expediente avanza ─── */
  .ctrl-barra i { width: 0 !important; }
  .ctrl-panel.is-visible .ctrl-barra i {
    width: 68% !important;
    transition: width 1.4s cubic-bezier(.3,0,.2,1) .3s;
  }
  .ctrl-panel .ctrl-timeline li { opacity: .55; }
  .ctrl-panel.is-visible .ctrl-timeline li {
    opacity: 1; transition: opacity .4s ease;
  }
  .ctrl-panel.is-visible .ctrl-timeline li:nth-child(2) { transition-delay: .12s; }
  .ctrl-panel.is-visible .ctrl-timeline li:nth-child(3) { transition-delay: .24s; }
  .ctrl-panel.is-visible .ctrl-timeline li:nth-child(4) { transition-delay: .36s; }
  .ctrl-panel.is-visible .ctrl-timeline li:nth-child(5) { transition-delay: .48s; }

  /* El punto de la etapa activa late, como en un panel real */
  .ctrl-timeline .activo::before { animation: latido 2s ease-in-out infinite; }
  @keyframes latido {
    0%, 100% { box-shadow: 0 0 0 0 rgba(237,28,36,.55); }
    70%      { box-shadow: 0 0 0 6px rgba(237,28,36,0); }
  }
}

/* ══════════════════════════════════════════════════════
   .form-group — las reglas que nunca existieron
   Se usa en 58 bloques repartidos por contacto, importaciones,
   servicios y kalia-foods, pero NO tenía ni una regla en esta
   hoja: la etiqueta heredaba --gray-800 (#2D2D2D) del body y,
   sobre las secciones oscuras, daba 1.14:1 — invisible. Los
   campos, además, eran los del navegador sin tocar.
   ══════════════════════════════════════════════════════ */
.form-group { display: flex; flex-direction: column; gap: 0.35rem; }

.form-group label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tx-2);
}
.form-group label span[aria-hidden] { color: var(--rojo-tx); }

.form-group input,
.form-group select,
.form-group textarea {
  background: var(--sup);
  border: 1px solid var(--linea);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  font-family: var(--font);
  font-size: 0.9rem;
  color: var(--tx);
  width: 100%;
  outline: none;
  transition: border-color 0.2s;
  -webkit-appearance: none;
}
.form-group select { appearance: none; cursor: pointer; padding-right: 2.5rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--tx-2) 50%),
                    linear-gradient(135deg, var(--tx-2) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.form-group textarea { resize: vertical; min-height: 110px; }
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--gray-400); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: var(--red); }
.form-group input:invalid:not(:placeholder-shown) { border-color: var(--red); }

/* Sobre las secciones oscuras la etiqueta tiene que aclararse.
   Es el mismo motivo por el que un token de tema no sirve para un
   bloque que siempre es oscuro: aquí el fondo no cambia, el texto sí. */
.section-dark .form-group label,
.section-dark .form-field label { color: var(--gray-200); }
.section-dark .form-group label span[aria-hidden] { color: var(--red-light); }

/* ══════════════════════════════════════════════════════
   El logo, ahora el de verdad
   Antes era una «R» blanca dentro de un cuadrado rojo dibujado
   con CSS. El logo real es el monograma con su descriptor, y
   la guía prohíbe recolorearlo o sustituirlo (cap. 40).

   En la nav va el ISOTIPO (cap. 32), no el logotipo completo:
   a 36px de alto el descriptor «IMPORT & LOGISTICS» quedaría en
   ~6px, y el cap. 35 dice que entonces el logo está demasiado
   pequeño. El logotipo entero va al pie, donde sí cabe leerlo.
   ══════════════════════════════════════════════════════ */
.nav-logo-mark {
  width: 38px; height: 36px;
  background: url("assets/isotipo-redmach-neg.png") center/contain no-repeat;
  border-radius: 0;
  font-size: 0;            /* por si quedara texto en algún marcado */
  flex: none;
}
/* Sobre la barra clara el isotipo va en su versión positiva */
.nav.nav-light .nav-logo-mark {
  background-image: url("assets/isotipo-redmach.png");
}

/* En la página de KALIA manda su propia marca: la hoja, que es dorada
   y funciona igual sobre barra clara y oscura. */
.nav-logo-mark--kalia,
.nav.nav-light .nav-logo-mark--kalia {
  background-image: url("assets/isotipo-kalia.png");
}

/* El pie tiene sitio: aquí sí entra el logotipo completo con el
   descriptor legible, que es lo que pide el cap. 35. */
.footer-logo-img {
  display: block;
  width: 320px; max-width: 100%; height: 72px;
  background: url("assets/logo-redmach-neg.png") left center/contain no-repeat;
}

/* El destello de entrada es lo primero que se ve de la marca. */
.splash-logo--img {
  width: 300px; max-width: 70vw; height: 68px;
  background: url("assets/logo-redmach-neg.png") center/contain no-repeat;
  font-size: 0;
}

@media (max-width: 600px) {
  .footer-logo-img { width: 260px; height: 59px; }
}

/* ── Conmutador de tema ───────────────────────────────────────
   Muestra el icono del tema al que se va a cambiar, no el actual:
   el botón anuncia lo que hace, no dónde estás.
   ---------------------------------------------------------- */
.nav-tema {
  display: grid; place-items: center;
  width: 38px; height: 38px; padding: 0; flex: none;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: transparent; color: rgba(255,255,255,0.75);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.nav-tema:hover { color: var(--white); border-color: rgba(255,255,255,0.28); background: rgba(255,255,255,0.06); }
.nav-tema svg { width: 17px; height: 17px; }
/* Sobre la barra clara, el botón va en tinta oscura */
.nav-light .nav-tema { border-color: var(--linea); color: var(--tx-2); }
.nav-light .nav-tema:hover { color: var(--tx); border-color: var(--tx-2); background: var(--sup-3); }

.nav-tema .i-sol  { display: none; }
.nav-tema .i-luna { display: block; }   /* estando en claro, se ofrece el oscuro */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nav-tema .i-sol  { display: block; }
  :root:not([data-theme="light"]) .nav-tema .i-luna { display: none; }
}
:root[data-theme="dark"]  .nav-tema .i-sol  { display: block; }
:root[data-theme="dark"]  .nav-tema .i-luna { display: none; }
:root[data-theme="light"] .nav-tema .i-sol  { display: none; }
:root[data-theme="light"] .nav-tema .i-luna { display: block; }

/* En oscuro, la barra clara de la página de KALIA deja de ser clara:
   sus fichas ya voltearon, pero el logotipo y el isotipo siguen
   siendo los positivos y hay que pasarlos a su versión negativa. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nav.nav-light .nav-logo-mark {
    background-image: url("assets/isotipo-redmach-neg.png");
  }
}
:root[data-theme="dark"] .nav.nav-light .nav-logo-mark {
  background-image: url("assets/isotipo-redmach-neg.png");
}
/* …salvo el de KALIA, que es dorado y se lee sobre los dos fondos. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nav.nav-light .nav-logo-mark--kalia {
    background-image: url("assets/isotipo-kalia.png");
  }
}
:root[data-theme="dark"] .nav.nav-light .nav-logo-mark--kalia {
  background-image: url("assets/isotipo-kalia.png");
}

/* ── Bloques que SIEMPRE son oscuros ──────────────────────────
   El hero, el pie, las secciones negras y el bloque de llamada a
   la acción no cambian con el tema: son oscuros en claro y en
   oscuro. Pero dentro de ellos hay texto que usa las fichas del
   tema, así que en claro salía tinta oscura sobre fondo negro.
   Ese defecto venía de antes de haber tema —la ficha era
   --black-3, igual de oscura— y solo se veía al auditar.

   En vez de perseguirlo regla a regla, aquí se fijan las fichas a
   sus valores oscuros dentro de estos contenedores. Cualquier
   descendiente que las use queda legible, incluidos los que
   todavía no existen.
   ---------------------------------------------------------- */
.hero,
.page-hero,
.section-dark,
.section-black,
.stats-section,
.cta-section,
.service-card.dark,
.footer {
  --tx:     #F2F2F2;
  --tx-2:   #A9A9A9;
  --tx-3:   #E8E8E8;
  --linea:  rgba(255,255,255,0.10);
  --linea-suave: rgba(255,255,255,0.06);
  --rojo-tx: #FF4A50;
  --sup:    #151515;
  --sup-2:  #101010;
  --sup-3:  #1B1B1B;
}

/* En oscuro, el logotipo de KALIA va en su versión negativa: el
   positivo lleva «KALIA» y el descriptor en verde #0D2B1E, que sobre
   fondo oscuro desaparece. El dorado de la hoja y de «FOODS» se
   mantiene en las dos versiones. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) img.logo-kalia { content: url("assets/logo-kalia-neg.png"); }
}
:root[data-theme="dark"] img.logo-kalia { content: url("assets/logo-kalia-neg.png"); }

/* ══════════════════════════════════════════════════════
   Movimiento moderno
   Todo lo de aquí es progresivo: si el navegador no lo
   soporta, el sitio se comporta exactamente como antes.
   Y todo va dentro de `no-preference`, así que quien pide
   menos movimiento no ve nada de esto.
   ══════════════════════════════════════════════════════ */

/* ─── 1. Transición entre páginas ───────────────────────
   El sitio tiene siete páginas. Hasta ahora cada clic era
   un parpadeo en blanco: el navegador tira la página y
   pinta la siguiente. Con esto el cambio se funde, y la
   barra y el pie —que son idénticos en todas— se quedan
   quietos en vez de reconstruirse.
   ---------------------------------------------------- */
@view-transition { navigation: auto; }

/* Lo que se repite en todas las páginas no debe parpadear:
   se le da nombre para que el navegador lo trate como el
   MISMO elemento a un lado y otro de la navegación. */
.nav    { view-transition-name: barra; }
.footer { view-transition-name: pie; }
.wa-bubble { view-transition-name: whatsapp; }

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: vt-sale 0.22s ease-in both; }
  ::view-transition-new(root) { animation: vt-entra 0.3s ease-out both; }
}
@keyframes vt-sale  { to   { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-entra { from { opacity: 0; transform: translateY(10px); } }

/* ─── 2. Barra de progreso de lectura ───────────────────
   Ligada al scroll real, sin una sola línea de JavaScript:
   la línea de tiempo la pone el navegador.
   ---------------------------------------------------- */
.progreso {
  position: fixed; inset: 0 0 auto 0; height: 3px;
  transform: scaleX(var(--avance, 0)); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--red-dark), var(--red));
  z-index: 200; pointer-events: none;
}

/* ─── 3. Foco que sigue al puntero ──────────────────────
   La tarjeta se ilumina donde está el cursor. Las dos
   variables las escribe main.js en un solo oyente para
   toda la página, y solo mientras el puntero está encima.
   ---------------------------------------------------- */
.service-card, .about-card, .blog-card, .origen-card, .contact-info-card {
  position: relative;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .service-card::after, .about-card::after, .blog-card::after,
  .origen-card::after, .contact-info-card::after {
    content: ""; position: absolute; inset: 0;
    border-radius: inherit; pointer-events: none;
    opacity: 0; transition: opacity 0.35s;
    background: radial-gradient(340px circle at var(--px, 50%) var(--py, 50%),
                                rgba(237,28,36,0.10), transparent 65%);
  }
  .service-card:hover::after, .about-card:hover::after, .blog-card:hover::after,
  .origen-card:hover::after, .contact-info-card:hover::after { opacity: 1; }
}