/* =========================================================
   Medicca - 2026 Enhancements
   Mejoras de accesibilidad, animaciones y UX
   Sobrescribe estilos puntuales de style.css sin modificarlo
   ========================================================= */

/* --- Variables (reutilizando los colores existentes del sitio) --- */
:root {
  --medicca-primary: #0193DE;    /* azul principal */
  --medicca-primary-dark: #1d2a4d;
  --medicca-accent: #1ebaae;     /* turquesa */
  --medicca-text: #4a5568;       /* mejor contraste que el #848e9f original */
  --medicca-text-muted: #5a6275;
  --medicca-whatsapp: #25d366;
  --medicca-radius: 10px;
}

/* --- Legibilidad base (sin romper desktop) --- */
@media (min-width: 768px) {
  body { font-size: 15px; line-height: 1.65; }
}
/* Mejorar contraste del texto base (subía el original de #848e9f) */
body { color: var(--medicca-text); }
.feature-item p,
.info-box p,
.about-text p,
.text-muted,
p.color-gray,
.contact-widget li,
.footer p,
.footer-text { color: var(--medicca-text-muted) !important; }

/* --- Preloader: transición suave en vez de timeout duro --- */
.preloader {
  transition: opacity .35s ease, visibility .35s ease;
}
.preloader.preloader--hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* --- Tap targets accesibles en mobile (WCAG AA 44x44) --- */
@media (max-width: 991.98px) {
  .navbar .navbar-toggler {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  .nav__item-link {
    padding-top: 12px;
    padding-bottom: 12px;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .slick-prev,
  .slick-next {
    width: 44px;
    height: 44px;
  }
  .footer .social-icons a,
  .footer .btn__link {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  a[href^="tel:"],
  a[href^="mailto:"] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 8px;
  }
}

/* --- Smooth scroll + offset para anclas con header sticky --- */
html { scroll-behavior: smooth; }
:target { scroll-margin-top: 90px; }
section[id] { scroll-margin-top: 90px; }

/* --- Respetar preferencia de movimiento reducido --- */
@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;
  }
}

/* --- Animaciones de entrada al scroll (fade-up sutil) --- */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s cubic-bezier(.22, 1, .36, 1),
                transform .7s cubic-bezier(.22, 1, .36, 1);
    will-change: opacity, transform;
  }
  .reveal.is-visible {
    opacity: 1;
    transform: none;
  }
  .reveal--delay-1 { transition-delay: .08s; }
  .reveal--delay-2 { transition-delay: .16s; }
  .reveal--delay-3 { transition-delay: .24s; }
  .reveal--delay-4 { transition-delay: .32s; }

  /* Hover refinements (solo dispositivos con hover real) */
  @media (hover: hover) {
    .feature-item,
    .info-box,
    .post-card {
      transition: transform .35s ease, box-shadow .35s ease;
    }
    .feature-item:hover,
    .info-box:hover,
    .post-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 30px rgba(1, 147, 222, 0.12);
    }
  }
}

/* --- Imagen con lazy loading: evita layout shift --- */
img[loading="lazy"] {
  background: linear-gradient(110deg, #f3f5f8 8%, #e9eef3 18%, #f3f5f8 33%);
  background-size: 200% 100%;
}
img.is-loaded { background: transparent; }

/* --- Botón flotante de WhatsApp --- */
.wa-float {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--medicca-whatsapp) !important;
  color: #ffffff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.45);
  z-index: 999;
  transition: transform .25s ease, box-shadow .25s ease;
  text-decoration: none !important;
}
.wa-float:hover,
.wa-float:focus-visible {
  transform: scale(1.08);
  color: #ffffff !important;
  background: var(--medicca-whatsapp) !important;
  box-shadow: 0 10px 24px rgba(37, 211, 102, 0.55);
  outline: none;
}
.wa-float i,
.wa-float svg {
  font-size: 28px;
  width: 28px;
  height: 28px;
  color: #ffffff !important;
  line-height: 1;
}
.wa-float i::before {
  color: #ffffff !important;
}
.wa-float::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(37, 211, 102, 0.5);
  animation: wa-pulse 2.2s ease-out infinite;
}
@keyframes wa-pulse {
  0%   { transform: scale(.85); opacity: .9; }
  100% { transform: scale(1.35); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .wa-float::after { animation: none; }
}

/* --- Back to top: mejor posición para no chocar con WA flotante (56+18+12=86px) --- */
#scrollTopBtn,
.back-to-top,
#scroll-to-top,
.scroll-to-top {
  bottom: 86px !important;
}
#scrollTopBtn.actived {
  right: 22px !important;
}

/* =========================================================
   Blog
   ========================================================= */
.blog-hero {
  background: linear-gradient(135deg, #061733 0%, #1d2a4d 100%);
  color: #fff;
  padding: 90px 0 70px;
  text-align: center;
}
.blog-hero h1 {
  color: #fff;
  font-family: "Quicksand", sans-serif;
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin-bottom: 12px;
}
.blog-hero p {
  color: rgba(255, 255, 255, 0.85);
  max-width: 640px;
  margin: 0 auto;
  font-size: 1.05rem;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 28px;
  padding: 60px 0;
}

.post-card {
  background: #fff;
  border-radius: var(--medicca-radius);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border: 1px solid #eef1f5;
}
.post-card__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #eef1f5;
}
.post-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.post-card:hover .post-card__media img { transform: scale(1.05); }

.post-card__body {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.post-card__tag {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--medicca-primary);
  font-weight: 700;
  margin-bottom: 10px;
}
.post-card__title {
  font-family: "Quicksand", sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--medicca-primary-dark);
  margin: 0 0 10px;
  line-height: 1.35;
}
.post-card__excerpt {
  color: var(--medicca-text);
  font-size: 0.93rem;
  margin: 0 0 16px;
  flex: 1;
}
.post-card__meta {
  font-size: 0.8rem;
  color: var(--medicca-text-muted);
  display: flex;
  gap: 12px;
  align-items: center;
}
.post-card__meta time::before {
  content: "\f073";
  font-family: "Font Awesome 5 Free";
  font-weight: 400;
  margin-right: 6px;
  color: var(--medicca-primary);
}

/* --- Post page layout --- */
.post-article {
  max-width: 760px;
  margin: 0 auto;
  padding: 50px 20px 80px;
}
.post-article header {
  margin-bottom: 36px;
  text-align: center;
}
.post-article .post-tag {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--medicca-primary);
  font-weight: 700;
  margin-bottom: 14px;
}
.post-article h1 {
  font-family: "Quicksand", sans-serif;
  font-weight: 700;
  color: var(--medicca-primary-dark);
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  line-height: 1.25;
  margin-bottom: 14px;
}
.post-article .post-meta {
  color: var(--medicca-text-muted);
  font-size: 0.9rem;
}
.post-article .post-cover {
  border-radius: var(--medicca-radius);
  overflow: hidden;
  margin: 30px 0 40px;
  aspect-ratio: 16/9;
  background: #eef1f5;
}
.post-article .post-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.post-article h2 {
  font-family: "Quicksand", sans-serif;
  font-weight: 700;
  color: var(--medicca-primary-dark);
  font-size: 1.5rem;
  margin: 40px 0 14px;
}
.post-article h3 {
  font-family: "Quicksand", sans-serif;
  font-weight: 600;
  color: var(--medicca-primary-dark);
  font-size: 1.2rem;
  margin: 28px 0 10px;
}
.post-article p {
  color: var(--medicca-text);
  line-height: 1.75;
  font-size: 1rem;
  margin-bottom: 18px;
}
.post-article ul, .post-article ol {
  color: var(--medicca-text);
  line-height: 1.75;
  margin-bottom: 18px;
  padding-left: 22px;
}
.post-article li { margin-bottom: 6px; }
.post-article blockquote {
  border-left: 4px solid var(--medicca-primary);
  padding: 8px 0 8px 20px;
  margin: 24px 0;
  color: var(--medicca-primary-dark);
  font-style: italic;
  background: #f6fbff;
  border-radius: 0 6px 6px 0;
}
.post-article a {
  color: var(--medicca-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.post-cta {
  margin-top: 50px;
  padding: 32px;
  border-radius: var(--medicca-radius);
  background: linear-gradient(135deg, #0193de 0%, #1ebaae 100%);
  color: #fff;
  text-align: center;
}
.post-cta h3 {
  color: #fff;
  font-family: "Quicksand", sans-serif;
  margin-bottom: 10px;
}
.post-cta p { color: rgba(255,255,255,0.92); margin-bottom: 20px; }
.post-cta .btn {
  background: #fff;
  color: var(--medicca-primary);
  font-weight: 700;
  padding: 12px 28px;
  border-radius: 50px;
  display: inline-block;
  text-decoration: none;
  transition: transform .2s ease;
}
.post-cta .btn:hover { transform: translateY(-2px); }

/* Breadcrumb sencillo */
.breadcrumb-bar {
  background: #f6f8fb;
  padding: 14px 0;
  font-size: 0.88rem;
}
.breadcrumb-bar a { color: var(--medicca-primary); text-decoration: none; }
.breadcrumb-bar a:hover { text-decoration: underline; }
.breadcrumb-bar .sep { margin: 0 8px; color: #c0c6cf; }