/* ═══════════════════════════════════════════════════════════
   MIGUELITO — Mascota animada del Asesor Virtual (San Miguel S.A.)
   La ardilla SVG vive en el botón flotante y en el header del chat.
   Estados: idle (default) · .mg-think (bot escribiendo) · .mg-wave (saludo)
   ═══════════════════════════════════════════════════════════ */

/* ── Botón flotante: ya no es un círculo, ES Miguelito ────── */
.chatbot-btn.miguelito-btn,
[data-theme="light"] .chatbot-btn.miguelito-btn,
[data-theme="dark"] .chatbot-btn.miguelito-btn {
  width: 74px !important;
  height: 86px !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  animation: none !important; /* anula chatPulse del círculo viejo */
  filter: drop-shadow(0 12px 22px rgba(15, 23, 42, .30));
}
.chatbot-btn.miguelito-btn:hover,
[data-theme="light"] .chatbot-btn.miguelito-btn:hover {
  background: transparent !important;
  box-shadow: none !important;
}
.chatbot-btn.miguelito-btn:active { transform: scale(.94) !important; }

/* El contenedor flotante se adapta al nuevo tamaño (anula mobile-2026) */
.chatbot-trigger { width: auto !important; height: auto !important; }

.miguelito-btn .notif-dot { top: 2px; right: 6px; width: 11px; height: 11px; z-index: 2; }

/* ── Avatar del header ────────────────────────────────────── */
.chat-avatar.miguelito-avatar {
  background: radial-gradient(circle at 50% 30%, #FDF3DF, #F3D9A8) !important;
  border: 2px solid rgba(0, 196, 167, .45) !important;
  overflow: hidden;
}
.chat-avatar.miguelito-avatar svg {
  width: 100% !important;
  height: 100% !important;
  color: inherit !important;
}

/* ── Montaje del SVG ──────────────────────────────────────── */
.mg-mount { display: block; width: 100%; height: 100%; }
.mg { display: block; width: 100%; height: 100%; overflow: visible; }

/* ═══ ANIMACIONES BASE (idle: respira, parpadea, mueve la cola) ═══ */

/* Flota suavemente (solo en el botón) */
.miguelito-btn .mg { animation: mgFloat 3.6s ease-in-out infinite; }
@keyframes mgFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* Cola: vaivén */
.mg .mg-tail {
  animation: mgTail 3.2s ease-in-out infinite;
  transform-origin: 140px 196px;
}
@keyframes mgTail {
  0%, 100% { transform: rotate(-2deg); }
  50%      { transform: rotate(7deg); }
}

/* Cabeza: ladeo suave */
.mg .mg-head {
  animation: mgHead 4.6s ease-in-out infinite;
  transform-origin: 100px 100px;
}
@keyframes mgHead {
  0%, 100% { transform: rotate(-1.5deg); }
  50%      { transform: rotate(2deg); }
}

/* Cuerpo: respiración */
.mg .mg-body {
  animation: mgBreath 3.6s ease-in-out infinite;
  transform-origin: 100px 200px;
}
@keyframes mgBreath {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.02, 1.015); }
}

/* Ojos: parpadeo */
.mg .mg-eye {
  animation: mgBlink 4.4s infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes mgBlink {
  0%, 92%, 100% { transform: scaleY(1); }
  95%           { transform: scaleY(.06); }
}

/* Pupilas: transición para el estado "pensando" */
.mg .mg-pupil { transition: transform .35s ease; }

/* Oreja izquierda: tic ocasional */
.mg .mg-ear-l {
  animation: mgEar 5.5s infinite;
  transform-box: fill-box;
  transform-origin: bottom center;
}
@keyframes mgEar {
  0%, 88%, 100% { transform: rotate(0); }
  92%           { transform: rotate(-9deg); }
  96%           { transform: rotate(4deg); }
}

/* Moneda Q: destello que la recorre */
.mg .mg-shine { animation: mgShine 3.8s ease-in-out infinite; }
/* El rect nace fuera de la moneda (x=40, clipeado): estático es invisible */
@keyframes mgShine {
  0%, 55%   { transform: translateX(0)     skewX(-16deg); }
  80%, 100% { transform: translateX(112px) skewX(-16deg); }
}

/* Chispas doradas */
.mg .mg-spark {
  animation: mgSpark 2.8s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
.mg .mg-spark2 { animation-delay: 1.4s; }
@keyframes mgSpark {
  0%, 100% { opacity: 0; transform: scale(.35) rotate(0deg); }
  50%      { opacity: 1; transform: scale(1) rotate(90deg); }
}

/* ═══ ESTADO: PENSANDO (bot escribiendo) ═══ */
.mg.mg-think .mg-pupil { transform: translateY(-3.5px) translateX(1.5px); }
.mg.mg-think .mg-tail  { animation-duration: 1.1s; }
.mg.mg-think .mg-head  { animation-duration: 1.6s; }

/* ═══ ESTADO: SALUDO (one-shot al abrir el chat) ═══ */
.mg.mg-wave {
  animation: mgJump .95s cubic-bezier(.34, 1.56, .64, 1);
  transform-origin: 100px 224px;
}
@keyframes mgJump {
  0%   { transform: translateY(0)     scale(1); }
  25%  { transform: translateY(-16px) scale(1.05, .95); }
  45%  { transform: translateY(0)     scale(.95, 1.06); }
  62%  { transform: translateY(-7px)  scale(1.02, .98); }
  80%  { transform: translateY(0)     scale(.99, 1.02); }
  100% { transform: translateY(0)     scale(1); }
}

/* Hover del botón: Miguelito se emociona */
.miguelito-btn:hover .mg .mg-tail { animation-duration: .9s; }
.miguelito-btn:hover .mg .mg-head { animation-duration: 1.4s; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .chatbot-btn.miguelito-btn { width: 60px !important; height: 70px !important; }
  .miguelito-btn .notif-dot  { right: 4px; }
}

/* ── Accesibilidad: respeta reduced motion ────────────────── */
@media (prefers-reduced-motion: reduce) {
  .mg, .mg * { animation: none !important; transition: none !important; }
}

/* ═══ MODO PNG: imagen real de la mascota ═══ */
.mgp { position: relative; display: block; width: 100%; height: 100%; }
.mgp { animation: mgFloat 3.6s ease-in-out infinite; }
.mgp .mgp-img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  animation: mgpHello 7.5s ease-in-out infinite;
  transform-origin: 50% 88%;
  user-select: none; -webkit-user-drag: none;
}
/* Saludo periódico: se mece como diciendo hola cada ~7 segundos */
@keyframes mgpHello {
  0%, 84%, 100% { transform: rotate(0) scale(1); }
  87%  { transform: rotate(-7deg) scale(1.04); }
  90%  { transform: rotate(7deg)  scale(1.04); }
  93%  { transform: rotate(-5deg) scale(1.03); }
  96%  { transform: rotate(3deg); }
  98%  { transform: rotate(0); }
}
.mgp .mgp-shadow {
  position: absolute; bottom: -5px; left: 15%; width: 70%; height: 10px;
  background: radial-gradient(ellipse, rgba(15,23,42,.32), transparent 70%);
  animation: mgpShadow 3.6s ease-in-out infinite;
}
@keyframes mgpShadow {
  0%, 100% { transform: scaleX(1); opacity: .85; }
  50%      { transform: scaleX(.82); opacity: .5; }
}
.mgp.mg-think .mgp-img { animation: mgpThink 1.2s ease-in-out infinite; }
@keyframes mgpThink {
  0%, 100% { transform: rotate(-2.5deg) translateY(-2px); }
  50%      { transform: rotate(2.5deg) translateY(-4px); }
}
.mgp.mg-wave .mgp-img { animation: mgJump .95s cubic-bezier(.34,1.56,.64,1); }
.miguelito-btn:hover .mgp-img { animation-duration: 1.6s; }

/* Avatar: encuadre de la cabeza dentro del círculo (sin flotación) */
.mgp-av { overflow: hidden; border-radius: 50%; animation: none; }
.mgp-av .mgp-img {
  position: absolute; max-width: none;
  width: 118%; height: auto; left: -9%; top: -4%;
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .mgp, .mgp .mgp-img, .mgp .mgp-shadow { animation: none !important; }
}

/* ── WhatsApp: subirlo para que no tape a Miguelito ──────── */
.wa-float { bottom: 9.25rem !important; }
@media (max-width: 768px) {
  .wa-float { bottom: 10.25rem !important; right: 1rem !important; }
  /* La burbuja de Miguel: compacta para que no tape contenido ni el WhatsApp */
  .chatbot-bubble-hint {
    max-width: 175px !important;
    font-size: .78rem !important;
    padding: .55rem .8rem !important;
  }
}

/* ═══ BIENVENIDA: Miguelito saluda al entrar al sitio ═══ */
.mg-intro {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end;
  padding-bottom: 14vh;
  background: rgba(10, 16, 38, .48);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  cursor: pointer;
  animation: mgIntroFade .4s ease;
}
@keyframes mgIntroFade { from { opacity: 0; } to { opacity: 1; } }
.mg-intro-img {
  width: min(52vw, 250px); height: auto;
  filter: drop-shadow(0 18px 36px rgba(0, 0, 0, .45));
  animation: mgIntroPop .7s cubic-bezier(.34, 1.56, .64, 1) backwards,
             mgFloat 3.6s ease-in-out .8s infinite;
  user-select: none; -webkit-user-drag: none;
}
@keyframes mgIntroPop {
  from { transform: translateY(40vh) scale(.3); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
.mg-intro-bubble {
  background: #FFFFFF; color: #1B2E6B;
  font-weight: 700; font-size: 1.08rem;
  padding: .85rem 1.5rem;
  border: 2px solid #22A895;
  border-radius: 20px 20px 20px 5px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
  margin-bottom: 1.1rem;
  animation: mgIntroPop .5s cubic-bezier(.34, 1.56, .64, 1) .45s backwards;
}
.mg-intro-out { animation: mgIntroFadeOut .6s ease forwards; }
.mg-intro-out .mg-intro-img {
  animation: none;
  transition: transform .6s cubic-bezier(.55, 0, .85, .4), opacity .6s ease;
  transform: translate(40vw, 16vh) scale(.22);
  opacity: 0;
}
.mg-intro-out .mg-intro-bubble { transition: opacity .3s ease; opacity: 0; }
@keyframes mgIntroFadeOut { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .mg-intro, .mg-intro *, .mg-intro-out .mg-intro-img { animation: none !important; transition: opacity .3s !important; transform: none !important; }
}

/* ═══ SIMULADOR: CTA de lead por WhatsApp ═══ */
.sim-cta-wa {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  margin-top: .6rem;
  background: #25D366 !important; color: #fff !important;
  border: none; border-radius: 14px;
  font-weight: 700; text-decoration: none;
  padding: .9rem 1.2rem;
  box-shadow: 0 6px 22px rgba(37, 211, 102, .35);
  transition: transform .2s ease, box-shadow .2s ease;
}
.sim-cta-wa:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(37, 211, 102, .45); color: #fff; }
.sim-cta-wa svg { flex-shrink: 0; }

/* ═══ INVERSIÓN: dinero creciendo en vivo ═══ */
.inv-tick {
  margin: .9rem 0 .4rem;
  padding: .7rem .9rem;
  border: 1px dashed rgba(0, 196, 167, .55);
  border-radius: 12px;
  font-size: .92rem;
  line-height: 1.55;
  text-align: center;
  min-height: 3.1em;
  display: block; /* texto fluido: en flex cada palabra se volvía columna */
}
.inv-tick strong { white-space: nowrap; }
@media (max-width: 480px) { .inv-tick { font-size: .85rem; } }
.inv-tick .inv-tick-res { color: var(--teal, #00C4A7); font-size: 1.08em; }
.inv-tick .inv-tick-tasa { opacity: .65; font-size: .82em; margin-left: .25rem; }
.inv-tick-in { animation: invTickIn .45s ease; }
@keyframes invTickIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .inv-tick-in { animation: none; } }

/* ═══ INVERSIÓN: tabla de tasas legible en ambos temas ═══ */
.inv-tabla {
  background: var(--gray-light);
  border-radius: 8px;
  padding: .75rem 1rem;
  margin-bottom: 1rem;
  font-size: .85rem;
}
.inv-tabla-titulo { font-weight: 700; color: var(--navy); margin-bottom: .5rem; }
.inv-tabla span   { color: var(--text-mid); }
.inv-tabla strong { color: var(--teal); }
[data-theme="dark"] .inv-tabla {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
}
[data-theme="dark"] .inv-tabla-titulo { color: #EAF0FA; }
[data-theme="dark"] .inv-tabla span   { color: rgba(255, 255, 255, .88); }
[data-theme="dark"] .inv-tabla strong { color: #2DD4BD; }
/* El ticker también gana contraste en oscuro */
[data-theme="dark"] .inv-tick { color: rgba(255, 255, 255, .92); }

/* ═══ MÓVIL: interfaz transparente sobre el paisaje ═══
   La mayoría de contenedores dejan ver el lago a través, con borde teal
   definido y blur. La legibilidad del contenido principal se protege con
   texto claro y sombra suave. Solo en móvil. */
@media (max-width: 768px) {
  .product-card,
  .sim-card,
  .benefit-card,
  .testimonial-card,
  .faq-item,
  .why-card,
  .mv-card,
  .story-card-content,
  .timeline-item,
  .agency-info-item,
  .inv-tabla,
  #contacto .form-card,
  #contacto form,
  .contact-card {
    background: rgba(10, 20, 45, .14) !important;
    background-image: none !important;
    -webkit-backdrop-filter: blur(2.5px);
    backdrop-filter: blur(2.5px);
    border: 1.5px solid rgba(0, 196, 167, .65) !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .15) !important;
  }

  /* Capas decorativas internas fuera: ensuciaban la transparencia */
  .product-card::before, .product-card::after,
  .sim-card::before, .benefit-card::before,
  .testimonial-card::before, .mv-card::after {
    background: none !important;
    box-shadow: none !important;
    opacity: 0 !important;
  }

  /* Texto un punto más firme para compensar el fondo vivo */
  .product-card p, .product-card li, .sim-card p, .benefit-card p,
  .mv-card p, .testimonial-card p, .faq-item p, .timeline-text {
    text-shadow: 0 1px 10px rgba(0, 0, 0, .55) !important;
  }

  /* Legibilidad del contenido principal dentro del vidrio */
  .product-card p, .product-card li,
  .sim-card p, .benefit-card p, .mv-card p,
  .testimonial-card p, .faq-item p, .timeline-text {
    color: rgba(255, 255, 255, .93) !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .35);
  }
  .product-card h3, .benefit-card h3, .mv-card h3, .sim-card h3 {
    color: #FFFFFF !important;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .4);
  }

  /* Los CTAs y campos de formulario se mantienen sólidos (contenido de acción) */
  .btn-teal, .btn-navy, .sim-cta-wa, .chat-send,
  .form-control, .form-select, .chat-input {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  /* Modo claro: velo blanco translúcido, mismo borde marcado, texto oscuro */
  [data-theme="light"] .product-card,
  [data-theme="light"] .sim-card,
  [data-theme="light"] .benefit-card,
  [data-theme="light"] .testimonial-card,
  [data-theme="light"] .faq-item,
  [data-theme="light"] .why-card,
  [data-theme="light"] .mv-card,
  [data-theme="light"] .timeline-item,
  [data-theme="light"] .agency-info-item,
  [data-theme="light"] .inv-tabla,
  [data-theme="light"] #contacto form,
  [data-theme="light"] .contact-card {
    background: rgba(255, 255, 255, .22) !important;
    background-image: none !important;
    border: 1.5px solid rgba(0, 160, 138, .7) !important;
  }
  [data-theme="light"] .product-card p, [data-theme="light"] .product-card li,
  [data-theme="light"] .sim-card p, [data-theme="light"] .benefit-card p,
  [data-theme="light"] .mv-card p, [data-theme="light"] .testimonial-card p,
  [data-theme="light"] .faq-item p, [data-theme="light"] .timeline-text {
    color: #1E293B !important;
    text-shadow: none;
  }
  [data-theme="light"] .product-card h3, [data-theme="light"] .benefit-card h3,
  [data-theme="light"] .mv-card h3, [data-theme="light"] .sim-card h3 {
    color: #1B2E6B !important;
    text-shadow: none;
  }
}

/* ═══ MÓVIL: GARANTÍA DE LEGIBILIDAD dentro del vidrio ═══
   Regla de cobertura total: TODO texto dentro de un contenedor
   transparente es visible, sin excepción. Los acentos teal
   (cuotas, tasas, montos) se preservan. Solo móvil. */
@media (max-width: 768px) {
  :is(.product-card, .sim-card, .benefit-card, .testimonial-card, .faq-item,
      .why-card, .mv-card, .timeline-item, .agency-info-item, .story-card-content,
      .contact-card, #contacto form)
  :is(p, li, small, label, h3, h4, h5, .form-label, .sim-tipo-hint, .sim-nota,
      .rate-label, .faq-answer, .timeline-text, .timeline-title) {
    color: rgba(255, 255, 255, .95) !important;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .55);
  }
  /* Spans sueltos (subtítulos, etiquetas) sin tocar los acentos de monto/tasa */
  :is(.product-card, .sim-card, .benefit-card, .testimonial-card, .faq-item, .mv-card)
  span:not(.rate-value):not(.product-rate *):not(.sim-result-cuota *):not(.sim-monto-val *):not(.inv-tick *):not(.inv-tabla *):not([class*="tag"]) {
    color: rgba(255, 255, 255, .88) !important;
  }

  /* Modo claro: la misma garantía con texto oscuro y sin sombra */
  [data-theme="light"] :is(.product-card, .sim-card, .benefit-card, .testimonial-card,
      .faq-item, .why-card, .mv-card, .timeline-item, .agency-info-item,
      .contact-card, #contacto form)
  :is(p, li, small, label, h3, h4, h5, .form-label, .sim-tipo-hint, .sim-nota,
      .rate-label, .faq-answer, .timeline-text, .timeline-title) {
    color: #17223F !important;
    text-shadow: none;
  }
  [data-theme="light"] :is(.product-card, .sim-card, .benefit-card, .testimonial-card, .faq-item, .mv-card)
  span:not(.rate-value):not(.product-rate *):not(.sim-result-cuota *):not(.sim-monto-val *):not(.inv-tick *):not(.inv-tabla *):not([class*="tag"]) {
    color: #2A3655 !important;
  }
}