/* =========================================================
   Kalifo · soykalifo.com
   Blanco y celeste. Tipografía grande, movimiento suave.
   ========================================================= */

:root {
  --fondo: #ffffff;
  --fondo-2: #f4f8fc;
  --celeste: #009ee3;
  --celeste-2: #00b1ea;
  --celeste-oscuro: #0086c3;
  --azul: #3483fa;
  --celeste-suave: #e8f6fd;
  --marino: #0b1b33;
  --texto: #0b1b33;
  --texto-2: #4a5b75;
  --texto-3: #8a97ab;
  --linea: rgba(11, 27, 51, .08);
  --linea-2: rgba(11, 27, 51, .14);
  --degrade: linear-gradient(100deg, #00b8f0 0%, #009ee3 38%, #3483fa 72%, #00b1ea 100%);
  --sombra: 0 1px 2px rgba(11, 27, 51, .04), 0 18px 44px -20px rgba(11, 45, 100, .22);
  --sombra-alta: 0 2px 4px rgba(11, 27, 51, .04), 0 34px 70px -28px rgba(11, 45, 100, .32);
  --suave: cubic-bezier(.22, 1, .36, 1);
  --resorte: cubic-bezier(.34, 1.56, .64, 1);
  --radio: 26px;
  --ancho: 1200px;
  --fuente: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; overscroll-behavior-x: none; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font-family: var(--fuente); font-size: 17px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: rgba(0, 158, 227, .18); }
:focus-visible { outline: 2.5px solid var(--celeste); outline-offset: 3px; border-radius: 10px; }

svg:not(.sol):not(.sprite):not(.arbol__lineas) {
  width: 1.15em; height: 1.15em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

.contenedor { width: min(var(--ancho), 100% - 32px); margin-inline: auto; }
@media (min-width: 700px) { .contenedor { width: min(var(--ancho), 100% - 64px); } }

.saltar { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 12px; background: var(--marino); color: #fff; }
.saltar:focus { top: 12px; }

/* ---------- Texto ---------- */
.degrade {
  background: var(--degrade); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: degrade 9s ease-in-out infinite alternate;
  padding-right: .04em; margin-right: -.04em; /* que no se corte la última letra en itálica/kerning */
}
@keyframes degrade { to { background-position: 100% 0; } }

.etiqueta {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 12.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--celeste-oscuro);
}
.etiqueta svg { width: 16px; height: 16px; stroke-width: 2; }

.titulo {
  font-size: clamp(2.5rem, 6.2vw, 5.4rem); font-weight: 760; line-height: 1;
  letter-spacing: -.045em; text-wrap: balance; margin-top: 18px;
}
.bajada { margin-top: 22px; max-width: 46ch; font-size: clamp(1.08rem, 1.5vw, 1.3rem); line-height: 1.5; color: var(--texto-2); text-wrap: pretty; }
.subtitulo { margin: clamp(80px, 10vw, 128px) 0 28px; font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 720; letter-spacing: -.035em; }

.cabecera { margin-bottom: clamp(48px, 7vw, 88px); }
.cabecera--centro { text-align: center; display: flex; flex-direction: column; align-items: center; }
.cabecera--centro .bajada { margin-inline: auto; }

.seccion { padding: clamp(96px, 13vw, 168px) 0; position: relative; }

/* ---------- Botones ---------- */
.boton {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 54px; padding: 0 26px; border-radius: 999px; border: 0; cursor: pointer; overflow: hidden;
  font-size: 16px; font-weight: 620; letter-spacing: -.01em; white-space: nowrap;
  transition: transform .4s var(--suave), box-shadow .4s var(--suave), background-color .3s, color .3s;
  -webkit-tap-highlight-color: transparent;
}
.boton svg { width: 18px; height: 18px; stroke-width: 2.1; transition: transform .4s var(--suave); }
.boton:hover svg { transform: translate(2px, -2px); }
.boton:active { transform: scale(.97); }
.boton--celeste {
  background: linear-gradient(180deg, #14b4f2, var(--celeste)); color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .45) inset, 0 12px 28px -12px rgba(0, 140, 210, .75);
}
.boton--celeste:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, .45) inset, 0 18px 36px -12px rgba(0, 140, 210, .85); transform: translateY(-1px); }
/* brillo que cruza el botón */
.boton--celeste::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .55) 48%, transparent 62%);
  transform: translateX(-120%); transition: transform .9s var(--suave);
}
.boton--celeste:hover::after { transform: translateX(120%); }
.boton--claro { background: #fff; color: var(--texto); box-shadow: 0 0 0 1px var(--linea-2) inset, 0 8px 22px -14px rgba(11, 45, 100, .35); }
.boton--claro:hover { box-shadow: 0 0 0 1px rgba(0, 158, 227, .5) inset, 0 12px 26px -14px rgba(11, 45, 100, .4); color: var(--celeste-oscuro); }
.boton--chico { height: 42px; padding: 0 18px; font-size: 14.5px; }
.boton[hidden] { display: none; }

.enlace { display: inline-flex; align-items: center; gap: 6px; font-weight: 620; color: var(--celeste-oscuro); }
.enlace svg { width: 17px; height: 17px; transition: transform .4s var(--suave); }
.enlace:hover svg { transform: translate(2px, -2px); }

/* ---------- Avatar con sol (marca) ---------- */
.marca-sol {
  --t: 36px;
  position: relative; flex: none; width: var(--t); height: var(--t); border-radius: 50%;
  box-shadow: 0 0 0 1.5px rgba(0, 158, 227, .55), 0 6px 14px -6px rgba(11, 45, 100, .45);
}
.marca-sol::before, .marca-sol::after { content: ''; position: absolute; inset: 0; border-radius: 50%; }
.marca-sol::before { background: repeating-conic-gradient(from 0deg, #bfe9fb 0 9deg, #009ee3 9deg 18deg); animation: girar 40s linear infinite; }
.marca-sol::after { background: radial-gradient(circle, rgba(255, 255, 255, .55) 0 24%, transparent 55%, rgba(11, 27, 51, .28) 100%); }
.marca-sol img {
  --img: calc(var(--t) * 1.3);
  --cy: calc(var(--img) - var(--t) / 2);
  position: absolute; z-index: 1; left: calc((var(--t) - var(--img)) / 2); bottom: 0;
  width: var(--img); height: var(--img); max-width: none;
  filter: drop-shadow(0 2px 3px rgba(11, 27, 51, .35));
  -webkit-mask-image: linear-gradient(#000, #000), radial-gradient(circle calc(var(--t) / 2) at calc(var(--img) / 2) var(--cy), #000 95%, transparent 100%);
  mask-image: linear-gradient(#000, #000), radial-gradient(circle calc(var(--t) / 2) at calc(var(--img) / 2) var(--cy), #000 95%, transparent 100%);
  -webkit-mask-size: 100% var(--cy), 100% 100%; mask-size: 100% var(--cy), 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.marca-sol--grande { --t: 58px; }
.marca-sol--raiz { --t: 76px; }

@keyframes girar { to { transform: rotate(360deg); } }

/* =========================================================
   NAV
   ========================================================= */
.nav { position: fixed; z-index: 50; top: 12px; left: 0; right: 0; display: flex; justify-content: center; pointer-events: none; }
.nav__pastilla {
  pointer-events: auto; display: flex; align-items: center; gap: 10px;
  width: min(1080px, 100% - 20px); height: 62px; padding: 0 9px 0 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .78); box-shadow: 0 0 0 1px var(--linea), 0 10px 30px -18px rgba(11, 45, 100, .35);
  -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px);
  transition: box-shadow .4s, background-color .4s;
}
.nav.is-bajo .nav__pastilla { background: rgba(255, 255, 255, .9); box-shadow: 0 0 0 1px var(--linea), 0 14px 34px -16px rgba(11, 45, 100, .4); }
.nav__marca { display: inline-flex; align-items: center; gap: 10px; padding-right: 6px; }
.nav__nombre { font-size: 19px; font-weight: 780; letter-spacing: -.04em; }
.nav__links { display: none; margin-left: auto; gap: 4px; }
.nav__links a { padding: 9px 15px; border-radius: 999px; font-size: 15px; font-weight: 550; color: var(--texto-2); transition: color .25s, background-color .25s; }
.nav__links a:hover, .nav__links a.is-aqui { color: var(--texto); background: rgba(11, 27, 51, .05); }
.nav__cta { margin-left: auto; }
.nav__menu { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(11, 27, 51, .05); cursor: pointer; }
.nav__menu svg { width: 20px; height: 20px; stroke-width: 2.2; }
@media (min-width: 900px) {
  .nav__links { display: flex; }
  .nav__cta { margin-left: 8px; }
  .nav__menu { display: none; }
}
@media (max-width: 380px) { .nav__cta { padding: 0 14px; font-size: 13.5px; } }

.menu {
  position: fixed; inset: 0; z-index: 49; padding: 96px 16px 24px;
  background: rgba(255, 255, 255, .96);
  opacity: 0; transition: opacity .35s var(--suave);
}
.menu.is-abierto { opacity: 1; }
.menu__links { display: flex; flex-direction: column; gap: 4px; }
.menu__links a { padding: 14px 8px; font-size: 30px; font-weight: 740; letter-spacing: -.04em; border-bottom: 1px solid var(--linea); transform: translateY(14px); opacity: 0; transition: transform .5s var(--suave), opacity .5s var(--suave); }
.menu.is-abierto .menu__links a { transform: none; opacity: 1; }
.menu.is-abierto .menu__links a:nth-child(2) { transition-delay: .04s; }
.menu.is-abierto .menu__links a:nth-child(3) { transition-delay: .08s; }
.menu.is-abierto .menu__links a:nth-child(4) { transition-delay: .12s; }
.menu__links .menu__cta { color: var(--celeste-oscuro); border-bottom: 0; }

/* =========================================================
   HERO
   ========================================================= */
.hero { position: relative; isolation: isolate; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 104px 0 96px; }
.hero__fondo {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(60% 50% at 78% 30%, rgba(0, 177, 234, .14), transparent 70%),
    radial-gradient(40% 40% at 10% 90%, rgba(52, 131, 250, .08), transparent 70%),
    linear-gradient(180deg, #ffffff, #f6fbff 70%, #ffffff);
}
.hero__grilla { display: grid; gap: 28px; align-items: center; }
.hero__figura { position: relative; width: min(86vw, 440px); aspect-ratio: 1000 / 860; justify-self: center; margin-top: 8px; }

/* Haces celestes y blancos, como el fondo del retrato y la bandera */
.hero__haces {
  position: absolute; left: 51%; top: 30%; z-index: -1; width: 300%; aspect-ratio: 1; translate: -50% -50%;
  background: repeating-conic-gradient(from 0deg, rgba(0, 158, 227, .085) 0 7deg, transparent 7deg 18deg);
  -webkit-mask-image: radial-gradient(circle, #000 0 8%, rgba(0, 0, 0, .55) 22%, transparent 48%);
  mask-image: radial-gradient(circle, #000 0 8%, rgba(0, 0, 0, .55) 22%, transparent 48%);
  animation: girar 180s linear infinite reverse; will-change: transform; pointer-events: none;
}
.hero__sol { position: absolute; left: 51%; top: 30%; z-index: -1; width: 138%; aspect-ratio: 1; translate: -50% -50%; pointer-events: none; will-change: transform; }
.sol { width: 100%; height: 100%; overflow: visible; animation: girar 120s linear infinite; will-change: transform; }

.hero__retrato { position: absolute; inset: 0; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; will-change: transform; }
.hero__retrato img {
  width: 100%; height: 100%; object-fit: contain; transform-origin: 50% 30%;
  -webkit-mask-image: linear-gradient(#000 72%, transparent 99%); mask-image: linear-gradient(#000 72%, transparent 99%);
  filter: drop-shadow(0 26px 30px rgba(11, 45, 100, .22));
}
.hero__retrato.is-saludo img { animation: salto .9s var(--resorte); }
@keyframes salto {
  0% { transform: none; } 28% { transform: scale(1.05) rotate(-4deg) translateY(-8px); } 55% { transform: scale(.985) rotate(2.5deg); }
  78% { transform: scale(1.01) rotate(-1deg); } 100% { transform: none; }
}
.chispa {
  position: absolute; left: var(--x); top: var(--y); z-index: 3; width: 14px; height: 14px; margin: -7px; pointer-events: none;
  background: var(--color, var(--celeste));
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: chispa 1s var(--suave) forwards;
}
@keyframes chispa {
  0% { transform: translate(0, 0) scale(0) rotate(0); opacity: 1; }
  60% { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(var(--s)) rotate(200deg); opacity: 0; }
}

.hero__texto { position: relative; z-index: 2; text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero__titulo { margin-top: 14px; font-size: min(clamp(4.1rem, 17vw, 10.5rem), max(19vh, 3.4rem)); font-weight: 800; line-height: .9; letter-spacing: -.065em; }
.hero__bajada { margin-top: 22px; max-width: 30ch; font-size: clamp(1.1rem, 1.7vw, 1.4rem); line-height: 1.45; color: var(--texto-2); text-wrap: balance; }
.hero__botones { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 34px; }

.desde {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 9px 16px 9px 12px; border-radius: 999px;
  font-size: 14px; line-height: 1.3; color: var(--texto-2); text-align: left;
  background: #fff; box-shadow: 0 0 0 1px rgba(0, 158, 227, .3), 0 10px 26px -16px rgba(0, 120, 200, .6);
  animation: aparecer .8s var(--suave) both .3s;
}
.desde b { color: var(--texto); }
.desde u { color: var(--celeste-oscuro); text-underline-offset: 3px; }
.desde[hidden] { display: none; }
.desde__punto, .punto-vivo { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--celeste); }
.desde__punto::after, .punto-vivo::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: latido 1.8s ease-out infinite; }
@keyframes latido { to { transform: scale(3); opacity: 0; } }
@keyframes aparecer { from { opacity: 0; transform: translateY(-8px) scale(.96); } }

.hero__bajar {
  position: absolute; left: 50%; bottom: 22px; translate: -50% 0; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 560; color: var(--texto-2);
  background: rgba(255, 255, 255, .8); box-shadow: 0 0 0 1px var(--linea);
}
.hero__bajar svg { width: 15px; height: 15px; animation: bajar 1.8s var(--suave) infinite; }
@keyframes bajar { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }

@media (min-width: 900px) {
  .hero { padding: 120px 0 90px; }
  .hero__grilla { grid-template-columns: 1.08fr .92fr; gap: 24px; }
  .hero__figura { order: 2; width: 100%; max-width: 600px; margin: 0; }
  .hero__texto { text-align: left; align-items: flex-start; }
  .hero__bajada { max-width: 27ch; }
  .hero__botones { justify-content: flex-start; }
}
@media (max-width: 899px) and (max-height: 760px) { .hero__figura { width: min(72vw, 330px); } }

/* =========================================================
   CINTA
   ========================================================= */
.cinta {
  position: relative; overflow: hidden; padding: 22px 0; background: var(--fondo-2);
  border-block: 1px solid var(--linea);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.cinta__pista { display: flex; align-items: center; width: max-content; animation: cinta 46s linear infinite; }
.cinta span { font-size: clamp(1.15rem, 2.2vw, 1.75rem); font-weight: 650; letter-spacing: -.03em; color: var(--texto); white-space: nowrap; }
.cinta i { flex: none; width: 9px; height: 9px; margin: 0 clamp(18px, 3vw, 34px); border-radius: 50%; background: var(--degrade); box-shadow: 0 0 0 4px rgba(0, 158, 227, .12); }
@keyframes cinta { to { transform: translateX(-50%); } }

/* =========================================================
   TARJETAS (base) con luz que sigue al cursor
   ========================================================= */
.tarjeta {
  position: relative; border-radius: var(--radio); background: #fff;
  box-shadow: 0 0 0 1px var(--linea), var(--sombra);
}
.tarjeta--luz { overflow: hidden; transition: transform .5s var(--suave), box-shadow .5s var(--suave); }
.tarjeta--luz::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(0, 177, 234, .12), transparent 45%);
}
@media (hover: hover) {
  .tarjeta--luz:hover::before { opacity: 1; }
  .tarjeta--luz:hover { box-shadow: 0 0 0 1px rgba(0, 158, 227, .22), var(--sombra-alta); }
}

/* =========================================================
   RAMAS (árbol)
   ========================================================= */
.ramas { background: linear-gradient(180deg, #fff, var(--fondo-2)); }
.arbol { display: flex; flex-direction: column; align-items: center; }
.arbol__raiz {
  display: inline-flex; align-items: center; gap: 16px; padding: 12px 26px 12px 14px; border-radius: 999px;
  background: #fff; box-shadow: 0 0 0 1px var(--linea), var(--sombra);
}
.arbol__raiz b { display: block; font-size: 22px; font-weight: 780; letter-spacing: -.04em; line-height: 1.1; }
.arbol__raiz span { font-family: var(--mono); font-size: 13px; color: var(--texto-3); }
.arbol__lineas { display: none; width: 100%; height: 110px; overflow: visible; }
.arbol__lineas path {
  fill: none; stroke: var(--celeste); stroke-opacity: .55; stroke-width: 2;
  stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s var(--suave);
}
.arbol__lineas path:nth-child(2) { transition-delay: .12s; }
.arbol__lineas path:nth-child(3) { transition-delay: .24s; }
.arbol.is-visible .arbol__lineas path { stroke-dashoffset: 0; }
.arbol__ramas { position: relative; display: grid; gap: 16px; width: 100%; margin-top: 28px; }
/* en el celular, una línea vertical une la raíz con las ramas */
.arbol__ramas::before {
  content: ''; position: absolute; left: 50%; top: -28px; height: 28px; width: 2px; translate: -50% 0;
  background: linear-gradient(var(--celeste), rgba(0, 158, 227, .2));
}
.rama { display: flex; flex-direction: column; padding: 28px 26px 26px; }
.rama__estado {
  position: absolute; top: 22px; right: 22px; padding: 5px 11px; border-radius: 999px;
  font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--texto-2); background: rgba(11, 27, 51, .05);
}
.rama__estado--activa { color: #00799f; background: var(--celeste-suave); }
.rama__estado--pronto { color: var(--texto-3); }
.rama__icono {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; color: #fff;
  background: linear-gradient(145deg, #1cc0f5, var(--celeste) 55%, var(--azul));
  box-shadow: 0 12px 24px -12px rgba(0, 140, 210, .8), inset 0 1px 0 rgba(255, 255, 255, .4);
}
.rama__icono svg { width: 26px; height: 26px; stroke-width: 2; }
.rama h3 { margin-top: 22px; font-size: 1.65rem; font-weight: 760; letter-spacing: -.04em; }
.rama > p { margin-top: 8px; color: var(--texto-2); }
.rama__hojas { margin-top: 18px; display: grid; gap: 9px; }
.rama__hojas li { display: flex; align-items: center; gap: 10px; font-size: 15.5px; font-weight: 520; }
.rama__hojas svg { width: 18px; height: 18px; color: var(--celeste); stroke-width: 2.2; }
.rama__hojas .es-pronto { color: var(--texto-3); }
.rama__hojas .es-pronto svg { color: var(--texto-3); }
.rama__ir { margin-top: auto; padding-top: 22px; display: inline-flex; align-items: center; gap: 6px; font-weight: 620; color: var(--celeste-oscuro); }
.rama__ir svg { width: 17px; height: 17px; transition: transform .4s var(--suave); }
a.rama:hover .rama__ir svg { transform: translate(2px, -2px); }
@media (min-width: 900px) {
  .arbol__lineas { display: block; }
  .arbol__ramas { grid-template-columns: repeat(3, 1fr); margin-top: 0; }
  .arbol__ramas::before { display: none; }
}

/* =========================================================
   DESARROLLOS
   ========================================================= */
.producto { display: grid; gap: clamp(44px, 6vw, 80px); align-items: center; }
.producto + .contenedor, .contenedor + .producto { margin-top: clamp(96px, 12vw, 150px); }
.producto__tipo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--celeste-oscuro); }
.producto__titulo { margin-top: 16px; font-size: clamp(2.1rem, 4.4vw, 3.6rem); font-weight: 770; line-height: 1.02; letter-spacing: -.045em; text-wrap: balance; }
.producto__bajada { margin-top: 18px; max-width: 44ch; font-size: 1.12rem; color: var(--texto-2); }
.lista-check { margin-top: 26px; display: grid; gap: 12px; }
.lista-check li { display: flex; align-items: flex-start; gap: 12px; font-weight: 540; }
.lista-check svg {
  width: 22px; height: 22px; padding: 4px; margin-top: 1px; border-radius: 50%; stroke-width: 2.6;
  color: #fff; background: var(--celeste);
}
.producto__botones { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px; }
@media (min-width: 960px) {
  .producto { grid-template-columns: .95fr 1.05fr; }
  .producto--invertido { grid-template-columns: 1.05fr .95fr; }
  .producto--invertido .producto__texto { order: 2; }
}

/* ---------- Navegador que se arma solo ---------- */
.navegador {
  --ciclo: 12s;
  position: relative; border-radius: 22px; background: #fff; aspect-ratio: 16 / 11;
  box-shadow: 0 0 0 1px var(--linea), var(--sombra-alta);
  transform: perspective(1600px) rotateY(-7deg) rotateX(3deg); transform-origin: 60% 50%;
}
.navegador__barra { display: flex; align-items: center; gap: 7px; height: 44px; padding: 0 16px; border-bottom: 1px solid var(--linea); }
.navegador__barra > i { width: 11px; height: 11px; border-radius: 50%; background: #e4e9f0; }
.navegador__url {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 auto; padding: 5px 14px; border-radius: 999px;
  font-size: 12.5px; color: var(--texto-3); background: var(--fondo-2);
}
.navegador__url svg { width: 12px; height: 12px; }
.navegador__web { position: absolute; inset: 44px 0 0; overflow: hidden; border-radius: 0 0 22px 22px; padding: 4% 5%; display: flex; flex-direction: column; gap: 6%; }
.mini-nav { display: flex; align-items: center; gap: 4%; height: 7%; }
.mini-nav b { width: 16%; height: 100%; border-radius: 8px; background: var(--marino); }
.mini-nav span { width: 9%; height: 45%; border-radius: 6px; background: #e6ebf2; }
.mini-nav span:first-of-type { margin-left: auto; }
.mini-nav em { width: 15%; height: 100%; border-radius: 999px; background: var(--celeste); }
.mini-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 5%; flex: 1; }
.mini-hero__texto { display: flex; flex-direction: column; justify-content: center; gap: 7%; }
.mini-hero__texto i { display: block; height: 11%; border-radius: 8px; background: var(--marino); transform-origin: left; }
.mini-hero__texto .l2 { width: 78%; background: var(--degrade); }
.mini-hero__texto .l3 { width: 88%; height: 6%; background: #dfe6ef; }
.mini-boton {
  align-self: flex-start; margin-top: 4%; padding: 3.5% 7%; border-radius: 999px; font-size: clamp(9px, 1vw, 12px); font-weight: 650; color: #fff;
  background: var(--celeste); box-shadow: 0 8px 18px -8px rgba(0, 140, 210, .8);
}
.mini-hero__img { position: relative; border-radius: 16px; overflow: hidden; background: linear-gradient(150deg, #d9f2fd, #9fdcf7 45%, #3483fa); }
.mini-hero__img span { position: absolute; left: 50%; top: 52%; width: 46%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: rgba(255, 255, 255, .55); box-shadow: 0 0 0 14px rgba(255, 255, 255, .22), 0 0 0 30px rgba(255, 255, 255, .12); }
.mini-tarjetas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4%; height: 18%; }
.mini-tarjetas span { border-radius: 12px; background: var(--fondo-2); box-shadow: inset 0 0 0 1px var(--linea); }

.flota {
  position: absolute; z-index: 2; border-radius: 18px; background: rgba(255, 255, 255, .96);
  box-shadow: 0 0 0 1px var(--linea), 0 24px 50px -22px rgba(11, 45, 100, .45);
  font-size: 12.5px; opacity: 0;
}
.flota__titulo { display: flex; align-items: center; gap: 6px; font-weight: 680; font-size: 13px; }
.flota__titulo svg { width: 15px; height: 15px; color: var(--celeste); }
.flota--turno { right: -4%; top: 22%; width: 42%; padding: 14px; }
.flota__dias, .flota__horas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 10px; }
.flota__horas { grid-template-columns: repeat(3, 1fr); }
.flota__dias span, .flota__horas span { display: flex; flex-direction: column; align-items: center; padding: 6px 0; border-radius: 10px; font-size: 11px; color: var(--texto-3); background: var(--fondo-2); }
.flota__dias b { font-size: 14px; color: var(--texto); }
.flota__horas span { font-weight: 620; color: var(--texto-2); }
.flota .es-elegido { color: #fff; background: var(--celeste); }
.flota .es-elegido b { color: #fff; }
.flota__ok { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-weight: 650; color: #00a37a; opacity: 0; }
.flota__ok svg { width: 15px; height: 15px; stroke-width: 2.6; }
.flota--chat { left: -5%; bottom: 10%; width: 46%; padding: 12px; display: grid; gap: 7px; background: #eef7f2; }
.burbuja { max-width: 88%; padding: 8px 11px; border-radius: 14px; line-height: 1.35; }
.burbuja--cliente { justify-self: end; background: #d4f5c8; border-bottom-right-radius: 4px; }
.burbuja--bot { background: #fff; border-bottom-left-radius: 4px; opacity: 0; }
.burbuja--bot span { display: block; margin-top: 2px; font-size: 10px; color: var(--texto-3); }
.flota--google { right: 6%; bottom: -7%; width: 52%; padding: 12px 14px; display: grid; gap: 2px; }
.flota__ruta { font-size: 11px; color: var(--texto-3); }
.flota--google b { font-size: 14px; font-weight: 600; color: #1a4fd6; }
.flota__estrellas { color: #f5b400; letter-spacing: 1px; }

/* Secuencia: el sitio se arma y después aparecen turnos, WhatsApp y el buscador. Se repite mientras se ve. */
.navegador .mini-nav, .navegador .mini-hero__texto i, .navegador .mini-boton, .navegador .mini-hero__img, .navegador .mini-tarjetas span { opacity: 0; }
.navegador.is-andando .mini-nav { animation: armar var(--ciclo) var(--suave) infinite; }
.navegador.is-andando .mini-hero__texto .l1 { animation: armar-linea var(--ciclo) var(--suave) infinite .25s; }
.navegador.is-andando .mini-hero__texto .l2 { animation: armar-linea var(--ciclo) var(--suave) infinite .4s; }
.navegador.is-andando .mini-hero__texto .l3 { animation: armar-linea var(--ciclo) var(--suave) infinite .55s; }
.navegador.is-andando .mini-boton { animation: armar var(--ciclo) var(--resorte) infinite .75s; }
.navegador.is-andando .mini-hero__img { animation: armar-img var(--ciclo) var(--suave) infinite .5s; }
.navegador.is-andando .mini-tarjetas span:nth-child(1) { animation: armar var(--ciclo) var(--suave) infinite .9s; }
.navegador.is-andando .mini-tarjetas span:nth-child(2) { animation: armar var(--ciclo) var(--suave) infinite 1s; }
.navegador.is-andando .mini-tarjetas span:nth-child(3) { animation: armar var(--ciclo) var(--suave) infinite 1.1s; }
.navegador.is-andando .flota--turno { animation: flotar var(--ciclo) var(--resorte) infinite 1.6s; }
.navegador.is-andando .flota__ok { animation: armar var(--ciclo) var(--suave) infinite 3.1s; }
.navegador.is-andando .flota--chat { animation: flotar var(--ciclo) var(--resorte) infinite 3.7s; }
.navegador.is-andando .burbuja--bot { animation: armar var(--ciclo) var(--suave) infinite 4.9s; }
.navegador.is-andando .flota--google { animation: flotar var(--ciclo) var(--resorte) infinite 5.9s; }
@keyframes armar { 0% { opacity: 0; transform: translateY(10px); } 4% { opacity: 1; transform: none; } 88% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } }
@keyframes armar-linea { 0% { opacity: 0; transform: scaleX(.2); } 5% { opacity: 1; transform: none; } 88% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } }
@keyframes armar-img { 0% { opacity: 0; transform: scale(.94); } 6% { opacity: 1; transform: none; } 88% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes flotar { 0% { opacity: 0; transform: translateY(24px) scale(.92); } 5% { opacity: 1; transform: none; } 60% { opacity: 1; transform: translateY(-4px); } 75% { opacity: 1; transform: none; } 82%, 100% { opacity: 0; transform: translateY(-6px) scale(.98); } }

@media (max-width: 959px) {
  .navegador { transform: none; margin: 0 6px 30px; }
  .flota--turno { right: -3%; width: 50%; }
  .flota--chat { left: -3%; width: 56%; }
  .flota--google { width: 64%; right: 4%; }
}
@media (max-width: 520px) {
  .navegador { aspect-ratio: 4 / 4.2; }
  .flota { font-size: 11px; }
  .flota--turno { top: 14%; padding: 11px; }
  .flota--chat { bottom: 16%; }
}

/* ---------- Extras y proceso ---------- */
.extras { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 14px; margin-top: clamp(72px, 9vw, 110px); }
@media (max-width: 599px) {
  .extras { grid-template-columns: 1fr 1fr; gap: 10px; }
  .extra { padding: 18px 16px; border-radius: 20px; }
  .extra > svg { width: 24px; height: 24px; padding: 6px; border-radius: 12px; }
  .extra h4 { margin-top: 12px; font-size: .98rem; line-height: 1.25; }
  .extra p { font-size: 13.5px; }
  .arbol__raiz { padding: 10px 20px 10px 10px; }
  .arbol__raiz b { font-size: 19px; }
  .arbol__raiz span { font-size: 12px; }
}
.extra { padding: 26px 24px 24px; }
.extra > svg { width: 30px; height: 30px; padding: 7px; box-sizing: content-box; border-radius: 14px; color: var(--celeste); background: var(--celeste-suave); stroke-width: 1.8; }
.extra h4 { margin-top: 18px; font-size: 1.08rem; font-weight: 680; letter-spacing: -.02em; }
.extra p { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--texto-2); }

.proceso { position: relative; display: grid; gap: 26px; counter-reset: paso; }
.proceso li { position: relative; padding-left: 64px; }
.proceso li > span {
  position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  font-weight: 720; color: var(--celeste-oscuro); background: #fff; box-shadow: 0 0 0 1.5px rgba(0, 158, 227, .45), 0 8px 18px -10px rgba(0, 120, 200, .6);
}
.proceso h4 { font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em; padding-top: 10px; }
.proceso p { margin-top: 6px; color: var(--texto-2); font-size: 15.5px; }
.proceso::before {
  content: ''; position: absolute; left: 22px; top: 46px; bottom: 30px; width: 2px;
  background: linear-gradient(var(--celeste), var(--azul)); transform-origin: top; transform: scaleY(0); transition: transform 1.6s var(--suave);
}
.proceso.is-visible::before { transform: none; }
@media (min-width: 900px) {
  .proceso { grid-template-columns: repeat(4, 1fr); gap: 28px; }
  .proceso li { padding-left: 0; padding-top: 66px; }
  .proceso h4 { padding-top: 0; }
  .proceso::before { left: 46px; right: 12%; top: 22px; bottom: auto; width: auto; height: 2px; transform-origin: left; transform: scaleX(0); }
}

/* ---------- Editor de código (FiveM) ---------- */
.editor {
  position: relative; border-radius: 22px; overflow: hidden; background: #0d1b33; color: #cfe3ff;
  box-shadow: 0 0 0 1px rgba(11, 27, 51, .2), var(--sombra-alta);
  transform: perspective(1600px) rotateY(7deg) rotateX(3deg); transform-origin: 40% 50%;
}
.editor__barra { display: flex; align-items: center; gap: 7px; height: 44px; padding: 0 16px; background: #0a162b; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.editor__barra > i { width: 11px; height: 11px; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.editor__barra span { margin-left: 12px; font-family: var(--mono); font-size: 12.5px; color: #7f9bc4; }
.editor__codigo {
  margin: 0; padding: 22px 24px; min-height: 290px; font-family: var(--mono); font-size: clamp(12px, 1.25vw, 14px); line-height: 1.75;
  white-space: pre-wrap; word-break: break-word; tab-size: 2;
}
.editor__codigo .k { color: #57c7ff; }
.editor__codigo .s { color: #9be3a4; }
.editor__codigo .n { color: #ffcf6b; }
.editor__codigo .c { color: #5f7899; font-style: italic; }
.editor__codigo .f { color: #c7b4ff; }
.editor__cursor { display: inline-block; width: 8px; height: 1.15em; margin-left: 1px; vertical-align: -3px; background: #57c7ff; animation: cursor 1s steps(1) infinite; }
@keyframes cursor { 50% { opacity: 0; } }
.editor__consola { padding: 14px 24px 18px; font-family: var(--mono); font-size: 12.5px; color: #8fa8cc; background: #0a162b; border-top: 1px solid rgba(255, 255, 255, .06); }
.editor__consola p { opacity: 0; transform: translateY(6px); transition: opacity .5s, transform .5s var(--suave); }
.editor__consola.is-listo p { opacity: 1; transform: none; }
.editor__consola.is-listo p + p { transition-delay: .35s; }
.c-ok { color: #4fe0a8; }
@media (max-width: 959px) { .editor { transform: none; } .editor__codigo { min-height: 250px; } }

.proximo { display: grid; gap: 16px; align-items: center; margin-top: clamp(80px, 10vw, 120px); padding: 26px; box-shadow: 0 0 0 1.5px rgba(0, 158, 227, .25); background: linear-gradient(120deg, #fff, var(--celeste-suave)); }
.proximo__icono { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; color: var(--celeste); background: #fff; box-shadow: 0 0 0 1px rgba(0, 158, 227, .25); }
.proximo__icono svg { width: 26px; height: 26px; }
.proximo h4 { font-size: 1.2rem; font-weight: 720; letter-spacing: -.02em; }
.proximo p { margin-top: 4px; color: var(--texto-2); }
@media (min-width: 760px) { .proximo { grid-template-columns: auto 1fr auto; padding: 26px 30px; } }

/* =========================================================
   REDES (órbita)
   ========================================================= */
.redes-sec { background: var(--fondo-2); }
.mundos__grilla { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .mundos__grilla { grid-template-columns: 1.1fr .9fr; gap: 56px; } }

.orbita { position: relative; width: min(100%, 540px); aspect-ratio: 1; margin-inline: auto; container-type: inline-size; }
.orbita__anillo { position: absolute; border-radius: 50%; pointer-events: none; }
.orbita__anillo--1 { inset: 10%; border: 1.5px dashed rgba(0, 158, 227, .3); }
.orbita__anillo--2 { inset: 27%; border: 1px solid rgba(0, 158, 227, .14); background: radial-gradient(circle, rgba(0, 177, 234, .1), transparent 70%); }
.orbita__centro {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 30%; aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%;
  background: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.orbita__sol { position: absolute; inset: -22%; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(0, 158, 227, .22) 0 6deg, transparent 6deg 15deg); -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 70%); mask-image: radial-gradient(circle, #000 30%, transparent 70%); animation: girar 60s linear infinite; }
.orbita__centro img { position: relative; width: 100%; height: 100%; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px #fff, 0 0 0 6px rgba(0, 158, 227, .5), 0 20px 40px -18px rgba(11, 45, 100, .55); transition: transform .5s var(--resorte); }
.orbita__centro:hover img, .orbita__centro.is-activo img { transform: scale(1.04); }

.orbita__giro { position: absolute; inset: 0; animation: girar 80s linear infinite; }
.planeta {
  position: absolute; left: 50%; top: 50%; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transform: translate(-50%, -50%) rotate(var(--a)) translateY(-40cqw) rotate(calc(-1 * var(--a)));
}
.planeta__in { display: flex; flex-direction: column; align-items: center; gap: 8px; animation: girar 80s linear infinite reverse; }
.planeta__bola {
  display: grid; place-items: center; width: clamp(54px, 14cqw, 74px); aspect-ratio: 1; border-radius: 50%;
  color: var(--celeste); background: radial-gradient(circle at 32% 28%, #fff, #eaf7fe 60%, #cdeefc);
  box-shadow: 0 0 0 1px rgba(0, 158, 227, .3), 0 14px 26px -14px rgba(0, 120, 200, .7);
  transition: transform .5s var(--resorte), box-shadow .4s, color .3s, background .3s;
}
.planeta__bola svg { width: 46%; height: 46%; stroke-width: 1.8; }
.planeta__nombre { padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 620; white-space: nowrap; color: var(--texto-2); background: rgba(255, 255, 255, .9); box-shadow: 0 0 0 1px var(--linea); }
.planeta:hover .planeta__bola { transform: scale(1.1); }
.planeta.is-activo .planeta__bola { transform: scale(1.14); color: #fff; background: linear-gradient(145deg, #1cc0f5, var(--celeste) 55%, var(--azul)); box-shadow: 0 0 0 6px rgba(0, 158, 227, .15), 0 18px 30px -12px rgba(0, 120, 200, .8); }
.planeta.is-activo .planeta__nombre { color: var(--texto); }
.orbita:hover .orbita__giro, .orbita:hover .planeta__in, .orbita:focus-within .orbita__giro, .orbita:focus-within .planeta__in { animation-play-state: paused; }

.mundo { padding: 34px 32px 30px; }
.mundo > * { transition: opacity .3s, transform .4s var(--suave); }
.mundo.is-cambiando > *:not(.mundo__pista) { opacity: 0; transform: translateY(6px); }
.mundo__tipo { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--celeste-oscuro); }
.mundo__titulo { margin-top: 10px; font-size: clamp(2rem, 3.6vw, 2.8rem); font-weight: 780; letter-spacing: -.045em; line-height: 1.05; }
.mundo__texto { margin-top: 12px; color: var(--texto-2); font-size: 1.05rem; }
.mundo__usuario { margin-top: 18px; display: inline-flex; padding: 7px 14px; border-radius: 999px; font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--celeste-oscuro); background: var(--celeste-suave); }
.mundo__usuario a { text-decoration: underline; text-underline-offset: 3px; }
.mundo__pista { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--linea); font-size: 14px; color: var(--texto-3); }

.redes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.redes:empty { display: none; }
.red {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 11px; border-radius: 999px;
  font-size: 14px; font-weight: 580; background: #fff; box-shadow: 0 0 0 1px var(--linea-2);
  transition: box-shadow .3s, color .3s, transform .3s var(--suave);
}
.red svg { width: 18px; height: 18px; }
.red:hover { color: var(--celeste-oscuro); box-shadow: 0 0 0 1.5px rgba(0, 158, 227, .5); transform: translateY(-1px); }

/* =========================================================
   CONTACTO
   ========================================================= */
.contacto { background: linear-gradient(180deg, #fff, var(--fondo-2) 120%); }
.contacto__grilla { display: grid; gap: 40px; align-items: start; }
@media (min-width: 960px) { .contacto__grilla { grid-template-columns: .85fr 1.15fr; gap: 64px; } .contacto__intro { position: sticky; top: 120px; } }
.contacto__firma { display: flex; align-items: center; gap: 14px; margin-top: 34px; }
.contacto__firma b { display: block; font-size: 18px; font-weight: 740; letter-spacing: -.03em; }
.contacto__firma span:not(.marca-sol) { font-size: 14px; color: var(--texto-3); }

.brief { padding: clamp(24px, 3.4vw, 36px); }
.brief fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.brief legend { padding: 0; font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em; }
.opciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.opciones label { position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.opciones input { position: absolute; opacity: 0; pointer-events: none; }
.opciones span {
  display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; border-radius: 999px; font-size: 15px; font-weight: 560;
  color: var(--texto-2); background: #fff; box-shadow: 0 0 0 1px var(--linea-2);
  transition: background-color .25s, color .25s, box-shadow .25s, transform .3s var(--resorte);
}
.opciones span::before { content: ''; width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--texto-3); transition: background-color .25s, box-shadow .25s; }
.opciones input:checked + span { color: #00618e; background: var(--celeste-suave); box-shadow: 0 0 0 1.5px var(--celeste); }
.opciones input:checked + span::before { background: var(--celeste); box-shadow: none; }
.opciones input:focus-visible + span { outline: 2.5px solid var(--celeste); outline-offset: 2px; }
.opciones label:active span { transform: scale(.96); }
.campos { display: grid; gap: 14px; margin-top: 26px; }
@media (min-width: 640px) { .campos { grid-template-columns: 1fr 1fr; } .campo--ancho { grid-column: 1 / -1; } }
.campo { display: grid; gap: 7px; }
.campo > span { font-size: 14px; font-weight: 600; color: var(--texto-2); }
.campo em { font-style: normal; font-weight: 450; color: var(--texto-3); }
.campo input, .campo textarea {
  width: 100%; padding: 14px 16px; border: 0; border-radius: 14px; font: inherit; font-size: 16px; color: var(--texto);
  background: var(--fondo-2); box-shadow: inset 0 0 0 1px var(--linea);
  transition: box-shadow .25s, background-color .25s; resize: vertical;
}
.campo input::placeholder, .campo textarea::placeholder { color: var(--texto-3); }
.campo input:focus, .campo textarea:focus { outline: none; background: #fff; box-shadow: inset 0 0 0 1.5px var(--celeste), 0 0 0 4px rgba(0, 158, 227, .12); }
.brief__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 26px; }
.brief__nota { font-size: 15px; color: var(--texto-3); }

/* =========================================================
   PIE
   ========================================================= */
.pie { padding: 64px 0 calc(36px + env(safe-area-inset-bottom)); background: var(--fondo-2); border-top: 1px solid var(--linea); }
.pie__grilla { display: grid; gap: 30px; }
.pie__marca p { margin-top: 14px; color: var(--texto-2); font-size: 15px; }
.pie__links { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.pie__links a { font-weight: 560; color: var(--texto-2); }
.pie__links a:hover { color: var(--celeste-oscuro); }
.redes--pie { margin-top: 0; }
.pie__fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 26px; border-top: 1px solid var(--linea); font-size: 14px; color: var(--texto-3); }
@media (min-width: 900px) {
  .pie__grilla { grid-template-columns: 1.2fr 1fr 1fr; align-items: start; }
  .pie__fila { grid-column: 1 / -1; }
}

/* Insignia «Diseñado por Kalifo» (mismo kit que en las webs de clientes, en celeste) */
.kalifo {
  --k-tam: 38px;
  --k-anillo: rgba(0, 158, 227, .6); --k-brillo: rgba(0, 177, 234, .45);
  --k-rayo-a: #bfe9fb; --k-rayo-b: #009ee3; --k-centro: rgba(255, 255, 255, .45); --k-sombra: rgba(11, 27, 51, .25);
  --k-texto: var(--texto-2); --k-texto-hover: var(--texto);
  --k-fondo: #fff; --k-fondo-hover: #fff; --k-borde: var(--linea-2); --k-borde-hover: rgba(0, 158, 227, .45);
  --k-nombre: var(--degrade);
  display: inline-flex; align-items: center; gap: 12px; padding: 5px 18px 5px 6px; border-radius: 999px;
  font-size: .85rem; font-weight: 600; line-height: 1.2; color: var(--k-texto);
  background: var(--k-fondo); box-shadow: inset 0 0 0 1px var(--k-borde);
  cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: box-shadow .4s, color .4s, transform .3s var(--suave);
}
.kalifo:hover { color: var(--k-texto-hover); box-shadow: inset 0 0 0 1px var(--k-borde-hover); }
.kalifo:active { transform: scale(.97); }
.kalifo b { font-weight: 800; background: var(--k-nombre); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kalifo__avatar { position: relative; flex: none; width: var(--k-tam); height: var(--k-tam); border-radius: 50%; box-shadow: 0 0 0 1.5px var(--k-anillo), 0 8px 18px -8px rgba(11, 45, 100, .5); }
.kalifo__avatar::before, .kalifo__avatar::after { content: ''; position: absolute; inset: 0; border-radius: 50%; }
.kalifo__avatar::before { background: repeating-conic-gradient(from 0deg, var(--k-rayo-a) 0 9deg, var(--k-rayo-b) 9deg 18deg); animation: girar 40s linear infinite; }
.kalifo__avatar::after { background: radial-gradient(circle, var(--k-centro) 0 26%, transparent 55%, var(--k-sombra) 100%); }
.kalifo__avatar img {
  --k-img: calc(var(--k-tam) * 1.3); --k-cy: calc(var(--k-img) - var(--k-tam) / 2);
  position: absolute; z-index: 1; left: calc((var(--k-tam) - var(--k-img)) / 2); bottom: 0;
  width: var(--k-img); height: var(--k-img); max-width: none; filter: drop-shadow(0 2px 3px rgba(11, 27, 51, .35));
  transform-origin: calc(var(--k-img) / 2) var(--k-cy);
  -webkit-mask-image: linear-gradient(#000, #000), radial-gradient(circle calc(var(--k-tam) / 2) at calc(var(--k-img) / 2) var(--k-cy), #000 95%, transparent 100%);
  mask-image: linear-gradient(#000, #000), radial-gradient(circle calc(var(--k-tam) / 2) at calc(var(--k-img) / 2) var(--k-cy), #000 95%, transparent 100%);
  -webkit-mask-size: 100% var(--k-cy), 100% 100%; mask-size: 100% var(--k-cy), 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.kalifo.is-saludo .kalifo__avatar img { animation: k-salto .85s var(--resorte); }
.kalifo.is-saludo .kalifo__avatar { animation: k-anillo .85s var(--suave); }
.kalifo__chispa {
  position: absolute; left: 50%; top: 50%; z-index: 2; width: 8px; height: 8px; margin: -4px; pointer-events: none;
  background: var(--k-nombre); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: k-chispa .85s var(--suave) forwards;
}
@keyframes k-salto { 0% { transform: none; } 28% { transform: scale(1.2) rotate(-9deg); } 52% { transform: scale(.95) rotate(6deg); } 74% { transform: scale(1.05) rotate(-2deg); } 100% { transform: none; } }
@keyframes k-anillo { 30% { box-shadow: 0 0 0 3px var(--k-anillo), 0 0 26px 6px var(--k-brillo); } }
@keyframes k-chispa { 0% { transform: translate(0, 0) scale(0) rotate(0); opacity: 1; } 60% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(var(--s)) rotate(180deg); opacity: 0; } }

/* =========================================================
   APARICIÓN AL BAJAR
   ========================================================= */
.js .revelar { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--suave), transform 1s var(--suave); transition-delay: var(--d, 0s); }
.js .revelar.is-visible { opacity: 1; transform: none; }
.js .navegador.revelar { transform: perspective(1600px) rotateY(-7deg) rotateX(3deg) translateY(40px); }
.js .navegador.revelar.is-visible { transform: perspective(1600px) rotateY(-7deg) rotateX(3deg); }
.js .editor.revelar { transform: perspective(1600px) rotateY(7deg) rotateX(3deg) translateY(40px); }
.js .editor.revelar.is-visible { transform: perspective(1600px) rotateY(7deg) rotateX(3deg); }
@media (max-width: 959px) {
  .js .navegador.revelar, .js .editor.revelar { transform: translateY(30px); }
  .js .navegador.revelar.is-visible, .js .editor.revelar.is-visible { transform: none; }
}

/* =========================================================
   MENOS MOVIMIENTO
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .js .revelar { opacity: 1; transform: none; }
  .navegador .mini-nav, .navegador .mini-hero__texto i, .navegador .mini-boton, .navegador .mini-hero__img, .navegador .mini-tarjetas span, .flota, .flota__ok, .burbuja--bot { opacity: 1 !important; animation: none !important; }
  .cinta__pista { animation: none; }
}