/* =========================================================
   BÚHO · kit.css — capa v2
   1 · Temas de sub-marca aplicados a motivos y acentos
   2 · Arquetipos de sección (para romper la monotonía)
   3 · Fotografía
   4 · Ilustración y animación SVG
   5 · Widgets interactivos
   Se carga después de tokens.css, brands.css y site.css.
   ========================================================= */

/* =========================================================
   1 · TEMAS DE SUB-MARCA
   Cada marca define su par principal/complemento y TODO el
   lenguaje óptico se recolorea desde esas dos variables.
   Uso: <main class="brand brand--fastura"> … </main>
   ========================================================= */
.brand {
  --motif-a: var(--buho-pink-600);   /* principal — el que envuelve */
  --motif-b: var(--buho-blue-600);   /* complemento — el que resalta */
  --motif-a-ink: var(--buho-pink-700);  /* legible sobre claro */
  --motif-b-ink: var(--buho-blue-600);
  --motif-a-soft: var(--buho-pink-100);
  --motif-b-soft: var(--buho-blue-100);
  --motif-a-light: var(--buho-pink-300); /* legible sobre navy */
  --motif-b-light: var(--buho-blue-300);
  --motif-on-a: #fff;                /* texto sobre relleno del principal */
  --brand-radius: 999px;             /* geometría del CTA de la marca */
  --brand-card-radius: 24px;
}

/* Fastura — teal (principal) + ámbar (complemento). Geometría recta. */
.brand--fastura {
  --motif-a: #00BFA5;  --motif-b: #FFB400;
  --motif-a-ink: #00796B;  --motif-b-ink: #946400;
  --motif-a-soft: #CFEFE9;  --motif-b-soft: #FFE8B0;
  --motif-a-light: #6FE0CF;  --motif-b-light: #FFD470;
  --motif-on-a: #001144;
  --brand-radius: 6px;
  --brand-card-radius: 10px;
}

/* Waya — lima (principal) + violeta (complemento). Geometría muy redonda. */
.brand--waya {
  --motif-a: #8FD400;  --motif-b: #6D4AFF;
  --motif-a-ink: #557A00;  --motif-b-ink: #5733E0;
  --motif-a-soft: #E9F7C4;  --motif-b-soft: #ECE4FB;
  --motif-a-light: #B6E84D;  --motif-b-light: #A78FFF;
  --motif-on-a: #001144;
  --brand-radius: 999px;
  --brand-card-radius: 28px;
}

/* --- El lenguaje óptico completo, retintado --------------- */
.brand .eb { color: var(--motif-b-ink); }
.brand .eb::before { background: linear-gradient(90deg, var(--motif-a), var(--motif-b)); }
.brand .eb--dark { color: var(--motif-a-light); }

.brand .lente { color: var(--motif-a-ink); }
.brand--fastura .lente,
.brand--waya .lente { font-weight: 400; }        /* los acentos vivos piden algo más de peso */
.brand .sec--navy .lente, .brand .lente--dark { color: var(--motif-a-light); }

.brand .gw .g { color: var(--motif-a-light); }

.brand .num-grad,
.brand .rule-firma { background-image: linear-gradient(92deg, var(--motif-a), var(--motif-b)); }
.brand .rule-firma { background: linear-gradient(90deg, var(--motif-a), var(--motif-b)); }

.brand .iris {
  background: radial-gradient(circle,
    color-mix(in srgb, var(--motif-a) 30%, transparent),
    color-mix(in srgb, var(--motif-b) 15%, transparent) 48%, transparent 74%);
}
.brand .iris--b {
  background: radial-gradient(circle,
    color-mix(in srgb, var(--motif-b) 34%, transparent),
    color-mix(in srgb, var(--motif-a) 14%, transparent) 50%, transparent 74%);
}
.brand .aurora-light::before {
  background:
    radial-gradient(120% 90% at 82% -10%, color-mix(in srgb, var(--motif-a) 11%, transparent), transparent 58%),
    radial-gradient(90% 80% at 8% 108%, color-mix(in srgb, var(--motif-b) 9%, transparent), transparent 60%);
}
.brand .aurora-dark::before {
  background:
    radial-gradient(110% 90% at 12% -10%, color-mix(in srgb, var(--motif-a) 30%, transparent), transparent 60%),
    radial-gradient(100% 80% at 92% 112%, color-mix(in srgb, var(--motif-b) 34%, transparent), transparent 62%);
}
.brand .bokeh i { background: radial-gradient(circle, color-mix(in srgb, var(--motif-a) 42%, transparent), transparent 70%); }
.brand .bokeh i:nth-child(2n) { background: radial-gradient(circle, color-mix(in srgb, var(--motif-b) 46%, transparent), transparent 70%); }

/* --- Componentes ------------------------------------------ */
.brand .fpill i,
.brand .checks li i,
.brand .plan__feats li i,
.brand .trust__it i,
.brand .fcell .kpi,
.brand .phero__meta .k,
.brand .link { color: var(--motif-b-ink); }
.brand .sec--navy .checks li i { color: var(--motif-a-light); }

.brand .fcard .ic { background: var(--motif-a); color: var(--motif-on-a); }
.brand .sec--navy .fcell .ico { background: var(--motif-a); color: var(--motif-on-a); }
.brand .sec--navy .fcell .kpi { color: var(--motif-a-light); }
.brand .steps > div::before { color: var(--motif-a-ink); }
.brand .sec--navy .steps > div::before { color: var(--motif-a-light); }

.brand .faq summary::after {
  background:
    linear-gradient(var(--motif-b-ink), var(--motif-b-ink)) center/18px 2px no-repeat,
    linear-gradient(var(--motif-b-ink), var(--motif-b-ink)) center/2px 18px no-repeat;
}
.brand .plan--hot {
  border-color: var(--motif-a);
  box-shadow: 0 0 0 1px var(--motif-a), 0 20px 44px color-mix(in srgb, var(--motif-a) 18%, transparent);
}
.brand .plan--hot:hover { box-shadow: 0 0 0 1px var(--motif-a), 0 28px 58px color-mix(in srgb, var(--motif-a) 26%, transparent); }
.brand .plan__flag { background: var(--motif-a); color: var(--motif-on-a); }
.brand .plan, .brand .fcell, .brand .quote, .brand .faq details { border-radius: var(--brand-card-radius); }
.brand .btn-pink { background: var(--motif-a); color: var(--motif-on-a); border-radius: var(--brand-radius); }
.brand .btn-pink:hover {
  color: var(--motif-on-a);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--motif-a) 22%, transparent),
              0 16px 36px color-mix(in srgb, var(--motif-a) 34%, transparent);
}
.brand .btn--primary, .brand .btn--secondary, .brand .btn--ghost { border-radius: var(--brand-radius); }
.brand--fastura .btn { letter-spacing: 0.02em; }
.brand ::selection { background: var(--motif-b-soft); color: var(--buho-navy-950); }
.brand .ladder tbody tr:hover { background: color-mix(in srgb, var(--motif-b) 6%, #fff); }
.brand .ptoggle button.on { background: var(--buho-navy-950); }

/* Franja de identidad: dos puntos con la paleta de la marca ------- */
.swatch { display: inline-flex; gap: 4px; align-items: center; }
.swatch i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.swatch i:first-child { background: var(--motif-a); }
.swatch i:last-child { background: var(--motif-b); }

/* =========================================================
   2 · ARQUETIPOS DE SECCIÓN
   ========================================================= */

/* --- Bento: mosaico asimétrico --------------------------- */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; grid-auto-rows: minmax(150px, auto); }
.bento > * {
  background: #fff; border: 1px solid rgba(0,17,68,.06); border-radius: 20px; padding: 28px;
  display: flex; flex-direction: column; gap: 12px; position: relative; overflow: hidden;
  transition: box-shadow .26s var(--ease-out), transform .26s var(--ease-out);
}
.bento > *:hover { box-shadow: 0 26px 54px rgba(0,17,68,.11); transform: translateY(-3px); }
.sec--cream .bento > * { border-color: transparent; }
.b-1 { grid-column: span 2; } .b-2 { grid-column: span 3; } .b-3 { grid-column: span 4; }
.b-4 { grid-column: span 6; } .b-w2 { grid-row: span 2; }
.bento h3 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.015em; }
.bento p  { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--color-text-muted); }
.bento .ico { width: 42px; height: 42px; border-radius: 12px; background: var(--buho-navy-950);
              color: #fff; display: grid; place-items: center; font-size: 20px; flex-shrink: 0; }
.bento .big { font-family: var(--font-mono); font-weight: 600; font-size: clamp(30px,3vw,46px);
              letter-spacing: -.04em; line-height: 1; }
.bento .dark { background: var(--buho-navy-950); color: #fff; border-color: transparent; }
.bento .dark h3 { color: #fff; } .bento .dark p { color: rgba(255,255,255,.72); }
.bento .accent { background: var(--motif-a, var(--buho-pink-600)); color: var(--motif-on-a, #fff); border-color: transparent; }
.bento .accent h3, .bento .accent p { color: inherit; }
.bento .accent p { opacity: .82; }

/* --- Narrativa con visual pegajoso ----------------------- */
.sticky-story { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 64px; align-items: start; }
.sticky-story__vis { position: sticky; top: 104px; }
.sticky-story__steps { display: flex; flex-direction: column; gap: 14px; }
.story-step {
  border: 1px solid rgba(0,17,68,.08); border-radius: 18px; padding: 24px 26px; background: #fff;
  cursor: pointer; transition: all .26s var(--ease-out);
}
.story-step[aria-selected="true"] { background: var(--buho-navy-950); border-color: transparent;
  box-shadow: 0 20px 44px rgba(0,17,68,.20); }
.story-step[aria-selected="true"] h3 { color: #fff; }
.story-step[aria-selected="true"] p  { color: rgba(255,255,255,.72); }
.story-step[aria-selected="true"] .n { color: var(--motif-a-light, var(--buho-pink-300)); }
.story-step .n { font-family: var(--font-mono); font-size: 11.5px; font-weight: 700;
                 letter-spacing: .12em; color: var(--motif-a-ink, var(--buho-pink-700)); }
.story-step h3 { margin: 8px 0 0; font-size: 19px; font-weight: 800; letter-spacing: -.015em; }
.story-step p  { margin: 8px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--color-text-muted); }

/* --- Banda de marquesina de especificaciones ------------- */
.specband { background: var(--buho-navy-950); color: #fff; padding: 20px 0; overflow: hidden; }
.specband__track { display: flex; gap: 44px; width: max-content; align-items: center;
                   animation: hfMarquee 38s linear infinite; }
.specband:hover .specband__track { animation-play-state: paused; }
.specband__track span { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  font: 600 13.5px/1 var(--font-sans); color: rgba(255,255,255,.82); }
.specband__track i { font-size: 17px; color: var(--motif-a-light, var(--buho-pink-300)); }

/* --- Banda diagonal de datos ----------------------------- */
.tiltband { transform: rotate(-1.6deg); margin: 0 -3vw; }
.tiltband > * { transform: rotate(1.6deg); }

/* --- Cita grande editorial -------------------------------- */
.bigquote { display: grid; grid-template-columns: 300px 1fr; gap: 48px; align-items: center; }
.bigquote blockquote { margin: 0; font-size: clamp(22px, 2.4vw, 31px); font-weight: 500;
  line-height: 1.34; letter-spacing: -.02em; }
.bigquote blockquote em { font-style: italic; font-weight: 300; color: var(--motif-a-ink, var(--buho-pink-700)); }
.sec--navy .bigquote blockquote em { color: var(--motif-a-light, var(--buho-pink-300)); }
.bigquote figcaption { margin-top: 22px; font-size: 14px; color: var(--color-text-muted); }
.sec--navy .bigquote figcaption { color: rgba(255,255,255,.6); }
.bigquote figcaption b { display: block; color: var(--color-text); font-size: 15px; }
.sec--navy .bigquote figcaption b { color: #fff; }

/* =========================================================
   3 · FOTOGRAFÍA
   ========================================================= */
.ph { position: relative; overflow: hidden; border-radius: 22px; background: var(--buho-navy-950); }
.ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ph--tall { aspect-ratio: 4 / 5; }
.ph--wide { aspect-ratio: 16 / 9; }
.ph--sq   { aspect-ratio: 1 / 1; }
/* halo de marca sobre la foto: el pink rodea al navy, también acá */
.ph::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--motif-a, #FF006F) 22%, transparent), transparent 55%),
              linear-gradient(180deg, transparent 40%, rgba(0,17,68,.72) 100%);
}
.ph--plain::after { background: none; }
.ph__cap {
  position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 2; color: #fff;
}
.ph__cap b { display: block; font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; }
.ph__cap span { display: block; font-size: 12.5px; color: rgba(255,255,255,.72); margin-top: 3px; }
.ph__tag {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px;
  background: rgba(255,255,255,.14); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.22);
  font: 700 11px/1 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: #fff;
}
.ph__tag i { font-size: 13px; color: var(--motif-a-light, var(--buho-pink-300)); }

/* Banda full-bleed con foto de fondo */
.phband { position: relative; overflow: hidden; background: var(--buho-navy-950); }
.phband > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .38; }
.phband::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(0,17,68,.94) 30%, rgba(0,17,68,.55) 70%),
              radial-gradient(70% 100% at 90% 50%, color-mix(in srgb, var(--motif-a, #FF006F) 26%, transparent), transparent 62%);
}
.phband > .wrap { position: relative; z-index: 2; }

/* Tira de retratos (rubros / clientes) */
.phstrip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.phstrip .ph { aspect-ratio: 3 / 4; border-radius: 16px; transition: transform .3s var(--ease-out); }
.phstrip .ph:hover { transform: translateY(-5px); }
.phstrip .ph__cap b { font-size: 13.5px; }
.phstrip .ph__cap span { font-size: 11.5px; }

/* Retrato en cita */
.quote .av-ph { width: 44px; height: 44px; border-radius: 13px; object-fit: cover; flex-shrink: 0; }

/* =========================================================
   4 · ILUSTRACIÓN Y ANIMACIÓN SVG
   ========================================================= */
.viz { width: 100%; height: auto; display: block; overflow: visible; }
.viz .st { stroke: var(--buho-navy-950); fill: none; stroke-linecap: round; stroke-linejoin: round; }
.viz .fl { fill: var(--buho-navy-950); }
.viz .pl { fill: var(--buho-cream); }
.viz .ac { fill: var(--motif-a, var(--buho-pink-600)); }
.viz .ac2 { fill: var(--motif-b, var(--buho-blue-600)); }
.viz .acs { stroke: var(--motif-a, var(--buho-pink-600)); fill: none; }
.viz .ac2s { stroke: var(--motif-b, var(--buho-blue-600)); fill: none; }
.viz text { font-family: var(--font-mono); }

/* LED que respira */
.led { animation: ledPulse 2.4s ease-in-out infinite; transform-origin: center; }
.led--2 { animation-delay: .5s; } .led--3 { animation-delay: 1s; } .led--4 { animation-delay: 1.6s; }
@keyframes ledPulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }

/* Paquete que viaja por un camino */
.travel { offset-rotate: 0deg; animation: travelPath 3.4s cubic-bezier(.5,0,.5,1) infinite; }
.travel--2 { animation-delay: 1.1s; } .travel--3 { animation-delay: 2.2s; }
@keyframes travelPath { 0% { offset-distance: 0%; opacity: 0; } 12% { opacity: 1; }
                        88% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }

/* Trazo que se dibuja al entrar en pantalla */
.draw { stroke-dasharray: var(--len, 400); stroke-dashoffset: var(--len, 400); }
.viz.is-in .draw, .rv-in .draw { animation: drawIn 1.5s var(--ease-out) forwards; }
.draw--2 { animation-delay: .3s !important; } .draw--3 { animation-delay: .6s !important; }
@keyframes drawIn { to { stroke-dashoffset: 0; } }

/* Barra que crece */
.grow { transform: scaleX(0); transform-origin: left center; }
.viz.is-in .grow, .rv-in .grow { animation: growX 1.15s var(--ease-out) forwards; }
.grow--2 { animation-delay: .18s !important; } .grow--3 { animation-delay: .36s !important; }
@keyframes growX { to { transform: scaleX(1); } }

/* Onda de nodo (mapa de latencia) */
.ripple { transform-origin: center; animation: rippleOut 2.8s ease-out infinite; }
.ripple--2 { animation-delay: .9s; } .ripple--3 { animation-delay: 1.8s; }
@keyframes rippleOut { 0% { r: 4; opacity: .55; } 100% { r: 26; opacity: 0; } }

/* Burbuja de chat que aparece */
.pop { transform-origin: center bottom; animation: popIn 4s var(--ease-spring) infinite; opacity: 0; }
.pop--2 { animation-delay: .8s; } .pop--3 { animation-delay: 1.6s; }
@keyframes popIn { 0% { transform: scale(.6); opacity: 0; } 10%,70% { transform: scale(1); opacity: 1; }
                   85%,100% { transform: scale(1); opacity: 0; } }

/* Escaneo vertical (validación de documento) */
.scanline { animation: scanY 3s ease-in-out infinite; }
@keyframes scanY { 0%,100% { transform: translateY(0); opacity: 0; }
                   10% { opacity: 1; } 50% { transform: translateY(var(--scan, 120px)); opacity: 1; }
                   90% { opacity: 0; } }

/* Medidor circular de uptime */
.gauge { --pct: 99.97; }
.gauge circle.trk { stroke: rgba(0,17,68,.10); fill: none; }
.gauge circle.val {
  stroke: url(#gaugeGrad); fill: none; stroke-linecap: round;
  stroke-dasharray: 471; stroke-dashoffset: 471; transform: rotate(-90deg); transform-origin: center;
}
.gauge.rv-in circle.val, .rv-in .gauge circle.val { animation: gaugeFill 1.7s var(--ease-out) forwards; }
@keyframes gaugeFill { to { stroke-dashoffset: calc(471 - 471 * var(--pct) / 100); } }

/* Capas de escudo que se apilan al pasar el cursor */
.shield g[data-layer] { transition: transform .4s var(--ease-out), opacity .4s var(--ease-out); }
.shield:hover g[data-layer="1"] { transform: translate(0, -9px); }
.shield:hover g[data-layer="2"] { transform: translate(0, -4px); }
.shield:hover g[data-layer="3"] { transform: translate(0, 2px); }

@media (prefers-reduced-motion: reduce) {
  .led, .travel, .ripple, .pop, .scanline { animation: none !important; opacity: 1; }
  .draw { stroke-dashoffset: 0 !important; }
  .grow { transform: none !important; }
  .gauge circle.val { stroke-dashoffset: calc(471 - 471 * var(--pct) / 100); }
}

/* =========================================================
   5 · WIDGETS INTERACTIVOS
   ========================================================= */

/* data-show apaga elementos con el atributo hidden; varios componentes
   del sitio declaran display:flex y ganarían por especificidad. */
[hidden] { display: none !important; }

.calc {
  background: #fff; border: 1px solid rgba(0,17,68,.08); border-radius: 24px;
  padding: 30px; display: flex; flex-direction: column; gap: 20px;
  box-shadow: 0 20px 50px rgba(0,17,68,.07);
}
.sec--navy .calc { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12);
                   box-shadow: none; color: #fff; }
.calc__row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.calc__lb { font-size: 13.5px; font-weight: 600; }
.calc__vl { font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: var(--motif-b-ink, var(--buho-blue-600)); }
.sec--navy .calc__vl { color: var(--motif-a-light, var(--buho-pink-300)); }

input[type="range"].rng {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, var(--motif-a, #FF006F) var(--fill, 30%), rgba(0,17,68,.10) var(--fill, 30%));
  outline: none; cursor: pointer; margin: 0;
}
.sec--navy input[type="range"].rng { background: linear-gradient(90deg, var(--motif-a, #FF006F) var(--fill,30%), rgba(255,255,255,.16) var(--fill,30%)); }
input[type="range"].rng::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--buho-navy-950); border: 3px solid #fff; cursor: grab;
  box-shadow: 0 3px 10px rgba(0,17,68,.3); transition: transform .15s var(--ease-out);
}
input[type="range"].rng::-webkit-slider-thumb:active { transform: scale(1.14); cursor: grabbing; }
input[type="range"].rng::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; background: var(--buho-navy-950);
  border: 3px solid #fff; cursor: grab; box-shadow: 0 3px 10px rgba(0,17,68,.3);
}
.calc__out {
  background: var(--buho-navy-950); color: #fff; border-radius: 16px; padding: 22px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}

.calc__out .k { display: block; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
                color: rgba(255,255,255,.55); }
.calc__out .v { font-family: var(--font-mono); font-size: clamp(28px,3vw,38px); font-weight: 600;
                letter-spacing: -.035em; line-height: 1.1; }
.calc__out .s { font-size: 12.5px; color: rgba(255,255,255,.6); font-family: var(--font-mono); }
.calc__pick {
  display: inline-flex; align-items: center; gap: 8px; background: var(--motif-a, var(--buho-pink-600));
  color: var(--motif-on-a, #fff); padding: 11px 18px; border-radius: var(--brand-radius, 999px);
  font: 700 13.5px/1 var(--font-sans); transition: all .2s var(--ease-out);
}
.calc__pick:hover { color: var(--motif-on-a, #fff); transform: translateY(-2px);
  box-shadow: 0 12px 26px color-mix(in srgb, var(--motif-a, #FF006F) 34%, transparent); }

/* Segmentos (tipo de carga, región, etc.) */
.segs { display: flex; flex-wrap: wrap; gap: 8px; }
.segs button {
  appearance: none; cursor: pointer; border: 1px solid rgba(0,17,68,.12); background: #fff;
  padding: 9px 15px; border-radius: 999px; font: 600 13px/1 var(--font-sans); color: var(--color-text);
  transition: all .18s var(--ease-out);
}
.segs button:hover { border-color: var(--buho-navy-950); }
.segs button.on { background: var(--buho-navy-950); color: #fff; border-color: transparent; }
.sec--navy .segs button { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); color: #fff; }
.sec--navy .segs button.on { background: var(--motif-a); color: var(--motif-on-a); }

/* Barras comparativas animadas */
.bars { display: flex; flex-direction: column; gap: 16px; }
.bars__row { display: grid; grid-template-columns: 128px 1fr 76px; gap: 14px; align-items: center; }
.bars__lb { display: block; font-size: 13.5px; font-weight: 600; }
.bars__vl { display: block; }
.bars__trk { display: block; height: 12px; border-radius: 999px; background: rgba(0,17,68,.08); overflow: hidden; }
.sec--navy .bars__trk { background: rgba(255,255,255,.12); }
.bars__fil { display: block; height: 100%; border-radius: 999px; transform: scaleX(0); transform-origin: left;
             background: linear-gradient(90deg, var(--motif-a, #FF006F), var(--motif-b, #0330CC)); }
.bars__fil--mut { background: rgba(0,17,68,.22); }
.sec--navy .bars__fil--mut { background: rgba(255,255,255,.26); }
.bars.rv-in .bars__fil, .rv-in .bars__fil { animation: growX 1.2s var(--ease-out) forwards; }
.bars .bars__row:nth-child(2) .bars__fil { animation-delay: .12s; }
.bars .bars__row:nth-child(3) .bars__fil { animation-delay: .24s; }
.bars .bars__row:nth-child(4) .bars__fil { animation-delay: .36s; }
.bars__vl { font-family: var(--font-mono); font-size: 13px; font-weight: 600; text-align: right; }

/* Acordeón de exploración (seguridad, capacidades) */
.explore { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.explore > button {
  appearance: none; cursor: pointer; text-align: left; border: 1px solid rgba(0,17,68,.08);
  background: #fff; border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 12px;
  transition: all .26s var(--ease-out);
}
.explore > button:hover { transform: translateY(-3px); box-shadow: 0 22px 44px rgba(0,17,68,.10); }
.explore > button.on { background: var(--buho-navy-950); border-color: transparent; }
.explore > button.on b, .explore > button.on span { color: #fff; }
.explore > button.on span { color: rgba(255,255,255,.7); }
.explore .ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
                background: var(--buho-cream); font-size: 19px; }
.explore > button.on .ico { background: var(--motif-a, var(--buho-pink-600)); color: var(--motif-on-a, #fff); }
.explore b { font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.explore span { font-size: 13px; line-height: 1.5; color: var(--color-text-muted); }

/* Cinta de logos tecnológicos */
.techrow { display: flex; flex-wrap: wrap; gap: 10px; }
.techrow span {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 15px; border-radius: 999px;
  background: var(--buho-cream); font: 600 12.5px/1 var(--font-sans);
}
.sec--navy .techrow span { background: rgba(255,255,255,.07); color: rgba(255,255,255,.85); }
.techrow i { font-size: 15px; color: var(--motif-b-ink, var(--buho-blue-600)); }
.sec--navy .techrow i { color: var(--motif-a-light, var(--buho-pink-300)); }

/* Tarjeta de garantía */
.grid-guar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.guar { display: flex; gap: 14px; align-items: flex-start; padding: 20px;
        background: var(--buho-cream); border-radius: 16px; }
.sec--white .guar { background: var(--buho-cream); }
.sec--navy .guar { background: rgba(255,255,255,.06); }
.guar i { font-size: 22px; color: var(--motif-b-ink, var(--buho-blue-600)); flex-shrink: 0; }
.sec--navy .guar i { color: var(--motif-a-light, var(--buho-pink-300)); }
.guar b { display: block; font-size: 14.5px; }
.guar span { display: block; font-size: 12.5px; line-height: 1.5; color: var(--color-text-muted); margin-top: 3px; }
.sec--navy .guar span { color: rgba(255,255,255,.66); }

/* =========================================================
   6 · Responsive
   ========================================================= */
@media (max-width: 1100px) {
  .explore, .grid-guar { grid-template-columns: repeat(2, 1fr); }
  .phstrip { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 980px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .b-1, .b-2, .b-3, .b-4 { grid-column: span 2; } .b-w2 { grid-row: auto; }
  .sticky-story { grid-template-columns: 1fr; gap: 32px; }
  .sticky-story__vis { position: static; }
  .bigquote { grid-template-columns: 1fr; gap: 26px; }
  .bigquote .ph { max-width: 260px; }
  .tiltband { transform: none; margin: 0; } .tiltband > * { transform: none; }
  .phstrip { grid-template-columns: repeat(2, 1fr); }
  .bars__row { grid-template-columns: 100px 1fr 64px; gap: 10px; }
}
@media (max-width: 620px) {
  .bento, .explore, .grid-guar, .phstrip { grid-template-columns: 1fr; }
  .calc { padding: 22px; }
  .bars__row { grid-template-columns: 1fr; gap: 6px; }
  .bars__vl { text-align: left; }
}