/* /gestorias: lo que añade a la portada (landing-home.css). */

/* Portada: el portátil del panel con las tarjetas flotantes alrededor */
.lx-gest-hero__visual { flex-direction: column; }
.lx-gest-hero__visual .lx-advisors__visual { padding-right: 0; width: 100%; max-width: 640px; }
.lx-gest-hero .lx-float--a { top: 6%; left: -6%; }
.lx-gest-hero .lx-float--b { top: 44%; right: -8%; }
.lx-gest-hero .lx-float--c { bottom: 8%; left: 4%; right: auto; }

/* Chat gestoría ↔ cliente: la gestoría habla a la izquierda con su inicial, no con el logo de Ofi */
.lx-gest-avatar { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(145deg, #2dd4bf, #0ea5b7); color: #fff; font-weight: 800; font-size: 13px; }
.lx-gest-chat .lx-msg--ofi::before { content: 'ML'; background: linear-gradient(145deg, #2dd4bf, #0ea5b7); border-radius: 50%; color: #fff; font-size: 10px; font-weight: 800; display: grid; place-items: center; }
.lx-gest-file { align-self: flex-end; display: flex; gap: 6px; animation: lx-in .35s ease both; }
.lx-gest-file i { width: 58px; height: 72px; border-radius: 10px; background: #fff url('landing/ticket.webp') center/cover; box-shadow: 0 8px 18px -10px rgba(6,28,58,.6); border: 2px solid #fff; }
.lx-gest-chat .lx-mic { width: 54px; height: 54px; }

/* Bandeja por revisar */
.lx-gest-inbox { display: grid; gap: 10px; margin-top: 22px; }
.lx-gest-inbox div { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: #F4F6FA; border: 1px solid #E7ECF3; }
.lx-gest-inbox i { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #fff; color: var(--lx-navy); }
.lx-gest-inbox span { flex: 1; min-width: 0; }
.lx-gest-inbox strong { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-gest-inbox small { color: #64748B; font-size: 12.5px; }
.lx-gest-inbox b { font-size: 14px; white-space: nowrap; }
.lx-gest-inbox em { font-style: normal; font-size: 11px; font-weight: 800; color: var(--lx-orange); background: #FFF0E7; padding: 4px 8px; border-radius: 999px; }

/* Cómo funciona: tres pasos numerados */
.lx-gest-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.lx-gest-steps .lx-card { position: relative; }
.lx-gest-steps__n { position: absolute; top: 18px; right: 22px; font-size: 64px; line-height: 1; font-weight: 800; color: #EEF1F6; }
.lx-gest-privacy { margin-top: clamp(60px, 8vw, 100px); }
.lx-gest-sees h3 { margin: 0 0 12px; }
.lx-gest-sees h3 + p { margin-top: 0; }
.lx-gest-sees p { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-weight: 600; color: var(--lx-text); }
.lx-gest-sees p:last-of-type { margin-bottom: 0; }
.lx-gest-sees .is-yes svg { color: #16a34a; }
.lx-gest-sees .is-no svg { color: #94A3B8; }
.lx-gest-sees p.is-yes:nth-of-type(3) { margin-bottom: 22px; }

/* Precio: dos tarjetas */
.lx-gest-prices { grid-template-columns: repeat(2, minmax(0, 420px)); justify-content: center; }

/* Preguntas */
.lx-gest-faq { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.lx-gest-faq details { background: #fff; border: 1px solid #E7ECF3; border-radius: 18px; padding: 0 22px; box-shadow: 0 18px 40px -34px rgba(6,28,58,.5); }
.lx-gest-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; font-weight: 800; font-size: 18px; color: var(--lx-text); }
.lx-gest-faq summary::-webkit-details-marker { display: none; }
.lx-gest-faq summary span { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #FFF0E7; color: var(--lx-orange); transition: transform .25s ease; }
.lx-gest-faq details[open] summary span { transform: rotate(45deg); }
.lx-gest-faq p { margin: 0 0 20px; color: #475569; font-size: 16px; line-height: 1.6; }

.lx-final .lx-gest-demo { color: #fff; border-color: rgba(255,255,255,.7); }

@media (max-width: 1100px) {
  .lx-gest-steps { grid-template-columns: 1fr; }
  .lx-gest-prices { grid-template-columns: 1fr; }
  .lx-gest-hero .lx-float--a { left: 0; top: 0; }
  .lx-gest-hero .lx-float--b { right: 0; top: 46%; }
  .lx-gest-hero .lx-float--c { left: 4%; bottom: 0; }
}

/* Tarjetas flotantes legibles aunque caigan sobre la pantalla blanca del portátil */
.lx-gest-hero .lx-float { background: rgba(11, 27, 51, .86); border-color: rgba(255,255,255,.18); }
.lx-gest-hero .lx-float--c { background: rgba(160, 60, 10, .9); }
/* El chat empieza debajo de la barra de estado y la cámara del móvil */
.lx-gest-chat .lx-chat__head { padding-top: 58px; }
/* Bandeja (ancha) arriba; abajo, Modelos trimestrales con sitio para su gráfica */
@media (min-width: 1101px) {
  #panel .lx-bento > .lx-card:nth-child(4), #panel .lx-bento > .lx-card:nth-child(5) { grid-column: span 3; }
  #panel .lx-bento > .lx-card:nth-child(6) { grid-column: span 6; }
}
/* Las tarjetas de la portada ocupan 4 de 12 columnas: aquí, cada una en su celda */
.lx-gest-steps > .lx-card, .lx-gest-privacy > .lx-card { grid-column: auto; }
/* Esta hoja se carga antes que landing-home.css: los cambios a sus clases van con más especificidad */
.lx-prices.lx-gest-prices { grid-template-columns: repeat(2, minmax(0, 420px)); justify-content: center; }
.lx-gest-prices .lx-price .lx-btn--ghost { color: var(--lx-navy); border: 2px solid var(--lx-navy); background: transparent; }
@media (max-width: 1100px) { .lx-prices.lx-gest-prices { grid-template-columns: 1fr; } }
/* (también en /asociaciones) El chat de Ofi empieza debajo de la cámara del móvil */
.lx-phone--chat .lx-chat__head { padding-top: 58px; }

/* Botón «Llámame»: en el móvil abre la llamada */
.lx-call { display: inline-flex; align-items: center; gap: 12px; padding: 7px 20px 7px 7px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.28); color: #fff; text-decoration: none; transition: transform .2s ease, background .2s ease; }
.lx-call:hover { transform: translateY(-2px); background: rgba(255,255,255,.18); }
.lx-call__icon { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(145deg, #34d399, #16a34a); box-shadow: 0 10px 22px -10px rgba(22,163,74,.9); animation: lx-ring 4s ease-in-out infinite; }
.lx-call__text { display: grid; line-height: 1.15; text-align: left; }
.lx-call__text small { font-size: 12px; opacity: .8; font-weight: 600; }
.lx-call__text strong { font-size: 18px; font-weight: 800; letter-spacing: .02em; white-space: nowrap; }
@keyframes lx-ring { 0%, 86%, 100% { transform: rotate(0); } 88% { transform: rotate(-14deg); } 92% { transform: rotate(14deg); } 96% { transform: rotate(-8deg); } }
@media (prefers-reduced-motion: reduce) { .lx-call__icon { animation: none; } }
.lx-hero__cta + .lx-hero__cta { margin-top: 18px; }