/* Interactividad añadida a la web de MC Asesoría (sin librerías). */

/* 1. Barra fija: "Pedir cita" visible también en móvil */
@media (max-width: 900px) {
  .header-cta {
    display: inline-flex;
    margin-left: auto;
    margin-right: 6px;
    min-height: 38px;
    padding: 8px 12px;
    font-size: 11px;
  }
}
@media (max-width: 380px) {
  .header-cta svg { display: none; }
  .header-cta { padding: 8px 10px; }
}

/* 2. Sección actual resaltada en el menú */
.desktop-nav > a[aria-current="location"] { color: var(--green); }
.desktop-nav > a[aria-current="location"]::after { right: 0; }
.mobile-nav a[aria-current="location"] { color: var(--green); font-weight: 700; }

/* 4. Botón de volver arriba (encima del de WhatsApp) */
.mc-top {
  position: fixed;
  right: 27px;
  bottom: 86px;
  z-index: 40;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  box-shadow: 0 10px 26px rgba(22, 35, 44, 0.2);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.25s, transform 0.25s, visibility 0.25s, background 0.2s;
}
.mc-top.is-visible { opacity: 1; visibility: visible; transform: none; }
@media (max-width: 600px) {
  .mc-top { right: 22px; bottom: 80px; }
}
.mc-top:hover { background: var(--deep); transform: translateY(-2px); }
.mc-top:focus-visible { outline: 3px solid rgb(185, 151, 78); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .mc-top, .mc-top:hover { transition: none; transform: none; }
}

/* 5. Aparición suave al bajar (solo si el usuario no pide reducir el movimiento) */
@media (prefers-reduced-motion: no-preference) {
  .mc-reveal {
    transition: opacity 0.6s ease, transform 0.6s ease;
    transition-delay: var(--mc-retraso, 0ms);
  }
  .mc-reveal:not(.is-visible) {
    opacity: 0;
    transform: translateY(18px);
  }
}

/* 5. Efectos al pasar el ratón por tarjetas y botones */
@media (hover: hover) {
  .service-row,
  .steps-list > li,
  .trust-inner > div,
  .hero-consultation {
    transition: background 0.2s, box-shadow 0.25s, transform 0.25s;
  }
  .service-row:hover {
    box-shadow: 0 10px 28px rgba(36, 43, 97, 0.07);
  }
  .service-row:hover .service-icon { color: var(--green); }
  .steps-list > li:hover,
  .hero-consultation:hover {
    transform: translateY(-2px);
  }
  .trust-inner > div:hover { transform: translateY(-2px); }
  .service-link:hover,
  .text-link:hover { color: var(--green); }
  .faq-list summary:hover { color: var(--green); }
}
@media (prefers-reduced-motion: reduce) {
  .steps-list > li:hover,
  .hero-consultation:hover,
  .trust-inner > div:hover { transform: none; }
}

/* 6. Preguntas frecuentes: apertura suave (en navegadores que lo permiten; en el resto, al instante) */
@media (prefers-reduced-motion: no-preference) {
  .faq-list details { interpolate-size: allow-keywords; }
  .faq-list details::details-content {
    height: 0;
    overflow: hidden;
    transition: height 0.3s ease, content-visibility 0.3s allow-discrete;
  }
  .faq-list details[open]::details-content { height: auto; }
}

/* 7. Menú del móvil: zona de toque cómoda (mín. 44 px) y aparición suave */
.mobile-toggle { min-width: 44px; min-height: 44px; }
@media (prefers-reduced-motion: no-preference) {
  .mobile-nav { animation: mc-menu 0.22s ease; }
}
@keyframes mc-menu {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* 1. Barra de progreso de lectura */
.mc-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 41;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}