/* ── components.css — nav, breadcrumb, FAQ, CTA, footer ── */

/* ═══ NAV ═══ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  background: var(--verde-oscuro); border-bottom: 1px solid rgba(255,255,255,0.08);
}
.nav-inner {
  max-width: var(--max-w); margin-inline: auto; padding-inline: var(--pad-x);
  height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 2rem;
}
.nav-logo {
  font-family: var(--font-display); font-size: 1.15rem; font-weight: 700;
  color: var(--blanco); text-decoration: none;
}
.nav-logo span { color: var(--dorado); }
.nav-logo-img { height: 3.25rem; width: auto; display: block; }
.nav-links { display: flex; align-items: center; gap: 2rem; list-style: none; }

.nav-item { position: relative; }
.nav-item-row { display: flex; align-items: center; }
.nav-link {
  font-size: 0.85rem; font-weight: 500;
  color: rgba(255,255,255,0.75); text-decoration: none; transition: color 0.2s;
}
.nav-link:hover { color: var(--blanco); }
.nav-link[aria-current="page"] {
  color: var(--blanco); border-bottom: 1.5px solid var(--dorado); padding-bottom: 2px;
}
.nav-link.is-ancestor { color: var(--blanco); }

.nav-disclosure {
  background: none; border: none; cursor: pointer; color: rgba(255,255,255,0.6);
  display: flex; align-items: center; justify-content: center;
  width: 1.3rem; height: 1.3rem; margin-left: 0.15rem; flex-shrink: 0;
}
.nav-disclosure svg { width: 9px; height: 9px; transition: transform 0.2s; }
.nav-disclosure[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-disclosure:focus-visible, .nav-link:focus-visible { outline: 2px solid var(--dorado); outline-offset: 2px; }

.nav-cta { margin-left: 0.5rem; }
.nav-toggle {
  display: none; background: none; border: none; cursor: pointer;
  padding: 4px; flex-direction: column; gap: 5px;
}
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--blanco); border-radius: 2px; }

/* Submenús — comportamiento de escritorio (hover/foco) */
@media (min-width: 641px) {
  .subnav {
    position: absolute; top: calc(100% + 14px); left: 0; margin: 0; list-style: none;
    min-width: 230px; background: var(--verde-oscuro);
    border: 1px solid rgba(255,255,255,0.1); border-radius: 4px;
    padding: 0.6rem; box-shadow: 0 12px 28px rgba(0,0,0,0.25);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  }
  .nav-item.is-open > .subnav,
  .nav-item:hover > .subnav,
  .nav-item:focus-within > .subnav {
    opacity: 1; visibility: visible; transform: translateY(0);
  }
  /* Cierre forzado vía Escape: independiente de :focus-within, que no se
     puede "apagar" moviendo el foco a otro descendiente del mismo item. Se
     quita en el siguiente mouseenter/focusin real sobre ese item (JS). */
  .nav-item--force-closed > .subnav {
    opacity: 0 !important; visibility: hidden !important; pointer-events: none !important;
  }
  .subnav .nav-item-row .nav-link {
    display: block; padding: 0.55rem 0.75rem; border-radius: 3px;
    font-size: 0.83rem; color: rgba(255,255,255,0.8);
  }
  .subnav .nav-item-row .nav-link:hover { background: rgba(255,255,255,0.06); color: var(--blanco); }
  .subnav .nav-item-row .nav-link[aria-current="page"] { border-bottom: none; background: rgba(201,149,42,0.12); color: var(--dorado-suave); }

  /* Mega-panel: el único caso con 2 niveles reales es "Servicios" */
  .subnav--mega {
    display: grid; grid-template-columns: repeat(4, minmax(175px, 1fr));
    gap: 0.25rem 1.25rem; min-width: 680px; padding: 1.1rem 1.2rem;
  }
  /* dentro del mega-panel el 2do nivel siempre está visible: es una columna, no un toggle */
  .subnav--mega > .nav-item > .nav-item-row > .nav-disclosure { display: none; }
  .subnav--mega > .nav-item > .nav-item-row > .nav-link {
    font-family: var(--font-body); font-weight: 700; font-size: 0.72rem;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--dorado-suave);
    padding: 0.4rem 0.75rem; pointer-events: auto;
  }
  .subnav--mega > .nav-item > .subnav {
    position: static; opacity: 1; visibility: visible; transform: none;
    background: none; border: none; box-shadow: none; padding: 0.2rem 0 0.6rem;
    min-width: 0;
  }
  .subnav--mega > .nav-item > .subnav .nav-link { padding: 0.4rem 0.75rem; font-size: 0.8rem; }
}

/* Submenús — comportamiento mobile (acordeón, no hover) */
@media (max-width: 640px) {
  .nav-links { display: none; }
  .nav-links.is-open {
    display: flex; flex-direction: column;
    position: absolute; top: 64px; left: 0; right: 0;
    background: var(--verde-oscuro); padding: 1rem var(--pad-x) 1.5rem;
    border-top: 1px solid rgba(255,255,255,0.1); gap: 0.2rem; z-index: 199;
    max-height: calc(100vh - 64px); overflow-y: auto;
  }
  .nav-cta { display: none; }
  .nav-toggle { display: flex; }

  .nav-item { width: 100%; }
  .nav-item-row { justify-content: space-between; }
  .nav-link { flex: 1; padding: 0.85rem 0; min-height: 44px; display: flex; align-items: center; }
  .nav-disclosure { width: 44px; height: 44px; }
  .nav-disclosure svg { width: 11px; height: 11px; }

  .subnav {
    display: none; list-style: none; margin: 0 0 0.3rem;
    padding-left: 0.9rem; border-left: 1px solid rgba(255,255,255,0.12);
  }
  .nav-item.is-open > .subnav { display: block; }
  .subnav--mega { grid-template-columns: 1fr; }
  .subnav .nav-item-row .nav-link { font-size: 0.85rem; color: rgba(255,255,255,0.7); }
  .subnav--mega > .nav-item > .nav-item-row > .nav-link { padding-top: 0.7rem; }
}

/* ═══ BREADCRUMB ═══ */
.breadcrumb { background: var(--arena); border-bottom: 1px solid var(--gris-borde); padding-top: 64px; }
.breadcrumb-inner {
  max-width: var(--max-w); margin-inline: auto; padding-inline: var(--pad-x);
  padding-block: 0.75rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  font-size: 0.8rem; color: var(--gris-texto);
}
.breadcrumb-inner a { color: var(--verde-medio); text-decoration: none; }
.breadcrumb-inner a:hover { color: var(--dorado); }
.breadcrumb-sep { color: var(--gris-borde); }

/* ═══ FAQ ═══ */
.section-faq { padding-block: var(--section-gap); background: var(--blanco); }
.faq-layout { display: grid; grid-template-columns: 280px 1fr; gap: 5rem; align-items: start; }
.faq-sidebar { position: sticky; top: 88px; }
.faq-sidebar p {
  font-size: 0.93rem; color: var(--gris-texto);
  line-height: 1.72; margin-top: 1rem; margin-bottom: 1.8rem;
}
.faq-box {
  background: var(--arena); border: 1.5px solid var(--gris-borde);
  padding: 1.4rem; border-radius: 2px;
}
.faq-box p { font-size: 0.87rem; color: var(--gris-texto); margin-bottom: 0.85rem; margin-top: 0; }
.faq-box a {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.85rem; font-weight: 500;
  color: var(--verde-oscuro); text-decoration: none; margin-bottom: 0.45rem; transition: color 0.2s;
}
.faq-box a:hover { color: var(--dorado); }
.faq-list { display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid var(--gris-borde); }
.faq-item:first-child { border-top: 1px solid var(--gris-borde); }
.faq-q {
  width: 100%; background: none; border: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1rem; padding: 1.4rem 0; text-align: left;
}
.faq-q:focus-visible { outline: 2px solid var(--dorado); outline-offset: 2px; }
.faq-q-text {
  font-family: var(--font-display); font-size: 1rem; font-weight: 600;
  color: var(--verde-oscuro); line-height: 1.4;
}
.faq-q-icon {
  width: 22px; height: 22px; flex-shrink: 0;
  border: 1.5px solid var(--gris-borde); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--verde-medio); margin-top: 2px;
  transition: transform 0.25s, background 0.2s, border-color 0.2s;
}
.faq-q[aria-expanded="true"] .faq-q-icon {
  transform: rotate(45deg); background: var(--dorado);
  border-color: var(--dorado); color: var(--negro);
}
.faq-a { display: none; padding-bottom: 1.5rem; }
.faq-a.is-open { display: block; }
.faq-a p { font-size: 0.93rem; color: var(--gris-texto); line-height: 1.78; margin-bottom: 0.85rem; }
.faq-a p:last-child { margin-bottom: 0; }
.faq-a strong { color: var(--negro); font-weight: 600; }
.faq-a ul { list-style: none; margin: 0.4rem 0 0.85rem; }
.faq-a ul li {
  font-size: 0.9rem; color: var(--gris-texto);
  padding-left: 1.2rem; position: relative; line-height: 1.65; margin-bottom: 0.3rem;
}
.faq-a ul li::before { content: '→'; position: absolute; left: 0; color: var(--dorado); font-size: 0.78rem; top: 2px; }

.faq-table { width: 100%; border-collapse: collapse; font-size: 0.83rem; margin: 0.85rem 0; }
.faq-table th {
  font-size: 0.65rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gris-borde); padding: 0.5rem 0.7rem; text-align: left;
  border-bottom: 1.5px solid var(--gris-borde);
}
.faq-table td {
  padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--gris-suave);
  color: var(--gris-texto); vertical-align: top; line-height: 1.5;
}
.faq-table tr:last-child td { border-bottom: none; }
.faq-table td:first-child { font-weight: 600; color: var(--negro); }

/* ═══ CTA FINAL ═══ */
.section-cta {
  padding-block: clamp(4rem, 7vw, 6rem);
  background: var(--verde-oscuro); position: relative; overflow: hidden;
}
.section-cta::before {
  content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 40%;
  background: rgba(201,149,42,0.05); clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%);
}
.cta-inner { display: grid; grid-template-columns: 1fr auto; gap: 3rem; align-items: center; position: relative; }
.cta-text h2 {
  font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700;
  color: var(--blanco); line-height: 1.22; margin-top: 0.5rem; margin-bottom: 0.75rem;
}
.cta-text p { font-size: 0.97rem; color: rgba(255,255,255,0.7); line-height: 1.7; max-width: 500px; }
.cta-btns { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 2rem; }
.cta-datos {
  padding: 1.4rem; background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1); border-radius: 2px; min-width: 220px;
}
.cta-datos-label {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(255,255,255,0.4); margin-bottom: 0.8rem; display: block;
}
.cta-datos a {
  display: block; font-size: 0.85rem; color: rgba(255,255,255,0.75);
  text-decoration: none; margin-bottom: 0.45rem; transition: color 0.2s;
}
.cta-datos a:hover { color: var(--dorado-suave); }

/* ═══ FOOTER ═══ */
footer {
  background: #111D17; padding: 2rem var(--pad-x);
  text-align: center; border-top: 1px solid rgba(255,255,255,0.06);
}
footer p { font-size: 0.8rem; color: rgba(255,255,255,0.35); line-height: 1.8; }
footer a { color: rgba(255,255,255,0.45); text-decoration: none; }
footer a:hover { color: var(--dorado); }
.footer-logo { height: 1.8rem; width: auto; margin-bottom: 1rem; opacity: 0.9; }
.footer-credit { font-size: 0.7rem; color: rgba(255,255,255,0.25); margin-top: 0.5rem; }
.footer-credit a { color: rgba(255,255,255,0.35); }
.footer-credit a:hover { color: var(--dorado); }

/* ═══ HERO — estructura compartida por las páginas de 2 columnas con botones.
   El tamaño/line-height del h1 varía por página según la longitud del titular:
   se sobreescribe localmente con .hero-h1 { font-size / line-height } cuando
   difiere del valor por defecto de aquí. ═══ */
.hero-base { background: var(--verde-oscuro); padding-top: 64px; }
.hero-base .hero-main {
  max-width: var(--max-w); margin-inline: auto; padding-inline: var(--pad-x);
  padding-top: clamp(2.5rem, 5vw, 4.5rem); padding-bottom: 2.5rem;
  display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start;
}
.hero-base.hero-asym .hero-main { grid-template-columns: 1.05fr 0.95fr; }
.hero-base .hero-eyebrow {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--dorado);
  display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1.4rem;
}
.hero-base .hero-eyebrow::before { content: ''; display: block; width: 28px; height: 1.5px; background: var(--dorado); }
.hero-base .hero-h1 {
  font-family: var(--font-display); font-size: clamp(1.5rem, 2.7vw, 2.35rem); font-weight: 700;
  line-height: 1.17; color: var(--blanco); letter-spacing: -0.02em; margin-bottom: 1.1rem;
}
.hero-base .hero-h1 em { font-style: italic; color: var(--dorado); }
.hero-base .hero-sub { font-size: 1rem; color: rgba(255,255,255,0.72); line-height: 1.7; margin-bottom: 2rem; }
.hero-base .hero-btns { display: flex; flex-wrap: wrap; gap: 1rem; }

/* ═══ "QUÉ ES" — layout de 2 columnas ═══ */
.qe-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.qe-col p { font-size: 0.97rem; color: var(--gris-texto); line-height: 1.78; margin-bottom: 0.85rem; }
.qe-col strong { color: var(--negro); font-weight: 600; }
.qe-col h3 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--verde-oscuro); margin: 1.6rem 0 0.85rem; line-height: 1.3; }
/* Variante con espaciado en cascada (margin-top) en vez de margin-bottom por párrafo — usada en
   páginas de servicios/mineria y servicios/geologia donde la columna de texto no lleva mecánica propia. */
.qe-text p { font-size: 0.97rem; color: var(--gris-texto); line-height: 1.78; margin-top: 0.9rem; }
.qe-text p + p { margin-top: 0.8rem; }

/* ═══ TIMELINE DE PROCESO — 4 pasos numerados ═══ */
.proceso-timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.pt-step { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 3px; padding: 1.5rem 1.3rem; }
.pt-n {
  width: 32px; height: 32px; border-radius: 50%; background: rgba(201,149,42,0.2);
  border: 1px solid rgba(201,149,42,0.4); color: var(--dorado-suave);
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem;
  display: flex; align-items: center; justify-content: center; margin-bottom: 1rem;
}
.pt-step h3 { font-family: var(--font-display); font-size: 0.96rem; font-weight: 600; color: var(--blanco); margin-bottom: 0.6rem; line-height: 1.35; }
.pt-step p { font-size: 0.83rem; color: rgba(255,255,255,0.62); line-height: 1.65; margin: 0; }

/* ═══ RESPONSIVE COMÚN ═══ */
@media (max-width: 960px) {
  .faq-layout { grid-template-columns: 1fr; gap: 2.5rem; }
  .faq-sidebar { position: static; }
  .cta-inner { grid-template-columns: 1fr; }
  .hero-base .hero-main, .qe-layout { grid-template-columns: 1fr; gap: 2.5rem; }
  .proceso-timeline { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .proceso-timeline { grid-template-columns: 1fr; }
}

/* ═══ CARD HEADING — patrón inline consolidado (Fase 4, Batch 2) ═══
   Selectores calificados con h3/h4: algunos de estos headings viven dentro de
   .qe-col / .pt-step, que ya tienen su propia regla "h3"/"h4" con especificidad
   (0,1,1). El style="" inline original siempre ganaba pese a eso; para preservar
   ese comportamiento sin depender del orden de las clases en el HTML, cada regla
   aquí se califica con el tipo de elemento para igualar esa especificidad — el
   orden de aparición en este archivo (después de .qe-col h3 / .pt-step h3)
   decide el empate a favor de estas reglas. */
h3.card-heading, h4.card-heading {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--verde-oscuro);
  margin-bottom: 0.85rem;
}
h3.card-heading--light, h4.card-heading--light {
  color: var(--blanco);
}
h3.card-heading--tight, h4.card-heading--tight {
  margin: 1.2rem 0 0.75rem;
}
h3.card-heading--md, h4.card-heading--md {
  font-size: 1.05rem;
}
h3.card-heading--lg, h4.card-heading--lg {
  font-size: 1.1rem;
  margin-bottom: 1rem;
  line-height: 1.3;
}
h3.card-heading--xl, h4.card-heading--xl {
  font-size: 1.15rem;
  margin-bottom: 1rem;
  line-height: 1.3;
}
h3.card-heading--on-dark-md, h4.card-heading--on-dark-md {
  font-size: 1.05rem;
  color: var(--blanco);
  margin-bottom: 1rem;
}
h3.card-heading--spaced, h4.card-heading--spaced {
  margin: 1.5rem 0 0.85rem;
}
h3.card-heading--spaced-sm, h4.card-heading--spaced-sm {
  margin: 1.5rem 0 0.75rem;
}
h3.card-heading--lg-spacious, h4.card-heading--lg-spacious {
  font-size: 1.1rem;
  margin-bottom: 1.2rem;
}
h3.card-heading--md-tight, h4.card-heading--md-tight {
  font-size: 1.05rem;
  line-height: 1.3;
}

/* ═══ SECCIONES GENÉRICAS — patrones de fondo/padding consolidados (Fase 4, Batch 3b Sub-lote A) ═══ */
.section-que-es { padding-block: var(--section-gap); background: var(--arena); }
.section-vs { padding-block: var(--section-gap); background: var(--blanco); }
.section-precios { padding-block: var(--section-gap); background: var(--arena); }
.section-func { padding-block: var(--section-gap); background: var(--blanco); }
.contacto-items { display: flex; flex-direction: column; gap: 0; margin-top: 2rem; }
.rango-nota { font-size: 0.72rem; color: var(--verde-medio); font-weight: 600; padding-top: 0.8rem; border-top: 1px solid var(--gris-borde); }
/* .section-proceso: base = variante oscura (8 archivos, mayoría); --arena = variante clara (4 archivos) */
.section-proceso { padding-block: var(--section-gap); background: var(--verde-oscuro); }
.section-proceso--arena { background: var(--arena); }
.precios-header { margin-bottom: 2.5rem; }
.precios-header p { font-size: 0.97rem; color: var(--gris-texto); line-height: 1.75; margin-top: 0.9rem; max-width: 660px; }
.proceso-header { margin-bottom: 3rem; }
.aut-item { background: var(--blanco); padding: 1.1rem 1.3rem; }
.def-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
@media (max-width: 960px) {
  .def-layout { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* ═══ FAMILIAS COMPARTIDAS — Fase 4, Batch 3b Sub-lote B ═══ */
/* Familia: factor (plataforma/precios, plataforma/index, tecnologia-sig) */
.factor-item { display: flex; gap: 0.9rem; align-items: flex-start; padding: 0.95rem 1.2rem; background: var(--blanco); border: 1.5px solid var(--gris-borde); border-radius: 2px; }
.factor-ico { width: 30px; height: 30px; border-radius: 50%; background: rgba(45,106,79,0.1); color: var(--verde-medio); font-size: 0.8rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.factor-item h4 { font-size: 0.9rem; font-weight: 600; color: var(--negro); margin-bottom: 0.2rem; }
.factor-item p { font-size: 0.85rem; color: var(--gris-texto); line-height: 1.65; margin: 0; }

/* Familia: comparativa-cats (plataforma/geovisor, plataforma/registro-produccion, plataforma/index) */
.comparativa-cats { display: flex; flex-direction: column; gap: 1px; background: var(--gris-borde); border: 1.5px solid var(--gris-borde); margin-top: 1rem; }
.cat-item { background: var(--blanco); padding: 1.1rem 1.3rem; }
.cat-tag { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--verde-medio); margin-bottom: 0.35rem; display: block; }
.cat-item.is-target .cat-tag { color: var(--dorado); }
.cat-item h4 { font-size: 0.9rem; font-weight: 600; color: var(--negro); margin-bottom: 0.3rem; }
.cat-item p { font-size: 0.82rem; color: var(--gris-texto); line-height: 1.6; margin: 0; }

/* Familia: func (5 archivos plataforma/*) */
.func-header { margin-bottom: 2.5rem; }
.func-header p { font-size: 0.97rem; color: var(--gris-texto); line-height: 1.75; margin-top: 0.9rem; max-width: 660px; }
.func-grid { display: flex; flex-direction: column; gap: 1px; background: var(--gris-borde); border: 1.5px solid var(--gris-borde); }
.func-item { background: var(--blanco); padding: 1.6rem 1.8rem; display: grid; grid-template-columns: 44px 1fr; gap: 1.3rem; align-items: start; }
.func-n { width: 44px; height: 44px; border-radius: 50%; background: rgba(201,149,42,0.1); border: 1.5px solid rgba(201,149,42,0.3); color: var(--dorado); font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; display: flex; align-items: center; justify-content: center; }
.func-item h3 { font-family: var(--font-display); font-size: 1.06rem; font-weight: 600; color: var(--verde-oscuro); margin-bottom: 0.5rem; line-height: 1.3; }
.func-item p { font-size: 0.92rem; color: var(--gris-texto); line-height: 1.75; margin-bottom: 0.6rem; }
.func-item p:last-child { margin-bottom: 0; }
.func-item ul { margin: 0.5rem 0 0.6rem 1.1rem; }
.func-item li { font-size: 0.87rem; color: var(--gris-texto); line-height: 1.7; margin-bottom: 0.3rem; }
.func-item strong { color: var(--negro); }
@media (max-width: 960px) {
  .func-item { grid-template-columns: 36px 1fr; gap: 1rem; }
  .func-n { width: 36px; height: 36px; font-size: 0.9rem; }
}

/* Familia: rango (plataforma/precios, plataforma/index, tecnologia-sig).
   .rangos-grid: solo propiedades comunes a los 3; plataforma/precios agrega
   margin-bottom:3rem localmente (única divergencia, no vale la pena un modificador). */
.rango-tag { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dorado); margin-bottom: 0.7rem; }
.rangos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }
@media (max-width: 960px) {
  .rangos-grid { grid-template-columns: 1fr; }
}
/* .rango-card.is-destacado: versión con position:relative, idéntica en precios y tecnologia-sig.
   plataforma/index.njk mantiene su propia versión local (sin position:relative), no es la misma variante. */
.rango-card.is-destacado { border-color: var(--dorado); position: relative; }

/* Familia: vs (5 archivos plataforma/*). .vs-card-tag: versión "verde-medio",
   idéntica en 4 archivos. plataforma/index.njk mantiene su propia versión local
   (color #b23b3b + modificador .is-positive exclusivo), no migra. */
.vs-cards { display: flex; flex-direction: column; gap: 1px; background: var(--gris-borde); border: 1.5px solid var(--gris-borde); margin-top: 2rem; }
.vs-card { background: var(--blanco); padding: 1.6rem 1.8rem; }
.vs-card-tag { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--verde-medio); margin-bottom: 0.4rem; display: block; }
.vs-card h3 { font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; color: var(--verde-oscuro); margin-bottom: 0.6rem; line-height: 1.3; }
.vs-card p { font-size: 0.9rem; color: var(--gris-texto); line-height: 1.75; margin: 0; }
.vs-card strong { color: var(--negro); }

/* Familia: section-def (9 archivos). Hijos p/strong idénticos en 7 de 9
   (todos excepto blog/index.njk y fairmined/que-es-fairmined, que no los usan). */
.section-def { padding-block: var(--section-gap); background: var(--blanco); }
.section-def p { font-size: 0.97rem; color: var(--gris-texto); line-height: 1.82; margin-bottom: 1rem; }
.section-def strong { color: var(--negro); font-weight: 600; }

/* ═══ Batch 3b Sub-lote C ═══ */
/* .dif-item variante clara (servicios/geologia/topografia, servicios/tecnologia-sig), byte-idéntica */
.dif-item { background: var(--blanco); padding: 1rem 1.3rem; }
.dif-item h4 { font-size: 0.87rem; font-weight: 600; color: var(--verde-oscuro); margin-bottom: 0.25rem; }
.dif-item p { font-size: 0.81rem; color: var(--gris-texto); line-height: 1.6; margin: 0; }