/* Rocapia — Landing production stylesheet
   Tokens live in ./tokens/*.css (colors, typography, spacing, effects, fonts, icons). */
@import url('./tokens/colors.css');
@import url('./tokens/typography.css');
@import url('./tokens/spacing.css');
@import url('./tokens/effects.css');
@import url('./tokens/icons.css');

:root {
  --paper: var(--color-gray-100);
  --ink: var(--color-slate-900);
  --ink-soft: var(--surface-premium-raised);
  --muted: var(--text-secondary);
  --muted-d: var(--text-muted);
  --line: var(--border-subtle);
  --line-d: var(--border-on-dark);
  --accent: var(--accent-primary);
  --accent-soft: var(--color-emerald-100);
  --white: var(--color-white);

  /* Motion system */
  --reveal-distance: 18px;
  --reveal-duration: 550ms;
  --reveal-ease: cubic-bezier(.2,.8,.2,1);
  --reveal-stagger: 90ms;
}

/* ---------- Reset & base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-display); }
a { color: var(--accent); }
a:hover { color: var(--ink); }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; display: block; }
.wrap { max-width: 1200px; margin: 0 auto; padding-inline: 40px; }

.rc-chip-btn, .rc-btn, a, button {
  -webkit-tap-highlight-color: transparent;
}
.rc-chip-btn:focus-visible,
.rc-btn:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 2px; background: var(--line); outline: none; cursor: pointer; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); border: 2px solid var(--white); box-shadow: 0 0 0 1px var(--ink); cursor: pointer; }
input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--ink); border: 2px solid var(--white); box-shadow: 0 0 0 1px var(--ink); cursor: pointer; }

.rc-input { width: 100%; font-size: 16px; font-family: var(--font-body); padding: 13px 16px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--white); color: var(--ink); outline: none; transition: border-color .2s; }
.rc-input:focus { border-color: var(--ink); }

/* ---------- Reusable motion system ----------
   .reveal        — single-fire opacity/translateY entrance, driven by IntersectionObserver
   .reveal-group  — parent that staggers its .reveal children via --i (nth-child index)
   Everything here uses only transform + opacity (compositor-friendly). */
/* Sin `scale`. El desplazamiento solo —sin escala— se lee como editorial: el
   contenido sube a su sitio. Con escala se lee como una plantilla, porque el
   par "sube y crece un poco" es el gesto por defecto de cualquier libreria de
   reveal y el ojo ya lo tiene fichado. Ademas la escala reencuadra el texto
   mientras entra, que a cuerpos grandes se nota como un temblor. */
.reveal {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition: opacity var(--reveal-duration) var(--reveal-ease), transform var(--reveal-duration) var(--reveal-ease);
  transition-delay: calc(var(--i, 0) * var(--reveal-stagger));
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal.is-instant { transition-duration: .01ms; transition-delay: 0ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .rc-hero-live-task, .rc-chaos-chip, .rc-scatter-chip { opacity: 1; transform: none; transition: none; }
  .rc-hero-live, .rc-hero-existing-rows { transition: none; }
  .rc-hero-check.is-drawn { transition: none; }
  .rc-rail-track { scroll-behavior: auto; }
  .rc-rail-card, .rc-rail-arrow, .rc-ciclo-tab, .rc-rail-progress-fill { transition: none; }
  .rc-rail-card:hover { transform: none; }
  * { animation-duration: .01ms !important; }
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { from { opacity: 0; transform: scale(.96) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }

/* ---------- Interactive primitives ---------- */
.rc-card { transition: transform .2s var(--reveal-ease), box-shadow .2s var(--reveal-ease); }
.rc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.rc-btn { transition: transform .15s var(--reveal-ease), background .15s ease; border: none; }
.rc-btn:hover { transform: translateY(-2px); }
.rc-btn:active { transform: scale(.98); }

.rc-arrow { transition: transform .2s ease; }
.rc-linkgroup:hover .rc-arrow { transform: translateX(4px); }

.rc-chip-btn { transition: border-color .15s ease, background-color .15s ease; cursor: pointer; text-align: left; }

/* ---------- Nav ---------- */
.rc-nav { position: sticky; top: 0; z-index: 50; background: rgba(242,244,247,0.86); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.rc-nav-row { max-width: 1200px; margin: 0 auto; padding: 16px 40px; display: flex; align-items: center; justify-content: space-between; }
/* flex-shrink 0: el logotipo no cede ancho. Es un flex item entre el borde y
   los enlaces, y sin esto es lo primero que la fila comprime cuando el menú
   crece — llegó a renderizarse con 0px de ancho al añadir el enlace a modo. */
.rc-nav-logo { display: flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
.rc-nav-logo img { height: 26px; width: auto; }
.rc-nav-links { display: flex; align-items: center; gap: 22px; }
.rc-nav-link { position: relative; text-decoration: none; color: var(--muted); font-size: 15px; font-weight: 500; white-space: nowrap; transition: color .2s ease; }
.rc-nav-link.is-active { color: var(--ink); }
.rc-nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 2px; border-radius: 2px;
  background: var(--accent); opacity: 0; transform: scaleX(.5); transition: opacity .25s ease, transform .25s ease;
}
.rc-nav-link.is-active::after { opacity: 1; transform: scaleX(1); }
.rc-nav-cta { text-decoration: none; color: var(--white); background: var(--ink); padding: 10px 18px; border-radius: 999px; font-size: 14px; font-weight: 600; font-family: var(--font-display); white-space: nowrap; }
.rc-nav-mobile-btn { display: none; background: none; border: none; padding: 6px; color: var(--ink); }
.rc-nav-mobile-panel { background: var(--white); border-top: 1px solid var(--line); padding: 8px 24px 20px; display: flex; flex-direction: column; }
.rc-nav-mobile-panel a { display: flex; align-items: center; text-decoration: none; color: var(--ink); font-size: 16px; font-weight: 500; padding: 12px 0; border-bottom: 1px solid var(--line); transition: color .2s ease; }
.rc-nav-mobile-panel a.is-active { color: var(--accent); }
.rc-nav-mobile-panel a:last-of-type { border-bottom: none; }
.rc-nav-mobile-panel[hidden] { display: none; }
.rc-nav-cta-mobile { display: none; width: 100%; text-align: center; margin-top: 16px; padding: 14px 20px; }

/* ---------- Hero ---------- */
h1 em {
    font-style: normal;
    /*color: var(--accent);*/
}
.rc-hero-actions button {font-size: 16px;}
.rc-hero { max-width: 1200px; margin: 0 auto; padding: 88px 40px 96px; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: center; }
.rc-hero-badge { display: inline-flex; align-items: center; gap: 10px; background: var(--accent-soft); color: var(--accent); padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; letter-spacing: .04em; margin-bottom: 28px; }
.rc-hero-badge-dot { width: 7px; height: 7px; background: var(--accent); border-radius: 50%; }
.rc-hero h1 { font-size: 54px; line-height: 1.08; font-weight: 600; letter-spacing: -0.03em; }
.rc-hero-lead { font-size: 18px; line-height: 1.5; color: var(--muted); font-weight: 300; margin: 26px 0 12px; max-width: 560px; }
.rc-hero-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 32px; }
.rc-btn-primary { display: inline-flex; align-items: center; gap: 10px; background: var(--accent); color: var(--white); padding: 17px 28px; border-radius: 999px; font-size: 17px; font-weight: 600; box-shadow: var(--shadow-lg); text-decoration: none; }
/* background:none explícito — hasta ahora esta clase solo se usaba en <a>
   (sin fondo nativo); al usarla por primera vez en un <button> (la tarjeta
   de "El problema" oscura) heredaba el gris/blanco por defecto del
   navegador, ilegible combinado con el texto blanco de .is-on-dark. */
.rc-btn-secondary { display: inline-flex; align-items: center; padding: 17px 26px; border-radius: 999px; font-size: 17px; font-weight: 600; text-decoration: none; color: var(--ink); background: none; border: 1.5px solid var(--line); transition: background var(--duration-standard) var(--ease-standard); }
.rc-btn-secondary:hover { background: var(--paper); }
.rc-hero-footnote { font-size: 13.5px; color: var(--muted-d); margin-top: 18px; }

.rc-hero-visual { position: relative; background: var(--white); border: 1px solid var(--line); border-radius: 24px; padding: 0; box-shadow: 0 40px 80px -50px rgba(23,24,28,0.4); overflow: hidden; cursor: pointer; }
.rc-hero-visual:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.rc-hero-topbar { display: flex; align-items: center; gap: 8px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.rc-hero-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.rc-hero-topbar-label { margin-left: 8px; font-size: 12px; color: var(--muted-d); font-weight: 500; }
.rc-hero-replay { margin-left: auto; display: none; align-items: center; gap: 5px; background: none; border: none; color: var(--muted-d); font-size: 11.5px; font-weight: 600; padding: 4px 8px; }
.rc-hero-replay.is-shown { display: flex; }

.rc-hero-extra { display: flex; align-items: center; gap: 8px; padding: 16px 20px 4px; }
.rc-channel-chip { display: flex; align-items: center; gap: 6px; border-radius: 999px; padding: 6px 11px; background: var(--paper); color: var(--muted-d); border: 1px solid transparent; opacity: .6; transition: all .3s ease; }
.rc-channel-chip.is-active { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); opacity: 1; }
.rc-channel-chip span { font-size: 11.5px; font-weight: 600; }
.rc-channel-arrow { font-size: 14px; color: var(--accent); margin-left: auto; opacity: 0; transition: opacity .3s ease; }
.rc-channel-arrow.is-shown { opacity: 1; }

.rc-hero-body { padding: 14px 22px 26px; }
.rc-hero-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 16px; }
.rc-hero-metric { background: var(--paper); border-radius: 12px; padding: 14px; }
.rc-hero-metric.is-accent { background: var(--accent-soft); }
.rc-hero-metric-label { font-size: 11px; color: var(--muted-d); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.rc-hero-metric.is-accent .rc-hero-metric-label { color: var(--accent); }
.rc-hero-metric-value { font-size: 22px; font-weight: 700; color: var(--ink); margin-top: 6px; }
.rc-hero-metric.is-accent .rc-hero-metric-value { color: var(--accent); }

.rc-hero-table { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.rc-hero-table-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: var(--paper); font-size: 12px; font-weight: 600; color: var(--muted); }
.rc-hero-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 16px; border-top: 1px solid var(--line); }
.rc-hero-row-id { display: flex; align-items: center; gap: 10px; }
.rc-hero-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; }
.rc-hero-row-name { font-size: 14px; color: var(--ink); font-weight: 500; }
.rc-hero-status { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px; background: var(--paper); color: var(--muted); transition: background-color .25s ease, color .25s ease; }
.rc-hero-check { stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 16; display: none; }
.rc-hero-check.is-drawn { display: block; transition: stroke-dashoffset .4s var(--reveal-ease); stroke-dashoffset: 0; }

/* La fila #2044 se inserta desde arriba (traducción -100%→0, relativa a su
   propia altura) empujando visualmente a las 3 filas existentes, que se
   desplazan la misma distancia en sentido contrario al mismo tiempo — sin
   ratón, sin clic: la propia inserción es la señal de que algo ocurrió.
   Después de asentarse, solo cambian color/box-shadow/scale (nunca opacity
   de aparición). */
.rc-hero-live { padding: 11px 16px; border-top: 1px solid var(--line); background: var(--white); transform: translateY(-100%); transition: transform .7s var(--reveal-ease), background-color .3s ease, box-shadow .3s var(--reveal-ease); }
.rc-hero-live.is-inserted { transform: translateY(0); }
.rc-hero-live.is-inserted.is-elevated { background: var(--accent-soft); box-shadow: 0 10px 24px -8px rgba(5,150,105,0.35); transform: translateY(0) scale(1.02); position: relative; z-index: 1; }
.rc-hero-live-row { display: flex; align-items: center; justify-content: space-between; }
.rc-hero-avatar-ghost { width: 26px; height: 26px; border-radius: 50%; background: var(--white); border: 1.5px dashed var(--line); flex: none; transition: opacity .2s ease; }
.rc-hero-avatar-live { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--white); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; }

.rc-hero-avatar-ai { position: relative; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--white); font-size: 13px; display: flex; align-items: center; justify-content: center; flex: none; }
.rc-hero-avatar-ai::before, .rc-hero-avatar-ai::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--accent); animation: rc-avatar-ai-pulse 2.2s ease-out infinite; pointer-events: none; }
.rc-hero-avatar-ai::after { animation-delay: 1.1s; }
.rc-hero-avatar-ai.is-done::before, .rc-hero-avatar-ai.is-done::after { animation: none; opacity: 0; }
@keyframes rc-avatar-ai-pulse { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(2.3); opacity: 0; } }
.rc-hero-live-name { font-size: 14px; color: var(--ink); font-weight: 600; }
.rc-hero-live-task { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding-left: 36px; font-size: 12px; color: var(--muted); opacity: 0; transition: opacity .35s ease; }
.rc-hero-live-task.is-shown { opacity: 1; }
.rc-hero-existing-rows { transition: transform .7s var(--reveal-ease); }

/* ---------- Hero mobile card (solo móvil) ---------- */
.rc-hero-mcard-wrap { display: none; margin: 24px 0 28px; }
.rc-hero-mcard { background: var(--ink); border-radius: var(--radius-xl); padding: 20px; }
.rc-hero-mcard-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.rc-hero-mcard-label { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--line-d); }
.rc-hero-mcard-label.is-after { color: var(--color-mint-400); }
.rc-hero-mcard-body { display: flex; align-items: stretch; gap: 0; }
.rc-hero-mcard-rows { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; }
.rc-hero-mcard-row { display: flex; align-items: center; gap: 10px; background: var(--ink-soft); border-radius: 999px; padding: 10px 14px; }
.rc-hero-mcard-row i { font-size: 15px; color: var(--color-mint-400); flex: none; }
.rc-hero-mcard-row span { font-size: 13.5px; font-weight: 600; color: var(--text-on-dark); }
.rc-hero-mcard-flowsvg { flex: none; width: 40px; align-self: stretch; overflow: visible; }
.rc-hero-mcard-lead { fill: none; stroke: var(--color-mint-400); stroke-width: 1.5; stroke-linecap: round; opacity: .5; stroke-dasharray: 4 3; animation: rc-mcard-dash 1s linear infinite; }
.rc-hero-mcard-flow { fill: none; stroke: var(--color-mint-400); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 4 3; animation: rc-mcard-dash 1s linear infinite; }
.rc-hero-mcard-check { align-self: center; width: 44px; height: 44px; border-radius: 50%; background: var(--color-emerald-600); display: flex; align-items: center; justify-content: center; flex: none; animation: rc-mcard-pulse 2.4s ease-in-out infinite; }
.rc-hero-mcard-check i { font-size: 20px; color: var(--text-on-dark); }
.rc-hero-mcard-caption { text-align: center; font-size: 13px; color: var(--muted-d); }

@keyframes rc-mcard-dash { to { stroke-dashoffset: -14; } }
@keyframes rc-mcard-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* ---------- Section headers ---------- */
.rc-eyebrow { font-size: 14px; letter-spacing: .24em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin-bottom: 20px; }
section h2 { font-size: 42px; line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; }

/* ---------- El problema: rail horizontal de 8 síntomas ----------
   Rail nativo (scroll-snap, sin librería): la pista se sangra al ancho del
   viewport con margin negativo igual al padding del contenedor (40px, el
   mismo que usa el resto del sitio) para que las tarjetas "salgan" de la
   caja de contenido en vez de quedar encerradas en 1200px. */
.rc-sistema { max-width: 1200px; margin: 0 auto; padding: 96px 40px 64px; }
/* Igual que .rc-fugas más abajo: ya no la usa la home (su cabecera pasó a
   .rc-rail-head-text), pero sigue siendo la cabecera de rc-ep-problema en
   /eficiencia-operativa/. Sin este margen, el título queda pegado a la
   rejilla de tarjetas. */
.rc-sistema-intro { max-width: 720px; margin-bottom: 56px; }
.rc-sistema-quote { text-align: center; font-size: 22px; font-weight: 500; color: var(--ink); max-width: 640px; margin: 40px auto 0; line-height: 1.4; }

.rc-rail-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; flex-wrap: wrap; margin-bottom: 40px; }
.rc-rail-head-text { max-width: 780px; }
.rc-rail-head-text p { font-size: 17px; line-height: 1.6; color: var(--muted); max-width: 620px; margin-top: 18px; }
.rc-rail-nav { display: flex; align-items: center; gap: 12px; flex: none; }
.rc-rail-counter { font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--muted); min-width: 52px; }
.rc-rail-arrow {
  width: 40px; height: 40px; border-radius: var(--radius-pill); border: 1px solid var(--line);
  background: none; color: var(--ink); flex: none; display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--duration-standard) var(--ease-standard), opacity var(--duration-standard) var(--ease-standard);
}
.rc-rail-arrow:hover { background: var(--paper); }
.rc-rail-arrow:active { transform: scale(.97); }
.rc-rail-arrow:disabled { opacity: .35; pointer-events: none; }
.rc-rail-arrow.is-on-dark { width: 44px; height: 44px; border-color: var(--line-d); color: var(--white); }
.rc-rail-arrow.is-on-dark:hover { background: rgba(255,255,255,.09); }

/* 320px (no 340) es a propósito: con el contenedor de esta sección
   (~1120px de ancho útil en desktop), 340px dejaba solo un 12% de la 4ª
   tarjeta asomando — un corte demasiado brusco para sugerir "desliza".
   320px + el gap de 20px dan ~37% de la siguiente tarjeta visible, un
   affordance mucho más claro sin cambiar cuántas entran de golpe. */
.rc-rail-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: 320px; gap: 20px;
  overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: 40px;
  scrollbar-width: none; padding: 4px 40px; margin: 0 -40px;
}
.rc-rail-track::-webkit-scrollbar { display: none; }
.rc-rail-track:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.rc-rail-card {
  scroll-snap-align: start; background: var(--white); border-radius: var(--radius-lg); padding: 28px;
  min-height: 268px; display: flex; flex-direction: column; gap: 18px;
  box-shadow: var(--shadow-md); transition: transform var(--duration-standard) var(--ease-standard);
}
.rc-rail-card:hover { transform: translateY(-3px); }
.rc-rail-card-head { display: flex; align-items: center; justify-content: space-between; }
.rc-rail-card-head i { font-size: 26px; color: var(--accent); }
.rc-rail-card-num { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--muted-d); letter-spacing: .08em; }
.rc-rail-card h3 { font-family: var(--font-display); font-size: 21px; line-height: 1.2; letter-spacing: -0.01em; font-weight: 700; color: var(--ink); }
.rc-rail-card p { font-size: 15px; line-height: 1.6; color: var(--muted); }
.rc-rail-tag { margin-top: auto; align-self: flex-start; font-family: var(--font-display); font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent-primary-hover); }

.rc-rail-progress { height: 3px; background: var(--line); border-radius: var(--radius-pill); overflow: hidden; margin-top: 32px; }
.rc-rail-progress-fill { height: 100%; width: 12.5%; background: var(--accent); border-radius: var(--radius-pill); transition: width var(--duration-fast) var(--ease-standard); }

/* ---------- Rejilla de fugas (.rc-fugas/.rc-fuga) ----------
   Ya no la usa la home (pasó al rail de arriba), pero SÍ la sigue usando la
   sección "Lo que pasa cada día" de /eficiencia-operativa/ (rc-ep-problema,
   ver css/eficiencia-operativa.css) — comparten styles.css, así que hay que
   mantenerla aquí aunque en esta página ya no aparezca en el markup. */
.rc-fugas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-bottom: 56px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rc-fuga { display: flex; align-items: flex-start; gap: 12px; padding: 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rc-fuga:nth-child(4n) { border-right: none; }
.rc-fuga:nth-last-child(-n+4) { border-bottom: none; }
.rc-fuga-title { font-size: 15px; font-weight: 600; line-height: 1.45; }

.rc-flow-arrow { font-size: 18px; color: var(--muted-d); margin: 0 16px; flex: none; transition: transform .2s ease; }

/* ---------- La transformación ---------- */
.rc-transform { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 96px 40px; }
.rc-transform-intro { max-width: 760px; margin: 0 auto 48px; text-align: center; }
.rc-transform-row { display: flex; align-items: stretch; gap: 0; max-width: 1200px; margin: 0 auto; }
.rc-transform-row .rc-flow-arrow { color: var(--muted); align-self: center; }
.rc-transform-before, .rc-transform-after { flex: 1; background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.rc-transform-label { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-d); }
.rc-transform-before p, .rc-transform-after p { font-size: 14px; line-height: 1.55; color: var(--muted); }
.rc-transform-hub { flex: 0.8; background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 18px; padding: 22px; margin: 0 4px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.rc-transform-hub-logo { width: 100px; height: auto; margin-bottom: 14px; }
.rc-transform-hub p { font-size: 14px; line-height: 1.5; color: var(--ink); }

.rc-flip-col { display: flex; flex-direction: column; gap: 8px; }
.rc-flip-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13.5px; color: var(--ink); background: var(--paper); border-radius: 10px; padding: 8px 12px; }
.rc-flip-badge { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--white); border: 1px solid var(--line); color: var(--muted-d); flex: none; transition: background-color .3s ease, color .3s ease, border-color .3s ease; }
.rc-flip-badge.is-done { background: var(--accent); border-color: var(--accent); color: var(--white); }

.rc-capas-cta-wrap { text-align: center; margin-top: 28px; }
#openEjemplosBtn { animation: rc-invite-pulse 2.6s ease-out infinite; }
@keyframes rc-invite-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 40%, transparent); }
  70% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--accent) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); }
}

/* "El problema" -> "La transformación" flourish: the scattered-tool chips
   converge from slightly different offsets/rotations into their tidy row as
   the panel reveals — literally dispersed -> ordered. The hub icon gives one
   short, finite pulse once settled to read as "connecting". Reused in the
   demo section below with the same chip markup. transform-only, no layout
   impact. */
.rc-chaos-row { display: flex; flex-wrap: wrap; gap: 8px; }
.rc-chaos-chip { display: flex; align-items: center; gap: 6px; background: var(--paper); border-radius: 999px; padding: 7px 12px; }
.rc-chaos-chip span { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.rc-chaos-chip, .rc-scatter-chip { transition: transform .6s var(--reveal-ease); }
.rc-chaos-chip:nth-child(1), .rc-scatter-chip:nth-child(1) { transform: translate(-14px,-8px) rotate(-8deg); transition-delay: 0ms; }
.rc-chaos-chip:nth-child(2), .rc-scatter-chip:nth-child(2) { transform: translate(11px,-13px) rotate(6deg); transition-delay: 60ms; }
.rc-chaos-chip:nth-child(3), .rc-scatter-chip:nth-child(3) { transform: translate(-9px,11px) rotate(5deg); transition-delay: 120ms; }
.rc-chaos-chip:nth-child(4), .rc-scatter-chip:nth-child(4) { transform: translate(13px,7px) rotate(-6deg); transition-delay: 180ms; }
.rc-chaos-chip:nth-child(5), .rc-scatter-chip:nth-child(5) { transform: translate(-7px,-11px) rotate(7deg); transition-delay: 240ms; }
.rc-transform-before.is-visible .rc-chaos-chip { transform: translate(0,0) rotate(0deg); }
.rc-scatter-chip.is-visible { transform: translate(0,0) rotate(0deg); }

@keyframes rc-connect-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
/*
.rc-transform-hub.is-visible .rc-transform-hub-logo { animation: rc-connect-pulse .9s var(--reveal-ease) .6s 2; }
*/

/* ---------- Recorrido de una solicitud ---------- */
.rc-recorrido { max-width: 1200px; margin: 0 auto; padding: 96px 40px; }
.rc-recorrido-intro { max-width: 640px; margin: 0 auto 56px; text-align: center; }
.rc-recorrido-intro p { font-size: 16px; line-height: 1.55; color: var(--muted); margin-top: 14px; }
.rc-recorrido-steps { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; position: relative; }
.rc-recorrido-line { position: absolute; left: 17px; top: 0; bottom: 0; width: 2px; background: var(--line); z-index: 0; }
.rc-recorrido-step { display: flex; gap: 22px; padding: 26px 0; border-top: 1px solid var(--line); position: relative; }
.rc-recorrido-num { width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: var(--white); display: flex; align-items: center; justify-content: center; flex: none; font-family: var(--font-display); font-weight: 700; font-size: 14px; position: relative; z-index: 1; }
.rc-recorrido-body { flex: 1; min-width: 0; }
.rc-recorrido-title { font-size: 16px; font-weight: 600; margin-bottom: 14px; }
.rc-recorrido-lanes { display: flex; flex-direction: column; gap: 8px; }
.rc-recorrido-lane { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; flex-wrap: wrap; }
.rc-recorrido-lane.is-human { background: var(--paper); }
.rc-recorrido-lane.is-system.is-ia { background: var(--accent-soft); }
.rc-recorrido-lane.is-system.is-auto { background: var(--ink); }
.rc-recorrido-lane-icon { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; font-size: 12px; background: var(--white); color: var(--muted-d); }
.rc-recorrido-lane.is-system.is-ia .rc-recorrido-lane-icon { background: var(--accent); color: var(--white); }
.rc-recorrido-lane.is-system.is-auto .rc-recorrido-lane-icon { background: var(--white); color: var(--ink); }
.rc-recorrido-lane-body { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 1px; }
.rc-recorrido-lane-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted-d); }
.rc-recorrido-lane.is-system.is-auto .rc-recorrido-lane-label { color: var(--line-d); }
.rc-recorrido-lane-text { font-size: 13.5px; font-weight: 500; color: var(--ink); }
.rc-recorrido-lane.is-system.is-auto .rc-recorrido-lane-text { color: var(--white); }
.rc-recorrido-time { flex: none; margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--muted-d); white-space: nowrap; }
.rc-recorrido-lane.is-system.is-ia .rc-recorrido-time { color: var(--accent); }
.rc-recorrido-lane.is-system.is-auto .rc-recorrido-time { color: var(--color-mint-400); }
.rc-recorrido-total { max-width: 640px; margin: 48px auto 0; text-align: center; background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 24px 28px; }
.rc-recorrido-total-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted-d); margin-bottom: 8px; }
.rc-recorrido-total-value { font-size: 19px; font-weight: 600; color: var(--ink); }
.rc-recorrido-total-value i { font-size: 15px; color: var(--accent); margin: 0 8px; }

/* ---------- Casos de uso: los 4 ciclos operativos (enlaza a /eficiencia-operativa/) ----------
   Bloque en fondo oscuro (tratamiento "premium" del brandbook) para romper el
   ritmo con la sección "El problema" justo encima, que también es una pista
   horizontal — mismo componente de rail, distinta piel.
   Pestañas simples (solo nombre) en vez de tarjetas con descripción — menos
   ruido visual arriba, el detalle vive en el propio slide. La comparativa
   Hoy / Tu operación optimizada es una lista de filas con icono (✕/✓) en
   vez de chips sueltos, con un divisor »» en el centro que hace de "flecha
   de transformación" — sustituye a la antigua frase de consecuencia bajo
   cada columna. "+ Y más" ya no es una tarjeta aparte ni un bloque de CTA
   final: es el 5º slide del propio rail, así no hay que bajar más para
   encontrar el escape hatch. */
.rc-ciclos-dark { background: var(--ink); padding: 72px 40px 80px; }
.rc-ciclos-dark-inner { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; }

.rc-ciclos-dark-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.rc-ciclos-dark-head-text { max-width: 720px; display: flex; flex-direction: column; gap: 12px; }
.rc-ciclos-dark-head-text .rc-eyebrow { color: var(--color-mint-400); margin-bottom: 0; }
.rc-ciclos-dark-head-text h2 { font-size: clamp(26px, 3.2vw, 38px); line-height: 1.15; color: var(--white); }
.rc-ciclos-dark-head-text p { font-size: 15.5px; line-height: 1.6; color: rgba(255,255,255,.66); max-width: 600px; }

.rc-ciclo-tabs { display: flex; gap: 10px; flex-wrap: wrap; }
.rc-ciclo-tab {
  font-family: var(--font-display); font-size: 14px; font-weight: 600; padding: 10px 18px; cursor: pointer;
  border-radius: var(--radius-pill); border: 1px solid rgba(255,255,255,.22); background: none;
  color: rgba(255,255,255,.72);
  transition: background var(--duration-standard) var(--ease-standard), color var(--duration-standard) var(--ease-standard), border-color var(--duration-standard) var(--ease-standard);
}
.rc-ciclo-tab:hover { transform: none; background: rgba(255,255,255,.06); }
.rc-ciclo-tab[aria-selected="true"] { background: var(--accent); border-color: transparent; color: var(--white); }
.rc-ciclo-tab.rc-ciclo-tab-more { border-style: dashed; border-color: rgba(52,211,153,.4); color: var(--color-mint-400); }
.rc-ciclo-tab.rc-ciclo-tab-more[aria-selected="true"] { background: var(--accent); border-style: solid; border-color: transparent; color: var(--white); }

/* Reutiliza .rc-rail-track (scroll-snap + sangrado) con columnas más anchas. */
.rc-ciclo-track { grid-auto-columns: min(880px, 100%); gap: 20px; }

.rc-ciclo-slide {
  scroll-snap-align: start; background: var(--ink-soft); border: 1px solid var(--line-d); border-radius: var(--radius-xl);
  padding: 20px 24px; display: flex; flex-direction: column; gap: 22px;
}

.rc-ciclo-slide-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; }
.rc-ciclo-slide-head h3 { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--white); }
.rc-ciclo-slide-head h3 .rc-ciclo-slide-num, .rc-ciclo-slide-head h3 i { color: var(--color-mint-400); }
.rc-ciclo-slide-head p { font-size: 14px; color: rgba(255,255,255,.55); }

.rc-ciclo-compare { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 20px; }
.rc-ciclo-compare-col { display: flex; flex-direction: column; border-radius: var(--radius-md); overflow: hidden; }
.rc-ciclo-compare-col.is-hoy { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); }
.rc-ciclo-compare-col.is-rocapia { background: rgba(52,211,153,.07); border: 1px solid rgba(52,211,153,.24); }
.rc-ciclo-compare-label { padding: 16px 18px 8px; font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.rc-ciclo-compare-col.is-hoy .rc-ciclo-compare-label { color: rgba(255,255,255,.45); }
.rc-ciclo-compare-col.is-rocapia .rc-ciclo-compare-label { color: var(--color-mint-400); }
.rc-ciclo-steps { display: flex; flex-direction: column; padding-bottom: 6px; }
.rc-ciclo-step { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 18px; font-size: 13.5px; border-top: 1px solid rgba(255,255,255,.07); }
.rc-ciclo-steps .rc-ciclo-step:first-child { border-top: none; }
.rc-ciclo-step i { flex: none; font-size: 14px; }
.rc-ciclo-compare-col.is-hoy .rc-ciclo-step { color: rgba(255,255,255,.75); }
.rc-ciclo-compare-col.is-hoy .rc-ciclo-step i { color: #F8B4B4; }
.rc-ciclo-compare-col.is-rocapia .rc-ciclo-step { color: var(--white); font-weight: 600; }
.rc-ciclo-compare-col.is-rocapia .rc-ciclo-step i { color: var(--color-mint-400); }

.rc-ciclo-divider { display: flex; align-items: center; justify-content: center; color: var(--color-mint-400); }
.rc-ciclo-divider i { font-size: 26px; }

.rc-ciclo-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 16px; border-top: 1px solid var(--line-d); flex-wrap: wrap; }
.rc-ciclo-foot p { font-size: 14px; color: rgba(255,255,255,.55); }
/* :hover explícito — sin él, la regla global `a:hover{color:var(--ink)}`
   gana por especificidad (pesa más que una sola clase) y el texto se volvería
   del mismo tono oscuro que el fondo del slide, invisible. Mismo bug que ya
   apareció en .rc-btn-whatsapp. */
.rc-ciclo-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--color-mint-400); text-decoration: none; }
.rc-ciclo-link:hover { color: var(--color-mint-400); }
.rc-ciclo-link i { font-size: 16px; transition: transform .2s ease; }
.rc-ciclo-link:hover i { transform: translateX(3px); }

/* Slide "+ Y más" — mismo componente rc-ciclo-slide, layout propio dentro. */
.rc-ciclo-more-lead { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.65); max-width: 620px; }
.rc-ciclo-more-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.rc-ciclo-more-tag { font-family: var(--font-display); font-size: 13px; font-weight: 600; padding: 9px 16px; border-radius: var(--radius-pill); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.85); }
.rc-ciclo-more-cta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
.rc-ciclo-more-cta p { font-size: 13.5px; color: rgba(255,255,255,.5); max-width: 300px; }

.rc-ciclo-bottom-nav { justify-content: flex-end; }

/* ---------- Empezar / tiers ---------- */
.rc-empezar { max-width: 1200px; margin: 0 auto; padding: 96px 40px; }
.rc-empezar-intro { max-width: 720px; margin-bottom: 48px; }
.rc-empezar-flow { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 15px; font-weight: 600; color: var(--muted); }
.rc-tabs { display: inline-flex; background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: 5px; gap: 4px; margin-bottom: 16px; }
.rc-tab-btn { border: none; background: transparent; color: var(--muted); padding: 11px 20px; border-radius: 999px; font-size: 14.5px; font-weight: 600; transition: background .2s ease, color .2s ease; }
.rc-tab-btn[aria-selected="true"] { background: var(--ink); color: var(--white); }
.rc-tab-btn:hover { transform: none; }
.rc-tier-cap { font-size: 13.5px; color: var(--muted-d); margin-bottom: 24px; min-height: 1.4em; }

.rc-tier-panel { background: var(--ink); color: var(--white); border-radius: 24px; padding: 36px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: center; }
.rc-tier-rows { display: flex; flex-direction: column; gap: 2px; }
.rc-tier-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line-d); opacity: .35; transition: opacity .3s ease; }
.rc-tier-row.is-included { opacity: 1; }
.rc-tier-check { width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center; flex: none; transition: background .3s ease; }
.rc-tier-row.is-included .rc-tier-check { background: var(--accent); }
.rc-tier-check i { font-size: 11px; color: var(--ink); display: none; }
.rc-tier-row.is-included .rc-tier-check i { display: block; }
.rc-tier-row span:last-child { font-size: 15px; font-weight: 500; }
.rc-tier-side { text-align: right; }
.rc-tier-plazo { font-size: 13px; color: var(--muted-d); margin-bottom: 6px; }
.rc-tier-precio { font-size: 30px; font-weight: 700; font-family: var(--font-display); margin-bottom: 20px; }
.rc-tier-open { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: var(--white); padding: 13px 22px; border-radius: 999px; font-size: 14.5px; font-weight: 600; }
.rc-empezar-footnote { text-align: center; font-size: 14.5px; color: var(--muted-d); margin-top: 24px; }
.rc-empezar-footnote button { background: none; border: none; font-weight: 600; color: var(--accent); font-size: inherit; padding: 0; }
.rc-empezar-calc-wrap { text-align: center; margin-top: 24px; }

/* ---------- Carril de autoservicio (modo) ----------
   Va separado de las pestañas de nivel de servicio, no dentro. Los tres
   niveles son grados del mismo servicio con personas; modo es otra forma de
   entregarlo, y presentarlo como una cuarta pestaña lo convertiría en "el
   nivel barato". El filete superior y el fondo claro marcan justo eso: que
   aquí empieza otra cosa. */
.rc-lane {
  margin-top: 72px;
  padding-top: 56px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 44px;
  align-items: start;
}
.rc-lane-intro .rc-eyebrow { margin-bottom: 14px; }
.rc-lane-intro h3 { font: var(--text-display-md); letter-spacing: var(--tracking-tight); margin-bottom: 14px; }
.rc-lane-intro p { font-size: 16.5px; line-height: 1.6; color: var(--muted); margin-bottom: 24px; }
.rc-lane-intro strong { color: var(--ink); font-weight: 600; }
.rc-lane-note { font-size: 14px; color: var(--muted-d); margin-top: 14px !important; margin-bottom: 0 !important; }

.rc-lane-tablewrap { overflow-x: auto; }
.rc-lane-table { border-collapse: collapse; width: 100%; min-width: 460px; font-size: 15px; }
.rc-lane-caption {
  text-align: left; font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted-d); font-weight: 600; padding-bottom: 14px;
}
.rc-lane-table th, .rc-lane-table td {
  text-align: left; padding: 14px 16px; vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.rc-lane-table thead th {
  font-family: var(--font-display); font-size: 14px; font-weight: 600;
  color: var(--ink); border-bottom: 1.5px solid var(--ink);
}
.rc-lane-table thead th.is-modo { color: var(--accent); border-bottom-color: var(--accent); }
.rc-lane-table tbody th {
  font-size: 13.5px; font-weight: 500; color: var(--muted-d);
  width: 130px; white-space: nowrap;
}
.rc-lane-table tbody td { color: var(--muted); line-height: 1.5; }
.rc-lane-table tbody tr:last-child th,
.rc-lane-table tbody tr:last-child td { border-bottom: 0; color: var(--ink); font-weight: 600; }

/* ---------- Modals (service / calc / wizard) ---------- */
.rc-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(15,23,42,0.55); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 24px; animation: fadeIn .2s ease; }
.rc-overlay[hidden] { display: none; }
.rc-overlay.rc-overlay-wizard { z-index: 200; background: rgba(15,23,42,0.6); }
.rc-modal-panel { background: var(--white); border-radius: 24px; width: 600px; max-width: 100%; max-height: 84vh; overflow-y: auto; padding: 40px; position: relative; animation: popIn .22s var(--reveal-ease); }
.rc-modal-close { position: absolute; top: 20px; right: 20px; background: var(--paper); border: none; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--ink); }
.rc-close-ring { position: absolute; inset: -4px; width: 44px; height: 44px; pointer-events: none; opacity: 0; transition: opacity .2s ease; transform: rotate(-90deg); }
.rc-close-ring circle { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 122.5; stroke-dashoffset: 0; }
.rc-close-ring.is-active { opacity: 1; }
.rc-close-ring.is-active circle { stroke-dashoffset: 122.5; transition: stroke-dashoffset 5s linear; }
@media (prefers-reduced-motion: reduce) {
  .rc-close-ring { display: none; }
}
.rc-modal-num { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.rc-modal-panel h3 { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; margin: 12px 0 14px; }
.rc-modal-panel p { font-size: 16px; line-height: 1.55; color: var(--muted); margin-bottom: 22px; }
.rc-modal-meta { display: flex; gap: 20px; margin-bottom: 24px; padding: 16px 20px; background: var(--paper); border-radius: 14px; }
.rc-modal-meta-label { font-size: 11px; color: var(--muted-d); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.rc-modal-meta-value { font-size: 15px; font-weight: 600; margin-top: 4px; }
.rc-modal-meta-value.is-accent { color: var(--accent); }
.rc-modal-includes-label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted-d); margin-bottom: 12px; }
.rc-modal-includes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 28px; }
.rc-modal-includes div { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--ink); }
.rc-modal-includes i { font-size: 15px; color: var(--accent); margin-top: 2px; flex: none; }
.rc-modal-cta { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--accent); color: var(--white); padding: 16px; border-radius: 999px; font-size: 16px; font-weight: 600; }

.rc-ejemplos-contrast { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 20px 0 24px; }
.rc-ejemplos-contrast-col { background: var(--paper); border-radius: 14px; padding: 18px; }
.rc-ejemplos-contrast-col.is-after { background: var(--accent-soft); }
.rc-ejemplos-contrast-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted-d); margin-bottom: 8px; }
.rc-ejemplos-contrast-col.is-after .rc-ejemplos-contrast-label { color: var(--accent); }
.rc-ejemplos-contrast-col p { font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.rc-ejemplos-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.rc-ejemplos-list div { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--ink); }
.rc-ejemplos-list i { font-size: 15px; color: var(--accent); margin-top: 2px; flex: none; }
.rc-ejemplos-agentes { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }
.rc-ejemplos-agentes div { font-size: 13.5px; line-height: 1.5; color: var(--muted); padding: 10px 12px; background: var(--paper); border-radius: 10px; }
.rc-ejemplos-agentes strong { color: var(--ink); }
.rc-ejemplos-trust { font-size: 13px; line-height: 1.5; color: var(--muted-d); margin-bottom: 24px; padding: 12px 14px; background: var(--paper); border-radius: 10px; }

/* ---------- Demo ---------- */
.rc-demo { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 96px 40px; }
.rc-demo-intro { max-width: 760px; margin-bottom: 8px; }
.rc-demo-note { font-size: 15px; color: var(--muted-d); margin-top: 12px; font-style: italic; }
.rc-scatter { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 44px 0 6px; }
.rc-scatter-chip { display: flex; align-items: center; gap: 7px; background: var(--paper); border-radius: 999px; padding: 9px 14px; }
.rc-scatter-chip span { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.rc-scatter-arrow { display: block; text-align: center; margin: 6px auto 0; font-size: 18px; color: var(--muted-d); }

.rc-demo-frame { border: 1px solid var(--line); border-radius: 22px; overflow: hidden; margin-top: 20px; box-shadow: 0 30px 70px -50px rgba(23,24,28,0.35); }
.rc-demo-topbar { display: flex; align-items: center; gap: 8px; padding: 14px 20px; border-bottom: 1px solid var(--line); background: var(--paper); }
.rc-demo-tabs { display: flex; gap: 6px; padding: 14px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.rc-demo-tab { white-space: nowrap; border: none; background: transparent; color: var(--muted); padding: 10px 18px; border-radius: 999px; font-size: 14px; font-weight: 600; transition: background .2s ease, color .2s ease; }
.rc-demo-tab[aria-selected="true"] { background: var(--ink); color: var(--white); }
.rc-demo-body { background: var(--white); padding: 28px 30px; height: 480px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.rc-demo-panel[hidden] { display: none; }

.rc-demo-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 22px; }
.rc-demo-metric { position: relative; overflow: hidden; background: var(--paper); border-radius: 12px; padding: 16px; padding-bottom: 34px; }
.rc-demo-metric-label { font-size: 11px; color: var(--muted-d); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.rc-demo-metric-value-row { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; position: relative; z-index: 1; }
.rc-demo-metric-value { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rc-demo-metric-delta { display: inline-flex; align-items: center; gap: 2px; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; }
.rc-demo-metric-delta i { font-size: 10px; }
.rc-demo-metric-delta.is-up { background: var(--accent-soft); color: var(--accent); }
.rc-demo-metric-delta.is-down { background: var(--white); color: var(--muted-d); }
.rc-demo-metric-spark { position: absolute; left: 0; right: 0; bottom: 0; height: 24px; width: 100%; opacity: .4; }
.rc-demo-metric-spark polyline { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rc-demo-section-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted-d); margin-bottom: 10px; }
.rc-carga-rows { display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; }
.rc-carga-row-head { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; font-weight: 500; margin-bottom: 7px; }
.rc-carga-name { display: inline-flex; align-items: center; gap: 7px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rc-carga-row-head span:last-child { color: var(--muted); flex: none; }
.rc-carga-bar { height: 7px; background: var(--paper); border-radius: 4px; overflow: hidden; }
.rc-carga-bar-fill { height: 100%; border-radius: 4px; background: var(--accent); }
.rc-avatar-mini { width: 20px; height: 20px; border-radius: 50%; font-size: 9.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.rc-servicio-name .rc-avatar-mini { margin-right: 7px; vertical-align: middle; }
.rc-alertas { display: flex; flex-direction: column; gap: 8px; }
.rc-alerta { display: flex; gap: 8px; align-items: center; font-size: 13.5px; color: var(--ink); background: #FEF3C7; border-radius: 10px; padding: 9px 12px; }
.rc-alerta i { font-size: 14px; color: #92400E; flex: none; }

.rc-actividad { display: flex; flex-direction: column; gap: 2px; position: relative; }
.rc-actividad::before { content: ""; position: absolute; left: 15px; top: 6px; bottom: 6px; border-left: 1.5px dashed var(--line); }
.rc-actividad-row { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 8px 2px; }
.rc-actividad-icon { position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 50%; background: var(--white); border: 1px solid var(--line); color: var(--muted-d); display: flex; align-items: center; justify-content: center; flex: none; font-size: 13px; }
.rc-actividad-row.is-ia .rc-actividad-icon { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.rc-actividad-row.is-auto .rc-actividad-icon { background: var(--ink); border-color: transparent; color: var(--white); }
.rc-actividad-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-top: 5px; }
.rc-actividad-text { font-size: 13.5px; color: var(--ink); font-weight: 500; }
.rc-actividad-time { font-size: 11.5px; color: var(--muted-d); }
.rc-actividad-badge { display: inline-flex; align-items: center; gap: 4px; margin-top: 5px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 4px 9px; border-radius: 999px; flex: none; }
.rc-actividad-badge i { font-size: 10px; }
.rc-actividad-badge.is-ia { background: var(--accent-soft); color: var(--accent); }
.rc-actividad-badge.is-auto { background: var(--ink); color: var(--white); }

.rc-track-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.rc-track-title { font-size: 13px; font-weight: 600; }
.rc-track-status { font-size: 12.5px; color: var(--muted-d); margin-top: 2px; }
.rc-track-btn { display: flex; align-items: center; gap: 7px; background: var(--ink); color: var(--white); border: none; padding: 9px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.rc-track-btn.is-running { background: var(--paper); color: var(--muted); }
.rc-track-dots { display: flex; gap: 0; margin-bottom: 20px; }
.rc-track-dot { flex: 1; text-align: center; position: relative; }
.rc-track-dot-num { width: 22px; height: 22px; border-radius: 50%; background: var(--paper); color: var(--muted-d); display: flex; align-items: center; justify-content: center; margin: 0 auto 6px; font-size: 11px; font-weight: 700; transition: background .3s ease, color .3s ease; }
.rc-track-dot.is-active .rc-track-dot-num { background: var(--accent); color: var(--white); }
.rc-track-dot-label { font-size: 11px; color: var(--muted-d); font-weight: 600; }
.rc-track-dot.is-active .rc-track-dot-label { color: var(--ink); }
.rc-servicio-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); }
.rc-servicio-name { font-size: 14.5px; font-weight: 600; }
.rc-servicio-meta { font-size: 13px; color: var(--muted); margin-top: 3px; }
.rc-servicio-fecha { font-size: 12px; color: var(--muted-d); margin-top: 6px; }
.rc-status-badge { font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px; }
.rc-track-live { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px; border-radius: 12px; background: var(--accent-soft); margin-top: 4px; }
.rc-track-live[hidden] { display: none; }
.rc-track-live-detail { font-size: 13px; color: var(--ink); margin-top: 3px; }

.rc-equipo-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); }
.rc-equipo-meta { font-size: 13px; color: var(--muted); margin-top: 3px; }
.rc-equipo-side { text-align: right; flex: none; width: 120px; }
.rc-equipo-bar { height: 6px; background: var(--paper); border-radius: 3px; overflow: hidden; margin-top: 8px; }
.rc-equipo-bar-fill { height: 100%; background: var(--accent); border-radius: 3px; }

.rc-factura-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--line); }
.rc-factura-row span:first-child { font-size: 14.5px; font-weight: 500; }
.rc-factura-amount { font-size: 14px; font-weight: 700; font-family: var(--font-display); color: var(--accent); }

.rc-demo-cta-wrap { text-align: center; margin-top: 36px; }

/* ---------- Método ---------- */
.rc-metodo { background: var(--paper); padding: 96px 40px; }
.rc-metodo-inner { max-width: 1200px; margin: 0 auto; }
.rc-metodo-intro { max-width: 680px; margin-bottom: 56px; }
.rc-metodo-list { display: flex; flex-direction: column; position: relative; }
.rc-metodo-item { display: flex; gap: 22px; padding: 28px 0; border-top: 1px solid var(--line); position: relative; }
.rc-metodo-num { width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: var(--white); display: flex; align-items: center; justify-content: center; flex: none; font-family: var(--font-display); font-weight: 700; font-size: 14px; position: relative; z-index: 1; }
.rc-metodo-body { flex: 1; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: space-between; }
.rc-metodo-text { max-width: 520px; }
.rc-metodo-text h4 { font-size: 19px; font-weight: 600; margin-bottom: 6px; }
.rc-metodo-text p { font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.rc-metodo-tag-wrap { display: flex; align-items: center; gap: 10px; flex: none; }
.rc-metodo-tag-wrap i { font-size: 18px; color: var(--accent); }
.rc-metodo-tag { font-size: 12px; font-weight: 600; color: var(--accent); background: var(--accent-soft); padding: 5px 12px; border-radius: 999px; white-space: nowrap; }
/* progress line: a static track behind the numbered circles that fills in as items reveal — no scroll-jacking, just reflects reveal state */
.rc-metodo-line { position: absolute; left: 17px; top: 0; bottom: 0; width: 2px; background: var(--line); z-index: 0; }
.rc-metodo-line-fill { position: absolute; left: 0; top: 0; width: 100%; height: 0; background: var(--accent); transition: height .6s var(--reveal-ease); }

/* ---------- Fundador ---------- */
.rc-fundador { max-width: 1200px; margin: 0 auto; padding: 96px 40px; display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 72px; align-items: center; }
.rc-fundador-img { position: relative; width: 100%; max-width: 380px; }
.rc-fundador-bg { position: absolute; inset: 0 -20px -20px 0; background: var(--color-emerald-100); border-radius: 50%; z-index: 0; }
.rc-fundador-photo { position: relative; width: 100%; aspect-ratio: 1/1; border-radius: 50%; overflow: hidden; box-shadow: var(--shadow-lg); z-index: 1; background: var(--color-gray-100); }
/* El retrato va envuelto en <picture> (WebP con JPEG detras), asi que el hijo
   directo del circulo es el <picture>: sin esto se queda en linea y la imagen
   no llega a llenar el contenedor. */
.rc-fundador-photo picture { display: block; width: 100%; height: 100%; }
.rc-fundador-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; transform: scale(1.1); }
.rc-fundador-badge { position: absolute; left: 16px; bottom: 8px; z-index: 2; background: var(--color-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 14px 20px; display: flex; align-items: center; gap: 12px; max-width: calc(100% - 32px); }
.rc-fundador-badge-icon { width: 38px; height: 38px; border-radius: var(--radius-md); background: var(--color-slate-900); display: flex; align-items: center; justify-content: center; flex: none; padding: 8px; }
.rc-fundador-badge-name { font-size: 15px; font-weight: 700; font-family: var(--font-display); line-height: 1.3; }
.rc-fundador-badge-role { font-size: 13px; color: var(--text-muted); line-height: 1.3; }
.rc-fundador h2 { font-size: 38px; line-height: 1.16; font-weight: 600; letter-spacing: -0.02em; }
.rc-fundador p { font-size: 17px; line-height: 1.55; color: var(--muted); margin: 20px 0 16px; max-width: 580px; }
/* Sin esto, <strong> hereda el gris de .rc-fundador p — negrita pero
   sin más contraste, no ayuda al scanning. Mismo patrón que ya usa
   .rc-ejemplos-agentes strong en otra sección. */
.rc-fundador p strong { color: var(--ink); font-weight: 700; }
.rc-fundador-areas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; max-width: 440px; }
.rc-fundador-area { display: flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 500; color: var(--ink); }
.rc-fundador-area i { font-size: 14px; color: var(--accent); flex: none; }

.rc-btn-outline { display: inline-flex; align-items: center; gap: 10px; background: var(--paper); color: var(--ink); padding: 15px 26px; border-radius: 999px; font-size: 15px; font-weight: 600; border: 1.5px solid var(--line); }

/* ---------- Calculadora ---------- */
.rc-calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.rc-calc-inputs { background: var(--paper); border-radius: 18px; padding: 26px; }
.rc-calc-field { margin-bottom: 22px; }
.rc-calc-field:last-child { margin-bottom: 0; }
.rc-calc-field-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.rc-calc-field-head label { font-size: 13.5px; font-weight: 500; }
.rc-calc-field-value { font-size: 19px; font-weight: 700; color: var(--accent); font-family: var(--font-display); }
.rc-calc-result { background: var(--ink); color: var(--white); border-radius: 18px; padding: 26px; }
.rc-calc-result-label { font-size: 12.5px; color: var(--muted-d); letter-spacing: .06em; text-transform: uppercase; font-weight: 600; margin-bottom: 12px; }
.rc-calc-result-value { font-size: 38px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.rc-calc-result-rows { display: flex; flex-direction: column; gap: 8px; margin: 22px 0; }
.rc-calc-result-row { display: flex; justify-content: space-between; padding: 12px 14px; background: rgba(255,255,255,0.07); border-radius: 12px; font-size: 13px; }
.rc-calc-result-row span:first-child { color: var(--muted-d); }
.rc-calc-result-row span:last-child { font-weight: 600; }
.rc-calc-result-row.is-accent span:last-child { color: var(--accent); }
.rc-calc-cta { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--accent); color: var(--white); border: none; padding: 14px; border-radius: 999px; font-size: 14.5px; font-weight: 600; }

/* ---------- FAQ ---------- */
.rc-faq { background: var(--paper); padding: 88px 40px; }
.rc-faq-inner { max-width: 760px; margin: 0 auto; }
.rc-faq h2 { font-size: 34px; font-weight: 600; letter-spacing: -0.02em; text-align: center; margin-bottom: 36px; }
.rc-faq-list { display: flex; flex-direction: column; gap: 12px; }
.rc-faq-item { background: var(--white); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.rc-faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; background: none; border: none; text-align: left; font-size: 16px; font-weight: 600; color: var(--ink); }
.rc-faq-q i { font-size: 18px; color: var(--muted); flex: none; transition: transform .2s ease; }
.rc-faq-item[data-open="true"] .rc-faq-q i { transform: rotate(180deg); }
.rc-faq-a { padding: 0 22px 20px; font-size: 15px; line-height: 1.6; color: var(--muted); }
.rc-faq-a[hidden] { display: none; }

/* ---------- CTA final & footer ---------- */
.rc-cta-final { background: var(--ink); color: var(--white); padding: 88px 40px; }
.rc-cta-inner { max-width: 760px; margin: 0 auto; text-align: center; }
.rc-cta-inner h2 { font-size: 38px; line-height: 1.16; font-weight: 600; letter-spacing: -0.02em; }
.rc-cta-inner p { font-size: 17px; color: var(--muted-d); margin: 18px auto 32px; max-width: 540px; line-height: 1.6; }
.rc-cta-actions { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.rc-btn-whatsapp { display: inline-flex; align-items: center; gap: 10px; color: var(--white); text-decoration: none; border: 1.5px solid var(--line-d); padding: 18px 28px; border-radius: 999px; font-size: 17px; font-weight: 600; transition: color .2s ease, border-color .2s ease; }
.rc-btn-whatsapp:hover { color: var(--accent); border-color: var(--accent); }
.rc-cta-footnote { font-size: 13px; color: var(--muted-d); margin-top: 18px; }

.rc-footer { background: var(--ink); color: var(--muted-d); padding: 44px 40px; border-top: 1px solid var(--line-d); }
.rc-footer-row { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.rc-footer-row img { height: 28px; width: auto; }
.rc-footer-mid { font-size: 14px; }
.rc-footer-links { display: flex; align-items: center; gap: 20px; }
.rc-footer-links a { color: var(--white); text-decoration: none; font-size: 14px; display: inline-flex; align-items: center; }
.rc-footer-links svg { width: 20px; height: 20px; fill: currentColor; }

/* ---------- Wizard ---------- */
.rc-wizard-panel { background: var(--white); border-radius: 24px; width: 560px; max-width: 100%; max-height: 90vh; overflow-y: auto; padding: 36px 36px 32px; position: relative; animation: popIn .22s var(--reveal-ease); }
.rc-wizard-progress { height: 4px; background: var(--line); border-radius: 2px; margin-bottom: 28px; overflow: hidden; }
.rc-wizard-progress-fill { height: 100%; background: var(--accent); border-radius: 2px; transition: width .25s ease; }
.rc-wizard-step[hidden] { display: none; }
.rc-wizard-step h3 { font-size: 20px; font-weight: 600; margin-bottom: 18px; }
.rc-wizard-hint { font-size: 13px; color: var(--muted-d); margin-bottom: 16px; }
.rc-wizard-options { display: flex; flex-direction: column; gap: 8px; }
.rc-option-btn { border: 1.5px solid var(--line); background: var(--white); padding: 14px 16px; border-radius: 12px; font-size: 15px; font-weight: 500; color: var(--ink); }
.rc-option-btn[aria-pressed="true"], .rc-option-btn.is-selected { border-color: var(--accent); background: var(--accent-soft); }
.rc-option-check { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--line); background: var(--white); display: flex; align-items: center; justify-content: center; flex: none; margin-right: 10px; }
.rc-option-btn.is-selected .rc-option-check { border-color: var(--accent); background: var(--accent); }
.rc-option-check i { font-size: 12px; color: var(--white); display: none; }
.rc-option-btn.is-selected .rc-option-check i { display: block; }
.rc-option-multi { display: flex; align-items: center; }
.rc-wizard-continue { width: 100%; background: var(--ink); color: var(--white); border: none; padding: 14px; border-radius: 999px; font-size: 15px; font-weight: 600; margin-top: 16px; }
.rc-wizard-submit { width: 100%; background: var(--accent); color: var(--white); border: none; padding: 15px; border-radius: 999px; font-size: 15px; font-weight: 600; }
.rc-wizard-submit:disabled { opacity: .5; cursor: not-allowed; }
.rc-wizard-error { font-size: 13.5px; color: var(--danger); margin: -6px 0 14px; line-height: 1.5; }
.rc-wizard-error[hidden] { display: none; }
.rc-wizard-error a { color: inherit; text-decoration: underline; }
/* Honeypot — invisible to real visitors, bait for bots. Not display:none so
   it stays a real form field; aria-hidden + tabindex=-1 keep it out of the
   accessible tree and tab order for people using assistive tech. */
.rc-hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.rc-wizard-back { margin-top: 16px; display: flex; align-items: center; gap: 6px; background: none; border: none; color: var(--muted); font-size: 13.5px; font-weight: 500; }
.rc-wizard-back[hidden] { display: none; }
.rc-wizard-done { text-align: center; padding: 24px 0; }
.rc-wizard-done[hidden] { display: none; }
.rc-wizard-done i { font-size: 44px; color: var(--accent); }
.rc-wizard-done h3 { font-size: 24px; font-weight: 600; margin: 18px 0 10px; }
.rc-wizard-done p { font-size: 15px; color: var(--muted); line-height: 1.6; margin-bottom: 24px; }
.rc-wizard-done-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.rc-wizard-done-actions a:first-child { text-decoration: none; color: var(--ink); border: 1.5px solid var(--line); padding: 12px 20px; border-radius: 999px; font-size: 14px; font-weight: 600; }
.rc-wizard-done-actions a:last-child { text-decoration: none; color: var(--white); background: var(--accent); padding: 12px 20px; border-radius: 999px; font-size: 14px; font-weight: 600; }
.rc-wizard-form { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
textarea.rc-input { resize: vertical; margin-bottom: 16px; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  /* El menú cabe en una fila hasta aquí: cuatro enlaces más el CTA suman
     unos 684px y, con el logotipo, la fila necesita ~970px. Llegó a tener
     siete enlaces y entonces pedía 1230px, así que este corte tuvo que
     subir a 1200 y la hamburguesa salía en cualquier portátil sin
     maximizar. Antes de añadir un quinto enlace, mide: cada uno son entre
     50 y 145px más 22 de separación. */
  .rc-nav-link { display: none !important; }
  .rc-nav-mobile-btn { display: flex !important; }
  .rc-hero { grid-template-columns: 1fr !important; padding: 64px 32px 72px !important; gap: 44px !important; }
  .rc-fundador { grid-template-columns: 1fr !important; padding: 72px 32px !important; gap: 44px !important; }
  .rc-hero h1 { font-size: 40px !important; }
  .rc-hero-lead { font-size: 18px !important; }
  section h2 { font-size: 32px !important; }
  .rc-fundador-img { max-width: 300px !important; margin: 0 auto !important; }
  .rc-tier-panel { grid-template-columns: 1fr !important; }
  .rc-lane { grid-template-columns: 1fr !important; gap: 36px !important; }
  .rc-transform-row { flex-direction: column !important; }
  .rc-transform-hub { margin: 0 !important; }
  .rc-flow-arrow { transform: rotate(90deg); }
  .rc-calc-grid { grid-template-columns: 1fr !important; }
  .rc-demo-metrics { grid-template-columns: 1fr !important; }
  /* Solo el rail de "El problema" — el de los ciclos (.rc-ciclo-track) ya
     resuelve su propio ancho con min(880px,100%), no toques ese selector
     aquí o le robas la columna a las comparativas Hoy/Con Rocapia.
     % en vez de vw: % se resuelve contra el ancho real de la propia pista
     (ya descuenta el padding de .rc-sistema), vw no — con vw, en un
     viewport de ~1000px la siguiente tarjeta no asomaba nada (comprobado:
     0% visible). Con % de la pista, ~1 tarjeta entera + ~30% de la
     siguiente en todo este rango, de forma consistente. */
  #problemaRail { grid-auto-columns: 74% !important; }
  /* .rc-fugas (eficiencia-operativa): de 4 a 2 columnas — recalculamos qué
     borde derecho/inferior desaparece para la rejilla 2x2. */
  .rc-fugas { grid-template-columns: repeat(2, 1fr) !important; }
  .rc-fuga { border-right: 1px solid var(--line) !important; border-bottom: 1px solid var(--line) !important; }
  .rc-fuga:nth-child(4n) { border-right: 1px solid var(--line) !important; }
  .rc-fuga:nth-child(2n) { border-right: none !important; }
  .rc-fuga:nth-last-child(-n+4) { border-bottom: 1px solid var(--line) !important; }
  .rc-fuga:nth-last-child(-n+2) { border-bottom: none !important; }
}
@media (max-width: 768px) {
  .rc-hero { grid-template-columns: 1fr !important; padding: 52px 24px 60px !important; gap: 36px !important; }
  .rc-hero h1 { font-size: 28px !important; line-height: 1.15 !important; }
  .rc-hero-mcard-wrap { display: block !important; }
  .rc-hero-visual { display: none !important; }
  .rc-chaos-row { gap: 8px !important; }
  .rc-modal-panel { width: 94vw !important; max-height: 88vh !important; }
  .rc-wizard-panel { width: 94vw !important; max-height: 90vh !important; }
  /* Hero channel intake step becomes a compact single line instead of vanishing —
     mobile users still see the ingestion moment of the demo. */
  .rc-hero-extra { padding: 12px 16px 0; flex-wrap: wrap; }
  .rc-channel-chip span { display: none; }
  .rc-channel-chip { padding: 7px; }
  .rc-ejemplos-contrast { grid-template-columns: 1fr !important; }
  .rc-demo-body { height: 420px !important; }
  /* .rc-fugas (eficiencia-operativa): una sola columna, cada tarjeta se
     apila, sin borde derecho y con borde inferior salvo la última. */
  .rc-fugas { grid-template-columns: 1fr !important; }
  .rc-fuga { border-right: none !important; border-bottom: 1px solid var(--line) !important; }
  .rc-fuga:last-child { border-bottom: none !important; }
  /* Rails: flechas fuera (móvil se recorre por gesto táctil), una tarjeta/slide
     por pantalla y las columnas Hoy/Con Rocapia se apilan (Hoy primero, ya es
     la primera en el DOM). */
  .rc-rail-arrow { display: none !important; }
  .rc-sistema { padding: 56px 24px 40px !important; }
  /* 87% (no vw): en móvil el objetivo es "una tarjeta por pantalla" con
     solo un asomo de la siguiente, no el ~37% de desktop — 87% de la
     pista deja ese asomo pequeño mientras la tarjeta activa sigue siendo
     la protagonista clara. */
  #problemaRail { grid-auto-columns: 87% !important; }
  .rc-ciclos-dark { padding: 48px 20px 56px !important; }
  .rc-ciclo-track { grid-auto-columns: 92vw !important; }
  .rc-ciclo-slide { padding: 22px !important; }
  /* La columna central "auto" (el divisor »») se apila también al pasar a
     1fr — queda como su propia fila entre Hoy y Tu operación optimizada.
     Se rota 90° para que apunte hacia abajo, mismo patrón que ya usa
     .rc-flow-arrow en la sección "La transformación". */
  .rc-ciclo-compare { grid-template-columns: 1fr !important; }
  .rc-ciclo-divider i { transform: rotate(90deg); }
  /* Tier tabs: labels are full phrases now, not single words — on phone
     widths they no longer fit a pill segmented control, so let the strip
     scroll horizontally with a snap-per-tab feel instead of wrapping. */
  .rc-tabs { display: flex !important; max-width: 100%; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .rc-tabs::-webkit-scrollbar { display: none; }
  .rc-tab-btn { white-space: nowrap; flex: none; scroll-snap-align: center; }
}
@media (max-width: 480px) {
  .rc-hero h1 { font-size: 26px !important; }
  section h2 { font-size: 25px !important; }
}
@media (max-width: 560px) {
  /* Logo + CTA + hamburger no longer fit on one row at phone widths —
     drop the CTA from the top bar and offer it inside the mobile menu instead. */
  .rc-nav-row { padding: 16px 20px !important; }
  .rc-nav-cta { display: none !important; }
  .rc-nav-cta-mobile { display: flex !important; align-items: center; justify-content: center; }
}