/* =============================================================================
   roboRobin — portada, términos y página de error
   Hoja aparte de style.css: aquí vive solo el sitio público. Los paneles de la
   aplicación siguen usando style.css sin tocarse.
   Prefijo rb- para no chocar con las clases rr- de la app.
   ============================================================================= */

:root {
  --rb-red: #FF2E2E;
  --rb-red-dark: #D91B1B;
  --rb-red-ink: #B01212;
  --rb-red-soft: #FFF0EE;
  --rb-red-soft-2: #FFE2DD;
  --rb-ink: #1A1A1A;
  --rb-ink-2: #141414;
  --rb-body: #5B6470;
  --rb-line: #ECECEC;
  --rb-white: #FFFFFF;

  --rb-ease: cubic-bezier(.22, .61, .36, 1);
  --rb-spring: cubic-bezier(.34, 1.42, .64, 1);

  --rb-nav-h: 74px;
}

body.rb-page {
  background: var(--rb-white);
  color: var(--rb-body);
  font-family: var(--rr-font);
  overflow-x: hidden;
}

.rb-page h1, .rb-page h2, .rb-page h3, .rb-page h4 {
  color: var(--rb-ink);
  letter-spacing: -.035em;
  font-weight: 800;
  line-height: 1.06;
}

.rb-wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 28px; }
@media (max-width: 620px) { .rb-wrap { padding: 0 20px; } }

.rb-red { color: var(--rb-red); }

/* Pastilla de sección: "Todo lo que necesitas", "Planes y precios"… */
.rb-tag {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--rb-red-soft); color: var(--rb-red);
  font-size: 13.5px; font-weight: 700;
  padding: 8px 18px; border-radius: 999px;
}
.rb-tag .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--rb-red);
  animation: rb-pulse 2.2s var(--rb-ease) infinite;
}
@keyframes rb-pulse {
  0%, 70%, 100% { transform: scale(1); opacity: 1; }
  85% { transform: scale(1.7); opacity: .45; }
}

.rb-section { padding: 96px 0; }
.rb-section-head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.rb-section-head h2 { font-size: clamp(32px, 4.4vw, 52px); margin: 18px 0 16px; }
.rb-section-head p { font-size: 17.5px; line-height: 1.7; margin: 0; }

/* =============================================================================
   Botones
   ============================================================================= */

.rb-btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border: 2px solid transparent; border-radius: 999px;
  padding: 15px 30px;
  font: inherit; font-size: 15.5px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
  transition: transform .22s var(--rb-spring), box-shadow .25s var(--rb-ease),
              background .2s var(--rb-ease), color .2s var(--rb-ease), border-color .2s var(--rb-ease);
}
/* Brillo que barre el botón al pasar el mouse */
.rb-btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 45%;
  left: -60%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .38), transparent);
  transition: left .55s var(--rb-ease);
}
.rb-btn:hover::after { left: 130%; }
.rb-btn:active { transform: translateY(1px) scale(.98); }

.rb-btn-primary { background: var(--rb-red); color: #fff; box-shadow: 0 8px 22px rgba(255, 46, 46, .32); }
.rb-btn-primary:hover { background: var(--rb-red-dark); transform: translateY(-3px); box-shadow: 0 14px 32px rgba(255, 46, 46, .4); }

.rb-btn-white { background: #fff; color: var(--rb-ink); border-color: var(--rb-line); box-shadow: 0 6px 18px rgba(20, 20, 20, .07); }
.rb-btn-white:hover { transform: translateY(-3px); border-color: #DCDCDC; box-shadow: 0 12px 26px rgba(20, 20, 20, .12); }

.rb-btn-onred { background: #fff; color: var(--rb-red); }
.rb-btn-onred:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0, 0, 0, .18); }
.rb-btn-ghost-white { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
.rb-btn-ghost-white:hover { background: rgba(255, 255, 255, .12); border-color: #fff; transform: translateY(-3px); }

.rb-btn-sm { padding: 11px 22px; font-size: 14.5px; }
.rb-btn-block { width: 100%; }

/* =============================================================================
   Barra de navegación
   ============================================================================= */

.rb-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  height: var(--rb-nav-h);
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: height .3s var(--rb-ease), box-shadow .3s var(--rb-ease), border-color .3s var(--rb-ease);
}
.rb-nav.scrolled { height: 62px; border-bottom-color: var(--rb-line); box-shadow: 0 6px 24px rgba(20, 20, 20, .06); }
.rb-nav-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 22px; }

.rb-logo { display: flex; align-items: center; gap: 10px; font-size: 21px; font-weight: 800; letter-spacing: -.03em; color: var(--rb-ink); }
.rb-logo .rr-mascot { width: 36px; height: 36px; }
.rb-logo b { color: var(--rb-red); font-weight: 800; }

.rb-nav-links { display: flex; align-items: center; gap: 32px; }
.rb-nav-links a {
  position: relative; font-size: 15.5px; font-weight: 600; color: #3F4650;
  transition: color .2s var(--rb-ease);
}
.rb-nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 2px;
  background: var(--rb-red); border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--rb-ease);
}
.rb-nav-links a:hover { color: var(--rb-red); }
.rb-nav-links a:hover::after { transform: scaleX(1); }

.rb-nav-cta { display: flex; align-items: center; gap: 18px; }
.rb-nav-cta .rb-login { font-size: 15.5px; font-weight: 600; color: var(--rb-ink); }
.rb-nav-cta .rb-login:hover { color: var(--rb-red); }

.rb-burger { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.rb-burger span { display: block; width: 22px; height: 2.5px; background: var(--rb-ink); border-radius: 2px; transition: transform .3s var(--rb-ease), opacity .2s; }
.rb-burger span + span { margin-top: 5px; }
.rb-burger.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.rb-burger.open span:nth-child(2) { opacity: 0; }
.rb-burger.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

@media (max-width: 940px) {
  .rb-burger { display: block; }
  .rb-nav-links, .rb-nav-cta .rb-login { display: none; }
  .rb-nav-links {
    position: absolute; top: var(--rb-nav-h); left: 0; right: 0;
    flex-direction: column; gap: 0; align-items: stretch;
    background: #fff; border-bottom: 1px solid var(--rb-line);
    box-shadow: 0 20px 40px rgba(20, 20, 20, .1);
    padding: 8px 0;
  }
  .rb-nav-links.open { display: flex; animation: rb-drop .3s var(--rb-ease) both; }
  .rb-nav-links a { padding: 14px 28px; font-size: 16px; }
  .rb-nav-links a::after { display: none; }
  @keyframes rb-drop { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
}

/* =============================================================================
   Héroe
   ============================================================================= */

.rb-hero {
  position: relative; overflow: hidden;
  padding: calc(var(--rb-nav-h) + 74px) 0 90px;
  /* Patrón de puntos como el del diseño */
  background-image: radial-gradient(rgba(255, 46, 46, .13) 1.4px, transparent 1.4px);
  background-size: 26px 26px;
}
.rb-hero::before, .rb-hero::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 46, 46, .13), transparent 68%);
  filter: blur(10px);
}
.rb-hero::before { width: 520px; height: 520px; top: -140px; right: -120px; animation: rb-drift 16s ease-in-out infinite; }
.rb-hero::after { width: 420px; height: 420px; bottom: -180px; left: -160px; animation: rb-drift 20s ease-in-out infinite reverse; }
@keyframes rb-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(30px, 24px) scale(1.08); }
}

.rb-hero-grid { position: relative; display: grid; grid-template-columns: 1.02fr .98fr; gap: 40px; align-items: center; }
@media (max-width: 980px) { .rb-hero-grid { grid-template-columns: 1fr; gap: 60px; } }

.rb-hero h1 { font-size: clamp(42px, 6.1vw, 74px); margin: 22px 0 26px; }
.rb-hero h1 span { display: block; }
.rb-hero-lead { font-size: 18.5px; line-height: 1.75; max-width: 560px; margin: 0 0 34px; }
.rb-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* Nota sosa bajo los botones: nada de cifras, solo lo que sí es cierto. */
.rb-hero-note { margin-top: 34px; }
.rb-hero-note span {
  display: inline-block;
  font-size: 14px; color: #8A93A0;
  border-left: 3px solid var(--rb-red-soft-2);
  padding-left: 12px;
}

/* Escena de Robin con sus tarjetas flotantes */
.rb-scene { position: relative; display: flex; align-items: center; justify-content: center; min-height: 440px; }
.rb-scene-ring {
  position: absolute; width: min(400px, 78vw); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, var(--rb-red-soft-2), var(--rb-red-soft) 62%, rgba(255, 240, 238, 0) 74%);
  animation: rb-breath 7s var(--rb-ease) infinite;
}
@keyframes rb-breath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.rb-scene-ring::after {
  content: ""; position: absolute; inset: 6%;
  border-radius: 50%; border: 2px dashed rgba(255, 46, 46, .22);
  animation: rb-spin-slow 26s linear infinite;
}
@keyframes rb-spin-slow { to { transform: rotate(360deg); } }

.rb-scene .rr-mascot { position: relative; z-index: 2; width: min(250px, 52vw); height: min(250px, 52vw); }

.rb-float {
  position: absolute; z-index: 3;
  background: #fff; border-radius: 16px;
  box-shadow: 0 10px 34px rgba(20, 20, 20, .12);
  padding: 13px 17px;
  animation: rb-floaty 5s var(--rb-ease) infinite;
}
.rb-float small { display: block; font-size: 12px; color: #8A93A0; margin-bottom: 5px; }
.rb-float strong { font-size: 15px; color: var(--rb-ink); font-weight: 700; }

.rb-float-1 { top: 12%; left: -2%; animation-delay: .2s; }
.rb-float-2 { top: 6%; right: 1%; background: var(--rb-red); box-shadow: 0 12px 34px rgba(255, 46, 46, .35); animation-delay: 1.4s; }
.rb-float-2 small { color: rgba(255, 255, 255, .78); }
.rb-float-2 strong { color: #fff; font-size: 19px; }
.rb-float-3 { bottom: 12%; right: -3%; animation-delay: .8s; }

/* El flotar y el parallax comparten el mismo transform, y una animación le
   gana siempre a un estilo en línea. Por eso el parallax no escribe transform:
   escribe estas variables, que los fotogramas leen en vivo. */
@keyframes rb-floaty {
  0%, 100% { transform: translate3d(var(--px, 0px), var(--py, 0px), 0) rotate(var(--pr, 0deg)); }
  50% { transform: translate3d(var(--px, 0px), calc(var(--py, 0px) - 13px), 0) rotate(calc(var(--pr, 0deg) - 1deg)); }
}

.rb-dots { display: flex; gap: 5px; align-items: center; margin-top: 3px; }
.rb-dots i { width: 17px; height: 17px; border-radius: 5px; background: var(--rb-line); display: block; }
.rb-dots i.on { background: var(--rb-red); }
.rb-dots span { font-size: 12px; color: #8A93A0; margin-left: 5px; }

@media (max-width: 980px) {
  .rb-float-1 { left: 2%; }
  .rb-float-2 { right: 2%; }
  .rb-float-3 { right: 4%; }
}
@media (max-width: 560px) {
  .rb-scene { min-height: 360px; }
  .rb-float { padding: 10px 13px; transform: scale(.86); }
}

/* =============================================================================
   Funciones
   ============================================================================= */

.rb-features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 940px) { .rb-features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .rb-features-grid { grid-template-columns: 1fr; } }

.rb-feature {
  border: 1px solid var(--rb-line); border-radius: 20px;
  padding: 30px 28px 32px; background: #fff;
  transition: transform .32s var(--rb-ease), box-shadow .32s var(--rb-ease), border-color .32s var(--rb-ease);
}
.rb-feature.tinted { background: var(--rb-red-soft); border-color: transparent; }
.rb-feature:hover { transform: translateY(-8px); box-shadow: 0 22px 46px rgba(20, 20, 20, .1); border-color: transparent; }
.rb-feature-ic {
  width: 50px; height: 50px; border-radius: 14px;
  background: var(--rb-red-soft-2); color: var(--rb-red);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
  transition: transform .35s var(--rb-spring), background .3s var(--rb-ease);
}
.rb-feature.tinted .rb-feature-ic { background: #fff; }
.rb-feature:hover .rb-feature-ic { transform: rotate(-8deg) scale(1.1); }
.rb-feature-ic svg { width: 24px; height: 24px; }
.rb-feature h3 { font-size: 19.5px; margin: 0 0 10px; letter-spacing: -.025em; }
.rb-feature p { font-size: 15px; line-height: 1.65; margin: 0; }

/* =============================================================================
   ¿Cómo funciona? (sección oscura)
   ============================================================================= */

.rb-how { background: var(--rb-ink-2); color: rgba(255, 255, 255, .68); }
.rb-how h2, .rb-how h3 { color: #fff; }
.rb-how .rb-tag { background: rgba(255, 46, 46, .16); color: #FF6B6B; }
.rb-how .rb-section-head p { color: rgba(255, 255, 255, .6); }

.rb-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
@media (max-width: 900px) { .rb-steps { grid-template-columns: repeat(2, 1fr); gap: 38px; } }
@media (max-width: 520px) { .rb-steps { grid-template-columns: 1fr; } }

.rb-step { position: relative; }
/* Línea que une un paso con el siguiente: se dibuja al entrar en pantalla */
.rb-step:not(:last-child)::after {
  content: ""; position: absolute; top: 32px; left: 78px; right: -26px; height: 1px;
  background: rgba(255, 255, 255, .18);
  transform: scaleX(0); transform-origin: left;
  transition: transform .8s var(--rb-ease) .35s;
}
.rb-step.in:not(:last-child)::after { transform: scaleX(1); }
@media (max-width: 900px) { .rb-step::after { display: none !important; } }

.rb-step-n {
  width: 64px; height: 64px; border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 800; letter-spacing: -.03em;
  background: rgba(255, 46, 46, .16); color: #FF6B6B;
  margin-bottom: 22px;
  transition: transform .35s var(--rb-spring), background .3s var(--rb-ease), color .3s var(--rb-ease);
}
.rb-step:first-child .rb-step-n, .rb-step:hover .rb-step-n { background: var(--rb-red); color: #fff; box-shadow: 0 10px 26px rgba(255, 46, 46, .4); }
.rb-step:hover .rb-step-n { transform: translateY(-5px) scale(1.05); }
.rb-step h3 { font-size: 19px; margin: 0 0 10px; }
.rb-step p { font-size: 15px; line-height: 1.65; margin: 0; }

/* Cinta de materias: dos filas que corren en sentidos opuestos y no se
   detienen nunca, ni al pasar el mouse por encima.
   El separador va en margin-right y no en gap: así el ancho del carril es
   exactamente el doble del contenido y el translateX(-50%) empalma sin salto. */
.rb-marquee {
  display: grid; gap: 14px; margin-top: 74px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.rb-marquee-row { overflow: hidden; }
.rb-marquee-track {
  display: flex; width: max-content;
  animation: rb-slide 38s linear infinite;
  will-change: transform;
}
.rb-marquee-row.reverse .rb-marquee-track { animation-duration: 48s; animation-direction: reverse; }
@keyframes rb-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.rb-marquee span {
  margin-right: 14px;
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px;
  background: rgba(255, 255, 255, .03);
  padding: 11px 22px; font-size: 14.5px; color: rgba(255, 255, 255, .8);
  white-space: nowrap;
  transition: border-color .3s var(--rb-ease), color .3s var(--rb-ease), background .3s var(--rb-ease);
}
.rb-marquee span:hover { border-color: var(--rb-red); background: rgba(255, 46, 46, .14); color: #fff; }

@media (max-width: 640px) {
  .rb-marquee { margin-top: 54px; }
  .rb-marquee span { font-size: 13.5px; padding: 10px 17px; }
}

/* =============================================================================
   Hecho para todos (pestañas)
   ============================================================================= */

.rb-tabs { display: flex; justify-content: center; margin-bottom: 52px; }
.rb-tabs-inner { position: relative; display: flex; background: #F4F5F7; border-radius: 999px; padding: 5px; }
/* La píldora roja se desliza entre pestañas */
.rb-tabs-pill {
  position: absolute; top: 5px; bottom: 5px; left: 5px;
  border-radius: 999px; background: var(--rb-red);
  box-shadow: 0 6px 18px rgba(255, 46, 46, .35);
  transition: transform .42s var(--rb-spring), width .42s var(--rb-spring);
}
.rb-tabs button {
  position: relative; z-index: 1;
  border: none; background: none; cursor: pointer;
  font: inherit; font-size: 15.5px; font-weight: 700; color: #5B6470;
  padding: 12px 30px; border-radius: 999px;
  transition: color .3s var(--rb-ease);
}
.rb-tabs button.on { color: #fff; }

.rb-panel { display: none; }
.rb-panel.on { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 940px) { .rb-panel.on { grid-template-columns: 1fr; gap: 40px; } }
.rb-panel h3 { font-size: clamp(26px, 3vw, 34px); margin: 0 0 18px; }
.rb-panel > div > p { font-size: 16.5px; line-height: 1.75; }

.rb-checks { list-style: none; padding: 0; margin: 26px 0 0; }
.rb-checks li { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; font-size: 16px; color: var(--rb-ink); }
.rb-checks li i {
  flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--rb-red); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-style: normal;
}
/* Entran una tras otra cuando el panel aparece */
.rb-panel.on .rb-checks li { animation: rb-in-left .5s var(--rb-ease) both; }
.rb-panel.on .rb-checks li:nth-child(1) { animation-delay: .05s; }
.rb-panel.on .rb-checks li:nth-child(2) { animation-delay: .13s; }
.rb-panel.on .rb-checks li:nth-child(3) { animation-delay: .21s; }
.rb-panel.on .rb-checks li:nth-child(4) { animation-delay: .29s; }
@keyframes rb-in-left { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }

/* Maqueta de conversación
   -----------------------------------------------------------------------------
   El guion lo escribe initChatDemo() en landing.js: va cambiando de tema y no
   se detiene nunca, ni al pasar el mouse. El registro tiene alto fijo y apila
   desde abajo, como un chat de verdad: así la sección no da saltos cada vez que
   entra un mensaje, y lo viejo se sale por arriba con un desvanecido. */
.rb-chat { background: var(--rb-red-soft); border-radius: 26px; padding: 26px; }

.rb-chat-log {
  height: 268px;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%);
  mask-image: linear-gradient(180deg, transparent, #000 14%);
}

.rb-msg { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 15px; }
.rb-msg:last-child { margin-bottom: 0; }
.rb-msg .rr-mascot { width: 34px; height: 34px; flex: 0 0 34px; }
.rb-scene .rr-pose, .rb-cta-bird .rr-pose { width: auto; height: auto; }
.rb-msg p {
  margin: 0; background: #fff; border-radius: 16px; border-top-left-radius: 5px;
  padding: 13px 16px; font-size: 14.5px; line-height: 1.55; color: var(--rb-ink);
  box-shadow: 0 3px 12px rgba(20, 20, 20, .05);
}
.rb-msg.me { justify-content: flex-end; }
.rb-msg.me p { background: var(--rb-red); color: #fff; border-radius: 16px; border-top-right-radius: 5px; box-shadow: 0 6px 18px rgba(255, 46, 46, .28); }

/* Cada mensaje entra por su cuenta, en el momento en que el guion lo suelta */
.rb-msg { animation: rb-in-up .45s var(--rb-ease) both; }
@keyframes rb-in-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Los tres puntitos de «Robin está escribiendo» */
.rb-typing {
  display: flex; align-items: center; gap: 5px;
  background: #fff; border-radius: 16px; border-top-left-radius: 5px;
  padding: 17px 18px;
  box-shadow: 0 3px 12px rgba(20, 20, 20, .05);
}
.rb-typing i {
  width: 6px; height: 6px; border-radius: 50%; background: #C9CFD8;
  animation: rb-typing 1.1s var(--rb-ease) infinite;
}
.rb-typing i:nth-child(2) { animation-delay: .15s; }
.rb-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes rb-typing {
  0%, 60%, 100% { transform: translateY(0); opacity: .45; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.rb-chat-bar { display: flex; gap: 10px; align-items: center; background: #fff; border-radius: 999px; padding: 7px 7px 7px 20px; margin-top: 20px; }
.rb-chat-bar span {
  flex: 1; font-size: 14.5px; color: #A6AEB9;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: opacity .3s var(--rb-ease);
}
.rb-chat-bar i {
  width: 40px; height: 40px; border-radius: 50%; background: var(--rb-red); color: #fff;
  flex: 0 0 40px;
  display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 17px;
  animation: rb-nudge 2.4s var(--rb-ease) infinite;
}
@keyframes rb-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }

@media (max-width: 560px) { .rb-chat-log { height: 244px; } }

/* =============================================================================
   Precios
   ============================================================================= */

.rb-prices { background: #FBFBFC; }
.rb-price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: center; }
@media (max-width: 940px) { .rb-price-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } }

.rb-price {
  background: #fff; border: 1px solid var(--rb-line); border-radius: 24px;
  padding: 34px 30px 36px;
  transition: transform .32s var(--rb-ease), box-shadow .32s var(--rb-ease);
}
.rb-price:hover { transform: translateY(-8px); box-shadow: 0 24px 50px rgba(20, 20, 20, .1); }
.rb-price .who { font-size: 15px; color: var(--rb-body); }
.rb-price .amount { font-size: 46px; font-weight: 800; color: var(--rb-ink); letter-spacing: -.045em; margin: 12px 0 6px; }
.rb-price .amount em { font-size: 17px; font-weight: 600; font-style: normal; color: var(--rb-body); }
.rb-price .for { font-size: 15px; margin: 0 0 26px; }
.rb-price ul { list-style: none; padding: 0; margin: 0 0 30px; }
.rb-price li { display: flex; gap: 10px; font-size: 15px; color: var(--rb-ink); margin-bottom: 13px; }
.rb-price li::before { content: "✓"; color: var(--rb-red); font-weight: 800; }

.rb-price.featured {
  background: var(--rb-red); border-color: transparent; color: #fff;
  transform: scale(1.045);
  box-shadow: 0 24px 56px rgba(255, 46, 46, .34);
}
.rb-price.featured:hover { transform: scale(1.045) translateY(-8px); }
.rb-price.featured .who, .rb-price.featured .for { color: rgba(255, 255, 255, .82); }
.rb-price.featured .amount, .rb-price.featured .amount em, .rb-price.featured li { color: #fff; }
.rb-price.featured li::before { color: #fff; }
@media (max-width: 940px) { .rb-price.featured, .rb-price.featured:hover { transform: none; } }

.rb-price-note { text-align: center; font-size: 14px; color: #9AA3AE; margin: 40px 0 0; }
.rb-price-note a { color: var(--rb-red); font-weight: 700; text-decoration: underline; }

/* =============================================================================
   Llamada final
   ============================================================================= */

.rb-cta { padding: 30px 0 110px; }
.rb-cta-band {
  position: relative;
  background: var(--rb-red); border-radius: 34px;
  padding: 88px 40px 66px; text-align: center; color: #fff;
  box-shadow: 0 30px 70px rgba(255, 46, 46, .3);
}
.rb-cta-band h2 { color: #fff; font-size: clamp(30px, 4.2vw, 48px); margin: 0 0 16px; }
.rb-cta-band p { color: rgba(255, 255, 255, .85); font-size: 17.5px; max-width: 560px; margin: 0 auto 34px; }
.rb-cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
/* Robin asomándose por arriba de la banda */
.rb-cta-bird { position: absolute; top: -58px; left: 50%; transform: translateX(-50%); }
.rb-cta-bird .rr-mascot { width: 116px; height: 116px; filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .18)); }

/* =============================================================================
   Pie
   ============================================================================= */

.rb-footer { border-top: 1px solid var(--rb-line); padding: 68px 0 34px; }
.rb-footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 34px; }
@media (max-width: 860px) { .rb-footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; } }
@media (max-width: 520px) { .rb-footer-grid { grid-template-columns: 1fr; } }
.rb-footer p { font-size: 15px; line-height: 1.7; max-width: 280px; margin: 16px 0 0; }
.rb-footer h4 { font-size: 15.5px; margin: 0 0 18px; letter-spacing: -.02em; }
.rb-footer ul { list-style: none; padding: 0; margin: 0; }
.rb-footer li { margin-bottom: 12px; }
.rb-footer li a { font-size: 15px; color: var(--rb-body); transition: color .2s var(--rb-ease), padding-left .2s var(--rb-ease); }
.rb-footer li a:hover { color: var(--rb-red); padding-left: 4px; }
.rb-footer-legal {
  border-top: 1px solid var(--rb-line); margin-top: 48px; padding-top: 26px;
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  font-size: 14px; color: #9AA3AE;
}
.rb-footer-legal a { color: #9AA3AE; }
.rb-footer-legal a:hover { color: var(--rb-red); }
.rb-footer-legal .socials { display: flex; gap: 20px; }

/* Aviso fijo de proyecto escolar */
.rb-help {
  position: fixed; right: 22px; bottom: 22px; z-index: 80;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--rb-ink); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700;
  box-shadow: 0 10px 26px rgba(20, 20, 20, .25);
  transition: transform .25s var(--rb-spring), background .25s var(--rb-ease);
}
.rb-help:hover { transform: scale(1.1) rotate(8deg); background: var(--rb-red); }
.rb-help-tip {
  position: fixed; right: 78px; bottom: 30px; z-index: 80;
  background: var(--rb-ink); color: #fff; font-size: 13px; font-weight: 600;
  padding: 8px 14px; border-radius: 10px; white-space: nowrap;
  opacity: 0; transform: translateX(8px); pointer-events: none;
  transition: opacity .25s var(--rb-ease), transform .25s var(--rb-ease);
}
.rb-help:hover + .rb-help-tip, .rb-help-tip.show { opacity: 1; transform: none; }

/* =============================================================================
   Animaciones de entrada (las activa landing.js)
   ============================================================================= */

[data-anim] { opacity: 0; will-change: transform, opacity; transition: opacity .8s var(--rb-ease), transform .8s var(--rb-ease); }
[data-anim="up"] { transform: translateY(38px); }
[data-anim="down"] { transform: translateY(-32px); }
[data-anim="left"] { transform: translateX(-52px); }
[data-anim="right"] { transform: translateX(52px); }
[data-anim="zoom"] { transform: scale(.9); }
[data-anim="flip"] { transform: perspective(800px) rotateX(14deg) translateY(30px); }
[data-anim].in { opacity: 1; transform: none; }

/* =============================================================================
   Términos y página de error
   ============================================================================= */

.rb-doc { padding: calc(var(--rb-nav-h) + 70px) 0 90px; }
.rb-doc-inner { max-width: 780px; margin: 0 auto; }
.rb-doc h1 { font-size: clamp(34px, 5vw, 52px); margin: 20px 0 18px; }
.rb-doc .rb-updated { font-size: 14.5px; color: #9AA3AE; margin-bottom: 40px; }
.rb-doc h2 { font-size: 23px; margin: 44px 0 14px; }
.rb-doc p, .rb-doc li { font-size: 16.5px; line-height: 1.78; }
.rb-doc ul { padding-left: 22px; }
.rb-doc li { margin-bottom: 10px; }
.rb-doc strong { color: var(--rb-ink); }

.rb-warn {
  border: 2px solid var(--rb-red); background: var(--rb-red-soft);
  border-radius: 20px; padding: 26px 28px; margin: 30px 0 44px;
}
.rb-warn h3 { margin: 0 0 10px; font-size: 20px; color: var(--rb-red-ink); }
.rb-warn p { margin: 0; color: #7A2020; font-size: 16px; }

.rb-error {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 100px 24px 60px;
  background-image: radial-gradient(rgba(255, 46, 46, .13) 1.4px, transparent 1.4px);
  background-size: 26px 26px;
}
.rb-error-inner { max-width: 560px; }
.rb-error .rr-mascot { width: 150px; height: 150px; margin: 0 auto 10px; }
/* El boceto del choque tiene mucho detalle (la pantalla rota, las chispas, el
   404 en el aire): necesita tamano para que se entienda. */
.rb-error .rr-pose {
  width: auto; height: auto;
  max-height: min(300px, 34vh);
  margin: 0 auto 4px;
}
/* Robin tapa un poco el numero, como si acabara de estrellarse contra el. */
.rb-error .rr-pose-error { margin-bottom: -26px; position: relative; z-index: 2; }
.rb-error .code {
  font-size: clamp(78px, 15vw, 132px); font-weight: 800; letter-spacing: -.06em;
  color: var(--rb-red); line-height: 1; margin: 0;
  text-shadow: 0 12px 34px rgba(255, 46, 46, .26);
  animation: rb-glitch 5s var(--rb-ease) infinite;
}
@keyframes rb-glitch {
  0%, 92%, 100% { transform: translate(0, 0); }
  93% { transform: translate(-3px, 2px) skewX(-3deg); }
  95% { transform: translate(3px, -2px) skewX(3deg); }
  97% { transform: translate(-2px, 0); }
}
.rb-error h1 { font-size: clamp(26px, 4vw, 38px); margin: 12px 0 14px; }
.rb-error p { font-size: 17px; line-height: 1.7; margin: 0 auto 32px; max-width: 460px; }
.rb-error-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.rb-error-detail {
  margin-top: 34px; font-size: 13.5px; color: #9AA3AE;
  font-family: var(--rr-mono); word-break: break-all;
}

/* =============================================================================
   Funciones — la zona que se ancla al hacer scroll
   -----------------------------------------------------------------------------
   El carril (.rb-showcase-track) es alto a propósito; dentro, el escenario se
   queda pegado arriba (sticky) mientras el carril pasa por la pantalla. Con ese
   recorrido landing.js escribe --open (0 → 1): primero la zona se abre —crece,
   se aclara y le sale el halo— y después van apareciendo las tarjetas una por
   una. Al terminar el carril, la sección se despega y la página sigue.

   La zona ESTIRA hasta llenar el escenario en vez de quedarse centrada con su
   alto natural. En un monitor grande eso era una franja muerta arriba y abajo:
   ahora el panel ocupa la pantalla y el aire que sobra queda dentro de él, como
   respiro del diseño. Los tamaños van en clamp con vh para que en pantallas
   altas todo crezca en lugar de nadar en el hueco.

   En pantallas chicas o bajas no se ancla nada: el escenario vuelve a ser una
   sección normal y las tarjetas entran al asomarse, como el resto de la página.
   ============================================================================= */

.rb-showcase { position: relative; }
.rb-showcase-track { position: relative; height: 280vh; }

.rb-showcase-stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  display: flex; align-items: stretch;
  padding: calc(var(--rb-nav-h) + clamp(8px, 2vh, 26px)) 0 clamp(24px, 4.5vh, 60px);
  overflow: hidden;
}
.rb-showcase-stage > .rb-wrap { display: flex; max-width: 1340px; }

.rb-showcase-zone {
  --open: 0;
  position: relative; z-index: 1;
  flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(16px, 3.2vh, 44px);
  padding: clamp(20px, 3.4vh, 52px) clamp(18px, 2.6vw, 46px);
  border-radius: calc(48px - 16px * var(--open));
  border: 1px solid rgba(255, 46, 46, calc(.04 + .1 * var(--open)));
  background: linear-gradient(180deg, rgba(255, 240, 238, calc(.55 * var(--open))), rgba(255, 255, 255, 0));
  transform: scale(calc(.88 + .12 * var(--open)));
  opacity: calc(.2 + .8 * var(--open));
  will-change: transform, opacity;
}
/* Halo que se abre con la zona */
.rb-showcase-zone::before {
  content: ""; position: absolute; inset: -8% -5%; z-index: -1;
  border-radius: 60px; pointer-events: none;
  background: radial-gradient(circle at 50% 42%, rgba(255, 46, 46, .12), transparent 68%);
  opacity: var(--open);
  transform: scale(calc(.72 + .28 * var(--open)));
}

/* El encabezado y la rejilla se reparten el alto de la zona */
.rb-showcase .rb-section-head { margin: 0 auto; flex: 0 0 auto; }
.rb-showcase .rb-section-head h2 { font-size: clamp(27px, 3.6vw, 52px); margin: clamp(10px, 1.6vh, 20px) 0 clamp(8px, 1.2vh, 16px); }
.rb-showcase .rb-section-head p { font-size: clamp(14px, 1.5vw, 18.5px); line-height: 1.6; }

.rb-showcase .rb-features-grid {
  flex: 1 1 auto;
  width: 100%; align-self: center;
  grid-auto-rows: 1fr;                       /* las dos filas reparten el alto */
  max-height: clamp(340px, 58vh, 660px);
  gap: clamp(11px, 1.8vh, 24px);
}
.rb-showcase .rb-feature {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(16px, 2.6vh, 34px) clamp(15px, 1.6vw, 30px);
}
.rb-showcase .rb-feature-ic {
  width: clamp(42px, 5.4vh, 58px); height: clamp(42px, 5.4vh, 58px);
  flex: 0 0 auto; border-radius: 14px;
  margin-bottom: clamp(9px, 1.8vh, 20px);
}
.rb-showcase .rb-feature-ic svg { width: clamp(21px, 2.6vh, 27px); height: clamp(21px, 2.6vh, 27px); }
.rb-showcase .rb-feature h3 { font-size: clamp(16px, 1.6vw, 21px); margin-bottom: 7px; }
.rb-showcase .rb-feature p { font-size: clamp(12.8px, 1.2vw, 16px); line-height: 1.55; }

/* Cada tarjeta espera su turno */
.rb-showcase .rb-feature {
  opacity: 0; transform: translateY(30px) scale(.96);
  transition: opacity .5s var(--rb-ease), transform .6s var(--rb-spring),
              box-shadow .32s var(--rb-ease), border-color .32s var(--rb-ease);
}
.rb-showcase .rb-feature.show { opacity: 1; transform: none; }
.rb-showcase .rb-feature.show:hover { transform: translateY(-8px); box-shadow: 0 22px 46px rgba(20, 20, 20, .1); }

/* Sin anclaje: pantallas angostas, ventanas bajas y movimiento reducido. */
@media (max-width: 860px), (max-height: 660px) {
  .rb-showcase-track { height: auto; }
  .rb-showcase-stage { position: static; height: auto; display: block; padding: 96px 0; overflow: visible; }
  .rb-showcase-stage > .rb-wrap { display: block; }
  .rb-showcase-zone,
  .rb-showcase-zone::before { transform: none; }
  .rb-showcase-zone {
    display: block; gap: 0;
    opacity: 1; padding: 0; border: 0; background: none; border-radius: 0;
  }
  .rb-showcase-zone::before { display: none; }
  .rb-showcase .rb-section-head { margin: 0 auto 52px; }
  .rb-showcase .rb-features-grid { max-height: none; grid-auto-rows: auto; }
  .rb-showcase .rb-feature { display: block; }
}

/* =============================================================================
   Movimiento reducido — calmar, no congelar
   -----------------------------------------------------------------------------
   Windows trae un interruptor en Configuración → Accesibilidad → Efectos
   visuales → «Efectos de animación». Si está apagado, Chrome pide
   prefers-reduced-motion: reduce, y aquí antes eso apagaba TODA la portada:
   las animaciones no se veían nunca en la laptop mientras en el celular —donde
   el interruptor está encendido— se veían bien.

   Ya no se apaga nada. Solo se calma: las entradas recorren la mitad, los
   bucles decorativos van un tercio más lentos y desaparece lo que tiembla.
   La cinta de materias no está aquí: su velocidad la calcula initMarquee(),
   que ya baja de 45 a 30 píxeles por segundo cuando el sistema lo pide.
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* Las entradas siguen entrando, pero desde más cerca */
  [data-anim="up"] { transform: translateY(18px); }
  [data-anim="down"] { transform: translateY(-16px); }
  [data-anim="left"] { transform: translateX(-24px); }
  [data-anim="right"] { transform: translateX(24px); }
  [data-anim="zoom"] { transform: scale(.96); }
  [data-anim="flip"] { transform: translateY(16px); }

  /* La zona se abre menos, pero se abre */
  .rb-showcase-zone { transform: scale(calc(.96 + .04 * var(--open))); }
  .rb-showcase .rb-feature { transform: translateY(14px); }
  .rb-showcase .rb-feature.show { transform: none; }

  /* Los bucles que no paran, un tercio más lentos: se siguen viendo */
  .rb-hero::before { animation-duration: 24s; }
  .rb-hero::after { animation-duration: 30s; }
  .rb-float { animation-duration: 7s; }
  .rb-scene-ring { animation-duration: 10s; }
  .rb-scene-ring::after { animation-duration: 40s; }
  .rb-chat-bar i { animation-duration: 3.6s; }
  .rb-tag .dot { animation-duration: 3.4s; }
  .rb-typing i { animation-duration: 1.6s; }

  /* Lo que tiembla o parpadea sí se va */
  .rb-error .code { animation: none; }
}

/* La letra pequeña de los ciclos largos, debajo del precio mensual: es lo que
   convierte "20 al mes" en una decisión informada. */
.rb-price-cycle {
  font-size: 12px; color: var(--rr-text-faint, #9A8C83);
  margin: 0 0 16px; line-height: 1.5; text-align: center;
}
.rb-price.featured .rb-price-cycle { color: rgba(255, 255, 255, .72); }

/* La banda de escuelas: no compite con los tres planes porque no es un plan. */
.rb-price-schools {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  background: var(--rr-ink, #14100E); color: #fff;
  border-radius: 28px; padding: 28px 32px; margin-top: 22px;
}
.rb-price-schools strong { display: block; font-size: 19px; margin-bottom: 6px; }
.rb-price-schools p { margin: 0; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .7); max-width: 62ch; }

/* =============================================================================
   Entradas con carácter
   -----------------------------------------------------------------------------
   La portada ya entraba bien; lo que le faltaba era intención. Tres cambios, y
   ninguno de los tres se nota por separado — que es justo la idea:

     1. La curva. Las entradas ya no frenan en seco: pasan un pelo de largo y
        vuelven. Es un 2 % de recorrido de más, lo justo para que se sienta
        vivo y no rebotón.
     2. Robin aterriza. La escena del héroe baja con un pequeño arco en vez de
        aparecer escalando: llega, no se materializa.
     3. Las tarjetas flotantes esperan su turno. Salen una a una DESPUÉS de que
        Robin se asienta, no todas con él.

   Todo se apaga solo con «menos movimiento» del sistema (ver el bloque de
   prefers-reduced-motion más abajo, que ya estaba).
   ============================================================================= */

:root {
  /* Un muelle contenido: sobrepasa poco y vuelve rápido. Nada de rebotes. */
  --rb-spring: cubic-bezier(.22, 1.12, .36, 1);
}

[data-anim] {
  transition: opacity .72s var(--rb-ease), transform .78s var(--rb-spring);
}

/* ---- Robin aterriza -------------------------------------------------------- */

.rb-scene .rr-mascot { animation: rb-landing 1.15s var(--rb-spring) both; }
@keyframes rb-landing {
  0%   { opacity: 0; transform: translateY(-58px) rotate(-7deg) scale(.9); }
  62%  { opacity: 1; transform: translateY(6px) rotate(2deg) scale(1.015); }
  100% { opacity: 1; transform: none; }
}

/* El anillo se abre desde el centro justo cuando Robin toca suelo. */
.rb-scene-ring { animation-delay: .5s; }
.rb-scene::after {
  /* La sombra que deja al aterrizar: se estira al llegar y se asienta. */
  content: ""; position: absolute; z-index: 1;
  bottom: 14%; left: 50%; width: 42%; height: 16px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(20, 16, 14, .16), transparent 70%);
  animation: rb-landing-shadow 1.15s var(--rb-spring) both;
}
@keyframes rb-landing-shadow {
  0%   { opacity: 0; transform: translateX(-50%) scaleX(.4); }
  62%  { opacity: 1; transform: translateX(-50%) scaleX(1.12); }
  100% { opacity: .9; transform: translateX(-50%) scaleX(1); }
}

/* ---- Las tarjetas flotantes esperan su turno ------------------------------- */

.rb-float {
  /* Dos animaciones encadenadas: primero la entrada, después el flotar de
     siempre. El retraso de cada una es lo que hace la cascada. */
  animation:
    rb-float-in .7s var(--rb-spring) both,
    rb-floaty 5s var(--rb-ease) infinite;
}
@keyframes rb-float-in {
  from { opacity: 0; transform: translateY(16px) scale(.88); }
  to   { opacity: 1; transform: none; }
}
.rb-float-1 { animation-delay: .78s, 1.5s; }
.rb-float-2 { animation-delay: .94s, 2.7s; }
.rb-float-3 { animation-delay: 1.1s, 2.1s; }

/* ---- Micro-reacciones ------------------------------------------------------ */

/* Los botones grandes se levantan un poco y les cruza un brillo. Se ve al
   pasar por encima, dura 600 ms y no vuelve: no es un letrero de neón. */
.rb-btn-primary, .rb-btn-onred {
  position: relative; overflow: hidden;
  transition: transform .22s var(--rb-spring), box-shadow .22s var(--rb-ease), background .2s var(--rb-ease);
}
.rb-btn-primary::after, .rb-btn-onred::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .28) 50%, transparent 62%);
  transform: translateX(-120%);
  transition: transform .6s var(--rb-ease);
}
.rb-btn-primary:hover::after, .rb-btn-onred:hover::after { transform: translateX(120%); }
.rb-btn-primary:active, .rb-btn-onred:active { transform: translateY(1px) scale(.985); }

/* El icono de cada función gira un grado al acercarse el mouse a la tarjeta. */
.rb-feature-ic { transition: transform .32s var(--rb-spring); }
.rb-feature:hover .rb-feature-ic { transform: scale(1.09) rotate(-6deg); }

/* El número de cada paso crece un punto al asomarse: marca el ritmo del "01,
   02, 03" mejor que cualquier flecha. */
.rb-step-n { transition: transform .4s var(--rb-spring), color .3s var(--rb-ease); }
.rb-step.in .rb-step-n { animation: rb-step-pop .55s var(--rb-spring) both; }
@keyframes rb-step-pop {
  0%   { transform: scale(.72); opacity: 0; }
  100% { transform: none; opacity: 1; }
}

/* ---- En el móvil ----------------------------------------------------------- */
/* Sin mouse no hay hover ni parallax, así que la vida tiene que estar en la
   entrada. Se acorta el recorrido (una pantalla pequeña se recorre en menos)
   y se sustituye el hover por una respuesta clara al tocar. */
@media (hover: none) {
  [data-anim="up"] { transform: translateY(26px); }
  [data-anim="left"] { transform: translateX(-32px); }
  [data-anim="right"] { transform: translateX(32px); }
  [data-anim] { transition-duration: .6s, .66s; }

  .rb-btn:active { transform: scale(.96); }
  .rb-feature:active { transform: translateY(-3px) scale(.99); }
  .rb-price:active { transform: translateY(-3px); }
}

/* Con «menos movimiento» del sistema, el aterrizaje se queda en una entrada
   quieta: nada de arcos ni de sombras que se estiran. */
@media (prefers-reduced-motion: reduce) {
  .rb-scene .rr-mascot { animation: rb-fade-quiet .6s ease both; }
  .rb-scene::after { animation: none; opacity: .9; }
  .rb-float { animation: rb-fade-quiet .5s ease both, rb-floaty 7s var(--rb-ease) infinite; }
  .rb-btn-primary::after, .rb-btn-onred::after { display: none; }
  .rb-step.in .rb-step-n { animation: none; }
  @keyframes rb-fade-quiet { from { opacity: 0; } to { opacity: 1; } }
}

/* =============================================================================
   Pantallas grandes: que la portada use la laptop entera
   =============================================================================
   Hasta aquí todo estaba pensado para 1240 px de ancho útil, que en un monitor
   de 1600 o 1920 deja dos franjas vacías enormes a los lados y hace que la
   página se vea pequeña y apretada en medio. A partir de 1440 px el contenedor
   se ensancha y todo lo que se lee sube de tamaño con él: títulos, texto,
   botones, tarjetas y separaciones. En móvil y tablet no cambia nada. */

@media (min-width: 1440px) {
  :root { --rb-nav-h: 86px; }

  .rb-wrap { max-width: 1440px; padding: 0 48px; }
  .rb-showcase-stage > .rb-wrap { max-width: 1540px; }
  .rb-section { padding: 128px 0; }
  .rb-section-head { max-width: 860px; margin-bottom: 68px; }

  .rb-logo { font-size: 25px; }
  .rb-logo-xl { font-size: 30px; }
  .rb-nav-links a, .rb-nav-cta .rb-login { font-size: 17px; }
  .rb-btn { padding: 17px 34px; font-size: 17px; }
  .rb-btn-sm { padding: 13px 26px; font-size: 16px; }
  .rb-tag { font-size: 15px; padding: 10px 22px; }

  .rb-hero { padding: calc(var(--rb-nav-h) + 96px) 0 118px; }
  .rb-hero-lead { font-size: 21px; max-width: 640px; }
  .rb-hero-note span { font-size: 15.5px; }
  .rb-scene { min-height: 540px; }
  .rb-scene .rr-mascot { width: min(330px, 32vw); height: min(330px, 32vw); }
  .rb-scene-ring { width: min(520px, 42vw); }
  .rb-float strong { font-size: 17px; }
  .rb-float small { font-size: 13px; }

  .rb-section-head p { font-size: 19px; }
  .rb-feature { padding: 34px; }
  .rb-feature h3 { font-size: 21px; }
  .rb-feature p { font-size: 16.5px; }
  .rb-step h3 { font-size: 21px; }
  .rb-step p { font-size: 16.5px; }
  .rb-panel h3 { font-size: 30px; }
  .rb-panel p, .rb-checks li { font-size: 17px; }
  .rb-chat-log { height: 330px; }
  .rb-msg p { font-size: 16px; }

  .rb-price { padding: 38px 34px; }
  .rb-price ul li { font-size: 16.5px; }
  .rb-price .amount { font-size: 52px; }
  .rb-cta-band { padding: 84px 60px; }
  .rb-cta-band p { font-size: 20px; max-width: 660px; }
  .rb-cta-bird .rr-mascot { width: 142px; height: 142px; }

  .rb-footer-grid { gap: 48px; }
  .rb-footer p, .rb-footer ul a { font-size: 16px; }
  .rb-doc-inner { max-width: 900px; }
  .rb-doc-inner p, .rb-doc-inner li { font-size: 18px; }
}

@media (min-width: 1800px) {
  .rb-wrap { max-width: 1640px; }
  .rb-showcase-stage > .rb-wrap { max-width: 1740px; }
  /* Los documentos largos no se ensanchan con el resto: una línea de 1600 px
     no se lee, se rastrea. Va aquí y no solo en el tramo de 1440 porque
     .rb-doc-inner comparte especificidad con .rb-wrap y gana el último. */
  .rb-doc-inner { max-width: 980px; }
  .rb-doc-inner p, .rb-doc-inner li { font-size: 19px; }
  .rb-section { padding: 150px 0; }
  .rb-hero-lead { font-size: 22.5px; max-width: 700px; }
  .rb-scene .rr-mascot { width: 380px; height: 380px; }
  .rb-scene-ring { width: 600px; }
  .rb-logo-xl { font-size: 34px; }
}

/* El logo sin pajarito: ya no comparte espacio con nada, así que puede
   respirar y leerse de lejos. */
.rb-logo-xl { font-size: 26px; letter-spacing: -.04em; gap: 0; }

/* La tabla de cifras de los términos. La página de precios habla en
   porcentajes; aquí es donde se pueden mirar los números de verdad, así que
   tiene que leerse cómoda incluso en un teléfono: por eso el envoltorio con
   scroll propio en lugar de dejar que la tabla estire toda la página. */
.rb-doc-table-wrap { overflow-x: auto; margin: 22px 0 8px; -webkit-overflow-scrolling: touch; }
.rb-doc-table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 15.5px; }
.rb-doc-table th, .rb-doc-table td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--rb-line); }
.rb-doc-table th { font-weight: 800; color: var(--rb-ink); background: #FAFAFA; font-size: 14px; letter-spacing: .01em; }
.rb-doc-table td:first-child { color: var(--rb-ink); font-weight: 600; }
.rb-doc-table em { font-style: normal; color: var(--rb-red); font-weight: 700; }

/* =============================================================================
   Selector de cada cuánto se paga (portada)
   ============================================================================= */
/* Va arriba, encima de las tres tarjetas, y manda sobre las tres a la vez.
   Antes cada plan llevaba su propia línea de "cada 4 meses / al año" y había
   que leer seis cifras para comparar dos planes. */

.rb-cycle-switch {
  display: inline-flex; flex-wrap: wrap; gap: 4px; margin: 26px auto 0;
  padding: 5px; border-radius: 999px;
  background: #fff; border: 1px solid var(--rb-line);
  box-shadow: 0 6px 18px rgba(20, 20, 20, .06);
}
.rb-cycle-switch button {
  display: inline-flex; align-items: center; gap: 7px;
  border: none; background: transparent; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 700; color: var(--rb-body);
  padding: 10px 18px; border-radius: 999px;
  transition: background .18s ease, color .18s ease;
}
.rb-cycle-switch button:hover { color: var(--rb-ink); background: #F4F4F6; }
.rb-cycle-switch button.on { background: var(--rb-red); color: #fff; }
.rb-cycle-switch .rb-cycle-off {
  font-size: 11px; font-weight: 800; letter-spacing: .02em;
  padding: 3px 7px; border-radius: 999px;
  background: var(--rb-red); color: #fff;
}
.rb-cycle-switch button.on .rb-cycle-off { background: rgba(255, 255, 255, .24); }
@media (max-width: 520px) {
  .rb-cycle-switch { width: 100%; justify-content: center; }
  .rb-cycle-switch button { padding: 9px 13px; font-size: 13px; }
}

/* Quien ya inició sesión: su cara y su nombre en lugar de "Iniciar sesión". */
.rb-login-me { display: inline-flex; align-items: center; gap: 9px; }
.rb-login-face {
  width: 28px; height: 28px; border-radius: 50%; object-fit: cover;
  background: #F4F4F6; border: 1px solid var(--rb-line);
}