/* Movimiento, ficha de anuncio y dudas del cliente (se carga después de panel.css) */

/* ---------- movimiento ---------- */
.anima .rv:not(.visto) { opacity: 0; transform: translateY(26px) scale(.985); }
.anima .rv { transition: opacity .7s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms), transform .7s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms); }
.anima .rv.visto { opacity: 1; transform: none; }
/* gráficos: las barras crecen y la línea se dibuja cuando su panel aparece */
.anima .mx-graf:not(.visto) .barra { transform: scaleY(0); }
.mx-graf .barra { transform-box: fill-box; transform-origin: bottom; transition: transform .9s cubic-bezier(.2, .8, .2, 1) calc(var(--i, 0) * 70ms + 150ms); }
.anima .mx-graf:not(.visto) .linea { stroke-dashoffset: 1; }
.mx-graf .linea { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s cubic-bezier(.4, .1, .2, 1) .2s; }
.anima .mx-graf:not(.visto) .area, .anima .mx-graf:not(.visto) .punto-g { opacity: 0; }
.mx-graf .area { transition: opacity 1s ease 1s; }
.mx-graf .punto-g { transition: opacity .4s ease calc(var(--i, 0) * 110ms + 700ms); }
.anima .mx-graf:not(.visto) .peso i { width: 0 !important; }
.mx-tabla .peso i { transition: width 1.1s cubic-bezier(.2, .8, .2, 1) .3s; }

/* tarjetas de anuncio: se inclinan hacia el cursor y se abren al hacer clic */
.mx-crea { cursor: pointer; transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.mx-crea:hover { transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px); }
.anima .mx-crea.rv.visto { transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.anima .mx-crea.rv.visto:hover { transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px); }
.mx-crea .mx-img img { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.mx-crea:hover .mx-img img { transform: scale(1.06); }
.mx-crea:focus-visible { outline: 2px solid var(--b); outline-offset: 3px; }
.mx-crea .mx-img::after { content: 'Ver detalle'; position: absolute; left: 50%; bottom: 14px; transform: translate(-50%, 14px); opacity: 0; padding: 7px 14px; border-radius: 99px; background: rgba(7, 5, 11, .82); backdrop-filter: blur(6px); font: 700 12px var(--sans); color: var(--read-hi); transition: .25s; pointer-events: none; }
.mx-crea:hover .mx-img::after, .mx-crea:focus-visible .mx-img::after { opacity: 1; transform: translate(-50%, 0); }
.mx-fb { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 4px; padding: 10px; border-radius: 12px; background: #1877F2; color: #fff; font: 700 13px var(--sans); text-decoration: none; transition: filter .2s, transform .2s; }
.mx-fb:hover { filter: brightness(1.12); transform: translateY(-1px); }
.mx-fb:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* hero: el brillo de la marca respira y el nombre entra */
.mx-hero::after { animation: respira 7s ease-in-out infinite alternate; }
@keyframes respira { from { transform: translate(0, 0) scale(1); opacity: .8; } to { transform: translate(-50px, 30px) scale(1.18); opacity: 1; } }
.mx-hero h1 { animation: entra 1s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes entra { from { opacity: 0; transform: translateY(18px); letter-spacing: .12em; } to { opacity: 1; transform: none; letter-spacing: .02em; } }
.mx-hero .mx-logo { animation: logo-in .9s cubic-bezier(.2, .9, .3, 1.3) both; }
@keyframes logo-in { from { opacity: 0; transform: scale(.6) rotate(-8deg); } to { opacity: 1; transform: none; } }

/* aurora de fondo en el panel del cliente */
.aurora { position: fixed; inset: -20%; z-index: 0; pointer-events: none; filter: blur(30px);
  background: radial-gradient(40% 40% at 25% 30%, color-mix(in srgb, var(--b, #8B4DFF) 28%, transparent), transparent 70%), radial-gradient(35% 40% at 80% 70%, rgba(226, 188, 106, .14), transparent 70%);
  animation: aurora 22s ease-in-out infinite alternate; }
@keyframes aurora { from { transform: translate(-3%, -2%) rotate(0deg); } to { transform: translate(4%, 3%) rotate(6deg); } }
.cliente-raiz { position: relative; z-index: 1; }

/* ---------- ficha de anuncio ---------- */
.mx-modal.ficha { --b: var(--purple-soft); width: min(980px, 100%); padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); overflow: hidden; position: relative; animation: ficha-in .45s cubic-bezier(.2, .9, .3, 1.1) both; }
@keyframes ficha-in { from { opacity: 0; transform: translateY(30px) scale(.96); } to { opacity: 1; transform: none; } }
.ficha .cerrar { position: absolute; right: 12px; top: 12px; z-index: 3; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--hair-p); background: rgba(7, 5, 11, .7); color: var(--read-hi); font-size: 16px; }
.ficha-img { position: relative; background: color-mix(in srgb, var(--b) 12%, #0C0912); min-height: 320px; }
.ficha-img img { width: 100%; height: 100%; object-fit: cover; display: block; position: absolute; inset: 0; }
.ficha-img .vacio { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--bf, var(--display)); font-size: 120px; color: color-mix(in srgb, var(--b) 60%, transparent); }
.ficha-img .etq { position: absolute; left: 14px; top: 14px; padding: 5px 11px; border-radius: 99px; font: 800 11px var(--sans); letter-spacing: .12em; background: rgba(7, 5, 11, .78); color: var(--read-hi); }
.ficha-info { padding: 28px 28px 24px; display: flex; flex-direction: column; gap: 12px; }
.ficha-info h2 { font-family: var(--bf, var(--display)); font-size: clamp(32px, 3.4vw, 46px); line-height: .98; color: var(--b); letter-spacing: .02em; }
.ficha-info .texto { margin: 0; color: var(--read); font-size: 14px; line-height: 1.5; }
.ficha-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 12px; padding: 16px 0; border-block: 1px solid var(--hair); }
.ficha-nums small { display: block; font: 700 10px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #BDB6CF; margin-bottom: 4px; }
.ficha-nums b { font-family: var(--display); font-size: 28px; line-height: 1; font-weight: 400; color: var(--read-hi); white-space: nowrap; letter-spacing: .02em; }
.ficha-nums b span { font: 600 12px var(--sans); color: var(--muted); }
.ficha-barra span { font-size: 12px; color: var(--muted); }
.ficha-barra .mx-barra i { animation: llena 1.1s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes llena { from { width: 0 !important; } }
.compara { margin: 0; font-size: 14px; color: var(--read); }
.compara .bueno { color: var(--ok); } .compara .malo { color: var(--crit); }
.ficha-acc { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; }
.ficha-acc .btn { flex: 1; justify-content: center; text-align: center; min-height: 46px; }
.ficha-acc .btn.lima { background: #1877F2; color: #fff; }

/* ---------- dudas y consultas ---------- */
.mx-dudas-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 18px; align-items: start; }
.mx-form { display: grid; gap: 12px; padding: 20px; border-radius: 20px; border: 1px solid var(--hair-p); background: linear-gradient(160deg, rgba(139, 77, 255, .10), rgba(255, 255, 255, .02)); }
.mx-form label { display: grid; gap: 6px; font: 700 12px var(--sans); letter-spacing: .06em; color: var(--read); }
.mx-form label small { font-weight: 500; color: var(--muted); letter-spacing: 0; }
.mx-form input, .mx-form textarea { width: 100%; background: rgba(0, 0, 0, .3); border: 1px solid var(--hair); border-radius: 12px; padding: 12px; color: var(--read-hi); font: 500 15px var(--sans); resize: vertical; }
.mx-form input:focus, .mx-form textarea:focus { outline: 2px solid var(--b, var(--purple)); outline-offset: 1px; border-color: transparent; }
.mx-form .fila { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.chip-ad { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-radius: 12px; background: color-mix(in srgb, var(--b, var(--purple)) 18%, transparent); font-size: 13px; }
.chip-ad button { background: none; border: 0; color: var(--read); font-size: 14px; }
.mx-qmsg { min-height: 18px; font-size: 13px; }
.mx-qmsg.ok { color: var(--ok); } .mx-qmsg.mal { color: var(--crit); }
.mx-hilo { display: grid; gap: 10px; }
.mx-q { padding: 14px 16px; border-radius: 16px; border: 1px solid var(--hair); background: rgba(255, 255, 255, .03); border-left: 3px solid var(--muted2); }
.mx-q.ok { border-left-color: var(--ok); } .mx-q.nueva { border-left-color: var(--gold); }
.mx-q .meta { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.mx-q p { margin: 0; color: var(--read-hi); font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.mx-q .resp { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(111, 214, 165, .08); }
.mx-q .resp small { display: block; font: 700 10px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ok); margin-bottom: 4px; }
.mx-q .resp-form { display: grid; gap: 8px; margin-top: 10px; }
.mx-q .resp-form textarea { background: rgba(0, 0, 0, .3); border: 1px solid var(--hair); border-radius: 10px; padding: 10px; color: var(--read-hi); font: 500 14px var(--sans); }
.mx-q .resp-form .btn { justify-self: end; }

@media (max-width: 900px) {
  .mx-modal.ficha { grid-template-columns: 1fr; max-height: 92dvh; overflow: auto; }
  .ficha-img { min-height: 0; aspect-ratio: 16 / 10; }
  .mx-dudas-in { grid-template-columns: 1fr; }
}
@media (max-width: 520px) { .ficha-nums { grid-template-columns: repeat(2, 1fr); } .ficha-info { padding: 20px 18px; } }
@media (prefers-reduced-motion: reduce) {
  .mx-hero::after, .aurora, .mx-hero h1, .mx-hero .mx-logo, .mx-modal.ficha, .ficha-barra .mx-barra i { animation: none; }
  .mx-crea, .mx-crea:hover { transform: none; }
}

/* ---------- día por día en filas ---------- */
.mx-dia-res { display: flex; gap: 22px; flex-wrap: wrap; padding: 2px 0 12px; border-bottom: 1px solid var(--hair); margin-bottom: 8px; }
.mx-dia-res small { display: block; font: 700 10px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #BDB6CF; }
.mx-dia-res b { font-family: var(--display); font-size: 30px; font-weight: 400; letter-spacing: .02em; color: var(--read-hi); white-space: nowrap; }
.mx-dia ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mx-dia li { display: grid; grid-template-columns: 78px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 6px 0; }
.mx-dia .f { font: 600 13px var(--sans); color: var(--read); text-transform: capitalize; white-space: nowrap; }
.mx-dia .bar { height: 22px; border-radius: 8px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.mx-dia .bar i { display: block; height: 100%; border-radius: 8px; transition: width 1s cubic-bezier(.2, .8, .2, 1) calc(var(--i, 0) * 60ms + 200ms); }
.anima .mx-graf:not(.visto) .mx-dia .bar i { width: 0 !important; }
.mx-dia .n { font-family: var(--display); font-weight: 400; font-size: 24px; letter-spacing: .02em; color: var(--read-hi); white-space: nowrap; min-width: 92px; text-align: right; font-variant-numeric: tabular-nums; }
.mx-dia li.top .n { color: var(--gold-hi); }
.mx-dia li.top .f::after { content: ' ★'; color: var(--gold); }
@media (max-width: 520px) {
  .mx-dia li { grid-template-columns: 62px minmax(0, 1fr) auto; gap: 8px; }
  .mx-dia .f { font-size: 12px; } .mx-dia .n { font-size: 21px; min-width: 78px; }
  .mx-dia .bar { height: 18px; }
}
.aviso-btn { border-color: var(--gold); color: var(--gold-hi); }
.mx-marcalink { background: none; border: 0; padding: 0; font-family: var(--bf, var(--display)); font-size: 18px; letter-spacing: .03em; color: var(--b); cursor: pointer; }