/* ==========================================================================
   RH·BOTS — RHX2 landing
   Design tokens taken from the approved maqueta:
   #282828 · #8a8a8a (o #282828 66%) · #009ee3 · #f3f5f8 · #2f2483
   Tipografía: tres estilos y ninguno más (ver «TIPOGRAFÍA» en catalogo.css)
     · títulos     Plus Jakarta Sans 700  (h1, h2)
     · subtítulos  Saira 700              (h3, rótulos, botones, etiquetas)
     · texto       Exo 400/500            (todo lo demás)
   ========================================================================== */

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

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

  --font-titulo:    'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-subtitulo: 'Saira', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-texto:     'Exo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --night:     #0b1626;

  --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-texto);
  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; }
input, select, textarea{ font:inherit; }

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; }

/* oculto a la vista pero presente para buscadores y lectores de pantalla */
.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;
}

: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); }

/* submenú de familias bajo «Robots» */
.nav__grupo{ position:relative; display:flex; align-items:center; gap:2px; }
.nav__abrir{
  width:20px; height:20px; padding:2px; color:var(--ink-66);
  transition:color .25s var(--ease), transform .3s var(--ease);
}
.nav__abrir svg{ stroke-width:2.4; }
.nav__grupo:hover .nav__abrir,
.nav__grupo.is-open .nav__abrir{ color:var(--blue); }
.nav__grupo.is-open .nav__abrir{ transform:rotate(180deg); }
.nav__sub{
  position:absolute; top:calc(100% + 14px); left:-16px; z-index:120;
  min-width:240px; padding:10px;
  background:#fff; border-radius:14px;
  box-shadow:0 18px 40px rgba(11,22,38,.16);
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
/* puente invisible para que el ratón no pierda el menú al bajar */
.nav__sub::before{ content:''; position:absolute; left:0; right:0; top:-16px; height:16px; }
.nav__grupo:hover .nav__sub,
.nav__grupo:focus-within .nav__sub,
.nav__grupo.is-open .nav__sub{ opacity:1; visibility:visible; transform:none; }
.nav .nav__sub a{
  display:block; padding:11px 14px; border-radius:9px;
  font-size:13px; letter-spacing:.06em; color:var(--ink-66);
  transition:background .2s var(--ease), color .2s var(--ease);
}
.nav .nav__sub a::after{ display:none; }
.nav .nav__sub a:hover,
.nav .nav__sub a:focus-visible{ background:var(--light); color:var(--blue); }

/* panel ancho: familias a la izquierda y modelos a la derecha */
.nav__sub--mega{
  left:50%; transform:translateX(-50%) translateY(6px);
  width:min(1120px, calc(100vw - 32px));
  padding:clamp(16px, 1.6vw, 22px);
  display:grid; grid-template-columns:232px minmax(0, 1fr);
  gap:clamp(14px, 1.6vw, 24px);
  border-radius:20px;
}
.nav__grupo:hover .nav__sub--mega,
.nav__grupo:focus-within .nav__sub--mega,
.nav__grupo.is-open .nav__sub--mega{ transform:translateX(-50%); }

.nav__fams{ display:grid; align-content:start; gap:2px; }
html body .nav .nav__fam{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:13px 14px; border-radius:12px;
  font-family:var(--font-subtitulo); font-weight:700;
  font-size:13px; letter-spacing:.06em; text-transform:none; color:var(--ink);
}
html body .nav .nav__fam.is-on,
html body .nav .nav__fam:hover{ background:var(--light); color:var(--navy); }
.nav__famchev{ display:grid; place-items:center; width:16px; height:16px; opacity:0; color:var(--blue); }
.nav__famchev svg{ width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
html body .nav .nav__fam.is-on .nav__famchev{ opacity:1; }

.nav__paneles{ display:flex; flex-direction:column; min-width:0; }
.nav__modelos{
  display:none;
  grid-template-columns:repeat(4, minmax(0, 1fr)); gap:clamp(8px, 1vw, 14px);
}
.nav__modelos.is-on{ display:grid; }
.nav__modtit{ display:none; }
html body .nav .mcard{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  height:100%; padding:14px 12px 16px; border-radius:14px;
  background:var(--light); color:var(--ink);
  letter-spacing:normal; text-transform:none;
  transition:background .25s var(--ease), transform .25s var(--ease);
}
html body .nav .mcard:hover{ background:#e9eff7; transform:translateY(-3px); }
.mcard__foto{ display:grid; place-items:center; width:100%; height:92px; }
.mcard__foto img{ max-width:100%; max-height:92px; width:auto; object-fit:contain; }
.mcard__nombre{
  margin-top:10px; font-family:var(--font-subtitulo); font-weight:700;
  font-size:13.5px; color:var(--ink);
}
.mcard__claim{
  margin-top:4px; font-family:var(--font-texto); font-weight:400;
  font-size:11.5px; line-height:1.45; color:var(--ink-66);
}
.nav__todos{ margin-top:auto; padding-top:12px; text-align:right; }
html body .nav .nav__todos a{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px; color:var(--blue);
  font-size:13px; letter-spacing:.08em;
}
html body .nav .nav__todos a:hover .flecha{ transform:translateX(4px); }
@media (min-width:861px){
  /* el panel se centra respecto a la cabecera, no al enlace */
  .site-header{ position:relative; }
  .nav__grupo{ position:static; }
}
@media (max-width:1100px){
  .nav__sub--mega{ grid-template-columns:200px minmax(0, 1fr); }
  .nav__modelos{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}

/* ---------- carrito ---------- */
.carrito-abrir{
  position:relative; width:44px; height:44px; margin-left:8px; padding:10px;
  display:grid; place-items:center; color:var(--navy);
  transition:color .25s var(--ease);
}
.carrito-abrir:hover{ color:var(--blue); }
.carrito-abrir svg{ width:24px; height:24px; }
.carrito-abrir__num{
  position:absolute; top:4px; right:2px;
  min-width:18px; height:18px; padding:0 5px; border-radius:999px;
  display:grid; place-items:center;
  background:var(--blue); color:#fff;
  font-family:var(--font-subtitulo); font-weight:700; font-size:11px; line-height:1;
}
.sin-scroll, .sin-scroll body{ overflow:hidden; }

.carrito{ position:fixed; inset:0; z-index:200; }
.carrito__fondo{ position:absolute; inset:0; background:rgba(11,22,38,.45); }
.carrito__panel{
  position:absolute; top:0; right:0; bottom:0; width:min(420px, 100%);
  display:flex; flex-direction:column;
  background:#fff; box-shadow:-20px 0 60px rgba(11,22,38,.25);
  animation:entra-carrito .3s var(--ease);
}
@keyframes entra-carrito{ from{ transform:translateX(24px); opacity:.6; } to{ transform:none; opacity:1; } }
.carrito__cab{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:22px 24px; border-bottom:1px solid #e6e9ee;
}
.carrito__titulo{ font-size:20px; color:var(--ink); }
.carrito__cerrar{ width:36px; height:36px; padding:8px; color:var(--ink-66); }
.carrito__cerrar svg{ width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.carrito__cerrar:hover{ color:var(--blue); }
.carrito__cuerpo{ flex:1; overflow-y:auto; padding:20px 24px; }
.carrito__vacio{ font-size:15px; line-height:1.7; color:var(--ink-66); }
.carrito__vacio a{ display:block; margin-top:8px; color:var(--blue); font-weight:600; }

.citem{ display:flex; gap:14px; padding:14px 0; border-bottom:1px solid #eef1f5; }
.citem__foto{ flex:none; width:74px; height:74px; display:grid; place-items:center; background:var(--light); border-radius:12px; }
.citem__foto img{ max-width:88%; max-height:88%; width:auto; height:auto; object-fit:contain; }
.citem__texto{ min-width:0; flex:1; }
.citem__nombre{ font-family:var(--font-subtitulo); font-weight:700; font-size:15px; color:var(--ink); }
.citem__nombre:hover{ color:var(--blue); }
.citem__precio{ margin-top:2px; font-size:14px; color:var(--ink-66); }
.citem__uds{ display:flex; align-items:center; gap:6px; margin-top:10px; }
.citem__uds button{
  width:28px; height:28px; border-radius:8px; border:1px solid #dcdfe4;
  color:var(--ink); font-size:15px; line-height:1;
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
.citem__uds button:hover{ border-color:var(--blue); color:var(--blue); }
.citem__uds span{ min-width:24px; text-align:center; font-weight:600; font-size:14px; }
.citem__quitar{
  width:auto !important; margin-left:auto; padding:0 10px; border:0 !important;
  font-size:12.5px; color:var(--ink-66) !important; text-decoration:underline;
}
.citem__quitar:hover{ color:#c62828 !important; }

.carrito__pie{ padding:20px 24px 24px; border-top:1px solid #e6e9ee; background:var(--light); }
.carrito__total{ display:flex; align-items:baseline; justify-content:space-between; font-size:15px; color:var(--ink-66); }
.carrito__total strong{ font-family:var(--font-titulo); font-weight:800; font-size:26px; color:var(--ink); }
.carrito__nota{ margin-top:6px; font-size:12.5px; line-height:1.55; color:var(--ink-66); }
.carrito__pagar{ width:100%; justify-content:space-between; margin-top:16px; }
.carrito__consulta{ display:block; margin-top:12px; text-align:center; font-size:13px; color:var(--blue); }
.carrito__consulta:hover{ text-decoration:underline; }

@media (max-width:860px){
  .carrito-abrir{ margin-left:auto; margin-right:4px; }
}

.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 — vídeo a pantalla completa, velo oscuro y franja diagonal clara
   ========================================================================== */
.hero{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--night);
  min-height:clamp(460px, calc(100svh - var(--header-h)), 1100px);
  display:flex; align-items:center;
}
/* franja diagonal azul translúcida del lado derecho */
.hero__diagonal{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,158,227,.22) 0%, rgba(10,127,196,.32) 100%);
  clip-path:polygon(71% 0, 100% 0, 100% 100%, 53% 100%);
}
.hero__copy{
  position:relative; z-index:2;
  padding-block:clamp(48px, 6.4vw, 92px);
}
/* rótulo pequeño sobre un titular (hero, qué hacemos…) */
.kicker{
  font-size:clamp(12px, 1vw, 14px);
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--blue);
}
.hero .display--hero{
  margin-top:clamp(14px, 1.6vw, 22px);
  font-size:clamp(40px, 6vw, 90px);
  line-height:1;
  letter-spacing:-.05em;
  color:#fff;
}
.acento{ color:var(--blue); }
.hero .lede--hero{
  margin-top:clamp(18px, 2vw, 28px);
  max-width:44ch;
  font-size:clamp(15px, 1.3vw, 19px);
  line-height:1.65;
  color:rgba(255,255,255,.86);
}
.hero__cta{
  margin-top:clamp(24px, 2.8vw, 38px);
  display:flex; flex-wrap:wrap; gap:14px 18px;
}
.hero__cta .pill{ min-width:0; padding:12px 12px 12px 28px; font-size:clamp(15px, 1.1vw, 16px); gap:18px; }
.hero__cta .pill__ico{ width:30px; height:30px; }

.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; }
/* antes iba pegado a la sección anterior; ahora respira como las demás */
.section--faq  { padding-top:clamp(56px, 7vw, 96px); }

.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:18px;
  min-width:264px;
  padding:12px 12px 12px 30px;
  background:var(--blue); color:#fff;
  border:0;
  border-radius:var(--r-pill);
  font-size:16px; line-height:1.25; letter-spacing:-.01em; text-align:center;
  justify-content:space-between;
  box-shadow:0 10px 30px rgba(0,158,227,.42);
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), background .28s var(--ease);
}
.pill span{ flex:1; }
.pill__ico{
  flex:none; width:32px; height:32px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(255,255,255,.26);
  transition:transform .28s var(--ease);
}
.pill__ico svg{ width:15px; height:15px; stroke-width:2.4; }
.pill:hover{ transform:translateY(-3px); box-shadow:0 16px 38px rgba(0,158,227,.55); }
.pill:hover .pill__ico{ transform:translateX(4px); }

/* secundario: el mismo botón en negativo, blanco con letras azules */
.pill--ghost{
  background:#fff; color:var(--blue);
  min-width:340px;
  box-shadow:0 10px 28px rgba(0,0,0,.16);
}
.pill--ghost .pill__ico{ background:var(--blue); color:#fff; }
.pill--ghost:hover{ box-shadow:0 16px 36px rgba(0,0,0,.22); }

/* secundario del carrito: blanco con borde, para no competir con «Comprar» */
.pill--anadir{
  background:#fff; color:var(--navy); border:1.5px solid #dcdfe4; box-shadow:none;
  min-width:0; padding:11px 16px 11px 22px; gap:12px; cursor:pointer;
}
.pill--anadir:hover{ border-color:var(--blue); color:var(--blue); transform:translateY(-2px); box-shadow:0 10px 24px rgba(11,22,38,.10); }
.pill--anadir .pill__ico--carro{ background:transparent; color:currentColor; width:22px; height:22px; }
.pill--anadir .pill__ico--carro svg{ width:100%; height:100%; }


/* ==========================================================================
   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
   ========================================================================== */
/* ==========================================================================
   SERVICIO
   ========================================================================== */
/* ==========================================================================
   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); color:#fff; padding-block:clamp(22px, 2.6vw, 32px); }
.footer-inner{
  display:flex; align-items:center; justify-content:space-between; gap:18px 32px;
  flex-wrap:wrap;
}
.footer-marca,
.footer-legal{
  margin:0; font-size:clamp(14px, 1.1vw, 16px); line-height:1.7; letter-spacing:.02em;
}
.footer-legal a{ color:#fff; text-decoration:none; white-space:nowrap; transition:opacity .25s var(--ease); }
.footer-legal a:hover{ opacity:.75; 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){
  .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:calc(100svh - var(--header-h)); overflow-y:auto; }
  .nav a{
    padding:16px 24px;
    border-top:1px solid rgba(40,40,40,.08);
    font-size:14px;
  }
  .nav a::after{ display:none; }

  /* en móvil el submenú se abre como un acordeón con el botón de la flecha */
  .nav__grupo{ flex-wrap:wrap; gap:0; border-top:1px solid rgba(40,40,40,.08); }
  .nav__grupo > a{ flex:1; border-top:0; }
  .nav__abrir{ width:56px; height:52px; padding:16px 18px; }
  .nav__sub--mega{
    grid-template-columns:1fr; gap:0;
    transform:none; left:auto; padding:0 0 8px; border-radius:0;
  }
  .nav__grupo:hover .nav__sub--mega,
  .nav__grupo:focus-within .nav__sub--mega,
  .nav__grupo.is-open .nav__sub--mega{ transform:none; }
  /* en el móvil no hay columna de familias: cada lista lleva su título */
  .nav__fams{ display:none; }
  .nav__modtit{ display:block; }
  html body .nav .nav__modtit a{
    padding:14px 24px 8px; color:var(--navy);
    font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  }
  /* en el menú del móvil se ven todas las familias seguidas */
  .nav__modelos, .nav__modelos.is-on{ display:block; }
  html body .nav .mcard{
    flex-direction:row; align-items:center; gap:14px; text-align:left;
    padding:9px 24px 9px 40px; border-radius:0; background:transparent;
  }
  html body .nav .mcard:hover{ background:var(--light); transform:none; }
  .mcard__foto{ width:42px; height:42px; flex:none; }
  .mcard__foto img{ max-height:42px; }
  .mcard__claim{ display:none; }
  .mcard__nombre{ margin-top:0; font-size:14px; }
  .nav__todos{ margin-top:0; padding-top:0; text-align:left; }
  html body .nav .nav__todos a{ padding:14px 24px; }
  .nav__sub{
    position:static; width:100%; min-width:0; padding:0 0 8px;
    background:transparent; box-shadow:none; border-radius:0;
    opacity:1; visibility:visible; transform:none;
    max-height:0; overflow:hidden; transition:max-height .35s var(--ease);
  }
  .nav__sub::before{ display:none; }
  .nav__grupo:hover .nav__sub,
  .nav__grupo:focus-within .nav__sub{ opacity:1; visibility:visible; transform:none; }
  .nav__grupo.is-open .nav__sub{ max-height:1400px; }
  .nav .nav__sub a{ padding:12px 24px 12px 40px; border-top:0; border-radius:0; font-size:13px; }

  /* hero */
  .hero{ min-height:0; }
  .hero__diagonal{ clip-path:polygon(84% 0, 100% 0, 100% 100%, 62% 100%); }
  .hero__cta{ flex-direction:column; align-items:stretch; }
  .hero__cta .pill{ width:100%; }

  /* 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; align-items:flex-start; gap:12px; }
}

@media (max-width:560px){
  .specs   { grid-template-columns:repeat(2,1fr); }
  .spec::after{ display:none !important; }
  .spec:nth-child(2n)::after{ display:block !important; }
  .display{ font-size:24px; }
  .hero .display--hero{ font-size:clamp(34px, 10vw, 44px); }
  .lede br, .sub br, .display:not(.display--hero) 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; }
}