/* ============================================================
   Resoluta · landing B2B

   Prefijo rs- en todo para poder convivir con css/styles.css y con
   Bootstrap, que se pisan en .container, .btn, .logo, .modal y .close.
   Carga css/font.css antes que este archivo (define Chillax).

   Índice
     1. Tokens
     2. Base
     3. Utilidades
     4. Botones y enlaces
     5. Tooltips
     6. Header
     7. Secciones
     8. Formularios
     9. Diálogos
    10. Footer
    11. Responsive        1080 · 900 (menú móvil) · 640 · 400

   El orden de las secciones no es decorativo: hay reglas de la misma
   especificidad que dependen de quién va primero. Están señaladas.
   ============================================================ */


/* ============================================================
   1. TOKENS
   ============================================================ */

:root{
  --rs-bg:#002e2c;
  --rs-bg-deep:#001f21;
  --rs-bg-mid:#033130;
  --rs-green:#006944;
  --rs-green-bright:#71c814;
  --rs-lime:#9af000;
  --rs-lime-soft:#b5ff52;
  --rs-teal:#45d9d4;
  --rs-amber:#ffc62a;
  --rs-ink:#083331;
  --rs-muted:#6f8680;
  --rs-cream:#f7fff7;
  --rs-line:rgba(255,255,255,.16);
  --rs-shadow:0 24px 80px rgba(0,0,0,.28);
  --rs-r-sm:14px;
  --rs-r-md:20px;
  --rs-r-lg:28px;
  --rs-r-xl:40px;
  --rs-header-h:76px;
  /* Alto de los controles del header. Con min-height + padding vertical 0
     el alto no depende de que Inter y Chillax rindan igual. */
  --rs-ctl-h:44px;
  /* Tamaño del logo: mismo valor en header y footer */
  --rs-logo-w:150px;
  /* Sangría del bajologo. 0 = al borde del isotipo; ~34px lo alinea con la "r" */
  --rs-brand-indent:0px;
  --rs-display:'Chillax','Segoe UI',sans-serif;
  --rs-body:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
}


/* ============================================================
   2. BASE
   ============================================================ */

/* Compensa el header sticky al saltar a un ancla */
html:has(.rs-landing){scroll-padding-top:calc(var(--rs-header-h) + 16px)}
@media (prefers-reduced-motion:no-preference){
  html:has(.rs-landing){scroll-behavior:smooth}
}

.rs-landing *,
.rs-landing *::before,
.rs-landing *::after{box-sizing:border-box}

.rs-landing{
  margin:0;
  font-family:var(--rs-body);
  font-size:16px;
  line-height:1.6;
  color:#fff;
  background:
    radial-gradient(circle at 85% 4%, rgba(154,240,0,.35), transparent 30%),
    radial-gradient(circle at 4% 32%, rgba(0,105,68,.55), transparent 28%),
    linear-gradient(160deg,#002827 0%,#013f37 45%,#001f21 100%);
  background-attachment:fixed;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
}

/* OJO: primera de la cadena de reglas sobre <a>. Todas las que le siguen
   (.rs-consent a, .rs-footer a, .rs-social a, .rs-legal a, .rs-dialog__body a)
   tienen su misma especificidad y ganan solo por ir después. No la muevas. */
.rs-landing a{color:inherit;text-decoration:none}
.rs-landing img{max-width:100%;display:block}
.rs-landing h1,.rs-landing h2,.rs-landing h3,.rs-landing h4{
  font-family:var(--rs-display);font-weight:600;margin:0;color:inherit;
}
.rs-landing :focus-visible{
  outline:3px solid var(--rs-lime);
  outline-offset:3px;
  border-radius:6px;
}


/* ============================================================
   3. UTILIDADES
   ============================================================ */

.rs-wrap{width:min(1180px,calc(100% - 40px));margin-inline:auto}

.rs-skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--rs-lime);color:#06342c;padding:12px 18px;font-weight:700;
}
.rs-skip:focus{left:16px;top:16px}

.rs-sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Aparición al hacer scroll; el JS añade .is-visible */
.rs-reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.rs-reveal.is-visible{opacity:1;transform:none}


/* ============================================================
   4. BOTONES Y ENLACES
   ============================================================ */

.rs-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--rs-display);font-weight:600;font-size:15px;
  padding:14px 22px;border-radius:var(--rs-r-md);
  border:1px solid transparent;cursor:pointer;
  transition:transform .2s ease,background-color .2s ease,box-shadow .2s ease;
}
.rs-btn:hover{transform:translateY(-2px)}
.rs-btn--primary{background:var(--rs-lime);color:#06342c;box-shadow:0 14px 34px rgba(154,240,0,.22)}
.rs-btn--primary:hover{background:greenyellow}
.rs-btn--ghost{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.34)}
.rs-btn--ghost:hover{background:rgba(255,255,255,.12)}
.rs-btn--block{width:100%}
/* --sm define alto, no padding vertical: así iguala a .rs-menu__trigger
   pese a usar otra tipografía */
.rs-btn--sm{min-height:var(--rs-ctl-h);padding:0 18px;font-size:14px;border-radius:var(--rs-r-sm)}
.rs-btn[disabled]{opacity:.6;cursor:not-allowed;transform:none}

/* Botón que se lee como enlace: abre un diálogo, no navega */
.rs-linkbtn{
  font:inherit;font-size:14px;
  background:none;border:0;padding:0;
  color:rgba(255,255,255,.72);
  text-align:left;cursor:pointer;
  transition:color .2s;
}
.rs-linkbtn:hover{color:var(--rs-lime)}
/* En línea dentro de un párrafo, sobre fondo claro */
.rs-linkbtn--inline{
  display:inline;font-size:inherit;line-height:inherit;
  color:#0b6b45;text-decoration:underline;
}
.rs-linkbtn--inline:hover{color:#06442c}


/* ============================================================
   5. TOOLTIPS
   Los usan el desplegable del header y la columna de accesos del footer.
   ============================================================ */

/* <button> y no <span>: tiene que entrar en el orden de tabulación */
.rs-info{
  width:26px;height:26px;flex:none;
  display:grid;place-items:center;
  background:none;border:0;padding:0;border-radius:50%;
  color:rgba(255,255,255,.5);cursor:help;
  transition:color .2s;
}
.rs-info:hover,.rs-info:focus{color:var(--rs-lime)}
.rs-info svg{width:17px;height:17px;fill:currentColor}

.rs-tip{
  position:absolute;top:50%;right:calc(100% + 10px);
  transform:translateY(-50%);
  width:250px;padding:11px 13px;
  background:#fff;color:var(--rs-ink);
  border-radius:var(--rs-r-sm);
  box-shadow:0 12px 30px rgba(0,0,0,.35);
  font-size:12.5px;font-weight:500;line-height:1.5;
  opacity:0;visibility:hidden;
  transition:opacity .18s ease;
  z-index:2;
}
.rs-tip::after{
  content:"";position:absolute;top:50%;left:100%;
  transform:translateY(-50%);
  border:7px solid transparent;border-left-color:#fff;
}
/* Con ratón y con teclado: solo :hover dejaría fuera a quien navega con Tab */
.rs-info:hover + .rs-tip,
.rs-info:focus + .rs-tip{opacity:1;visibility:visible}

/* Footer: hacia arriba. Abajo no hay sitio y de lado invade la columna vecina */
.rs-tip--top{
  top:auto;bottom:calc(100% + 10px);
  left:0;right:auto;
  transform:none;
  width:260px;max-width:calc(100vw - 40px);
}
.rs-tip--top::after{
  top:100%;left:20px;
  transform:none;
  border-left-color:transparent;
  border-top-color:#fff;
}

/* Fila "enlace + botón i" */
.rs-linkrow{position:relative;display:flex;align-items:center;gap:4px}
.rs-linkrow > a{flex:1 1 auto;min-width:0}


/* ============================================================
   6. HEADER
   ============================================================ */

.rs-header{
  position:sticky;top:0;z-index:40;
  background:rgba(0,40,39,.86);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.rs-nav{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;height:var(--rs-header-h);
}

/* Marca: logo arriba, bajologo debajo */
.rs-brand{
  display:inline-flex;flex-direction:column;align-items:flex-start;
  gap:3px;line-height:1;
}
.rs-brand__tagline{
  font-family:var(--rs-display);
  font-size:11px;font-weight:600;
  letter-spacing:2.3px;text-transform:uppercase;
  color:rgba(255,255,255,.74);
  padding-left:var(--rs-brand-indent);
  white-space:nowrap;
}

.rs-nav-links{display:flex;align-items:center;gap:28px;font-size:14px;font-weight:600}
/* El ">" es necesario: sin él estos estilos alcanzan a los enlaces del desplegable */
.rs-nav-links > a{color:rgba(255,255,255,.84);padding:6px 0;border-bottom:2px solid transparent;transition:.2s}
.rs-nav-links > a:hover{color:#fff;border-bottom-color:var(--rs-lime)}
.rs-nav-actions{display:flex;align-items:center;gap:12px}

/* --- Desplegable "Accede a Resoluta" --- */
.rs-menu{position:relative}
/* Píldora con contorno: por encima de los enlaces de texto y por debajo del
   CTA lima. Hereda la tipografía del nav, así sigue leyéndose como navegación. */
.rs-menu__trigger{
  display:inline-flex;align-items:center;gap:8px;
  font:inherit;font-weight:600;
  min-height:var(--rs-ctl-h);
  padding:0 18px;
  border-radius:var(--rs-r-sm);
  border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.06);
  color:#fff;cursor:pointer;
  transition:background-color .2s,border-color .2s,color .2s;
}
.rs-menu__trigger:hover,
.rs-menu__trigger[aria-expanded="true"]{
  background:rgba(154,240,0,.17);
  border-color:rgba(154,240,0,.62);
  color:#fff;
}
.rs-menu__chevron{
  width:14px;height:14px;fill:currentColor;flex:none;
  transition:transform .2s ease;
}
.rs-menu__trigger[aria-expanded="true"] .rs-menu__chevron{transform:rotate(180deg)}

.rs-menu__panel{
  position:absolute;top:calc(100% + 14px);right:0;
  width:320px;padding:8px;
  background:rgba(0,38,36,.98);
  backdrop-filter:blur(16px);
  border:1px solid var(--rs-line);
  border-radius:var(--rs-r-md);
  box-shadow:0 24px 50px rgba(0,0,0,.42);
}
.rs-menu__panel[hidden]{display:none}
.rs-menu__panel ul{list-style:none;padding:0;margin:0;display:grid;gap:2px}
.rs-menu__item{position:relative;display:flex;align-items:center;gap:6px}
.rs-menu__link{
  display:flex;align-items:center;gap:12px;flex:1;min-width:0;
  padding:12px;border-radius:var(--rs-r-sm);
  font-size:14.5px;font-weight:600;color:rgba(255,255,255,.88);
  transition:background-color .2s,color .2s;
}
.rs-menu__link:hover{background:rgba(154,240,0,.12);color:#fff}
/* SVG en currentColor: los PNG del proyecto son oscuros y aquí no se verían */
.rs-menu__icon{width:19px;height:19px;flex:none;fill:var(--rs-lime)}

/* --- Hamburguesa (solo bajo 900px) --- */
.rs-nav-toggle{
  display:none;
  width:46px;height:46px;flex:none;
  place-items:center;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.24);
  border-radius:var(--rs-r-sm);
  color:#fff;cursor:pointer;
}
.rs-nav-toggle span{
  display:block;width:20px;height:2px;border-radius:2px;
  background:currentColor;position:relative;
  transition:background-color .2s ease;
}
.rs-nav-toggle span::before,
.rs-nav-toggle span::after{
  content:"";position:absolute;left:0;width:20px;height:2px;
  border-radius:2px;background:currentColor;transition:transform .2s ease;
}
.rs-nav-toggle span::before{top:-6px}
.rs-nav-toggle span::after{top:6px}
.rs-nav-toggle[aria-expanded="true"] span{background:transparent}
.rs-nav-toggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.rs-nav-toggle[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}


/* ============================================================
   7. SECCIONES
   En el mismo orden en que aparecen en la página.
   ============================================================ */

/* --- Envoltorios comunes --- */
.rs-section{padding:72px 0}
.rs-section--light{
  background:linear-gradient(180deg,#f9fff2,var(--rs-cream));
  color:var(--rs-ink);
  border-radius:var(--rs-r-xl);
  width:min(1180px,calc(100% - 40px));
  margin:24px auto;
  padding:56px 44px;
  box-shadow:0 24px 70px rgba(0,0,0,.18);
}
.rs-section-head{max-width:760px;margin:0 auto 40px;text-align:center}
.rs-section-head h2{font-size:clamp(26px,3.4vw,38px);line-height:1.12;letter-spacing:-.8px;margin-bottom:12px}
.rs-section-head p{margin:0;font-size:17px;color:rgba(255,255,255,.74)}
.rs-section--light .rs-section-head p{color:var(--rs-muted)}
.rs-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--rs-lime-soft);background:rgba(154,240,0,.09);
  border:1px solid rgba(154,240,0,.28);border-radius:999px;padding:9px 14px;
}

/* --- Hero --- */
.rs-hero{padding:64px 0 48px}
.rs-hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:48px;align-items:center}
.rs-hero h1{
  font-size:clamp(34px,5vw,66px);line-height:1.02;
  letter-spacing:clamp(-2.4px,-.16vw,-1px);
  font-weight:700;margin:24px 0 22px;
}
.rs-hero h1 em{font-style:normal;color:var(--rs-lime)}
.rs-hero p{font-size:clamp(16px,1.4vw,19px);line-height:1.55;color:rgba(255,255,255,.86);max-width:600px;margin:0 0 30px}
.rs-hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:32px}
.rs-proof{display:flex;gap:20px;flex-wrap:wrap;padding:0;margin:0;list-style:none}
.rs-proof li{display:flex;align-items:center;gap:12px;font-size:14px;color:rgba(255,255,255,.84)}
.rs-proof li:not(:last-child){padding-right:20px;border-right:1px solid var(--rs-line)}
.rs-proof-icon{
  width:38px;height:38px;flex:none;border-radius:12px;
  border:1px solid rgba(154,240,0,.45);color:var(--rs-lime);
  display:grid;place-items:center;font-weight:700;
}

/* --- Panel demostrativo (hero y sección de matriz) --- */
.rs-panel{
  position:relative;padding:22px;
  background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.22);
  border-radius:32px;box-shadow:var(--rs-shadow);
}
.rs-panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px}
.rs-panel-head h3{font-size:20px;margin-bottom:4px}
.rs-panel-head p{margin:0;font-size:13px;color:rgba(255,255,255,.66)}
.rs-tag{
  flex:none;background:rgba(154,240,0,.14);border:1px solid rgba(154,240,0,.34);
  border-radius:16px;padding:8px 12px;font-size:12px;font-weight:700;color:#d9ff9e;
}
.rs-panel-grid{display:grid;grid-template-columns:1.28fr .82fr;gap:14px}
.rs-card{
  background:rgba(0,32,31,.62);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--rs-r-md);padding:16px;
}
.rs-card h4{font-size:13px;color:#dffff2;margin-bottom:10px}
.rs-card small{color:rgba(255,255,255,.6);font-size:12.5px;line-height:1.5;display:block}

/* Matriz en SVG: los textos se estilan con fill, no con color */
.rs-matrix{display:block;width:100%;height:auto}
.rs-matrix-label{font-size:10px;font-weight:700;fill:rgba(255,255,255,.75)}
.rs-matrix-label.is-high{fill:var(--rs-lime)}
.rs-matrix-label.is-mid{fill:var(--rs-teal)}
.rs-matrix-label.is-low{fill:var(--rs-amber)}
.rs-matrix-axis{font-size:9px;font-weight:700;fill:rgba(255,255,255,.72)}
.rs-legend{display:grid;gap:6px;margin-top:8px;padding:0;list-style:none}
.rs-legend li{display:flex;align-items:center;gap:8px;font-size:11.5px;color:rgba(255,255,255,.74)}
.rs-legend i{width:10px;height:10px;border-radius:50%;flex:none}

.rs-metrics{display:grid;gap:12px}
.rs-metric{font-family:var(--rs-display);font-size:38px;line-height:1;font-weight:700;margin:0 0 8px}
.rs-metric span{font-size:15px;color:var(--rs-lime-soft)}
.rs-bar{height:8px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden}
.rs-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#17d982,var(--rs-lime))}
.rs-ref{display:flex;align-items:center;gap:10px}
.rs-ref + .rs-ref{margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.12)}
.rs-ref-icon{
  width:34px;height:34px;flex:none;border-radius:50%;
  border:1px solid rgba(154,240,0,.45);color:var(--rs-lime);
  display:grid;place-items:center;font-weight:700;
}
.rs-ref small{color:rgba(255,255,255,.66);font-size:11px;display:block}
.rs-ref strong{display:block;font-size:14px;margin-top:2px}
.rs-ref strong em{font-style:normal;color:var(--rs-lime);font-size:21px}
.rs-note{
  display:flex;align-items:center;gap:12px;margin-top:16px;padding:14px;
  background:rgba(154,240,0,.09);border:1px solid rgba(154,240,0,.22);
  border-radius:18px;color:#e4ffc9;font-size:13px;line-height:1.45;
}

/* --- Beneficios --- */
/* gap:1px + fondo del contenedor = las separaciones son el fondo asomando */
.rs-benefits{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:rgba(6,58,52,.14);border:1px solid rgba(6,58,52,.14);
  border-radius:var(--rs-r-lg);overflow:hidden;
}
.rs-benefit{background:#fff;padding:28px}
.rs-benefit-icon{
  width:52px;height:52px;border-radius:16px;margin-bottom:18px;
  background:linear-gradient(135deg,#e5fff1,#f7ffe8);
  display:grid;place-items:center;color:#00684c;font-size:24px;
}
.rs-benefit h3{font-size:18px;line-height:1.24;margin-bottom:10px}
.rs-benefit p{margin:0;font-size:14px;line-height:1.6;color:#58706a}

/* --- Cómo funciona --- */
/* La numeración sale de un counter, no del HTML */
.rs-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;list-style:none;padding:0;margin:0;counter-reset:rs-step}
.rs-step{position:relative;text-align:center}
.rs-step:not(:last-child)::after{
  content:"";position:absolute;top:42px;left:64%;width:72%;
  border-top:1px dashed rgba(154,240,0,.4);
}
.rs-step-icon{
  width:84px;height:84px;border-radius:50%;margin:0 auto 16px;
  background:linear-gradient(145deg,#0d9763,#003832);
  border:1px solid rgba(154,240,0,.45);
  display:grid;place-items:center;font-size:32px;
  box-shadow:0 16px 34px rgba(0,0,0,.28);
}
.rs-step-num{
  counter-increment:rs-step;
  width:24px;height:24px;border-radius:50%;margin:-24px auto 16px;position:relative;
  background:var(--rs-lime);color:#06362f;font-weight:700;font-size:12px;
  display:grid;place-items:center;
}
.rs-step-num::before{content:counter(rs-step)}
.rs-step h3{font-size:17px;margin-bottom:8px}
.rs-step p{margin:0;font-size:14px;line-height:1.55;color:rgba(255,255,255,.74)}

/* --- Cita --- */
.rs-quote{max-width:900px;margin:0 auto;text-align:center}
.rs-quote blockquote{
  margin:0 0 14px;font-family:var(--rs-display);font-weight:600;
  font-size:clamp(21px,3.2vw,34px);line-height:1.2;letter-spacing:-.6px;
}
.rs-quote cite{font-style:normal;font-size:14px;color:rgba(255,255,255,.66)}

/* --- Texto + panel a dos columnas --- */
.rs-split{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
.rs-split h2{font-size:clamp(26px,3.6vw,40px);line-height:1.08;letter-spacing:-1px;margin-bottom:18px}
.rs-split p{font-size:clamp(15px,1.4vw,17px);line-height:1.65;color:rgba(255,255,255,.78);margin:0 0 22px}
.rs-keys{display:grid;gap:10px;list-style:none;padding:0;margin:0}
.rs-keys li{display:flex;align-items:center;gap:10px;font-size:14px;color:rgba(255,255,255,.8)}
.rs-dot{width:11px;height:11px;border-radius:50%;flex:none}

/* --- Perfiles de acceso (sección desactivada hoy) --- */
.rs-profiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;list-style:none;padding:0;margin:0}
.rs-profile{
  display:flex;flex-direction:column;height:100%;padding:26px;
  background:rgba(255,255,255,.06);border:1px solid var(--rs-line);
  border-radius:var(--rs-r-lg);transition:transform .2s ease,border-color .2s ease;
}
.rs-profile:hover{transform:translateY(-4px);border-color:rgba(154,240,0,.5)}
.rs-profile img{width:34px;height:34px;object-fit:contain;margin-bottom:16px}
.rs-profile h3{font-size:19px;margin-bottom:10px}
.rs-profile p{font-size:14px;line-height:1.6;color:rgba(255,255,255,.74);margin:0 0 20px;flex:1}
.rs-profile-link{font-weight:600;color:var(--rs-lime);font-size:14px}
.rs-profile-link::after{content:" ↗"}

/* --- Piloto: aside verde + caja de formulario --- */
.rs-pilot{
  display:grid;grid-template-columns:1fr 1.12fr;
  border:1px solid var(--rs-line);border-radius:var(--rs-r-xl);
  overflow:hidden;background:#fff;color:var(--rs-ink);box-shadow:var(--rs-shadow);
}
.rs-pilot-aside{
  position:relative;overflow:hidden;padding:48px;color:#fff;
  background:linear-gradient(135deg,var(--rs-green),var(--rs-green-bright));
}
/* Círculo decorativo; el contenido va con z-index para no quedar debajo */
.rs-pilot-aside::after{
  content:"";position:absolute;right:-140px;bottom:-120px;
  width:420px;height:420px;border-radius:50%;background:rgba(0,47,45,.32);
}
.rs-pilot-aside h2,.rs-pilot-aside p,.rs-checks{position:relative;z-index:1}
.rs-pilot-aside h2{font-size:clamp(25px,3.4vw,38px);line-height:1.1;letter-spacing:-1px;margin-bottom:16px}
.rs-pilot-aside p{font-size:16px;line-height:1.55;margin:0 0 28px;max-width:380px}
.rs-checks{display:grid;gap:14px;list-style:none;padding:0;margin:0}
.rs-checks li{display:flex;align-items:flex-start;gap:12px;font-weight:600;font-size:15px}
.rs-checks li::before{
  content:"✓";flex:none;width:23px;height:23px;border-radius:50%;
  background:var(--rs-lime);color:#07352f;font-size:13px;
  display:grid;place-items:center;
}
.rs-form-box{padding:42px}
.rs-form-box h2{font-size:clamp(22px,2.6vw,26px);text-align:center;margin-bottom:8px}
.rs-form-box > p{text-align:center;color:var(--rs-muted);margin:0 0 26px;font-size:15px}

/* --- Nosotros (sección desactivada hoy; el contenido vive en diálogos) --- */
.rs-about{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:start}
.rs-about h2{font-size:clamp(24px,3.2vw,34px);line-height:1.12;margin-bottom:16px}
.rs-about p{font-size:16px;line-height:1.7;color:#4c655f;margin:0 0 16px}
.rs-values{display:grid;gap:12px;list-style:none;padding:0;margin:0}
.rs-values li{font-size:14px;line-height:1.6;color:#4c655f;padding-left:20px;position:relative}
.rs-values li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;border-radius:50%;background:var(--rs-green-bright)}
.rs-values strong{color:var(--rs-ink)}
.rs-pricing{border:1px solid #d8e6de;border-radius:var(--rs-r-lg);padding:26px;background:#fff}
.rs-pricing h3{font-size:19px;margin-bottom:6px}
.rs-pricing > p{font-size:14px;color:var(--rs-muted);margin:0 0 18px;line-height:1.55}
.rs-table{width:100%;border-collapse:collapse;font-size:14px}
.rs-table th,.rs-table td{padding:11px 6px;text-align:left;border-bottom:1px solid #eaf2ec}
.rs-table th{font-weight:600;color:var(--rs-ink);font-size:13px}
.rs-table td:last-child{text-align:right;font-weight:600;color:#0b6b45;white-space:nowrap}
.rs-pricing small{display:block;margin-top:14px;color:var(--rs-muted);font-size:12.5px;line-height:1.5}

/* --- FAQ --- */
.rs-faq{max-width:900px;margin:0 auto;display:grid;gap:12px}
.rs-faq details{
  background:#fff;border:1px solid #d8e6de;border-radius:var(--rs-r-sm);
  padding:18px 20px;box-shadow:0 8px 24px rgba(0,45,35,.05);
}
/* list-style:none + ::-webkit-details-marker quitan el triángulo nativo */
.rs-faq summary{
  font-family:var(--rs-display);font-weight:600;font-size:16px;
  color:var(--rs-ink);cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.rs-faq summary::-webkit-details-marker{display:none}
.rs-faq summary::after{content:"+";font-size:22px;color:var(--rs-green-bright);line-height:1;flex:none}
.rs-faq details[open] summary::after{content:"–"}
.rs-faq p{margin:12px 0 0;font-size:14.5px;line-height:1.65;color:var(--rs-muted)}

/* --- CTA final --- */
.rs-cta{
  position:relative;overflow:hidden;margin-top:44px;
  display:grid;grid-template-columns:1.15fr auto;gap:28px;align-items:center;
  padding:36px 40px;border-radius:var(--rs-r-lg);color:#fff;
  background:linear-gradient(110deg,#003b32,#00513f 55%,#4fb400);
  box-shadow:0 20px 55px rgba(0,45,35,.2);
}
.rs-cta::after{
  content:"";position:absolute;right:-70px;top:-100px;width:320px;height:320px;
  border-radius:50%;background:rgba(154,240,0,.28);
}
.rs-cta h2{position:relative;z-index:1;font-size:clamp(22px,3vw,32px);line-height:1.1;margin-bottom:8px}
.rs-cta h2 em{font-style:normal;color:var(--rs-lime)}
.rs-cta p{position:relative;z-index:1;margin:0;font-size:14.5px;color:rgba(255,255,255,.84)}
.rs-cta-actions{position:relative;z-index:1;display:grid;gap:10px}


/* ============================================================
   8. FORMULARIOS
   Compartidos por el piloto y por el libro de reclamaciones.
   ============================================================ */

.rs-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.rs-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.rs-field--wide{grid-column:1/-1}
.rs-field label{font-size:13px;font-weight:600;color:#31514b}
.rs-field input,.rs-field select,.rs-field textarea{
  width:100%;padding:13px 14px;font:inherit;font-size:16px;color:#183a35;
  background:#fff;border:1px solid #d8e6de;border-radius:12px;
  transition:border-color .2s ease,box-shadow .2s ease;
}
/* 16px de base porque iOS hace zoom al enfocar campos de menos de 16px.
   A partir de tablet ya podemos bajarlo. Va justo después de la regla que
   pisa, no lo lleves al bloque responsive del final. */
@media (min-width:641px){
  .rs-field input,.rs-field select,.rs-field textarea{font-size:15px}
}
.rs-field textarea{resize:vertical;min-height:96px;line-height:1.55}
.rs-field input:focus,.rs-field select:focus,.rs-field textarea:focus{
  border-color:var(--rs-green-bright);
  box-shadow:0 0 0 3px rgba(113,200,20,.18);
  outline:none;
}
.rs-field input[aria-invalid="true"],
.rs-field select[aria-invalid="true"],
.rs-field textarea[aria-invalid="true"]{border-color:#d64545}
.rs-error{font-size:12px;color:#c0392b;min-height:0}

.rs-consent{grid-column:1/-1;display:flex;gap:10px;align-items:flex-start;font-size:13px;color:#4a635d;line-height:1.5}
.rs-consent input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--rs-green)}
.rs-consent a{color:#0b6b45;text-decoration:underline}

/* Trampa antispam: fuera de pantalla, nunca display:none (los bots lo detectan) */
.rs-honey{position:absolute;left:-9999px;opacity:0;height:0;width:0}

.rs-form-btn{margin-top:18px}
.rs-form-status{margin-top:14px;font-size:14px;text-align:center;font-weight:600;min-height:20px}
.rs-form-status.is-ok{color:#0b7a4b}
.rs-form-status.is-error{color:#c0392b}
.rs-privacy{font-size:12px;color:#7c928c;text-align:center;margin-top:12px}

/* Subtítulo dentro de un formulario largo */
.rs-fieldset{grid-column:1/-1;border:0;padding:0;margin:10px 0 0}
.rs-fieldset legend{
  font-family:var(--rs-display);font-weight:600;font-size:15px;
  color:var(--rs-ink);padding:0;
}
.rs-fieldset p{font-size:13px;color:var(--rs-muted);margin:4px 0 0;line-height:1.55}


/* ============================================================
   9. DIÁLOGOS
   <dialog> nativo: foco atrapado, cierre con Escape y backdrop sin JS.
   ============================================================ */

.rs-dialog{
  width:min(720px,calc(100% - 32px));
  max-height:min(86vh,860px);
  padding:0;border:0;
  margin:auto;                     /* centrado en el top layer */
  background:transparent;
  overflow:visible;
}
.rs-dialog--wide{width:min(900px,calc(100% - 32px))}
.rs-dialog::backdrop{
  background:rgba(0,26,25,.72);
  backdrop-filter:blur(6px);
}
.rs-dialog__panel{
  display:flex;flex-direction:column;
  max-height:min(86vh,860px);
  background:linear-gradient(180deg,#fff,var(--rs-cream));
  color:var(--rs-ink);
  border-radius:var(--rs-r-lg);
  box-shadow:0 30px 90px rgba(0,0,0,.45);
  overflow:hidden;
}
/* El libro de reclamaciones mete un <form> entre panel, cuerpo y pie:
   sin esto se rompe la columna flexible y el pie deja de quedarse fijo. */
.rs-dialog__panel > form{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}

.rs-dialog__head{
  position:relative;flex:none;
  padding:28px 64px 20px 32px;
  background:linear-gradient(135deg,var(--rs-green),var(--rs-green-bright));
  color:#fff;
}
.rs-dialog__eyebrow{
  margin:0 0 6px;font-size:11px;font-weight:700;
  letter-spacing:1.6px;text-transform:uppercase;
  color:rgba(255,255,255,.78);
}
.rs-dialog__title{font-size:clamp(20px,3vw,28px);line-height:1.14;margin:0;color:#fff}
.rs-dialog__close{
  position:absolute;top:20px;right:20px;
  width:38px;height:38px;flex:none;
  display:grid;place-items:center;
  font-size:26px;line-height:1;
  background:rgba(255,255,255,.16);color:#fff;
  border:1px solid rgba(255,255,255,.32);border-radius:50%;
  cursor:pointer;transition:background-color .2s ease;
}
.rs-dialog__close:hover{background:rgba(255,255,255,.3)}

.rs-dialog__body{
  flex:1 1 auto;overflow-y:auto;
  padding:26px 32px;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.rs-dialog__body p{margin:0 0 14px;font-size:15px;line-height:1.7;color:#4c655f}
.rs-dialog__body p:last-child{margin-bottom:0}
.rs-dialog__body h3{font-size:17px;margin:26px 0 10px;color:var(--rs-ink)}
.rs-dialog__body h3:first-child{margin-top:0}
.rs-dialog__body strong{color:var(--rs-ink)}
.rs-dialog__body a{color:#0b6b45;text-decoration:underline}
.rs-dialog__list{display:grid;gap:12px;list-style:none;padding:0;margin:0 0 14px}
.rs-dialog__list li{
  position:relative;padding-left:20px;
  font-size:15px;line-height:1.65;color:#4c655f;
}
.rs-dialog__list li::before{
  content:"";position:absolute;left:0;top:9px;
  width:9px;height:9px;border-radius:50%;background:var(--rs-green-bright);
}

.rs-dialog__foot{
  flex:none;display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap;
  padding:18px 32px;border-top:1px solid #e2ede6;background:#fff;
}
.rs-dialog__foot .rs-btn{padding:12px 20px;font-size:14px}
.rs-dialog__foot .rs-btn--ghost{color:var(--rs-ink);border-color:#cfe0d6;background:#fff}
.rs-dialog__foot .rs-btn--ghost:hover{background:#f1f8f2}

/* Datos legales y avisos del libro de reclamaciones */
.rs-claim-meta{
  background:#eefaf0;border:1px solid #d3ead8;border-radius:var(--rs-r-sm);
  padding:14px 16px;margin-bottom:22px;
}
.rs-claim-meta p{margin:0;font-size:13px;line-height:1.6;color:#3d5a52}
.rs-claim-note{
  font-size:13px;line-height:1.6;color:var(--rs-muted);
  border-left:3px solid var(--rs-green-bright);
  padding-left:12px;margin:0 0 8px;
}

/* Bloquea el scroll del fondo mientras hay un diálogo abierto */
html:has(dialog[open]){overflow:hidden}

@keyframes rs-dialog-in{
  from{opacity:0;transform:translateY(16px) scale(.98)}
  to{opacity:1;transform:none}
}
.rs-dialog[open]{animation:rs-dialog-in .24s cubic-bezier(.16,1,.3,1)}


/* ============================================================
   10. FOOTER

   El orden interno de este bloque no se toca: .rs-footer a,
   .rs-social a, .rs-contact-inline a y .rs-legal a tienen la misma
   especificidad (0,1,1) y se resuelven por posición. Subir el botón
   de icono a la sección de componentes deja los iconos sociales del
   color de .rs-footer a en vez de blancos.
   ============================================================ */

.rs-footer{padding:56px 0 28px;color:rgba(255,255,255,.72)}
.rs-footer-grid{
  display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:32px;
  border-top:1px solid rgba(255,255,255,.12);padding-top:34px;
}
.rs-footer h4{margin-bottom:14px;color:#fff;font-size:15px}
.rs-footer p{font-size:14px;line-height:1.65;margin:16px 0 0}
.rs-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.rs-footer a{font-size:14px;color:rgba(255,255,255,.72);transition:color .2s}
.rs-footer a:hover{color:var(--rs-lime)}

/* Columna de marca: logo arriba y texto debajo, no en fila como .rs-brand */
.rs-footer-brand{display:block}
/* height:auto en los dos, o el atributo height="40" del <img> deforma el logo */
.rs-brand img,
.rs-footer-brand img{
  width:var(--rs-logo-w);
  height:auto;
  display:block;
}

.rs-social{display:flex;gap:10px;margin:0 0 22px;padding:0;list-style:none}
.rs-social:last-child{margin-bottom:0}
/* .rs-iconbtn es el mismo cuadrado, pero servible fuera de una lista */
.rs-social a,
.rs-iconbtn{
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);
  color:#fff;transition:.2s ease;flex:none;
}
.rs-social a:hover,
.rs-iconbtn:hover{background:var(--rs-lime);border-color:var(--rs-lime);color:#07352f;transform:translateY(-2px)}
.rs-social svg,
.rs-iconbtn svg{width:19px;height:19px;fill:currentColor}

/* Título · icono · dirección en una línea; wrap para cuando la columna se estrecha */
.rs-contact-inline{
  display:flex;align-items:center;flex-wrap:wrap;
  gap:10px;margin-top:24px;
}
.rs-contact-inline h4{margin:0;flex:none}
.rs-contact-inline a{font-size:14px}

.rs-legal{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:30px;padding-top:18px;border-top:1px solid rgba(255,255,255,.08);
  font-size:12.5px;color:rgba(255,255,255,.5);
}
.rs-legal a{color:rgba(255,255,255,.5)}
.rs-legal a:hover{color:var(--rs-lime)}


/* ============================================================
   11. RESPONSIVE
   Todo max-width y en cascada descendente: el orden entre bloques
   importa, el más estrecho tiene que ir al final.
   ============================================================ */

/* --- 1080: la navegación empieza a apretarse --- */
@media (max-width:1080px){
  .rs-nav-links{gap:20px;font-size:13.5px}
  .rs-section--light{padding:48px 32px}
}

/* --- 900: dos columnas y menú hamburguesa --- */
@media (max-width:900px){
  :root{--rs-header-h:66px;--rs-ctl-h:42px}

  .rs-nav-toggle{display:grid}
  .rs-nav-links{
    position:absolute;top:100%;left:0;right:0;
    display:grid;gap:0;
    padding:8px 20px 18px;
    background:rgba(0,36,34,.98);
    backdrop-filter:blur(16px);
    border-bottom:1px solid var(--rs-line);
    box-shadow:0 20px 40px rgba(0,0,0,.3);
    font-size:15px;
  }
  .rs-nav-links[hidden]{display:none}
  .rs-nav-links > a{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.08)}
  .rs-nav-links > a:last-child{border-bottom:0}
  /* padding-inline y no padding: el atajo reintroduciría padding vertical
     y el min-height de --rs-ctl-h dejaría de mandar */
  .rs-nav-actions .rs-btn{padding-inline:16px;font-size:14px}

  /* El desplegable deja de flotar y se expande dentro del menú */
  .rs-menu{width:100%;margin:10px 0 4px}
  .rs-menu__trigger{
    width:100%;justify-content:space-between;
    min-height:48px;padding:0 16px;font-size:15px;
  }
  .rs-menu__panel{
    position:static;width:100%;
    margin:6px 0 10px;padding:6px;
    background:rgba(255,255,255,.05);
    box-shadow:none;
  }
  .rs-menu__link{min-height:44px}
  /* En táctil no hay hover: la descripción se muestra fija bajo cada opción
     y el botón "i" sobra. Acotado a .rs-menu para no arrastrar al footer. */
  .rs-menu .rs-info{display:none}
  .rs-menu__item{display:block}
  .rs-menu .rs-tip{
    position:static;transform:none;
    width:auto;max-width:none;
    opacity:1;visibility:visible;
    display:block;padding:0 12px 12px 43px;
    background:none;color:rgba(255,255,255,.62);
    box-shadow:none;font-size:12.5px;
  }
  .rs-menu .rs-tip::after{display:none}

  /* En el footer se retira: esas descripciones ya se leen arriba */
  .rs-footer .rs-info,
  .rs-footer .rs-tip{display:none}

  .rs-hero{padding:36px 0 24px}
  .rs-hero-grid,.rs-split,.rs-pilot,.rs-about{grid-template-columns:1fr;gap:28px}
  .rs-panel-grid{grid-template-columns:1fr}
  .rs-metrics{grid-template-columns:repeat(3,1fr)}
  .rs-benefits,.rs-steps,.rs-profiles{grid-template-columns:repeat(2,1fr)}
  .rs-step:not(:last-child)::after{display:none}
  .rs-section{padding:48px 0}
  .rs-section--light{width:calc(100% - 28px);padding:36px 24px;border-radius:28px}
  .rs-pilot-aside,.rs-form-box{padding:32px 24px}
  .rs-footer-grid{grid-template-columns:repeat(2,1fr);gap:28px}
  .rs-footer-brand{grid-column:1/-1}
  .rs-cta{grid-template-columns:1fr;padding:28px 24px}
  .rs-cta-actions .rs-btn{width:100%}
  .rs-proof{gap:14px}
  .rs-proof li{border-right:0;padding-right:0;width:100%}

  /* Objetivos táctiles de 44px */
  .rs-footer ul{gap:2px}
  .rs-footer li > a,
  .rs-footer li > .rs-linkbtn{display:block;padding:11px 0;min-height:44px}
  .rs-social{gap:12px}
  .rs-social li > a,
  .rs-iconbtn{width:44px;height:44px;padding:0;min-height:0}
}

/* --- 640: una sola columna --- */
@media (max-width:640px){
  .rs-wrap{width:calc(100% - 28px)}
  :root{--rs-logo-w:124px}
  .rs-brand__tagline{font-size:9.5px;letter-spacing:1.6px}
  .rs-hero h1{margin:18px 0 16px}
  .rs-benefits,.rs-steps,.rs-profiles,.rs-metrics{grid-template-columns:1fr}
  .rs-benefit{padding:22px}
  .rs-steps{gap:28px}
  .rs-panel{padding:16px;border-radius:24px}
  .rs-panel-head{flex-direction:column;gap:10px}
  .rs-tag{align-self:flex-start}
  .rs-section{padding:40px 0}
  .rs-section--light{width:calc(100% - 20px);padding:28px 18px;border-radius:24px}
  .rs-form-grid{grid-template-columns:1fr}
  .rs-form-box,.rs-pilot-aside{padding:26px 20px}
  .rs-pilot{border-radius:28px}
  .rs-footer-grid{grid-template-columns:1fr;gap:22px}
  .rs-footer-brand{grid-column:auto}
  .rs-legal{flex-direction:column;gap:8px}
  .rs-cta{padding:24px 20px;border-radius:24px}
  .rs-faq details{padding:16px}
  .rs-faq summary{font-size:15px}

  /* Diálogos a pantalla completa: más cómodo para el formulario largo */
  .rs-dialog,.rs-dialog--wide{width:100%;max-width:none;max-height:100dvh;margin:0}
  .rs-dialog__panel{height:100dvh;max-height:100dvh;border-radius:0}
  .rs-dialog__head{padding:20px 56px 16px 20px}
  .rs-dialog__body{padding:20px}
  .rs-dialog__foot{padding:14px 20px}
  .rs-dialog__foot .rs-btn{flex:1 1 100%}
}

/* --- 400: no cabe todo en el header --- */
@media (max-width:400px){
  .rs-wrap{width:calc(100% - 20px)}
  /* Logo + bajologo + CTA + hamburguesa no entran: el bajologo se retira
     (sigue en el footer y en el <title>) */
  .rs-brand__tagline{display:none}
  :root{--rs-logo-w:112px}
  .rs-eyebrow{font-size:11px;letter-spacing:1.1px;padding:8px 12px}
  .rs-metric{font-size:32px}
  .rs-step-icon{width:72px;height:72px;font-size:28px}
  .rs-nav-actions .rs-btn{padding-inline:12px;font-size:13px}
}

/* --- Preferencias del sistema --- */
@media (prefers-reduced-motion:reduce){
  .rs-landing *{animation:none!important;transition:none!important}
  .rs-dialog[open],.rs-dialog[open]::backdrop{animation:none!important}
  .rs-reveal{opacity:1;transform:none}
  .rs-btn:hover,.rs-profile:hover,.rs-social a:hover{transform:none}
  .rs-landing{background-attachment:scroll}
}

/* background-attachment:fixed es caro de repintar en pantallas táctiles */
@media (hover:none){
  .rs-landing{background-attachment:scroll}
}

@media print{
  .rs-header,.rs-cta,.rs-social,.rs-dialog{display:none}
  .rs-landing{background:#fff;color:#000}
}