/* ==========================================================================
   RH·BOTS — RHX2 landing
   Design tokens taken from the approved maqueta:
   #282828 · #8a8a8a (o #282828 66%) · #009ee3 · #f3f5f8 · #2f2483
   Tipografía: Exo (Regular 400 / Medium 500 / Bold 700)
   ========================================================================== */

:root{
  --navy:      #2f2483;
  --blue:      #009ee3;
  --blue-deep: #0a7fc4;
  --ink:       #282828;
  --muted:     #8a8a8a;
  --light:     #f3f5f8;
  --white:     #ffffff;

  --ink-66:    rgba(40,40,40,.66);

  --font:      'Exo', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --wrap:      1180px;
  --wrap-narrow: 780px;

  --r-pill:    999px;

  --ease:      cubic-bezier(.22,.75,.3,1);
  --dur:       .45s;

  --header-h:  76px;
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font);
  font-weight:500;
  color:var(--ink);
  background:var(--white);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
h1,h2,h3,p,dl,dd,figure{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

svg{
  width:100%; height:100%;
  fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
svg .fill{ fill:currentColor; }
svg .nostroke{ stroke:none; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--navy); color:#fff; padding:.75rem 1.25rem;
}
.skip-link:focus{ left:0; }

:focus-visible{ outline:3px solid var(--navy); outline-offset:3px; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px; }
.wrap--narrow{ max-width:var(--wrap-narrow); }


/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--light);
  transition:box-shadow .3s var(--ease), background .3s var(--ease);
}
.site-header.is-stuck{ box-shadow:0 2px 18px rgba(40,40,40,.10); }

.header-inner{
  min-height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.logo img{ width:158px; height:auto; }

.nav{ display:flex; align-items:center; gap:clamp(14px,2.4vw,34px); }
.nav a{
  font-size:13px; font-weight:500; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-66);
  padding:6px 0; position:relative;
  transition:color .25s var(--ease);
}
.nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--blue); transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav a:hover{ color:var(--ink); }
.nav a:hover::after{ transform:scaleX(1); }

.nav-toggle{
  display:none; width:44px; height:44px; padding:10px;
  flex-direction:column; justify-content:space-between;
}
.nav-toggle span{
  display:block; height:2px; background:var(--navy); border-radius:2px;
  transition:transform .3s var(--ease), opacity .2s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(10px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-10px) rotate(-45deg); }


/* ==========================================================================
   HERO
   ========================================================================== */
.hero{ background:var(--light); }

.hero__stage{
  position:relative;
  background:var(--blue);
  height:clamp(280px, 30vw, 420px);
}
/* franja diagonal más oscura de la maqueta */
.hero__diagonal{
  position:absolute; inset:0; overflow:hidden;
}
.hero__diagonal::after{
  content:'';
  position:absolute; inset:0;
  background:var(--blue-deep);
  /* la arista pasa justo bajo la mano del robot, como en la maqueta */
  clip-path:polygon(0 110%, 100% 72%, 100% 100%, 0 100%);
}
.hero__stage-inner{
  position:relative; height:100%;
  display:flex; align-items:center; justify-content:flex-end;
}

.hero__robot{
  position:absolute; left:2%; bottom:0;
  width:clamp(300px, 42vw, 560px);
  transform:translateY(38%) rotate(6deg);
  transform-origin:50% 100%;
  z-index:2;
  filter:drop-shadow(0 34px 40px rgba(0,0,0,.20));
}
.hero__wordmark{
  position:relative; z-index:1;
  width:clamp(210px, 34vw, 460px);
  margin-right:clamp(0px, 3vw, 40px);
}

.hero__copy{
  padding-top:clamp(120px, 17vw, 230px);
  padding-bottom:clamp(56px, 7vw, 92px);
  text-align:center;
}

.display{
  font-weight:400;
  font-size:clamp(26px, 3.6vw, 46px);
  line-height:1.18;
  letter-spacing:.005em;
  color:var(--ink);
}
.lede{
  margin-top:18px;
  font-weight:500;
  font-size:clamp(13px, 1.15vw, 15px);
  line-height:1.62;
  color:var(--muted);
}


/* ==========================================================================
   SECCIONES GENÉRICAS
   ========================================================================== */
.section{ padding-block:clamp(56px, 7vw, 96px); }
.section--white{ background:var(--white); }
.section--light{ background:var(--light); }
.section--blue { background:var(--blue); color:#fff; }
.section--faq  { padding-top:0; }

.section-head{ text-align:center; margin-bottom:clamp(38px, 5vw, 64px); }

.h-section{
  font-weight:400;
  font-size:clamp(26px, 3.1vw, 40px);
  line-height:1.2;
  color:var(--ink);
}
.h-section--blue  { color:var(--blue); }
.h-section--onblue{ color:#fff; }

.sub{
  margin-top:14px;
  font-weight:500;
  font-size:clamp(13px, 1.1vw, 15px);
  line-height:1.6;
  color:var(--muted);
}
.sub--onblue{ color:rgba(255,255,255,.9); }


/* ==========================================================================
   QUÉ HACE — features + robot
   ========================================================================== */
.features{
  display:grid;
  grid-template-columns:1fr minmax(280px, 470px) 1fr;
  align-items:start;
  gap:clamp(8px, 2vw, 24px);
}
.features__col{
  display:flex; flex-direction:column;
  gap:clamp(30px, 4vw, 52px);
  padding-top:clamp(10px, 3vw, 46px);
}
.features__figure{
  align-self:end;
  margin:0;
  transform:translateY(6%);
}
.features__figure img{ width:100%; }

.feat{ position:relative; }
.feat h3{
  font-weight:700; font-size:clamp(12px, 1.05vw, 14px);
  letter-spacing:.055em; text-transform:uppercase;
  color:var(--ink); line-height:1.35;
}
.feat p{
  margin-top:9px;
  font-weight:400; font-size:clamp(12px, .95vw, 13.5px);
  line-height:1.55; color:var(--ink-66);
}
/* barrita azul de acento */
.feat::before{
  content:''; position:absolute; top:2px; width:4px; height:20px;
  background:var(--blue); border-radius:1px;
}
.feat--right{ text-align:right; padding-right:22px; }
.feat--right::before{ right:0; }
.feat--left { text-align:left;  padding-left:22px; }
.feat--left::before { left:0; }

/* CTAs */
.feat-cta{
  margin-top:clamp(20px, 3vw, 34px);
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:clamp(16px, 4vw, 64px);
}
/* en «Qué hace» los botones montan sobre las piernas del robot,
   con el hueco central justo para que el robot pase entre ellos */
.feat-cta--overlap{
  position:relative; z-index:2;
  margin-top:clamp(-320px, -22vw, -140px);
  gap:clamp(300px, 34vw, 500px);
}
/* el margen negativo acorta la sección: se compensa para que el robot
   no quede recortado por la banda siguiente.
   Clase, no id: la sección «Qué hace» de las fichas no debe heredarlo. */
.section--overlap{ padding-bottom:clamp(160px, 23vw, 345px); }
.pill{
  display:inline-flex; align-items:center; gap:20px;
  min-width:264px;
  padding:13px 12px 13px 30px;
  background:var(--blue); color:#fff;
  border-radius:var(--r-pill);
  font-weight:400; font-size:15px; line-height:1.25; text-align:center;
  justify-content:space-between;
  box-shadow:0 8px 20px rgba(0,158,227,.26);
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), background .28s var(--ease);
}
.pill span{ flex:1; }
.pill__ico{
  flex:none; width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(255,255,255,.18);
  transition:transform .28s var(--ease);
}
.pill__ico svg{ width:15px; height:15px; stroke-width:2.4; }
.pill:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(0,158,227,.34); }
.pill:hover .pill__ico{ transform:translateX(4px); }

.pill--ghost{
  background:#fff; color:var(--blue);
  min-width:340px;
  box-shadow:0 10px 24px rgba(0,0,0,.14);
}
.pill--ghost .pill__ico{ background:var(--blue); color:#fff; }
.pill--ghost:hover{ box-shadow:0 16px 32px rgba(0,0,0,.2); }


/* ==========================================================================
   APLICACIONES — banda + slider
   ========================================================================== */
.apps__band{
  background:var(--blue);
  text-align:center;
  padding:clamp(30px,4vw,44px) 24px clamp(34px,4.4vw,48px);
  position:relative;
}
.chev-down{
  position:absolute; left:50%; bottom:-19px; transform:translateX(-50%);
  width:38px; height:38px; border-radius:50%;
  background:#fff; color:var(--blue);
  display:grid; place-items:center;
  box-shadow:0 6px 16px rgba(0,0,0,.14);
  transition:transform .3s var(--ease);
  z-index:3;
}
.chev-down svg{ width:18px; height:18px; stroke-width:2.6; }
.chev-down:hover{ transform:translateX(-50%) translateY(3px); }

.slider{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:stretch;
  background:var(--white);
  min-height:clamp(330px, 40vw, 520px);
}
.slider__media{ position:relative; overflow:hidden; background:var(--light); }
.slider__media img{
  width:100%; height:100%; object-fit:cover; object-position:center;
  transition:opacity .4s var(--ease), transform .8s var(--ease);
}
.slider__media.is-fading img{ opacity:0; transform:scale(1.03); }

.slider__body{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding:clamp(36px, 5vw, 64px) clamp(24px, 4vw, 56px);
}
.h-slide{
  font-weight:400;
  font-size:clamp(22px, 2.5vw, 32px);
  line-height:1.2; color:var(--ink);
}
.slide-name{
  margin-top:clamp(28px, 4vw, 46px);
  font-weight:700; font-size:clamp(13px, 1.15vw, 15px);
  letter-spacing:.05em; text-transform:uppercase; line-height:1.45;
  color:var(--ink);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.slide-name::after{
  content:''; display:block; width:44px; height:3px;
  background:var(--blue); margin:16px auto 0;
}
.slide-name.is-fading{ opacity:0; transform:translateY(6px); }

.dots{ display:flex; gap:10px; margin-top:clamp(26px, 3.4vw, 42px); }
.dots button{
  width:9px; height:9px; border-radius:50%;
  border:1.5px solid var(--muted); background:transparent;
  transition:background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.dots button[aria-selected="true"]{
  background:var(--ink); border-color:var(--ink); transform:scale(1.12);
}
.dots button:hover{ border-color:var(--ink); }


/* ==========================================================================
   BENEFICIOS
   ========================================================================== */
.benefits{
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:clamp(14px, 2.4vw, 30px);
  text-align:center;
}
.benefit{ display:flex; flex-direction:column; align-items:center; }

/* icono de marca RH·BOTS */
.benefit__ico{
  position:relative;
  width:clamp(56px, 6vw, 74px); aspect-ratio:1;
  border-radius:50%; background:#fff; color:var(--blue);
  transition:transform .35s var(--ease);
}
/* inset absoluto: evita el ciclo de porcentajes con aspect-ratio */
.benefit__ico svg{ position:absolute; inset:17%; width:auto; height:auto; }
.benefit:hover .benefit__ico{ transform:translateY(-5px); }

.benefit h3{
  margin-top:16px;
  font-weight:700; font-size:clamp(11px, .96vw, 13px);
  letter-spacing:.045em; text-transform:uppercase; line-height:1.4;
  color:#fff;
}
.benefit h3::after{
  content:''; display:block; width:26px; height:3px;
  background:#fff; margin:12px auto 0;
}


/* ==========================================================================
   ESPECIFICACIONES
   ========================================================================== */
.specs{
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:clamp(26px, 3.4vw, 44px) 0;
}
.spec{
  position:relative;
  padding-inline:clamp(12px, 1.8vw, 24px);
  text-align:center;
}
/* divisores azules a ambos lados */
.spec::before,
.spec::after{
  content:''; position:absolute; top:50%; transform:translateY(-50%);
  width:4px; height:26px; background:var(--blue); border-radius:1px;
}
.spec::before{ left:0; }
.spec::after { right:0; display:none; }
.spec:nth-child(5n)::after,
.spec:last-child::after{ display:block; }

.spec dt{
  font-weight:400; font-size:clamp(11px, .92vw, 12.5px);
  line-height:1.4; color:var(--ink-66);
}
.spec dd{
  margin:8px 0 0;
  font-weight:700; font-size:clamp(12px, 1vw, 13.5px);
  line-height:1.4; color:var(--ink);
}


/* ==========================================================================
   SERVICIO
   ========================================================================== */
.services{
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:clamp(16px, 2.6vw, 34px);
  text-align:center;
}
.service{ display:flex; flex-direction:column; align-items:center; }
.service__ico{
  position:relative;
  width:clamp(58px, 6.2vw, 76px); aspect-ratio:1;
  border:2px solid var(--blue); border-radius:50%;
  color:var(--blue);
  transition:transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
}
.service__ico svg{
  position:absolute; inset:19%; width:auto; height:auto;
  stroke-width:2.6;
}
.service:hover .service__ico{
  transform:translateY(-5px);
  background:var(--blue); color:#fff;
}
.service h3{
  margin-top:16px;
  font-weight:400; font-size:clamp(11px, .96vw, 13px);
  line-height:1.45; color:var(--ink-66);
}
.service h3::after{
  content:''; display:block; width:26px; height:3px;
  background:var(--blue); margin:12px auto 0;
}


/* ==========================================================================
   FAQ
   ========================================================================== */
.faq__item{ border-bottom:1px solid #dcdfe4; }
.faq__q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:20px 4px;
  text-align:left;
  font-weight:400; font-size:clamp(14px, 1.25vw, 17px);
  color:var(--ink);
  transition:color .25s var(--ease);
}
.faq__q:hover{ color:var(--blue); }
.faq__ico{
  flex:none; width:28px; height:28px; border-radius:50%;
  background:var(--muted); color:#fff;
  display:grid; place-items:center;
  transition:transform .35s var(--ease), background .3s var(--ease);
}
.faq__ico svg{ width:15px; height:15px; stroke-width:2.6; }
.faq__q[aria-expanded="true"] .faq__ico{ transform:rotate(180deg); background:var(--blue); }

.faq__a{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .4s var(--ease);
}
.faq__a.is-open{ grid-template-rows:1fr; }
.faq__a-in{ overflow:hidden; }
.faq__a p{
  padding:0 44px 22px 4px;
  font-weight:400; font-size:clamp(13px, 1.05vw, 14.5px);
  line-height:1.7; color:var(--ink-66);
}


/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ background:var(--navy); padding-block:26px; }
.footer-inner{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.logo--footer img{
  width:158px;
  /* la marca original es navy+cyan; en fondo navy se muestra en blanco */
  filter:brightness(0) invert(1);
  opacity:.92;
}
.social{ display:flex; align-items:center; gap:20px; }
.social a{
  display:grid; place-items:center;
  width:26px; height:26px; color:#fff; opacity:.85;
  transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.social a:hover{ opacity:1; transform:translateY(-2px); }

.footer-legal{
  margin:0; font-size:12.5px; color:#fff; opacity:.6;
}
.footer-legal a{ color:#fff; text-decoration:none; }
.footer-legal a:hover{ opacity:.85; text-decoration:underline; }


/* ==========================================================================
   REVEAL ON SCROLL
   ========================================================================== */
/* Sólo se ocultan si JS está activo: si el script falla o el observador no
   llega a dispararse, el contenido se ve igualmente. */
.js .reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay:var(--d, 0ms);
}
.js .reveal.is-in{ opacity:1; transform:none; }

/* [hidden] debe ganar a cualquier display de componente */
[hidden]{ display:none !important; }


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1024px){
  .benefits{ grid-template-columns:repeat(3,1fr); row-gap:34px; }
  .services{ grid-template-columns:repeat(3,1fr); row-gap:34px; }
  .specs   { grid-template-columns:repeat(3,1fr); }
  .spec::after{ display:none !important; }
  .spec:nth-child(3n)::after{ display:block !important; }
}

@media (max-width:860px){
  .nav-toggle{ display:flex; }

  .nav{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--light);
    box-shadow:0 16px 26px rgba(40,40,40,.12);
    max-height:0; overflow:hidden;
    transition:max-height .4s var(--ease);
  }
  .nav.is-open{ max-height:420px; }
  .nav a{
    padding:16px 24px;
    border-top:1px solid rgba(40,40,40,.08);
    font-size:14px;
  }
  .nav a::after{ display:none; }

  /* hero */
  .hero__stage{ height:clamp(230px, 44vw, 300px); }
  .hero__robot{
    left:50%; transform:translate(-50%, 30%) rotate(6deg);
    transform-origin:50% 100%;
    width:clamp(230px, 56vw, 340px);
  }
  .hero__stage-inner{ justify-content:center; align-items:flex-start; padding-top:22px; }
  .hero__wordmark{ margin-right:0; width:clamp(180px, 52vw, 300px); }
  .hero__copy{ padding-top:clamp(130px, 40vw, 200px); }

  /* qué hace */
  .features{ grid-template-columns:1fr; gap:0; }
  .features__col{ padding-top:0; gap:28px; }
  .features__col--left { order:2; margin-top:34px; }
  .features__figure    { order:1; transform:none; max-width:330px; margin-inline:auto; }
  .features__col--right{ order:3; margin-top:28px; }

  .feat--right{ text-align:left; padding-right:0; padding-left:22px; }
  .feat--right::before{ right:auto; left:0; }

  .feat-cta,
  .feat-cta--overlap{
    flex-direction:column; align-items:center;
    gap:16px; margin-top:clamp(20px, 3vw, 34px);
  }
  .section--overlap{ padding-bottom:clamp(56px, 7vw, 96px); }
  .pill, .pill--ghost{ min-width:min(300px, 88vw); }

  /* slider */
  .slider{ grid-template-columns:1fr; }
  .slider__media{ min-height:260px; }

  /* footer */
  .footer-inner{ flex-direction:column; gap:18px; }
}

@media (max-width:560px){
  .benefits{ grid-template-columns:repeat(2,1fr); }
  .services{ grid-template-columns:repeat(2,1fr); }
  .specs   { grid-template-columns:repeat(2,1fr); }
  .spec::after{ display:none !important; }
  .spec:nth-child(2n)::after{ display:block !important; }
  .display{ font-size:24px; }
  .lede br, .sub br, .display br{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
}