/* =============================================================================
   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; }

/* =============================================================================
   Vota por Orbital Kronnos
   =============================================================================
   Banda oscura, y a propósito: viene después de los precios (blanco) y antes
   de la llamada final (roja). Tres bandas seguidas del mismo color se leen
   como una sola cosa larguísima; alternando, cada una se ve como lo que es.

   En DOS columnas y no centrada. Centrada, la banda medía 1240 px de ancho
   para una frase de sesenta caracteres: quedaba un pasillo vacío a cada lado
   y el botón, chiquito, perdido en medio de todo ese negro. Ahora el ancho se
   usa —el porqué a la izquierda, la papeleta a la derecha— y el botón ocupa
   su columna entera, que es lo que hace que se vea como la única cosa que hay
   que pulsar aquí.
   ============================================================================= */

.rb-vota { padding: 40px 0 34px; }
.rb-vota-band {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1.35fr .85fr; align-items: center; gap: 48px;
  background: var(--rb-ink-2); border-radius: 34px;
  padding: 56px 52px; color: rgba(255, 255, 255, .8);
  box-shadow: 0 30px 70px rgba(20, 20, 20, .22);
}
/* El resplandor rojo de detrás. Sin él la banda es un rectángulo negro; con
   él parece que algo se está celebrando dentro, que es el tono que toca.
   Corrido a la izquierda, detrás del titular, para no competir con el rojo
   del botón. */
.rb-vota-band::before {
  content: ""; position: absolute; left: 6%; top: -60%;
  width: 60vmin; height: 60vmin; margin-left: -30vmin;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 46, 46, .34), transparent 68%);
}
.rb-vota-dicho, .rb-papeleta { position: relative; }

.rb-vota-band h2 { color: #fff; font-size: clamp(30px, 3.8vw, 50px); margin: 18px 0 14px; }
.rb-vota-band p { font-size: 17px; line-height: 1.7; margin: 0; }

/* La pastilla de sección, sobre fondo oscuro. */
.rb-tag-onink { background: rgba(255, 46, 46, .16); color: #FF7A6E; }

.rb-vota-puntos { list-style: none; padding: 0; margin: 22px 0 0; }
.rb-vota-puntos li {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: 15px; line-height: 1.6; margin-bottom: 11px;
  color: rgba(255, 255, 255, .72);
}
.rb-vota-puntos i {
  flex: 0 0 auto; font-style: normal; font-weight: 800; color: var(--rb-red);
}

/* La papeleta: la caja de la derecha. Es una tarjeta dentro de la banda, un
   punto más clara, para que el botón no flote sobre el negro sino que tenga
   dónde apoyarse. */
.rb-papeleta {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 24px; padding: 30px 26px; text-align: center;
}
.rb-papeleta-ic {
  display: flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; margin: 0 auto 16px;
  border-radius: 18px; color: var(--rb-red);
  background: rgba(255, 46, 46, .14);
}
.rb-papeleta-ic svg { width: 28px; height: 28px; }
.rb-papeleta strong { display: block; color: #fff; font-size: 20px; letter-spacing: -.02em; }
.rb-papeleta p { font-size: 14.5px; line-height: 1.6; margin: 9px 0 22px; color: rgba(255, 255, 255, .62); }
.rb-papeleta small { display: block; margin-top: 14px; font-size: 12.5px; color: rgba(255, 255, 255, .45); }

.rb-btn-lg { padding: 17px 32px; font-size: 16.5px; }
.rb-btn-block { display: flex; width: 100%; }

@media (max-width: 900px) {
  .rb-vota-band { grid-template-columns: 1fr; gap: 32px; padding: 44px 28px; }
  .rb-vota-band::before { left: 50%; }
}
@media (max-width: 620px) {
  .rb-vota-band { padding: 36px 22px; border-radius: 26px; }
}

/* =============================================================================
   Gracias a — la franja partida en diagonal
   =============================================================================
   Un solo título y, debajo, los dos aliados repartidos en una franja cortada
   al bies: la foto de Fusalmo baja por la izquierda, el negro de NetherHost
   sube por la derecha, y donde se cruzan no hay un borde sino un
   desvanecido — se tocan sin que ninguno recorte al otro.

   Antes esto eran TRES secciones seguidas (dos tarjetitas con los logos y una
   historia entera para cada uno): el mismo agradecimiento contado tres veces
   y tres pantallas de scroll para llegar al final.

   Cómo está hecho, y por qué así:

     · el fondo va en su propia capa, detrás de todo. El texto se maqueta en
       dos columnas normales encima, así no hay ni una letra recortada ni
       ninguna caja rara que mantener cuadrada.
     · el corte NO es un clip-path sino una máscara con degradado. Un
       clip-path da un filo duro y dentado; la máscara da el desvanecido que
       hace falta, y de paso se dibuja igual sea cual sea el alto.
     · encima, una línea fina con el MISMO ángulo, para que el corte se vea y
       no parezca que la foto se acabó sin más.

   El ángulo vive en --rb-corte y lo comparten la máscara y la línea: si se
   cambia, las dos giran juntas. En pantalla angosta pasa a 180deg y el corte
   se vuelve horizontal, que es lo único que tiene sentido en una columna.
   ============================================================================= */

.rb-gracias { padding: 64px 0 0; }
.rb-gracias .rb-section-head { margin-bottom: 44px; }

.rb-duo {
  --rb-corte: 104deg;
  position: relative; overflow: hidden;
  background: var(--rb-ink-2);
  color: rgba(255, 255, 255, .78);
  /* Se aísla: sin esto, el desvanecido de abajo —que está dentro de la franja
     pero por encima en el orden de pintado— se salía a tapar lo de la sección
     siguiente, y lo primero que hay ahí es el Robin que se asoma por encima de
     la banda roja. Le lavaba la cabeza al pájaro. Con un contexto de apilado
     propio, la franja entera se pinta como un bloque en su sitio y lo que
     viene después le pasa por encima, como debe ser. */
  isolation: isolate;
}

/* La foto de Fusalmo, con su azul encima, disolviéndose en diagonal hacia el
   negro de NetherHost. */
.rb-duo-fondo {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(var(--rb-corte), rgba(11, 27, 58, .66), rgba(11, 27, 58, .46)),
    url("/images/aliados/fusalmo.jpg") center / cover no-repeat;
  -webkit-mask-image: linear-gradient(var(--rb-corte), #000 30%, transparent 58%);
          mask-image: linear-gradient(var(--rb-corte), #000 30%, transparent 58%);
}

/* La línea del corte, a la mitad del desvanecido. Dos capas: un filo claro de
   un píxel y, detrás, un halo ancho y tenue que lo despega del fondo. */
.rb-duo-corte {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(var(--rb-corte),
      transparent calc(44% - 1px), rgba(255, 255, 255, .34) 44%, transparent calc(44% + 1px)),
    linear-gradient(var(--rb-corte),
      transparent 36%, rgba(255, 255, 255, .07) 44%, transparent 52%);
}

/* Los bordes de arriba y de abajo, desvanecidos hacia el blanco de la pagina.
   Sin esto la franja entra y sale de golpe, con dos rayas horizontales que
   pelean con la diagonal de dentro — que es la unica linea que aqui tiene que
   verse. */
.rb-duo::before, .rb-duo::after {
  content: ""; position: absolute; left: 0; right: 0; height: 44px;
  pointer-events: none; z-index: 1;
}
/* Flojos a propósito. Antes eran 60 px de blanco a plomo y se comían el borde
   de abajo del botón de NetherHost: el botón es blanco, el desvanecido también,
   y donde se tocaban el botón se quedaba sin contorno. Ahora la mitad de la
   rampa ya está casi transparente, así que suaviza el corte sin llegar a
   apoyarse en nada de lo que hay dentro. */
.rb-duo::before {
  top: 0;
  background: linear-gradient(180deg, var(--rb-white), rgba(255, 255, 255, .28) 55%, transparent);
}
.rb-duo::after {
  bottom: 0;
  background: linear-gradient(0deg, var(--rb-white), rgba(255, 255, 255, .28) 55%, transparent);
}

.rb-duo-rejilla {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
  align-items: start;
}
/* El relleno va aparte y con .rb-duo delante. Motivo: esta misma caja lleva
   también la clase .rb-wrap, y en el tramo de 1440 px hay un
   `.rb-wrap { padding: 0 48px }` — un atajo que de paso pone a CERO el relleno
   de arriba y de abajo. Va después en la hoja y empata en especificidad, así
   que ganaba él, y en cualquier pantalla grande la franja se quedaba sin aire:
   el logo de Fusalmo aterrizaba pegado al borde de arriba y el botón de
   NetherHost al de abajo, los dos metidos dentro del desvanecido.

   Con dos clases delante (0,2,0 contra 0,1,0) esta gana pase lo que pase, sin
   depender de dónde esté escrita. */
.rb-duo .rb-duo-rejilla { padding-top: 84px; padding-bottom: 104px; }

.rb-duo-lado h3 { color: #fff; font-size: clamp(23px, 2.4vw, 31px); margin: 22px 0 16px; }
.rb-duo-lado p { font-size: 16px; line-height: 1.75; margin: 0 0 14px; }

/* El logo, grande. Es la mitad del agradecimiento: a tamaño de icono no se
   reconocía de lejos, y esto se mira de lejos. Los dos vienen dibujados sobre
   fondo claro, así que se apoyan en una pastilla blanca para no recortarse
   mal contra el azul y el negro. */
.rb-duo-logo {
  display: block;
  height: 96px; width: auto; max-width: 100%; object-fit: contain;
  background: rgba(255, 255, 255, .95); border-radius: 18px; padding: 14px 22px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .22);
}
/* La llama va sin pastilla: su PNG ya es transparente y sobre negro se ve
   mejor sola. */
.rb-duo-llama {
  height: 104px; background: none; padding: 0; box-shadow: none;
  filter: drop-shadow(0 12px 32px rgba(255, 46, 46, .5));
}

.rb-duo-lema {
  font-size: 13px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255, 255, 255, .58); margin-top: 22px;
}

/* El cupón. Es lo único que alguien va a querer copiar de aquí, así que se
   separa de la prosa y se le da forma de cupón de verdad. */
.rb-cupon {
  display: flex; align-items: center; gap: 18px;
  margin: 22px 0 24px;
  background: rgba(255, 255, 255, .05);
  border: 1px dashed rgba(255, 46, 46, .55);
  border-radius: 20px; padding: 18px 22px;
}
.rb-cupon-off {
  flex: 0 0 auto; font-size: 42px; font-weight: 800; line-height: 1;
  color: var(--rb-red); letter-spacing: -.05em;
}
.rb-cupon-off span { font-size: 22px; }
.rb-cupon-txt strong { display: block; color: #fff; font-size: 16px; margin-bottom: 6px; }
.rb-cupon-txt p { font-size: 14px; line-height: 1.6; margin: 0; }
.rb-cupon-codigo {
  display: inline-block; font-family: var(--rr-mono);
  font-size: 14.5px; font-weight: 700; letter-spacing: .12em;
  background: var(--rb-red); color: #fff;
  padding: 2px 10px; border-radius: 7px;
}

/* En una columna el bies no significa nada: el corte se vuelve horizontal y
   cada aliado se lee entero antes de pasar al siguiente. */
@media (max-width: 900px) {
  .rb-duo { --rb-corte: 180deg; }
  .rb-duo-fondo {
    -webkit-mask-image: linear-gradient(180deg, #000 34%, transparent 56%);
            mask-image: linear-gradient(180deg, #000 34%, transparent 56%);
  }
  .rb-duo-corte {
    background:
      linear-gradient(180deg, transparent calc(45% - 1px), rgba(255, 255, 255, .28) 45%, transparent calc(45% + 1px));
  }
  .rb-duo-rejilla { grid-template-columns: 1fr; gap: 54px; }
  .rb-duo .rb-duo-rejilla { padding-top: 64px; padding-bottom: 80px; }
  .rb-duo-logo { height: 76px; }
  .rb-duo-llama { height: 84px; }
}
@media (max-width: 620px) {
  .rb-cupon { flex-direction: column; text-align: center; gap: 12px; }
}

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

/* El relleno de arriba tiene que dar de sí para el Robin que se asoma por
   encima de la banda (ver .rb-cta-bird): con 30 px, el pájaro se salía de su
   sección y le entraba por abajo a la franja de agradecimientos. */
.rb-cta { padding: 54px 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 */
/* Robin asomándose por arriba de la banda. Asoma menos que antes (-58 px) y
   su sección le reserva más aire por encima: así se queda dentro de lo suyo en
   vez de chocar con la franja de agradecimientos, que termina justo ahí. */
.rb-cta-bird { position: absolute; top: -42px; 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 dibujo 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);
}

/* =============================================================================
   En un teléfono
   =============================================================================
   La portada ya se estrechaba bien —las rejillas caen a una columna solas—
   pero había cosas que solo se ven con el teléfono en la mano: un enlace de
   entrar que desaparecía, títulos que no caben, un botón flotante encima de
   lo que hay que pulsar, y la muesca de la pantalla comiéndose la barra.

   Va al final del archivo a propósito: comparte especificidad con lo que
   corrige, y aquí gana el último. */

/* 1. Entrar desde el teléfono.
   El "Iniciar sesión" de la barra se esconde en pantalla estrecha, y lo único
   que quedaba era "Empezar gratis": quien ya tiene cuenta se quedaba sin
   puerta a la vista. Ahora vive también dentro del menú, que es donde se
   busca — y solo ahí: en pantalla ancha ya está en la barra, y repetido dos
   veces sobra. */
.rb-nav-links .rb-nav-entrar { display: none; }

@media (max-width: 940px) {
  .rb-nav-links .rb-nav-entrar {
    display: block;
    border-top: 1px solid var(--rb-line);
    font-weight: 700; color: var(--rb-red);
  }

  /* 2. La muesca y los bordes redondeados. */
  .rb-nav-inner { padding-left: max(28px, env(safe-area-inset-left)); padding-right: max(28px, env(safe-area-inset-right)); }
  .rb-nav-links a { padding-left: max(28px, env(safe-area-inset-left)); }

  /* 3. El menú abierto no deja moverse a lo de abajo. */
  body.rb-menu-abierto { overflow: hidden; }
}

@media (max-width: 620px) {
  /* Menos aire arriba: en una pantalla de teléfono, 74 px de hueco antes del
     título son media pantalla gastada en nada. */
  .rb-hero { padding: calc(var(--rb-nav-h) + 38px) 0 56px; }
  .rb-hero h1 { font-size: clamp(34px, 10.5vw, 48px); margin: 18px 0 18px; }
  .rb-hero-lead { font-size: 16.5px; line-height: 1.65; margin-bottom: 26px; }
  .rb-hero-note { margin-top: 24px; }

  /* Los dos botones del héroe, uno debajo del otro y del ancho entero: con
     el pulgar no se apunta a un botón de 160 px en una esquina. */
  .rb-hero-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .rb-hero-actions .rb-btn { width: 100%; justify-content: center; }
  .rb-cta-actions .rb-btn { width: 100%; justify-content: center; }

  .rb-section { padding: 68px 0; }
  .rb-section-head { margin-bottom: 38px; }
  .rb-cta { padding: 20px 0 76px; }
  .rb-cta-band { padding: 72px 22px 42px; border-radius: 26px; }
  .rb-cta-band p { font-size: 16px; }

  /* El botón de "¿qué es este proyecto?" se subía encima del último botón de
     la página. Se encoge y se aparta, y su globito no hace falta: en un
     teléfono no hay mouse que lo saque. */
  .rb-help { width: 40px; height: 40px; font-size: 16px; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); }
  .rb-help-tip { display: none; }

  /* La conversación de ejemplo se lee, no se decora: con menos relleno caben
     los mismos mensajes en una pantalla que mide la mitad. */
  .rb-chat { padding: 18px 16px; border-radius: 20px; }
  .rb-msg p { font-size: 14px; padding: 11px 13px; }
  .rb-chat-bar { padding: 6px 6px 6px 16px; margin-top: 14px; }

  /* Las pestañas de "Hecho para todos" no caben con 30 px a cada lado. */
  .rb-tabs { margin-bottom: 34px; }
  .rb-tabs-inner { width: 100%; }
  .rb-tabs button { flex: 1; padding: 12px 10px; font-size: 14.5px; }

  .rb-price { padding: 26px 20px 28px; }
  .rb-price .amount { font-size: 38px; }
  .rb-price-schools { text-align: center; }
}

/* Pantallas muy angostas — un iPhone SE mide 320 px de ancho útil. */
@media (max-width: 380px) {
  .rb-wrap { padding: 0 16px; }
  .rb-hero h1 { font-size: 32px; }
  .rb-logo-xl { font-size: 22px; }
  .rb-btn { padding: 14px 20px; font-size: 15px; }
  .rb-scene { min-height: 300px; }
  .rb-float { transform: scale(.78); }
}

/* Un teléfono de lado: la pantalla mide más de ancho que de alto y el héroe,
   pensado para una ventana alta, se convierte en tres pantallas de scroll
   antes de llegar a nada. */
@media (max-height: 520px) and (orientation: landscape) {
  .rb-hero { padding: calc(var(--rb-nav-h) + 24px) 0 40px; }
  .rb-hero-grid { gap: 28px; }
  .rb-scene { min-height: 240px; }
  .rb-scene .rr-mascot { width: min(170px, 30vw); height: min(170px, 30vw); }
}

/* =============================================================================
   Los márgenes de las dos secciones nuevas, al final de todo
   =============================================================================
   Van aquí abajo, sueltas y fuera de su bloque, por una razón concreta: el
   tramo de `@media (min-width: 1800px)` reescribe `.rb-section { padding:
   150px 0 }`, va después en la hoja y empata en especificidad con
   `.rb-vota` — así que ganaba él. En una pantalla de 1920 px eso dejaba la
   sección del voto con 722 px de alto para una banda de 422: trescientos
   píxeles de blanco alrededor de lo único que había que mirar.

   La banda del voto y la franja de agradecimientos ya traen su propio aire
   por dentro (56 px de relleno la una, 84 la otra), así que no necesitan que
   la sección les ponga otro tanto por fuera.
   ============================================================================= */

.rb-vota { padding: 44px 0 40px; }
.rb-gracias { padding: 72px 0 0; }