/* ══════════════════════════════════════════════════════════════════════════
   QUORELIA — Sistema de diseño compartido
   Una sola fuente de verdad para tipografía, color y componentes.
   Cargado por index.html, gobierno.html y story.html.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  /* Paleta clara: casi todo blanco y negro, un acento */
  --ink:#101418;
  --ink-2:#3d474f;
  --grey:#8a949c;
  --line:#e2e5e8;
  --paper:#ffffff;
  --paper-2:#f2f3f4;
  --paper-3:#e9eaec;
  --black:#1a1d21;

  /* Marca */
  --navy:#0b1c2c;
  --navy-2:#122a40;
  --teal:#149487;
  --teal-lt:#1fb6a8;
  --amber:#b45309;

  --sans:'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono','SF Mono',Consolas,monospace;

  /* Escala tipográfica */
  --fs-mega: clamp(2.3rem, 1.4rem + 3.4vw, 4.1rem);
  --fs-big:  clamp(1.75rem, 1.2rem + 2.1vw, 2.9rem);
  --fs-mid:  clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --gut: 28px;
}

/* El chino no lleva tracking negativo: los hanzi se tocan y pierden ritmo. */
:lang(zh) h1,:lang(zh) h2,:lang(zh) h3,
:lang(zh) .mega,:lang(zh) .big,:lang(zh) .mid,:lang(zh) .lede{letter-spacing:0;}
:lang(zh) .mega,:lang(zh) .big{line-height:1.22;}

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

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  font-family:var(--sans);background:var(--paper);color:var(--ink);
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img,svg{display:block;max-width:100%;}

/* ── Barra de desplazamiento · "Pulse" ──────────────────────────────────
   Un haz teal fino y luminoso sobre pista transparente — la marca en el
   borde de la página. Chrome/Edge pintan el diseño completo; Firefox
   recibe la versión fina simplificada; los teléfonos lo ignoran. El rail
   de tarjetas conserva su barra discreta propia (selector más específico). */
html{scrollbar-width:thin;scrollbar-color:var(--teal) transparent;}
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--teal-lt),var(--teal));
  box-shadow:0 0 10px rgba(31,182,168,.55);}
::-webkit-scrollbar-thumb:hover{
  background:var(--teal-lt);
  box-shadow:0 0 16px rgba(31,182,168,.85);}

.wrap{max-width:1360px;margin:0 auto;padding:0 var(--gut);}
section{padding:96px 0;}
hr.rule{border:0;border-top:1px solid var(--line);margin:0;}

/* ── Tipografía ──────────────────────────────────────────────────────────
   Inter. Los titulares de display van en 300 — delgados y anchos — y el
   tracking se abre a -0.022em: a ese cuerpo, apretar más los engorda
   ópticamente y borra el aire que da el carácter. Los encabezados chicos
   suben a 400 porque el 300 se deshace bajo los 24 px. */
h1,h2,h3{font-weight:400;letter-spacing:-0.022em;line-height:1.06;}
.mega{font-size:var(--fs-mega);font-weight:300;letter-spacing:-0.024em;}
.big{font-size:var(--fs-big);font-weight:300;letter-spacing:-0.022em;}
.mid{font-size:var(--fs-mid);font-weight:400;letter-spacing:-0.02em;line-height:1.2;}
.dim{color:var(--grey);}
.lede{font-size:17px;font-weight:400;line-height:1.62;color:var(--ink-2);max-width:62ch;
  letter-spacing:-0.006em;}
p{font-size:15px;font-weight:400;line-height:1.6;color:var(--ink-2);}

/* ── Centrado ───────────────────────────────────────────────────────────
   Los titulares y bajadas de sección van al eje central. El contenido de
   bloque — tarjetas, tablas, listas y artículos — se mantiene alineado a
   la izquierda: centrar párrafos dentro de una columna angosta rompe el
   borde visual y cuesta más leerlos. */
section > .wrap > .tag,
section > .wrap > h1,
section > .wrap > h2,
section > .wrap > h3,
section > .wrap > .lede,
section > .wrap > p{
  margin-left:auto;margin-right:auto;text-align:center;
}
section > .wrap > h1,
section > .wrap > h2{max-width:24ch;}
.hero .wrap,.s-hero .wrap{text-align:center;}
.hero .wrap h1,.hero .wrap .lede,
.s-hero .wrap h1,.s-hero .wrap .lede{margin-left:auto;margin-right:auto;}
.hero-acts,.hero-meta{justify-content:center;}
/* utilidades de escape */
.left{text-align:left !important;margin-left:0 !important;}
.card,.note,.grp,.fl,article,td,th{text-align:left;}

.tag{font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink);}
.tag.g{color:var(--grey);}
.tag.t{color:var(--teal);}
.num{font-family:var(--mono);font-size:11.5px;color:var(--grey);letter-spacing:.04em;}
.src{font-size:11.5px;color:var(--grey);line-height:1.55;}

/* ── Encabezado ────────────────────────────────────────────────────────── */
.head{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line);}
/* El padding vertical no puede pisar el lateral del .wrap: en pantallas
   angostas el margen auto desaparece y el logo quedaba pegado al borde. */
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px var(--gut);}
.brand{font-family:var(--mono);font-weight:500;font-size:15px;letter-spacing:.24em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:10px;}
.brand img{flex:none;}

/* ── Efecto de tipeo en encabezados ────────────────────────────────────── */
.typing::after{content:'▍';color:var(--teal);margin-left:2px;
  animation:parpadeo .9s steps(1) infinite;}
@keyframes parpadeo{50%{opacity:0;}}
.dark .typing::after,.svc-st.key .typing::after{color:var(--teal-lt);}

/* ── Logo del pie: la Q grande arriba, centrada; las letras debajo ─────── */
.f-logo{display:flex;flex-direction:column;align-items:center;gap:30px;margin:70px 0 40px;}
.f-logo .fq{width:min(170px,36vw);height:auto;}
.f-logo .fw{width:min(420px,74vw);height:auto;}
.nav-links{display:flex;gap:30px;font-size:14px;color:var(--ink-2);}
.nav-links a:hover{color:var(--ink);}
.nav-links a.on{color:var(--ink);font-weight:600;}
.nav-right{display:flex;align-items:center;gap:14px;}
.lang{display:flex;border:1px solid var(--line);}
.lang button{border:0;background:none;font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  padding:6px 10px;cursor:pointer;color:var(--grey);}
.lang button.on{background:var(--ink);color:#fff;}
.btn-sm{border:1px solid var(--ink);padding:8px 16px;font-size:13.5px;transition:background .18s,color .18s;white-space:nowrap;}
.btn-sm:hover{background:var(--ink);color:#fff;}
.burger{display:none;background:none;border:0;padding:6px;cursor:pointer;color:var(--ink);}
.burger svg{width:22px;height:22px;}
@media(max-width:1000px){ .nav-links{display:none;} .burger{display:block;} .lang{display:none;} }

/* ── Secciones oscuras ─────────────────────────────────────────────────── */
.dark{background:var(--navy);color:#fff;}
.dark h1,.dark h2,.dark h3{color:#fff;}
.dark p,.dark .lede{color:#b9c9d1;}
.dark .tag{color:#fff;} .dark .tag.g{color:#8fa3b0;} .dark .tag.t{color:var(--teal-lt);}
.dark .dim{color:#6f8492;}
.dark hr.rule{border-top-color:rgba(255,255,255,.14);}
.dark .src{color:#7f93a0;}

/* ── Tarjetas con esquina recortada ────────────────────────────────────── */
.cards{display:grid;gap:16px;}
.cards.c2{grid-template-columns:repeat(2,1fr);}
.cards.c3{grid-template-columns:repeat(3,1fr);}
.cards.c4{grid-template-columns:repeat(4,1fr);}
.card{
  background:var(--paper-2);padding:22px 22px 26px;
  clip-path:polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
}
.card h4{font-size:16px;font-weight:600;margin:9px 0 8px;letter-spacing:-0.012em;}
.card p{font-size:13.5px;line-height:1.58;}
.card .c-fig{font-size:30px;letter-spacing:-0.03em;margin-bottom:10px;font-weight:400;}
.dark .card{background:rgba(255,255,255,.055);}
.dark .card h4{color:#fff;} .dark .card p{color:#a9bcc7;}
@media(max-width:1000px){ .cards.c4{grid-template-columns:repeat(2,1fr);} }
@media(max-width:760px){ .cards.c2,.cards.c3,.cards.c4{grid-template-columns:1fr;} }

/* ── Riel horizontal de tarjetas ───────────────────────────────────────── */
.rail{display:flex;gap:16px;overflow-x:auto;padding-bottom:8px;scrollbar-width:thin;}
.rail::-webkit-scrollbar{height:6px;}
.rail::-webkit-scrollbar-thumb{background:var(--paper-3);}
.rail .card{flex:0 0 300px;min-height:330px;display:flex;flex-direction:column;}
.rail .card .c-src{margin-bottom:auto;}

/* Carrusel continuo: el JS duplica las tarjetas y anima la pista.
   Se detiene al pasar el puntero y al salir de pantalla. */
.rail.auto{
  overflow:hidden;padding-bottom:0;
  /* difuminar los bordes para que las tarjetas entren y salgan sin corte seco */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.rail.auto .track{display:flex;gap:16px;width:max-content;will-change:transform;
  animation:railSlide var(--rail-dur,48s) linear infinite;}
.rail.auto:hover .track,
.rail.auto:focus-within .track,
.rail.auto.paused .track{animation-play-state:paused;}
@keyframes railSlide{
  from{transform:translate3d(0,0,0);}
  to{transform:translate3d(calc(-50% - 8px),0,0);}   /* -8px = mitad del gap */
}
@media(prefers-reduced-motion: reduce){
  .rail.auto{overflow-x:auto;-webkit-mask-image:none;mask-image:none;}
  .rail.auto .track{animation:none;width:auto;}
}

/* ── Módulos numerados ─────────────────────────────────────────────────── */
.mod{display:grid;grid-template-columns:max-content 1fr auto;gap:38px;align-items:center;
  padding:38px 0;border-top:1px solid var(--line);transition:background .2s;}
/* la palabra grande va primero, a la izquierda */
.mod .m-name{order:-1;}
.mod .m-lead{max-width:520px;}
.mod:hover{background:var(--paper-2);}
.mod .m-lead{font-size:13px;line-height:1.45;color:var(--ink-2);}
.mod .m-name{font-family:var(--mono);font-size:clamp(1.7rem,1.2rem+2vw,3.1rem);
  letter-spacing:.08em;font-weight:400;text-transform:uppercase;}
.mod .m-n{font-family:var(--mono);font-size:11px;color:var(--grey);}
@media(max-width:820px){ .mod{grid-template-columns:1fr;gap:12px;padding:28px 0;} .mod .m-name{font-size:2rem;} }

/* ── Listas con ↳ ──────────────────────────────────────────────────────── */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:52px;}
.grp{margin-bottom:30px;}
.grp h4{font-size:14.5px;font-weight:600;margin-bottom:12px;letter-spacing:-0.01em;}
.grp a,.grp span{display:block;font-size:14.5px;color:var(--ink-2);padding:5px 0 5px 22px;position:relative;}
.grp a::before,.grp span::before{content:'↳';position:absolute;left:0;color:var(--grey);}
.grp a:hover{color:var(--ink);}
.dark .grp h4{color:#fff;} .dark .grp a,.dark .grp span{color:#b9c9d1;}
@media(max-width:820px){ .cols{grid-template-columns:1fr;gap:8px;} }

/* ── Rejilla de capacidades ────────────────────────────────────────────── */
.capgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;text-align:left;
  border-top:1px solid var(--ink);}
.capcol{padding:26px 24px 30px 0;border-right:1px solid var(--line);}
.capcol:last-child{border-right:0;}
.capnum{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--grey);margin-bottom:16px;}
.capcol h4{font-size:19px;font-weight:400;letter-spacing:-.022em;margin-bottom:16px;}
.capcol ul{list-style:none;}
.capcol li{font-size:14px;line-height:1.5;color:var(--ink-2);
  padding:9px 0 9px 20px;position:relative;border-top:1px solid var(--line);}
.capcol li:first-child{border-top:0;padding-top:0;}
.capcol li::before{content:'↳';position:absolute;left:0;color:var(--grey);}
.capcol li:first-child::before{top:0;}
.dark .capgrid{border-top-color:rgba(255,255,255,.35);}
.dark .capcol{border-right-color:rgba(255,255,255,.14);}
.dark .capcol h4{color:#fff;}
.dark .capcol li{color:#b9c9d1;border-top-color:rgba(255,255,255,.1);}
@media(max-width:980px){
  .capgrid{grid-template-columns:1fr 1fr;}
  .capcol{border-right:0;padding-right:0;}
  .capcol:nth-child(-n+2){border-bottom:1px solid var(--line);}
  .capcol:nth-child(odd){padding-right:24px;border-right:1px solid var(--line);}
}
@media(max-width:620px){
  .capgrid{grid-template-columns:1fr;}
  .capcol,.capcol:nth-child(odd){border-right:0;padding-right:0;border-bottom:1px solid var(--line);}
  .capcol:last-child{border-bottom:0;}
}

/* ── Diagrama de arquitectura ──────────────────────────────────────────── */
.arch-head{text-align:center;}
.arch-head h2,.arch-head .lede,.arch-head .tag{margin-left:auto;margin-right:auto;}
.arch{max-width:880px;margin:0 auto;text-align:center;}
.arch-row{display:grid;grid-template-columns:1fr;justify-items:center;}
.arch-row.two{grid-template-columns:1fr 1fr;gap:var(--arch-gap);}
.node{position:relative;z-index:1;width:100%;max-width:340px;background:var(--paper);
  border:1px solid var(--line);padding:15px 18px 16px;text-align:left;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%);}
.node .nl{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grey);display:block;margin-bottom:7px;}
.node .nn{font-size:15px;line-height:1.3;letter-spacing:-.015em;color:var(--ink);display:block;}
.node .nd{font-size:12px;line-height:1.45;color:var(--ink-2);display:block;margin-top:6px;}
.node.src{background:transparent;border-style:dashed;border-color:#c8ced3;}
.node.src .nn{color:var(--ink-2);}
.node.key{background:var(--navy);border-color:var(--navy);}
.node.key .nl{color:var(--teal-lt);} .node.key .nn{color:#fff;} .node.key .nd{color:#a9bcc7;}
.node.out{background:var(--paper-2);border-color:var(--paper-2);}

/* conectores de hilo fino */
.arch-link,.arch-fork,.arch-join{position:relative;height:38px;}
.arch-link::before,.arch-fork::before,.arch-join::before{
  content:'';position:absolute;left:50%;width:1px;background:#c8ced3;}
.arch-link::before{top:0;bottom:0;}
.arch-fork::before{top:0;height:19px;}
.arch-join::before{bottom:0;height:19px;}
/* --arch-gap debe coincidir con el gap de .arch-row.two para que las patas
   del conector caigan exactamente sobre el centro de cada columna:
   centro de columna = 25% - gap/4 */
.arch{--arch-gap:34px;}
.arch-fork span,.arch-join span{position:absolute;height:1px;background:#c8ced3;
  left:calc(25% - var(--arch-gap) / 4);right:calc(25% - var(--arch-gap) / 4);top:19px;}
.arch-fork span::before,.arch-fork span::after,
.arch-join span::before,.arch-join span::after{content:'';position:absolute;width:1px;height:19px;background:#c8ced3;}
.arch-fork span::before{left:0;top:0;} .arch-fork span::after{right:0;top:0;}
.arch-join span::before{left:0;top:-19px;} .arch-join span::after{right:0;top:-19px;}
.arch-link.two::before{display:none;}
.arch-link.two span{position:absolute;top:0;bottom:0;width:1px;background:#c8ced3;}
.arch-link.two span:first-child{left:calc(25% - var(--arch-gap) / 4);}
.arch-link.two span:last-child{left:calc(75% + var(--arch-gap) / 4);}

/* franja de procedencia */
.arch-prov{margin:44px auto 0;max-width:880px;border-top:1px solid var(--ink);
  display:grid;grid-template-columns:repeat(3,1fr);text-align:left;}
.arch-prov div{padding:20px 22px 0 0;border-right:1px solid var(--line);}
.arch-prov div:last-child{border-right:0;}
.arch-prov .pk{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grey);margin-bottom:8px;}
.arch-prov .pv{font-size:14.5px;line-height:1.45;color:var(--ink);letter-spacing:-.012em;}
@media(max-width:760px){
  /* El hilo vertical va detrás de las tarjetas y sólo asoma en el espacio
     entre ellas — .node lleva clip-path, así que no puede dibujarlo él. */
  .arch-row.two{grid-template-columns:1fr;gap:38px;position:relative;}
  .arch-row.two::before{content:'';position:absolute;left:50%;top:0;bottom:0;
    width:1px;background:#c8ced3;z-index:0;}
  .arch-fork span,.arch-join span,.arch-link.two span{display:none;}
  .arch-fork::before,.arch-join::before,.arch-link.two::before{display:block;top:0;bottom:0;height:auto;}
  .arch-prov{grid-template-columns:1fr;}
  .arch-prov div{border-right:0;border-bottom:1px solid var(--line);padding:18px 0;}
  .arch-prov div:last-child{border-bottom:0;}
}

/* ── Cifra de escala ───────────────────────────────────────────────────── */
.scale{display:flex;align-items:baseline;justify-content:center;gap:26px;flex-wrap:wrap;
  max-width:820px;margin:0 auto 60px;padding:26px 0 0;border-top:1.4px solid var(--ink);}
.scale-v{font-size:clamp(3.1rem,2.1rem+3.4vw,5rem);font-weight:400;letter-spacing:-.045em;
  line-height:1;color:var(--ink);}
.scale-k{font-size:15.5px;line-height:1.5;color:var(--ink-2);text-align:left;max-width:34ch;}
@media(max-width:640px){.scale{justify-content:flex-start;gap:14px;}.scale-k{text-align:left;}}

/* ── Cadena de servicio ────────────────────────────────────────────────── */
.svc{display:flex;align-items:stretch;text-align:left;margin-top:8px;}
.svc-st{flex:1;display:flex;flex-direction:column;padding:24px 22px 26px;
  background:var(--paper-2);
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%);}
.svc-st.key{background:var(--navy);}
.svc-n{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--grey);margin-bottom:15px;}
.svc-st.key .svc-n{color:var(--teal-lt);}
.svc-st h4{font-size:20px;font-weight:400;letter-spacing:-.024em;margin-bottom:11px;color:var(--ink);}
.svc-st.key h4{color:#fff;}
.svc-st p{font-size:13.5px;line-height:1.58;color:var(--ink-2);margin-bottom:16px;}
.svc-st.key p{color:#a9bcc7;}
.svc-l{list-style:none;margin-top:auto;padding-top:14px;border-top:1px solid var(--line);}
.svc-st.key .svc-l{border-top-color:rgba(255,255,255,.16);}
.svc-l li{font-size:12.5px;line-height:1.45;color:var(--ink-2);
  padding:7px 0 7px 18px;position:relative;}
.svc-l li::before{content:'↳';position:absolute;left:0;color:var(--grey);}
.svc-st.key .svc-l li{color:#b9c9d1;}
.svc-st.key .svc-l li::before{color:var(--teal-lt);}
.svc-ar{display:flex;align-items:center;justify-content:center;width:34px;flex:none;
  color:var(--grey);font-size:15px;}
@media(max-width:980px){
  .svc{flex-wrap:wrap;gap:14px;}
  .svc-st{flex:1 1 calc(50% - 7px);}
  .svc-ar{display:none;}
}
@media(max-width:600px){ .svc-st{flex:1 1 100%;} }

/* ── Bloque de idiomas ─────────────────────────────────────────────────── */
.lang-blk{margin-top:78px;padding-top:56px;border-top:1px solid var(--line);text-align:center;}
.lang-blk .tag,.lang-blk h3,.lang-blk .lede,.lang-blk .fine{margin-left:auto;margin-right:auto;}
.lang-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:1.4px solid var(--ink);text-align:left;}
.lang-c{padding:26px 24px 30px 0;border-right:1px solid var(--line);}
.lang-c:last-child{border-right:0;}
.lang-n{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--teal);margin-bottom:16px;}
.lang-ttl{font-size:19px;font-weight:400;letter-spacing:-.022em;color:var(--ink);line-height:1.3;}
.lang-sub{font-size:13.5px;color:var(--ink-2);margin-top:8px;}
@media(max-width:760px){
  .lang-grid{grid-template-columns:1fr;}
  .lang-c{border-right:0;padding-right:0;border-bottom:1px solid var(--line);}
  .lang-c:last-child{border-bottom:0;}
}

/* ── Informes de muestra ───────────────────────────────────────────────── */
.reps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;text-align:left;}
.rep{background:var(--paper-2);padding:22px 22px 18px;display:flex;flex-direction:column;
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%);
  transition:background-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);}
.rep:hover{background:var(--paper);transform:translateY(-4px);
  box-shadow:0 14px 34px rgba(11,28,44,.10);}
.rep .rp-t{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--teal);margin-bottom:12px;}
.rep h4{font-size:18px;font-weight:400;letter-spacing:-.02em;margin-bottom:14px;color:var(--ink);}
/* cada fila es un botón: cursor, flecha que aparece y fondo al pasar */
.rep a{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;
  font-size:13.5px;color:var(--ink-2);padding:10px 8px 10px 20px;position:relative;
  border-top:1px solid var(--line);transition:color .2s,background-color .2s,padding-left .2s;}
.rep a:first-of-type{margin-top:auto;}
.rep a::before{content:'↳';position:absolute;left:0;color:var(--grey);transition:color .2s;}
.rep a::after{content:'→';color:var(--teal);opacity:0;transform:translateX(-6px);
  transition:opacity .2s,transform .25s var(--ease);flex:none;}
.rep a:hover{color:var(--ink);background:var(--paper-2);padding-left:24px;}
.rep a:hover::before{color:var(--teal);}
.rep a:hover::after{opacity:1;transform:none;}
/* pista de acción: aparece con el hover de la tarjeta */
.rep .rp-hint{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grey);margin-top:14px;padding-top:12px;border-top:1px solid var(--line);
  opacity:.55;transition:opacity .25s,color .25s;}
.rep:hover .rp-hint{opacity:1;color:var(--teal);}
@media(max-width:1100px){.reps{grid-template-columns:1fr 1fr;}}
@media(max-width:640px){.reps{grid-template-columns:1fr;}}

/* ── Formulario de contacto ────────────────────────────────────────────── */
.form-wrap{max-width:880px;margin:0 auto;text-align:left;}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:26px 30px;}
.fld{display:flex;flex-direction:column;}
.fld.full{grid-column:1 / -1;}
.fld label{font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grey);margin-bottom:9px;}
.fld label .req{color:var(--teal);margin-left:3px;}
.fld input,.fld select,.fld textarea{
  font-family:var(--sans);font-size:15px;color:var(--ink);background:transparent;
  border:0;border-bottom:1px solid #c8ced3;padding:9px 0 11px;width:100%;
  border-radius:0;-webkit-appearance:none;appearance:none;
  transition:border-color .2s var(--ease,ease),background-color .2s var(--ease,ease);}
.fld textarea{resize:vertical;min-height:96px;line-height:1.6;}
.fld select{cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--grey) 50%),
                   linear-gradient(135deg,var(--grey) 50%,transparent 50%);
  background-position:calc(100% - 11px) calc(50% - 1px),calc(100% - 6px) calc(50% - 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:24px;}
.fld input:focus,.fld select:focus,.fld textarea:focus{
  outline:none;border-bottom-color:var(--ink);border-bottom-width:1px;
  box-shadow:0 1px 0 0 var(--ink);}
.fld input::placeholder,.fld textarea::placeholder{color:#b3bbc1;}
.fld .hint{font-size:12px;color:var(--grey);line-height:1.5;margin-top:9px;}
.fld input:user-invalid,.fld select:user-invalid,.fld textarea:user-invalid{border-bottom-color:var(--amber);}

.fsub{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:38px;
  padding-top:26px;border-top:1px solid var(--line);}
.btn-send{display:inline-flex;align-items:center;justify-content:space-between;gap:34px;
  background:var(--black);color:#fff;border:0;cursor:pointer;
  font-family:var(--sans);font-size:16px;letter-spacing:-.015em;padding:19px 26px;min-width:250px;
  transition:background-color .2s var(--ease,ease);}
.btn-send:hover:not(:disabled){background:var(--navy);}
.btn-send:disabled{opacity:.55;cursor:progress;}
.btn-send .ar{font-size:17px;}
.fnote{font-size:12.5px;color:var(--grey);line-height:1.55;max-width:40ch;}
.fmsg{margin-top:24px;padding:16px 20px;font-size:14px;line-height:1.6;display:none;}
.fmsg.ok{display:block;background:rgba(20,148,135,.08);border-left:3px solid var(--teal);color:var(--ink);}
.fmsg.bad{display:block;background:rgba(180,83,9,.08);border-left:3px solid var(--amber);color:var(--ink);}
.fmsg a{text-decoration:underline;}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
@media(max-width:700px){
  .fgrid{grid-template-columns:1fr;gap:22px;}
  .btn-send{width:100%;}
}

/* ── Enlace con flecha ─────────────────────────────────────────────────── */
.arrow-link{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  font-size:16px;transition:padding-left .2s var(--ease);}
.arrow-link:hover{padding-left:8px;}
.arrow-link .ar{font-size:19px;color:var(--ink-2);}
.dark .arrow-link{border-color:rgba(255,255,255,.16);}
.dark .arrow-link .ar{color:#8fa3b0;}

/* ── CTA partido ───────────────────────────────────────────────────────── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.split a{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:52px 34px;font-size:clamp(1.4rem,1.1rem+1.2vw,2.1rem);letter-spacing:-0.03em;
  transition:transform .22s var(--ease);}
.split a:hover{transform:translateY(-3px);}
.split .s-grey{background:var(--paper-3);color:var(--ink);}
.split .s-black{background:var(--black);color:#fff;}
.split .ar{font-size:26px;}
@media(max-width:760px){ .split{grid-template-columns:1fr;} .split a{padding:36px 24px;} }

/* ── Cifras ────────────────────────────────────────────────────────────── */
.figs{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);}
.fig{padding:30px 24px 30px 0;border-right:1px solid var(--line);}
.fig:last-child{border-right:0;}
.fig .v{font-size:clamp(1.9rem,1.4rem+1.4vw,2.7rem);letter-spacing:-0.04em;line-height:1;}
.fig .v.t{color:var(--teal);} .fig .v.a{color:var(--amber);}
.fig .k{font-size:12.5px;color:var(--ink-2);margin-top:10px;line-height:1.45;}
.dark .figs{border-top-color:rgba(255,255,255,.16);}
.dark .fig{border-right-color:rgba(255,255,255,.16);}
.dark .fig .k{color:#9fb2bd;}
@media(max-width:820px){
  .figs{grid-template-columns:1fr 1fr;}
  .fig{padding:24px 18px 24px 0;}
  .fig:nth-child(2n){border-right:0;}
  .fig:nth-child(-n+2){border-bottom:1px solid var(--line);}
  .dark .fig:nth-child(-n+2){border-bottom-color:rgba(255,255,255,.16);}
}

/* ── Banda de imagen a sangre completa ─────────────────────────────────── */
.band{position:relative;min-height:clamp(300px,42vw,520px);display:flex;align-items:center;
  background-size:cover;background-position:center;overflow:hidden;}
/* Velo calibrado sobre la fotografía más clara del set (turbina contra cielo pálido):
   con .62 en la zona del texto, el blanco alcanza 6,07:1 — sobre el mínimo AA de 4,5. */
.band::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,28,44,.70),rgba(11,28,44,.62) 45%,rgba(11,28,44,.82));}
.band .wrap{position:relative;z-index:2;text-align:center;padding-top:70px;padding-bottom:70px;}
.band h2{color:#fff;}
.band .lede{color:#e8eef2;margin-left:auto;margin-right:auto;}
/* Blanco, no teal: sobre fotografía el acento pierde contraste y se vuelve ilegible */
.band .tag{color:#fff;}

/* ── Dos columnas ──────────────────────────────────────────────────────── */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;}
.duo img{width:100%;height:auto;object-fit:cover;}
@media(max-width:900px){ .duo{grid-template-columns:1fr;gap:30px;} }

/* ── Flujo horizontal ──────────────────────────────────────────────────── */
.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:0;}
.fl{padding:0 20px;border-left:1px solid var(--line);}
.fl:first-child{border-left:0;padding-left:0;}
.fl .n{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--teal);margin-bottom:12px;}
.fl h4{font-size:17px;font-weight:600;margin-bottom:8px;letter-spacing:-0.015em;}
.fl p{font-size:13.5px;line-height:1.62;}
.dark .fl{border-left-color:rgba(255,255,255,.16);}
.dark .fl .n{color:var(--teal-lt);} .dark .fl h4{color:#fff;}
@media(max-width:900px){ .flow{grid-template-columns:1fr 1fr;gap:26px 0;} .fl:nth-child(odd){border-left:0;padding-left:0;} }
@media(max-width:560px){ .flow{grid-template-columns:1fr;gap:24px;} .fl,.fl:nth-child(odd){border-left:1px solid var(--line);padding:0 0 0 16px;} }

/* ── Tablas ────────────────────────────────────────────────────────────── */
table{width:100%;border-collapse:collapse;}
th{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);
  text-align:left;padding:12px 14px 12px 0;border-bottom:1.5px solid var(--ink);}
td{font-size:14px;padding:13px 14px 13px 0;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:top;}
td b{color:var(--ink);font-weight:600;}
.dark th{color:#8fa3b0;border-bottom-color:var(--teal-lt);}
.dark td{color:#b9c9d1;border-bottom-color:rgba(255,255,255,.12);}
.dark td b{color:#fff;}

/* ── Avisos ────────────────────────────────────────────────────────────── */
.note{border-left:3px solid var(--teal);background:rgba(20,148,135,.06);padding:20px 24px;}
.note.a{border-left-color:var(--amber);background:rgba(180,83,9,.055);}
.note h4{font-size:15px;font-weight:600;margin-bottom:7px;}
.note p{font-size:14px;}
.dark .note{background:rgba(31,182,168,.10);border-left-color:var(--teal-lt);}
.dark .note.a{background:rgba(245,166,35,.10);border-left-color:#f5a623;}
.dark .note h4{color:#fff;} .dark .note p{color:#b9c9d1;}

/* ── Pie ───────────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--line);padding:60px 0 34px;}
.f-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px;margin-bottom:44px;}
.f-grid h5{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin-bottom:14px;}
.f-grid a{display:block;font-size:14px;color:var(--ink-2);padding:5px 0;}
.f-grid a:hover{color:var(--ink);}
.f-bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey);
  border-top:1px solid var(--line);padding-top:22px;}
.fine{font-size:11.5px;color:var(--grey);line-height:1.6;margin-top:20px;max-width:96ch;}
@media(max-width:820px){ .f-grid{grid-template-columns:1fr 1fr;} }

/* ── Menú móvil ────────────────────────────────────────────────────────── */
.scrim{position:fixed;inset:0;z-index:60;background:rgba(16,20,24,.42);opacity:0;visibility:hidden;
  transition:opacity .26s,visibility .26s;}
.scrim.on{opacity:1;visibility:visible;}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:61;width:min(86vw,340px);
  background:var(--paper);border-left:1px solid var(--line);transform:translateX(100%);
  transition:transform .32s var(--ease);display:flex;flex-direction:column;
  padding:16px 24px calc(24px + env(safe-area-inset-bottom));overflow-y:auto;}
.drawer.on{transform:translateX(0);}
.d-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px;border-bottom:1px solid var(--line);}
.drawer nav a{display:block;font-size:16px;padding:15px 0;border-bottom:1px solid var(--line);}
.d-foot{margin-top:auto;padding-top:22px;}
.d-foot .btn-sm{display:block;text-align:center;}
.d-lang{display:flex;justify-content:center;margin-top:16px;}
body.locked{overflow:hidden;}

/* ── Revelado al hacer scroll ──────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(22px);filter:blur(10px);
  transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease);
  will-change:opacity,transform,filter;}
.rv.in{opacity:1;transform:none;filter:blur(0);}
/* escalonado sutil dentro de una misma sección */
.rv.in ~ .rv.in{transition-delay:.06s;}

/* ══════════════════════════════════════════════════════════════════════════
   MOVIMIENTO — sistema tipo Palantir
   Tres piezas: revelado por líneas con máscara, palabra rotativa, y conteo
   de cifras. Todo se apaga con prefers-reduced-motion.
   ══════════════════════════════════════════════════════════════════════════ */

/* 1 · Revelado por líneas: el texto sube desde detrás de una máscara.
      Es el gesto característico de Palantir en titulares. */
/* La máscara recortaba los descendentes (g, j, p, y) con line-height apretado:
   se le da aire por abajo y se compensa con margen negativo — mismo alto visual. */
.reveal-lines .ln{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em;}
.reveal-lines .ln > span{
  display:block;transform:translateY(105%);
  transition:transform .9s var(--ease);
}
.reveal-lines.in .ln > span{transform:translateY(0);}
.reveal-lines.in .ln:nth-child(1) > span{transition-delay:0ms;}
.reveal-lines.in .ln:nth-child(2) > span{transition-delay:90ms;}
.reveal-lines.in .ln:nth-child(3) > span{transition-delay:180ms;}
.reveal-lines.in .ln:nth-child(4) > span{transition-delay:270ms;}
.reveal-lines.in .ln:nth-child(5) > span{transition-delay:360ms;}

/* 2 · Palabra rotativa: cicla verbos en su sitio, con máscara vertical. */
.rotor{display:inline-block;position:relative;vertical-align:bottom;
  overflow:hidden;height:1.1em;}
.rotor i{
  display:block;font-style:normal;
  transition:transform .62s var(--ease), opacity .62s var(--ease);
}
.rotor i[data-state="out"]{transform:translateY(-105%);opacity:0;}
.rotor i[data-state="in"]{transform:translateY(0);opacity:1;}
.rotor i[data-state="next"]{transform:translateY(105%);opacity:0;}
/* el verbo que rota se distingue del resto del titular */
.rotor-host{color:var(--teal);}
.dark .rotor-host,.band .rotor-host{color:var(--teal-lt);}

/* 3 · Subrayado que crece al entrar en pantalla */
.grow-rule{position:relative;}
.grow-rule::after{content:'';position:absolute;left:0;bottom:-10px;height:1px;
  width:0;background:var(--ink);transition:width 1.1s var(--ease);}
.grow-rule.in::after{width:100%;}
.dark .grow-rule::after{background:rgba(255,255,255,.5);}

/* 4 · Módulos: la fila se desplaza levemente al pasar el puntero */
.mod{transition:background .2s var(--ease), padding-left .28s var(--ease);}
.mod:hover{padding-left:14px;}
.mod:hover .m-name{color:var(--teal);}
.mod .m-name{transition:color .3s var(--ease);}

/* 5 · Tarjetas: elevación sutil */
.card{transition:transform .3s var(--ease), box-shadow .3s var(--ease);}
.cards .card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(16,20,24,.09);}

@media(prefers-reduced-motion: reduce){
  .reveal-lines .ln > span{transform:none !important;transition:none !important;}
  .rotor{height:auto;overflow:visible;}
  .rotor i{transition:none !important;}
  .rotor i[data-state="out"],.rotor i[data-state="next"]{display:none;}
  .grow-rule::after{width:100% !important;transition:none !important;}
  .mod:hover{padding-left:0;}
  .mod:hover .m-name{letter-spacing:.08em;}
  .cards .card:hover{transform:none;box-shadow:none;}
}

/* ── Teléfonos: ritmo vertical ───────────────────────────────────────────
   Los quiebres por componente ya colapsan las columnas; lo que faltaba era
   el aire. 96px de padding por sección está pensado para escritorio — en un
   teléfono deja pantallas casi vacías entre sección y sección, y el pulgar
   pierde el hilo. Aquí se aprieta el ritmo completo sin tocar el layout. */
@media(max-width:660px){
  :root{--gut:20px;}
  section{padding:56px 0;}
  .mod{padding:20px 0;gap:8px;}
  .band{min-height:260px;}
  .band .wrap{padding-top:52px;padding-bottom:52px;}
  .f-logo{margin:48px 0 30px;gap:22px;}
  .lang-blk{margin-top:52px;padding-top:40px;}
  .arch-prov{margin-top:34px;}
  .scale{margin-bottom:44px;}
  .fgrid{gap:20px 18px;}
  .cards{gap:12px;}
  .reps{gap:12px;}
  .rail .card{flex-basis:260px;min-height:300px;}
  footer{padding:44px 0 26px;}
}
@media(max-width:620px){
  .capcol{padding:18px 0 20px;}
}