/* ═══════════════════════════════════════════════════════════════
   A3T — sitio corporativo
   Marca: azul A3T #0e427b + negro del monograma. Títulos en serif
   (Fraunces) para hacer juego con el logotipo; texto en Inter.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --marca: #0e427b;
  --marca-fuerte: #0a2f59;
  --marca-suave: #e8eff8;
  --acento: #0ea5a4;          /* Tekium */
  --def: #7c5cbf;             /* DefSystems */
  --fondo: #ffffff;
  --fondo-tenue: #f5f7fa;
  --superficie: #ffffff;
  --tinta: #0b1320;
  --tinta-2: #3f4b5e;
  --tinta-3: #6b7689;
  --borde: #dfe4ec;
  --sombra: 0 1px 2px rgb(11 19 32 / .05), 0 8px 24px rgb(11 19 32 / .06);
  --radio: 14px;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --marca: #60a5fa;
    --marca-fuerte: #93c5fd;
    --marca-suave: #13233b;
    --acento: #2dd4bf;
    --def: #a78bfa;
    --fondo: #0a1220;
    --fondo-tenue: #0e1829;
    --superficie: #111c2f;
    --tinta: #eef2f8;
    --tinta-2: #c1cad8;
    --tinta-3: #8b97aa;
    --borde: #1f2d44;
    --sombra: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px rgb(0 0 0 / .25);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --marca: #60a5fa; --marca-fuerte: #93c5fd; --marca-suave: #13233b;
  --acento: #2dd4bf; --def: #a78bfa;
  --fondo: #0a1220; --fondo-tenue: #0e1829; --superficie: #111c2f;
  --tinta: #eef2f8; --tinta-2: #c1cad8; --tinta-3: #8b97aa; --borde: #1f2d44;
  --sombra: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px rgb(0 0 0 / .25);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--tinta);
  font: 400 16px/1.6 var(--sans); overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--marca); }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.01em; text-wrap: balance; }
h1 { font-size: clamp(2.2rem, 5.2vw, 3.8rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); max-width: 24ch; }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }

.contenedor { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .contenedor { padding: 0 32px; } }

.saltar { position: absolute; left: -999px; top: 8px; background: var(--marca); color: #fff; padding: 8px 12px; border-radius: 8px; z-index: 100; }
.saltar:focus { left: 8px; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }

.antetitulo {
  font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--marca); margin-bottom: .8em;
}

/* ── Botones ───────────────────────────────────────────────── */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  background: var(--marca); color: #fff; border: 1px solid var(--marca);
  font: 600 .95rem/1 var(--sans); padding: .95em 1.3em; border-radius: 10px;
  text-decoration: none; cursor: pointer; transition: background .15s, transform .15s;
}
.boton:hover { background: var(--marca-fuerte); border-color: var(--marca-fuerte); }
.boton:active { transform: translateY(1px); }
.boton--chico { padding: .65em 1em; font-size: .88rem; }
.boton--fantasma { background: transparent; color: var(--marca); }
.boton--fantasma:hover { background: var(--marca-suave); color: var(--marca); }
.boton--claro { background: #fff; color: #0e427b; border-color: #fff; }
.boton--claro:hover { background: #e8eff8; border-color: #e8eff8; }
.boton[disabled] { opacity: .6; cursor: progress; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .boton:not(.boton--fantasma):not(.boton--claro) { color: #0a1220; } }
:root[data-theme="dark"] .boton:not(.boton--fantasma):not(.boton--claro) { color: #0a1220; }

.enlace { font-weight: 600; text-decoration: none; }
.enlace:hover { text-decoration: underline; }

/* ── Barra superior ────────────────────────────────────────── */
.barra {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--fondo) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent; transition: border-color .2s;
}
.barra.con-borde { border-bottom-color: var(--borde); }
.barra__fila { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.marca { display: flex; align-items: center; gap: .55em; text-decoration: none; color: var(--tinta); }
.marca__texto { font: 600 1.35rem/1 var(--serif); letter-spacing: .02em; }
.marca__logo { width: 40px; height: 40px; }
.marca__logo--oscuro { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .marca__logo--claro { display: none; }
  :root:not([data-theme="light"]) .marca__logo--oscuro { display: block; }
}
:root[data-theme="dark"] .marca__logo--claro { display: none; }
:root[data-theme="dark"] .marca__logo--oscuro { display: block; }

.menu { display: flex; align-items: center; gap: 1.6rem; }
.menu a:not(.boton) { color: var(--tinta-2); text-decoration: none; font-weight: 500; font-size: .95rem; }
.menu a:not(.boton):hover { color: var(--marca); }
.menu__abrir { display: none; background: none; border: 0; padding: 10px; cursor: pointer; }
.menu__abrir span { display: block; width: 22px; height: 2px; background: var(--tinta); margin: 5px 0; transition: transform .2s, opacity .2s; }

@media (max-width: 820px) {
  .menu__abrir { display: block; }
  .menu {
    position: fixed; inset: 68px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--fondo); border-bottom: 1px solid var(--borde); padding: 8px 16px 16px;
    transform: translateY(-120%); transition: transform .25s; visibility: hidden;
  }
  .menu.abierto { transform: none; visibility: visible; }
  .menu a:not(.boton) { padding: 14px 4px; border-bottom: 1px solid var(--borde); }
  .menu .boton { margin-top: 12px; }
  .menu__abrir[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu__abrir[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu__abrir[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ── Portada ───────────────────────────────────────────────── */
.portada {
  padding: 72px 0 80px;
  background:
    radial-gradient(900px 420px at 85% -10%, color-mix(in srgb, var(--marca) 16%, transparent), transparent 70%),
    radial-gradient(700px 380px at -10% 110%, color-mix(in srgb, var(--acento) 10%, transparent), transparent 70%),
    var(--fondo);
}
.portada__rejilla { display: grid; gap: 48px; align-items: center; }
@media (min-width: 980px) { .portada__rejilla { grid-template-columns: 1.35fr 1fr; gap: 64px; } }
.portada h1 { max-width: 14ch; }
.portada__bajada { font-size: 1.15rem; color: var(--tinta-2); max-width: 56ch; }
.portada__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.cifras { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cifras li {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 20px; box-shadow: var(--sombra);
}
.cifras strong { display: block; font: 600 2.3rem/1 var(--serif); color: var(--marca); margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.cifras span { font-size: .9rem; color: var(--tinta-2); line-height: 1.4; display: block; }

/* ── Secciones ─────────────────────────────────────────────── */
.seccion { padding: 88px 0; }
.seccion--tenue { background: var(--fondo-tenue); }
.seccion__bajada { font-size: 1.08rem; color: var(--tinta-2); max-width: 64ch; margin-bottom: 40px; }

.empresas { display: grid; gap: 16px; margin-top: 8px; }
@media (min-width: 860px) { .empresas { grid-template-columns: repeat(3, 1fr); } }
.empresa {
  --c: var(--marca);
  background: var(--superficie); border: 1px solid var(--borde); border-top: 4px solid var(--c);
  border-radius: var(--radio); padding: 28px; box-shadow: var(--sombra); display: flex; flex-direction: column;
}
.empresa--tekium { --c: var(--acento); }
.empresa--def { --c: var(--def); }
.empresa__etiqueta { font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--c); margin-bottom: .6em; }
.empresa p { color: var(--tinta-2); flex: 1; }
.empresa .enlace { color: var(--c); }

.valores { display: grid; gap: 24px; margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--borde); }
@media (min-width: 860px) { .valores { grid-template-columns: repeat(3, 1fr); gap: 40px; } }
.valores p { color: var(--tinta-2); margin: 0; }

/* Filtros de servicios */
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 32px; }
.filtros button {
  font: 500 .92rem/1 var(--sans); padding: .7em 1.1em; border-radius: 999px; cursor: pointer;
  background: var(--superficie); color: var(--tinta-2); border: 1px solid var(--borde);
}
.filtros button[aria-selected="true"] { background: var(--tinta); color: var(--fondo); border-color: var(--tinta); }

.servicios { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.servicio {
  --c: var(--marca);
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 24px; display: flex; flex-direction: column;
}
.servicio[data-e="tekium"] { --c: var(--acento); }
.servicio[data-e="def"] { --c: var(--def); }
.servicio__empresa { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--c); margin-bottom: 10px; }
.servicio__empresa::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.servicio h3 { font-size: 1.15rem; }
.servicio p { color: var(--tinta-2); font-size: .95rem; flex: 1; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.chips li { font-size: .75rem; padding: .3em .65em; border-radius: 6px; background: var(--fondo-tenue); color: var(--tinta-2); border: 1px solid var(--borde); }
.seccion--tenue .chips li { background: var(--fondo); }

/* Pasos */
.pasos { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); counter-reset: paso; }
.pasos li { border-top: 2px solid var(--marca); padding-top: 18px; }
.pasos span { font: 600 .85rem/1 var(--sans); color: var(--marca); letter-spacing: .08em; }
.pasos h3 { margin-top: 10px; }
.pasos p { color: var(--tinta-2); font-size: .95rem; margin: 0; }

.reglas { margin-top: 56px; background: var(--marca-suave); border-radius: var(--radio); padding: 32px; }
.reglas ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px 32px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); counter-reset: r; }
.reglas li { counter-increment: r; padding-left: 2.2em; position: relative; color: var(--tinta-2); }
.reglas li::before { content: counter(r); position: absolute; left: 0; top: .05em; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--marca); color: var(--fondo); font: 600 .8rem/1.6em var(--sans); text-align: center; }

/* Casos */
.casos { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.caso { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 26px; display: flex; flex-direction: column; box-shadow: var(--sombra); }
.caso__sector { font-size: .8rem; color: var(--tinta-3); font-weight: 500; margin-bottom: 8px; }
.caso h3 { font-size: 1.25rem; }
.caso p { color: var(--tinta-2); font-size: .95rem; flex: 1; }

/* Logos */
.logos { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(44%, 150px), 1fr)); }
.logos li {
  background: #fff; border: 1px solid var(--borde); border-radius: 12px; height: 86px;
  display: grid; place-items: center; padding: 14px;
}
.logos img { max-height: 54px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .78; transition: filter .2s, opacity .2s; }
.logos li:hover img { filter: none; opacity: 1; }
@media (hover: none) { .logos img { filter: none; opacity: 1; } }
.alianzas { margin-top: 48px; }
.alianzas p { color: var(--tinta-2); max-width: 80ch; }

/* Contacto */
.seccion--marca { background: #0e427b; color: #fff; }
.seccion--marca .antetitulo { color: #9cc3ef; }
.seccion--marca a { color: #fff; }
.contacto { display: grid; gap: 40px; }
@media (min-width: 920px) { .contacto { grid-template-columns: 1fr 1.2fr; gap: 64px; } }
.contacto__texto p { color: #d6e4f5; font-size: 1.08rem; }
.datos { display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; margin: 28px 0 0; }
.datos dt { color: #9cc3ef; font-size: .85rem; font-weight: 600; padding-top: .15em; }
.datos dd { margin: 0; color: #fff; overflow-wrap: anywhere; }

.formulario { display: grid; gap: 14px; grid-template-columns: 1fr; background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .16); border-radius: var(--radio); padding: 24px; }
@media (min-width: 600px) { .formulario { grid-template-columns: 1fr 1fr; padding: 28px; } }
.campo--ancho { grid-column: 1 / -1; }
.campo label { display: block; font-size: .85rem; font-weight: 500; color: #d6e4f5; margin-bottom: 6px; }
.campo input, .campo select, .campo textarea {
  width: 100%; font: 400 1rem/1.4 var(--sans); color: #0b1320; background: #fff;
  border: 1px solid transparent; border-radius: 10px; padding: .75em .85em;
}
.campo textarea { resize: vertical; min-height: 120px; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 2px solid #9cc3ef; outline-offset: 1px; }
.campo [aria-invalid="true"] { border-color: #f87171; box-shadow: 0 0 0 1px #f87171; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.aviso { font-size: .82rem; color: #b8cde6; margin: 0; }
.formulario__estado { margin: 0; min-height: 1.4em; font-weight: 500; }
.formulario__estado.ok { color: #86efac; }
.formulario__estado.error { color: #fecaca; }

/* Pie */
.pie { padding: 32px 0 96px; border-top: 1px solid var(--borde); background: var(--fondo); }
.pie__fila { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; }
.pie__marca { display: flex; align-items: center; gap: 10px; font-weight: 500; color: var(--tinta-2); }
.pie__marca .marca__logo { width: 32px; height: 32px; }
.pie__redes { display: flex; flex-wrap: wrap; gap: 18px; }
.pie__redes a { color: var(--tinta-2); text-decoration: none; font-size: .92rem; }
.pie__redes a:hover { color: var(--marca); }
.pie__copy { width: 100%; font-size: .85rem; color: var(--tinta-3); margin: 0; }

/* ── Asistente ─────────────────────────────────────────────── */
.asistente__lanzador {
  position: fixed; right: 16px; bottom: 16px; z-index: 60;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--marca); color: #fff; border: 0; border-radius: 999px;
  padding: 14px 18px; font: 600 .95rem/1 var(--sans); cursor: pointer;
  box-shadow: 0 10px 30px rgb(14 66 123 / .35);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .asistente__lanzador { color: #0a1220; } }
:root[data-theme="dark"] .asistente__lanzador { color: #0a1220; }
.asistente__lanzador[aria-expanded="true"] { display: none; }

.asistente {
  position: fixed; right: 16px; bottom: 16px; z-index: 70;
  width: min(400px, calc(100vw - 32px)); height: min(620px, calc(100dvh - 32px));
  background: var(--superficie); color: var(--tinta); border: 1px solid var(--borde);
  border-radius: 18px; box-shadow: 0 24px 60px rgb(0 0 0 / .25);
  display: flex; flex-direction: column; overflow: hidden;
}
.asistente[hidden] { display: none; }
@media (max-width: 520px) {
  .asistente { right: 0; bottom: 0; width: 100vw; height: 100dvh; border-radius: 0; border: 0; }
}
.asistente__cabeza { display: flex; justify-content: space-between; gap: 12px; padding: 16px 18px; background: #0e427b; color: #fff; }
.asistente__cabeza h2 { font-size: 1.1rem; margin: 0 0 2px; }
.asistente__cabeza p { font-size: .82rem; margin: 0; color: #cfe0f4; }
.asistente__cerrar { background: none; border: 0; color: #fff; font-size: 1.8rem; line-height: 1; cursor: pointer; padding: 0 4px; align-self: flex-start; }
.asistente__mensajes { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.burbuja { max-width: 86%; padding: 10px 14px; border-radius: 14px; font-size: .95rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.burbuja--bot { background: var(--fondo-tenue); border: 1px solid var(--borde); align-self: flex-start; border-bottom-left-radius: 4px; }
.burbuja--yo { background: var(--marca); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .burbuja--yo { color: #0a1220; } }
:root[data-theme="dark"] .burbuja--yo { color: #0a1220; }
.burbuja--error { background: transparent; border: 1px dashed #f87171; color: var(--tinta-2); }
.burbuja__repetir { display: inline-block; margin-top: 6px; font-size: .8rem; background: none; border: 0; color: var(--marca); cursor: pointer; padding: 0; font-weight: 600; }
.escribiendo span { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--tinta-3); margin-right: 4px; animation: punto 1.2s infinite; }
.escribiendo span:nth-child(2) { animation-delay: .15s; }
.escribiendo span:nth-child(3) { animation-delay: .3s; }
@keyframes punto { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.asistente__sugerencias { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 10px; }
.asistente__sugerencias button { font: 500 .8rem/1.2 var(--sans); padding: .55em .8em; border-radius: 999px; border: 1px solid var(--borde); background: var(--fondo); color: var(--tinta-2); cursor: pointer; text-align: left; }
.asistente__sugerencias button:hover { border-color: var(--marca); color: var(--marca); }
.asistente__entrada { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--borde); }
.asistente__entrada input { flex: 1; min-width: 0; font: 400 1rem/1.3 var(--sans); padding: .75em .9em; border-radius: 10px; border: 1px solid var(--borde); background: var(--fondo); color: var(--tinta); }
.asistente__mic, .asistente__enviar { flex: none; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--borde); background: var(--fondo); color: var(--marca); cursor: pointer; display: grid; place-items: center; }
.asistente__enviar { background: var(--marca); border-color: var(--marca); color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .asistente__enviar { color: #0a1220; } }
:root[data-theme="dark"] .asistente__enviar { color: #0a1220; }
.asistente__mic.grabando { background: #dc2626; border-color: #dc2626; color: #fff; animation: latido 1.2s infinite; }
@keyframes latido { 50% { box-shadow: 0 0 0 6px rgb(220 38 38 / .25); } }
.asistente__nota { font-size: .72rem; color: var(--tinta-3); margin: 0; padding: 0 14px 12px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── Logos de las empresas del grupo ───────────────────────── */
/* Un solo "espacio de marca" de la misma altura en las tres tarjetas;
   cada logo se ajusta por su peso visual, no por su caja. */
.empresa .empresa__marca { height: 64px; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; margin: 4px 0 18px; }
.empresa__marca img { width: auto; max-width: 100%; object-fit: contain; }
.logo-apio { height: 58px; }
.logo-tekium { height: 34px; }
.logo-def { font: 600 1.75rem/1 var(--serif); letter-spacing: -.01em; color: var(--tinta); }
.pie__redes { align-items: center; }
.pie__empresa { display: flex; align-items: center; height: 32px; }
.pie__empresa img { width: auto; max-width: none; }
.pie__empresa .logo-apio { height: 30px; }
.pie__empresa .logo-tekium { height: 16px; }
.solo-oscuro { display: none !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .solo-claro { display: none !important; }
  :root:not([data-theme="light"]) .solo-oscuro { display: block !important; }
}
:root[data-theme="dark"] .solo-claro { display: none !important; }
:root[data-theme="dark"] .solo-oscuro { display: block !important; }

/* ── Esfera flotante del asistente ─────────────────────────── */
.asistente__lanzador { display: none; }
.esfera {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  width: 68px; height: 68px; padding: 0; border: 0; background: none; cursor: pointer;
  border-radius: 50%; animation: flotar 4s ease-in-out infinite;
}
.esfera[aria-expanded="true"] { display: none; }
.esfera__cuerpo {
  position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 32% 28%, #7fb6f2 0%, #2f74c0 28%, #0e427b 62%, #061f3d 100%);
  box-shadow:
    inset -6px -8px 16px rgb(0 0 0 / .35),
    inset 4px 6px 12px rgb(255 255 255 / .18),
    0 14px 28px rgb(14 66 123 / .38),
    0 4px 8px rgb(0 0 0 / .18);
  transition: transform .2s;
}
.esfera__cuerpo svg { position: relative; filter: drop-shadow(0 1px 2px rgb(0 0 0 / .35)); }
.esfera__brillo {
  position: absolute; top: 9%; left: 20%; width: 42%; height: 26%; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgb(255 255 255 / .75), rgb(255 255 255 / 0) 70%);
  transform: rotate(-20deg);
}
.esfera__halo {
  position: absolute; inset: -6px; border-radius: 50%;
  background: radial-gradient(circle, rgb(45 212 191 / .35), rgb(96 165 250 / .15) 55%, transparent 70%);
  animation: halo 2.8s ease-out infinite;
}
.esfera:hover .esfera__cuerpo, .esfera:focus-visible .esfera__cuerpo { transform: scale(1.07); }
.esfera:focus-visible { outline: 3px solid var(--marca); outline-offset: 4px; }
.esfera__globo {
  position: absolute; right: 80px; top: 50%; transform: translateY(-50%) translateX(6px);
  white-space: nowrap; background: var(--superficie); color: var(--tinta); border: 1px solid var(--borde);
  font: 500 .85rem/1 var(--sans); padding: .7em .9em; border-radius: 10px; box-shadow: var(--sombra);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.esfera:hover .esfera__globo, .esfera:focus-visible .esfera__globo, .esfera.saluda .esfera__globo { opacity: 1; transform: translateY(-50%); }
@keyframes flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes halo { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
@media (max-width: 520px) { .esfera { right: 16px; bottom: 16px; width: 60px; height: 60px; } .esfera__globo { right: 70px; } }