@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800&family=Manrope:wght@600;700;800&family=Inter:wght@400;500;600&display=swap');

:root{
  --rsg-navy:#09247c;
  --rsg-navy-dark:#071b5e;
  --rsg-red:#e20613;
  --rsg-red-dark:#b8050f;
  --rsg-black:#0c0c0c;
  --rsg-gray:#61615f;
  --rsg-gray-light:#9a9a97;
  --rsg-white:#ffffff;
  --rsg-line:rgba(9,36,124,.10);
  --rsg-tint:#f4f6fb;
  --font-display:'Manrope', sans-serif;
  --font-body:'Inter', sans-serif;
}

.rsg-about-hero, .rsg-about-hero *,
.rsg-mv, .rsg-mv *,
.rsg-values, .rsg-values *,
.rsg-goal, .rsg-goal *,
.rsg-quote, .rsg-quote *{ box-sizing:border-box; }

/* ======================================================
   INTRO
   ====================================================== */
.rsg-about-hero{
  position:relative; overflow:hidden;
  background:var(--rsg-white);
  padding:64px 24px 84px;
  text-align:center;
}
.rsg-about-hero__bg{
  position:absolute; inset:0; z-index:0;
  background:radial-gradient(circle at 1.5px 1.5px, rgba(9,36,124,.1) 1.5px, transparent 0) 0 0/28px 28px;
  mask-image:radial-gradient(ellipse 70% 70% at 50% 0%, #000 40%, transparent 88%);
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 0%, #000 40%, transparent 88%);
}
.rsg-about-hero__inner{ position:relative; z-index:1; max-width:760px; margin:0 auto; }
.rsg-about-hero__eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-body); font-weight:600; font-size:13px; letter-spacing:.4px; color:var(--rsg-gray);
  margin-bottom:22px; opacity:0; transform:translateY(10px); transition:opacity .6s ease, transform .6s ease;
}
.rsg-about-hero__eyebrow-mark{ width:16px; height:2px; background:var(--rsg-red); display:inline-block; }
.rsg-about-hero.is-visible .rsg-about-hero__eyebrow{ opacity:1; transform:translateY(0); }

.rsg-about-hero__title{
  font-family:var(--font-display); font-weight:800; font-size:clamp(28px,4vw,42px); line-height:1.2;
  letter-spacing:-.3px; color:var(--rsg-navy); margin:0 0 22px;
  opacity:0; transform:translateY(14px); transition:opacity .7s ease .1s, transform .7s ease .1s;
}
.rsg-about-hero.is-visible .rsg-about-hero__title{ opacity:1; transform:translateY(0); }

.rsg-about-hero__subtitle{
  font-family:var(--font-body); font-size:16.5px; line-height:1.65; color:var(--rsg-gray); margin:0 auto;
  max-width:56ch;
  opacity:0; transform:translateY(14px); transition:opacity .7s ease .22s, transform .7s ease .22s;
}
.rsg-about-hero.is-visible .rsg-about-hero__subtitle{ opacity:1; transform:translateY(0); }

/* ======================================================
   MISIÓN / VISIÓN
   ====================================================== */
.rsg-mv{ position:relative; background:var(--rsg-tint); padding:90px 24px 100px; }
.rsg-mv__inner{ position:relative; max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:64px 40px; }

.rsg-mv__connector{
  position:absolute; inset:-20px 0 auto 0; width:100%; height:260px;
  overflow:visible; z-index:0; pointer-events:none;
}
.rsg-mv__connector-path{
  fill:none; stroke:var(--rsg-navy); stroke-width:1.5; stroke-linecap:round;
  opacity:.16;
  stroke-dasharray:1400; stroke-dashoffset:1400;
  transition:stroke-dashoffset 1.8s cubic-bezier(.65,0,.35,1) .1s;
}
.rsg-mv.is-visible .rsg-mv__connector-path{ stroke-dashoffset:0; }
.rsg-mv__connector-dot{ fill:var(--rsg-red); opacity:0; }

@media (max-width:780px){ .rsg-mv__connector{ display:none; } }

.rsg-mv__card{
  position:relative; z-index:1;
  opacity:0; transform:translateY(22px);
  transition:opacity .65s cubic-bezier(.22,1,.36,1), transform .65s cubic-bezier(.22,1,.36,1);
}
.rsg-mv.is-visible .rsg-mv__card--mision{ transition-delay:.05s; opacity:1; transform:translateY(0); }
.rsg-mv.is-visible .rsg-mv__card--vision{ transition-delay:.2s; opacity:1; transform:translateY(0); }

.rsg-mv__card--vision{ margin-top:56px; }
@media (max-width:780px){ .rsg-mv__card--vision{ margin-top:0; } }

.rsg-mv__emblem{
  width:76px; height:76px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:22px;
}
.rsg-mv__emblem svg{ width:32px; height:32px; }
.rsg-mv__card--mision .rsg-mv__emblem{ background:var(--rsg-gray-light); color:var(--rsg-white); }
.rsg-mv__card--vision .rsg-mv__emblem{ background:var(--rsg-navy); color:var(--rsg-white); }
.rsg-mv__card--vision{ text-align:right; }
.rsg-mv__card--vision .rsg-mv__emblem{ margin-left:auto; }

.rsg-mv__label{
  display:block; font-family:var(--font-display); font-weight:800; font-size:26px;
  color:var(--rsg-navy); margin-bottom:12px;
}
.rsg-mv__text{
  font-family:var(--font-body); font-size:15.5px; line-height:1.7; color:var(--rsg-gray);
  max-width:38ch; margin:0;
}
.rsg-mv__card--vision .rsg-mv__text{ margin-left:auto; }

/* Ícono Misión — meta */
.rsg-mv__icon--goal .rsg-mv__goal-ring{
  transform-box:fill-box; transform-origin:center;
  opacity:0; transform:scale(.5);
  transition:opacity .5s ease, transform .5s cubic-bezier(.34,1.56,.64,1);
}
.rsg-mv.is-visible .rsg-mv__icon--goal .rsg-mv__goal-ring--1{ transition-delay:.5s; opacity:.5; transform:scale(1); }
.rsg-mv.is-visible .rsg-mv__icon--goal .rsg-mv__goal-ring--2{ transition-delay:.62s; opacity:.8; transform:scale(1); }

.rsg-mv__icon--goal .rsg-mv__goal-core{
  transform-box:fill-box; transform-origin:center;
  opacity:0; transform:scale(0);
  transition:opacity .3s ease .95s, transform .4s cubic-bezier(.34,1.56,.64,1) .95s;
}
.rsg-mv.is-visible .rsg-mv__icon--goal .rsg-mv__goal-core{ opacity:1; transform:scale(1); }

.rsg-mv__icon--goal .rsg-mv__goal-dart{
  stroke-dasharray:24; stroke-dashoffset:24; opacity:0;
  transition:stroke-dashoffset .55s cubic-bezier(.65,0,.35,1) .38s, opacity .1s ease .38s;
}
.rsg-mv.is-visible .rsg-mv__icon--goal .rsg-mv__goal-dart{ stroke-dashoffset:0; opacity:1; }

.rsg-mv.is-visible .rsg-mv__icon--goal .rsg-mv__goal-ring--1{
  animation:rsg-mv-goal-pulse 2.6s ease-out 1.3s infinite;
}
@keyframes rsg-mv-goal-pulse{
  0%{ opacity:.5; transform:scale(1); }
  100%{ opacity:0; transform:scale(1.6); }
}

/* Ícono Visión — ojo */
.rsg-mv__icon--eye .rsg-mv__eye-lid{
  stroke-dasharray:40; stroke-dashoffset:40;
  transition:stroke-dashoffset .7s cubic-bezier(.65,0,.35,1) .4s;
}
.rsg-mv.is-visible .rsg-mv__icon--eye .rsg-mv__eye-lid{ stroke-dashoffset:0; }

.rsg-mv__icon--eye .rsg-mv__eye-iris,
.rsg-mv__icon--eye .rsg-mv__eye-pupil{
  transform-box:fill-box; transform-origin:center;
  opacity:0; transform:scale(.3);
  transition:opacity .35s ease 1s, transform .4s cubic-bezier(.34,1.56,.64,1) 1s;
}
.rsg-mv.is-visible .rsg-mv__icon--eye .rsg-mv__eye-iris,
.rsg-mv.is-visible .rsg-mv__icon--eye .rsg-mv__eye-pupil{ opacity:1; transform:scale(1); }

.rsg-mv.is-visible .rsg-mv__icon--eye .rsg-mv__eye-pupil{
  animation:rsg-mv-eye-scan 4.5s ease-in-out 1.6s infinite;
}
@keyframes rsg-mv-eye-scan{
  0%,100%{ transform:translateX(0); }
  30%{ transform:translateX(1.4px); }
  60%{ transform:translateX(-1.4px); }
}

.rsg-mv__icon--eye .rsg-mv__eye-ray{
  opacity:0; transform-box:fill-box; transform-origin:center;
}
.rsg-mv.is-visible .rsg-mv__icon--eye .rsg-mv__eye-ray{
  animation:rsg-mv-eye-ray 2.8s ease-in-out infinite;
}
.rsg-mv.is-visible .rsg-mv__icon--eye .rsg-mv__eye-ray--1{ animation-delay:1.3s; }
.rsg-mv.is-visible .rsg-mv__icon--eye .rsg-mv__eye-ray--2{ animation-delay:1.5s; }
.rsg-mv.is-visible .rsg-mv__icon--eye .rsg-mv__eye-ray--3{ animation-delay:1.7s; }
@keyframes rsg-mv-eye-ray{
  0%,100%{ opacity:.35; }
  50%{ opacity:1; }
}

@media (max-width:780px){
  .rsg-mv{ padding:76px 20px 84px; }
  .rsg-mv__inner{ grid-template-columns:1fr; gap:48px; }
  .rsg-mv__card--vision{ text-align:left; }
  .rsg-mv__card--vision .rsg-mv__emblem{ margin-left:0; }
  .rsg-mv__card--vision .rsg-mv__text{ margin-left:0; }
}

/* ======================================================
   VALORES — burbujas interactivas
   ====================================================== */
.rsg-values{ position:relative; background:var(--rsg-white); padding:100px 24px 90px; overflow:hidden; }
.rsg-values__bg{
  position:absolute; inset:0; z-index:0;
  background:radial-gradient(circle at 1.5px 1.5px, rgba(9,36,124,.08) 1.5px, transparent 0) 0 0/30px 30px;
  mask-image:radial-gradient(ellipse 70% 60% at 80% 20%, #000 40%, transparent 88%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 80% 20%, #000 40%, transparent 88%);
}
.rsg-values__inner{ position:relative; z-index:1; max-width:1100px; margin:0 auto; }

.rsg-values__intro{ text-align:center; max-width:560px; margin:0 auto 56px; }
.rsg-values__eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-body); font-weight:600; font-size:13px; letter-spacing:.4px; color:var(--rsg-gray);
  margin-bottom:20px; opacity:0; transform:translateY(10px); transition:opacity .6s ease, transform .6s ease;
}
.rsg-values__eyebrow-mark{ width:16px; height:2px; background:var(--rsg-red); display:inline-block; }
.rsg-values.is-visible .rsg-values__eyebrow{ opacity:1; transform:translateY(0); }

.rsg-values__title{
  font-family:var(--font-display); font-weight:800; font-size:clamp(26px,3.4vw,36px); line-height:1.2;
  color:var(--rsg-navy); margin:0 0 12px;
  opacity:0; transform:translateY(12px); transition:opacity .65s ease .08s, transform .65s ease .08s;
}
.rsg-values.is-visible .rsg-values__title{ opacity:1; transform:translateY(0); }

.rsg-values__hint{
  font-family:var(--font-body); font-size:14px; color:var(--rsg-gray-light); margin:0;
  opacity:0; transition:opacity .65s ease .2s;
}
.rsg-values.is-visible .rsg-values__hint{ opacity:1; }

.rsg-values__cluster{
  display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:center; gap:18px 22px;
  max-width:760px; margin:0 auto;
}

.rsg-value{
  position:relative; flex:0 0 auto;
  width:158px; height:158px; border-radius:50%;
  border:none; padding:0; cursor:pointer;
  background:transparent;
  opacity:0; transform:translateY(20px) scale(.85);
  transition:opacity .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1);
}
.rsg-values.is-visible .rsg-value{ opacity:1; transform:translateY(0) scale(1); }
.rsg-values.is-visible .rsg-value:nth-child(1){ transition-delay:.05s; }
.rsg-values.is-visible .rsg-value:nth-child(2){ transition-delay:.12s; }
.rsg-values.is-visible .rsg-value:nth-child(3){ transition-delay:.19s; }
.rsg-values.is-visible .rsg-value:nth-child(4){ transition-delay:.26s; }
.rsg-values.is-visible .rsg-value:nth-child(5){ transition-delay:.33s; }
.rsg-values.is-visible .rsg-value:nth-child(6){ transition-delay:.4s; }
.rsg-values.is-visible .rsg-value:nth-child(7){ transition-delay:.47s; }

.rsg-value--sm{ width:132px; height:132px; }
.rsg-value--lg{ width:180px; height:180px; }

.rsg-value--a{ --c:var(--rsg-navy); --c-dark:var(--rsg-navy-dark); }
.rsg-value--b{ --c:var(--rsg-red); --c-dark:var(--rsg-red-dark); }
.rsg-value--c{ --c:var(--rsg-black); --c-dark:#000; }

/* Distribución fija en racimo (sin animar -> no afecta el layout) */
.rsg-value:nth-child(1){ margin-top:0; }
.rsg-value:nth-child(2){ margin-top:52px; }
.rsg-value:nth-child(3){ margin-top:-8px; }
.rsg-value:nth-child(4){ margin-top:22px; }
.rsg-value:nth-child(5){ margin-top:64px; }
.rsg-value:nth-child(6){ margin-top:-2px; }
.rsg-value:nth-child(7){ margin-top:36px; }

/* Flotación: va en el elemento interno (position:absolute) para no mover el layout */
.rsg-value__inner{ animation:rsg-value-float 4.5s ease-in-out infinite; }
.rsg-value:nth-child(2n) .rsg-value__inner{ animation-duration:5.2s; animation-delay:.4s; }
.rsg-value:nth-child(3n) .rsg-value__inner{ animation-duration:3.8s; animation-delay:.8s; }
.rsg-value.is-busy .rsg-value__inner{ animation-play-state:paused; }
@keyframes rsg-value-float{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-8px); }
}

.rsg-value__inner{
  position:absolute; inset:0; border-radius:50%;
  background:
    radial-gradient(circle at 30% 24%, rgb(255 255 255 / 50%) 0%, rgba(255, 255, 255, 0) 44%), 
    radial-gradient(circle at 70% 80%, rgba(0, 0, 0, .22) 0%, rgba(0, 0, 0, 0) 58%), 
    linear-gradient(127deg, #b4d9ff 0%, #6abff100 100%);
  display:flex; align-items:center; justify-content:center; text-align:center; padding:14px;
  box-shadow:
    inset 0 -14px 22px -6px rgba(0, 0, 0, .35), 
    inset 0 10px 18px -6px rgb(113 147 183 / 30%), 
    0 20px 34px -18px rgb(9 36 124 / 77%);
  overflow:hidden;
  transition:box-shadow .3s ease;
}
.rsg-value__inner::before{
  content:'';
  position:absolute; top:11%; left:18%; width:36%; height:20%;
  background:rgba(255,255,255,.6);
  border-radius:50%;
  filter:blur(3px);
  transform:rotate(-20deg);
  pointer-events:none;
}
.rsg-value:hover .rsg-value__inner{
  box-shadow:
    inset 0 -14px 22px -6px rgba(0,0,0,.35),
    inset 0 10px 18px -6px rgba(255,255,255,.35),
    0 26px 44px -18px rgba(9,36,124,.5);
}
.rsg-value__text{
  font-family:var(--font-display); font-weight:700; font-size:15px; line-height:1.25; color: #000000;
}

.rsg-value__burst{ position:absolute; inset:0; pointer-events:none; }
.rsg-value__burst i{
  position:absolute; top:50%; left:50%; width:10px; height:10px; margin:-5px 0 0 -5px;
  border-radius:50%; background:var(--c); opacity:0;
  transform:rotate(var(--ang,0deg)) translateX(0) scale(0);
}

.rsg-value:focus-visible{ outline:2px solid var(--rsg-red); outline-offset:4px; }

/* Estallido al tocar */
@keyframes rsg-value-pop{
  0%{ transform:scale(1); opacity:1; }
  35%{ transform:scale(1.16); opacity:1; }
  100%{ transform:scale(1.42); opacity:0; }
}
@keyframes rsg-value-burst{
  0%{ transform:rotate(var(--ang,0deg)) translateX(0) scale(.4); opacity:.95; }
  100%{ transform:rotate(var(--ang,0deg)) translateX(58px) scale(0); opacity:0; }
}
.rsg-value.is-bursting{ animation-play-state:paused; }
.rsg-value.is-bursting .rsg-value__inner{ animation:rsg-value-pop .45s cubic-bezier(.22,1,.36,1) forwards; }
.rsg-value.is-bursting .rsg-value__burst i{ animation:rsg-value-burst .55s ease-out forwards; }

/* La gota vuelve a formar la burbuja */
@keyframes rsg-value-reform{
  0%{ transform:scale(.12); opacity:0; border-radius:50% 50% 50% 6%; }
  55%{ transform:scale(1.14); opacity:1; border-radius:50%; }
  100%{ transform:scale(1); opacity:1; border-radius:50%; }
}
.rsg-value.is-reforming{ animation-play-state:paused; }
.rsg-value.is-reforming .rsg-value__inner{ animation:rsg-value-reform .7s cubic-bezier(.22,1,.36,1) forwards; }

@media (max-width:640px){
  .rsg-value{ width:124px; height:124px; }
  .rsg-value--sm{ width:106px; height:106px; }
  .rsg-value--lg{ width:140px; height:140px; }
  .rsg-value__text{ font-size:13px; }
  .rsg-value{ margin-top:0 !important; }
}

/* ======================================================
   OBJETIVO
   ====================================================== */
.rsg-goal{
  position:relative; background:var(--rsg-navy-dark); padding:100px 24px; overflow:hidden;
  display:flex; align-items:center; justify-content:center; text-align:center;
}
.rsg-goal__ring{
  position:absolute; width:520px; height:520px; border-radius:50%;
  border:1px solid rgba(226,6,19,.35); top:50%; left:50%; transform:translate(-50%,-50%) scale(.7);
  opacity:0; transition:opacity .8s ease, transform 1s cubic-bezier(.22,1,.36,1);
}
.rsg-goal__ring::after{
  content:''; position:absolute; inset:34px; border-radius:50%; border:1px solid rgba(226,6,19,.2);
}
.rsg-goal.is-visible .rsg-goal__ring{ opacity:1; transform:translate(-50%,-50%) scale(1); }

.rsg-goal__inner{ position:relative; z-index:1; max-width:600px; }
.rsg-goal__emblem{
  width:66px; height:66px; border-radius:50%; margin:0 auto 20px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(226,6,19,.12); color:var(--rsg-red);
  opacity:0; transform:scale(.7); transition:opacity .6s ease .1s, transform .6s cubic-bezier(.34,1.56,.64,1) .1s;
}
.rsg-goal__emblem svg{ width:28px; height:28px; }
.rsg-goal.is-visible .rsg-goal__emblem{ opacity:1; transform:scale(1); }

.rsg-goal__label{
  display:block; font-family:var(--font-display); font-weight:800; font-size:15px; letter-spacing:.4px;
  color:var(--rsg-red); text-transform:uppercase; margin-bottom:16px;
  opacity:0; transition:opacity .6s ease .2s;
}
.rsg-goal.is-visible .rsg-goal__label{ opacity:1; }

.rsg-goal__text{
  font-family:var(--font-display); font-weight:700; font-size:clamp(20px,2.6vw,28px); line-height:1.45;
  color:var(--rsg-white); margin:0;
  opacity:0; transform:translateY(12px); transition:opacity .65s ease .3s, transform .65s ease .3s;
}
.rsg-goal.is-visible .rsg-goal__text{ opacity:1; transform:translateY(0); }

@media (max-width:640px){
  .rsg-goal{ padding:80px 20px; }
  .rsg-goal__ring{ width:340px; height:340px; }
}

/* ======================================================
   FRASE FINAL
   ====================================================== */
.rsg-quote{ position:relative; background:var(--rsg-black); padding:110px 24px; overflow:hidden; text-align:center; }
.rsg-quote__bg{
  position:absolute; inset:0; z-index:0;
  background:radial-gradient(circle at 1.5px 1.5px, rgba(255,255,255,.06) 1.5px, transparent 0) 0 0/28px 28px;
  mask-image:radial-gradient(ellipse 70% 70% at 50% 30%, #000 40%, transparent 88%);
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 30%, #000 40%, transparent 88%);
}
.rsg-quote__inner{ position:relative; z-index:1; max-width:720px; margin:0 auto; }
.rsg-quote__mark{
  width:36px; height:auto; color:var(--rsg-red); margin:0 auto 24px;
  opacity:0; transform:translateY(8px); transition:opacity .6s ease, transform .6s ease;
}
.rsg-quote.is-visible .rsg-quote__mark{ opacity:1; transform:translateY(0); }

.rsg-quote__text{
  font-family:var(--font-display); font-weight:700; font-size:clamp(22px,3.2vw,32px); line-height:1.5;
  color:var(--rsg-white); margin:0 0 26px;
  opacity:0; transform:translateY(14px); transition:opacity .7s ease .1s, transform .7s ease .1s;
}
.rsg-quote.is-visible .rsg-quote__text{ opacity:1; transform:translateY(0); }

.rsg-quote__author{
  display:inline-block; font-family:var(--font-body); font-weight:500; font-size:14px; color:rgba(255,255,255,.5);
  opacity:0; transition:opacity .7s ease .25s;
}
.rsg-quote.is-visible .rsg-quote__author{ opacity:1; }

@media (prefers-reduced-motion:reduce){
  .rsg-about-hero *, .rsg-mv *, .rsg-values *, .rsg-goal *, .rsg-quote *{
    transition:none !important; animation:none !important;
  }
  .rsg-about-hero__eyebrow, .rsg-about-hero__title, .rsg-about-hero__subtitle,
  .rsg-mv__card, 
  .rsg-values__eyebrow, .rsg-values__title, .rsg-values__hint, .rsg-value,
  .rsg-goal__ring, .rsg-goal__emblem, .rsg-goal__label, .rsg-goal__text,
  .rsg-quote__mark, .rsg-quote__text, .rsg-quote__author{
    opacity:1 !important; transform:none !important; stroke-dashoffset:0 !important;
  }
  .rsg-mv__connector-dot{ display:none !important; }
}