/* AGEN · El recorrido — identidad: marino 60 %, blanco 30 %, rojo 10 % (solo detalle). Letra Plus Jakarta Sans. */
:root {
  --marino: #0B1A3A;
  --profundo: #060F26;
  --tinta-suave: #4A5470;
  --borde: #CBD3E2;
  --velo: #ECEFF5;
  --fondo-claro: #F5F6F9;
  --blanco: #FFFFFF;
  --rojo: #E1141E;
  --texto: #FFFFFF;
  --texto-2: #C9D1E3;      /* sobre marino: 11,2:1 */
  --texto-3: #A7B1C8;      /* sobre marino: 7,9:1 */
  --linea: rgba(255, 255, 255, 0.14);
  --ui-texto: #0B1A3A;
  --ui-texto-2: #4A5470;   /* sobre blanco: 7,6:1 */
  --wa-fondo: #EFEAE2;
  --wa-yo: #D9FDD3;
  --wa-azul: #0B6BA8;      /* texto de botones de WhatsApp sobre blanco: 5,9:1 */
  --radio: 22px;
  --sombra: 0 30px 80px -24px rgba(0, 0, 0, 0.55), 0 8px 24px -8px rgba(0, 0, 0, 0.35);
  --fuente: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --barra-alto: 76px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 16px;
  line-height: 1.55;
  color: var(--texto);
  background: var(--marino);
  background-image: radial-gradient(120% 80% at 80% 0%, #13285A 0%, rgba(11, 26, 58, 0) 60%), radial-gradient(90% 70% at 0% 100%, #081433 0%, rgba(11, 26, 58, 0) 60%);
  background-attachment: fixed;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
strong, b { font-weight: 700; }
.ic { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

:focus-visible { outline: 3px solid var(--blanco); outline-offset: 3px; border-radius: 8px; }
.saltar { position: fixed; left: 16px; top: -60px; z-index: 200; background: var(--blanco); color: var(--marino); padding: 12px 18px; border-radius: 12px; font-weight: 700; text-decoration: none; transition: top .2s; }
.saltar:focus { top: 16px; }

/* ---------- Capas fijas ---------- */
#gl, #estela { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#gl { z-index: 0; }
#orbitas { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
#estela { z-index: 30; }
#punto { position: fixed; left: 0; top: 0; z-index: 31; width: 16px; height: 16px; pointer-events: none; opacity: 0; will-change: transform; --pulso: 0; }
.cargado #punto { opacity: 1; transition: opacity .6s .4s; }
.punto-nucleo, .punto-onda { position: absolute; inset: 0; border-radius: 50%; }
.punto-nucleo { background: radial-gradient(circle at 35% 30%, #FF5A60 0%, var(--rojo) 45%, #A80C14 100%); box-shadow: 0 0 14px 3px rgba(225, 20, 30, 0.6), 0 0 42px 10px rgba(225, 20, 30, 0.22); }
.punto-onda { border: 2px solid var(--rojo); transform: scale(calc(1 + var(--pulso) * 1.9)); opacity: calc(var(--pulso) * 0.85); }
.sin-movimiento #punto, .sin-movimiento #estela, .no-js #punto { display: none; }

main { position: relative; z-index: 2; }

/* ---------- Planetas de los rubros (los mueve gl.js) ---------- */
.planeta {
  position: absolute; left: 0; top: 0;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px 6px 6px; border-radius: 999px;
  font-size: 13px; font-weight: 600; white-space: nowrap; color: var(--blanco);
  background: rgba(6, 15, 38, 0.72); border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; will-change: transform, opacity;
}
.planeta .ic { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--blanco); color: var(--marino); stroke-width: 2; }

/* ---------- Barra superior ---------- */
.barra {
  position: fixed; inset: 0 0 auto 0; z-index: 40; height: var(--barra-alto);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 clamp(16px, 4vw, 48px);
  background: linear-gradient(rgba(11, 26, 58, 0.92), rgba(11, 26, 58, 0.55) 70%, rgba(11, 26, 58, 0));
}
.barra-logo { display: flex; align-items: center; min-height: 44px; }
.barra-logo img { height: 46px; width: auto; }
.barra-der { display: flex; align-items: center; gap: 14px; }
.sello-meta, .sello-synetia { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--texto-2); padding: 8px 12px; border: 1px solid var(--linea); border-radius: 999px; }
.sello-meta img { filter: brightness(0) invert(1); }
.progreso { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--rojo); transform-origin: 0 50%; transform: scaleX(0); }

.boton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 10px 20px; border-radius: 999px; font-weight: 700; font-size: 15px; text-decoration: none; transition: transform .2s, background-color .2s, color .2s, border-color .2s; cursor: pointer; }
.boton-principal { background: var(--blanco); color: var(--marino); }
.boton-principal:hover { transform: translateY(-1px); background: var(--velo); }
.boton-borde { border: 1.5px solid rgba(255, 255, 255, 0.55); color: var(--blanco); }
.boton-borde:hover { border-color: var(--blanco); background: rgba(255, 255, 255, 0.06); }
.boton-grande { min-height: 54px; padding: 14px 26px; font-size: 16px; }
.boton-flecha { color: var(--rojo); width: 20px; height: 20px; stroke-width: 2.4; transition: transform .2s; }
.boton:hover .boton-flecha { transform: translateX(3px); }

/* Sello fijo «un producto de SynetIA» */
.sello-fijo {
  position: fixed; left: 16px; bottom: 16px; z-index: 39;
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 16px 8px 10px;
  border-radius: 999px; font-size: 13px; color: var(--texto-2); text-decoration: none;
  background: rgba(6, 15, 38, 0.82); border: 1px solid var(--linea);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.sello-fijo b { color: var(--blanco); }

/* Riel de capítulos */
.riel { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 39; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.riel a { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-height: 28px; text-decoration: none; font-size: 12px; font-weight: 600; color: var(--texto-2); }
.riel a span { opacity: 0; transform: translateX(6px); transition: opacity .2s, transform .2s; background: rgba(6, 15, 38, 0.85); padding: 3px 10px; border-radius: 999px; }
.riel a:hover span, .riel a:focus-visible span, .riel a[aria-current] span { opacity: 1; transform: none; }
.riel a i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.35); transition: transform .2s, background-color .2s; }
.riel a[aria-current] i { background: var(--rojo); transform: scale(1.5); }

/* ---------- Capítulos ---------- */
.cap { position: relative; height: var(--alto, 100vh); }
.escena {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  padding: calc(var(--barra-alto) + 20px) clamp(20px, 6vw, 96px) 72px;
  display: grid; align-items: center;
}
.escena.dos { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 80px); }
.escena.dos.al-reves .texto { order: 2; }
.escena.dos.al-reves .visual { order: 1; }

.kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--texto-2); margin-bottom: 18px; }
.kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--rojo); flex: none; }
h1, .titulo { font-weight: 800; letter-spacing: -0.025em; line-height: 1.06; text-wrap: balance; }
h1 { font-size: clamp(38px, 5.4vw, 76px); }
.titulo { font-size: clamp(30px, 3.6vw, 54px); }
.bajada { margin-top: 20px; font-size: clamp(16px, 1.25vw, 19px); color: var(--texto-2); max-width: 54ch; text-wrap: pretty; }
.bajada strong { color: var(--blanco); }
.pal { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.pal-i { display: inline-block; will-change: transform; }
.js .pal-i { transform: translate3d(0, 112%, 0); }
.sin-movimiento .pal-i { transform: none !important; }
.acento { position: relative; white-space: nowrap; }
.acento::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.06em; height: 4px; border-radius: 4px; background: var(--rojo); }

.js [data-in] { opacity: 0; }

.puntos-clave { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 10px; }
.puntos-clave li { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; color: var(--blanco); }
.puntos-clave .ic { width: 34px; height: 34px; padding: 8px; border-radius: 10px; background: rgba(255, 255, 255, 0.08); border: 1px solid var(--linea); }

/* Portada */
.portada { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; gap: clamp(24px, 4vw, 64px); width: 100%; }
.portada-botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.portada-sellos { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.portada-sellos li { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--texto-2); padding: 8px 14px; border-radius: 999px; border: 1px solid var(--linea); }
.portada-sellos img[src*="meta"] { filter: brightness(0) invert(1); }
.portada-der { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.logo3d-caja { position: relative; width: min(100%, 420px); aspect-ratio: 185 / 135; }
.logo3d-respaldo { width: 100%; height: 100%; }
.gl-listo .logo3d-respaldo { opacity: 0; }
.portada-palabra { width: min(80%, 360px); height: auto; }
.pista { position: absolute; left: 0; right: 0; margin-inline: auto; width: max-content; bottom: 26px; display: inline-flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; color: var(--texto-3); }
.pista-raya { width: 44px; height: 2px; background: linear-gradient(90deg, var(--rojo) 30%, rgba(255, 255, 255, 0.4) 30%); }

/* Fotos */
.visual { position: relative; min-width: 0; }
.foto { position: relative; border-radius: var(--radio); overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: var(--sombra); background: var(--profundo); }
.foto img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.foto-chica { margin-top: 28px; max-width: 360px; }

/* Capítulo 1: caos */
.caos-chip { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 14px; background: var(--blanco); color: var(--ui-texto); font-size: 14px; font-weight: 600; box-shadow: var(--sombra); }
.caos-chip .ic { color: var(--rojo); width: 20px; height: 20px; }
.c-a { left: -4%; top: 8%; }
.c-b { right: -3%; top: 40%; }
.c-c { left: 8%; bottom: -5%; }

/* ---------- Ventanas de la app (blanco) ---------- */
.app, .tarjeta { background: var(--blanco); color: var(--ui-texto); border-radius: var(--radio); box-shadow: var(--sombra); }
.app { padding: 18px; }
.app-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--velo); margin-bottom: 14px; }
.mini-marca { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14.5px; }
.mini-marca img { width: 30px; height: auto; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: var(--velo); color: var(--ui-texto); }
.chip-ok .ic { color: var(--marino); }

.campana-cuerpo { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; }
.campana-datos { display: grid; gap: 10px; align-content: start; }
.campo { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 12px; }
.campo > span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ui-texto-2); }
.campo b { font-size: 14.5px; }
.campo-ia { border-color: var(--marino); background: var(--fondo-claro); }
.campo-ia > span .ic { color: var(--rojo); }
.linea-ia { font-size: 14px; line-height: 1.5; min-height: 4.5em; }
.linea-ia::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -0.15em; background: var(--marino); animation: cursor 1s steps(1) infinite; }
.sin-movimiento .linea-ia::after { display: none; }
@keyframes cursor { 50% { opacity: 0; } }
.opciones { display: flex; flex-wrap: wrap; gap: 6px; }
.op { display: inline-flex; align-items: center; gap: 6px; font-style: normal; font-size: 12.5px; font-weight: 700; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--borde); color: var(--ui-texto-2); transition: background-color .25s, color .25s, border-color .25s; }
.op.op-si { background: var(--marino); border-color: var(--marino); color: var(--blanco); }
.op .ic { width: 15px; height: 15px; }
.campana-vista { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.flyer { position: relative; width: 100%; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; padding: 18px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; color: var(--blanco); background: radial-gradient(120% 90% at 100% 0%, #1E3A7A 0%, var(--marino) 55%, var(--profundo) 100%); }
.flyer::before { content: ""; position: absolute; right: 16px; top: 16px; width: 12px; height: 12px; border-radius: 50%; background: var(--rojo); box-shadow: 0 0 14px rgba(225, 20, 30, 0.7); }
.flyer-iso { position: absolute; right: -14%; top: 12%; width: 78%; opacity: 0.16; }
.flyer-negocio { font-size: 11px; letter-spacing: 0.24em; font-weight: 700; color: var(--texto-2); }
.flyer-grande { font-size: clamp(44px, 4.4vw, 64px); line-height: 1; font-weight: 800; letter-spacing: -0.03em; }
.flyer-texto { font-size: 14px; font-weight: 600; }
.flyer-pie { margin-top: 12px; font-size: 11.5px; font-weight: 700; padding: 6px 10px; border-radius: 999px; background: var(--blanco); color: var(--marino); }
.flyer-nota { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ui-texto-2); }
.flyer-nota .ic { color: var(--rojo); }
.enviar-fila { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 14px; }
.boton-enviar { position: relative; display: inline-flex; align-items: center; min-height: 46px; padding: 0 22px; border-radius: 999px; background: var(--marino); color: var(--blanco); font-weight: 700; font-size: 15px; transition: transform .15s, background-color .3s; }
.boton-enviar .accion, .boton-enviar .listo { display: inline-flex; align-items: center; gap: 8px; }
.boton-enviar .listo { display: none; }
.boton-enviar.pulsado { transform: scale(0.95); }
.boton-enviar.enviado { transform: none; background: #1B2E5C; }
.boton-enviar.enviado .accion { display: none; }
.boton-enviar.enviado .listo { display: inline-flex; }

/* Capítulo 3: destinos */
.escena:not(.dos) { grid-template-rows: auto 1fr auto; justify-items: center; align-content: center; gap: 28px; }
.texto-centro { text-align: center; display: flex; flex-direction: column; align-items: center; }
.texto-centro .bajada { margin-inline: auto; }
.destinos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2.4vw, 32px); width: min(100%, 1100px); align-items: start; }
.destino { display: grid; gap: 10px; }
.destino-cab { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-2); }
.globo-flyer, .correo, .historia { border-radius: 18px; box-shadow: var(--sombra); }
.correo { background: var(--blanco); color: var(--ui-texto); padding: 16px; display: grid; gap: 6px; font-size: 14px; }
.correo > span { color: var(--ui-texto-2); }
.correo-flyer { display: block; height: 96px; border-radius: 12px; background: radial-gradient(120% 90% at 100% 0%, #1E3A7A 0%, var(--marino) 60%); }
.correo small { color: var(--ui-texto-2); font-size: 12px; }
.historia { aspect-ratio: 9 / 13; max-height: 300px; justify-self: center; width: 100%; max-width: 230px; padding: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; background: radial-gradient(140% 100% at 50% 0%, #1E3A7A 0%, var(--marino) 55%, var(--profundo) 100%); border: 1px solid rgba(255, 255, 255, 0.14); }
.historia b { font-size: 54px; line-height: 1; font-weight: 800; }
.historia-negocio { font-size: 11px; font-weight: 700; letter-spacing: 0.24em; color: var(--texto-2); }
.qr { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 12px; background: var(--blanco); color: var(--marino); }
.qr .ic { width: 44px; height: 44px; stroke-width: 1.5; }
.historia small { font-size: 11px; color: var(--texto-2); }
.cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; width: min(100%, 860px); }
.cifra { display: grid; gap: 2px; text-align: center; padding: 14px 10px; border-radius: 16px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--linea); }
.cifra b { font-size: clamp(24px, 2.4vw, 36px); font-weight: 800; letter-spacing: -0.02em; }
.cifra span { font-size: 13px; color: var(--texto-2); }

/* ---------- Teléfono con WhatsApp ---------- */
.visual-tel { display: grid; }
.visual-centro { display: grid; justify-items: center; }
.telefono { width: clamp(250px, 21vw, 310px); aspect-ratio: 9 / 18.5; border-radius: 42px; padding: 9px; background: #050B1C; box-shadow: var(--sombra), inset 0 0 0 1.5px rgba(255, 255, 255, 0.12); }
.tel-sobre { position: absolute; right: -6%; bottom: -18%; width: clamp(240px, 18vw, 280px); }
.pantalla { height: 100%; border-radius: 34px; overflow: hidden; background: var(--wa-fondo); color: #111B21; display: flex; flex-direction: column; font-size: 13px; }
.estado-tel { display: flex; justify-content: space-between; padding: 10px 20px 4px; font-size: 11.5px; font-weight: 700; background: var(--blanco); }
.bat { width: 20px; height: 10px; border-radius: 3px; border: 1.5px solid #111B21; position: relative; }
.bat::after { content: ""; position: absolute; inset: 1.5px 4px 1.5px 1.5px; background: #111B21; border-radius: 1px; }
.wa-cab { display: flex; align-items: center; gap: 8px; padding: 8px 12px 10px; background: var(--blanco); border-bottom: 1px solid #E3E1DD; }
.wa-atras { width: 20px; height: 20px; color: #54656F; }
.wa-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--marino); display: grid; place-items: center; flex: none; }
.wa-avatar img { width: 24px; }
.wa-nombre { display: grid; line-height: 1.2; min-width: 0; }
.wa-nombre b { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; }
.wa-nombre small { font-size: 11.5px; color: #54656F; }
.verificado { width: 15px; height: 15px; color: #1DAA61; stroke-width: 2.2; }
.wa-chat { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 10px; overflow: hidden; }
.wa-fecha { align-self: center; font-size: 11px; padding: 3px 10px; border-radius: 8px; background: var(--blanco); color: #54656F; margin-bottom: 4px; }
.globo { position: relative; max-width: 88%; align-self: flex-start; background: var(--blanco); padding: 7px 10px 18px; border-radius: 10px; font-size: 13px; line-height: 1.42; box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13); }
.globo.yo { align-self: flex-end; background: var(--wa-yo); }
.hora { position: absolute; right: 8px; bottom: 3px; font-size: 10.5px; color: #56656E; }
.globo-flyer { max-width: 100%; color: #111B21; background: var(--blanco); }
.mini-flyer { display: flex; align-items: center; justify-content: space-between; height: 92px; margin: -2px -5px 8px; padding: 12px; border-radius: 8px; color: var(--blanco); background: radial-gradient(120% 90% at 100% 0%, #1E3A7A 0%, var(--marino) 60%); }
.mini-flyer b { font-size: 34px; font-weight: 800; }
.mini-flyer span { font-size: 10px; letter-spacing: 0.2em; font-weight: 700; }
.audio { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; min-width: 190px; }
.audio-play { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #54656F; color: var(--blanco); }
.audio-play .ic { width: 14px; height: 14px; fill: currentColor; }
.onda { display: flex; align-items: center; gap: 2px; height: 22px; }
.onda i { width: 3px; border-radius: 2px; background: #8696A0; height: 30%; }
.onda i:nth-child(3n) { height: 75%; } .onda i:nth-child(4n) { height: 100%; } .onda i:nth-child(5n) { height: 50%; }
.audio-dur { font-size: 11px; color: #56656E; }
.transcripcion { grid-column: 1 / -1; font-size: 12px; font-style: italic; color: #3B4A54; padding-top: 4px; border-top: 1px solid rgba(0, 0, 0, 0.08); }
.con-botones { padding-bottom: 0; overflow: hidden; }
.con-botones .hora { bottom: auto; top: auto; position: static; display: block; text-align: right; margin-top: 2px; }
.wa-botones { display: grid; margin: 6px -10px 0; border-top: 1px solid #E9EDEF; }
.wa-boton { display: flex; align-items: center; justify-content: center; min-height: 38px; font-weight: 600; font-size: 13px; color: var(--wa-azul); border-top: 1px solid #E9EDEF; transition: background-color .25s, color .25s; }
.wa-botones .wa-boton:first-child { border-top: 0; }
.wa-boton.elegida { background: #DCEAF6; }
.carrusel { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; }
.tarj-pro { display: grid; justify-items: center; gap: 2px; padding: 10px 6px 0; border-radius: 10px; background: var(--blanco); text-align: center; overflow: hidden; box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13); transition: box-shadow .25s; }
.tarj-pro.elegida { box-shadow: 0 0 0 2px var(--wa-azul); }
.pro-foto { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--marino); color: var(--blanco); }
.tarj-pro small { font-size: 11px; color: #56656E; }
.tarj-pro .wa-boton { width: calc(100% + 12px); margin-top: 6px; border-top: 1px solid #E9EDEF; }
.confirmada { border-left: 4px solid var(--marino); }
.conf-cab { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--marino); }
.confirmada b { display: block; }

/* ---------- Agenda ---------- */
.campanita { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--velo); color: var(--marino); }
.campanita .ic { width: 22px; height: 22px; }
.campanita.suena .ic { animation: suena .8s ease 2; transform-origin: 50% 10%; }
.sin-movimiento .campanita.suena .ic { animation: none; }
@keyframes suena { 20% { transform: rotate(14deg); } 40% { transform: rotate(-12deg); } 60% { transform: rotate(8deg); } 80% { transform: rotate(-4deg); } }
.campanita-num { position: absolute; top: 5px; right: 5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--rojo); color: var(--blanco); font-size: 10.5px; font-weight: 800; font-style: normal; display: grid; place-items: center; }
.aviso-campanita { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin-bottom: 14px; border-radius: 14px; background: var(--fondo-claro); border: 1px solid var(--borde); font-size: 13.5px; }
.aviso-campanita .ic { color: var(--marino); margin-top: 2px; }
.aviso-campanita b { display: block; }
.agenda-grilla { display: grid; grid-template-columns: 52px repeat(3, minmax(0, 1fr)); gap: 8px; }
.agenda-horas { display: grid; grid-template-rows: 30px repeat(5, 54px); font-size: 11.5px; color: var(--ui-texto-2); }
.agenda-horas span:first-child { grid-row: 2; }
.agenda-col { position: relative; display: grid; grid-template-rows: 30px 270px; border-radius: 12px; background: repeating-linear-gradient(var(--fondo-claro) 0 53px, var(--velo) 53px 54px); }
.agenda-col > b { align-self: center; padding-left: 10px; font-size: 13px; }
.cita { position: absolute; left: 6px; right: 6px; top: calc(30px + var(--ini) * 54px + 2px); height: calc(var(--lar) * 54px - 4px); border-radius: 10px; padding: 6px 8px; font-size: 11.5px; font-weight: 600; font-style: normal; line-height: 1.25; color: var(--blanco); overflow: hidden; }
.c-diego .cita { background: var(--marino); }
.c-ignacio .cita { background: #3A4F7E; }
.c-camila .cita { background: #5A6684; }
.cita.nuevo { box-shadow: 0 0 0 2px var(--blanco), 0 0 0 4px var(--rojo); }
.agenda-pie { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chip-especial { background: var(--marino); color: var(--blanco); }

/* ---------- Tarjetas sueltas ---------- */
.tarjeta { padding: 16px 18px; display: grid; gap: 10px; }
.tarjeta-titulo { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14.5px; }
.tarjeta-titulo .ic { color: var(--marino); width: 20px; height: 20px; }
.texto .tarjeta { margin-top: 26px; max-width: 420px; }
.pasos-espera { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13.5px; }
.pasos-espera li { display: flex; align-items: center; gap: 10px; color: var(--ui-texto-2); transition: color .3s; }
.pasos-espera li::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--borde); flex: none; transition: background-color .3s, border-color .3s; }
.pasos-espera li.hecho { color: var(--ui-texto); font-weight: 600; }
.pasos-espera li.hecho::before { background: var(--marino) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; border-color: var(--marino); }

.pila { position: absolute; right: -4%; bottom: -10%; width: min(330px, 62%); display: grid; gap: 12px; }
.al-reves .pila { right: auto; left: -4%; }
.visual > .pila:only-child { position: relative; inset: auto; width: min(460px, 100%); margin-inline: auto; }
.tarjeta.mini { padding: 13px 15px; gap: 8px; font-size: 13.5px; }
.fila-cita { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; }
.fila-cita i { font-style: normal; font-weight: 700; font-size: 12.5px; color: var(--ui-texto-2); }
.fila-cita b { font-size: 11.5px; padding: 3px 8px; border-radius: 999px; background: var(--marino); color: var(--blanco); }
.fila-cita b.ok { background: var(--velo); color: var(--ui-texto); }
.fila-cita.actual { background: var(--fondo-claro); }
.fila-pago { display: flex; align-items: center; gap: 10px; color: var(--ui-texto-2); }
.fila-pago b { font-size: 20px; color: var(--ui-texto); }
.fila-pago.galeria { font-weight: 600; color: var(--ui-texto); }
.preg { justify-self: end; max-width: 90%; padding: 8px 12px; border-radius: 14px 14px 4px 14px; background: var(--marino); color: var(--blanco); font-weight: 600; }
.resp { min-height: 4.4em; padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: var(--velo); }

.encuesta { position: absolute; left: -6%; bottom: -12%; width: min(360px, 70%); }
.nps { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 3px; }
.nps span { display: grid; place-items: center; height: 30px; border-radius: 8px; font-size: 12.5px; font-weight: 700; background: var(--velo); color: var(--ui-texto); transition: background-color .25s, color .25s, transform .25s; }
.nps-10.elegida { background: var(--marino); color: var(--blanco); transform: scale(1.12); }
.resena { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.estrellas { position: relative; font-size: 22px; letter-spacing: 2px; line-height: 1; }
.estrellas-base { color: var(--borde); font-style: normal; }
.estrellas-llenas { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; color: var(--marino); font-style: normal; width: 0; }
.boton-resena { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; background: var(--marino); color: var(--blanco); font-size: 13px; font-weight: 700; }
.ritmo { display: grid; font-size: 13.5px; color: var(--ui-texto-2); }
.ritmo b { font-size: 16px; color: var(--ui-texto); }
.programado { padding: 10px 12px; border-radius: 12px; background: var(--wa-yo); color: #111B21; font-size: 13.5px; }
.ciclo-nota { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13.5px; }
.ciclo-nota .ic { color: var(--rojo); }

.dictado { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--fondo-claro); border: 1px solid var(--borde); font-size: 14px; min-height: 64px; }
.dictado .ic { color: var(--rojo); margin-top: 3px; }
.fichas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ficha { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--marino); color: var(--blanco); font-size: 12.5px; }
.ficha b { font-size: 13.5px; }
.vigia { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.luz { width: 10px; height: 10px; border-radius: 50%; background: #1DAA61; box-shadow: 0 0 0 4px rgba(29, 170, 97, 0.18); flex: none; }

/* ---------- Cierre: todos orbitan AGEN ---------- */
.escena.cierre { grid-template-rows: auto auto 1fr auto auto auto; text-align: center; justify-items: center; align-content: center; gap: 10px; padding-bottom: 64px; }
.titulo-cierre { font-size: clamp(32px, 4.4vw, 64px); }
.logo3d-cierre { width: min(30vw, 330px, 34vh * 1.37); margin-block: clamp(30px, 7vh, 90px); }
.bajada-cierre { margin-inline: auto; text-align: center; }
.lema { margin-top: 14px; font-size: clamp(13px, 1.3vw, 17px); font-weight: 700; letter-spacing: 0.32em; color: var(--blanco); }
.lema span { color: var(--texto-2); }
.lema b { color: #C8101A; } /* rojo de marca algo más oscuro SOLO para texto: 5,5:1 sobre el fondo claro */
.tiempo { margin-top: 10px; display: grid; justify-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.3em; color: var(--texto-2); }
.tiempo i { width: 120px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--blanco) 0 62%, var(--rojo) 62%); }

/* ---------- Bloques de lectura normal ---------- */
.bloque { position: relative; padding: clamp(80px, 12vh, 140px) clamp(20px, 6vw, 96px); }
.bloque-dentro { max-width: 1180px; margin: 0 auto; }
.bloque-meta { background: linear-gradient(180deg, rgba(6, 15, 38, 0) 0%, rgba(6, 15, 38, 0.65) 30%, rgba(6, 15, 38, 0.65) 70%, rgba(6, 15, 38, 0) 100%); }
.meta-cab { display: flex; align-items: center; gap: 22px; }
.meta-logo { width: 64px; height: 64px; filter: brightness(0) invert(1); flex: none; }
.meta-cab .kicker { margin-bottom: 10px; }
.garantias { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 42px; }
.garantia { padding: 26px; border-radius: var(--radio); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--linea); }
.garantia .ic { width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: var(--blanco); color: var(--marino); }
.garantia h3 { margin-top: 16px; font-size: 20px; font-weight: 700; }
.garantia p { margin-top: 8px; color: var(--texto-2); font-size: 15.5px; }

.muro { list-style: none; margin: 42px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.muro li { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 16px; border-radius: 16px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--linea); font-size: 14.5px; font-weight: 600; transition: background-color .2s, border-color .2s; }
.muro li:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.28); }
.muro img { width: 28px; height: 28px; object-fit: contain; filter: brightness(0) invert(1); flex: none; }
.muro .muro-synetia { border-color: rgba(255, 255, 255, 0.4); }
.muro .muro-synetia img { filter: none; }

.cinco { list-style: none; margin: 42px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; counter-reset: paso; }
.cinco li { position: relative; display: grid; gap: 6px; padding: 22px 18px; border-radius: var(--radio); background: var(--blanco); color: var(--ui-texto); }
.cinco .num { position: absolute; right: 16px; top: 14px; font-size: 13px; font-weight: 800; color: var(--ui-texto-2); }
.cinco .ic { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--marino); color: var(--blanco); margin-bottom: 8px; }
.cinco b { font-size: 16px; }
.cinco small { font-size: 13.5px; color: var(--ui-texto-2); }
.cta-final { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }

.pie { position: relative; z-index: 2; padding: 64px clamp(20px, 6vw, 96px) 96px; border-top: 1px solid var(--linea); background: var(--profundo); }
.pie-dentro { max-width: 1180px; margin: 0 auto; display: flex; gap: 40px; align-items: center; flex-wrap: wrap; }
.pie-logo { width: 200px; height: auto; }
.pie-texto { display: grid; gap: 10px; color: var(--texto-2); font-size: 14.5px; max-width: 640px; }
.pie-synetia { display: flex; align-items: center; gap: 10px; font-size: 17px; color: var(--blanco); }
.pie-nota { font-size: 13px; color: var(--texto-3); }
.pie-enlaces { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.pie-enlaces a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--blanco); }

/* ---------- Cargador ---------- */
#cargador { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; }
#cargador canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.no-js #cargador { display: none; }
.cargador-texto { position: relative; display: grid; justify-items: center; gap: 14px; width: min(320px, 80vw); transition: opacity .3s; }
.cargado .cargador-texto { opacity: 0; }
.cargador-iso { width: 92px; }
.cargador-marca { font-size: 30px; font-weight: 800; letter-spacing: 0.5em; padding-left: 0.5em; }
.cargador-linea { width: 100%; height: 2px; background: rgba(255, 255, 255, 0.15); }
.cargador-linea i { display: block; height: 100%; background: var(--rojo); transform-origin: 0 50%; transform: scaleX(0); }
.cargador-pie { width: 100%; display: flex; justify-content: space-between; font-size: 11.5px; font-weight: 700; letter-spacing: 0.18em; color: var(--texto-2); }

/* ---------- Movimiento reducido y sin JavaScript: todo quieto y visible ---------- */
.no-js .cap, .sin-movimiento .cap { height: auto !important; }
.no-js .escena, .sin-movimiento .escena { position: relative; height: auto; min-height: 100vh; overflow: visible; padding-bottom: 120px; }
.no-js [data-in] { opacity: 1; }

/* ---------- Pantallas medianas ---------- */
@media (max-width: 1180px) {
  .riel { display: none; }
  .sello-synetia { display: none; }
  .pila { width: min(300px, 64%); }
}

/* ---------- Celular ---------- */
@media (max-width: 860px) {
  :root { --barra-alto: 64px; --radio: 18px; }
  .barra-logo img { height: 38px; }
  .sello-meta { display: none; }
  .barra .boton { min-height: 44px; padding: 8px 16px; font-size: 14px; }
  .sello-fijo { left: 12px; bottom: 12px; font-size: 12px; padding: 6px 14px 6px 8px; }

  .escena { padding: calc(var(--barra-alto) + 8px) 16px 64px; align-items: start; }
  .escena.dos { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 14px; align-content: start; }
  .escena.dos.al-reves .texto { order: 1; }
  .escena.dos.al-reves .visual { order: 2; }
  .kicker { margin-bottom: 10px; font-size: 11.5px; }
  .titulo { font-size: clamp(25px, 7vw, 32px); }
  .bajada { margin-top: 10px; font-size: 14.5px; line-height: 1.5; }
  .escena.dos .bajada { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  .puntos-clave, .foto-chica { display: none; }
  .texto .tarjeta { position: absolute; left: 16px; right: 16px; bottom: 70px; z-index: 3; margin: 0; max-width: none; }

  .portada { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .portada-der { order: -1; flex-direction: row; justify-content: center; }
  .portada .logo3d-caja { width: min(46vw, 190px); }
  .portada-palabra { display: none; }
  h1 { font-size: clamp(32px, 9vw, 42px); }
  .portada-botones { margin-top: 20px; }
  .portada-botones .boton { width: 100%; }
  .portada-sellos { display: none; }
  .pista { display: none; }

  .visual { display: grid; align-content: start; justify-items: center; }
  .foto { width: 100%; }
  .foto img { aspect-ratio: 16 / 10; }
  .caos-chip { font-size: 12.5px; padding: 8px 12px; }
  .c-a { left: 0; top: -6%; } .c-b { right: 0; top: 46%; } .c-c { left: 4%; bottom: -10%; }

  .app { padding: 12px; width: 100%; }
  .campana-cuerpo { grid-template-columns: minmax(0, 1fr) 118px; gap: 10px; }
  .campo { padding: 8px 10px; }
  .campo b { font-size: 13px; }
  .campo:nth-child(3), .campo:nth-child(5) { display: none; }
  .linea-ia { font-size: 12.5px; min-height: 5.6em; }
  .flyer { padding: 10px; border-radius: 12px; }
  .flyer-grande { font-size: 34px; }
  .flyer-texto, .flyer-pie, .flyer-nota { display: none; }
  .enviar-fila { margin-top: 10px; }

  .escena:not(.dos) { gap: 14px; align-content: start; }
  .destinos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .destino-cab { font-size: 10.5px; letter-spacing: 0.04em; }
  .globo-flyer, .correo { font-size: 11px; padding: 8px; }
  .correo small, .correo > span, .correo-flyer { display: none; }
  .mini-flyer { height: 54px; }
  .mini-flyer b { font-size: 20px; }
  .historia b { font-size: 30px; }
  .qr { width: 40px; height: 40px; }
  .historia small { display: none; }
  .cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cifra { padding: 10px 6px; }

  .telefono { width: min(250px, 66vw); }
  .tel-sobre { position: relative; right: auto; bottom: auto; margin-top: -40%; }
  .al-reves .tel-sobre { left: auto; }
  .visual-tel .foto { width: 100%; }

  .pila { position: relative; right: auto; left: auto !important; bottom: auto; width: 100%; margin-top: -24%; }
  .pila .tarjeta.mini:not(:last-child) { display: none; }
  .visual > .pila:only-child { margin-top: 0; }
  .visual > .pila:only-child .tarjeta.mini { display: grid; }
  .encuesta { position: relative; left: auto; bottom: auto; width: 100%; margin-top: -18%; }

  .agenda-grilla { grid-template-columns: 40px repeat(3, minmax(0, 1fr)); gap: 4px; }
  .agenda-horas { grid-template-rows: 26px repeat(5, 40px); font-size: 10.5px; }
  .agenda-col { grid-template-rows: 26px 200px; background: repeating-linear-gradient(var(--fondo-claro) 0 39px, var(--velo) 39px 40px); }
  .agenda-col > b { font-size: 11.5px; padding-left: 6px; }
  .cita { top: calc(26px + var(--ini) * 40px + 2px); height: calc(var(--lar) * 40px - 4px); font-size: 10px; padding: 4px 6px; }
  .aviso-campanita { font-size: 12px; }
  .agenda-pie .chip:first-child { display: none; }

  .logo3d-cierre { width: min(48vw, 210px); margin-block: 72px 56px; }
  .titulo-cierre { font-size: clamp(28px, 8vw, 36px); }
  .bajada-cierre { font-size: 14.5px; }
  .lema { letter-spacing: 0.18em; }

  .garantias, .cinco { grid-template-columns: minmax(0, 1fr); }
  .meta-cab { flex-direction: column; align-items: flex-start; gap: 14px; }
  .muro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cta-final .boton { width: 100%; }
}

@media (max-width: 380px) {
  .barra .boton { padding: 8px 12px; font-size: 13px; }
  .sello-fijo span { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ======================================================================
   TEMA CLARO (único tema): fondo claro, marino para letras y bloques, rojo
   solo en el punto y detalles. Pedido del dueño: nada oscuro.
   ====================================================================== */
:root { color-scheme: light; --texto: #0B1A3A; --texto-2: #3A4560; --texto-3: #4A5470; --linea: rgba(11, 26, 58, 0.14); }
:root body { color: var(--texto); background: var(--fondo-claro); background-image: radial-gradient(110% 70% at 85% 0%, #E3E9F5 0%, rgba(245, 246, 249, 0) 60%), radial-gradient(80% 60% at 0% 100%, #EEF1F7 0%, rgba(245, 246, 249, 0) 60%); }
:root .barra { background: linear-gradient(rgba(245, 246, 249, 0.96), rgba(245, 246, 249, 0.7) 70%, rgba(245, 246, 249, 0)); }
:root .sello-meta img, :root .portada-sellos img[src*="meta"], :root .meta-logo, :root .muro img { filter: brightness(0); opacity: 0.88; }
:root .muro .muro-synetia img { filter: none; opacity: 1; }
:root .boton-principal { background: var(--marino); color: var(--blanco); }
:root .boton-principal:hover { background: #13285A; }
:root .boton-borde { border-color: rgba(11, 26, 58, 0.45); color: var(--marino); }
:root .boton-borde:hover { border-color: var(--marino); background: rgba(11, 26, 58, 0.04); }
:root .bajada strong, :root .puntos-clave li { color: var(--marino); }
:root .puntos-clave .ic { background: var(--blanco); }
:root .planeta { color: var(--marino); background: rgba(255, 255, 255, 0.9); border-color: rgba(11, 26, 58, 0.14); box-shadow: 0 6px 16px -8px rgba(11, 26, 58, 0.3); }
:root .planeta .ic { background: var(--marino); color: var(--blanco); }
:root .sello-fijo { background: rgba(255, 255, 255, 0.92); }
:root .sello-fijo b { color: var(--marino); }
:root .riel a span { background: rgba(255, 255, 255, 0.95); }
:root .riel a i { background: rgba(11, 26, 58, 0.28); }
:root .foto { border-color: rgba(11, 26, 58, 0.1); background: var(--velo); }
:root .app, :root .tarjeta, :root .correo, :root .caos-chip { box-shadow: 0 24px 60px -26px rgba(11, 26, 58, 0.32), 0 4px 14px -6px rgba(11, 26, 58, 0.12); border: 1px solid #E1E6EF; }
:root .foto { box-shadow: 0 24px 60px -26px rgba(11, 26, 58, 0.35); }
:root .telefono { box-shadow: 0 30px 70px -26px rgba(11, 26, 58, 0.45), inset 0 0 0 1.5px rgba(255, 255, 255, 0.12); }
:root .cifra, :root .garantia, :root .muro li { background: var(--blanco); border-color: #E1E6EF; }
:root .muro li:hover { border-color: rgba(11, 26, 58, 0.3); background: var(--blanco); }
:root .muro .muro-synetia { border-color: var(--marino); }
:root .garantia .ic { background: var(--marino); color: var(--blanco); }
:root .cinco li { border: 1px solid #E1E6EF; }
:root .bloque-meta { background: linear-gradient(180deg, rgba(236, 239, 245, 0) 0%, var(--velo) 25%, var(--velo) 75%, rgba(236, 239, 245, 0) 100%); }
:root .lema { color: var(--marino); }
:root .tiempo i { background: linear-gradient(90deg, var(--marino) 0 62%, var(--rojo) 62%); }
:root .pista-raya { background: linear-gradient(90deg, var(--rojo) 30%, rgba(11, 26, 58, 0.3) 30%); }
:root .pie { background: var(--blanco); }
:root .pie-synetia, :root .pie-enlaces a { color: var(--marino); }
:root .cargador-linea { background: rgba(11, 26, 58, 0.12); }
:root :focus-visible { outline-color: var(--marino); }