@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;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-gray:#61615f;
  --rsg-gray-light:#9a9a97;
  --rsg-white:#ffffff;
  --rsg-line:rgba(9,36,124,.10);
  --rsg-tint:#f4f6fb;
  --font-display:'Archivo', sans-serif;
  --font-body:'Inter', sans-serif;
}

.rsv-services, .rsv-services *{ box-sizing:border-box; }

.rsv-services{
  position:relative;
  padding:120px 24px 130px;
  background:var(--rsg-white);
  overflow:hidden;
}
.rsv-services__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% 55% at 18% 10%, #000 40%, transparent 88%);
  -webkit-mask-image:radial-gradient(ellipse 70% 55% at 18% 10%, #000 40%, transparent 88%);
}

.rsv-services__inner{ position:relative; z-index:1; max-width:1280px; margin:0 auto; }

/* Header + visual de red (hub) */
.rsv-services__intro{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  align-items:center;
  gap:40px;
  margin-bottom:64px;
}

.rsv-services__header{ max-width:680px; }

.rsv-services__eyebrow{
  display: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;
}
.rsv-services__eyebrow-mark{ width:16px; height:2px; background:var(--rsg-red); display:inline-block; }
.rsv-services.is-visible .rsv-services__eyebrow{ opacity:1; transform:translateY(0); }

.rsv-services__title{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(28px, 4vw, 46px); line-height:1.16; letter-spacing:-.4px;
  color:var(--rsg-navy); margin:0 0 20px;
  opacity:0; transform:translateY(16px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1) .1s, transform .7s cubic-bezier(.22,1,.36,1) .1s;
}
.rsv-services.is-visible .rsv-services__title{ opacity:1; transform:translateY(0); }
.rsv-services__title-accent{ color:var(--rsg-red); }

.rsv-services__desc{
  font-family:var(--font-body); font-weight:400; font-size:16px; line-height:1.6;
  color:var(--rsg-gray); margin:0; max-width:54ch;
  opacity:0; transform:translateY(14px);
  transition:opacity .6s ease .25s, transform .6s ease .25s;
}
.rsv-services.is-visible .rsv-services__desc{ opacity:1; transform:translateY(0); }

/* Grid: 3 por fila en desktop, va bajando de a 3 */
.rsv-services__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
}

.rsv-service{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  min-height:300px;
  padding:0;
  display:flex; flex-direction:column;
  background:var(--rsg-navy); /* respaldo si la foto aún no existe */
  box-shadow:0 1px 2px rgba(9,36,124,.06);
  opacity:0; transform:translateY(26px);
  transition:
    opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1),
    box-shadow .35s ease;
  transition-delay:0s, calc(var(--i,0) * .06s), calc(var(--i,0) * .06s), 0s;
  transition:
    opacity .6s cubic-bezier(.22,1,.36,1), transform .25s ease-out,
    box-shadow .35s ease;
}
.rsv-services.is-visible .rsv-service{ opacity:1; transform:translateY(0); }
.rsv-service:hover{
  box-shadow:0 30px 54px -26px rgba(9,36,124,.4);
}

/* Textura de puntos sutil (queda visible si aún no hay foto) */
.rsv-service::before{
  content:'';
  position:absolute; inset:0; z-index:0;
  background:
    linear-gradient(150deg, rgba(226,6,19,.16) 0%, transparent 55%),
    linear-gradient(200deg, var(--rsg-navy) 0%, var(--rsg-navy-dark) 100%),
    radial-gradient(circle at 1.5px 1.5px, rgba(255,255,255,.08) 1.5px, transparent 0) 0 0/22px 22px;
  mask-image:radial-gradient(ellipse 70% 60% at 85% 10%, #000 35%, transparent 85%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 85% 10%, #000 35%, transparent 85%);
}

/* Foto de fondo de cada servicio, igual al panel de "Lo que hacemos" en móvil */
.rsv-service__visual{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
}
.rsv-service__visual::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(
    180deg,
    rgba(9,36,124,.25) 0%,
    rgba(9,36,124,.55) 45%,
    rgba(9,36,124,.94) 100%
  );
}

.rsv-service__top{
  position:absolute; z-index:1; top:24px; left:24px; right:24px;
  display:flex; align-items:flex-start; justify-content:space-between;
}
.rsv-service__num{
  font-family:var(--font-display); font-weight:700; font-size:34px; line-height:1;
  color:rgba(255,255,255,.6);
  transition:color .35s ease;
}
.rsv-service:hover .rsv-service__num{ color:rgba(255,255,255,.85); }

/* El ícono se oculta: en esta variante solo se muestra número + foto, como en inicio */
.rsv-service__icon{ display:none; }

.rsv-service__body{
  position:absolute; z-index:1; left:24px; right:24px; bottom:24px;
  margin-top:0;
}

.rsv-service__name{
  font-family:var(--font-display); font-weight:700; font-size:20px;
  color:var(--rsg-white); margin:0 0 10px; line-height:1.3;
}
.rsv-service__text{
  font-family:var(--font-body); font-weight:400; font-size:14.5px; line-height:1.6;
  color:rgba(255,255,255,.78); margin:0 0 22px; max-width:none;
}

.rsv-service__link{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-body); font-weight:600; font-size:13.5px;
  color:var(--rsg-white); text-decoration:none;
  padding-bottom:3px; border-bottom:1px solid rgba(255,255,255,.32);
  transition:border-color .25s ease, color .25s ease, gap .25s ease;
  width:max-content;
}
.rsv-service__link svg{ width:14px; height:14px; transition:transform .25s ease; }
.rsv-service__link:hover{ color:var(--rsg-red); border-color:var(--rsg-red); }
.rsv-service__link:hover svg{ transform:translateX(4px); }

/* ======================================================
   Visual "hub": nodo central conectado a los servicios
   ====================================================== */
.rsv-services__hub-wrap{
  display:flex; align-items:center; justify-content:center;
}
.rsv-services__hub{
  width:100%; max-width:380px; height:auto; overflow:visible;
}

/* Anillo decorativo, gira lento y continuo */
.rsv-hub__ring{
  fill:none; stroke:rgba(0,0,0,.29); stroke-width:1.5; stroke-dasharray:3 7;
  transform-box:fill-box; transform-origin:center;
  animation:rsv-hub-rotate 60s linear infinite;
}
@keyframes rsv-hub-rotate{ to{ transform:rotate(360deg); } }

/* Líneas del centro a cada nodo, se "dibujan" al entrar en pantalla */
.rsv-hub__line{
  fill:none; stroke:var(--rsg-navy); stroke-width:2; stroke-linecap:round;
  opacity:.45;
  stroke-dasharray:150; stroke-dashoffset:150;
  transition:stroke-dashoffset .9s cubic-bezier(.65,0,.35,1);
  transition-delay:calc(var(--ni,0) * .08s);
}
.rsv-services.is-visible .rsv-hub__line{ stroke-dashoffset:0; }

/* Nodos de servicio: aparecen con un pequeño "pop" tras dibujarse la línea */
.rsv-hub__node{
  opacity:0;
  transform-box:fill-box; transform-origin:center;
  transform:scale(.4);
  transition:opacity .4s cubic-bezier(.34,1.56,.64,1), transform .4s cubic-bezier(.34,1.56,.64,1);
  transition-delay:calc(.4s + var(--ni,0) * .08s);
  cursor:default;
}
.rsv-services.is-visible .rsv-hub__node{ opacity:1; transform:scale(1); }

.rsv-hub__node-bg{
  fill:var(--rsg-white); stroke:var(--rsg-navy); stroke-width:2;
  transition:fill .3s ease, stroke .3s ease;
}
.rsv-hub__node path{ fill:var(--rsg-navy); transition:fill .3s ease; }
.rsv-hub__node:hover .rsv-hub__node-bg{ fill:var(--rsg-red); stroke:var(--rsg-red); }
.rsv-hub__node:hover path{ fill:var(--rsg-white); }

/* Núcleo central */
.rsv-hub__core{
  opacity:0;
  transform-box:fill-box; transform-origin:center;
  transform:scale(.5);
  transition:opacity .5s cubic-bezier(.34,1.56,.64,1) .1s, transform .5s cubic-bezier(.34,1.56,.64,1) .1s;
}
.rsv-services.is-visible .rsv-hub__core{ opacity:1; transform:scale(1); }
.rsv-hub__core-bg{ fill:var(--rsg-red); }
.rsv-hub__core-icon path{ fill:var(--rsg-white); }

/* Pulso alrededor del núcleo */
.rsv-hub__pulse{
  fill:none; stroke:var(--rsg-red); stroke-width:2;
  transform-box:fill-box; transform-origin:center;
  opacity:0;
}
.rsv-services.is-visible .rsv-hub__pulse{
  animation:rsv-hub-pulse 2.4s ease-out 1s infinite;
}
@keyframes rsv-hub-pulse{
  0%{ opacity:.55; transform:scale(1); }
  100%{ opacity:0; transform:scale(1.9); }
}

/* ======================================================
   Call to action final -> contacto (mismo fondo de la sección)
   ====================================================== */
.rsv-services__cta{
  position:relative;
  margin-top:70px;
  padding-top:56px;
  border-top:1px solid var(--rsg-line);
  display:flex; flex-direction:column; align-items:center; text-align:center;
  opacity:0; transform:translateY(20px);
  transition:opacity .65s cubic-bezier(.22,1,.36,1) .1s, transform .65s cubic-bezier(.22,1,.36,1) .1s;
}
.rsv-services.is-visible .rsv-services__cta{ opacity:1; transform:translateY(0); }

.rsv-services__cta-title{
  font-family:var(--font-display); font-weight:800; font-size:clamp(24px, 3vw, 34px);
  line-height:1.25; color:var(--rsg-navy); margin:0 0 12px; max-width:20ch;
}
.rsv-services__cta-desc{
  font-family:var(--font-body); font-weight:400; font-size:15.5px; line-height:1.6;
  color:var(--rsg-gray); margin:0 0 36px; max-width:46ch;
}

/* Botón + animación de anillos "ping", nueva pero de la misma familia que el hub */
.rsv-services__cta-btn-wrap{
  position:relative;
  display:inline-flex;
}
.rsv-cta-ring{
  position:absolute; inset:0;
  border-radius:3px;
  border:1.5px solid var(--rsg-red);
  opacity:0;
  pointer-events:none;
}
.rsv-services.is-visible .rsv-cta-ring{
  animation:rsv-cta-ping 2.6s cubic-bezier(.2,.8,.2,1) infinite;
}
.rsv-cta-ring--1{ animation-delay:.2s !important; }
.rsv-cta-ring--2{ animation-delay:1.5s !important; }
@keyframes rsv-cta-ping{
  0%{ transform:scale(1); opacity:.5; }
  75%,100%{ transform:scale(1.4); opacity:0; }
}

.rsv-services__cta-btn{
  position:relative; z-index:1;
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-body); font-weight:600; font-size:15px;
  color:var(--rsg-white); text-decoration:none;
  background:var(--rsg-red);
  padding:14px 30px; border-radius:3px;
  transition:background .2s ease, transform .2s ease;
}
.rsv-services__cta-btn svg{ width:16px; height:16px; transition:transform .25s ease; }
.rsv-services__cta-btn:hover{ background:var(--rsg-red-dark); transform:translateY(-2px); }
.rsv-services__cta-btn:hover svg{ transform:translateX(4px); }

/* ---- Tablet: 2 por fila ---- */
@media (max-width:960px){
  .rsv-services{ padding:96px 20px 100px; }
  .rsv-services__grid{ grid-template-columns:repeat(2, 1fr); gap:18px; }
  .rsv-services__intro{ grid-template-columns:1fr; gap:20px; margin-bottom:48px; }
  .rsv-services__hub{ max-width:280px; }
  .rsv-services__cta{ margin-top:56px; padding-top:44px; }
}

/* ---- Móvil: 1 columna, mismo estilo que "Lo que hacemos" mobile ---- */
@media (max-width:640px){
  .rsv-services__intro{ margin-bottom:36px; }
  .rsv-services__hub{ max-width:230px; }
  .rsv-services__grid{ grid-template-columns:1fr; gap:16px; }
  .rsv-service{ min-height:280px; }
  .rsv-service__top{ top:20px; left:20px; right:20px; }
  .rsv-service__body{ left:20px; right:20px; bottom:20px; }
  .rsv-service__name{ font-size:20px; }
  .rsv-service__text{ font-size:14px; }
  .rsv-services__cta{ margin-top:44px; padding-top:36px; }
  .rsv-services__cta-btn-wrap{ width:100%; }
  .rsv-services__cta-btn{ width:100%; justify-content:center; }
}

@media (prefers-reduced-motion:reduce){
  .rsv-services *{ transition:none !important; animation:none !important; }
  .rsv-services__eyebrow, .rsv-services__title, .rsv-services__desc, .rsv-service,
  .rsv-hub__line, .rsv-hub__node, .rsv-hub__core, .rsv-services__cta{
    opacity:1 !important; transform:none !important;
  }
  .rsv-hub__line{ stroke-dashoffset:0 !important; }
  .rsv-cta-ring{ display:none; }
  .rsv-soon *{ transition:none !important; animation:none !important; }
  .rsv-soon__eyebrow, .rsv-soon__title, .rsv-soon__desc, .rsv-soon-card{
    opacity:1 !important; transform:none !important;
  }
}

/* ======================================================
   Próximamente — nuevas plataformas RSG
   ====================================================== */
.rsv-soon{
  position:relative;
  padding:110px 24px 130px;
  background:var(--rsg-tint);
  overflow:hidden;
}
.rsv-soon__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 65% 50% at 85% 0%, #000 40%, transparent 88%);
  -webkit-mask-image:radial-gradient(ellipse 65% 50% at 85% 0%, #000 40%, transparent 88%);
}

.rsv-soon__inner{ position:relative; z-index:1; max-width:1280px; margin:0 auto; }

.rsv-soon__header{ max-width:680px; margin:0 auto 56px; text-align:center; }

.rsv-soon__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;
}
.rsv-soon__eyebrow-mark{ width:16px; height:2px; background:var(--rsg-red); display:inline-block; }
.rsv-soon.is-visible .rsv-soon__eyebrow{ opacity:1; transform:translateY(0); }

.rsv-soon__title{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(26px, 3.6vw, 40px); line-height:1.2; letter-spacing:-.4px;
  color:var(--rsg-navy); margin:0 0 16px;
  opacity:0; transform:translateY(16px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1) .1s, transform .7s cubic-bezier(.22,1,.36,1) .1s;
}
.rsv-soon.is-visible .rsv-soon__title{ opacity:1; transform:translateY(0); }
.rsv-soon__title-accent{ color:var(--rsg-red); }

.rsv-soon__desc{
  font-family:var(--font-body); font-weight:400; font-size:16px; line-height:1.6;
  color:var(--rsg-gray); margin:0 auto; max-width:52ch;
  opacity:0; transform:translateY(14px);
  transition:opacity .6s ease .25s, transform .6s ease .25s;
}
.rsv-soon.is-visible .rsv-soon__desc{ opacity:1; transform:translateY(0); }

.rsv-soon__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:26px;
}

.rsv-soon-card{
  position:relative;
  border-radius:18px;
  background:var(--rsg-white);
  box-shadow:0 1px 2px rgba(9,36,124,.08);
  overflow:hidden;
  opacity:0; transform:translateY(26px);
  transition:opacity .6s cubic-bezier(.22,1,.36,1), transform .5s cubic-bezier(.22,1,.36,1), box-shadow .35s ease;
  transition-delay:calc(var(--i,0) * .1s);
}
.rsv-soon.is-visible .rsv-soon-card{ opacity:1; transform:translateY(0); }
.rsv-soon-card:hover{ box-shadow:0 30px 54px -26px rgba(9,36,124,.32); }

.rsv-soon-card__media{
  position:relative;
  height:230px;
  background:linear-gradient(200deg, var(--rsg-navy) 0%, var(--rsg-navy-dark) 100%);
  overflow:visible;
}
.rsv-soon-card__photo-h{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
}
.rsv-soon-card__photo-h::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(9,36,124,.05) 0%, rgba(9,36,124,.55) 100%);
}
.rsv-soon-card__photo-v{
  position:absolute; z-index:2;
  right:20px; bottom:-34px;
  width:34%; aspect-ratio:9/16;
  background-size:cover; background-position:center;
  border-radius:10px;
  border:3px solid var(--rsg-white);
  box-shadow:0 14px 26px -12px rgba(9,36,124,.45);
  transform:rotate(-4deg);
  transition:transform .4s cubic-bezier(.22,1,.36,1);
}
.rsv-soon-card:hover .rsv-soon-card__photo-v{ transform:rotate(0deg) translateY(-4px); }

.rsv-soon-card__logo{
  position:absolute; z-index:2; top:20px; left:20px;
  width:52px; height:52px; border-radius:50%;
  background:var(--rsg-white);
  border:1.5px solid var(--rsg-line);
  display:flex; align-items:center; justify-content:center;
  padding:10px;
}
.rsv-soon-card__logo img{ width:100%; height:100%; object-fit:contain; }

.rsv-soon-card__badge{
  position:absolute; z-index:2; top:20px; right:20px;
  display:inline-flex; align-items:center; gap:7px;
  background:var(--rsg-red); color:var(--rsg-white);
  font-family:var(--font-body); font-weight:600; font-size:11.5px; letter-spacing:.3px;
  padding:6px 12px 6px 10px; border-radius:20px;
}
.rsv-soon-card__badge-dot{
  width:6px; height:6px; border-radius:50%; background:var(--rsg-white);
  animation:rsv-soon-blink 1.8s ease-in-out infinite;
}
@keyframes rsv-soon-blink{
  0%,100%{ opacity:1; } 50%{ opacity:.35; }
}

.rsv-soon-card__body{ padding:46px 24px 28px; }

.rsv-soon-card__date{
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-body); font-weight:600; font-size:13px;
  color:var(--rsg-red); margin-bottom:12px;
}
.rsv-soon-card__date svg{ width:15px; height:15px; }

.rsv-soon-card__name{
  font-family:var(--font-display); font-weight:700; font-size:21px;
  color:var(--rsg-navy); margin:0 0 10px; line-height:1.3;
}
.rsv-soon-card__text{
  font-family:var(--font-body); font-weight:400; font-size:14.5px; line-height:1.6;
  color:var(--rsg-gray); margin:0;
}

@media (max-width:960px){
  .rsv-soon{ padding:90px 20px 100px; }
  .rsv-soon__grid{ grid-template-columns:1fr; gap:20px; max-width:520px; margin:0 auto; }
  .rsv-soon__header{ margin-bottom:44px; }
}

@media (max-width:640px){
  .rsv-soon-card__media{ height:200px; }
  .rsv-soon-card__photo-v{ width:38%; right:16px; bottom:-28px; }
  .rsv-soon-card__body{ padding:40px 20px 24px; }
}