/* ═══════════════════════════════════════════════════════════
   RUTH · PALETA DE COLORES OFICIAL - HOME-PEOPLE (v4.3)
   Cambios acumulados:
   - Hero a ancho completo (rompe el límite del .wrap)
   - Botón .btn-magenta MACIZO para "Elegir mi Trámite"
   - Botones .btn-demo con el dorado de marca (--gold)
   - Sección "CÓMO FUNCIONA" rediseñada como columnas editoriales
   - Título de "CÓMO FUNCIONA" más grande (modificador BEM)
   - Línea divisora de ancho completo bajo el título
   - Número, título y párrafo de cada paso CENTRADOS en su columna
     (en móvil ≤560px vuelven a alinearse a la izquierda)
   - Tarjeta de transparencia en tres bloques bajo los pasos
   - Sección "PRECIOS" eliminada por completo
   - Nueva sección "POR QUÉ RUTH" (cabecera 2 columnas + grid de
     4 valores en cursiva)
   - Ajuste de "POR QUÉ RUTH": cabecera 2fr/1fr, align-items start,
     título con max-width para partirse en 2 líneas como la referencia
═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════
   01 · TOKENS DE PALETA OFICIAL (MODO OSCURO BY DEFAULT)
═══════════════════════════════════════ */
:root {
  --gold: #FFEDA8;
  --gold-bright: #FFF6D9;
  --gold-ink: #FFF6D9;
  --gold-border: transparent;
  --dark-text: #0C0E0F;

  --bg: #0C0E0F;
  --bg-2: #17191C;
  --bg-3: #22262A;
  --footer-bg: #07080A;

  --text-1: #FFFFFF;
  --text-1-rgb: 255,255,255;
  --text-2: rgba(255,255,255,.80);
  --text-3: rgba(255,255,255,.56);

  --border: rgba(255,255,255,.09);
  --border-strong: rgba(255,255,255,.16);

  --cat-persona: #C42A8E;
  --cat-persona-rgb: 255,92,92;

  --f-display: 'Abril Fatface', Georgia, serif;
  --f-body: 'Brother 1816', system-ui, -apple-system, sans-serif;

  --gold-rgb: 255,237,168;
  --ambient-rgb: 255,237,168;

  /* Texto magenta aclarado para usarse sobre fondos oscuros.
     El magenta puro (#C42A8E) da 2,95:1 sobre fondos oscuros:
     por debajo del 4,5:1 que pide WCAG AA. Este lo pasa. */
  --magenta-texto: #F07FC4;

  /* Panel crema de la tarjeta de transparencia. Va con color fijo
     en ambos temas porque en la referencia se ve igual de claro
     sobre fondo oscuro que sobre fondo blanco. */
  --transparencia-bg: #E8DEB8;
  --transparencia-text: #1A1D20;
  --transparencia-tag: #4A4A3F;
}

/* ═══════════════════════════════════════
   02 · TOKENS DE PALETA OFICIAL (MODO CLARO)
═══════════════════════════════════════ */
:root[data-theme="light"] {
  --gold: #FFEDA8;
  --gold-bright: #FFF6D9;
  --gold-ink: #8A6B1F;
  --gold-border: #B8860B;
  --dark-text: #0C0E0F;

  --bg: #FFFFFF;
  --bg-rgb: 255,255,255;
  --bg-2: #F7F5EF;
  --bg-3: #EFEBE1;
  --footer-bg: #EFEAE0;

  --text-1: #14171A;
  --text-1-rgb: 20,23,26;
  --text-2: rgba(20,23,26,.80);
  /* Antes rgba(20,23,26,.58): 4,2:1 sobre las tarjetas crema de la
     sección de precios (ya eliminada). Sólido y algo más oscuro
     pasa en todos los fondos claros de esta página. */
  --text-3: #565B5F;

  --border: rgba(20,23,26,.10);
  --border-strong: rgba(20,23,26,.18);

  --cat-persona: #C42A8E;
  /* Era 214,47,47 — un ROJO — mientras el hex de al lado es magenta.
     Los dos deberían ser el mismo color, y cada sitio que usaba el
     rgba() pintaba un fondo rojizo bajo un texto magenta. */
  --cat-persona-rgb: 196,42,142;

  --ambient-rgb: 138,107,31;

  /* En modo claro el magenta aclarado no contrasta: sobre blanco
     se necesita la versión oscura. */
  --magenta-texto: #A01F73;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background: var(--bg);
  color: var(--text-1);
  font-family: var(--f-body);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.wrap { max-width: 1220px; margin: 0 auto; padding: 0 40px; }
::selection { background: var(--gold); color: var(--dark-text); }
h1,h2,h3 { font-family: var(--f-display); font-weight: 600; margin: 0; }
p { margin: 0; }

.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1); }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ═══════════════════════════════════════
   NAVBAR PRINCIPAL
   La barra entera —cabecera, enlaces, acceder, hamburguesa y menú del
   teléfono— vive en components/navbar/navbar-landing.css, que cargan
   las dos portadas y las tres pantallas de demostración. Aquí abajo se
   queda solo lo que esta portada usa fuera de la barra.
═══════════════════════════════════════ */
nav.main-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 0;
  position: relative;
}

.nav-logo {
  display: block;
  flex-shrink: 0;
}

.nav-logo img {
  height: 100%;
  width: auto;
}

.logo-light { display: none; }
:root[data-theme="light"] .logo-dark { display: none; }
:root[data-theme="light"] .logo-light { display: block; }

.theme-toggle {
  position: relative;
  width: 52px;
  height: 28px;
  border-radius: 100px;
  border: 1px solid var(--border-strong);
  background: var(--bg-3);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px;
  flex-shrink: 0;
  transition: .2s;
}

.theme-toggle:hover { border-color: var(--gold-ink); }
.theme-toggle i { font-size: 13px; position: relative; z-index: 1; transition: .2s; }
.theme-toggle .tt-sun { color: var(--text-3); }
.theme-toggle .tt-moon { color: var(--gold-ink); }

.theme-toggle .tt-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-bright));
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}

.theme-toggle.is-light .tt-thumb { transform: translateX(24px); }
.theme-toggle.is-light .tt-sun { color: var(--gold-ink); }
.theme-toggle.is-light .tt-moon { color: var(--text-3); }

/* ═══════════════════════════════════════
   BOTONES
═══════════════════════════════════════ */
.btn-primary {
  background: var(--gold); color: var(--dark-text); padding: 15px 28px; border-radius: 12px; border: 1.5px solid transparent;
  font-weight: 700; font-size: 14.5px; text-decoration: none; display: inline-flex; align-items: center; gap: 9px;
  transition: .2s; cursor: pointer;
}
.btn-primary:hover { background: var(--gold-bright); transform: translateY(-2px); }
.btn-primary i { font-size: 18px; }
:root[data-theme="light"] .btn-primary { border-color: var(--gold-border); box-shadow: 0 10px 24px -14px rgba(184,134,11,.5); }

.btn-primary.btn-shine {
  color: var(--dark-text) !important;
}

.btn-ghost {
  background: rgba(var(--text-1-rgb),.06); color: var(--text-1); padding: 15px 28px; border-radius: 12px;
  border: 1px solid var(--border-strong); font-weight: 600; font-size: 14.5px; text-decoration: none;
  display: inline-flex; align-items: center; gap: 9px; transition: .2s; backdrop-filter: blur(6px); cursor: pointer;
}
.btn-ghost:hover { background: rgba(var(--text-1-rgb),.12); }

/* ── BOTÓN MAGENTA ────────────────────────────────────────────────
   Mismo tratamiento que el botón principal de home-business ("Postula
   ahora"): fondo magenta macizo, texto blanco, sin translucidez. Así
   el CTA de "Elegir mi Trámite" del hero tiene el mismo peso visual
   que el de la otra portada.
   Se conservan los tokens --cat-persona y --cat-persona-rgb para que
   el color siga viniendo de la paleta. */
.btn-magenta {
  background: var(--cat-persona);
  color: #FFFFFF;
  padding: 15px 28px;
  border-radius: 12px;
  border: 1.5px solid transparent;
  font-weight: 700;
  font-size: 14.5px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  transition: background .2s, transform .2s, border-color .2s;
  cursor: pointer;
}

.btn-magenta:hover {
  /* Un punto más claro que --cat-persona al pasar el mouse. */
  background: #E6007A;
  transform: translateY(-2px);
}

.btn-magenta:focus-visible {
  outline: 2px solid var(--cat-persona);
  outline-offset: 2px;
}

:root[data-theme="light"] .btn-magenta {
  background: var(--cat-persona);
  color: #FFFFFF;
  border-color: transparent;
  box-shadow: 0 10px 24px -14px rgba(var(--cat-persona-rgb), .6);
}

.btn-shine { position: relative; overflow: hidden; }
.btn-shine::before {
  content: ""; position: absolute; top: 0; left: -60%; width: 35%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.65), transparent);
  transform: skewX(-20deg);
}
.btn-shine:hover::before { animation: btnShine .9s ease-in-out; }
@keyframes btnShine { from { left: -60%; } to { left: 130%; } }

/* ── BOTÓN DEMO (DORADO DE MARCA) ─────────────────────────────────
   Mismo tratamiento que "Demo abogado" / "Demo notaría" en la portada
   de negocios: fondo dorado translúcido, borde dorado y texto blanco
   (oscuro en modo claro). Antes este botón usaba un amarillo suelto
   (#FFD60A) fuera de paleta; ahora usa --gold y --gold-rgb. */
.btn-ghost.btn-demo {
  background: rgba(var(--gold-rgb), .12);
  border-color: var(--gold);
  color: var(--text-1);
}

.btn-ghost.btn-demo i {
  color: var(--gold);
  font-size: 18px;
}

.btn-ghost.btn-demo:hover {
  background: rgba(var(--gold-rgb), .22);
  border-color: var(--gold-bright);
}

:root[data-theme="light"] .btn-ghost.btn-demo {
  background: rgba(var(--gold-rgb), .35);
  border-color: var(--gold-border);
  color: var(--dark-text);
}

:root[data-theme="light"] .btn-ghost.btn-demo i {
  color: var(--gold-ink);
}

:root[data-theme="light"] .btn-ghost.btn-demo:hover {
  background: rgba(var(--gold-rgb), .55);
  border-color: var(--gold-ink);
}

/* ═══════════════════════════════════════
   HERO CENTRADO Y METRICAS
═══════════════════════════════════════ */
.hero-c { position: relative; padding: 30px 0 60px; }

/* El hero rompe el límite global del .wrap para que la foto de fondo
   llegue casi al borde de la ventana. Solo esta sección: el resto de
   la página sigue con 1220px de ancho. */
.hero-c .wrap {
  max-width: none;
  padding: 0 16px;
}

.hero-c-frame {
  position: relative; border-radius: 20px; overflow: hidden; padding: 100px 30px 60px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  border: 1px solid var(--border-strong); background: var(--bg-2);
}
.hero-c-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-c-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .22; }
.hero-c-bg::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle, transparent 20%, var(--bg-2) 90%);
}

.hero-c-inner { position: relative; z-index: 2; max-width: 800px; margin: 0 auto; }
.hero-title {
  font-family: var(--f-display); font-size: clamp(2.4rem, 5vw, 4.5rem);
  font-weight: 600; line-height: 1.1; margin-bottom: 20px; color: var(--text-1);
}
.hero-title em { font-style: italic; font-weight: 500; color: var(--gold); }
:root[data-theme="light"] .hero-title em {
  color: var(--text-1);
  background: linear-gradient(180deg, transparent 65%, var(--gold) 65%);
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

.hero-subtitle {
  font-size: clamp(1rem, 1.5vw, 1.15rem); color: var(--text-2);
  max-width: 620px; margin: 0 auto 36px; line-height: 1.7;
}

/* ── ELEGIR EL TRÁMITE, EN EL ENCABEZADO ───────────────────────────
   Cuatro botones, uno por trámite, lo primero que se ve al entrar.
   Antes había que bajar 1.283px para encontrar el primer enlace que
   empezara un trámite; ahora está arriba, sin scroll.

   Van antes de los enlaces sueltos («Ver todos», «Ver precios») a
   propósito: lo que la mayoría viene a hacer es un trámite concreto,
   no a explorar. */
.hero-tramites {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  max-width: 620px;
  margin: 0 auto 24px;
}

.hero-tramites a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;               /* de sobra para un dedo */
  padding: 12px 18px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--text-1);
  text-decoration: none;
  font-size: .92rem;
  font-weight: 600;
  text-align: left;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.hero-tramites a:hover {
  border-color: var(--gold);
  background: var(--bg-3);
  transform: translateY(-1px);
}

.hero-tramites a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* El precio en su propia columna, alineado a la derecha: así los cuatro
   se comparan de un vistazo sin tener que leerlos enteros. */
.hero-tramites .ht-precio {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  /* --gold-texto, no --gold. El dorado de marca es una superficie: como
     letra sobre la tarjeta clara medía 1,07:1, o sea invisible. Y eran
     los cuatro precios de los cuatro botones por los que entra el
     negocio. --gold-texto cambia con el tema; --gold no. */
  color: var(--gold-texto);
  font-weight: 700;
}

@media (max-width: 680px) {
  .hero-tramites { grid-template-columns: 1fr; max-width: 420px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-tramites a { transition: none; }
  .hero-tramites a:hover { transform: none; }
}

.hero-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 60px; }

.hero-stats {
  display: flex; gap: clamp(30px, 5vw, 80px); justify-content: center;
  padding-top: 36px; border-top: 1px solid var(--border); width: 100%; max-width: 700px;
}
.stat-num { font-family: var(--f-display); font-size: clamp(2rem, 3.5vw, 3rem); color: var(--text-1); line-height: 1; }
.stat-label { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); margin-top: 6px; font-weight: 700; }

/* ═══════════════════════════════════════
   SECCIÓN GENÉRICA & EFECTOS FONDOS
═══════════════════════════════════════ */
.section { padding: 90px 0; position: relative; }
.section-eyebrow {
  font-size: 12.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--gold-ink); margin-bottom: 12px;
}
.section-heading h2 { font-size: clamp(1.4rem,2.6vw,2rem); line-height: 1.22; margin: 0; }
.section-heading h2 em { font-style: italic; color: var(--gold-ink); padding-bottom: 4px; border-bottom: 2px solid var(--gold); }
:root[data-theme="light"] .section-heading h2 em {
  font-weight: 500; color: var(--dark-text); border-bottom: none;
  background: linear-gradient(180deg, transparent 62%, var(--gold) 62%);
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.section-desc { font-size: 15.5px; color: var(--text-2); max-width: 580px; margin-top: 16px; }
.divider { width: 48px; height: 2px; background: var(--text-1); margin: 24px 0; position: relative; }
.divider::after { content:''; position:absolute; width:6px; height:6px; border-radius:50%; background:var(--gold-ink); top:-2px; right:-6px; }

.section-fx-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.section-fx-bg span { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .18; }
.fx-blob1 { width: 340px; height: 340px; background: var(--cat-persona); top: -80px; left: -60px; }
.fx-blob2 { width: 300px; height: 300px; background: var(--gold); bottom: -60px; right: -40px; }

/* ═══════════════════════════════════════
   STEPS-FLOW (CÓMO FUNCIONA)
   Layout editorial de 4 columnas: número magenta arriba, título
   en negrita, párrafo siempre visible debajo. Sin tarjetas, sin
   hovers, sin despliegue. La información se lee completa de un
   vistazo, como una ficha técnica.

   Número, título y párrafo van centrados dentro de cada columna.
   En móvil (≤560px) se alinean a la izquierda para que los
   párrafos largos se lean mejor.
═══════════════════════════════════════ */

/* El encabezado de esta sección va con un modificador para no
   afectar al resto de .section-heading del sitio. El título sube
   de tamaño porque comparte espacio con la línea divisoria y el
   grid de 4 columnas: necesita más peso visual. */
.section-heading--proceso h2 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.1;
}

/* Línea horizontal que separa la cabecera del grid de pasos. */
.steps-divider {
  width: 100%;
  height: 1px;
  background: var(--border-strong);
  margin: 32px 0 0;
}

.steps-flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  margin-top: 56px;
}

/* Cada paso: número, título y párrafo, todo centrado en su columna. */
.sf-item {
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
}

/* El número en magenta, centrado en su columna. */
.sf-num {
  font-family: var(--f-body);
  font-size: 12px;
  font-weight: 700;
  color: var(--magenta-texto);
  line-height: 1;
  letter-spacing: .04em;
  margin-bottom: 14px;
  text-align: center;
  align-self: center;
  width: 100%;
}

.sf-item h3 {
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text-1);
  line-height: 1.3;
  margin: 0 0 10px;
  text-align: center;
}

.sf-item p {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.55;
  margin: 0;
  max-height: none;
  opacity: 1;
  overflow: visible;
  padding-top: 0;
  border-top: none;
  text-align: center;
}

/* ═══════════════════════════════════════
   TARJETA DE TRANSPARENCIA (dentro de "CÓMO FUNCIONA")
   Panel horizontal en tres bloques: frase a la izquierda,
   desglose de costos en el centro y a la derecha.
   Va sobre fondo crema con texto oscuro, para que se lea como
   una nota de confianza al final del proceso. Los colores son
   fijos (no cambian con el tema) porque en la referencia se ve
   igual de claro sobre fondo oscuro que sobre blanco.
═══════════════════════════════════════ */
.transparencia {
  margin-top: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
  padding: 36px 44px;
  border-radius: 20px;
  background: var(--transparencia-bg);
  color: var(--transparencia-text);
  align-items: center;
}

/* La frase en cursiva, con la tipografía display del sitio.
   Va más grande que los párrafos para que sea el ancla visual. */
.transparencia-frase em {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.4rem;
  line-height: 1.25;
  color: var(--transparencia-text);
}

/* Cada bloque: etiqueta pequeña en mayúsculas + párrafo. */
.transparencia-bloque {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.transparencia-tag {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--transparencia-tag);
}

.transparencia-bloque p {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--transparencia-text);
  margin: 0;
}

/* ═══════════════════════════════════════
   POR QUÉ RUTH
   Cabecera a dos columnas: título display a la izquierda, párrafo
   descriptivo a la derecha. El párrafo arranca alineado con la
   primera línea del título, no pegado abajo, así que la cabecera
   usa align-items: start.
═══════════════════════════════════════ */
.section--porque {
  padding: 90px 0 100px;
}

/* Cabecera: el título ocupa 2/3, el párrafo 1/3. Así el titular
   cabe en dos líneas en desktop (una por frase) y el párrafo
   tiene ancho suficiente para no partirse en muchas líneas. */
.porque-head {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 60px;
  align-items: start;
}

.porque-head-left .section-eyebrow {
  margin-bottom: 18px;
}

.porque-title {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.06;
  color: var(--text-1);
  margin: 0;
  /* Fuerza que "Tecnología que acelera," quepa en una línea y
     "abogados que responden." en otra, como en la referencia. */
  max-width: 16ch;
}

.porque-title em {
  font-style: italic;
  font-weight: 500;
  color: var(--gold);
}

:root[data-theme="light"] .porque-title em {
  color: var(--text-1);
  background: linear-gradient(180deg, transparent 65%, var(--gold) 65%);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Línea divisoria horizontal. */
.porque-divider {
  width: 100%;
  height: 1px;
  background: var(--border-strong);
  margin: 56px 0 0;
}

/* Grid de 4 valores. */
.porque-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  margin-top: 48px;
}

.porque-item h3 {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--gold);
  margin: 0 0 14px;
}

:root[data-theme="light"] .porque-item h3 {
  color: var(--text-1);
  background: linear-gradient(180deg, transparent 65%, var(--gold) 65%);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.porque-item p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-2);
  margin: 0;
}

/* ═══════════════════════════════════════
   BIBLIOTECA (lib-card) - 4 EN FILA HORIZONTAL (UNIFORMES Y NIVELADAS)
═══════════════════════════════════════ */
.lib-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 44px;
  align-items: stretch; /* <--- Fuerza a que todas las tarjetas tengan exactamente la misma altura inicial */
}

.lib-card {
  background: var(--bg-3); border: 1px solid var(--border); border-radius: 20px;
  padding: 24px 18px;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; overflow: hidden;
}
.lib-card:hover { border-color: var(--cat-persona); transform: translateY(-3px); }

.lib-icon {
  width: 40px; height: 40px; border-radius: 12px; background: rgba(var(--cat-persona-rgb), .16);
  display: flex; align-items: center; justify-content: center; font-size: 1.15rem; color: var(--cat-persona);
  margin-bottom: 0.5rem; transition: transform .3s; flex-shrink: 0;
}
.lib-card:hover .lib-icon { transform: scale(1.08); }

.lib-card h4 {
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 14px;
  margin-top: 0;
  margin-bottom: 0.25rem;
  color: var(--text-1);
  min-height: 40px; /* <--- Asegura espacio uniforme para títulos de 1 o 2 líneas */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* El magenta puro da 2,95:1 a este tamaño: ilegible para la norma.
   --magenta-texto es el mismo color aclarado hasta 7,9:1. */
.lib-tag { font-size: 9.5px; font-weight: 800; color: var(--magenta-texto, #F07FC4); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; flex-shrink: 0; }
.lib-card .lib-desc { font-size: .78rem; color: var(--text-2); margin-bottom: 0; line-height: 1.4; }

.lib-card .tram-flow {
  text-align: left; width: 100%; list-style: none; max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease; padding-top: 0; margin-top: auto; /* <--- Empuja los pasos al fondo de la tarjeta al expandirse */
  border-top: none; display: flex; flex-direction: column; gap: 6px;
}

/* Al pasar el mouse, la tarjeta crece automáticamente revelando los pasos */
.lib-card:hover .tram-flow {
  max-height: 300px; opacity: 1; padding-top: 10px; margin-top: 10px; border-top: 1px solid var(--border);
}

.lib-card .tram-flow li { display: flex; align-items: flex-start; gap: 8px; font-size: .74rem; color: var(--text-2); transition: opacity 0.3s ease; opacity: 0; }
.lib-card:hover .tram-flow li { opacity: 1; }

.lib-card .tram-flow li span:first-child {
  font-family: var(--f-body); font-weight: 700;
  /* --magenta-texto, no --cat-persona: el magenta de marca sobre su
     propio tinte al 15% daba 1,60:1 en tema claro. El de texto cambia
     con el tema y está calculado para leerse sobre los dos fondos. */
  /* Tinta normal, no el color de la tarjeta: el número va dentro de un
     círculo teñido con ese color y encima de él no se lee. */
  color: var(--text-1);
  background: rgba(var(--cat-persona-rgb), .15);
  width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; font-size: 0.7rem;
}

/* Colores Intercalados */
.lib-card:nth-child(1) .lib-icon { color: var(--cat-persona); background: rgba(var(--cat-persona-rgb), 0.16); }
.lib-card:nth-child(1):hover { border-color: var(--cat-persona); }
/* Estas cuatro reglas ya NO fijan el color de la letra, solo el tinte
   del círculo. Pintaban el número con el color de la tarjeta encima de
   ese mismo color al 15%: el número sobre su propio tono. Medido en
   tema claro: entre 1,60 y 3,51 de contraste, cuando el mínimo es 4,5.
   El círculo sigue distinguiendo cada tarjeta; el número, dentro, se
   lee. */
.lib-card:nth-child(1) .tram-flow li span:first-child { background: rgba(var(--cat-persona-rgb), 0.15); }

.lib-card:nth-child(2) .lib-icon { color: #2ECC71; background: rgba(46, 204, 113, 0.16); }
.lib-card:nth-child(2):hover { border-color: #2ECC71; }
.lib-card:nth-child(2) .tram-flow li span:first-child { background: rgba(46, 204, 113, 0.15); }

.lib-card:nth-child(3) .lib-icon { color: #3498DB; background: rgba(52, 152, 219, 0.16); }
.lib-card:nth-child(3):hover { border-color: #3498DB; }
.lib-card:nth-child(3) .tram-flow li span:first-child { background: rgba(52, 152, 219, 0.15); }

.lib-card:nth-child(4) .lib-icon { color: var(--cat-persona); background: rgba(var(--cat-persona-rgb), 0.16); }
.lib-card:nth-child(4):hover { border-color: var(--cat-persona); }
.lib-card:nth-child(4) .tram-flow li span:first-child { background: rgba(var(--cat-persona-rgb), 0.15); }


/* Panel de Solicitud */
.lib-request-panel {
  margin-top: 32px; background: var(--bg-3); border: 1px solid var(--border-strong);
  border-radius: 28px; display: grid; grid-template-columns: .7fr 1.3fr; overflow: hidden; transition: box-shadow .3s;
}
.lib-request-panel:hover { box-shadow: 0 12px 30px -8px rgba(0,0,0,0.2); }
.lrp-illust { position: relative; min-height: 280px; overflow: hidden; border-right: 1px solid var(--border); }
.lrp-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.35; z-index: 0; }
.lrp-illust-overlay { position: absolute; inset: 0; background: radial-gradient(circle, transparent 20%, var(--bg-2) 90%); z-index: 1; pointer-events: none; }
.lrp-content { padding: 32px 36px; display: flex; flex-direction: column; justify-content: center; }
.lrp-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gold-ink); margin-bottom: 6px; }
.lrp-content h4 { font-family: var(--f-display); font-size: 1.6rem; margin-bottom: 4px; }
.lrp-content p { font-size: 14px; color: var(--text-2); margin-bottom: 20px; max-width: 90%; }
.lib-request-form { display: flex; flex-direction: column; gap: 12px; }
.lrp-field { position: relative; }
.lrp-field i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-3); font-size: 1.1rem; }
.lrp-field input {
  width: 100%; background: var(--bg-2); border: 1px solid var(--border-strong);
  border-radius: 12px; padding: 14px 14px 14px 44px; font-family: var(--f-body);
  font-size: 14px; color: var(--text-1); outline: none; transition: .2s;
}
.lrp-field input:focus { border-color: var(--cat-persona); box-shadow: 0 0 0 3px rgba(var(--cat-persona-rgb), 0.16); }
.lrp-actions { display: flex; gap: 12px; margin-top: 4px; }
.lrp-actions .btn-primary,
.lrp-actions .lrp-wa {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 12px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 12px;
  text-decoration: none;
  white-space: nowrap;
}

/* EL BOTÓN DE WHATSAPP
   ---------------------------------------------------------------------
   Antes era un `.btn-ghost` gris que apuntaba a `#`: no llevaba a
   ninguna parte y, en modo claro, un bloque gris al lado de uno dorado
   se lee como un botón desactivado. Justo el que sirve para hablar con
   una persona parecía el que no funciona.

   Ahora va con el verde de WhatsApp —el mismo #25D366 que ya usa el
   icono del pie— en fondo suave y no macizo: el botón dorado sigue
   siendo el principal, y este se reconoce de un vistazo sin robarle el
   sitio. El verde es de la marca y no del tema, así que se escribe tal
   cual y se ve igual en claro y en oscuro. */
.lrp-actions .lrp-wa {
  background: rgba(37, 211, 102, .12);
  border: 1px solid rgba(37, 211, 102, .45);
  color: var(--text-1);
  transition: background .2s, border-color .2s, transform .2s;
}

.lrp-actions .lrp-wa i { color: #25D366; font-size: 1.05rem; }

.lrp-actions .lrp-wa:hover {
  background: rgba(37, 211, 102, .2);
  border-color: #25D366;
  transform: translateY(-1px);
}

.lrp-actions .lrp-wa:focus-visible {
  outline: 2px solid #25D366;
  outline-offset: 2px;
}

/* El icono dentro del botón dorado hereda el color del texto: sobre
   dorado, el verde de la marca no tiene contraste suficiente. */
.lrp-actions .btn-primary i { font-size: 1.05rem; }

/* El escudo va DENTRO del texto, no como caja aparte. Puesto en un
   flex, el texto se llevaba todo el ancho al partirse en dos líneas y
   el icono se quedaba solo, pegado al borde izquierdo. Así fluye con la
   frase y se queda en la primera línea, centrado con ella. */
.lrp-legal {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 12px;
  text-align: center;
}

.lrp-legal i { color: #25D366; margin-right: 4px; }

/* ═══════════════════════════════════════
   BURBUJA FLOTANTE (amarillo oro RUTH + halo al 20% + logo Chatbot)
═══════════════════════════════════════ */
.wa-float {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 1200;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  display: block;
  background-color: #FFEDA8; /* amarillo oro RUTH */
  background-image: url('/B2C/ECUADOR/assets/img/logos/Chatbot.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 110% 110%;
  transition: transform .25s ease, box-shadow .25s ease;
  box-shadow:
    0 0 0 3px rgba(255,237,168,.10),
    0 0 12px 3px rgba(255,237,168,.20),
    0 0 22px 8px rgba(255,237,168,.10),
    0 10px 22px -8px rgba(0,0,0,.55);
}

/* Resplandor difuminado dorado detrás (intensidad 20%) */
.wa-float::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255,237,168,.20) 0%,
    rgba(255,237,168,.10) 45%,
    rgba(255,237,168,0) 72%
  );
  filter: blur(7px);
  z-index: -1;
  pointer-events: none;
  animation: waPulse 3.2s ease-in-out infinite;
}

/* El logo lo pone el background-image del propio botón, así que
   cualquier <img> interno que hubiera queda oculto. */
.wa-float img {
  display: none;
}

.wa-float:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow:
    0 0 0 4px rgba(255,237,168,.16),
    0 0 16px 5px rgba(255,237,168,.30),
    0 0 30px 12px rgba(255,237,168,.16),
    0 14px 28px -8px rgba(0,0,0,.65);
}

@keyframes waPulse {
  0%, 100% {
    opacity: .85;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.03);
  }
}

#network-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

/* ═══════════════════════════════════════
   FOOTER
═══════════════════════════════════════ */
footer {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--bg-2) 0%, var(--footer-bg) 90px, var(--footer-bg) 100%);
  padding: 70px 0 28px;
}
footer::before {
  content: ""; position: absolute; top: -140px; right: -120px; width: 440px; height: 440px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--gold-rgb),.09), transparent 70%); pointer-events: none;
}
.footer-top { position: relative; z-index: 1; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-bottom: 44px; border-bottom: 1px solid var(--border); }
.footer-logo-wrap { display: block; height: 57px; margin-bottom: 14px; }
.footer-logo-img { height: 100%; width: auto; }
.footer-desc { font-size: 13.5px; color: var(--text-3); line-height: 1.6; max-width: 280px; margin-bottom: 0; }
.footer-social-circle { display: flex; gap: 10px; margin-top: 20px; }
.footer-social-circle a {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center; transition: .2s; color: var(--text-2);
}
.footer-social-circle a:hover { border-color: var(--gold-ink); background: rgba(var(--gold-rgb),.1); }
.footer-social-circle a.ig { border-color: rgba(225,48,108,.4); } .footer-social-circle a.ig i { color: #E1306C; }
.footer-social-circle a.ig:hover { border-color: #E1306C; background: rgba(225,48,108,.14); }
.footer-social-circle a.li { border-color: rgba(10,102,194,.4); } .footer-social-circle a.li i { color: #0A66C2; }
.footer-social-circle a.li:hover { border-color: #0A66C2; background: rgba(10,102,194,.14); }
.footer-social-circle a.wa { border-color: rgba(37,211,102,.4); } .footer-social-circle a.wa i { color: #25D366; }
.footer-social-circle a.wa:hover { border-color: #25D366; background: rgba(37,211,102,.14); }

.footer-col-nav { display: flex; flex-direction: column; }
.footer-title { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); margin-bottom: 18px; }
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.footer-links a { display: block; font-size: 14px; color: var(--text-2); text-decoration: none; transition: .2s; }
.footer-links a:hover { color: var(--gold-ink); }

.footer-col-contact { display: flex; flex-direction: column; align-items: flex-end; gap: 20px; }
.footer-slogan { text-align: right; }
.footer-slogan span { font-size: 14px; color: var(--text-1); display: block; }
.footer-slogan em { font-family: var(--f-display); font-style: italic; font-weight: 700; font-size: 1.5rem; color: var(--text-1); line-height: 1.3; display: block; }
.footer-contact-info { display: flex; flex-direction: column; gap: 9px; align-items: flex-end; }
.footer-contact-info p { margin: 0; }
.footer-contact-info a { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); text-decoration: none; transition: .2s; }
.footer-contact-info a:hover { color: var(--gold-ink); }
.footer-contact-info i { font-size: 14px; color: var(--text-3); }

.footer-copy { position: relative; z-index: 1; padding-top: 32px; font-size: 12.5px; color: var(--text-3); text-align: left; }

/* ═══════════════════════════════════════
   📱 MEDIA QUERIES - RESPONSIVE
═══════════════════════════════════════ */
@media (max-width: 1024px) {
  .wrap { padding: 0 24px; }
  .footer-top { gap: 30px; }

  /* El hero también ajusta su padding en tablet: aunque rompe el wrap,
     conviene no pegar la foto al borde en pantallas medianas. */
  .hero-c .wrap { padding: 0 16px; }
}

@media (max-width: 900px) {
  .lib-request-panel { grid-template-columns: 1fr; }
  .lrp-illust { border-right: none; border-bottom: 1px solid var(--border); min-height: 200px; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-col-contact { grid-column: 1 / -1; align-items: flex-start; }
  .footer-slogan { text-align: left; }
  .footer-contact-info { align-items: flex-start; }
  .section { padding: 60px 0; }
  .hero-c { padding: 20px 0 40px; }

  /* Steps-flow pasa a 2 columnas en tablet. */
  .steps-flow {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 24px;
    margin-top: 40px;
  }
  .section-heading--proceso h2 {
    font-size: clamp(1.8rem, 5vw, 2.4rem);
  }

  /* La tarjeta de transparencia también pasa a 2 columnas y la
     frase sube a la primera fila ocupando todo el ancho. */
  .transparencia {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    padding: 32px 28px;
  }
  .transparencia-frase {
    grid-column: 1 / -1;
  }
  .transparencia-frase em {
    font-size: 1.3rem;
  }

  /* POR QUÉ RUTH: cabecera a una columna, grid a 2 columnas. */
  .section--porque { padding: 60px 0 70px; }
  .porque-head {
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start;
  }
  .porque-title {
    max-width: none;   /* en móvil/tablet ya no forzamos el corte */
  }
  .porque-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 24px;
    margin-top: 40px;
  }
  .porque-divider { margin-top: 40px; }
}

@media (max-width: 768px) {
  .wrap { padding: 0 16px; }

  /* El hero mantiene el ancho completo pero con un pelín menos de
     margen en móvil; el frame pierde radio para no verse desproporcionado. */
  .hero-c .wrap { padding: 0 8px; }
  .hero-c-frame { border-radius: 14px; padding: 40px 16px 30px; }
  .hero-title { font-size: clamp(1.8rem, 6vw, 2.6rem); }
  .hero-subtitle { font-size: 0.95rem; margin-bottom: 24px; }
  .hero-actions { gap: 12px; margin-bottom: 40px; flex-direction: column; align-items: center; }
  .hero-actions .btn-primary,
  .hero-actions .btn-ghost,
  .hero-actions .btn-magenta { width: 100%; justify-content: center; }

  /* Los dos botones de «Cuéntanos tu trámite», uno debajo de otro.
     En un teléfono, repartidos a la mitad, «Escribir por WhatsApp» se
     quedaba en 150px y el texto salía apretado contra los bordes. El
     resto de la portada ya apila así sus botones. */
  .lrp-actions { flex-direction: column; }
  .lrp-actions .btn-primary, .lrp-actions .lrp-wa { width: 100%; }
  .lrp-content { padding: 26px 20px; }
  .lrp-content p { max-width: 100%; }
  .hero-stats { gap: 24px; padding-top: 24px; flex-wrap: wrap; }
  .stat-num { font-size: clamp(1.4rem, 4vw, 2rem); }
  .stat-label { font-size: 0.6rem; }

  .section { padding: 40px 0; }
  .section-heading h2 { font-size: clamp(1.2rem, 3.5vw, 1.6rem); }
  .section-desc { font-size: 14px; }

  /* Steps-flow: ya no lleva regla de 2 columnas porque la maneja el
     @media (max-width: 900px) de arriba. Aquí solo ajustamos gap,
     divisoria y tamaño tipográfico si hace falta. */
  .steps-flow { gap: 28px 20px; margin-top: 32px; }
  .steps-divider { margin: 24px 0 0; }
  .sf-item h3 { font-size: 1rem; }
  .sf-item p { font-size: 13.5px; }

  /* Tarjeta de transparencia: reducimos padding y tipografía. */
  .transparencia { padding: 28px 24px; gap: 24px; }
  .transparencia-bloque p { font-size: 14px; }

  /* POR QUÉ RUTH: ajustes de tipografía y espaciado. */
  .porque-title { font-size: clamp(1.8rem, 6vw, 2.6rem); }
  .porque-item h3 { font-size: 1.35rem; }
  .porque-item p { font-size: 13.5px; }

  .lib-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 28px; }
  .lib-card { padding: 18px 14px; }
  .lib-card h4 { font-size: 0.95rem; min-height: auto; }
  .lib-card .lib-desc { font-size: 0.75rem; }

  footer { padding: 40px 0 20px; }
  .footer-top { grid-template-columns: 1fr; gap: 24px; padding-bottom: 24px; }
  .footer-col-brand { order: 1; }
  .footer-col-nav { order: 2; }
  .footer-col-contact { grid-column: 1; order: 3; align-items: flex-start; }
  .footer-copy { padding-top: 20px; font-size: 11px; text-align: center; }

  .wa-float { right: 18px; bottom: 18px; width: 62px; height: 62px; }
}

/* Steps-flow y POR QUÉ RUTH pasan a 1 columna en móvil pequeño.
   Además, en ≤560px volvemos a alinear a la izquierda el número,
   el título y el párrafo de cada paso: en pantallas estrechas los
   párrafos centrados se leen peor. */
@media (max-width: 560px) {
  .steps-flow {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-top: 32px;
  }
  .section-heading--proceso h2 {
    font-size: clamp(1.6rem, 6vw, 2rem);
  }

  /* Vuelta a alineación izquierda en móvil pequeño. */
  .sf-item,
  .sf-item h3,
  .sf-item p {
    text-align: left;
  }
  .sf-num {
    text-align: left;
    align-self: flex-start;
    width: auto;
  }

  /* Tarjeta de transparencia: todo apilado y más compacto. */
  .transparencia {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 28px 22px;
    margin-top: 40px;
  }
  .transparencia-frase em {
    font-size: 1.2rem;
  }
  .transparencia-bloque p {
    font-size: 14px;
  }

  /* POR QUÉ RUTH: grid de valores a 1 columna. */
  .section--porque { padding: 50px 0 60px; }
  .porque-grid {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-top: 32px;
  }
  .porque-divider { margin-top: 32px; }
  .porque-item h3 { font-size: 1.35rem; }
}

@media (max-width: 420px) {
  .wrap { padding: 0 12px; }
  .hero-c .wrap { padding: 0 6px; }
  .hero-c-frame { border-radius: 12px; padding: 30px 12px 20px; }
  .hero-title { font-size: clamp(1.4rem, 5vw, 1.8rem); }
  .hero-subtitle { font-size: 0.85rem; }
  .btn-primary, .btn-ghost, .btn-magenta { padding: 10px 16px; font-size: 12px; }
}