/* Estilos específicos de matricula2026.html */
:root {
      --stc-burdeo: #7b1124;
      --stc-burdeo-oscuro: #4f0816;
      --stc-dorado: #d9a441;
      --stc-dorado-claro: #ffd86b;
      --stc-crema: #fff7e5;
      --stc-gris: #f5f5f5;
      --stc-texto: #2d2d2d;
      --stc-verde: #1fa855;
      --sombra-suave: 0 14px 35px rgba(0,0,0,.12);
      --sombra-media: 0 18px 45px rgba(123,17,36,.22);
      --radio: 24px;
    }

    html { scroll-behavior: smooth; }

    body {
      margin: 0;
      color: var(--stc-texto);
      background: #fff;
    }

    .matricula-page * { box-sizing: border-box; }

    .matricula-page {
      overflow: hidden;
      background:
        radial-gradient(circle at top left, rgba(217,164,65,.16), transparent 32%),
        radial-gradient(circle at top right, rgba(123,17,36,.12), transparent 30%),
        #ffffff;
    }

    .matricula-container {
      width: min(1120px, calc(100% - 32px));
      margin: 0 auto;
    }

    .hero-matricula {
      position: relative;
      min-height: 620px;
      display: flex;
      align-items: center;
      padding: 80px 0 70px;
      color: #fff;
      background:
        linear-gradient(115deg, rgba(79,8,22,.95), rgba(123,17,36,.88) 48%, rgba(217,164,65,.70)),
        url('../img/colegio.jpg') center/cover no-repeat;
      isolation: isolate;
    }

    .hero-matricula::after {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
      background-size: 42px 42px;
      opacity: .18;
      z-index: -1;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 38px;
      align-items: center;
    }

    .badge-admision {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 10px 16px;
      border: 1px solid rgba(255,255,255,.35);
      border-radius: 999px;
      background: rgba(255,255,255,.12);
      backdrop-filter: blur(8px);
      font-weight: 800;
      letter-spacing: .3px;
      margin-bottom: 22px;
    }

    .badge-admision span {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--stc-dorado-claro);
      box-shadow: 0 0 0 6px rgba(255,216,107,.18);
    }

    .hero-matricula h1 {
      margin: 0;
      font-size: clamp(2.4rem, 6vw, 5rem);
      line-height: .96;
      letter-spacing: -2px;
      text-wrap: balance;
      color: #fff;
    }

    .hero-matricula h1 strong {
      color: var(--stc-dorado-claro);
      display: block;
      text-shadow: 0 5px 15px rgba(0,0,0,.22);
    }

    .hero-texto {
      font-size: clamp(1.08rem, 2.2vw, 1.32rem);
      line-height: 1.6;
      max-width: 640px;
      margin: 24px 0 28px;
      color: rgba(255,255,255,.92);
    }

    .hero-actions, .cta-actions {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      align-items: center;
    }

    .btn-stc {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 52px;
      padding: 14px 22px;
      border-radius: 999px;
      font-weight: 900;
      text-decoration: none;
      border: 2px solid transparent;
      transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
      line-height: 1.1;
    }

    .btn-stc:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 24px rgba(0,0,0,.18);
    }

    .btn-whatsapp {
      background: var(--stc-verde);
      color: #fff;
    }

    .btn-dorado {
      background: var(--stc-dorado-claro);
      color: var(--stc-burdeo-oscuro);
    }

    .btn-outline {
      border-color: rgba(255,255,255,.55);
      color: #fff;
      background: rgba(255,255,255,.08);
    }

    .hero-card {
      background: rgba(255,255,255,.96);
      border-radius: 32px;
      padding: 18px;
      box-shadow: var(--sombra-media);
      transform: rotate(1.2deg);
    }

    .hero-card img {
      width: 100%;
      display: block;
      border-radius: 24px;
      aspect-ratio: 4 / 5;
      object-fit: cover;
      object-position: center;
    }

    .gift-strip {
      margin-top: 14px;
      padding: 16px;
      border-radius: 20px;
      background: linear-gradient(135deg, var(--stc-burdeo), var(--stc-burdeo-oscuro));
      color: #fff;
      text-align: center;
      font-weight: 900;
      font-size: 1.05rem;
    }

    .stats-bar {
      margin-top: -42px;
      position: relative;
      z-index: 2;
    }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      background: #fff;
      border-radius: var(--radio);
      box-shadow: var(--sombra-suave);
      overflow: hidden;
      border: 1px solid rgba(123,17,36,.08);
    }

    .stat-item {
      padding: 26px 20px;
      text-align: center;
      border-right: 1px solid #eee;
    }

    .stat-item:last-child { border-right: 0; }

    .stat-num {
      display: block;
      color: var(--stc-burdeo);
      font-size: 2rem;
      font-weight: 950;
      line-height: 1;
    }

    .stat-label {
      display: block;
      margin-top: 8px;
      font-weight: 700;
      color: #555;
    }

    .section-matricula {
      padding: 78px 0;
    }

    .section-head {
      text-align: center;
      max-width: 780px;
      margin: 0 auto 38px;
    }

    .eyebrow {
      color: var(--stc-dorado);
      font-weight: 950;
      text-transform: uppercase;
      letter-spacing: 1.4px;
      font-size: .86rem;
      margin-bottom: 10px;
    }

    .section-head h2 {
      margin: 0;
      color: var(--stc-burdeo);
      font-size: clamp(2rem, 4vw, 3.1rem);
      line-height: 1.08;
      letter-spacing: -1px;
    }

    .section-head p {
      margin: 16px auto 0;
      font-size: 1.08rem;
      line-height: 1.65;
      color: #575757;
    }

    .beneficios-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }

    .beneficio-card {
      background: #fff;
      border-radius: var(--radio);
      padding: 28px 22px;
      box-shadow: 0 10px 26px rgba(0,0,0,.07);
      border: 1px solid rgba(123,17,36,.08);
      transition: transform .18s ease, box-shadow .18s ease;
    }

    .beneficio-card:hover {
      transform: translateY(-5px);
      box-shadow: var(--sombra-suave);
    }

    .beneficio-icon {
      width: 56px;
      height: 56px;
      display: grid;
      place-items: center;
      border-radius: 18px;
      background: var(--stc-crema);
      color: var(--stc-burdeo);
      font-size: 1.8rem;
      margin-bottom: 16px;
    }

    .beneficio-card h3 {
      margin: 0 0 8px;
      color: var(--stc-burdeo);
      font-size: 1.25rem;
    }

    .beneficio-card p {
      margin: 0;
      line-height: 1.55;
      color: #5d5d5d;
    }

    .promo-section {
      background: linear-gradient(180deg, var(--stc-crema), #fff);
    }

    .promo-grid {
      display: grid;
      grid-template-columns: .95fr 1.05fr;
      gap: 36px;
      align-items: center;
    }

    .promo-img-wrap {
      background: #fff;
      border-radius: 30px;
      padding: 16px;
      box-shadow: var(--sombra-suave);
      border: 1px solid rgba(123,17,36,.08);
    }

    .promo-img-wrap img {
      display: block;
      width: 100%;
      border-radius: 22px;
    }

    .info-panel {
      background: #fff;
      border-radius: 30px;
      padding: 34px;
      box-shadow: var(--sombra-suave);
      border-left: 8px solid var(--stc-dorado);
    }

    .info-panel h2 {
      margin: 0 0 16px;
      color: var(--stc-burdeo);
      font-size: clamp(1.8rem, 3vw, 2.7rem);
      line-height: 1.1;
    }

    .info-panel p {
      line-height: 1.68;
      color: #555;
      margin: 0 0 18px;
    }

    .check-list {
      list-style: none;
      padding: 0;
      margin: 22px 0 0;
      display: grid;
      gap: 12px;
    }

    .check-list li {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      background: #fafafa;
      padding: 14px 16px;
      border-radius: 16px;
      border: 1px solid #eee;
      line-height: 1.45;
    }

    .check-list li::before {
      content: "✓";
      flex: 0 0 26px;
      height: 26px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: var(--stc-burdeo);
      color: #fff;
      font-weight: 900;
      margin-top: -2px;
    }

    .pasos-section {
      background: #fff;
    }

    .timeline {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
      counter-reset: pasos;
    }

    .paso-card {
      position: relative;
      background: linear-gradient(180deg, #fff, #fffaf0);
      border-radius: var(--radio);
      padding: 30px 22px 26px;
      box-shadow: 0 10px 26px rgba(0,0,0,.07);
      border: 1px solid rgba(217,164,65,.22);
      overflow: hidden;
    }

    .paso-card::before {
      counter-increment: pasos;
      content: counter(pasos);
      width: 54px;
      height: 54px;
      display: grid;
      place-items: center;
      border-radius: 18px;
      background: var(--stc-burdeo);
      color: var(--stc-dorado-claro);
      font-size: 1.7rem;
      font-weight: 950;
      margin-bottom: 18px;
    }

    .paso-card h3 {
      color: var(--stc-burdeo);
      margin: 0 0 8px;
      font-size: 1.2rem;
    }

    .paso-card p {
      margin: 0;
      color: #5a5a5a;
      line-height: 1.55;
    }

    .contacto-section {
      background:
        linear-gradient(135deg, rgba(123,17,36,.96), rgba(79,8,22,.97)),
        url('../img/colegio.jpg') center/cover no-repeat;
      color: #fff;
    }

    .contacto-section .section-head h2,
    .contacto-section .section-head p { color: #fff; }

    .contact-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
      margin-top: 34px;
    }

    .contact-card {
      background: rgba(255,255,255,.1);
      border: 1px solid rgba(255,255,255,.22);
      border-radius: var(--radio);
      padding: 24px;
      text-align: center;
      backdrop-filter: blur(8px);
    }

    .contact-card .icon {
      font-size: 2rem;
      margin-bottom: 10px;
    }

    .contact-card h3 {
      margin: 0 0 8px;
      color: var(--stc-dorado-claro);
      font-size: 1.15rem;
    }

    .contact-card a,
    .contact-card p {
      margin: 0;
      color: #fff;
      text-decoration: none;
      font-weight: 800;
      overflow-wrap: anywhere;
    }

    .cta-box {
      margin-top: 34px;
      padding: 30px;
      border-radius: 28px;
      background: rgba(255,255,255,.11);
      border: 1px solid rgba(255,255,255,.22);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
      flex-wrap: wrap;
    }

    .cta-box h3 {
      margin: 0 0 6px;
      font-size: 1.7rem;
      color: #fff;
    }

    .cta-box p {
      margin: 0;
      color: rgba(255,255,255,.88);
    }

    .nota-sae {
      margin-top: 20px;
      padding: 18px 20px;
      border-radius: 18px;
      background: rgba(255,216,107,.14);
      border: 1px solid rgba(255,216,107,.32);
      color: #fff;
      line-height: 1.55;
    }

    @media (max-width: 980px) {
      .hero-grid,
      .promo-grid {
        grid-template-columns: 1fr;
      }

      .hero-card {
        max-width: 560px;
        margin: 0 auto;
        transform: none;
      }

      .beneficios-grid,
      .timeline,
      .stats-grid,
      .contact-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 620px) {
      .hero-matricula {
        min-height: auto;
        padding: 54px 0 64px;
      }

      .hero-matricula h1 {
        letter-spacing: -1px;
      }

      .stats-bar { margin-top: -28px; }

      .beneficios-grid,
      .timeline,
      .stats-grid,
      .contact-grid {
        grid-template-columns: 1fr;
      }

      .stat-item { border-right: 0; border-bottom: 1px solid #eee; }
      .stat-item:last-child { border-bottom: 0; }

      .section-matricula { padding: 58px 0; }
      .info-panel { padding: 26px 20px; }
      .cta-box { padding: 24px 20px; }
      .btn-stc { width: 100%; }
    }
  
/* ==========================================
   FIX LANDING MATRÍCULA
========================================== */
.matricula-page section {
    min-height: auto !important;
    display: block !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.matricula-page .hero-matricula {
    display: flex !important;
    min-height: 620px !important;
}

.matricula-page .stats-bar {
    position: relative !important;
    z-index: 30 !important;
    margin-top: -70px !important;
    margin-bottom: 0 !important;
}

.matricula-page .section-matricula {
    padding: 70px 0 !important;
}
/* Video Matrícula */

.matricula-video{
    width:100%;
    display:block;
    border-radius:24px;
    object-fit:cover;
    background:#000;
}

.hero-card .matricula-video{
    max-height:720px;
}

.promo-img-wrap .matricula-video{
    border-radius:22px;
}

/* Evita controles visibles */
.matricula-video::-webkit-media-controls{
    display:none !important;
}