/* ================================================================
   RAMFER — Sistema tipográfico unificado · css/ramfer-type.css
   Base global: html { font-size: 18px }
   Se carga DESPUÉS del <style> local en cada página.
   Igual especificidad → gana por orden de cascada.
   ================================================================

   JERARQUÍA COMPLETA
   ──────────────────
   H1 hero        clamp(2rem, 5.5vw, 4rem)           por página
   H2 sección     clamp(1.7rem, 3.2vw, 3rem)         por página
   ─────────────────────────────────────────────────────────────
   H3 card        clamp(1.2rem, 1.6vw, 1.45rem)  700   21–26 px
   H3 lista       clamp(1.1rem, 1.4vw, 1.3rem)   700   20–23 px
   Body / desc    1rem · line-height 1.72              18 px
   Soporte        0.89rem · line-height 1.6             16 px
   Footer / UI    0.83rem · line-height 1.7             15 px
   Nav / util     0.78rem                               14 px
   Labels / tags  0.67–0.72rem                       ya en página
   ================================================================ */


/* ──────────────────────────────────────────────────────────────
   0. BASE FLUIDA — raíz proporcional al ancho de pantalla.
   Como TODO el texto está en rem, escalar la raíz escala TODA la
   tipografía del sitio de forma proporcional, en un solo lugar.
     · ~15px en móvil (≤360px)
     · crece linealmente con el ancho
     · tope 18px en desktop (≥1360px)
   Esto SOBRESCRIBE el `html{font-size:18px}` fijo de cada página
   porque ramfer-type.css se carga después (gana por orden de cascada).
   ────────────────────────────────────────────────────────────── */

/* Escalado perceptible en móvil/tablet PERO llegando a 18px pronto
   (~960px) para que cualquier escritorio/laptop tenga el tamaño pleno
   (como la versión anterior; antes llegaba a 18px hasta 1220px y el
   contenido se veía más chico en pantallas normales):
     · 14px  en móvil  (≤≈390px)
     · sube de forma lineal con el ancho
     · 18px  ya desde ≈960px (escritorio pleno)
   Mantiene ≈22% de diferencia teléfono↔escritorio. */
html { font-size: clamp(14px, 11.26px + 0.7vw, 18px); }


/* ──────────────────────────────────────────────────────────────
   1. NAV DROPDOWN
   ────────────────────────────────────────────────────────────── */

.ndi-title            { font-size: 0.94rem; }
.ndi-desc             { font-size: 0.78rem; line-height: 1.45; }
.nav-mega-card-title  { font-size: 1rem; }
.nav-mega-card-desc   { font-size: 0.83rem; line-height: 1.5; }


/* ──────────────────────────────────────────────────────────────
   2. H3 CARD — contexto amplio (cards con espacio propio)
      Clases: Blindaje, casos, fases, testimonios, bento, features
   ────────────────────────────────────────────────────────────── */

.bl-card-name,
.caso-card h3,
.caso-item h3,
.fase-card-title,
.proceso-card-title,
.tp-title,
.bento-card-title,
.feat-card h4          {
  font-size: clamp(1.2rem, 1.6vw, 1.45rem);
  font-weight: 700;
  line-height: 1.25;
}


/* ──────────────────────────────────────────────────────────────
   3. H3 LISTA — contexto compacto (filas, listas, comparativas)
   ────────────────────────────────────────────────────────────── */

.svc-name,
.srv-link-card-title,
.dif-row-title,
.ir-col-body strong    {
  font-size: clamp(1.1rem, 1.4vw, 1.3rem);
  font-weight: 700;
  line-height: 1.3;
}


/* ──────────────────────────────────────────────────────────────
   4. BODY / DESCRIPCIÓN PRINCIPAL — 1rem = 18px
      Incluye toda descripción, párrafo, bullet de contenido
   ────────────────────────────────────────────────────────────── */

.bl-card-desc,
.bl-mod-desc,
.caso-card p,
.caso-item-desc,
.met-step-desc,
.fase-card-desc,
.tp-body,
.tp-feat-body,
.mod-bullet-body,
.mod-prose p,
.mod-callout p,
.mod-list li,
.proceso-card-desc,
.ir-col-body span,
.ir-lead,
.svc-desc,
.srv-bullet,
.srv-prose p,
.srv-link-card-desc,
.hero-sub-desc,
.cta-band-left p,
.dif-list li,
.dif-row-desc,
.mision-col p,
.feat-card p,
.disclaimer-strip p,
.prob-callout-txt       {
  font-size: 1rem;
  line-height: 1.72;
}

/* Clase utilitaria .body (varias páginas) */
.body                  { font-size: 1rem; line-height: 1.72; }


/* ──────────────────────────────────────────────────────────────
   5. SOPORTE / STAT LABELS — 0.89rem ≈ 16px
      Texto secundario: bullets pequeños, etiquetas de stats
   ────────────────────────────────────────────────────────────── */

.fase-pt               {
  font-size: 0.89rem;
  line-height: 1.6;
}

/* LEYENDAS DE STATS (al lado/abajo de un número grande) — TODAS al mismo
   tamaño 0.83rem (15px) para consistencia entre secciones e índice/blindaje/
   siniestros/servicios. (.hss-txt y .hp-txt ya están en 0.83rem más abajo.) */
.mod-stat-lbl,
.slbl,
.srv-stat-lbl,
.bi-stat-txt           {
  font-size: 0.83rem;
  line-height: 1.5;
}

/* SUB-TÍTULO de bullet — título de cada punto, SIEMPRE mayor que su body.
   (Antes estaban en Soporte 0.89rem y quedaban más chicos que la descripción
    de 1rem → jerarquía invertida. Ahora se elevan por encima del body.) */
.mod-list li strong,
.mod-bullet-body strong {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 4px;
}


/* ──────────────────────────────────────────────────────────────
   6. FOOTER / UI SUPPORT — 0.83rem ≈ 15px
   ────────────────────────────────────────────────────────────── */

.foot-brand p,
.foot-col a,
.foot-contact-item,
.drawer-sub            {
  font-size: 0.83rem;
  line-height: 1.7;
}


/* ──────────────────────────────────────────────────────────────
   7. CONVERSIONES px → rem en elementos especiales
   ────────────────────────────────────────────────────────────── */

/* (.hp-txt se unifica con las demás leyendas de stats — ver sección 12) */

/* Casos: lista lateral de categorías */
.casos-cat             { font-size: 0.89rem; }

/* Casos: disclaimer list */
.casos-disclaimer-list li { font-size: 0.78rem; }


/* ──────────────────────────────────────────────────────────────
   9. CHART — texto del gráfico ilustrativo (BI section)
   ────────────────────────────────────────────────────────────── */

.chart-title       { font-size: 0.67rem; }
.chart-row-label   { font-size: 0.83rem; }
.chart-row-sub     { font-size: 0.72rem; }
.chart-delta-lbl   { font-size: 0.83rem; }
.case-concept      { font-size: 0.83rem; }
.case-note         { font-size: 0.72rem; }


/* ──────────────────────────────────────────────────────────────
   10. FONDOS OSCUROS — texto legible sobre dark bg
   ────────────────────────────────────────────────────────────── */

/* Crime stats card: aumenta opacidad de gris a blanco visible */
.crime-ed-txt      { font-size: 0.83rem; color: rgba(255,255,255,0.88); line-height: 1.6; }

/* Proceso cards (01/02/03): texto casi invisible → legible */
.proceso-card-desc { color: rgba(255,255,255,0.82); }

/* Proceso — bullets bajo la descripción (Vacíos de cobertura, Métricas...) :
   eran gris 0.5 y muy chicos → blanco legible y un punto más grandes */
.proceso-pt        { font-size: 0.94rem; color: rgba(255,255,255,0.85); line-height: 1.6; }

/* Proceso — subtítulo de sección "Cada etapa asegura..." (era gris 0.45) */
.proceso-hd .body  { color: rgba(255,255,255,0.82); font-size: 1rem; line-height: 1.72; }

/* Comparativa "Sin RAMFER vs Con RAMFER" — subtítulo en dark bg */
.ad-sec .body      { color: rgba(255,255,255,0.82); font-size: 1rem; line-height: 1.72; }

/* Comparativa — filas (Sin/Con RAMFER): 0.89rem ≈ 16px (-2px del body,
   caso especial pedido por el cliente para que la tabla no se deforme) */
.ad-row            { font-size: 0.89rem; line-height: 1.55; }

/* Hero stat labels bajo el número */
.hss-txt           { font-size: 0.83rem; color: rgba(255,255,255,0.82); }


/* ──────────────────────────────────────────────────────────────
   11. FAQ — preguntas y respuestas al tamaño del body
   ────────────────────────────────────────────────────────────── */

/* Pregunta del FAQ — es un título, sube en la escala (≈ 19–22px) */
.faq-btn           { font-size: clamp(1.05rem, 1.4vw, 1.2rem); font-weight: 600; }
.faq-body-inner p  { font-size: 1rem; line-height: 1.72; }


/* ──────────────────────────────────────────────────────────────
   12. AUDIT COMPLETO — clases faltantes o bloqueadas por !important
   ────────────────────────────────────────────────────────────── */

/* Hero stat sub-labels en dark bg — necesita !important por regla en index.html */
.hp-txt               { font-size: 0.83rem !important; color: rgba(255,255,255,0.82) !important; }

/* Stat label bajo número grande (+20, etc.) */
.bl-split-stat-label  { font-size: 0.83rem; line-height: 1.4; }

/* Callout de problema/estadística */
.prob-callout-txt     { font-size: 1rem; line-height: 1.72; }

/* Pie del stat 47% ("de reclamaciones... rechazadas..."): +1.5px → 0.97rem (17.5px) */
.prob-stat-foot       { font-size: 0.97rem; line-height: 1.55; }

/* Etiqueta dentro de métrica de card (100%, etc.) */
.bl-card-metric-label { font-size: 0.72rem; }

/* Pills de navegación de sección (NÓMINA / FISCAL / INVENTARIOS) */
.ap-pill              { font-size: 0.72rem; }

/* Casos — resultado del caso y metadata */
.caso-item-result-lbl { font-size: 0.83rem; line-height: 1.6; }
.caso-item-meta       { font-size: 0.72rem; }

/* Nosotros — rol/credencial bajo cada nombre del equipo */
.cv-item-sub          { font-size: 0.83rem; line-height: 1.45; }

/* Nosotros — nota al pie del equipo (era opacidad 0.30, casi invisible) */
.team-note            { font-size: 0.83rem; color: rgba(13,13,13,0.55); }

/* TERE — tarjetas de industrias (título + descripción, eran 15 / 13.5px) */
.ind-title            { font-size: 1.1rem; font-weight: 700; line-height: 1.3; }
.ind-desc             { font-size: 1rem; line-height: 1.72; }

/* Política de Privacidad — cuerpo legal (era 0.9375rem ≈ 16.9px) */
.privacy-sec p        { font-size: 1rem; line-height: 1.85; }
.privacy-sec li       { font-size: 1rem; line-height: 1.85; }
.privacy-updated      { font-size: 0.83rem; }

/* Drawer de contacto — valor de cada dato (era 12px) */
.di-txt               { line-height: 1.55; }

/* Footer — nota de alianza CVF (clase .foot-cvf, antes inline 11px) */
.foot-cvf             { font-size: 0.78rem; }

/* Eyebrow de heroes de subpágina (Blindaje/Servicios/Casos/Nosotros/TERE/
   Siniestros/Privacidad) — estaba en 11px fijo en cada página, ahora escala */
.hero-sub-eyebrow     { font-size: 0.67rem; }

/* Matriz de riesgo IR — título y leyenda (eran 10 / 11px) */
.matrix-title         { font-size: 0.78rem; }
.matrix-legend-item   { font-size: 0.83rem; }

/* Badge naranja sobre imagen (Nómina/sin contingencias, T.E.R.E./cobertura real) */
.srv-img-badge        { font-size: 1rem; }
.srv-img-badge span   { font-size: 0.83rem; }

/* Nosotros — badge circular sobre foto */
.circ-badge           { font-size: 0.83rem; }
.circ-badge span      { font-size: 0.72rem; }

/* Drawer de contacto — al tamaño del footer (.foot-contact-item = 0.83rem) */
.di-txt               { font-size: 0.89rem; }
.di-txt strong        { font-size: 0.72rem; }

/* Servicios — tag de sección "Certeza Financiera · 0X" (era 9px) */
.srv-tag              { font-size: 0.78rem; }
/* Servicios — tag "Programa completo" del link-card (era 9px) */
.srv-link-card-tag    { font-size: 0.78rem; }

/* Index — fila de caso: título SIEMPRE por encima de su descripción */
.caso-row-title       { font-size: clamp(1.2rem, 1.6vw, 1.35rem); line-height: 1.25; }
.caso-row-result      { font-size: 1rem; line-height: 1.65; }

/* Nosotros — nombre de perfil del equipo: mín por encima del body */
.team-profile-name    { font-size: clamp(1.2rem, 1.6vw, 1.45rem); line-height: 1.2; }

/* Etiquetas de categoría NÓMINA/FISCAL/DIAGNÓSTICO/SINIESTROS/INVENTARIOS
   (svc-list en index): eran 9px → 0.78rem (14px) */
.svc-tag              { font-size: 0.78rem; }

/* Metodología (index) — PASO 01/02 (eyebrow) y etiqueta Pre-siniestro/Modelación */
.met-step-num         { font-size: 0.72rem; }
.met-step-tag         { font-size: 0.72rem; }

/* Metodología — título de paso: mín por encima del body (evita pelea con desc) */
.met-step-title       { font-size: clamp(1.2rem, 2vw, 1.4rem); line-height: 1.25; }

/* ──────────────────────────────────────────────────────────────
   13. BOTONES — +2px respecto al original, todo en rem
   ────────────────────────────────────────────────────────────── */

/* CTA principales y secundarios (Blindaje 360°, Solicitar asesoría, etc.) */
.btn-primary,
.btn-secondary,
.btn-dark,
.btn-outline-dark,
.btn-blue,
.btn-bi,
.cf-submit             { font-size: clamp(0.95rem, 1vw, 1.05rem); }

/* Botón naranja del navbar y pre-footer (SOLICITAR ASESORÍA) — mismo tamaño */
.nav-cta,
.pf-cta                { font-size: 0.83rem; }

/* Toggle de idioma (ES): 11px → 0.72rem (13px) */
.lang-toggle,
.lt-code               { font-size: 0.72rem; }

/* Nosotros — trayectoria/formación: ítem principal > sub > años (jerarquía) */
.cv-item-main         { font-size: 1rem; line-height: 1.4; }
.cv-item-years        { font-size: 0.72rem; }


/* ──────────────────────────────────────────────────────────────
   14. AUDITORÍA DE ESCALA (sesión 10) — etiquetas/meta que vivían
       sueltas en cada página con valores distintos (9/10/11px) y que
       en realidad son "lo mismo". Se unifican a los peldaños de la
       escala para que se manejen desde un solo lugar.

       ESCALERA DE REFERENCIA (base 18px):
         Display H1/H2/H3-grandes ... clamp+vw  → POR PÁGINA (por diseño)
         Números/stats grandes ....... clamp+vw  → POR PÁGINA (por diseño)
         Tag de identidad ............ 0.78rem (14px)  ← este bloque
         Meta / contador / link fino . 0.72rem (13px)  ← este bloque
         Soporte pequeño ............. 0.83rem (15px)  ← este bloque
       (Los internos de widgets — formulario .cf, preview WhatsApp
        .wap, gráficas/diagramas .chart .tl .supply .case .crime-ed
        .bi-stat-src, drawer, footer legal — se dejan con su tamaño
        fijo local a propósito: son UI autocontenida.)
   ────────────────────────────────────────────────────────────── */

/* TAGS DE IDENTIDAD (módulo / tarjeta / sección) — igual que .svc-tag.
   Antes: .bl-card-tag 9px (·Business Interruption), .caso-row-tag 9px,
   .cta-band-tag 10px, .news-cat 9px, .mod-tag 9px, etc. → ahora 14px. */
.bl-card-tag,
.mod-tag,
.caso-row-tag,
.caso-tag,
.caso-item-tag,
.cta-band-tag,
.dif-col-label,
.news-cat,
.bl-feat-badge,
.tp-eye                { font-size: 0.78rem; }

/* META / CONTADORES / LINKS FINOS */
.caso-item-industry,
.casos-cat-count,
.caso-item-cta,
.caso-row-cta,
.casos-sidebar-lbl,
.casos-disclaimer-title,
.news-date,
.news-link             { font-size: 0.72rem; }

/* SOPORTE PEQUEÑO (texto de apoyo en tarjetas) */
.news-excerpt,
.caso-result           { font-size: 0.83rem; }

/* EYEBROW de sección (etiqueta naranja "/ METODOLOGÍA", "/ BLINDAJE 360°",
   "CERTEZA FINANCIERA", etc.) — antes 11px suelto en cada página. Se sube
   ~5px (a 0.89rem ≈ 16px en escritorio) y se centraliza para que TODAS las
   secciones de TODAS las páginas compartan el mismo tamaño. Escala con el
   root, así que en móvil baja proporcionalmente. NO afecta a .hero-eyebrow
   ni .hero-sub-eyebrow (son sus propias clases). */
.eyebrow               { font-size: 0.89rem; }


/* ──────────────────────────────────────────────────────────────
   8. MOBILE ≤ 768px — preservar jerarquía en pantallas pequeñas
   ────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {

  /* H3 card — nunca colapsar al mismo tamaño que body */
  .bl-card-name,
  .caso-card h3,
  .caso-item h3,
  .fase-card-title,
  .proceso-card-title,
  .tp-title,
  .bento-card-title,
  .feat-card h4          { font-size: 1.2rem; }

  .svc-name,
  .srv-link-card-title,
  .dif-row-title,
  .ir-col-body strong    { font-size: 1.1rem; }

  /* Body — siempre 1rem en mobile */
  .bl-card-desc,
  .caso-card p,
  .caso-item-desc,
  .met-step-desc,
  .fase-card-desc,
  .tp-body,
  .tp-feat-body,
  .mod-bullet-body,
  .mod-prose p,
  .mod-list li,
  .proceso-card-desc,
  .svc-desc,
  .srv-bullet,
  .srv-prose p,
  .hero-sub-desc,
  .cta-band-left p,
  .dif-list li,
  .dif-row-desc,
  .mision-col p,
  .feat-card p,
  .disclaimer-strip p    { font-size: 1rem; }
}