/* ============================================================
   Kelp · Sobre Kelp. Solo lo de esta página; hero, bloques,
   diferencias, cierre y pie son del sistema (kelp.css).
   ============================================================ */

/* ---- Hero: de dónde sale Kelp. A la izquierda, 25 años de proyectos que se apilan; en el
   centro, Kelp; a la derecha, las 18 firmas con las que se ha construido y la tuya ---- */
#origen { height: 600px; }
.or-cv { --cw: 1104px; --ch: 460px; }
.or-dyn { position: absolute; inset: 0; }
.or-w { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.or-w-m { display: none; }
.or-w path { fill: none; stroke: rgb(198 238 227 / .4); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; }
.or-l { position: absolute; left: 40px; top: 20px; width: 340px; }
.or-y { display: block; font-size: 72px; font-weight: 500; line-height: 1; letter-spacing: -0.045em; color: #F2FBF8; }
.or-cap, .or-fh span { display: block; margin-top: 12px; font-size: 14px; font-weight: 500; color: rgb(198 238 227 / .72); }
.or-25 { position: absolute; left: 192px; top: 21px; display: flex; align-items: center; height: 30px; padding: 0 13px; border-radius: 99px; background: var(--foam); color: var(--deep); font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.or-pile { position: absolute; left: 40px; top: 124px; width: 340px; height: 336px; }
.or-doc { position: absolute; width: 72px; height: 92px; padding: 12px 10px; border-radius: 6px; background: #fff; rotate: var(--r); display: grid; gap: 6px; align-content: start; box-shadow: 0 18px 30px -14px rgb(0 0 0 / .55); }
.or-doc > i { display: block; height: 5px; border-radius: 3px; background: #DCE4E1; }
.or-doc > i:first-child { width: 62%; background: #5E8F85; }
.or-tx > i:nth-child(3) { width: 86%; }
.or-tx > i:nth-child(4) { width: 64%; }
.or-doc em { display: block; }
.or-ch em { display: flex; align-items: flex-end; gap: 4px; height: 44px; margin-top: 4px; border-bottom: 1px solid #DCE4E1; }
.or-ch u { flex: 1; border-radius: 2px 2px 0 0; background: #A9D8C8; }
.or-sl em { height: 34px; border-radius: 3px; background: linear-gradient(135deg, #CFE9E0, #F3E4C6); }
.or-tb em { height: 52px; border-radius: 2px; box-shadow: inset 0 0 0 1px #DCE4E1; background: repeating-linear-gradient(transparent 0 12px, #DCE4E1 12px 13px), repeating-linear-gradient(90deg, transparent 0 17px, #DCE4E1 17px 18px); }
.or-k { position: absolute; left: 492px; top: 154px; width: 120px; display: grid; justify-items: center; }
.or-slot { position: absolute; left: 20px; top: 0; width: 80px; height: 80px; border-radius: 22px; box-shadow: inset 0 0 0 1.5px rgb(198 238 227 / .3); background: rgb(255 255 255 / .03); }
.or-hub { box-shadow: 0 0 0 10px rgb(198 238 227 / .07), 0 0 70px 10px rgb(198 238 227 / .2); }
.or-kl { margin-top: 18px; text-align: center; font-size: 12.5px; font-weight: 500; color: rgb(198 238 227 / .65); white-space: nowrap; }
.or-kl b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: #F2FBF8; }
.or-f { position: absolute; left: 700px; top: 20px; width: 372px; }
.or-h { display: block; font-size: 40px; font-weight: 500; line-height: 1.05; letter-spacing: -0.035em; color: #F2FBF8; }
.or-g { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.or-t { position: relative; height: 44px; padding: 0 44px 0 14px; border-radius: 12px; display: flex; align-items: center; gap: 12px; font-size: 14.5px; font-weight: 500; background: rgb(255 255 255 / .06); box-shadow: inset 0 0 0 1px rgb(198 238 227 / .16); color: rgb(198 238 227 / .55); transition: background-color .35s, color .35s, box-shadow .35s; }
.or-t .ic { width: 18px; height: 18px; }
.or-t::after { content: ""; position: absolute; right: 13px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; scale: 0; transition: scale .3s var(--ease-out);
  background: var(--deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.8 6.2 5 8.4 9.3 3.8' fill='none' stroke='%23C6EEE3' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat; }
.or-t.on { background: #F2FBF8; color: var(--deep); box-shadow: 0 10px 22px -12px rgb(0 0 0 / .6); }
.or-t.on::after { scale: 1; }
.or-you { margin-top: 22px; height: 64px; padding: 0 16px; border-radius: 14px; display: flex; align-items: center; gap: 12px; box-shadow: inset 0 0 0 1.5px rgb(198 238 227 / .3); color: rgb(198 238 227 / .8); font-size: 15px; transition: background-color .4s, box-shadow .4s, color .4s; }
.or-you b { font-weight: 600; }
.or-av { display: flex; align-items: center; }
.or-av img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgb(198 238 227 / .3); transition: box-shadow .4s; }
.or-yk { width: 36px; height: 36px; margin-left: -8px; border-radius: 50%; box-shadow: 0 0 0 2px #fff; }
.or-yk svg { width: 22px; height: 22px; }
.or-you.on { background: #fff; color: var(--ink); box-shadow: 0 22px 44px -20px rgb(0 0 0 / .65); }
.or-you.on .or-av img { box-shadow: 0 0 0 2px #fff; }

/* ---- Qué es: el símbolo gira en tercios; en cada tercio, una de sus tres cosas ---- */
.qe-sp { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.qe-sp path { fill: none; stroke: rgb(0 74 72 / .28); stroke-width: 1.5; stroke-dasharray: 2 5; transition: stroke .3s; }
.qe-sp path.on { stroke: var(--teal); }
.qe-hub { position: absolute; left: 260px; top: 165px; }
.qe-s1 { left: 190px; top: 8px; }
.qe-s2 { left: 30px; top: 268px; }
.qe-s3 { left: 350px; top: 268px; }
.qe-sp-m { display: none; }
.qe-s { position: absolute; width: 232px; padding: 12px 14px 14px; transition: box-shadow .4s; }
.qe-s.on { box-shadow: 0 0 0 2px var(--teal), var(--shadow-card); }
.qe-h { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; }
.qe-h .ic { width: 15px; height: 15px; color: var(--teal); }
.qe-b { margin-top: 12px; min-height: 56px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.qe-src { width: 30px; height: 30px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--line-2); display: grid; place-items: center; }
.qe-src img { width: 16px; height: 16px; }
.qe-fact, .qe-crit { display: inline-flex; align-items: center; gap: 5px; margin-left: 4px; padding: 5px 10px; border-radius: 8px; background: var(--foam-2); color: var(--ok); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.qe-crit { margin-left: 0; }
.qe-crit .ic { width: 12px; height: 12px; stroke-width: 2.6; }
.qe-ln { display: flex; align-items: center; gap: 8px; width: 100%; font-size: 13px; color: var(--ink-2); }
.qe-old { position: relative; text-decoration: none; color: var(--ink-3); }
.qe-old::after { content: ""; position: absolute; left: -2px; right: -2px; top: 52%; height: 2px; border-radius: 1px; background: #C2452D; transform: scaleX(var(--k, 0)); transform-origin: left; }
.qe-new { color: #C2452D; font-size: 14px; font-weight: 700; }
.qe-me { width: 22px; height: 22px; margin-left: auto; border-radius: 50%; object-fit: cover; }
.qe-doc { width: 100%; display: grid; gap: 6px; }
.qe-doc i { display: block; height: 5px; border-radius: 3px; background: #D9E2DF; transform-origin: left; }
.qe-done { width: 100%; display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; }
.qe-done b { color: var(--ok); font-weight: 600; }
.qe-done em { display: inline-flex; align-items: center; gap: 4px; font-style: normal; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.qe-done .ic { width: 12px; height: 12px; }

/* ---- Enlaces de Qué es: producto, casos de uso y conexiones ---- */
.ab-go { display: grid; grid-template-columns: repeat(3, 1fr); }
.ab-gc { display: flex; flex-direction: column; padding: 28px clamp(24px, 2.6vw, 32px) 30px; border-right: 1px solid var(--line); transition: background-color .25s; }
.ab-gc:last-child { border-right: 0; }
.ab-gc:hover { background: #fff; }
.ab-gc .ic, .ab-k { width: 20px; height: 20px; margin-bottom: 14px; color: var(--teal); }
.ab-k { fill: currentColor; }
.ab-gc b { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.ab-gc > span { flex: 1; margin-top: 6px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.ab-gc .link { margin-top: 16px; font-size: 14px; font-style: normal; }

/* ---- Quién está detrás: el muro de empresas del equipo ---- */
.ab-wall { display: grid; grid-template-columns: repeat(7, 1fr); border-top: 1px solid var(--line); }
.ab-cell { position: relative; height: 104px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ab-cell:nth-child(7n) { border-right: 0; }
.ab-cell img { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: auto; height: auto; max-width: 108px; max-height: 28px; filter: grayscale(1) brightness(.3); opacity: .72; }

/* ---- Para quién: cuatro firmas, cada una con un trabajo suyo que Kelp monta ---- */
.pq { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.pq-c { display: flex; flex-direction: column; padding: 18px 18px 26px; border-right: 1px solid var(--line); transition: background-color .25s; }
.pq-c:last-child { border-right: 0; }
.pq-c:hover { background: #fff; }
.pq-v { height: 200px; border-radius: 14px; display: grid; place-items: center; }
.pq-c > b { margin: 20px 6px 0; font-size: 17px; font-weight: 600; letter-spacing: -0.015em; }
.pq-c > span { flex: 1; margin: 6px 6px 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.pq-c .link { margin: 14px 6px 0; font-size: 14px; font-style: normal; }
.pq-art { width: 214px; padding: 10px 12px 12px; transition: box-shadow .35s, translate .35s; }
.pq-c.on .pq-art { translate: 0 -3px; box-shadow: 0 0 0 2px var(--teal), var(--shadow-card); }
.pq-h { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; padding-bottom: 9px; border-bottom: 1px solid var(--line); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.pq-h img { width: 14px; height: 14px; }
.pq-h .kbot { width: 20px; height: 20px; margin-left: auto; border-radius: 6px; }
.pq-wk { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; font-size: 10.5px; font-weight: 600; text-align: center; color: var(--ink-3); }
.pq-days { margin-top: 5px; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(2, 30px); gap: 5px; }
.pq-days i { display: grid; place-items: center; border-radius: 6px; background: var(--foam-2); }
.pq-days img { width: 14px; height: 14px; }
.pq-days .pq-e { background: #F3F6F5; }
.pq-slide { display: grid; gap: 9px; }
.pq-tt { display: block; width: 70%; height: 7px; border-radius: 3px; background: var(--deep); }
.pq-bars { display: flex; align-items: flex-end; gap: 9px; height: 52px; padding: 0 4px; border-bottom: 1px solid var(--line-2); }
.pq-bars u { flex: 1; border-radius: 3px 3px 0 0; background: #BFE0D5; transform-origin: bottom; }
.pq-bars .pq-hi { background: var(--teal); }
.pq-tk { display: block; width: 86%; height: 5px; border-radius: 3px; background: #D9E2DF; }
.pq-mods { display: grid; gap: 8px; }
.pq-mods span { display: flex; align-items: center; gap: 8px; }
.pq-mods i { width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center; background: var(--foam-2); color: var(--ok); font-size: 10.5px; font-weight: 700; font-style: normal; }
.pq-mods u { flex: 1; height: 6px; border-radius: 3px; background: #D9E2DF; }
.pq-cls { display: grid; gap: 8px; }
.pq-cls span { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; color: var(--teal); }
.pq-cls i { font-style: normal; }
.pq-cls u { display: block; height: 5px; border-radius: 3px; background: #D9E2DF; }
.pq-cls .pq-sig { justify-self: start; padding: 3px 9px; border-radius: 99px; background: var(--ember-2); color: var(--ember-ink); }
.pq-sig .ic { width: 12px; height: 12px; }

/* ---- Cómo se empieza: una tira de semanas sobre los tres pasos. Semana 1, la demo; de la 2 a
   la 6, el piloto con los dos equipos; desde la 7, Kelp solo, un trabajo cada día ---- */
.ps { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.ps-c { padding: 4px 20px 30px; border-right: 1px solid var(--line); }
.ps-c:last-child { border-right: 0; }
.ps-n { display: block; margin: 22px 4px 0; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-3); transition: color .3s; }
.ps-c.on .ps-n { color: var(--teal); }
.ps-t { margin: 6px 4px 0; font-size: 18px; font-weight: 600; letter-spacing: -0.015em; }
.ps-c > p { max-width: 40ch; margin: 6px 4px 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.wk { grid-column: 1 / -1; margin: 20px 20px 0; padding: 26px 0 30px; border-radius: 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; }
.wk-s { position: relative; padding: 0 24px; transition: opacity .5s; }
.wk-s + .wk-s::before { content: ""; position: absolute; left: -20px; top: 0; bottom: 0; border-left: 1.5px dashed rgb(0 74 72 / .22); }
.wk-s.past { opacity: .42; }
.wk-h { display: block; padding-bottom: 11px; border-bottom: 1.5px solid rgb(0 74 72 / .2); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--teal); }
.wk-b { height: 150px; margin-top: 18px; }
.wk-b1 { display: grid; place-items: center; }
.wk-demo { width: 232px; padding: 12px 14px 14px; display: grid; gap: 12px; justify-items: start; }
.wk-dh { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; }
.wk-dh img { width: 16px; height: 16px; }
.wk-fc { display: flex; align-items: center; gap: 14px; }
.wk-kf, .wk-yf { position: relative; display: flex; }
.wk-fc img, .wk-ss img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff; }
.wk-fc img + img, .wk-ss img + .wk-kf { margin-left: -9px; }
.wk-kf .kbot { position: absolute; right: -5px; bottom: -3px; width: 16px; height: 16px; border-radius: 5px; box-shadow: 0 0 0 2px #fff; }
.wk-fc .wk-yf { padding-left: 14px; border-left: 1px solid var(--line); }
.wk-case { padding: 3px 9px; border-radius: 99px; background: var(--ember-2); color: var(--ember-ink); font-size: 11.5px; font-weight: 600; }
.wk-wks { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; align-content: center; }
.wk-w, .wk-days { justify-items: center; }
.wk-w { display: grid; gap: 10px; }
.wk-w > i, .wk-days > i { font-size: 12px; font-weight: 600; font-style: normal; font-variant-numeric: tabular-nums; color: var(--ink-3); }
.wk-ss { padding: 8px 7px; display: flex; border-radius: 12px; }
.wk-ss img { width: 28px; height: 28px; }
.wk-ss .kbot { width: 14px; height: 14px; border-radius: 4px; right: -4px; }
.wk-days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px 6px; align-content: center; }
.wk-j { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: #fff; color: var(--teal); box-shadow: 0 10px 20px -12px rgb(1 33 32 / .45); }
.wk-j .ic { width: 17px; height: 17px; }

/* ---- Seguridad: los sellos de la home (mismo dibujo y mismas animaciones al pasar) ---- */
.seals { display: grid; grid-template-columns: repeat(6, 1fr) auto; border-top: 1px solid var(--line); }
.seal { position: relative; overflow: hidden; display: grid; place-items: center; padding: 30px 8px 26px; border-right: 1px solid var(--line); }
.seal:last-child { border-right: 0; }
.seal .glint { position: absolute; inset: 0; pointer-events: none; translate: -120% 0; background: linear-gradient(105deg, transparent 35%, rgb(198 238 227 / .55) 50%, transparent 65%); }
.ct-svg { width: 84px; height: auto; aspect-ratio: 220 / 180; overflow: visible; color: var(--deep); transition: transform .35s var(--ease-out); }
.ct-svg .cl { fill: none; stroke: currentColor; stroke-width: 2.9; stroke-linecap: round; stroke-linejoin: round; }
.ct-svg .ct-t { font-family: var(--font); font-weight: 600; }
.cert-ring { transform-box: view-box; transform-origin: 110px 88px; }
.seal-link { padding: 0 28px; display: flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 600; white-space: nowrap; color: var(--ink); }
.seal-link:hover { background: #fff; color: var(--teal); }
.seal:hover .ct-svg, .seal.act .ct-svg { transform: translateY(-3px); }
@media (prefers-reduced-motion: no-preference) {
  .seal:hover .cert-ring, .seal.act .cert-ring { animation: ab-spin 14s linear infinite; }
  .seal:hover .iso-globo path:nth-of-type(n+3):nth-of-type(-n+8), .seal:hover .iso-globo path:nth-of-type(n+10):nth-of-type(-n+15),
  .seal.act .iso-globo path:nth-of-type(n+3):nth-of-type(-n+8), .seal.act .iso-globo path:nth-of-type(n+10):nth-of-type(-n+15) { animation: ab-glint 3.4s ease-in-out var(--gw, 0s) infinite; }
  .iso-globo path:nth-of-type(8), .iso-globo path:nth-of-type(15) { --gw: 0s; }
  .iso-globo path:nth-of-type(7), .iso-globo path:nth-of-type(14) { --gw: .3s; }
  .iso-globo path:nth-of-type(6), .iso-globo path:nth-of-type(13) { --gw: .6s; }
  .iso-globo path:nth-of-type(3), .iso-globo path:nth-of-type(10) { --gw: .9s; }
  .iso-globo path:nth-of-type(4), .iso-globo path:nth-of-type(11) { --gw: 1.2s; }
  .iso-globo path:nth-of-type(5), .iso-globo path:nth-of-type(12) { --gw: 1.5s; }
  .seal:hover .ens-cursor, .seal.act .ens-cursor { animation: ab-blink 1.15s steps(1) infinite; }
  @keyframes ab-spin { to { transform: rotate(360deg); } }
  @keyframes ab-glint { 0%, 100% { opacity: .3; stroke-width: 2.2; } 45% { opacity: 1; stroke-width: 4.2; } }
  @keyframes ab-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
}
.ab-diffs { margin-top: 0; }
.ab-legal { display: flex; flex-wrap: wrap; gap: 8px 28px; padding: 18px clamp(24px, 4.5vw, 56px); border-top: 1px solid var(--line); font-size: 14px; font-weight: 600; }
.ab-legal a:hover { color: var(--teal); }

/* ---- Contacto: el título con el enlace y los dos correos ---- */
.ab-ct { display: grid; grid-template-columns: 5fr 7fr; }
.ab-ct-t { padding: 44px clamp(24px, 4.5vw, 56px); border-right: 1px solid var(--line); display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 24px; }
.ab-mails { display: grid; grid-template-columns: 1fr 1fr; }
.ab-mails > div { padding: 44px clamp(24px, 3.5vw, 44px); border-right: 1px solid var(--line); }
.ab-mails > div:last-child { border-right: 0; }
.ab-mails dt { font-size: 13.5px; font-weight: 600; color: var(--ink-3); }
.ab-mails dd { margin-top: 3px; }
.ab-mails a { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; }
.ab-mails a:hover { color: var(--teal); }
.ab-mails small { display: block; max-width: 34ch; margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }

/* ---- Pantallas estrechas ---- */
@media (max-width: 1100px) {
  .pq { grid-template-columns: 1fr 1fr; }
  .pq-c:nth-child(2n) { border-right: 0; }
  .pq-c:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .seals { grid-template-columns: repeat(3, 1fr); }
  .seal { border-bottom: 1px solid var(--line); }
  .seal:nth-child(3n) { border-right: 0; }
  .seal-link { grid-column: 1 / -1; justify-content: center; padding: 20px; border-bottom: 0; }
}
@media (max-width: 980px) {
  .ab-go, .ps, .ab-ct, .wk { grid-template-columns: 1fr; }
  .ab-gc, .ps-c { border-right: 0; border-bottom: 1px solid var(--line); }
  .ab-gc:last-child, .ps-c:last-child { border-bottom: 0; }
  .wk { row-gap: 36px; }
  .wk-s + .wk-s::before { left: 24px; right: 24px; top: -19px; bottom: auto; border-left: 0; border-top: 1.5px dashed rgb(0 74 72 / .22); }
  .wk-b { height: auto; min-height: 120px; }
  .ab-ct-t { border-right: 0; border-bottom: 1px solid var(--line); }
  .ab-wall { grid-template-columns: repeat(3, 1fr); }
  .ab-cell:nth-child(7n) { border-right: 1px solid var(--line); }
  .ab-cell:nth-child(3n) { border-right: 0; }
}
@media (max-width: 700px) {
  /* Hero en vertical: Kelp arriba. Debajo, los 25 años de proyectos suben a Kelp; se retiran y en
     su sitio sale todo el ciclo, que Kelp recorre hasta llegar a tu firma */
  #origen { height: 486px; }
  .or-cv { --cw: 340px; --ch: 448px; }
  .or-w:not(.or-w-m) { display: none; }
  .or-w-m { display: block; }
  .or-k { left: 6px; top: 0; width: auto; display: flex; align-items: center; gap: 14px; }
  .or-slot { left: 0; }
  .or-kl { margin-top: 0; text-align: left; }
  .or-l { left: 6px; top: 108px; width: 170px; }
  .or-y { font-size: 46px; }
  .or-cap, .or-fh span { margin-top: 8px; font-size: 13px; }
  .or-25 { left: 112px; top: 9px; height: 26px; padding: 0 11px; font-size: 12.5px; }
  .or-pile { zoom: .46; left: 391px; top: 326px; }
  .or-f { left: 0; top: 108px; width: 340px; }
  .or-h { font-size: 26px; }
  .or-g { margin-top: 14px; gap: 5px; }
  .or-t { height: 38px; padding: 0 40px 0 12px; font-size: 14px; }
  .or-you { margin-top: 10px; height: 52px; }
  /* Qué es: el símbolo a la izquierda y las tres piezas en columna, cada una con su radio */
  #s-que { height: 384px; margin: 12px; }
  .qe-cv { --cw: 340px; --ch: 356px; }
  .qe-sp:not(.qe-sp-m) { display: none; }
  .qe-sp-m { display: block; }
  .qe-hub { left: 0; top: 138px; }
  .qe-s { width: 236px; padding: 11px 13px 12px; }
  .qe-s1, .qe-s2, .qe-s3 { left: 104px; }
  .qe-s1 { top: 0; }
  .qe-s2 { top: 122px; }
  .qe-s3 { top: 244px; }
  .qe-b { margin-top: 10px; }
  /* Para quién: las cuatro firmas en carrusel; asoma la siguiente para que se vea que hay más */
  .pq { display: flex; gap: 12px; padding: 16px 16px 22px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .pq::-webkit-scrollbar { display: none; }
  .pq-c { flex: 0 0 80%; padding: 12px 12px 22px; border: 1px solid var(--line); border-radius: 16px; scroll-snap-align: start; }
  .pq-c:last-child { border-right: 1px solid var(--line); }
  .pq-c:nth-child(n) { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
  .ab-legal a { display: inline-flex; align-items: center; min-height: 44px; }
  .wk { margin: 12px 12px 0; padding: 22px 0 26px; }
  .wk-s { padding: 0 16px; }
  .wk-s + .wk-s::before { left: 16px; right: 16px; }
  .ab-mails { grid-template-columns: 1fr; }
  .ab-mails > div { padding: 28px 24px; border-right: 0; border-bottom: 1px solid var(--line); }
  .ab-mails > div:last-child { border-bottom: 0; }
}