@media (max-width: 1280px) {
  .container { padding-left: 22px; padding-right: 22px; }
  .site-logo img { width: 255px; }
  .main-nav a { padding-left: 9px; padding-right: 9px; font-size: 14px; }
}

@media (max-width: 1100px) {
  :root { --header-height: 76px; }

  .site-header,
  .site-header.is-scrolled,
  .site-header.is-solid { height: var(--header-height); }

  .site-header { background: linear-gradient(90deg, var(--navy), var(--navy-2)); }
  .site-header .container { gap: 14px; }

  .site-logo img {
    width: 245px;
    max-width: calc(100vw - 105px);
  }

  .header-cta .btn-outline { display: none; }

  .nav-toggle {
    display: flex;
    width: 46px;
    height: 46px;
    padding: 10px;
    justify-content: center;
    flex-shrink: 0;
    touch-action: manipulation;
  }

  .nav-toggle span { width: 25px; height: 3px; }

  .main-nav {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(160deg, var(--navy), var(--navy-2));
    transform: translate3d(100%, 0, 0);
    transition: transform .24s ease-out;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 12px 0 32px;
  }

  .main-nav.is-open { transform: translate3d(0, 0, 0); }

  .main-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .main-nav li { width: 100%; }

  .main-nav a {
    display: flex;
    align-items: center;
    min-height: 54px;
    width: 100%;
    padding: 14px 26px;
    border-bottom: 1px solid rgba(255,255,255,.09);
    font-size: 16px;
  }

  .main-nav a::after { display: none; }
  .main-nav a.is-active { color: #fff; background: rgba(0,169,157,.16); border-left: 4px solid var(--teal); padding-left: 22px; }

  h1 { font-size: 36px; }
  h2 { font-size: 29px; }
  h3 { font-size: 22px; }
  .section { padding: 64px 0; }

  .hero { min-height: 570px; }
  .hero-content h1 { font-size: 37px; }

  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .two-col {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 30px;
  }
  .footer-grid .footer-col--branches { grid-column: auto; }
}

@media (max-width: 767px) {
  :root { --header-height: 72px; }

  html { scroll-padding-top: var(--header-height); }
  body { font-size: 15.5px; line-height: 1.65; overflow-x: hidden; }

  .container { padding-left: 20px; padding-right: 20px; }

  .site-logo img {
    width: 225px;
    max-width: calc(100vw - 100px);
  }

  .section { padding: 52px 0; }
  .section-head { margin-bottom: 30px; }

  h1 { font-size: clamp(28px, 8vw, 34px); }
  h2 { font-size: clamp(24px, 7vw, 29px); }
  h3 { font-size: 20px; }

  .hero {
    min-height: 560px;
    text-align: left;
    padding-top: var(--header-height);
  }

  .hero-content { padding-top: 42px; padding-bottom: 64px; }
  .hero-content .eyebrow { font-size: 11px; letter-spacing: .11em; }
  .hero-content h1 { font-size: clamp(29px, 8vw, 37px); margin: 12px 0 15px; }
  .hero-content p { font-size: 16px; line-height: 1.6; margin-bottom: 24px; }

  .hero-actions { display: grid; grid-template-columns: 1fr; gap: 12px; }
  .hero-actions .btn { width: 100%; min-height: 48px; }
  .hero-dots { bottom: 20px; }

  .page-banner { min-height: 255px; }
  .page-banner .container { padding-top: calc(var(--header-height) + 22px); padding-bottom: 28px; }
  .page-banner h1 { font-size: clamp(28px, 8vw, 34px); }
  .page-banner p { font-size: 15px; line-height: 1.6; }

  .grid-2,
  .grid-3,
  .grid-4 { grid-template-columns: 1fr; gap: 22px; }

  .two-col { gap: 28px; }

  .btn {
    min-height: 46px;
    padding: 12px 20px;
    font-size: 14.5px;
    line-height: 1.25;
    text-align: center;
    touch-action: manipulation;
  }

  .card { border-radius: 12px; box-shadow: 0 8px 22px rgba(0,40,74,.09); }
  .card-body { padding: 21px; }
  .card:hover { transform: none; box-shadow: 0 8px 22px rgba(0,40,74,.09); }
  .card:hover .card-media img { transform: none; }

  .doctor-card .card-media { aspect-ratio: 4 / 5; }
  .doctor-card .card-body h3 { font-size: 22px; }
  .doctor-card li { font-size: 14.5px; line-height: 1.55; }

  .stat-row { gap: 18px 26px; }
  .stat-row .stat { flex: 1 1 125px; }
  .stat-row .stat strong { font-size: 25px; }

  /* Contacto */
  .contact-socials { gap: 16px; }
  .contact-social-card {
    padding: 19px 18px;
    gap: 15px;
    align-items: flex-start;
    border-radius: 12px;
    box-shadow: 0 5px 14px rgba(0,40,74,.04);
  }
  .contact-social-card:hover { transform: none; box-shadow: 0 5px 14px rgba(0,40,74,.04); }
  .contact-social-icon {
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    font-size: 25px;
  }
  .contact-social-icon svg { width: 27px; height: 27px; }
  .contact-social-copy { min-width: 0; }
  .contact-social-copy small { font-size: 11px; line-height: 1.35; }
  .contact-social-copy strong { font-size: 21px; margin-bottom: 5px; }
  .contact-social-copy > span { font-size: 14.5px; line-height: 1.5; margin-bottom: 7px; }
  .contact-social-copy b { font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }

  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-top { padding: 45px 0 30px; }
  .footer-logo img { max-height: 54px; width: auto; max-width: 270px; }

  .footer-bottom .container {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }

  .whatsapp-float {
    width: 52px;
    height: 52px;
    right: 16px;
    bottom: max(16px, env(safe-area-inset-bottom));
  }
  .whatsapp-float svg { width: 27px; height: 27px; }

  .faq-item summary { padding: 17px 2px; line-height: 1.45; }
  .faq-item .faq-answer { padding: 0 2px 17px; }
}

@media (max-width: 420px) {
  .container { padding-left: 16px; padding-right: 16px; }
  .site-logo img { width: 205px; }
  .nav-toggle { width: 44px; height: 44px; padding: 9px; }
  .section { padding: 46px 0; }
  .hero-content h1 { font-size: 28px; }
  .hero-content p { font-size: 15px; }
  .card-body { padding: 19px; }

  .contact-social-card { padding: 17px 15px; gap: 12px; }
  .contact-social-icon { width: 46px; height: 46px; flex-basis: 46px; font-size: 23px; }
  .contact-social-copy strong { font-size: 19px; }
  .contact-social-copy > span { font-size: 14px; }
}

/* Tablets en orientación horizontal */
@media (min-width: 768px) and (max-width: 1100px) {
  .container { padding-left: 28px; padding-right: 28px; }
  .two-col { grid-template-columns: 1fr 1fr; gap: 30px; }
  .contact-social-card { padding: 20px; gap: 16px; }
  .contact-social-icon { width: 54px; height: 54px; flex-basis: 54px; }
  .contact-social-copy strong { font-size: 21px; }
  .contact-social-copy > span { font-size: 14px; }
}

/* Hero de inicio: imagen alternativa con mejor encuadre en móvil/tablet */
@media (max-width: 900px) {
  .hero-slide:nth-child(2) {
    background-image: url('../images/inicio/hero-portada-movil.jpg') !important;
    background-position: center center;
  }
}

@media (max-width: 600px) {
  .hero-slide:nth-child(2) {
    background-size: cover;
    background-position: 58% center;
  }

  .hero::before {
    background: linear-gradient(90deg, rgba(0, 40, 74, 0.90), rgba(0, 40, 74, 0.58));
  }
}


/* =========================================================
   BLOG — RESPONSIVE
========================================================= */

@media (max-width: 1100px) {
  .blog-featured-card {
    grid-template-columns: 1fr 1fr;
  }

  .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .blog-toolbar {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .blog-filters {
    justify-content: flex-start;
  }
}

@media (max-width: 767px) {
  .blog-featured {
    min-height: 0;
  }

  .blog-featured-card {
    grid-template-columns: 1fr;
    border-radius: 14px;
  }

  .blog-featured-card:hover,
  .blog-card:hover {
    transform: none;
  }

  .blog-featured-media {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  .blog-featured-copy {
    padding: 24px 20px 26px;
  }

  .blog-featured-copy h2 {
    margin: 12px 0 10px;
    font-size: 27px;
  }

  .blog-featured-copy p {
    font-size: 15px;
    line-height: 1.65;
  }

  .blog-toolbar {
    margin-bottom: 28px;
  }

  .blog-search-box {
    min-height: 48px;
  }

  .blog-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 5px;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .blog-filter {
    flex: 0 0 auto;
    min-height: 42px;
  }

  .blog-results-head {
    align-items: center;
  }

  .blog-results-head h2 {
    font-size: 24px;
  }

  .blog-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .blog-card {
    border-radius: 13px;
  }

  .blog-card-body {
    padding: 20px;
  }

  .blog-card-body h3 {
    font-size: 21px;
  }

  .blog-card:hover .blog-card-media img {
    transform: none;
  }

  .article-page {
    padding-top: var(--header-height);
  }

  .article-heading {
    margin-bottom: 25px;
  }

  .article-back {
    margin-bottom: 20px;
  }

  .article-heading h1 {
    font-size: 31px;
  }

  .article-lead {
    font-size: 16px;
  }

  .article-cover {
    border-radius: 13px;
  }

  .article-body {
    margin-top: 29px;
  }

  .article-body p {
    font-size: 16px;
    line-height: 1.75;
  }
}

@media (max-width: 420px) {
  .blog-featured-copy h2 {
    font-size: 24px;
  }

  .blog-card-body {
    padding: 18px;
  }

  .blog-meta {
    gap: 7px 10px;
    font-size: 12px;
  }

  .article-heading h1 {
    font-size: 28px;
  }
}