/* ============================================================
   CORYN — sistema visual v2
   Tipografia: Bricolage Grotesque (titulos) + IBM Plex Sans / Mono
   ============================================================ */

:root{
  --paper:#f7f9fd;
  --card:#ffffff;
  --ink:#0a1730;
  --ink-2:#2d3f61;
  --muted:#5b6d8d;
  --line:#dde5f2;
  --accent:#1f5fe0;
  --cyan:#1a9db5;
  --band-a:#0a1730;
  --band-b:#17347a;
  --on-band:#c9daf6;
  --wa:#20c25c;
  --shadow:0 1px 2px rgba(10,23,48,.05), 0 12px 32px -18px rgba(10,23,48,.3);
  --lift:0 30px 60px -30px rgba(10,23,48,.55);
  --radius:14px;
  color-scheme:light;
  --nav-h:66px;
  --banner:url("assets/plano.webp");
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'IBM Plex Sans','Segoe UI',system-ui,-apple-system,sans-serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:'Bricolage Grotesque','IBM Plex Sans',system-ui,sans-serif;
  font-weight:800; letter-spacing:-.028em; line-height:1.07;
  text-wrap:balance; margin:0;
}
p{ margin:0; }
figure{ margin:0; }   /* el navegador trae 1em 40px y en movil come 80px de ancho */
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }

.wrap{ width:min(1120px, 100% - 40px); margin-inline:auto; }

.eyebrow{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cyan);
}

/* ---------------- navegacion ---------------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50; height:var(--nav-h);
  display:flex; align-items:center;
  transition:background .25s ease, border-color .25s ease, backdrop-filter .25s ease;
  border-bottom:1px solid transparent;
}
.nav.solid{
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:saturate(160%) blur(12px);
  border-bottom-color:var(--line);
}
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand{ display:flex; align-items:center; gap:9px; text-decoration:none; }
.brand .marca-svg{ width:28px; height:auto; display:block; color:#fff; }
.nav.solid .brand .marca-svg{ color:var(--ink); }
.brand span{
  font-family:'Bricolage Grotesque',sans-serif; font-weight:700;
  font-size:18px; letter-spacing:.18em; color:#fff;
}
.nav.solid .brand span{ color:var(--ink); }

.nav-links{ display:none; gap:26px; }
@media (min-width:960px){ .nav-links{ display:flex; } }
.nav-links a{
  text-decoration:none; font-size:15px; font-weight:500; color:rgba(255,255,255,.8);
  padding:6px 0; border-bottom:2px solid transparent; transition:color .2s, border-color .2s;
}
.nav-links a:hover{ color:#fff; border-bottom-color:var(--cyan); }
.nav.solid .nav-links a{ color:var(--muted); }
.nav.solid .nav-links a:hover{ color:var(--ink); }

/* ---------------- botones ---------------- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 22px; border-radius:999px; text-decoration:none;
  font-weight:600; font-size:16px; border:1px solid transparent; cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn svg{ width:18px; height:18px; flex:none; }
.btn-wa{ background:var(--wa); color:#04240f; box-shadow:0 10px 26px -12px rgba(32,194,92,.9); }
.btn-wa:hover{ transform:translateY(-2px); box-shadow:0 16px 34px -12px rgba(32,194,92,.95); }
.btn-ghost{ border-color:rgba(255,255,255,.3); color:#fff; }
.btn-ghost:hover{ background:rgba(255,255,255,.1); transform:translateY(-2px); }
.btn-solid{ background:var(--accent); color:#fff; }
.btn-solid:hover{ transform:translateY(-2px); box-shadow:0 16px 34px -14px var(--accent); }
.btn-sm{ padding:9px 18px; font-size:14.5px; }
.btn:focus-visible{ outline:3px solid var(--cyan); outline-offset:3px; }

/* ---------------- hero ---------------- */
/* El hero ya no lleva un objeto abstracto flotando sobre texto centrado: esa
   composicion es la plantilla por defecto de toda landing generada, y era lo
   que mas delataba la pagina.

   Ahora la fotografia ES el titular. El encabezado dice que el negocio no cabe
   en una planilla y la imagen muestra exactamente eso, fotografiado. Texto a
   la izquierda sobre el degradado, foto respirando a la derecha. */
.hero{
  position:relative; overflow:hidden; color:#fff; text-align:left;
  min-height:min(94vh, 860px);
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--nav-h) + 32px) 0 0;
  background:var(--band-a);
  isolation:isolate;
}
.hero-foto{
  position:absolute; inset:0; margin:0; z-index:0;
}
.hero-foto img{
  width:100%; height:100%; object-fit:cover; object-position:62% center;
  display:block;
}
/* El velo protege la mitad izquierda, que es donde cae el texto, y deja la
   derecha de la escena visible. En vertical se cierra por abajo, porque ahi el
   texto se apoya sobre la foto entera. */
.hero-foto::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(6,11,24,.95) 0%, rgba(6,11,24,.88) 34%,
                    rgba(6,11,24,.62) 58%, rgba(6,11,24,.42) 100%),
    linear-gradient(180deg, rgba(6,11,24,.55) 0%, rgba(6,11,24,0) 30%,
                    rgba(6,11,24,0) 62%, rgba(6,11,24,.75) 100%);
}
@media (max-width:900px){
  .hero-foto img{ object-position:58% center; }
  .hero-foto::after{
    background:linear-gradient(180deg, rgba(6,11,24,.72) 0%, rgba(6,11,24,.86) 45%,
                               rgba(6,11,24,.94) 100%);
  }
}

/* Dos manchas de luz enormes que derivan en ciclos largos y distintos.
   No se leen como animacion, se leen como profundidad. Se animan solo con
   transform, que la GPU compone sin repintar nada. */
.hero::before,
.hero::after{
  content:''; position:absolute; z-index:0; pointer-events:none;
  border-radius:50%; filter:blur(60px);
  will-change:transform;
}
.hero::before{
  width:70vw; height:70vw; max-width:900px; max-height:900px;
  left:-8vw; top:-14vw;
  background:radial-gradient(circle, rgba(52,150,205,.16) 0%, rgba(52,150,205,0) 68%);
  animation:deriva-a 46s ease-in-out infinite alternate;
}
.hero::after{
  width:58vw; height:58vw; max-width:760px; max-height:760px;
  right:-10vw; bottom:-18vw;
  background:radial-gradient(circle, rgba(96,140,225,.14) 0%, rgba(96,140,225,0) 66%);
  animation:deriva-b 61s ease-in-out infinite alternate;
}
@keyframes deriva-a{
  from{ transform:translate3d(0,0,0) scale(1); }
  to  { transform:translate3d(9vw,7vh,0) scale(1.18); }
}
@keyframes deriva-b{
  from{ transform:translate3d(0,0,0) scale(1.1); }
  to  { transform:translate3d(-11vw,-6vh,0) scale(1); }
}
/* Sin z-index a proposito: darselo crearia un contexto de apilamiento y el ala
   dejaria de poder componerse por suma contra el fondo. El orden del DOM basta
   para que el contenido quede sobre las manchas. */
.hero > .wrap, .hero-sectores{ position:relative; }

@media (prefers-reduced-motion: reduce){
  .hero::before, .hero::after{ animation:none; }
}

/* el ala de cristal: unico elemento visual del hero.
   Viene sobre negro puro y se compone por suma, asi el negro desaparece
   y el vidrio conserva su brillo original sobre cualquier fondo oscuro. */
.orbe{
  width:min(178px, 34vw, 21vh); margin:0 auto 22px;
  height:auto; display:block;
  mix-blend-mode:screen;
}
/* si el navegador bloquea la reproduccion automatica queda el poster,
   que es el mismo cuadro con el que abre y cierra el bucle */
@media (min-width:900px){ .orbe{ width:min(205px, 17vw, 22vh); margin-bottom:26px; } }
/* pantallas muy bajas: comprimir todo el bloque, no solo el ala */
@media (min-width:900px) and (max-height:770px){
  .hero{ padding-top:calc(var(--nav-h) + 14px); }
  .hero h1{ font-size:clamp(25px, 2.8vw, 34px); margin-top:12px; }
  .hero .lead{ font-size:15.5px; margin-top:13px; }
  .hero .actions{ margin-top:20px; margin-bottom:22px;  justify-content:flex-start; }
  .orbe{ width:min(130px, 12vw, 17vh); margin-bottom:14px; }
  .hero-sectores a, .hero-sectores span.sec{ padding:17px 24px; }
}
/* portatiles bajos: achicar el ala para que los botones no queden fuera de vista */
@media (min-width:900px) and (max-height:860px){
  .orbe{ width:min(158px, 14vw, 20vh); margin-bottom:18px; }
  .hero{ padding-top:calc(var(--nav-h) + 18px); }
  .hero h1{ margin-top:18px; }
}

.hero .eyebrow{ color:#6fd8ec; letter-spacing:.2em; }
.hero h1{
  font-size:clamp(31px, 4.1vw, 54px); margin:20px 0 0;
  max-width:15ch; line-height:1.1; letter-spacing:-.024em;
}
.hero h1 em{
  font-style:normal;
  background:linear-gradient(96deg, #6fd8ec, #74a6ff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero .lead{
  margin:20px 0 0; max-width:46ch; font-size:clamp(16.5px,1.8vw,19px);
  line-height:1.55; color:var(--on-band);
}
.hero .lead strong{ color:#fff; font-weight:600; }
.hero .actions{
  display:flex; flex-wrap:wrap; gap:13px; margin-top:32px; margin-bottom:36px;
  justify-content:flex-start;
}

/* franja de sectores al pie del hero, con enlace a cada caso */
.hero-sectores{
  margin-top:auto; border-top:1px solid rgba(255,255,255,.13);
  display:grid; grid-template-columns:1fr; gap:0;
}
@media (min-width:760px){ .hero-sectores{ grid-template-columns:repeat(3,1fr); } }
.hero-sectores a,
.hero-sectores span.sec{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:24px 28px; text-decoration:none; color:#dbe7fb;
  border-bottom:1px solid rgba(255,255,255,.09);
  transition:background .18s ease;
}
@media (min-width:760px){
  .hero-sectores a, .hero-sectores span.sec{ border-bottom:0; border-right:1px solid rgba(255,255,255,.09); }
  .hero-sectores > *:last-child{ border-right:0; }
}
.hero-sectores a:hover{ background:rgba(255,255,255,.06); }
.hero-sectores .nom{ font-size:15.5px; font-weight:600; }
.hero-sectores .ref{
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.05em;
  color:#8fa9d4; display:flex; align-items:center; gap:7px;
}
.hero-sectores .ref svg{
  width:13px; height:13px; fill:none; stroke:#6fd8ec; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; transition:transform .18s ease;
}
.hero-sectores a:hover .ref svg{ transform:translate(2px,-2px); }
@media (prefers-reduced-motion: reduce){
  .hero-sectores a, .hero-sectores .ref svg{ transition:none; }
}

/* ---------------- secciones ---------------- */
section{ padding:74px 0; }
.sec-head{ margin-bottom:38px; max-width:60ch; }
.sec-head h2{ font-size:clamp(27px, 3.5vw, 40px); margin-top:12px; }
.sec-head p{ margin-top:13px; color:var(--muted); }

/* servicios */
.svcs{ display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:640px){ .svcs{ grid-template-columns:1fr 1fr; } }
@media (min-width:980px){ .svcs{ grid-template-columns:repeat(3,1fr); } }
.svc{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 22px 24px; box-shadow:var(--shadow);
  transition:transform .2s ease, border-color .2s ease;
}
.svc:hover{ transform:translateY(-3px);
  border-color:color-mix(in srgb, var(--accent) 42%, var(--line)); }
.svc img{ width:64px; height:64px; margin:-6px 0 4px -6px; }
.svc h3{ font-size:18px; margin-bottom:5px; }
.svc p{ color:var(--muted); font-size:15px; line-height:1.45; }

/* proyectos: filas alternadas, no una grilla de tarjetas */
.work{
  display:grid; gap:26px; grid-template-columns:1fr; align-items:center;
  padding:34px 0; border-top:1px solid var(--line);
}
@media (min-width:860px){
  .work{ grid-template-columns:1.15fr .85fr; gap:52px; padding:44px 0; }
  .work.flip .shot{ order:2; }
}
.work .tag{
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--cyan);
}
.work h3{ font-size:25px; margin:9px 0 10px; }
.work p{ color:var(--muted); font-size:16px; max-width:46ch; }
.work .meta{
  display:flex; flex-wrap:wrap; gap:8px; margin-top:16px;
}
.work .meta span{
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.06em;
  color:var(--ink-2); background:color-mix(in srgb, var(--accent) 8%, transparent);
  border:1px solid var(--line); border-radius:999px; padding:5px 11px;
}
.browser-lite{
  border-radius:12px; overflow:hidden; border:1px solid var(--line);
  box-shadow:var(--lift); background:var(--card);
}
.browser-lite .bar{
  display:flex; align-items:center; gap:6px; padding:10px 13px;
  background:color-mix(in srgb, var(--ink) 6%, var(--card));
  border-bottom:1px solid var(--line);
}
.browser-lite .bar i{ width:9px; height:9px; border-radius:50%; background:var(--line); }
.pair{ display:flex; gap:16px; justify-content:center; }
.pair .phone{
  padding:8px; border-radius:30px; background:#080e1c; width:min(180px,42vw);
  border:1px solid rgba(255,255,255,.14); box-shadow:var(--lift);
}
.pair .phone img{ border-radius:23px; }
.pair .phone:first-child{ transform:rotate(-3deg) translateY(8px); }
.pair .phone:last-child{ transform:rotate(3deg); }

/* proceso */
.proceso{ background:color-mix(in srgb, var(--accent) 5%, var(--paper)); }
.proceso .cols{ display:grid; gap:24px; grid-template-columns:1fr; align-items:center; }
@media (min-width:900px){ .proceso .cols{ grid-template-columns:.9fr 1fr; gap:56px; } }
.proceso .aside img{ width:min(250px,64%); margin:0 auto; }
@media (min-width:900px){ .proceso .aside img{ width:100%; max-width:300px; margin:0; } }

.flow{ list-style:none; margin:0; padding:0; display:grid; }
.flow li{ display:grid; grid-template-columns:40px 1fr; gap:14px; padding-bottom:14px; position:relative; }
.flow li:last-child{ padding-bottom:0; }
.flow li::after{
  content:''; position:absolute; left:19px; top:43px; bottom:1px; width:2px;
  background:linear-gradient(180deg, var(--c), transparent); opacity:.5; border-radius:2px;
}
.flow li:last-child::after{ display:none; }
.flow li:nth-child(1){ --c:var(--accent); }
.flow li:nth-child(2){ --c:color-mix(in oklab, var(--accent) 75%, var(--cyan)); }
.flow li:nth-child(3){ --c:color-mix(in oklab, var(--accent) 50%, var(--cyan)); }
.flow li:nth-child(4){ --c:color-mix(in oklab, var(--accent) 25%, var(--cyan)); }
.flow li:nth-child(5){ --c:var(--cyan); }
.flow .dot{
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  background:var(--paper); border:2px solid var(--c); color:var(--c);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--c) 12%, transparent);
  position:relative; z-index:1;
}
.flow .dot svg{ width:19px; height:19px; fill:none; stroke:currentColor;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.flow .n{
  font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600;
  letter-spacing:.16em; color:var(--c);
}
.flow h3{ font-size:17px; margin:2px 0 3px; }
.flow p{ color:var(--muted); font-size:14.5px; line-height:1.4; max-width:48ch; }

/* cierre */
.close{
  color:#fff; padding:64px 0 68px; position:relative; overflow:hidden;
  background-color:var(--band-a);
  background-image:
    linear-gradient(80deg, rgba(7,14,32,.97) 0%, rgba(7,14,32,.9) 36%, rgba(7,14,32,.5) 66%, rgba(7,14,32,.22) 100%),
    var(--banner);
  background-size:auto, 132%;
  background-position:center, 64% 38%;
  background-repeat:no-repeat;
}
.close .eyebrow{ color:#6fd8ec; }
.close h2{ font-size:clamp(28px, 3.8vw, 42px); max-width:16ch; margin-top:14px; }
.close p{ margin-top:16px; color:var(--on-band); max-width:48ch; }
.close .actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.close .lines{
  display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:24px;
  font-family:'IBM Plex Mono',monospace; font-size:14px; color:#9fbaea;
}
.close .lines a{ text-decoration:none; border-bottom:1px solid rgba(159,186,234,.4); padding-bottom:2px; }
.close .lines a:hover{ color:#fff; border-color:#6fd8ec; }

/* pie
   Va en oscuro a proposito. Encima siempre hay una seccion .close, tambien
   oscura: un pie palido ahi hacia que la pagina terminara desinflandose justo
   despues del momento de mayor peso. El fondo es mas profundo que el de .close
   para que el cierre siga mandando y el pie lea como base, no como un segundo
   llamado. */
.foot{
  position:relative;
  background:#070e20;
  color:#9fbaea;
  padding:60px 0 26px;
  border-top:1px solid rgba(159,186,234,.16);
}
/* Hilo de luz en el canto: sin el, .close y el pie se funden en una sola
   mancha oscura y se pierde el limite entre ambos. */
.foot::before{
  content:""; position:absolute; inset:-1px 0 auto 0; height:1px;
  background:linear-gradient(90deg,
    transparent, var(--accent) 22%, var(--cyan) 54%, transparent 88%);
  opacity:.75;
}

.foot .cols{ display:grid; gap:34px; grid-template-columns:1fr; }
@media (min-width:640px){ .foot .cols{ grid-template-columns:1fr 1fr; gap:36px 40px; } }
@media (min-width:980px){ .foot .cols{ grid-template-columns:1.7fr 1fr 1fr 1.15fr; gap:48px; } }

.foot .brand{ gap:11px; }
.foot .brand .marca-svg{ width:34px; color:#fff; }
.foot .brand span{ color:#fff; font-size:19px; }
.foot-marca > p{
  color:#8ea8d4; font-size:14.5px; line-height:1.62;
  margin-top:14px; max-width:34ch;
}

.foot h4{
  font-size:11.5px; font-family:'IBM Plex Mono',monospace; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:#6fd8ec;
  margin-bottom:14px;
}
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.foot ul a{
  text-decoration:none; font-size:15px; color:#c3d5f2;
  transition:color .16s ease;
}
.foot ul a:hover{ color:#fff; }
.foot-nota{ margin-top:14px; font-size:13px; line-height:1.55; color:#7b93c2; max-width:26ch; }

.foot .base{
  margin-top:46px; padding-top:20px;
  border-top:1px solid rgba(159,186,234,.14);
  display:flex; flex-wrap:wrap; gap:8px 18px; justify-content:space-between;
  font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:#6c84b3;
}
.foot .base a{
  color:#6c84b3; text-decoration:none;
  border-bottom:1px solid rgba(108,132,179,.35); padding-bottom:1px;
}
.foot .base a:hover{ color:#c3d5f2; border-color:#6fd8ec; }



/* aparicion al hacer scroll */
.rv{ transition:opacity .6s ease, transform .6s ease; }
.js-rv .rv{ opacity:0; transform:translateY(14px); }
.js-rv .rv.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .rv{ opacity:1 !important; transform:none !important; transition:none; }
  .btn,.svc{ transition:none; }
  .pair .phone{ transform:none !important; }
}

/* ============================================================
   Componentes de sitio (no de landing)
   ============================================================ */

/* --- franja de sectores --- */
.sectores{ display:grid; gap:14px; grid-template-columns:1fr; }
@media (min-width:640px){ .sectores{ grid-template-columns:1fr 1fr; } }
@media (min-width:1000px){ .sectores{ grid-template-columns:repeat(4,1fr); } }
.sector{
  border:1px solid var(--line); border-radius:var(--radius); padding:20px 20px 22px;
  background:var(--card); box-shadow:var(--shadow);
}
.sector .ico{
  width:38px; height:38px; border-radius:10px; display:grid; place-items:center;
  background:color-mix(in srgb, var(--accent) 12%, transparent);
  color:var(--accent); margin-bottom:14px;
}
.sector .ico svg{ width:20px; height:20px; fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.sector h3{ font-size:17px; margin-bottom:5px; }
.sector p{ color:var(--muted); font-size:14.5px; line-height:1.45; }
.sector .ref{
  display:block; margin-top:10px; font-family:'IBM Plex Mono',monospace;
  font-size:11.5px; letter-spacing:.05em; color:var(--cyan);
}

/* --- comparativa --- */
.vs{ display:grid; gap:18px; grid-template-columns:1fr; }
@media (min-width:820px){ .vs{ grid-template-columns:1fr 1fr; gap:22px; } }
.vs-col{ border-radius:var(--radius); padding:26px 26px 28px; border:1px solid var(--line); }
.vs-col.mala{ background:color-mix(in srgb, var(--ink) 4%, var(--paper)); }
.vs-col.buena{
  background:var(--card); box-shadow:var(--lift);
  border-color:color-mix(in srgb, var(--accent) 35%, var(--line));
}
.vs-col h3{ font-size:19px; margin-bottom:4px; }
.vs-col .sub{
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted); margin-bottom:18px;
}
.vs-col.buena .sub{ color:var(--cyan); }
.vs-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.vs-col li{ display:grid; grid-template-columns:20px 1fr; gap:11px; font-size:15px; line-height:1.45; }
.vs-col.mala li{ color:var(--muted); }
.vs-col.buena li{ color:var(--ink-2); }
.vs-col li svg{ width:18px; height:18px; margin-top:3px; fill:none; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; }
.vs-col.mala li svg{ stroke:#c2536b; }
.vs-col.buena li svg{ stroke:var(--cyan); }

/* --- tarjetas de caso --- */
.casos{ display:grid; gap:20px; grid-template-columns:1fr; }
@media (min-width:820px){ .casos{ grid-template-columns:repeat(3,1fr); } }
.caso{
  display:flex; flex-direction:column; text-decoration:none;
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  background:var(--card); box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.caso:hover{ transform:translateY(-4px); box-shadow:var(--lift);
  border-color:color-mix(in srgb, var(--accent) 40%, var(--line)); }
.caso .thumb{ aspect-ratio:16/10; overflow:hidden; background:var(--paper); }
.caso .thumb img{ width:100%; height:100%; object-fit:cover; object-position:top center; }
.caso .body{ padding:18px 20px 22px; display:flex; flex-direction:column; flex:1; }
.caso .tag{
  font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--cyan);
}
.caso h3{ font-size:19px; margin:8px 0 7px; }
.caso p{ color:var(--muted); font-size:14.5px; line-height:1.45; flex:1; }
.caso .go{
  margin-top:14px; font-size:14.5px; font-weight:600; color:var(--accent);
  display:flex; align-items:center; gap:7px;
}
.caso:hover .go svg{ transform:translateX(3px); }
.caso .go svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; transition:transform .2s ease; }

/* --- bloque de precio / cotizacion --- */
.precio{ display:grid; gap:20px; grid-template-columns:1fr; }
@media (min-width:820px){ .precio{ grid-template-columns:1fr 1fr; gap:24px; } }
.precio-card{
  border:1px solid var(--line); border-radius:var(--radius); padding:26px;
  background:var(--card); box-shadow:var(--shadow);
}
.precio-card .kicker{
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--cyan);
}
.precio-card .cifra{
  font-family:'Bricolage Grotesque',sans-serif; font-weight:800; letter-spacing:-.03em;
  font-size:34px; margin:10px 0 4px; color:var(--ink);
}
.precio-card .cifra small{ font-size:15px; font-weight:600; color:var(--muted); letter-spacing:0; }
.precio-card > p{ color:var(--muted); font-size:15px; line-height:1.5; }
.precio-card ul{ list-style:none; margin:16px 0 0; padding:0; display:grid; gap:9px; }
.precio-card li{ display:grid; grid-template-columns:18px 1fr; gap:10px;
  font-size:14.5px; color:var(--ink-2); line-height:1.42; }
.precio-card li svg{ width:16px; height:16px; margin-top:3px; fill:none; stroke:var(--cyan);
  stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }

/* --- aviso de dato pendiente (borrar al completar) --- */
.pendiente{
  background:repeating-linear-gradient(45deg, color-mix(in srgb,#e0a13a 16%,transparent),
    color-mix(in srgb,#e0a13a 16%,transparent) 10px, transparent 10px, transparent 20px);
  border:1px dashed #c9902f; border-radius:8px; padding:2px 8px;
  font-family:'IBM Plex Mono',monospace; font-size:.82em; color:#8a6318;
}

/* --- cabecera interior --- */
.page-head{
  color:#fff; padding:calc(var(--nav-h) + 46px) 0 52px;
  background-color:var(--band-a);
  background-image:
    radial-gradient(60% 100% at 78% 50%, rgba(35,150,190,.22) 0%, rgba(35,150,190,0) 64%),
    linear-gradient(100deg, rgba(7,14,32,.92) 0%, rgba(7,14,32,.66) 42%, rgba(7,14,32,.15) 76%, rgba(7,14,32,0) 100%),
    var(--banner);
  background-size:auto, auto, cover; background-position:center, center, 72% center;
  background-repeat:no-repeat;
}
.page-head .eyebrow{ color:#6fd8ec; }
.page-head h1{ font-size:clamp(32px, 4.4vw, 50px); max-width:18ch; margin-top:14px; }
.page-head p{ margin-top:16px; color:var(--on-band); max-width:56ch; font-size:18px; }
.crumbs{
  font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:#9fbaea; margin-bottom:18px;
}
.crumbs a{ text-decoration:none; border-bottom:1px solid rgba(159,186,234,.4); }
.crumbs a:hover{ color:#fff; }

/* --- cuerpo de caso --- */
.caso-grid{ display:grid; gap:36px; grid-template-columns:1fr; }
@media (min-width:940px){ .caso-grid{ grid-template-columns:1fr 300px; gap:56px; align-items:start; } }
.caso-body h2{ font-size:26px; margin:34px 0 12px; }
.caso-body h2:first-child{ margin-top:0; }
.caso-body p{ color:var(--ink-2); margin-bottom:14px; }
.caso-body ul{ color:var(--ink-2); padding-left:20px; margin:0 0 16px; display:grid; gap:8px; }
.caso-body figure{ margin:26px 0; }
.caso-body figcaption{ color:var(--muted); font-size:13.5px; margin-top:10px; }
.ficha{
  border:1px solid var(--line); border-radius:var(--radius); padding:22px;
  background:var(--card); box-shadow:var(--shadow); position:sticky; top:calc(var(--nav-h) + 20px);
}
.ficha h3{ font-size:12px; font-family:'IBM Plex Mono',monospace; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; }
.ficha dl{ margin:0; display:grid; gap:14px; }
.ficha dt{ font-size:12.5px; color:var(--muted); font-family:'IBM Plex Mono',monospace;
  letter-spacing:.05em; }
.ficha dd{ margin:3px 0 0; font-size:15px; color:var(--ink); font-weight:500; }
.ficha .btn{ width:100%; justify-content:center; margin-top:20px; }

/* ============================================================
   Navegacion: enlace activo y menu de celular
   ============================================================ */
.nav-links a.activa{ color:#fff; border-bottom-color:var(--cyan); }
.nav.solid .nav-links a.activa{ color:var(--ink); border-bottom-color:var(--accent); }
.nav-right{ display:flex; align-items:center; gap:12px; }

.burger{
  display:grid; place-content:center; gap:5px; width:42px; height:38px;
  background:none; border:1px solid rgba(255,255,255,.3); border-radius:9px;
  cursor:pointer; padding:0;
}
.nav.solid .burger{ border-color:var(--line); }
.burger span{
  display:block; width:18px; height:2px; border-radius:2px; background:#fff;
  transition:transform .22s ease, opacity .22s ease;
}
.nav.solid .burger span{ background:var(--ink); }
@media (min-width:960px){ .burger{ display:none; } }
@media (max-width:520px){ .nav-cta{ display:none; } }

body.menu-abierto .burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
body.menu-abierto .burger span:nth-child(2){ opacity:0; }
body.menu-abierto .burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:959px){
  .nav-links{
    display:flex; position:fixed; inset:var(--nav-h) 0 auto 0;
    flex-direction:column; gap:0; padding:8px 20px 20px;
    background:var(--paper); border-bottom:1px solid var(--line);
    box-shadow:var(--lift);
    transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:transform .22s ease, opacity .22s ease;
  }
  .nav-links a{
    color:var(--ink) !important; font-size:17px; padding:14px 0;
    border-bottom:1px solid var(--line);
  }
  .nav-links a:last-child{ border-bottom:0; }
  body.menu-abierto .nav-links{ transform:none; opacity:1; pointer-events:auto; }
  body.menu-abierto{ overflow:hidden; }
}
@media (prefers-reduced-motion: reduce){
  .nav-links, .burger span{ transition:none; }
}

/* ============================================================
   Servicios en detalle
   ============================================================ */
.servicio{
  display:grid; gap:26px; grid-template-columns:1fr;
  padding:38px 0; border-top:1px solid var(--line);
}
@media (min-width:880px){ .servicio{ grid-template-columns:280px 1fr; gap:48px; } }
.servicio .cara{ display:flex; gap:16px; align-items:flex-start; }
.servicio .cara img{ width:64px; height:64px; flex:none; margin-top:-6px; }
.servicio h2{ font-size:23px; margin-bottom:6px; }
.servicio .resumen{ color:var(--muted); font-size:15px; line-height:1.45; }
.servicio .detalle{ display:grid; gap:22px; grid-template-columns:1fr; }
@media (min-width:620px){ .servicio .detalle{ grid-template-columns:1fr 1fr; } }
.servicio h3{
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  margin-bottom:11px;
}
.servicio ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.servicio li{ display:grid; grid-template-columns:18px 1fr; gap:10px;
  font-size:15px; color:var(--ink-2); line-height:1.42; }
.servicio li svg{ width:16px; height:16px; margin-top:3px; fill:none; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round; }
.servicio .incluye li svg{ stroke:var(--cyan); }
.servicio .fuera li{ color:var(--muted); }
.servicio .fuera li svg{ stroke:#c2536b; }
.servicio .escalera{
  margin-top:18px; padding:18px 20px; border-radius:12px;
  background:color-mix(in srgb, var(--cyan) 5%, var(--paper));
  border:1px solid color-mix(in srgb, var(--cyan) 26%, transparent);
}
.servicio .escalera h3{ color:var(--cyan); }
.servicio .escalera p{ font-size:14.5px; line-height:1.55; color:var(--ink-2); }
.servicio .escalera ul{
  list-style:none; margin:12px 0; padding:0; display:grid; gap:10px;
}
.servicio .escalera li{
  display:grid; grid-template-columns:18px 1fr; gap:10px;
  font-size:14.5px; line-height:1.5; color:var(--ink-2);
}
.servicio .escalera li svg{
  width:16px; height:16px; margin-top:3px; fill:none;
  stroke:var(--cyan); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.servicio .escalera .cierre-esc{
  margin-top:4px; padding-top:12px;
  border-top:1px dashed color-mix(in srgb, var(--cyan) 30%, transparent);
  font-size:13.5px; color:var(--muted);
}
.servicio .plazo{
  margin-top:18px; padding:12px 16px; border-radius:10px;
  background:color-mix(in srgb, var(--accent) 7%, transparent);
  border:1px solid var(--line); font-size:14.5px; color:var(--ink-2);
}
.servicio .plazo b{ color:var(--ink); }

/* ============================================================
   Proceso en detalle
   ============================================================ */
.etapa{
  display:grid; gap:24px; grid-template-columns:1fr;
  padding:40px 0; border-top:1px solid var(--line);
}
@media (min-width:880px){ .etapa{ grid-template-columns:auto 1fr; gap:44px; } }
.etapa .marca{ display:flex; align-items:center; gap:16px; }
@media (min-width:880px){ .etapa .marca{ flex-direction:column; align-items:flex-start; width:150px; } }
.etapa .bola{
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  border:2px solid var(--c); color:var(--c); flex:none;
  box-shadow:0 0 0 6px color-mix(in srgb, var(--c) 10%, transparent);
}
.etapa .bola svg{ width:25px; height:25px; fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.etapa .num{
  font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600;
  letter-spacing:.16em; color:var(--c);
}
.etapa:nth-of-type(1){ --c:var(--accent); }
.etapa:nth-of-type(2){ --c:color-mix(in oklab, var(--accent) 75%, var(--cyan)); }
.etapa:nth-of-type(3){ --c:color-mix(in oklab, var(--accent) 50%, var(--cyan)); }
.etapa:nth-of-type(4){ --c:color-mix(in oklab, var(--accent) 25%, var(--cyan)); }
.etapa:nth-of-type(5){ --c:var(--cyan); }
.etapa h2{ font-size:24px; margin-bottom:10px; }
.etapa > div > p{ color:var(--ink-2); max-width:56ch; margin-bottom:16px; }
.etapa .dos{ display:grid; gap:20px; grid-template-columns:1fr; margin-top:18px; }
@media (min-width:620px){ .etapa .dos{ grid-template-columns:1fr 1fr; } }
.etapa .caja{
  border:1px solid var(--line); border-radius:11px; padding:16px 18px;
  background:var(--card);
}
.etapa .caja h3{
  font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:9px;
}
.etapa .caja p{ font-size:14.5px; color:var(--ink-2); line-height:1.45; }

/* ============================================================
   Equipo
   ============================================================ */
.equipo{ display:grid; gap:20px; grid-template-columns:1fr; }
@media (min-width:700px){ .equipo{ grid-template-columns:1fr 1fr; } }
@media (min-width:1000px){ .equipo{ grid-template-columns:repeat(3,1fr); } }
.persona{
  border:1px solid var(--line); border-radius:var(--radius); padding:24px;
  background:var(--card); box-shadow:var(--shadow);
}
.persona .foto{
  width:72px; height:72px; border-radius:50%; margin-bottom:16px;
  background:linear-gradient(135deg, var(--accent), var(--cyan));
  display:grid; place-items:center; color:#fff;
  font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:26px;
}
.persona h3{ font-size:19px; margin-bottom:3px; }
.persona .rol{
  font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.08em;
  color:var(--cyan); margin-bottom:12px;
}
.persona p{ color:var(--muted); font-size:15px; line-height:1.5; }

/* ============================================================
   Preguntas frecuentes
   ============================================================ */
.faq{ display:grid; gap:0; }
.faq details{
  border-top:1px solid var(--line); padding:4px 0;
}
.faq details:last-child{ border-bottom:1px solid var(--line); }
.faq summary{
  cursor:pointer; list-style:none; padding:18px 40px 18px 0; position:relative;
  font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:18px;
  letter-spacing:-.015em; color:var(--ink);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:''; position:absolute; right:8px; top:50%; width:11px; height:11px;
  border-right:2px solid var(--accent); border-bottom:2px solid var(--accent);
  transform:translateY(-70%) rotate(45deg); transition:transform .2s ease;
}
.faq details[open] summary::after{ transform:translateY(-30%) rotate(-135deg); }
.faq summary:focus-visible{ outline:3px solid var(--cyan); outline-offset:3px; border-radius:6px; }
.faq .resp{ padding:0 40px 20px 0; color:var(--ink-2); font-size:16px; line-height:1.6; max-width:70ch; }
.faq .resp p + p{ margin-top:12px; }
@media (prefers-reduced-motion: reduce){ .faq summary::after{ transition:none; } }

/* ============================================================
   Formulario de contacto
   ============================================================ */
.contacto-grid{ display:grid; gap:34px; grid-template-columns:1fr; }
@media (min-width:900px){ .contacto-grid{ grid-template-columns:1.05fr .95fr; gap:56px; align-items:start; } }
.form-v2{ display:grid; gap:16px; }
.campo label{
  display:block; font-family:'IBM Plex Mono',monospace; font-size:11.5px;
  font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); margin-bottom:7px;
}
.campo input, .campo textarea{
  width:100%; padding:13px 15px; border-radius:10px; background:var(--card);
  border:1px solid var(--line); color:var(--ink); font:inherit; font-size:16px;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.campo textarea{ resize:vertical; min-height:130px; }
.campo input:focus, .campo textarea:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.campo input::placeholder, .campo textarea::placeholder{ color:var(--muted); opacity:.75; }
.form-v2 button{ justify-self:start; }
.form-v2 button[disabled]{ opacity:.6; cursor:progress; }
.aviso{
  border-radius:10px; padding:13px 16px; font-size:15px; line-height:1.45;
  display:none;
}
.aviso.ok{ display:block; background:color-mix(in srgb, var(--cyan) 14%, transparent);
  border:1px solid var(--cyan); color:var(--ink); }
.aviso.error{ display:block; background:color-mix(in srgb, #c2536b 12%, transparent);
  border:1px solid #c2536b; color:var(--ink); }

.datos{ display:grid; gap:14px; }
.dato{
  display:flex; gap:14px; align-items:flex-start; padding:18px 20px;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--card);
  text-decoration:none; box-shadow:var(--shadow);
  transition:transform .18s ease, border-color .18s ease;
}
a.dato:hover{ transform:translateY(-2px);
  border-color:color-mix(in srgb, var(--accent) 40%, var(--line)); }
.dato .ic{
  width:38px; height:38px; border-radius:10px; flex:none; display:grid; place-items:center;
  background:color-mix(in srgb, var(--accent) 12%, transparent); color:var(--accent);
}
.dato .ic svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; }
.dato h3{ font-size:16px; margin-bottom:3px; }
.dato p{ color:var(--muted); font-size:14.5px; line-height:1.4; }

/* ============================================================
   Portada: secciones con texturas distintas
   ============================================================ */

/* --- sectores como indice editorial, no como tarjetas --- */
.indice{ border-top:1px solid var(--line); }
.indice .fila{
  display:grid; grid-template-columns:1fr; gap:6px;
  padding:26px 4px; border-bottom:1px solid var(--line);
  position:relative; transition:background .2s ease, padding-left .2s ease;
}
@media (min-width:820px){
  .indice .fila{ grid-template-columns:minmax(250px,300px) 1fr 165px; gap:30px; align-items:baseline; padding:30px 4px; }
}
.indice .fila:hover{
  background:color-mix(in srgb, var(--accent) 5%, transparent);
  padding-left:14px;
}
.indice .nombre{
  font-family:'Bricolage Grotesque',sans-serif; font-weight:800;
  font-size:clamp(22px,2.4vw,29px); letter-spacing:-.025em; color:var(--ink);
  display:flex; align-items:center; gap:12px;
}
.indice .nombre svg{
  width:22px; height:22px; flex:none; fill:none; stroke:var(--accent);
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
.indice .que{ color:var(--muted); font-size:15.5px; line-height:1.5; max-width:52ch; }
.indice .quien{
  font-family:'IBM Plex Mono',monospace; font-size:12.5px; letter-spacing:.05em;
  color:var(--cyan); display:flex; align-items:center; gap:8px;
}
@media (min-width:820px){ .indice .quien{ justify-content:flex-end; } }
@media (prefers-reduced-motion: reduce){ .indice .fila{ transition:none; } }

/* --- casos con jerarquia: uno grande, dos secundarios --- */
.destacado{
  display:grid; grid-template-columns:1fr; gap:28px; align-items:center;
  margin-bottom:22px;
}
@media (min-width:900px){ .destacado{ grid-template-columns:1.35fr 1fr; gap:46px; } }
.destacado .marco{
  border-radius:13px; overflow:hidden; border:1px solid var(--line);
  box-shadow:var(--lift); background:var(--card);
}
.destacado .barra{
  display:flex; align-items:center; gap:6px; padding:10px 13px;
  background:color-mix(in srgb, var(--ink) 6%, var(--card));
  border-bottom:1px solid var(--line);
}
.destacado .barra i{ width:9px; height:9px; border-radius:50%; background:var(--line); }
.destacado .rotulo{
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--cyan);
}
.destacado h3{ font-size:clamp(24px,2.8vw,32px); margin:10px 0 12px; }
.destacado p{ color:var(--muted); font-size:16.5px; line-height:1.55; max-width:44ch; }
.destacado .ir{
  margin-top:20px; display:inline-flex; align-items:center; gap:9px;
  font-weight:600; font-size:16px; color:var(--accent); text-decoration:none;
}
.destacado .ir svg{ width:16px; height:16px; fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s ease; }
.destacado .ir:hover svg{ transform:translateX(4px); }

.menores{ display:grid; gap:18px; grid-template-columns:1fr; }
@media (min-width:760px){ .menores{ grid-template-columns:1fr 1fr; } }
.menor{
  display:grid; grid-template-columns:120px 1fr; gap:20px; align-items:center;
  padding:20px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--card); text-decoration:none; box-shadow:var(--shadow);
  transition:transform .2s ease, border-color .2s ease;
}
.menor:hover{ transform:translateY(-3px);
  border-color:color-mix(in srgb, var(--accent) 42%, var(--line)); }
.menor .mini{
  border-radius:9px; overflow:hidden; border:1px solid var(--line); background:var(--paper);
  aspect-ratio:4/3;
}
.menor .mini img{ width:100%; height:100%; display:block; object-fit:cover; object-position:top center; }
.menor .rotulo{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--cyan);
}
.menor h3{ font-size:18px; margin:6px 0 5px; }
.menor p{ color:var(--muted); font-size:14px; line-height:1.42; }
@media (max-width:400px){ .menor{ grid-template-columns:1fr; } .menor .mini{ max-width:150px; } }

/* --- banda oscura de cotizacion, para romper el medio de la pagina --- */
.banda{
  color:#fff; padding:66px 0 70px; position:relative; overflow:hidden;
  background-color:var(--band-a);
  background-image:
    radial-gradient(50% 90% at 22% 50%, rgba(35,150,190,.20) 0%, rgba(35,150,190,0) 66%),
    linear-gradient(260deg, rgba(7,14,32,.94) 0%, rgba(7,14,32,.7) 40%, rgba(7,14,32,.15) 78%, rgba(7,14,32,0) 100%),
    var(--banner);
  background-size:auto, auto, cover;
  background-position:center, center, 28% center;
  background-repeat:no-repeat;
}
.banda .eyebrow{ color:#6fd8ec; }
.banda h2{ font-size:clamp(27px,3.5vw,40px); margin-top:12px; }
.banda .intro{ margin-top:13px; color:var(--on-band); max-width:58ch; }
.banda .cajas{ display:grid; gap:20px; grid-template-columns:1fr; margin-top:38px; }
@media (min-width:820px){ .banda .cajas{ grid-template-columns:1fr 1fr; gap:24px; } }
.caja-precio{
  border:1px solid rgba(255,255,255,.16); border-radius:var(--radius);
  background:rgba(255,255,255,.045); padding:28px;
  backdrop-filter:blur(6px);
}
.caja-precio .kicker{
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.13em;
  text-transform:uppercase; color:#6fd8ec;
}
.caja-precio .cifra{
  font-family:'Bricolage Grotesque',sans-serif; font-weight:800; letter-spacing:-.03em;
  font-size:34px; margin:12px 0 6px; color:#fff;
}
.caja-precio .cifra small{ font-size:15px; font-weight:600; color:#9fbaea; letter-spacing:0; }
.caja-precio > p{ color:var(--on-band); font-size:15px; line-height:1.5; }
.caja-precio ul{ list-style:none; margin:18px 0 0; padding:0; display:grid; gap:10px; }
.caja-precio li{ display:grid; grid-template-columns:18px 1fr; gap:10px;
  font-size:14.5px; color:#cfdcf3; line-height:1.42; }
.caja-precio li svg{ width:16px; height:16px; margin-top:3px; fill:none; stroke:#6fd8ec;
  stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.banda .nota{ margin-top:26px; color:#9fbaea; font-size:15px; max-width:64ch; }
.banda .nota a{ color:#8fc4ff; }

/* ============================================================
   Paginas interiores: franjas alternadas y resumenes
   ============================================================ */

/* --- franja de ancho completo, para alternar fondo entre bloques --- */
.franja{ }
.franja.tinta{ background:color-mix(in srgb, var(--accent) 4.5%, var(--paper)); }
.franja .servicio,
.franja .etapa{ border-top:0; padding:46px 0; }
.franja:first-of-type .servicio,
.franja:first-of-type .etapa{ padding-top:8px; }

/* --- indice-resumen con plazos --- */
.resumen{ border-top:1px solid var(--line); margin-top:6px; }
.resumen a{
  display:grid; grid-template-columns:1fr; gap:4px;
  padding:15px 4px; border-bottom:1px solid var(--line);
  text-decoration:none; transition:background .18s ease, padding-left .18s ease;
}
@media (min-width:660px){
  .resumen a{ grid-template-columns:1fr auto; gap:24px; align-items:baseline; }
}
.resumen a:hover{
  background:color-mix(in srgb, var(--accent) 6%, transparent); padding-left:12px;
}
.resumen .qu{
  font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:18px;
  letter-spacing:-.015em; color:var(--ink); display:flex; align-items:center; gap:10px;
}
.resumen .qu img{ width:30px; height:30px; }
.resumen .cu{
  font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--muted);
}
.resumen .cu b{ color:var(--cyan); font-weight:600; }
@media (prefers-reduced-motion: reduce){ .resumen a{ transition:none; } }

/* --- declaracion: cita destacada sobre fondo claro --- */
.cita{
  border-left:4px solid var(--cyan); border-radius:0 var(--radius) var(--radius) 0;
  background:color-mix(in srgb, var(--accent) 6%, var(--paper));
  padding:32px 34px 34px; max-width:70ch;
}
.cita .eyebrow{ color:var(--cyan); margin-bottom:14px; display:block; }
.cita p{
  font-family:'Bricolage Grotesque',sans-serif; font-weight:700;
  font-size:clamp(20px,2.4vw,27px); line-height:1.3; letter-spacing:-.02em;
  color:var(--ink); text-wrap:balance;
}
.cita .firma{
  margin-top:18px; font-family:'IBM Plex Sans',sans-serif; font-weight:400;
  font-size:15.5px; letter-spacing:0; color:var(--muted); line-height:1.5;
}

/* --- declaracion sobre banda oscura --- */
.declara{ max-width:60ch; }
.declara p{
  font-family:'Bricolage Grotesque',sans-serif; font-weight:700;
  font-size:clamp(21px,2.6vw,30px); line-height:1.28; letter-spacing:-.02em;
  color:#fff; text-wrap:balance;
}
.declara .firma{
  margin-top:20px; font-family:'IBM Plex Mono',monospace; font-size:13px;
  letter-spacing:.06em; color:#9fbaea;
}

/* --- equipo en filas, no en tarjetas --- */
.gente{ border-top:1px solid var(--line); }
.gente .quien{
  display:grid; grid-template-columns:1fr; gap:14px;
  padding:26px 4px; border-bottom:1px solid var(--line); align-items:center;
}
@media (min-width:760px){
  .gente .quien{ grid-template-columns:72px 230px 1fr; gap:26px; }
}
.gente .cara{
  width:64px; height:64px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(135deg, var(--accent), var(--cyan)); color:#fff;
  font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:23px;
}
.gente h3{ font-size:21px; margin-bottom:4px; }
.gente .rol{
  font-family:'IBM Plex Mono',monospace; font-size:12.5px; letter-spacing:.06em;
  color:var(--cyan);
}
.gente p.bio{ color:var(--muted); font-size:15.5px; line-height:1.5; max-width:56ch; }
.resumen .paso{
  font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600;
  letter-spacing:.1em; color:var(--cyan); min-width:26px;
}
.indice .quien a{ color:inherit; text-decoration:none; border-bottom:1px solid transparent; }
.indice .quien a:hover{ border-bottom-color:currentColor; }

/* ============================================================
   Paginas de caso
   ============================================================ */

/* --- franja de datos clave, bajo la cabecera --- */
.caso-datos{
  margin-top:34px; padding-top:22px; border-top:1px solid rgba(255,255,255,.14);
  display:flex; flex-wrap:wrap; gap:20px 44px; align-items:flex-end;
}
.caso-datos .dd{ display:grid; gap:5px; }
.caso-datos dt{
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.15em;
  text-transform:uppercase; color:#6f8ec4;
}
.caso-datos dd{ margin:0; font-size:16px; font-weight:600; color:#fff; }
.caso-datos .btn{ margin-left:auto; }
@media (max-width:760px){ .caso-datos .btn{ margin-left:0; flex-basis:100%; } }

/* --- figura ancha, no encajonada --- */
.figura-ancha{ margin:0; }
.figura-ancha .marco{
  border-radius:14px; overflow:hidden; border:1px solid var(--line);
  box-shadow:var(--lift); background:var(--card);
}
.figura-ancha .barra{
  display:flex; align-items:center; gap:6px; padding:11px 14px;
  background:color-mix(in srgb, var(--ink) 6%, var(--card));
  border-bottom:1px solid var(--line);
}
.figura-ancha .barra i{ width:9px; height:9px; border-radius:50%; background:var(--line); }
.figura-ancha .barra .u{
  margin-left:10px; height:18px; flex:1; max-width:240px; border-radius:999px;
  background:var(--paper); border:1px solid var(--line);
}
.figura-ancha img{ width:100%; }
.figura-ancha figcaption{
  margin-top:14px; color:var(--muted); font-size:14.5px; max-width:70ch; line-height:1.5;
}
.figura-fonos{ display:flex; gap:22px; justify-content:center; padding:14px 0; }
.figura-fonos .fono{
  padding:8px; border-radius:30px; background:#080e1c; width:min(210px,40vw);
  border:1px solid rgba(255,255,255,.14); box-shadow:var(--lift);
}
.figura-fonos .fono img{ border-radius:23px; }

/* --- cuerpo del caso: una sola columna, ancho de lectura --- */
.caso-texto{ max-width:68ch; }
.caso-texto h2{ font-size:clamp(23px,2.6vw,29px); margin:44px 0 14px; }
.caso-texto h2:first-child{ margin-top:0; }
.caso-texto p{ color:var(--ink-2); margin-bottom:15px; font-size:17px; line-height:1.65; }
.caso-texto .lista{ list-style:none; margin:4px 0 18px; padding:0; display:grid; gap:11px; }
.caso-texto .lista li{
  display:grid; grid-template-columns:20px 1fr; gap:12px;
  font-size:16.5px; color:var(--ink-2); line-height:1.5;
}
.caso-texto .lista li svg{
  width:17px; height:17px; margin-top:5px; fill:none; stroke:var(--cyan);
  stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;
}

/* --- bloque de resultado --- */
.resultado{ background:color-mix(in srgb, var(--accent) 5%, var(--paper)); }
.resultado .cols{ display:grid; gap:28px; grid-template-columns:1fr; }
@media (min-width:860px){ .resultado .cols{ grid-template-columns:280px 1fr; gap:52px; } }
.resultado h2{ font-size:clamp(24px,2.8vw,32px); }
.resultado .intro{ color:var(--muted); margin-top:12px; font-size:15.5px; line-height:1.5; }
.resultado ul{ list-style:none; margin:0; padding:0; display:grid; gap:16px; }
.resultado li{
  display:grid; grid-template-columns:26px 1fr; gap:14px;
  padding-bottom:16px; border-bottom:1px solid var(--line);
}
.resultado li:last-child{ border-bottom:0; padding-bottom:0; }
.resultado li svg{
  width:22px; height:22px; margin-top:2px; fill:none; stroke:var(--cyan);
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}
.resultado li b{ display:block; font-family:'Bricolage Grotesque',sans-serif;
  font-weight:700; font-size:17px; color:var(--ink); margin-bottom:3px; letter-spacing:-.01em; }
.resultado li span{ color:var(--muted); font-size:15px; line-height:1.5; }

/* --- navegacion al siguiente caso --- */
.siguiente{
  display:grid; grid-template-columns:1fr; gap:20px; align-items:center;
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  background:var(--card); text-decoration:none; box-shadow:var(--shadow);
  transition:transform .2s ease, border-color .2s ease;
}
@media (min-width:700px){ .siguiente{ grid-template-columns:1fr 300px; } }
.siguiente:hover{ transform:translateY(-3px);
  border-color:color-mix(in srgb, var(--accent) 42%, var(--line)); }
.siguiente .txt{ padding:26px 28px; }
.siguiente .rot{
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.siguiente h3{ font-size:23px; margin:9px 0 7px; }
.siguiente p{ color:var(--muted); font-size:15px; line-height:1.45; max-width:44ch; }
.siguiente .ir{
  margin-top:14px; display:inline-flex; align-items:center; gap:8px;
  color:var(--accent); font-weight:600; font-size:15.5px;
}
.siguiente .ir svg{ width:15px; height:15px; fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s ease; }
.siguiente:hover .ir svg{ transform:translateX(4px); }
.siguiente .img{ height:100%; min-height:170px; overflow:hidden; background:var(--paper); }
.siguiente .img img{ width:100%; height:100%; object-fit:cover; object-position:top center; }
@media (max-width:699px){ .siguiente .img{ order:-1; min-height:150px; max-height:190px; } }
@media (prefers-reduced-motion: reduce){ .siguiente, .siguiente .ir svg{ transition:none; } }

/* --- promesas al pie del hero --- */
.hero-sectores .promesa{
  display:flex; align-items:flex-start; gap:14px;
  padding:24px 28px; color:#dbe7fb;
  border-bottom:1px solid rgba(255,255,255,.09);
}
@media (min-width:760px){
  .hero-sectores .promesa{ border-bottom:0; border-right:1px solid rgba(255,255,255,.09); }
  .hero-sectores > *:last-child{ border-right:0; }
}
.hero-sectores .ic{ flex:none; margin-top:1px; }
.hero-sectores .ic svg{
  width:20px; height:20px; fill:none; stroke:#6fd8ec; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}
.hero-sectores .txt{ display:grid; gap:3px; text-align:left; }
.hero-sectores .txt b{ font-size:15px; font-weight:600; color:#eaf1fd; line-height:1.3; }
.hero-sectores .txt small{
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.03em;
  color:#8fa9d4; line-height:1.35;
}


/* --- tarifas por escalon, en la banda de cotizacion --- */
.tarifas{ display:grid; gap:20px; grid-template-columns:1fr; margin-top:36px; }
@media (min-width:760px){ .tarifas{ grid-template-columns:1fr 1fr; } }
@media (min-width:1060px){ .tarifas{ grid-template-columns:1fr 1fr 1.15fr; gap:22px; } }

.tarifas .grupo{
  border:1px solid rgba(255,255,255,.16); border-radius:var(--radius);
  background:rgba(255,255,255,.045); padding:24px 26px 26px; backdrop-filter:blur(6px);
}
.tarifas .grupo h3{ font-size:17px; color:#fff; margin-bottom:6px; }
.tarifas .grupo ul{ list-style:none; margin:0; padding:0; }
.tarifas .grupo li{
  display:grid; gap:5px; padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.tarifas .grupo li:last-child{ border-bottom:0; padding-bottom:0; }
.tarifas .fila{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
}
.tarifas .grupo b{ font-size:14.5px; font-weight:600; color:#eaf1fd; line-height:1.3; }
.tarifas .grupo li > span{ font-size:13px; line-height:1.45; color:#8fa9d4; }
.tarifas .grupo i{
  font-family:'IBM Plex Mono',monospace; font-style:normal; font-size:13px;
  color:#6fd8ec; white-space:nowrap; padding-top:1px;
}

.tarifas .mensual{
  border-color:color-mix(in srgb, var(--cyan) 45%, transparent);
  background:rgba(45,170,210,.09);
}
.tarifas .cifra-mes{
  font-family:'Bricolage Grotesque',sans-serif; font-weight:800; letter-spacing:-.03em;
  font-size:31px; color:#fff; margin:10px 0 12px;
}
.tarifas .cifra-mes small{ font-size:14px; font-weight:600; color:#9fbaea; letter-spacing:0; }
.tarifas .expl{ font-size:14.5px; line-height:1.5; color:var(--on-band); }
.tarifas .incluye{ margin-top:16px; }
.tarifas .incluye li{
  display:grid; grid-template-columns:18px 1fr; gap:10px; align-items:start;
  padding:8px 0; border-bottom:0; font-size:14px; color:#cfdcf3; line-height:1.45;
}
.tarifas .incluye li svg{
  width:16px; height:16px; margin-top:3px; fill:none; stroke:#6fd8ec;
  stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;
}

/* --- que hace subir el precio --- */
.sube{ margin-top:34px; padding-top:26px; border-top:1px solid rgba(255,255,255,.14); }
.sube h4{
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase; color:#6f8ec4; margin-bottom:18px;
}
.sube .cols{ display:grid; gap:18px 34px; grid-template-columns:1fr; }
@media (min-width:700px){ .sube .cols{ grid-template-columns:1fr 1fr; } }
.sube p{ font-size:14.5px; line-height:1.55; color:#9fbaea; }
.sube p b{ color:#dbe7fb; font-weight:600; }

/* ============================================================
   Explorador de sectores (seccion oscura bajo el hero)
   ============================================================ */
.explora{
  color:#fff; padding:78px 0 84px; position:relative; overflow:hidden;
  background-color:var(--band-a);
  /* Fondo propio: una reticula que se desarma, el reverso del plano integro de
     la seccion de precios. Se quita el destello cian que habia arriba a la
     derecha: caia bajo el visor, que es opaco, y ademas peleaba con el tono
     frio de esta imagen.
     El velo pesa mas a la derecha porque ahi el bloque de texto no tiene fondo
     de ningun tipo: se apoya directo sobre la imagen. */
  background-image:
    linear-gradient(105deg,
      rgba(7,14,32,.30) 0%, rgba(7,14,32,.16) 40%,
      rgba(7,14,32,.42) 78%, rgba(7,14,32,.62) 100%),
    url("assets/fondo-problemas.webp");
  background-size:auto, cover;
  background-position:center, 75% center;
  background-repeat:no-repeat;
  border-top:1px solid rgba(255,255,255,.07);
}
.explora .eyebrow{ color:#6fd8ec; }
.explora .sec-head h2{ color:#fff; }
.explora .sec-head p{ color:#9fbaea; }

.exp-grid{ display:grid; gap:26px; grid-template-columns:1fr; margin-top:8px; }
@media (min-width:960px){ .exp-grid{ grid-template-columns:.9fr 1.35fr; gap:44px; align-items:start; } }

/* --- lista seleccionable --- */
.exp-lista{ display:grid; gap:10px; }
.exp-item{
  position:relative; overflow:hidden; text-align:left; cursor:pointer;
  display:grid; grid-template-columns:34px 1fr; gap:12px; align-items:start;
  padding:18px 20px 20px; border-radius:12px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.1);
  color:#dbe7fb; font:inherit;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.exp-item:hover{ background:rgba(255,255,255,.06); transform:translateX(4px); }
.exp-item.activo{
  background:rgba(45,170,210,.1);
  border-color:color-mix(in srgb, var(--cyan) 55%, transparent);
}
.exp-item:focus-visible{ outline:3px solid #6fd8ec; outline-offset:3px; }
.exp-item .n{
  font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600;
  letter-spacing:.1em; color:#6f8ec4; padding-top:3px;
}
.exp-item.activo .n{ color:#6fd8ec; }
.exp-item b{
  display:block; font-family:'Bricolage Grotesque',sans-serif; font-weight:700;
  font-size:18px; letter-spacing:-.015em; color:#eaf1fd; margin-bottom:4px;
}
.exp-item small{ font-size:13.5px; line-height:1.45; color:#8fa9d4; display:block; }

/* barra de progreso del auto-avance */
.exp-item .prog{
  position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:linear-gradient(90deg, var(--cyan), #74a6ff);
}
.exp-item.activo .prog{ animation:exp-prog 10s linear forwards; }
@keyframes exp-prog{ from{ right:100%; } to{ right:0; } }
@media (prefers-reduced-motion: reduce){
  .exp-item, .exp-item .prog, .exp-switch .carga{ transition:none; animation:none !important; }
}

/* --- panel de vista previa --- */
.exp-panel{ display:grid; gap:20px; }
.exp-shot{
  border-radius:13px; overflow:hidden; border:1px solid rgba(255,255,255,.16);
  background:#0d1526; box-shadow:0 36px 70px -30px rgba(0,0,0,.95);
}
.exp-shot .barra{
  display:flex; align-items:center; gap:6px; padding:10px 13px;
  background:#111d36; border-bottom:1px solid rgba(255,255,255,.08);
}
.exp-shot .barra i{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.22); }
.exp-shot .barra .u{
  margin-left:9px; font-family:'IBM Plex Mono',monospace; font-size:11.5px;
  letter-spacing:.04em; color:#8fa9d4;
  background:rgba(255,255,255,.06); border-radius:999px; padding:3px 12px;
}
.exp-shot .capas{ position:relative; aspect-ratio:16/9.4; overflow:hidden; }
.exp-shot .capa{
  position:absolute; inset:0; width:100%; height:100%; display:block;
  object-fit:cover; object-position:top center;
  opacity:0; transform:scale(1.055) translateY(10px); filter:blur(10px) saturate(.7);
  transition:opacity 1.1s cubic-bezier(.4,.0,.2,1),
             transform 1.35s cubic-bezier(.16,.84,.24,1),
             filter 1.1s cubic-bezier(.4,.0,.2,1);
  will-change:opacity, transform, filter;
}
/* la que entra llega desde arriba y se afina; la que sale se hunde y se difumina */
.exp-shot .capa.on{
  opacity:1; transform:scale(1) translateY(0); filter:blur(0) saturate(1);
  transition:opacity 1.1s cubic-bezier(.2,.6,.2,1),
             transform 1.35s cubic-bezier(.16,.84,.24,1),
             filter 1.1s cubic-bezier(.2,.6,.2,1);
}
.exp-shot .capa:not(.on){ transform:scale(.94) translateY(-8px); }
@media (prefers-reduced-motion: reduce){
  .exp-shot .capa{ transition:opacity .2s linear; transform:none !important; filter:none; }
}
.exp-info{ display:grid; gap:9px; justify-items:start; }
.exp-info .tag{
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:#6fd8ec;
}
.exp-info h3{ font-size:24px; color:#fff; }
.exp-info .dd{ color:#9fbaea; font-size:15.5px; line-height:1.55; max-width:56ch; }
.exp-info .meta{ display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 8px; }
.exp-info .meta span{
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.05em;
  color:#cfdcf3; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.13); border-radius:999px; padding:5px 12px;
}

/* transicion entre casos */
.exp-info{ transition:opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1); }
.exp-shot .barra .u{ transition:opacity .42s ease; }
.exp-panel.cambiando .exp-info{ opacity:0; transform:translateY(7px); transition:none; }
.exp-panel.cambiando .exp-shot .barra .u{ opacity:0; transition:none; }
@media (prefers-reduced-motion: reduce){
  .exp-info, .exp-shot, .exp-shot .barra{ transition:none; }
}

/* ============================================================
   Comparativa: matriz oscura, dimension por dimension
   ============================================================ */
.versus{
  color:#fff; padding:76px 0 84px; position:relative; overflow:hidden;
  background-color:#060c1a;
  background-image:
    radial-gradient(60% 80% at 74% 42%, rgba(45,170,210,.13) 0%, rgba(45,170,210,0) 64%),
    linear-gradient(180deg, rgba(6,12,26,.92) 0%, rgba(6,12,26,.75) 40%, rgba(6,12,26,.95) 100%),
    var(--banner);
  background-size:auto, auto, cover;
  background-position:center, center, 30% center;
  background-repeat:no-repeat;
}
.versus .eyebrow{ color:#6fd8ec; }
.versus .sec-head h2{ color:#fff; }
.versus .sec-head p{ color:#9fbaea; }

.vs-tabla{ margin-top:8px; }

.vs-cab, .vs-fila{ display:grid; grid-template-columns:1fr; gap:0; }
@media (min-width:900px){
  .vs-cab, .vs-fila{ grid-template-columns:200px 1fr 1fr; gap:0; align-items:stretch; }
}

/* encabezado */
.vs-cab{ margin-bottom:0; }
.vs-cab .lado{ padding:14px 24px; display:grid; gap:3px; align-content:end; }
.vs-cab .lado span{
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
}
.vs-cab .malo span{ color:#7f8ba6; }
.vs-cab .bueno span{ color:#6fd8ec; }
.vs-cab .bueno b{
  font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:15px;
  color:#fff; letter-spacing:-.01em;
}
@media (max-width:899px){ .vs-cab{ display:none; } }

/* filas */
.vs-fila .dim, .vs-fila .malo{ border-top:1px solid rgba(255,255,255,.09); }
.vs-fila:last-child .dim, .vs-fila:last-child .malo{ border-bottom:1px solid rgba(255,255,255,.09); }
.vs-fila .bueno{ border-top:1px solid rgba(45,170,210,.16); }
.vs-cab + .vs-fila .bueno{ border-top:0; }
.vs-fila .dim{
  padding:20px 0 6px;
  font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:16px;
  color:#eaf1fd; letter-spacing:-.01em;
}
@media (min-width:900px){
  .vs-fila .dim{ padding:24px 24px 24px 0; display:flex; align-items:center; font-size:16.5px; }
}
.vs-fila .lado{
  display:grid; grid-template-columns:20px 1fr; gap:12px; align-items:start;
  padding:10px 0 14px;
}
@media (min-width:900px){ .vs-fila .lado{ padding:24px; align-items:center; } }
.vs-fila .lado svg{
  width:18px; height:18px; margin-top:3px; fill:none; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round;
}
@media (min-width:900px){ .vs-fila .lado svg{ margin-top:0; } }
.vs-fila .lado p{ font-size:15px; line-height:1.5; }

.vs-fila .malo svg{ stroke:#c2536b; }
.vs-fila .malo p{ color:#8fa9d4; }
.vs-fila .bueno svg{ stroke:var(--cyan); }
.vs-fila .bueno p{ color:#dbe7fb; }

/* la columna del lado bueno queda elevada, como la opcion recomendada */
.vs-cab .bueno, .vs-fila .bueno{
  background:linear-gradient(180deg, rgba(45,170,210,.09), rgba(45,170,210,.05));
  border-left:1px solid rgba(45,170,210,.28);
  border-right:1px solid rgba(45,170,210,.28);
}
.vs-cab .bueno{ border-top:1px solid rgba(45,170,210,.28); border-radius:12px 12px 0 0; }
.vs-fila:last-child .bueno{
  border-bottom:1px solid rgba(45,170,210,.28); border-radius:0 0 12px 12px;
}
@media (max-width:899px){
  .vs-fila .dim, .vs-fila .malo{ border-top:1px solid rgba(255,255,255,.09); border-bottom:0; }
  .vs-cab .bueno, .vs-fila .bueno{ border-radius:10px; border:1px solid rgba(45,170,210,.28); }
  .vs-fila .bueno{ padding:14px 16px; margin-bottom:6px; }
  .vs-fila .malo{ padding:10px 16px 14px; }
}

.vs-fila{ transition:background .2s ease; }
.vs-fila:hover{ background:rgba(255,255,255,.025); }
@media (prefers-reduced-motion: reduce){ .vs-fila{ transition:none; } }

/* ============================================================
   Estimador de inversion
   ============================================================ */
.estima{
  color:#fff; padding:78px 0 86px; position:relative; overflow:hidden;
  background-color:var(--band-a);
  /* Fondo propio de la seccion. No lleva el destello cian que tenian las otras
     franjas: la imagen ya trae el suyo y superponerlos lo quemaba. El velo es
     suave y solo protege la mitad izquierda, que es donde cae el texto; las
     tarjetas y el panel son translucidos, asi que lo que haya detras se lee a
     traves de los precios. */
  background-image:
    linear-gradient(100deg,
      rgba(7,14,32,.52) 0%, rgba(7,14,32,.34) 34%,
      rgba(7,14,32,.14) 66%, rgba(7,14,32,.30) 100%),
    url("assets/fondo-cotizar.webp");
  background-size:auto, cover;
  background-position:center, 22% center;
  background-repeat:no-repeat;
}
.estima .eyebrow{ color:#6fd8ec; }
.estima .sec-head h2{ color:#fff; }
.estima .sec-head p{ color:#9fbaea; }

.est-grid{ display:grid; gap:24px; grid-template-columns:1fr; align-items:start; }
@media (min-width:960px){ .est-grid{ grid-template-columns:1.25fr .9fr; gap:34px; } }

/* --- pasos --- */
.est-paso{ border:0; margin:0 0 26px; padding:0; }
.est-paso:last-child{ margin-bottom:0; }
.est-paso legend{
  display:flex; align-items:center; gap:11px; padding:0; margin-bottom:14px;
  font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:18px;
  color:#eaf1fd; letter-spacing:-.015em;
}
.est-ops{ display:grid; gap:9px; }

/* --- opcion seleccionable --- */
.est-op{
  position:relative; cursor:pointer;
  display:grid; grid-template-columns:22px 1fr auto; gap:13px; align-items:center;
  padding:15px 18px; border-radius:11px;
  background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.1);
  transition:background .18s ease, border-color .18s ease;
}
.est-op:hover{ background:rgba(255,255,255,.07); }
.est-op input{
  appearance:none; -webkit-appearance:none; margin:0;
  width:20px; height:20px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.32); background:transparent;
  cursor:pointer; transition:border-color .18s ease, background .18s ease;
}
.est-op input[type="checkbox"]{ border-radius:6px; }
.est-op input:checked{ border-color:var(--cyan); background:var(--cyan); }
.est-op input:checked::after{
  content:''; display:block; width:100%; height:100%;
  background:no-repeat center/12px url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23071021' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.est-op input:focus-visible{ outline:3px solid #6fd8ec; outline-offset:3px; }
.est-op:has(input:checked){
  background:rgba(45,170,210,.11);
  border-color:color-mix(in srgb, var(--cyan) 55%, transparent);
}
.est-op .cuerpo b{
  display:block; font-size:15.5px; font-weight:600; color:#eaf1fd; line-height:1.3;
}
.est-op .cuerpo small{ display:block; font-size:13px; color:#8fa9d4; margin-top:3px; }
.est-op .desde{
  font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:#6fd8ec; white-space:nowrap;
}

/* --- panel de resultado --- */
@media (min-width:960px){ .est-panel{ position:sticky; top:calc(var(--nav-h) + 20px); } }
.est-caja{
  border:1px solid color-mix(in srgb, var(--cyan) 40%, transparent);
  border-radius:var(--radius); padding:26px 26px 24px;
  background:linear-gradient(180deg, rgba(45,170,210,.13), rgba(45,170,210,.05));
  backdrop-filter:blur(8px);
}
.est-caja .kicker{
  font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase; color:#6fd8ec;
}
.est-caja .rango{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:9px; margin:12px 0 8px;
  font-family:'Bricolage Grotesque',sans-serif; font-weight:800; letter-spacing:-.03em;
  font-size:clamp(23px,2.6vw,29px); color:#fff;
}
.est-caja .rango em{ font-style:normal; font-size:14px; font-weight:600; color:#8fa9d4; }
.est-caja .mes{ font-size:14px; color:#9fbaea; }
.est-caja .mes b{ color:#dbe7fb; font-weight:600; }

.est-resumen{
  list-style:none; margin:20px 0; padding:16px 0 0;
  border-top:1px solid rgba(255,255,255,.14); display:grid; gap:9px;
}
.est-resumen li{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  font-size:13.5px; color:#9fbaea; line-height:1.4;
}
.est-resumen li b{ color:#eaf1fd; font-weight:600; }
.est-resumen li i{
  font-family:'IBM Plex Mono',monospace; font-style:normal; font-size:12.5px;
  color:#6fd8ec; white-space:nowrap;
}
.est-caja .btn-wa{ width:100%; justify-content:center; margin-top:4px; }
.est-nota{ margin-top:14px; font-size:12.5px; line-height:1.5; color:#7f8ba6; }

/* ============================================================
   Comparador arrastrable: plantilla vs a medida
   ============================================================ */
/* la declaracion cierra la pagina, y era el ultimo bloque claro que quedaba
   entre secciones oscuras */
.svc-cita .cita{
  background:rgba(45,170,210,.07);
  border-left-color:#6fd8ec;
}
.svc-cita .cita .eyebrow{ color:#6fd8ec; }
.svc-cita .cita p{ color:#fff; }
.svc-cita .cita .firma{ color:#9fbaea; }

/* ============================================================
   Que resolvemos: seis problemas, uno por bloque
   ------------------------------------------------------------
   El antes y el despues van juntos en una columna, y el texto en la otra.
   Antes la captura de solucion vivia dentro de la caja de texto: eso metia un
   marco dentro de otro marco y ademas estiraba esa columna a mas del doble que
   la de la foto, dejando mas de 400px de hueco por bloque.
   El texto no lleva cajas: la jerarquia la dan la etiqueta y el filete, no un
   recuadro de color. Cuatro contenedores con borde por bloque, seis veces, era
   lo que leia como desorden.
   ============================================================ */
.pb-lista{ padding-top:6px; }
.pb-encabeza{
  max-width:62ch; margin-bottom:8px;
  color:#9fbaea; font-size:16.5px; line-height:1.62;
}

.pb{
  display:grid; gap:30px; grid-template-columns:1fr;
  padding:46px 0; border-top:1px solid rgba(159,186,234,.14);
}
@media (min-width:900px){
  /* El par de imagenes mide mas alto que el texto. Alineado arriba dejaba el
     hueco abajo; centrado, el texto queda enfrentado al medio del antes/despues
     y la diferencia lee como composicion en vez de sobra. */
  .pb{ grid-template-columns:.92fr 1.08fr; gap:52px; align-items:center; padding:56px 0; }
  .pb:nth-of-type(even) .pb-par{ order:2; }
}

/* --- el par visual --- */
.pb-par{ display:grid; gap:16px; }
.pb-foto{ margin:0; position:relative; }
.pb-foto img{
  width:100%; height:auto; display:block; border-radius:13px;
  border:1px solid rgba(159,186,234,.16);
}
.pb-foto-sol img{ border-color:rgba(111,216,236,.3); }
.pb-foto figcaption{ position:absolute; left:12px; top:12px; }
.et{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  padding:5px 10px; border-radius:999px; backdrop-filter:blur(6px);
}
.et.hoy{ background:rgba(12,18,34,.72); border:1px solid rgba(255,255,255,.22); color:#c8d3e6; }
.et.sol{ background:rgba(45,170,210,.28); border:1px solid rgba(111,216,236,.55); color:#eafaff; }

/* --- el texto, sin recuadros --- */
.pb-num{
  font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600;
  letter-spacing:.16em; color:#6fd8ec; margin-bottom:10px;
}
.pb-texto h2{ font-size:clamp(23px,2.7vw,30px); color:#fff; line-height:1.14; }
.pb-sintoma{ margin-top:13px; color:#9fbaea; font-size:16px; line-height:1.6; }
.pb-sintoma code{
  font-family:'IBM Plex Mono',monospace; font-size:.87em;
  background:rgba(255,255,255,.07); border-radius:5px; padding:1px 6px; color:#c3d5f2;
}

.pb-dato{ margin-top:20px; padding-left:15px; border-left:2px solid; }
.pb-dato h3{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; margin-bottom:6px;
}
.pb-dato p{ font-size:15px; line-height:1.58; color:#c3d5f2; }
.pb-costo{ border-left-color:rgba(211,121,140,.55); }
.pb-costo h3{ color:#e0a4b1; }
.pb-sol{ border-left-color:rgba(111,216,236,.55); }
.pb-sol h3{ color:#6fd8ec; }

.pb-precio{
  margin-top:24px; padding-top:15px;
  border-top:1px solid rgba(159,186,234,.16);
  display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 16px;
  font-size:14.5px; color:#9fbaea;
}
.pb-precio b{ color:#fff; font-size:19px; font-weight:700; }
.pb-precio em{ font-style:normal; }
.pb-precio a{
  margin-left:auto; color:#9ce8f7; text-decoration:none; font-weight:600;
  border-bottom:1px solid rgba(156,232,247,.4); padding-bottom:1px;
}
.pb-precio a:hover{ color:#fff; border-color:#6fd8ec; }

/* --- coreografia de los bloques ---
   Se apoya en el .rv y el observador que ya existen: el bloque sigue siendo el
   que se observa, pero deja de moverse el mismo y reparte el movimiento entre
   sus partes. Asi una sola entrada del observador dispara toda la secuencia.

   El orden importa y no es decorativo: primero la escena de hoy, despues el
   texto, y al final la solucion. Es el mismo recorrido que hace el argumento. */
.js-rv .pb.rv{ opacity:1; transform:none; }

.js-rv .pb .pb-foto,
.js-rv .pb .pb-texto{
  opacity:0;
  transition:opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1);
}
.js-rv .pb .pb-foto{ transform:translateY(20px); }
.js-rv .pb .pb-texto{ transform:translateY(16px); transition-delay:.14s; }

/* el despues entra al final, y con un leve acercamiento: es el momento que la
   pagina quiere subrayar */
.js-rv .pb .pb-foto-sol{ transform:translateY(20px) scale(.975); transition-delay:.34s; }

.js-rv .pb.in .pb-foto,
.js-rv .pb.in .pb-texto,
.js-rv .pb.in .pb-foto-sol{ opacity:1; transform:none; }

/* en escritorio cada columna entra desde su lado, lo que refuerza la
   alternancia en vez de repetir el mismo gesto seis veces */
@media (min-width:900px){
  .js-rv .pb .pb-foto{ transform:translate(-24px, 14px); }
  .js-rv .pb .pb-foto-sol{ transform:translate(-24px, 14px) scale(.975); }
  .js-rv .pb .pb-texto{ transform:translateX(18px); }
  .js-rv .pb:nth-of-type(even) .pb-foto{ transform:translate(24px, 14px); }
  .js-rv .pb:nth-of-type(even) .pb-foto-sol{ transform:translate(24px, 14px) scale(.975); }
  .js-rv .pb:nth-of-type(even) .pb-texto{ transform:translateX(-18px); }
}

/* la etiqueta del despues llega un poco despues que su imagen */
.js-rv .pb .pb-foto-sol figcaption{ opacity:0; transition:opacity .45s ease .62s; }
.js-rv .pb.in .pb-foto-sol figcaption{ opacity:1; }

/* los filetes del texto se dibujan de arriba abajo */
.pb-dato{ position:relative; border-left-color:transparent !important; }
.pb-dato::before{
  content:""; position:absolute; left:0; top:0; width:2px; height:100%;
  background:currentColor; transform-origin:top;
}
.js-rv .pb .pb-dato::before{ transform:scaleY(0); transition:transform .5s ease; }
.js-rv .pb.in .pb-dato::before{ transform:scaleY(1); }
.js-rv .pb.in .pb-costo::before{ transition-delay:.30s; }
.js-rv .pb.in .pb-sol::before{ transition-delay:.44s; }
.pb-costo::before{ color:rgba(211,121,140,.55); }
.pb-sol::before{ color:rgba(111,216,236,.55); }

/* al pasar el cursor, la imagen se levanta apenas */
.pb-foto img{ transition:transform .3s ease, border-color .3s ease; }
.pb-foto:hover img{ transform:translateY(-3px); }
.pb-foto-sol:hover img{ border-color:rgba(111,216,236,.55); }

@media (prefers-reduced-motion: reduce){
  .pb-foto img,
  .pb-foto:hover img{ transition:none; transform:none; }
  /* sin animacion se vuelve al filete de borde, con su color propio */
  .pb-dato::before{ display:none; }
  .pb-costo{ border-left-color:rgba(211,121,140,.55) !important; }
  .pb-sol{ border-left-color:rgba(111,216,236,.55) !important; }
}

/* --- coreografia de la comparativa y del proceso ---
   Mismo criterio que en que-resolvemos: el elemento observado deja de moverse
   el mismo y reparte el movimiento entre sus partes, con un orden que sigue el
   contenido y no el capricho. */

/* La tabla enfrentada: las filas caen en cascada, y el lado bueno entra un
   pelo despues que el malo, que es el orden en que se lee el argumento. */
.js-rv .vs-tabla .vs-fila.rv{ opacity:1; transform:none; }
.js-rv .vs-fila .dim,
.js-rv .vs-fila .lado{
  opacity:0; transform:translateY(10px);
  transition:opacity .45s ease, transform .45s ease;
}
.js-rv .vs-fila.in .dim,
.js-rv .vs-fila.in .lado{ opacity:1; transform:none; }
.js-rv .vs-fila.in .malo{ transition-delay:.08s; }
.js-rv .vs-fila.in .bueno{ transition-delay:.18s; }

/* Las cinco piezas de cristal del home entran de izquierda a derecha, que es
   el orden en que se recorre el proceso. El retraso va por posicion y no por
   el indice global del observador, que las mezclaba con el resto de la pagina. */
.js-rv .etapas .etp.rv{ opacity:1; transform:none; }
/* Las piezas ya son fotografias y no objetos compuestos por suma, asi que
   vuelven a animarse: el contexto de apilamiento que creaban transform y
   opacity ya no rompe nada. */
.js-rv .etapas .etp > *{
  opacity:0; transform:translateY(16px);
  transition:opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1);
}
.js-rv .etapas .etp.in > *{ opacity:1; transform:none; }
.js-rv .etapas .etp:nth-of-type(1).in > *:not(.pieza){ transition-delay:.10s; }
.js-rv .etapas .etp:nth-of-type(2).in > *:not(.pieza){ transition-delay:.20s; }
.js-rv .etapas .etp:nth-of-type(3).in > *:not(.pieza){ transition-delay:.30s; }
.js-rv .etapas .etp:nth-of-type(4).in > *:not(.pieza){ transition-delay:.40s; }
.js-rv .etapas .etp:nth-of-type(5).in > *:not(.pieza){ transition-delay:.50s; }

/* --- pagina de proceso: bloques alternados --- */
.js-rv .et-bloque.rv{ opacity:1; transform:none; }
.js-rv .et-bloque .et-pieza,
.js-rv .et-bloque .et-texto{
  opacity:0;
  transition:opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1);
}
.js-rv .et-bloque .et-pieza{ transform:translateY(18px) scale(.97); }
.js-rv .et-bloque .et-texto{ transform:translateY(16px); transition-delay:.14s; }
.js-rv .et-bloque.in .et-pieza,
.js-rv .et-bloque.in .et-texto{ opacity:1; transform:none; }

@media (min-width:900px){
  /* cada columna entra desde su lado; en los invertidos, al reves */
  .js-rv .et-bloque .et-pieza{ transform:translate(-20px, 12px) scale(.97); }
  .js-rv .et-bloque .et-texto{ transform:translateX(16px); }
  .js-rv .et-bloque.invertido .et-pieza{ transform:translate(20px, 12px) scale(.97); }
  .js-rv .et-bloque.invertido .et-texto{ transform:translateX(-16px); }
}

/* las dos cajas de cada etapa, una despues de la otra */
.js-rv .et-bloque .et-dos .et-caja{
  opacity:0; transform:translateY(12px);
  transition:opacity .5s ease, transform .5s ease;
}
.js-rv .et-bloque.in .et-dos .et-caja{ opacity:1; transform:none; }
.js-rv .et-bloque.in .et-dos .et-caja:nth-child(1){ transition-delay:.34s; }
.js-rv .et-bloque.in .et-dos .et-caja:nth-child(2){ transition-delay:.46s; }

@media (prefers-reduced-motion: reduce){
  .js-rv .vs-fila .dim, .js-rv .vs-fila .lado,
  .js-rv .etapas .etp > *,
  .js-rv .et-bloque .et-pieza, .js-rv .et-bloque .et-texto,
  .js-rv .et-bloque .et-dos .et-caja{
    opacity:1 !important; transform:none !important; transition:none !important;
  }
}

/* --- entrada del hero ---
   Va por animacion y no por el observador: el hero ya esta en pantalla al
   cargar, asi que no hay nada que observar. Se apoya en .js-rv, que la cascara
   pone solo cuando hay IntersectionObserver y no se pidio movimiento reducido,
   de modo que sirve como interruptor general de animacion.

   El ala de cristal queda FUERA: compone por suma contra el fondo, y tanto
   opacity como transform la aislarian en su propio contexto de apilamiento,
   devolviendole el fondo negro justo durante la entrada. */
@keyframes hero-sube{
  from{ opacity:0; transform:translateY(16px); }
  to{ opacity:1; transform:none; }
}
.js-rv .hero .eyebrow,
.js-rv .hero h1,
.js-rv .hero .lead,
.js-rv .hero .actions,
.js-rv .hero-sectores .promesa{
  opacity:0;
  animation:hero-sube .7s cubic-bezier(.22,.61,.36,1) forwards;
}
.js-rv .hero .eyebrow{ animation-delay:.10s; }
.js-rv .hero h1{ animation-delay:.20s; }
.js-rv .hero .lead{ animation-delay:.34s; }
.js-rv .hero .actions{ animation-delay:.46s; }
.js-rv .hero-sectores .promesa:nth-child(1){ animation-delay:.60s; }
.js-rv .hero-sectores .promesa:nth-child(2){ animation-delay:.68s; }
.js-rv .hero-sectores .promesa:nth-child(3){ animation-delay:.76s; }

/* --- explorador de problemas --- */
.js-rv .exp-grid.rv{ opacity:1; transform:none; }
.js-rv .exp-grid .exp-item,
.js-rv .exp-grid .exp-panel,
.js-rv .exp-grid .exp-info{
  opacity:0; transform:translateY(14px);
  transition:opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1);
}
.js-rv .exp-grid.in .exp-item,
.js-rv .exp-grid.in .exp-panel,
.js-rv .exp-grid.in .exp-info{ opacity:1; transform:none; }
.js-rv .exp-grid.in .exp-item:nth-child(1){ transition-delay:.04s; }
.js-rv .exp-grid.in .exp-item:nth-child(2){ transition-delay:.12s; }
.js-rv .exp-grid.in .exp-item:nth-child(3){ transition-delay:.20s; }
.js-rv .exp-grid.in .exp-item:nth-child(4){ transition-delay:.28s; }
.js-rv .exp-grid.in .exp-panel{ transition-delay:.18s; }
.js-rv .exp-grid.in .exp-info{ transition-delay:.34s; }

/* --- estimador --- */
.js-rv .est-grid.rv{ opacity:1; transform:none; }
.js-rv .est-grid .est-op,
.js-rv .est-grid .est-panel{
  opacity:0; transform:translateY(14px);
  transition:opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1);
}
.js-rv .est-grid.in .est-op,
.js-rv .est-grid.in .est-panel{ opacity:1; transform:none; }
.js-rv .est-grid.in .est-op:nth-child(1){ transition-delay:.06s; }
.js-rv .est-grid.in .est-op:nth-child(2){ transition-delay:.14s; }
.js-rv .est-grid.in .est-op:nth-child(3){ transition-delay:.22s; }
.js-rv .est-grid.in .est-op:nth-child(4){ transition-delay:.30s; }
.js-rv .est-grid.in .est-panel{ transition-delay:.20s; }

/* --- alineacion de incentivos: la marca se dibuja antes que su texto --- */
.js-rv .junto-item.rv{ opacity:1; transform:none; }
.js-rv .junto-item .junto-marca{
  opacity:0; transform:translateY(8px) scale(.88);
  transition:opacity .45s ease, transform .45s cubic-bezier(.22,.61,.36,1);
}
.js-rv .junto-item > b,
.js-rv .junto-item > p{
  opacity:0; transform:translateY(12px);
  transition:opacity .5s ease .12s, transform .5s ease .12s;
}
.js-rv .junto-item.in .junto-marca,
.js-rv .junto-item.in > b,
.js-rv .junto-item.in > p{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .js-rv .hero .eyebrow, .js-rv .hero h1, .js-rv .hero .lead,
  .js-rv .hero .actions, .js-rv .hero-sectores .promesa,
  .js-rv .exp-grid .exp-item, .js-rv .exp-grid .exp-panel, .js-rv .exp-grid .exp-info,
  .js-rv .est-grid .est-op, .js-rv .est-grid .est-panel,
  .js-rv .junto-item .junto-marca, .js-rv .junto-item > b, .js-rv .junto-item > p{
    opacity:1 !important; transform:none !important;
    animation:none !important; transition:none !important;
  }
}

/* ============================================================
   Secciones claras del home
   ------------------------------------------------------------
   Las siete secciones eran oscuras y todas con fondo abstracto generado. Esa
   combinacion -azul marino, resplandor cian, textura tecnologica- es la salida
   por defecto de cualquier generador de landings, y era lo que hacia leer la
   pagina como hecha con IA aunque las imagenes fueran buenas.

   Ademas el negro comunica caro, que contradice el posicionamiento: entrada
   barata para pymes. Las tres secciones que alternan a claro son justamente
   donde eso importa mas: las fotos documentales, el precio y el proceso.

   No llevan imagen de fondo a proposito. Un fondo plano es lo que tiene un
   sitio real; el abstracto con brillo es lo que delata al generado.
   ============================================================ */
.explora.claro, .estima.claro, .camino.claro, .ejemplos.claro{
  color:var(--ink);
  background-color:var(--paper);
  border-top:1px solid var(--line);
  /* Textura, no imagen. Una retícula técnica finísima dibujada en CSS: pesa
     cero, no puede leerse como render generado -que era justo el problema que
     tenían los fondos anteriores- y enlaza con el plano azul de las secciones
     oscuras sin repetirlo. Va al 2,5% de tinta: se percibe, no se mira. */
  /* La reticula CSS se reemplaza por textura de papel real escaneado. Es la
     unica familia de imagen que no reintroduce el problema: un material
     fotografiado lee como objeto fisico, al reves del render abstracto con
     resplandor que hacia parecer generada la pagina.
     Las tres estan entre 94% y 97% de brillo, asi que no tocan el contraste. */
  background-image:
    radial-gradient(120% 70% at 50% 0%,
      rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 60%);
  background-size:auto;
  background-repeat:no-repeat;
}
.explora.claro{ background-image:
  radial-gradient(120% 70% at 50% 0%, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 60%),
  url("assets/papel-problemas.webp"); background-size:auto, cover; }
.ejemplos.claro{ background-image:
  radial-gradient(120% 70% at 50% 0%, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 60%),
  url("assets/papel-ejemplos.webp"); background-size:auto, cover; }
.camino.claro{ background-image:
  radial-gradient(120% 70% at 50% 0%, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 60%),
  url("assets/papel-proceso.webp"); background-size:auto, cover; }
.explora.claro .eyebrow, .estima.claro .eyebrow, .camino.claro .eyebrow,
.ejemplos.claro .eyebrow{ color:var(--accent); }
.explora.claro .sec-head h2, .estima.claro .sec-head h2, .camino.claro .sec-head h2{ color:var(--ink); }
.explora.claro .sec-head p, .estima.claro .sec-head p, .camino.claro .sec-head p{ color:var(--muted); }

/* --- explorador de problemas --- */
.explora.claro .exp-item{
  background:var(--card); border-color:var(--line); color:var(--ink);
}
.explora.claro .exp-item:hover{ background:color-mix(in srgb, var(--accent) 4%, var(--card)); }
.explora.claro .exp-item.activo{
  background:color-mix(in srgb, var(--accent) 7%, var(--card));
  border-color:color-mix(in srgb, var(--accent) 40%, transparent);
}
.explora.claro .exp-item .n{ color:var(--accent); }
.explora.claro .exp-item .tt b{ color:var(--ink); }
.explora.claro .exp-item .tt small{ color:var(--muted); }
.explora.claro .exp-shot{
  background:var(--card); border-color:var(--line);
  box-shadow:0 30px 60px -34px rgba(10,23,48,.45);
}
.explora.claro .exp-switch{ background:color-mix(in srgb, var(--ink) 5%, var(--paper)); border-color:var(--line); }
.explora.claro .exp-switch button{ color:var(--muted); }
.explora.claro .exp-switch button.on{ background:var(--card); color:var(--ink); box-shadow:var(--shadow); }
.explora.claro .exp-info .tag{ color:var(--accent); }
.explora.claro .exp-info h3{ color:var(--ink); }
.explora.claro .exp-info .dd{ color:var(--ink-2); }
.explora.claro .exp-info .meta span{
  color:var(--ink-2); background:color-mix(in srgb, var(--accent) 6%, transparent);
  border-color:var(--line);
}
.explora.claro .exp-precio{ color:var(--muted); }
.explora.claro .exp-precio b{ color:var(--ink); }

/* --- estimador --- */
.estima.claro .est-paso legend{ color:var(--ink); }
.estima.claro .est-op{
  background:var(--card); border-color:var(--line);
}
.estima.claro .est-op:hover{ background:color-mix(in srgb, var(--accent) 4%, var(--card)); }
.estima.claro .est-op .cuerpo b{ color:var(--ink); }
.estima.claro .est-op .cuerpo small{ color:var(--muted); }
.estima.claro .est-op .desde{ color:var(--accent); }
.estima.claro .est-caja{
  background:var(--card); border-color:var(--line); backdrop-filter:none;
  box-shadow:var(--shadow);
}
.estima.claro .est-caja .kicker{ color:var(--accent); }
.estima.claro .est-caja .uf .pre{ color:var(--muted); }
.estima.claro .est-caja .uf b{ color:var(--ink); }
.estima.claro .est-caja .uf span{ color:var(--muted); }
.estima.claro .est-caja .uf-pesos{ color:var(--ink-2); }
.estima.claro .est-caja .uf-pesos b{ color:var(--ink); }
.estima.claro .est-caja .uf-peso{ color:var(--muted); }
.estima.claro .est-caja .uf-incluye{
  color:var(--muted); border-top-color:var(--line);
}
.estima.claro .est-caja .uf-incluye a{ color:var(--accent); border-bottom-color:color-mix(in srgb, var(--accent) 40%, transparent); }
.estima.claro .est-puesta{
  background:color-mix(in srgb, var(--ink) 3%, transparent); border-color:var(--line);
}
.estima.claro .est-puesta span{ color:var(--muted); }
.estima.claro .est-puesta b{ color:var(--ink); }
.estima.claro .est-resumen li{ color:var(--ink-2); border-bottom-color:var(--line); }
.estima.claro .est-resumen li b, .estima.claro .est-resumen li i{ color:var(--ink); }
.estima.claro .est-etapas{
  background:color-mix(in srgb, var(--accent) 6%, transparent);
  border-color:color-mix(in srgb, var(--accent) 26%, transparent);
  color:var(--ink-2);
}
.estima.claro .est-etapas b{ color:var(--ink); }
.estima.claro .est-nota{ color:var(--muted); }

/* --- proceso --- */
.camino.claro .etp .pieza{
  border-color:var(--line);
  box-shadow:0 22px 44px -26px rgba(10,23,48,.4);
}
.camino.claro .etp .np{
  color:var(--accent);
  background:color-mix(in srgb, var(--accent) 8%, transparent);
  border-color:color-mix(in srgb, var(--accent) 30%, transparent);
}
.camino.claro .etp h3{ color:var(--ink); }
.camino.claro .etp p{ color:var(--muted); }
.camino.claro .camino-pie{ color:var(--muted); }
.camino.claro .camino-pie a{ color:var(--accent); }

/* Dos correcciones al pasar estas secciones a claro: el interruptor activo
   quedaba cian sobre cian, y el circulo de seleccion sin marcar se dibujaba
   con un blanco translucido que sobre fondo claro desaparecia. */
.explora.claro .exp-switch button{ color:var(--muted); }
.explora.claro .exp-switch button:hover{ color:var(--ink); }
.explora.claro .exp-switch button.on{
  background:var(--accent); color:#fff;
  box-shadow:0 6px 16px -8px rgba(31,95,224,.8);
}
.explora.claro .exp-info .tag{ color:var(--accent); }

.estima.claro .est-op input{
  border-color:color-mix(in srgb, var(--ink) 26%, transparent);
  background:var(--card);
}
.estima.claro .est-op input:checked{
  border-color:var(--accent); background:var(--accent);
}

/* --- muestrario, ahora en seccion propia y clara ---
   Salio de la comparativa: alli convivian encabezado, comparador, carrusel y
   tabla en 2.345px, casi un tercio de la pagina. Cada bloque hacia un trabajo
   distinto y ninguno tenia espacio propio. */
.ejemplos.claro{ padding:72px 0 78px; }
.ejemplos.claro .reel{ margin:0; }
.ejemplos.claro .reel-cab h3{ color:var(--ink); }
.ejemplos.claro .reel-cab p{ color:var(--muted); }
.ejemplos.claro .reel-viewport{
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.ejemplos.claro .reel-marco{
  background:var(--card); border-color:var(--line);
  box-shadow:0 24px 46px -28px rgba(10,23,48,.42);
}
.ejemplos.claro .reel-barra{
  background:color-mix(in srgb, var(--ink) 4%, var(--paper));
  border-bottom-color:var(--line);
}
.ejemplos.claro .reel-barra i{ background:color-mix(in srgb, var(--ink) 20%, transparent); }
.ejemplos.claro .reel-barra .u{ color:var(--muted); }
.ejemplos.claro .reel-item figcaption b{ color:var(--ink); }
.ejemplos.claro .reel-item figcaption span{ color:var(--muted); }
.ejemplos.claro .reel-item.vivo .reel-marco{
  border-color:color-mix(in srgb, var(--accent) 34%, transparent);
}
.ejemplos.claro .et-vivo{
  color:var(--accent);
  background:color-mix(in srgb, var(--accent) 9%, transparent);
  border-color:color-mix(in srgb, var(--accent) 32%, transparent);
}
.ejemplos.claro .reel-marco.fono{
  background:color-mix(in srgb, var(--ink) 5%, var(--paper));
  border-color:var(--line);
}

/* La seccion de alineacion pasa a clara: quedaba pegada al estimador, tambien
   oscuro, y dos bloques oscuros seguidos se leen como una sola mancha. Toma la
   misma textura de papel manipulado que el explorador, que es la unica clara
   con la que no queda contigua. */
.junto.claro{
  color:var(--ink);
  background-color:var(--paper);
  background-image:
    radial-gradient(120% 70% at 50% 0%, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 60%),
    url("assets/papel-problemas.webp");
  background-size:auto, cover;
  border-top:1px solid var(--line);
}
.junto.claro .eyebrow{ color:var(--accent); }
.junto.claro .junto-cab h2{ color:var(--ink); }
.junto.claro .junto-cab > p{ color:var(--muted); }
.junto.claro .junto-item{ border-top-color:var(--line); }
.junto.claro .junto-marca{ stroke:var(--accent); }
.junto.claro .junto-item b{ color:var(--ink); }
.junto.claro .junto-item p{ color:var(--ink-2); }
.junto.claro .junto-item a{
  color:var(--accent); border-bottom-color:color-mix(in srgb, var(--accent) 40%, transparent);
}
.junto.claro .junto-item a:hover{ color:var(--ink); }
.junto.claro .junto-peldanos{ display:none; }

/* Cierre claro, solo en el home. Con ocho secciones que empiezan y terminan en
   oscuro la alternancia perfecta es imposible; pasando el cierre a claro, el
   pie -que ya es oscuro- hace de remate y la pagina alterna de punta a punta.
   El boton verde ademas resalta mas sobre claro que sobre azul oscuro. */
.close.claro{
  color:var(--ink);
  background-color:var(--paper);
  background-image:
    radial-gradient(120% 70% at 50% 0%, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 60%),
    url("assets/papel-ejemplos.webp");
  background-size:auto, cover;
  border-top:1px solid var(--line);
}
.close.claro .eyebrow{ color:var(--accent); }
.close.claro h2{ color:var(--ink); }
.close.claro p{ color:var(--muted); }
.close.claro .btn-ghost{ border-color:var(--line); color:var(--ink); }
.close.claro .btn-ghost:hover{ background:color-mix(in srgb, var(--ink) 4%, transparent); }
.close.claro .lines{ color:var(--muted); }
.close.claro .lines a{
  color:var(--ink-2); border-bottom-color:color-mix(in srgb, var(--ink) 22%, transparent);
}
.close.claro .lines a:hover{ color:var(--accent); border-color:var(--accent); }

/* --- formulario de contacto en oscuro ---
   Los campos piden mas cuidado que el resto: lo que escribe el visitante, el
   texto de ayuda, el foco y los dos avisos tienen que seguir leyendose, y el
   relleno automatico del navegador impone su propio fondo claro si no se le
   sale al paso. */
body.pg-oscura .campo label{ color:#9fbaea; }
body.pg-oscura .campo input,
body.pg-oscura .campo textarea{
  background:rgba(255,255,255,.05);
  border-color:rgba(159,186,234,.26);
  color:#fff;
}
body.pg-oscura .campo input::placeholder,
body.pg-oscura .campo textarea::placeholder{ color:#7f93b8; opacity:1; }
body.pg-oscura .campo input:focus,
body.pg-oscura .campo textarea:focus{
  border-color:#6fd8ec;
  background:rgba(255,255,255,.07);
  box-shadow:0 0 0 3px rgba(111,216,236,.22);
}
/* Chrome pinta el relleno automatico con un fondo claro fijo que ninguna regla
   de background alcanza. El truco es una sombra interior del tamaño del campo
   y forzar el color del texto por -webkit-text-fill-color. */
body.pg-oscura .campo input:-webkit-autofill,
body.pg-oscura .campo input:-webkit-autofill:hover,
body.pg-oscura .campo input:-webkit-autofill:focus,
body.pg-oscura .campo textarea:-webkit-autofill{
  -webkit-text-fill-color:#fff;
  -webkit-box-shadow:0 0 0 100px #10203f inset;
  caret-color:#fff;
  transition:background-color 9999s ease-in-out 0s;
}

/* los dos avisos del envio */
body.pg-oscura .aviso.ok{
  background:rgba(45,170,210,.16); border-color:#6fd8ec; color:#eaf3ff;
}
body.pg-oscura .aviso.error{
  background:rgba(211,121,140,.16); border-color:#d3798c; color:#ffe9ee;
}

/* --- tarjetas de contacto directo --- */
body.pg-oscura .dato{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(159,186,234,.18);
}
body.pg-oscura a.dato:hover{
  background:rgba(255,255,255,.07); border-color:rgba(111,216,236,.45);
}
body.pg-oscura .dato .ic{
  background:rgba(45,170,210,.14);
  border:1px solid rgba(111,216,236,.34);
  color:#6fd8ec;
}
body.pg-oscura .dato h3{ color:#fff; }
body.pg-oscura .dato p{ color:#9fbaea; }

/* --- preguntas frecuentes --- */
body.pg-oscura .faq details{ border-top-color:rgba(159,186,234,.16); }
body.pg-oscura .faq details:last-child{ border-bottom-color:rgba(159,186,234,.16); }
body.pg-oscura .faq summary{ color:#fff; }
body.pg-oscura .faq summary:hover{ color:#9ce8f7; }
body.pg-oscura .faq summary::after{ border-color:#6fd8ec; }
body.pg-oscura .faq .resp{ color:#9fbaea; }

/* ============================================================
   Paginas interiores en tono oscuro (nosotros, productos)
   Eran 70% y 69% de superficie clara mientras la portada es oscura entera.
   Se tiñen por clase en <body> y no seccion por seccion: page-head y close
   ya traen su propio fondo, asi que quedan excluidas.
   ============================================================ */
body.pg-oscura{ background:var(--band-a); }
/* Las claras se excluyen aqui y no con una regla aparte: este selector suma
   dos :not() y le gana por especificidad a cualquier regla posterior que
   apunte solo a la clase. */
body.pg-oscura > section:not(.page-head):not(.close):not(.prod-ficha):not(.prod-cita):not(.nos-como),
body.pg-oscura > .franja{
  color:#fff;
  background-color:var(--band-a);
  background-image:
    linear-gradient(180deg, rgba(7,14,32,.90) 0%, rgba(7,14,32,.70) 50%,
                    rgba(7,14,32,.86) 100%),
    var(--banner);
  background-size:auto, cover;
  background-position:center, 40% center;
  background-repeat:no-repeat;
}
/* la franja alterna deja de ser un tinte plano y pasa a un peldaño de luz */
body.pg-oscura > .franja.tinta{
  background-image:
    linear-gradient(180deg, rgba(7,14,32,.80) 0%, rgba(7,14,32,.58) 50%,
                    rgba(7,14,32,.80) 100%),
    var(--banner);
  border-top:1px solid rgba(159,186,234,.14);
  border-bottom:1px solid rgba(159,186,234,.14);
}

body.pg-oscura .sec-head h2{ color:#fff; }
body.pg-oscura .sec-head p{ color:#9fbaea; }
body.pg-oscura .eyebrow{ color:#6fd8ec; }

/* --- indice de filas --- */
body.pg-oscura .indice{ border-top-color:rgba(159,186,234,.16); }
body.pg-oscura .indice .fila{ border-bottom-color:rgba(159,186,234,.16); }
body.pg-oscura .indice .fila:hover{ background:rgba(255,255,255,.03); }
body.pg-oscura .indice .nombre{ color:#fff; }
body.pg-oscura .indice .nombre svg{ stroke:#6fd8ec; }
body.pg-oscura .indice .que{ color:#9fbaea; }
body.pg-oscura .indice .quien{ color:#6fd8ec; }
body.pg-oscura .indice .quien a{ color:#6fd8ec; }
body.pg-oscura .indice .quien a:hover{ border-bottom-color:#6fd8ec; }

/* --- ficha de la persona --- */
body.pg-oscura .quien.rv,
body.pg-oscura .gente .quien{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(159,186,234,.18);
  border-radius:var(--radius); padding:26px 28px;
}
body.pg-oscura .gente .cara{
  background:linear-gradient(150deg, var(--accent), var(--cyan));
  color:#fff;
}
body.pg-oscura .gente h3{ color:#fff; }
body.pg-oscura .gente .rol{ color:#6fd8ec; }
body.pg-oscura .gente .bio{ color:#9fbaea; }

/* --- tarjetas de productos --- */
body.pg-oscura .sector{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(159,186,234,.18);
}
body.pg-oscura .sector h3{ color:#fff; }
body.pg-oscura .sector p{ color:#9fbaea; }
body.pg-oscura .sector .ico{
  background:rgba(45,170,210,.14);
  border:1px solid rgba(111,216,236,.34);
}
body.pg-oscura .sector .ico svg{ stroke:#6fd8ec; }

/* --- declaracion --- */
body.pg-oscura .cita{
  background:rgba(45,170,210,.07);
  border-left-color:#6fd8ec;
}
body.pg-oscura .cita p{ color:#fff; }
body.pg-oscura .cita .firma{ color:#9fbaea; }

/* --- ficha de producto y botones --- */
body.pg-oscura .btn-ghost{ border-color:rgba(255,255,255,.3); color:#fff; }
/* las etiquetas del producto son .work .meta span, no .chip */
body.pg-oscura .work h3{ color:#fff; }
body.pg-oscura .work p{ color:#9fbaea; }
body.pg-oscura .work .tag{ color:#6fd8ec; }
body.pg-oscura .work .meta span{
  color:#c3d5f2; background:rgba(255,255,255,.06);
  border-color:rgba(159,186,234,.26);
}
body.pg-oscura .work{ border-top-color:rgba(159,186,234,.16); }

/* --- intro e indice de servicios, en oscuro ---
   El indice usaba la clase .resumen, que tambien lleva el <p> de cada
   servicio: el borde de sus filas se filtraba a los parrafos y dibujaba una
   linea suelta bajo cada titulo. Aqui va con nombre propio. */
/* Intro y declaracion en papel: la pagina es un solo bloque oscuro con seis
   servicios dentro, y abrir y cerrar en claro le da respiro sin reestructurar
   el marcado. Se cambian estas reglas y no se agrega otra encima: esta pagina
   no usa la clase pg-oscura, se oscurecio con reglas propias como esta. */
.svc-intro{
  color:var(--ink); padding-top:56px;
  background-color:var(--paper);
  background-image:
    radial-gradient(120% 70% at 50% 0%, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 60%),
    url("assets/papel-ejemplos.webp");
  background-size:auto, cover;
  background-position:center, 70% center;
  background-repeat:no-repeat;
}
.svc-intro .eyebrow{ color:#6fd8ec; }
.svc-intro .sec-head h2{ color:#fff; }
.svc-intro .sec-head p{ color:#9fbaea; }

.svc-indice{ margin-top:8px; display:grid; gap:2px; }
.svc-indice a{
  display:grid; grid-template-columns:1fr; gap:5px;
  padding:16px 16px; border-radius:10px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  text-decoration:none;
  transition:background .18s ease, border-color .18s ease, transform .18s ease;
}
@media (min-width:640px){
  .svc-indice a{ grid-template-columns:1fr auto; align-items:center; gap:18px; }
}
.svc-indice a:hover{
  background:rgba(255,255,255,.07);
  border-color:rgba(111,216,236,.45);
  transform:translateX(4px);
}
.svc-indice a.destacada{
  background:rgba(45,170,210,.1);
  border-color:rgba(111,216,236,.4);
}
.svc-indice .qu{
  font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:18px;
  letter-spacing:-.015em; color:#fff; display:flex; align-items:center; gap:11px;
}
.svc-indice .qu img{ width:30px; height:30px; flex:none; }
.svc-indice .qu em{
  font-style:normal; font-family:'IBM Plex Mono',monospace; font-size:10px;
  font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:#6fd8ec;
  border:1px solid rgba(111,216,236,.4); border-radius:5px; padding:3px 7px;
}
.svc-indice .cu{
  font-family:'IBM Plex Mono',monospace; font-size:13px; color:#8fa9d4;
}
.svc-indice .cu b{ color:#6fd8ec; font-weight:600; }
@media (prefers-reduced-motion: reduce){
  .svc-indice a{ transition:none; }
  .svc-indice a:hover{ transform:none; }
}

/* el parrafo de cada servicio no debe heredar nada del indice */
.svc-id .resumen{ border:0; margin:0; padding:0; }

/* ============================================================
   Pagina de servicios, en oscuro
   Era la pagina mas clara del sitio -82% de superficie- mientras la portada
   es oscura entera y proceso lo es al 99%. Ademas repetia seis veces la misma
   fila, que es lo que la hacia leer como plantilla. Aqui se unifica el fondo,
   se le da aire vertical y la identidad de cada servicio pasa a ancho
   completo: antes el resumen vivia aplastado en una columna de 200px.
   ============================================================ */
.servicios-lista{
  position:relative; color:#fff;
  padding:18px 0 40px;
  background-color:var(--band-a);
  background-image:
    linear-gradient(180deg, rgba(7,14,32,.86) 0%, rgba(7,14,32,.62) 40%,
                    rgba(7,14,32,.78) 100%),
    var(--banner);
  background-size:auto, cover;
  background-position:center, 30% center;
  background-repeat:no-repeat;
}

.servicios-lista .servicio{
  display:block; padding:52px 0 56px;
  border-top:1px solid rgba(159,186,234,.16);
}
.servicios-lista .servicio:first-child{ border-top:0; }

/* --- identidad del servicio, a ancho completo --- */
.svc-id{ display:grid; grid-template-columns:auto auto 1fr; gap:0 18px; align-items:start; }
.svc-num{
  font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600;
  letter-spacing:.14em; color:#5f7db4; padding-top:9px;
}
.svc-id img{ width:52px; height:52px; flex:none; }
.svc-id h2{ font-size:clamp(22px,2.6vw,30px); color:#fff; margin-bottom:8px; }
.svc-id .resumen{
  color:#9fbaea; font-size:16px; line-height:1.6; max-width:64ch;
}
.servicio.destacado-svc .svc-id img{ width:66px; height:66px; }

.svc-cuerpo{ margin-top:30px; }

/* --- listas: "incluye" manda, "no incluye" queda como contrapunto --- */
.servicios-lista .detalle{
  display:grid; gap:26px 44px; grid-template-columns:1fr;
}
@media (min-width:820px){
  .servicios-lista .detalle{ grid-template-columns:1.35fr 1fr; }
}
.servicios-lista .servicio h3{ color:#6fd8ec; }
.servicios-lista .servicio li{ color:#dbe7fb; font-size:15px; }
.servicios-lista .servicio .incluye li svg{ stroke:#6fd8ec; }
.servicios-lista .servicio .fuera li{ color:#8fa9d4; }
.servicios-lista .servicio .fuera li svg{ stroke:#d3798c; }
.servicios-lista .servicio .fuera{
  padding-left:26px; border-left:1px solid rgba(159,186,234,.14);
}
@media (max-width:819px){
  .servicios-lista .servicio .fuera{ padding-left:0; border-left:0; }
}

/* --- plazo: una linea, no otra caja --- */
.servicios-lista .servicio .plazo{
  margin-top:26px; padding:0 0 0 16px; border:0; border-radius:0;
  border-left:2px solid rgba(111,216,236,.5);
  background:transparent; color:#9fbaea; font-size:14.5px; line-height:1.55;
}
.servicios-lista .servicio .plazo b{ color:#dbe7fb; }

/* --- escalera, en oscuro --- */
.servicios-lista .escalera{
  background:rgba(45,170,210,.07);
  border-color:rgba(45,170,210,.28);
}
.servicios-lista .escalera p{ color:#c3d5f2; }
.servicios-lista .escalera li{ color:#c3d5f2; }
.servicios-lista .escalera .cierre-esc{ color:#8fa9d4; }

/* --- capturas de modulo: marco oscuro, el mismo del muestrario --- */
.servicios-lista .svc-marco{
  border-color:rgba(255,255,255,.12); background:rgba(255,255,255,.03);
  box-shadow:0 26px 50px -30px rgba(0,0,0,.9);
}
.servicios-lista .svc-barra{
  background:rgba(255,255,255,.05); border-bottom-color:rgba(255,255,255,.08);
}
.servicios-lista .svc-barra i{ background:rgba(255,255,255,.22); }
.servicios-lista .svc-barra span{ color:#7f93b8; }
.servicios-lista .svc-vista b{ color:#eaf1fd; }
.servicios-lista .svc-vista span{ color:#8fa9d4; }
.servicios-lista .svc-modulos > figcaption{
  color:#8fa9d4; border-top-color:rgba(159,186,234,.16);
}

/* --- alineacion de incentivos ---
   Va sin imagen de fondo y con mucho aire, a proposito. Las cuatro secciones
   que la rodean son densas -rejillas, tablas, tarjetas- asi que aqui el
   contraste lo da el ritmo, no el color: es la pausa antes del proceso. */
.junto{
  position:relative; overflow:hidden;
  color:#fff; padding:86px 0 92px;
  background-color:#080f22;
  /* El velo es vertical y no diagonal como en las otras dos secciones: aqui lo
     que hay que proteger es la banda baja completa, donde las cuatro columnas
     de texto se apoyan directo sobre la imagen sin fondo propio. Arriba apenas
     vela, para no apagar el resplandor al que suben los peldaños. */
  background-image:
    linear-gradient(180deg,
      rgba(8,15,34,.14) 0%, rgba(8,15,34,.30) 48%,
      rgba(8,15,34,.70) 72%, rgba(8,15,34,.84) 100%),
    url("assets/fondo-juntos.webp");
  background-size:auto, cover;
  background-position:center, 65% center;
  background-repeat:no-repeat;
  border-top:1px solid rgba(255,255,255,.06);
}
.junto .wrap{ position:relative; }
.junto-cab{ max-width:56ch; }
.junto-cab h2{
  font-size:clamp(26px, 3.5vw, 40px); margin-top:14px; line-height:1.12;
}
.junto-cab > p{
  margin-top:18px; color:#9fbaea; font-size:16.5px; line-height:1.62; max-width:52ch;
}

.junto-lista{
  margin-top:52px; display:grid; gap:32px 34px; grid-template-columns:1fr;
}
@media (min-width:680px){ .junto-lista{ grid-template-columns:1fr 1fr; } }
@media (min-width:1040px){ .junto-lista{ grid-template-columns:repeat(4, 1fr); gap:38px 30px; } }

/* Sin tarjeta ni borde: solo un filete superior. Encerrarlos en cajas los
   habria hecho parecer las mismas fichas que hay mas arriba en la pagina. */
.junto-item{ padding-top:18px; border-top:1px solid rgba(159,186,234,.22); }
.junto-marca{
  display:block; width:26px; height:26px; margin-bottom:13px;
  fill:none; stroke:var(--cyan); stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
}
.junto-item b{
  display:block; font-family:'Bricolage Grotesque',sans-serif; font-weight:700;
  font-size:17px; line-height:1.25; letter-spacing:-.015em; color:#fff;
}
.junto-item p{
  margin-top:10px; font-size:14.5px; line-height:1.6; color:#8fa9d4;
}
.junto-item a{
  color:#9ce8f7; text-decoration:none;
  border-bottom:1px solid rgba(156,232,247,.4);
}
.junto-item a:hover{ color:#fff; border-color:#6fd8ec; }

/* --- muestrario que deriva solo ---
   Va en carrusel continuo y no en pestañas a proposito: la seccion de problemas
   ya usa pestañas mas arriba, y repetir el mismo gesto dos veces en la misma
   pagina hace que la segunda no se sienta como algo nuevo. Aqui ademas conviene
   ver varios ejemplos a la vez, no uno cada vez. */
.reel{ margin:8px 0 46px; }
.reel-cab{ max-width:58ch; margin-bottom:22px; }
.reel-cab h3{ font-size:clamp(21px,2.4vw,27px); color:#fff; margin-top:10px; }
.reel-cab p{ margin-top:10px; color:#9fbaea; font-size:15.5px; line-height:1.6; }

/* Los bordes se desvanecen para que las piezas entren y salgan en vez de
   cortarse de golpe contra el limite del contenedor. */
.reel-viewport{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.reel-pista{
  display:flex; align-items:flex-start; gap:22px; width:max-content;
  animation:reel-deriva 74s linear infinite;
}
.reel-viewport:hover .reel-pista,
.reel-pista:focus-within{ animation-play-state:paused; }
@keyframes reel-deriva{
  from{ transform:translateX(0); }
  /* -50% porque el guion duplica la lista: al llegar a la mitad, la copia esta
     exactamente donde estaba el original y el salto no se ve. */
  to{ transform:translateX(-50%); }
}

.reel-item{ margin:0; width:min(74vw, 420px); flex:none; }
.reel-marco{
  border-radius:12px; overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
  box-shadow:0 26px 50px -30px rgba(0,0,0,.9);
}
.reel-barra{
  display:flex; align-items:center; gap:6px;
  padding:8px 11px; background:rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.reel-barra i{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.22); }
.reel-barra .u{
  margin-left:8px; font-family:'IBM Plex Mono',monospace; font-size:11px;
  color:#7f93b8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.reel-marco img,
.reel-marco video{ width:100%; height:auto; display:block; }
/* La app va en marco de telefono, no de navegador: una pantalla de celular
   dentro de una ventana de escritorio seria un marco equivocado. Se recorta por
   abajo para que su altura calce con la de las demas piezas; si se mostrara
   entera duplicaria el alto de la fila y dejaria a las otras flotando en un
   hueco. */
.reel-item.movil{ width:min(46vw, 200px); }
.reel-marco.fono{
  border-radius:26px; padding:7px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
}
.reel-marco.fono img{
  height:282px; width:100%;
  object-fit:cover; object-position:top;
  border-radius:20px;
}
/* Los proyectos que estan en linea se marcan: es la diferencia entre mostrar
   trabajo entregado y mostrar un ejemplo de como se veria. */
.reel-item.vivo .reel-marco{ border-color:rgba(111,216,236,.4); }
.et-vivo{
  display:inline-block; margin-left:7px; vertical-align:middle;
  font-family:'IBM Plex Mono',monospace; font-size:9.5px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:#6fd8ec;
  background:rgba(45,170,210,.16); border:1px solid rgba(111,216,236,.45);
  border-radius:999px; padding:2px 7px;
}
.reel-item figcaption{ margin-top:13px; display:grid; gap:3px; }
.reel-item figcaption b{ font-size:15px; color:#eaf1fd; }
.reel-item figcaption span{ font-size:13.5px; line-height:1.5; color:#8fa9d4; }

@media (prefers-reduced-motion: reduce){
  /* Sin deriva automatica: se recorre a mano y con el teclado. */
  .reel-pista{ animation:none; }
  .reel-viewport{ overflow-x:auto; scroll-snap-type:x mandatory; }
  .reel-item{ scroll-snap-align:start; }
}

.comparador{ margin:6px 0 46px; }
.cmp-marco{
  border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.16);
  background:#0d1526; box-shadow:0 40px 80px -32px rgba(0,0,0,.95);
}
.cmp-barra{
  display:flex; align-items:center; gap:6px; padding:11px 14px;
  background:#111d36; border-bottom:1px solid rgba(255,255,255,.08);
}
.cmp-barra i{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.22); }
.cmp-barra .u{
  margin-left:10px; font-family:'IBM Plex Mono',monospace; font-size:11.5px;
  letter-spacing:.04em; color:#8fa9d4;
  background:rgba(255,255,255,.06); border-radius:999px; padding:3px 13px;
}

.cmp-lienzo{ position:relative; line-height:0; user-select:none; touch-action:pan-y; }
.cmp-lienzo img{ width:100%; display:block; }
.cmp-encima{
  position:absolute; inset:0; overflow:hidden;
  clip-path:inset(0 calc(100% - var(--pos)) 0 0);
}
/* Solo durante la barrida de presentacion. Fuera de ella no hay transicion,
   para que arrastrar responda al instante y no se sienta con retardo. */
.cmp-lienzo.barriendo .cmp-encima{
  transition:clip-path 1.4s cubic-bezier(.22,.61,.36,1);
}
.cmp-lienzo.barriendo .cmp-linea{
  transition:left 1.4s cubic-bezier(.22,.61,.36,1);
}
.cmp-encima img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* linea y tirador */
.cmp-linea{
  position:absolute; top:0; bottom:0; left:var(--pos); width:2px;
  background:linear-gradient(180deg, rgba(111,216,236,.5), #6fd8ec 50%, rgba(111,216,236,.5));
  transform:translateX(-1px); pointer-events:none;
}
.cmp-linea .tirador{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:46px; height:46px; border-radius:50%;
  background:rgba(10,23,48,.82); border:2px solid #6fd8ec;
  box-shadow:0 8px 26px rgba(0,0,0,.6); backdrop-filter:blur(4px);
}
.cmp-linea .tirador::before,
.cmp-linea .tirador::after{
  content:''; position:absolute; top:50%; width:0; height:0;
  border-top:5px solid transparent; border-bottom:5px solid transparent;
}
.cmp-linea .tirador::before{ left:11px; transform:translateY(-50%); border-right:7px solid #6fd8ec; }
.cmp-linea .tirador::after{ right:11px; transform:translateY(-50%); border-left:7px solid #6fd8ec; }

/* etiquetas */
.cmp-et{
  position:absolute; top:16px; z-index:2;
  font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; line-height:1;
  padding:8px 14px; border-radius:999px; backdrop-filter:blur(6px);
}
.cmp-et.izq{ left:16px; background:rgba(20,24,32,.72); color:#c8ccd4; border:1px solid rgba(255,255,255,.18); }
.cmp-et.der{ right:16px; background:rgba(45,170,210,.22); color:#9ce8f7; border:1px solid rgba(111,216,236,.5); }

/* el control real: invisible pero funcional, teclado y lector incluidos */
.cmp-lienzo input[type="range"]{
  position:absolute; inset:0; width:100%; height:100%; margin:0;
  appearance:none; -webkit-appearance:none; background:transparent;
  cursor:ew-resize; z-index:3;
}
.cmp-lienzo input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; width:52px; height:100%; background:transparent; cursor:ew-resize;
}
.cmp-lienzo input[type="range"]::-moz-range-thumb{
  width:52px; height:100%; background:transparent; border:0; cursor:ew-resize;
}
.cmp-lienzo input[type="range"]:focus-visible{ outline:3px solid #6fd8ec; outline-offset:3px; }

.versus .sec-head a{
  color:#9ce8f7; text-decoration:none;
  border-bottom:1px solid rgba(156,232,247,.45);
}
.versus .sec-head a:hover{ color:#fff; border-color:#6fd8ec; }
.cmp-pie{
  margin-top:16px; font-size:14.5px; line-height:1.55; color:#8fa9d4; max-width:62ch;
}
@media (max-width:600px){
  .cmp-et{ font-size:10px; padding:6px 11px; top:12px; }
  .cmp-linea .tirador{ width:38px; height:38px; }
}

/* ============================================================
   Proceso: las cinco piezas de cristal
   ============================================================ */
.camino{
  color:#fff; padding:80px 0 88px; position:relative; overflow:hidden;
  background-color:#060c1a;
  background-image:
    radial-gradient(60% 70% at 50% 26%, rgba(45,170,210,.15) 0%, rgba(45,170,210,0) 66%),
    linear-gradient(180deg, rgba(6,12,26,.9) 0%, rgba(6,12,26,.7) 44%, rgba(6,12,26,.96) 100%),
    var(--banner);
  background-size:auto, auto, cover;
  background-position:center, center, center 40%;
  background-repeat:no-repeat;
}
.camino .eyebrow{ color:#6fd8ec; }
.camino .sec-head h2{ color:#fff; }
.camino .sec-head p{ color:#9fbaea; }

/* hilo que une las cinco piezas */
.camino-linea{ display:none; }

/* Sin z-index a proposito: crearia un contexto de apilamiento y las piezas
   dejarian de componerse por suma, reapareciendo su fondo negro. */
.etapas{
  display:grid; gap:34px 22px; grid-template-columns:1fr; margin-top:10px;
}
@media (min-width:620px){ .etapas{ grid-template-columns:1fr 1fr; gap:40px 30px; } }
@media (min-width:1000px){ .etapas{ grid-template-columns:repeat(5,1fr); gap:26px 20px; margin-top:0; } }

.etp{ text-align:center; display:grid; justify-items:center; }
@media (max-width:619px){
  .etp{ grid-template-columns:96px 1fr; text-align:left; justify-items:start;
        align-items:center; gap:4px 18px; }
  .etp .pieza{ grid-row:1 / span 3; }
}

/* la pieza: fondo negro compuesto por suma, igual que el ala del hero */
.etp .pieza{
  width:100%; height:158px; display:grid; place-items:center; margin-bottom:14px;
  border-radius:12px; overflow:hidden;
  border:1px solid rgba(159,186,234,.16);
  box-shadow:0 22px 44px -26px rgba(0,0,0,.9);
}
@media (max-width:619px){
  .etp .pieza{ width:96px; height:96px; margin-bottom:0; }
}
.etp .pieza img{
  /* Ya no compone por suma: es una fotografia, no un objeto sobre negro.
     Con eso desaparece tambien la restriccion que arrastraba esta seccion,
     donde cualquier z-index o transform devolvia el fondo negro. */
  width:100%; height:100%; max-height:none;
  object-fit:cover; object-position:center;
  border-radius:12px;
  filter:none;
  transition:transform .35s cubic-bezier(.2,.7,.3,1);
}
.etp:hover .pieza img{ transform:translateY(-6px) scale(1.05); }
@media (prefers-reduced-motion: reduce){ .etp .pieza img{ transition:none; } }

.etp .np{
  display:inline-block; margin-bottom:6px;
  font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600;
  letter-spacing:.16em; color:#6fd8ec;
  background:rgba(45,170,210,.14); border:1px solid rgba(111,216,236,.36);
  border-radius:999px; padding:3px 10px;
}
.etp h3{ font-size:18px; color:#fff; margin:6px 0 7px; letter-spacing:-.015em; }
.etp p{ font-size:14px; line-height:1.5; color:#8fa9d4; max-width:30ch; }
@media (max-width:619px){ .etp p{ max-width:44ch; } }

.camino-pie{
  margin-top:44px; text-align:center; font-size:15px; color:#8fa9d4;
}
.camino-pie a{ color:#6fd8ec; text-decoration:none; font-weight:600; margin-left:6px; }
.camino-pie a:hover{ text-decoration:underline; }

/* ============================================================
   Pagina de proceso en oscuro, con las piezas de cristal
   ============================================================ */
/* .proc-etapas se dividio en varias .proc-etapa, una por paso. El fondo
   oscuro venia de aqui, asi que la nueva clase tiene que heredarlo o las
   etapas impares quedan con texto claro sobre claro. */
.proc-oscuro, .proc-etapa, .proc-cita{
  color:#fff; position:relative; overflow:hidden;
  background-color:#060c1a;
}
.proc-oscuro{
  padding:66px 0 54px;
  background-image:
    radial-gradient(58% 80% at 70% 30%, rgba(45,170,210,.13) 0%, rgba(45,170,210,0) 64%),
    linear-gradient(180deg, rgba(6,12,26,.92) 0%, rgba(6,12,26,.78) 60%, #060c1a 100%),
    var(--banner);
  background-size:auto, auto, cover; background-position:center, center, 70% center;
  background-repeat:no-repeat;
}
.proc-oscuro .eyebrow, .proc-cita .eyebrow{ color:#6fd8ec; }
.proc-oscuro .sec-head h2{ color:#fff; }
.proc-oscuro .sec-head p{ color:#9fbaea; }

/* indice sobre fondo oscuro */
.resumen.oscuro{ border-top-color:rgba(255,255,255,.12); }
.resumen.oscuro a{ border-bottom-color:rgba(255,255,255,.12); }
.resumen.oscuro a:hover{ background:rgba(255,255,255,.05); }
.resumen.oscuro .qu{ color:#eaf1fd; }
.resumen.oscuro .cu{ color:#8fa9d4; }
.resumen.oscuro .paso{ color:#6fd8ec; }

/* etapas: pieza a un lado, texto al otro, alternando */
.proc-etapas{ padding:20px 0 76px; }
.et-bloque{
  display:grid; gap:26px; grid-template-columns:1fr; align-items:center;
  padding:44px 0; border-top:1px solid rgba(255,255,255,.09);
}
.et-bloque:first-child{ border-top:0; }
@media (min-width:920px){
  .et-bloque{ grid-template-columns:300px 1fr; gap:56px; padding:56px 0; }
  .et-bloque.invertido{ grid-template-columns:1fr 300px; }
  .et-bloque.invertido .et-pieza{ order:2; }
}
.et-pieza{ display:grid; place-items:center; }
.et-pieza img{
  width:100%; max-width:260px; aspect-ratio:1; height:auto;
  object-fit:cover; border-radius:14px;
  border:1px solid rgba(159,186,234,.18);
  box-shadow:0 26px 50px -28px rgba(0,0,0,.9);
}
@media (max-width:919px){ .et-pieza img{ max-width:150px; max-height:160px; } }

.et-num{
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:#6fd8ec;
}
.et-texto h2{ font-size:clamp(23px,2.7vw,31px); color:#fff; margin:9px 0 14px; }
.et-texto > p{ color:#9fbaea; font-size:16px; line-height:1.62; margin-bottom:14px; max-width:62ch; }
.et-dos{ display:grid; gap:16px; grid-template-columns:1fr; margin-top:22px; }
@media (min-width:640px){ .et-dos{ grid-template-columns:1fr 1fr; } }
.et-caja{
  border:1px solid rgba(255,255,255,.12); border-radius:11px; padding:17px 19px;
  background:rgba(255,255,255,.035);
}
.et-caja h3{
  font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:#6fd8ec; margin-bottom:9px;
}
.et-caja p{ font-size:14.5px; line-height:1.5; color:#cfdcf3; }

/* cita de cierre en oscuro */
.proc-cita{ padding:0 0 84px; }
.cita-oscura{
  border-left:4px solid var(--cyan); border-radius:0 var(--radius) var(--radius) 0;
  background:rgba(45,170,210,.08); padding:30px 34px 32px; max-width:70ch;
}
.cita-oscura .eyebrow{ display:block; margin-bottom:14px; }
.cita-oscura p{
  font-family:'Bricolage Grotesque',sans-serif; font-weight:700;
  font-size:clamp(20px,2.3vw,26px); line-height:1.3; letter-spacing:-.02em;
  color:#fff; text-wrap:balance;
}
.cita-oscura .firma{
  margin-top:16px; font-family:'IBM Plex Sans',sans-serif; font-weight:400;
  font-size:15.5px; letter-spacing:0; color:#9fbaea; line-height:1.55;
}
.exp-precio{
  font-family:'IBM Plex Mono',monospace; font-size:13.5px; color:#8fa9d4; margin-top:2px;
}
.exp-precio b{ color:#6fd8ec; font-weight:600; font-size:15px; }

/* --- el servicio principal, con mas peso que el resto --- */
.franja.destacada{
  background:
    radial-gradient(52% 76% at 78% 42%, rgba(45,170,210,.1) 0%, rgba(45,170,210,0) 64%),
    color-mix(in srgb, var(--accent) 7%, var(--paper));
  border-top:2px solid color-mix(in srgb, var(--cyan) 50%, transparent);
  border-bottom:1px solid var(--line);
}
.franja.destacada .servicio{ padding:56px 0 60px; }
.servicio.destacado-svc .cara img{ width:88px; height:88px; margin-top:-10px; }
.servicio.destacado-svc h2{ font-size:clamp(25px,2.9vw,33px); }
.servicio.destacado-svc .resumen{ font-size:16.5px; line-height:1.55; }
.servicio.destacado-svc li{ font-size:15.5px; }
.servicio.destacado-svc .plazo{ font-size:15.5px; }
/* --- vistas de modulo en la pagina de servicios ---
   Marco claro y no el del carrusel de la portada: alli el marco se dibuja con
   blancos translucidos sobre fondo oscuro y aqui la pagina es clara, asi que
   esas reglas se verian como un rectangulo lavado. */
.svc-modulos{ margin:28px 0 0; display:grid; gap:16px; }
/* Apiladas y no en dos columnas: la columna de contenido de este bloque mide
   unos 656px, asi que al partirla cada captura quedaba a 318px y un tablero
   denso a ese tamaño no se lee, solo se adivina. */
.svc-par{ display:grid; gap:26px; grid-template-columns:1fr; }

.svc-marco{
  border-radius:12px; overflow:hidden;
  border:1px solid var(--line); background:var(--card);
  box-shadow:var(--shadow);
}
.svc-barra{
  display:flex; align-items:center; gap:6px; padding:8px 11px;
  background:color-mix(in srgb, var(--ink) 4%, var(--paper));
  border-bottom:1px solid var(--line);
}
.svc-barra i{
  width:7px; height:7px; border-radius:50%;
  background:color-mix(in srgb, var(--ink) 20%, transparent);
}
.svc-barra span{
  margin-left:8px; font-family:'IBM Plex Mono',monospace; font-size:11px;
  color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.svc-marco img{ width:100%; height:auto; display:block; }

.svc-vista b{ display:block; margin-top:13px; font-size:15px; color:var(--ink); }
.svc-vista span{
  display:block; margin-top:3px; font-size:13.5px; line-height:1.5; color:var(--muted);
}
.svc-modulos > figcaption{
  font-size:14px; line-height:1.55; color:var(--muted);
  padding-top:14px; border-top:1px solid var(--line);
}

.svc-marca{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:12px;
  font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--cyan);
  background:color-mix(in srgb, var(--cyan) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--cyan) 34%, transparent);
  border-radius:999px; padding:5px 13px;
}
@media (min-width:880px){
  .franja.destacada .servicio{ grid-template-columns:330px 1fr; gap:54px; }
}
.resumen a.destacada{ background:color-mix(in srgb, var(--cyan) 8%, transparent); }
.resumen a.destacada .qu em{
  font-style:normal; font-family:'IBM Plex Mono',monospace; font-size:10px;
  font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--cyan);
  border:1px solid color-mix(in srgb, var(--cyan) 34%, transparent);
  border-radius:999px; padding:3px 9px; margin-left:10px; white-space:nowrap;
}
@media (max-width:659px){ .resumen a.destacada .qu em{ display:none; } }

/* --- interruptor antes / despues dentro del panel --- */
.exp-switch{
  display:inline-flex; gap:4px; padding:4px; border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.13);
  margin-bottom:4px; align-self:flex-start;
}
.exp-switch button{
  position:relative; overflow:hidden; border:0; cursor:pointer; font:inherit;
  font-size:13px; font-weight:600; padding:8px 16px; border-radius:999px;
  background:transparent; color:#8fa9d4;
  transition:background .2s ease, color .2s ease;
}
.exp-switch .et{ position:relative; z-index:1; }
/* el relleno avanza durante el tiempo que falta para que la imagen cambie */
.exp-switch .carga{
  position:absolute; inset:0; right:100%; z-index:0; border-radius:999px;
  background:linear-gradient(90deg, rgba(45,170,210,.34), rgba(111,216,236,.26));
}
.exp-switch button.on .carga{ animation:exp-carga 5s linear forwards; }
@keyframes exp-carga{ from{ right:100%; } to{ right:0; } }
.exp-switch button:hover{ color:#dbe7fb; }
.exp-switch button.on{ background:rgba(45,170,210,.2); color:#9ce8f7; }
.exp-switch button:focus-visible{ outline:3px solid #6fd8ec; outline-offset:2px; }
@media (prefers-reduced-motion: reduce){ .exp-switch button{ transition:none; } }

/* el marco se tiñe segun el estado */
.exp-panel .exp-shot{ transition:border-color .3s ease, box-shadow .3s ease; }
.exp-panel.es-despues .exp-shot{
  border-color:color-mix(in srgb, var(--cyan) 55%, transparent);
  box-shadow:0 36px 70px -30px rgba(0,0,0,.95),
             0 0 0 1px color-mix(in srgb, var(--cyan) 30%, transparent);
}
.exp-panel.es-despues .exp-info .tag{ color:#6fd8ec; }
.exp-info .tag{ transition:color .3s ease; }
@media (prefers-reduced-motion: reduce){
  .exp-panel .exp-shot, .exp-info .tag{ transition:none; }
}

/* Las imagenes del "despues" ya traen su propio marco y su fondo oscuro:
   se muestran sin la barra de navegador ni el contenedor, para que floten. */
.exp-panel.es-despues .exp-shot{
  border-color:transparent; background:transparent; box-shadow:none;
}


#capaDespues{
  object-fit:contain; object-position:center;
  /* el fondo de la imagen es casi el mismo del bloque: difuminar los bordes evita
     que se note el rectangulo y hace que la pantalla flote */
  -webkit-mask-image:radial-gradient(78% 92% at 50% 48%, #000 34%, rgba(0,0,0,.55) 68%, transparent 100%);
  mask-image:radial-gradient(78% 92% at 50% 48%, #000 34%, rgba(0,0,0,.55) 68%, transparent 100%);
}
/* el marco y la barra se desvanecen junto con el "antes" */
.exp-shot{ transition:border-color .9s ease, background .9s ease, box-shadow .9s ease; }
.exp-shot .barra{
  height:41px; overflow:hidden; padding-top:0; padding-bottom:0;
  align-items:center;
  transition:opacity .7s ease, height .9s cubic-bezier(.4,0,.2,1),
             border-color .9s ease;
}
/* La barra de navegador queda oculta en los dos estados. Tenia sentido cuando
   el 'antes' era una captura fabricada; ahora es una fotografia de la escena
   real, y una foto de un escritorio dentro de una ventana de navegador seria
   un marco equivocado. El estado ya lo nombra la etiqueta de abajo. */
.exp-shot .barra{
  opacity:0; height:0; border-color:transparent; pointer-events:none;
}

/* --- sugerencia de partir por etapas cuando el total sube --- */
.est-etapas{
  margin:16px 0 4px; padding:12px 14px; border-radius:10px;
  background:rgba(45,170,210,.12);
  border:1px solid color-mix(in srgb, var(--cyan) 32%, transparent);
  font-size:13.5px; line-height:1.5; color:#cfdcf3;
}
.est-etapas b{ color:#9ce8f7; font-weight:600; }

/* --- el mensual manda: es el negocio, no el proyecto --- */
.est-caja .uf{ display:flex; align-items:baseline; gap:9px; margin:10px 0 5px; }
.est-caja .uf .pre{
  font-style:normal; font-family:'IBM Plex Mono',monospace; font-size:12px;
  font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#8fa9d4;
}
.est-caja .uf b{
  font-family:'Bricolage Grotesque',sans-serif; font-weight:800; letter-spacing:-.03em;
  font-size:clamp(34px,4vw,44px); color:#fff; line-height:1;
}
.est-caja .uf span{ font-size:15px; font-weight:600; color:#9fbaea; }
.est-caja .uf-peso{
  font-family:'IBM Plex Mono',monospace; font-size:12px; line-height:1.5; color:#8fa9d4;
}
.est-puesta{
  margin-top:20px; padding:13px 15px; border-radius:10px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
}
.est-puesta span{ font-size:13.5px; color:#9fbaea; }
.est-puesta b{
  font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:19px;
  color:#eaf1fd; letter-spacing:-.02em; white-space:nowrap;
}
.exp-precio em{ font-style:normal; color:#8fa9d4; font-size:12.5px; }
.est-caja .uf-incluye{
  margin-top:10px; padding-top:10px;
  border-top:1px dashed color-mix(in srgb, var(--cyan) 24%, transparent);
  font-size:13px; line-height:1.5; color:#8fa9d4;
}
.est-caja .uf-incluye a{ color:#9ce8f7; text-decoration:none;
  border-bottom:1px solid rgba(156,232,247,.4); }
.est-caja .uf-incluye a:hover{ color:#fff; }

.est-caja .uf-pesos{
  font-family:'IBM Plex Mono',monospace; font-size:13px; color:#9fbaea; margin:-2px 0 8px;
}
.est-caja .uf-pesos b{ color:#dbe7fb; font-weight:600; }

/* --- proceso: cada etapa en su propia banda ---
   Eran cinco bloques identicos y oscuros dentro de una sola seccion. Al darle
   a cada etapa su banda, y alternando el tono, cada paso se lee como un
   momento distinto en vez de como una lista larga. */
.proc-etapa{ padding:0; }
.proc-etapa .et-bloque{ border-top:0; padding:56px 0; }
.proc-etapa.papel{
  color:var(--ink);
  background-color:var(--paper);
  background-image:
    radial-gradient(120% 70% at 50% 0%, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 60%),
    url("assets/papel-proceso.webp");
  background-size:auto, cover;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.proc-etapa.papel .et-num{ color:var(--accent); }
.proc-etapa.papel .et-texto h2{ color:var(--ink); }
.proc-etapa.papel .et-texto > p{ color:var(--ink-2); }
.proc-etapa.papel .et-pieza img{
  border-color:var(--line);
  box-shadow:0 26px 50px -28px rgba(10,23,48,.45);
}

/* --- las dos cajas pasan a filete ---
   Diez recuadros rellenos en la pagina, dos por etapa, pesaban mas que lo que
   dicen. La jerarquia la da la etiqueta y una linea al costado, igual que en
   que-resolvemos. */
.et-caja{
  border:0 !important; border-radius:0 !important;
  background:none !important;
  padding:0 0 0 15px !important;
  border-left:2px solid rgba(111,216,236,.5) !important;
}
.et-caja h3{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:#6fd8ec; margin-bottom:6px;
}
.et-caja p{ font-size:14.5px; line-height:1.58; color:#c3d5f2; }
.proc-etapa.papel .et-caja{ border-left-color:color-mix(in srgb, var(--accent) 55%, transparent) !important; }
.proc-etapa.papel .et-caja h3{ color:var(--accent); }
.proc-etapa.papel .et-caja p{ color:var(--ink-2); }

/* --- nosotros: alternancia ---
   Cuatro bloques oscuros seguidos en la pagina mas corta del sitio. La primera
   seccion pasa a papel, asi el recorrido con las capturas queda enmarcado entre
   dos oscuras y la ficha del fundador conserva su peso. */
body.pg-oscura > .nos-como{
  color:var(--ink);
  background-color:var(--paper);
  background-image:
    radial-gradient(120% 70% at 50% 0%, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 60%),
    url("assets/papel-problemas.webp");
  background-size:auto, cover;
  border-bottom:1px solid var(--line);
}
body.pg-oscura .nos-como .eyebrow{ color:var(--accent); }
body.pg-oscura .nos-como .sec-head h2{ color:var(--ink); }
body.pg-oscura .nos-como .sec-head p{ color:var(--muted); }
body.pg-oscura .nos-como .indice{ border-top-color:var(--line); }
body.pg-oscura .nos-como .indice .fila{ border-bottom-color:var(--line); }
body.pg-oscura .nos-como .indice .fila:hover{ background:color-mix(in srgb, var(--accent) 4%, transparent); }
body.pg-oscura .nos-como .indice .nombre{ color:var(--ink); }
body.pg-oscura .nos-como .indice .nombre svg{ stroke:var(--accent); }
body.pg-oscura .nos-como .indice .que{ color:var(--ink-2); }
body.pg-oscura .nos-como .indice .quien{ color:var(--accent); }

/* --- nosotros: la ficha de quien responde ---
   Era una tarjeta pequeña y suelta en una banda grande, siendo el bloque que
   da nombre a la pagina. Ahora ocupa el ancho, con el retrato a un lado y, en
   el otro, lo que esa persona hace de verdad en cada proyecto.
   El retrato acepta una fotografia sin cambiar el marcado: basta reemplazar el
   span de iniciales por una <img>. */
.persona{
  display:grid; gap:26px; grid-template-columns:1fr; align-items:start;
  padding:28px; border-radius:var(--radius);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(159,186,234,.18);
}
@media (min-width:760px){
  .persona{ grid-template-columns:190px 1fr; gap:36px; padding:34px 36px; }
}
.persona-retrato{ display:grid; place-items:center; }
.persona-retrato .cara{
  width:150px; height:150px; border-radius:50%;
  display:grid; place-items:center;
  font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:44px;
  letter-spacing:.02em; color:#fff;
  background:linear-gradient(150deg, var(--accent), var(--cyan));
}
.persona-retrato img{
  width:150px; height:150px; border-radius:50%; object-fit:cover;
  border:2px solid rgba(159,186,234,.3);
}
.persona-texto h3{ font-size:24px; color:#fff; }
.persona-texto .rol{
  margin-top:4px; font-family:'IBM Plex Mono',monospace; font-size:11.5px;
  font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#6fd8ec;
}
.persona-texto .bio{
  margin-top:14px; font-size:16px; line-height:1.62; color:#c3d5f2; max-width:56ch;
}
.persona-hace{
  list-style:none; margin:18px 0 0; padding:0; display:grid; gap:9px;
}
.persona-hace li{
  display:grid; grid-template-columns:18px 1fr; gap:10px;
  font-size:14.5px; line-height:1.5; color:#9fbaea;
}
.persona-hace li svg{
  width:16px; height:16px; margin-top:3px; fill:none; stroke:var(--cyan);
  stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;
}
.persona-pie{
  margin-top:18px; padding-top:15px;
  border-top:1px solid rgba(159,186,234,.16);
  font-family:'IBM Plex Mono',monospace; font-size:13.5px;
}
.persona-pie a{
  color:#9ce8f7; text-decoration:none;
  border-bottom:1px solid rgba(156,232,247,.4);
}
.persona-pie a:hover{ color:#fff; border-color:#6fd8ec; }

/* --- nosotros: el recorrido con capturas reales ---
   Era una lista de texto con tres filas, identica en estructura a la de arriba.
   Ahora muestra los tres proyectos con su captura: bySIMMED y AvenProp estan en
   linea, asi que se puede mostrar lo que se hizo en vez de describirlo. */
.obras{ display:grid; gap:20px; grid-template-columns:1fr; margin-top:6px; }
@media (min-width:720px){ .obras{ grid-template-columns:repeat(3, 1fr); gap:22px; } }
.obra{
  display:block; text-decoration:none; border-radius:var(--radius); padding:16px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(159,186,234,.16);
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.obra:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(111,216,236,.45);
  transform:translateY(-3px);
}
.obra-vista{
  border-radius:10px; overflow:hidden; height:172px;
  background:rgba(0,0,0,.25);
  border:1px solid rgba(159,186,234,.14);
}
.obra-vista img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
.obra-vista.fono{ display:grid; place-items:center; padding:10px 0; }
.obra-vista.fono img{ width:auto; height:100%; object-fit:contain; border-radius:8px; }
.obra-sector{
  margin-top:15px; font-family:'IBM Plex Mono',monospace; font-size:10.5px;
  font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#6fd8ec;
}
.obra h3{ margin-top:6px; font-size:20px; color:#fff; }
.obra-que{ margin-top:8px; font-size:14.5px; line-height:1.55; color:#9fbaea; }
.obra-ver{
  display:inline-block; margin-top:14px;
  font-size:14px; font-weight:600; color:#9ce8f7;
}
@media (prefers-reduced-motion: reduce){
  .obra, .obra:hover{ transition:none; transform:none; }
}

/* --- productos: alternancia ---
   Era la pagina mas liviana del sitio -393 palabras- y aun asi se sentia
   plana, porque sus cuatro bloques eran todos oscuros. La ficha del producto
   y la declaracion pasan a papel; las tarjetas se quedan en oscuro y ahora
   resaltan entre las dos claras. */
body.pg-oscura > .prod-ficha,
body.pg-oscura > .prod-cita{
  color:var(--ink);
  background-color:var(--paper);
  background-image:
    radial-gradient(120% 70% at 50% 0%, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 60%),
    url("assets/papel-ejemplos.webp");
  background-size:auto, cover;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
body.pg-oscura .prod-ficha .eyebrow, .prod-cita .eyebrow{ color:var(--accent); }
body.pg-oscura .prod-ficha .sec-head h2{ color:var(--ink); }
body.pg-oscura .prod-ficha .sec-head p{ color:var(--muted); }
body.pg-oscura .prod-ficha .work{ border-top-color:var(--line); }
body.pg-oscura .prod-ficha .work .tag{ color:var(--accent); }
body.pg-oscura .prod-ficha .work h3{ color:var(--ink); }
body.pg-oscura .prod-ficha .work p{ color:var(--ink-2); }
body.pg-oscura .prod-ficha .work .meta span{
  color:var(--ink-2);
  background:color-mix(in srgb, var(--accent) 7%, transparent);
  border-color:var(--line);
}
body.pg-oscura .prod-ficha .btn-ghost{ border-color:var(--line); color:var(--ink); }
body.pg-oscura .prod-ficha .btn-ghost:hover{ background:color-mix(in srgb, var(--ink) 4%, transparent); }
body.pg-oscura .prod-cita .cita{
  background:color-mix(in srgb, var(--accent) 5%, transparent);
  border-left-color:var(--accent);
}
body.pg-oscura .prod-cita .cita p{ color:var(--ink); }
body.pg-oscura .prod-cita .cita .firma{ color:var(--muted); }

/* --- servicios: tabla interactiva ---
   Los seis servicios estaban apilados uno bajo otro, cada uno con su ficha
   completa. Aunque el detalle ya iba plegado, seguian siendo seis bloques y la
   pagina medía 6.672px. Ahora la lista y el panel conviven: se elige un
   servicio y su ficha aparece al lado, sin recorrer la pagina entera.
   El contenido de los seis vive en el HTML -solo se oculta con hidden- asi que
   los buscadores lo leen igual. */
.svc-intro{
  color:#fff; padding:56px 0 72px;
  background-color:var(--band-a);
  background-image:
    linear-gradient(180deg, rgba(7,14,32,.92) 0%, rgba(7,14,32,.80) 100%),
    var(--banner);
  background-size:auto, cover;
  background-position:center, center;
}
.svc-intro .eyebrow{ color:#6fd8ec; }
.svc-intro .sec-head h2{ color:#fff; }
.svc-intro .sec-head p{ color:#9fbaea; }

.svc-tabla{ display:grid; gap:26px; grid-template-columns:1fr; align-items:start; }
@media (min-width:980px){
  .svc-tabla{ grid-template-columns:340px 1fr; gap:38px; }
  .svc-lista{ position:sticky; top:calc(var(--nav-h) + 24px); }
}

/* --- la lista, en forma de tabla --- */
.svc-lista{ display:grid; gap:0; border-top:1px solid rgba(159,186,234,.18); }
.svc-fila{
  display:grid; grid-template-columns:30px 1fr; gap:4px 12px;
  width:100%; text-align:left; cursor:pointer; font:inherit;
  padding:15px 14px; border:0; border-bottom:1px solid rgba(159,186,234,.16);
  background:transparent; color:#eaf1fd;
  transition:background .18s ease, padding-left .18s ease;
}
.svc-fila:hover{ background:rgba(255,255,255,.05); padding-left:18px; }
.svc-fila.activa{
  background:rgba(45,170,210,.12);
  box-shadow:inset 3px 0 0 #6fd8ec;
}
.svc-fila:focus-visible{ outline:3px solid #6fd8ec; outline-offset:-3px; }
.svc-n{
  font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600;
  letter-spacing:.1em; color:#7f93b8; padding-top:3px;
}
.svc-fila.activa .svc-n{ color:#6fd8ec; }
.svc-nom{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:16.5px;
  letter-spacing:-.015em; color:#fff;
}
.svc-nom img{ width:26px; height:26px; flex:none; }
.svc-nom em{
  font-style:normal; font-family:'IBM Plex Mono',monospace; font-size:9.5px;
  font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:#6fd8ec;
  border:1px solid rgba(111,216,236,.4);
  border-radius:999px; padding:2px 7px;
}
.svc-clave{
  grid-column:2; font-family:'IBM Plex Mono',monospace; font-size:12px;
  color:#8fa9d4;
}
.svc-fila.activa .svc-clave{ color:#c3d5f2; }

/* --- el panel --- */
.svc-panel{
  border-radius:var(--radius); padding:24px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(159,186,234,.18);
}
@media (min-width:980px){ .svc-panel{ padding:30px 32px; } }
.svc-captura{
  margin:0 0 22px; border-radius:11px; overflow:hidden;
  border:1px solid rgba(159,186,234,.16); background:rgba(0,0,0,.25);
}
.svc-captura img{ width:100%; height:auto; display:block; }
.svc-captura.fono{ display:grid; place-items:center; padding:16px 0; }
.svc-captura.fono img{ width:auto; max-height:300px; border-radius:10px; }
/* --- servicios: la app en los dos telefonos ---
   Un solo telefono no dice que se publica en ambos sistemas. Los marcos se
   dibujan en CSS y no con una imagen: el radio del iPhone es mayor y lleva la
   isla superior, el de Android es mas recto. Asi se distinguen sin depender de
   que el generador acierte la forma del aparato. */
.svc-captura.fonos{
  display:flex; gap:26px; justify-content:center; align-items:flex-end;
  padding:26px 0 22px; background:rgba(0,0,0,.22);
}
.svc-captura.fonos .fono{ position:relative; text-align:center; }
.svc-captura.fonos img{
  display:block; width:auto; height:290px; object-fit:cover; object-position:top;
}
.fono.iphone img{
  border-radius:26px; border:3px solid #2b3550;
  box-shadow:0 22px 40px -20px rgba(0,0,0,.9);
}
/* la isla superior, que es lo que identifica al iPhone de un vistazo */
.fono.iphone::before{
  content:""; position:absolute; top:11px; left:50%; transform:translateX(-50%);
  width:42px; height:11px; border-radius:999px; background:#2b3550; z-index:1;
}
.fono.android img{
  border-radius:14px; border:3px solid #2b3550;
  box-shadow:0 22px 40px -20px rgba(0,0,0,.9);
}
.fono-et{
  display:block; margin-top:11px;
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:#7f93b8;
}
@media (max-width:520px){
  .svc-captura.fonos{ gap:16px; }
  .svc-captura.fonos img{ height:210px; }
}

.svc-info h2{ font-size:clamp(21px,2.4vw,27px); color:#fff; }
.svc-resumen{ margin-top:10px; font-size:16px; line-height:1.6; color:#c3d5f2; }
.svc-listas{ display:grid; gap:22px; grid-template-columns:1fr; margin-top:24px; }
@media (min-width:620px){ .svc-listas{ grid-template-columns:1fr 1fr; gap:28px; } }
.svc-listas h3{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:#8fa9d4; margin-bottom:11px;
}
.svc-listas ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.svc-listas li{
  display:grid; grid-template-columns:18px 1fr; gap:10px;
  font-size:14.5px; line-height:1.5; color:#c3d5f2;
}
.svc-listas li svg{
  width:16px; height:16px; margin-top:3px; fill:none; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round; stroke:#6fd8ec;
}
.svc-listas .fuera li svg{ stroke:#d3798c; }
.svc-plazo{
  margin-top:22px; padding:13px 16px; border-radius:10px;
  background:rgba(45,170,210,.1);
  border:1px solid rgba(111,216,236,.28); font-size:14.5px; color:#c3d5f2;
}
.svc-plazo b{ color:#fff; }

.svc-cita{
  color:#fff; padding:64px 0 72px;
  background-color:#080f22;
  border-top:1px solid rgba(159,186,234,.14);
}
.svc-cita .cita{
  background:rgba(45,170,210,.08);
  border-left-color:#6fd8ec;
}
.svc-cita .cita .eyebrow{ color:#6fd8ec; }
.svc-cita .cita p{ color:#fff; }
.svc-cita .cita .firma{ color:#9fbaea; }

@media (prefers-reduced-motion: reduce){
  .svc-fila, .svc-fila:hover{ transition:none; padding-left:14px; }
}

/* Voz de cliente en el inicio: seccion propia, sobre fondo claro. */
.cita-voz{ padding:64px 0 72px; border-top:1px solid var(--line); }
.cita-voz .cita{ margin:0 auto; }

/* --- paginas legales: una columna de lectura, nada mas ---
   Sin colores de texto propios: la pagina puede ser clara u oscura y el color
   lo fija la seccion. Fijar var(--ink) aqui pintaba tinta sobre fondo oscuro. */
.legal .legal-cuerpo{ max-width:72ch; }
.legal-fecha{
  font-family:'IBM Plex Mono',monospace; font-size:14px; letter-spacing:.04em;
  opacity:.62; margin-bottom:26px;
}
.legal-intro{ font-size:19px; line-height:1.6; margin-bottom:12px; }
.legal h2{
  font-family:'Bricolage Grotesque',sans-serif; font-weight:700;
  font-size:clamp(22px,2.4vw,28px); letter-spacing:-.02em; line-height:1.2;
  margin:44px 0 14px; padding-top:22px; border-top:1px solid var(--line);
}
.legal h3{
  font-family:'Bricolage Grotesque',sans-serif; font-weight:700;
  font-size:19px; letter-spacing:-.01em; margin:26px 0 8px;
}
.legal p{ font-size:17px; line-height:1.65; margin-bottom:14px; }
.legal p b{ font-weight:600; }
.legal code{
  font-family:'IBM Plex Mono',monospace; font-size:.9em;
  background:color-mix(in srgb, var(--accent) 22%, transparent);
  padding:2px 6px; border-radius:5px;
}
.legal-lista{ margin:0 0 16px; padding-left:22px; }
.legal-lista li{ font-size:17px; line-height:1.6; margin-bottom:9px; }
.legal-tabla{
  width:100%; border-collapse:collapse; margin:8px 0 18px; font-size:15.5px;
  display:block; overflow-x:auto;
}
.legal-tabla th{
  text-align:left; font-weight:600; font-size:13px; letter-spacing:.06em;
  text-transform:uppercase; opacity:.62; padding:0 16px 10px 0;
  white-space:nowrap;
}
.legal-tabla td{
  padding:11px 16px 11px 0; border-top:1px solid var(--line);
  line-height:1.5; vertical-align:top;
}
.legal-tabla td:first-child{ font-weight:600; white-space:nowrap; }