/* ================================================================
   index.css — Estilos extraídos de index.php
   Los 8 bloques <style> en línea, unificados en su orden original.
================================================================= */

/* ---- Bloque 1 (originalmente en index.php) ---- */
        
          .adv-featured {
            display: flex;
            align-items: center;
            gap: 28px;
            max-width: 980px;
            margin: 0 auto 22px;
            background: linear-gradient(135deg, #05323c 0%, #0a4d5c 100%);
            border-radius: 20px;
            padding: 30px 34px;
            box-shadow: 0 16px 40px rgba(5, 50, 60, .16);
            text-align: left;
          }

          .adv-featured-icon {
            flex-shrink: 0;
            width: 64px;
            height: 64px;
            border-radius: 50%;
            background: rgba(255, 255, 255, .10);
            border: 1px solid rgba(255, 255, 255, .18);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 26px;
            color: #fff;
          }

          .adv-featured h3 {
            font-family: 'Montserrat', sans-serif;
            font-size: 1.15rem;
            font-weight: 800;
            color: #fff;
            margin-bottom: 6px;
          }

          .adv-featured p {
            font-size: 14px;
            color: rgba(255, 255, 255, .7);
            line-height: 1.6;
            margin-bottom: 14px;
          }

          .adv-featured-stats {
            display: flex;
            gap: 28px;
          }

          .adv-featured-stat strong {
            display: block;
            font-family: 'Montserrat', sans-serif;
            font-size: 1.6rem;
            font-weight: 800;
            color: #fff;
            line-height: 1;
          }

          .adv-featured-stat span {
            font-size: 11.5px;
            color: rgba(255, 255, 255, .55);
            text-transform: uppercase;
            letter-spacing: .04em;
          }

          .adv-grid-6 {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
            max-width: 980px;
            margin: 0 auto;
          }

          @media (max-width: 900px) {
            .adv-featured {
              flex-direction: column;
              text-align: center;
              gap: 14px
            }

            .adv-featured-stats {
              justify-content: center
            }
          }

          @media (max-width: 760px) {
            .adv-grid-6 {
              grid-template-columns: 1fr
            }
          }
        

/* ---- Bloque 2 (originalmente en index.php) ---- */
        
          .course-location {
            display: flex;
            flex-direction: column;
            gap: 4px;
            margin-top: 2px
          }

          .sede-row {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px;
            padding: 3px 0
          }

          .sede-info {
            font-size: 14px;
            color: var(--text-soft, #47616a);
            line-height: 1.4
          }

          .sede-info i {
            color: var(--secondary, #529aab);
            margin-right: 4px;
            width: 14px;
            text-align: center
          }

          .sede-badge {
            display: inline-block;
            font-size: 11px;
            font-weight: 700;
            padding: 2px 9px;
            border-radius: 20px;
            white-space: nowrap;
            letter-spacing: .1px;
            vertical-align: middle
          }
        

/* ---- Bloque 3 (originalmente en index.php) ---- */
        
          .combo-banner {
            margin-top: 32px;
            background: linear-gradient(135deg, #05323c 0%, #0a4d5c 100%);
            border-radius: 18px;
            padding: 36px 40px;
            box-shadow: 0 12px 32px rgba(5, 50, 60, 0.2);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 32px
          }

          .combo-banner-left {
            flex: 1;
            min-width: 0
          }

          .combo-banner-right {
            flex-shrink: 0;
            text-align: center;
            min-width: 200px
          }

          .combo-btn {
            display: inline-block;
            background: #529aab;
            color: #fff !important;
            border: none;
            border-radius: 10px;
            padding: 14px 28px;
            font-size: 15px;
            font-weight: 700;
            cursor: pointer;
            width: 100%;
            margin-top: 14px;
            font-family: inherit;
            letter-spacing: -.2px
          }

          .combo-btn:hover {
            background: #3d7f8f
          }

          @media(max-width:680px) {
            .combo-banner {
              flex-direction: column;
              padding: 24px 20px;
              gap: 20px
            }

            .combo-banner-right {
              width: 100%;
              text-align: left
            }

            .combo-btn {
              width: 100%
            }
          }
        

/* ---- Bloque 4 (originalmente en index.php) ---- */
        
          .social-proof-strip {
            margin-top: 40px
          }

          .sps-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 20px
          }

          .sps-head h3 {
            font-family: 'Montserrat', sans-serif;
            font-size: 1.05rem;
            font-weight: 800;
            color: #05323c;
            margin: 0;
            letter-spacing: -.2px
          }

          .sps-head a {
            font-size: 13px;
            font-weight: 700;
            color: #529aab;
            text-decoration: none;
            white-space: nowrap
          }

          .sps-head a:hover {
            text-decoration: underline
          }

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

          .sps-card {
            display: flex;
            gap: 16px;
            background: #fff;
            border: 1px solid rgba(5, 50, 60, .08);
            border-radius: 16px;
            padding: 18px;
            box-shadow: 0 4px 16px rgba(5, 50, 60, .05);
            text-decoration: none;
            transition: box-shadow .2s, transform .2s
          }

          .sps-card:hover {
            box-shadow: 0 10px 28px rgba(5, 50, 60, .10);
            transform: translateY(-2px)
          }

          .sps-thumb {
            position: relative;
            flex-shrink: 0;
            width: 88px;
            height: 88px;
            border-radius: 12px;
            overflow: hidden;
            background-size: cover;
            background-position: center
          }

          .sps-thumb::after {
            content: '';
            position: absolute;
            inset: 0;
            background: rgba(5, 50, 60, .15)
          }

          .sps-play {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1;
            color: #fff;
            font-size: 22px
          }

          .sps-body {
            flex: 1;
            min-width: 0
          }

          .sps-quote {
            font-size: 14px;
            color: #1a1a1a;
            line-height: 1.5;
            font-weight: 600;
            margin-bottom: 8px;
            quotes: none
          }

          .sps-name {
            font-size: 12.5px;
            color: #05323c;
            font-weight: 700
          }

          .sps-role {
            font-size: 11.5px;
            color: #7a8a8f;
            margin-top: 1px
          }

          @media(max-width:760px) {
            .sps-grid {
              grid-template-columns: 1fr
            }
          }
        

/* ---- Bloque 5 (originalmente en index.php) ---- */
        
          .teacher-avatar-ring {
            position: relative;
            width: 150px;
            height: 150px;
            margin: 0 auto 18px;
            border-radius: 50%;
            padding: 4px;
            background: linear-gradient(135deg, #529aab, #05323c);
          }

          .teacher-avatar-ring img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
            display: block;
            border: 3px solid #fff;
          }

          .teacher-credentials {
            display: flex;
            flex-direction: column;
            gap: 9px;
            margin-top: 14px;
            text-align: left;
            max-width: 340px;
            margin-left: auto;
            margin-right: auto;
          }

          .teacher-credential {
            display: flex;
            align-items: flex-start;
            gap: 9px;
            font-size: 13.5px;
            color: #47616a;
            line-height: 1.5;
          }

          .teacher-credential i {
            flex-shrink: 0;
            width: 18px;
            text-align: center;
            color: #529aab;
            margin-top: 2px;
            font-size: 12.5px;
          }
        

/* ---- Bloque 6 (originalmente en index.php) ---- */
        
          .teacher-spotlight {
            margin-top: 48px;
            max-width: 780px;
            margin-left: auto;
            margin-right: auto
          }

          .teacher-spotlight-card {
            display: flex;
            align-items: center;
            gap: 24px;
            background: #fff;
            border: 1px solid rgba(5, 50, 60, .08);
            border-radius: 20px;
            padding: 28px 32px;
            box-shadow: 0 12px 32px rgba(5, 50, 60, .06);
            text-decoration: none;
            transition: box-shadow .2s, transform .2s
          }

          .teacher-spotlight-card:hover {
            box-shadow: 0 18px 44px rgba(5, 50, 60, .11);
            transform: translateY(-2px)
          }

          .ts-thumb {
            position: relative;
            flex-shrink: 0;
            width: 84px;
            height: 84px;
            border-radius: 50%;
            overflow: hidden;
            background-size: cover;
            background-position: center
          }

          .ts-thumb::after {
            content: '';
            position: absolute;
            inset: 0;
            background: rgba(5, 50, 60, .15)
          }

          .ts-play {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1;
            color: #fff;
            font-size: 20px
          }

          .ts-quote {
            font-family: 'Montserrat', sans-serif;
            font-size: 1.15rem;
            font-weight: 700;
            color: #05323c;
            line-height: 1.4;
            margin-bottom: 6px
          }

          .ts-name {
            font-size: 13px;
            color: #529aab;
            font-weight: 700
          }

          @media(max-width:640px) {
            .teacher-spotlight-card {
              flex-direction: column;
              text-align: center;
              gap: 14px;
              padding: 24px 20px
            }
          }
        

/* ---- Bloque 7 (originalmente en index.php) ---- */
        
          .faq-group-label {
            max-width: 760px;
            margin: 28px auto 12px;
            font-family: 'Montserrat', sans-serif;
            font-size: 12.5px;
            font-weight: 800;
            letter-spacing: .06em;
            text-transform: uppercase;
            color: #529aab;
            text-align: left;
            padding-left: 4px;
          }

          .faq-group-label:first-child {
            margin-top: 0;
          }
        

/* ---- Bloque 8 (originalmente en index.php) ---- */
        
          .contact-trust-note {
            max-width: 560px;
            margin: 0 auto 28px;
            text-align: center;
            padding: 14px 20px;
            background: rgba(82, 154, 171, .06);
            border: 1px solid rgba(82, 154, 171, .15);
            border-radius: 12px;
            min-height: 62px;
            display: flex;
            flex-direction: column;
            justify-content: center
          }

          .contact-trust-note p {
            font-size: 14px;
            color: #47616a;
            font-style: italic;
            margin-bottom: 4px;
            transition: opacity .4s ease
          }

          .contact-trust-note span {
            font-size: 12px;
            color: #529aab;
            font-weight: 700;
            font-style: normal;
            transition: opacity .4s ease
          }

          .contact-trust-note.fading p,
          .contact-trust-note.fading span {
            opacity: 0
          }