/* ============================================================
   BACHILLERATO — Bachillerato Tecnológico Enfermería General
   Accent color: #0c3a56 (azul navy, consistente con card del index)
   ============================================================ */

:root {
    --bach-blue:       #0c3a56;
    --bach-blue-mid:   #1a5c8c;
    --bach-blue-light: rgba(12,58,86,0.08);
}

/* Hero ---------------------------------------------------- */
.bach-hero {
    position: relative;
    width: 100%;
    height: 520px;
    overflow: hidden;
}

.bach-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.bach-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(8,35,55,0.25) 0%, rgba(12,58,86,0.92) 60%);
}

.bach-hero__content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
    color: #fff;
}


.bach-hero__label {
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 100px;
    padding: .3rem 1rem;
    margin-bottom: 1rem;
}

.bach-hero__title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 .75rem;
}

.bach-hero__subtitle {
    font-size: clamp(.9rem, 2vw, 1.1rem);
    font-weight: 300;
    max-width: 600px;
    opacity: .9;
    margin: 0 0 2rem;
}

.bach-hero__cta {
    display: inline-block;
    padding: .75rem 2rem;
    background: #fff;
    color: var(--bach-blue);
    font-weight: 700;
    font-size: .95rem;
    border-radius: 100px;
    text-decoration: none;
    transition: transform .2s, box-shadow .2s;
}

.bach-hero__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
    color: var(--bach-blue);
}

/* Stats ---------------------------------------------------- */
.bach-stats {
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
}

.bach-stats__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: .5rem 0;
}

.bach-stats__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
    border-right: 1px solid #e5e7eb;
    text-align: center;
}

.bach-stats__item:last-child {
    border-right: none;
}

.bach-stats__number {
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--bach-blue);
    line-height: 1;
}

.bach-stats__label {
    font-size: .8rem;
    color: var(--muted-font-color);
    margin-top: .35rem;
    font-weight: 500;
}

/* Body container ------------------------------------------ */
.bach-body {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    padding-top: 4rem;
    padding-bottom: 4rem;
}

/* Section title ------------------------------------------- */
.bach-section-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--headers-font-color);
    margin: 0 0 1rem;
    position: relative;
    padding-bottom: .6rem;
}

.bach-section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 48px;
    height: 3px;
    background: var(--bach-blue);
    border-radius: 2px;
}

/* Quiénes somos ------------------------------------------- */
.bach-about__logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

.bach-about__logo {
    max-width: 226px;
    max-height: 223px;
    width: 100%;
    object-fit: contain;
}

.bach-about__badge {
    display: inline-block;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--bach-blue);
    background: var(--bach-blue-light);
    border-radius: 100px;
    padding: .25rem .9rem;
    margin-bottom: .75rem;
}

.bach-about__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: start;
}

.bach-about__text p {
    color: var(--body-font-color);
    line-height: 1.75;
    font-size: .97rem;
    margin-bottom: 1rem;
}

.bach-about__highlight {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1.5rem;
}

.bach-highlight-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: .75rem;
    padding: 1.1rem 1.25rem;
    transition: border-color .2s, box-shadow .2s;
}

.bach-highlight-card:hover {
    border-color: var(--bach-blue);
    box-shadow: 0 4px 16px var(--bach-blue-light);
}

.bach-highlight-card__icon {
    flex-shrink: 0;
    width: 2.2rem;
    height: 2.2rem;
    background: var(--bach-blue-light);
    border-radius: .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bach-blue);
}

.bach-highlight-card__icon svg {
    width: 1.1rem;
    height: 1.1rem;
}

.bach-highlight-card p {
    margin: 0;
    font-size: .88rem;
    color: var(--body-font-color);
    line-height: 1.6;
}

/* Misión y Visión ----------------------------------------- */
.bach-mv {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.bach-mv__card {
    border-radius: 1rem;
    padding: 2rem 2rem 2.25rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.bach-mv__card--mision {
    background: linear-gradient(135deg, var(--bach-blue) 0%, #071f2e 100%);
    color: #fff;
}

.bach-mv__card--vision {
    background: linear-gradient(135deg, var(--bach-blue-mid) 0%, #0d3d5e 100%);
    color: #fff;
}

.bach-mv__icon {
    width: 2.8rem;
    height: 2.8rem;
    background: rgba(255,255,255,.2);
    border-radius: .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bach-mv__icon svg {
    width: 1.4rem;
    height: 1.4rem;
    color: #fff;
}

.bach-mv__title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    color: #fff;
}

.bach-mv__text {
    font-size: .94rem;
    line-height: 1.75;
    opacity: .92;
    margin: 0;
}

/* Programa de Formación ----------------------------------- */
.bach-programa__header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.bach-programa__header .bach-section-title::after {
    left: 50%;
    transform: translateX(-50%);
}

.bach-programa__subtitle {
    color: var(--muted-font-color);
    font-size: .97rem;
    margin-top: .5rem;
}

.bach-semestres {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.bach-semestre {
    position: relative;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-left: 4px solid var(--bach-blue);
    border-radius: .875rem;
    overflow: hidden;
    transition: box-shadow .2s, transform .2s;
}

.bach-semestre:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,.1);
    transform: translateY(-3px);
}

.bach-semestre__num {
    position: absolute;
    top: -.5rem;
    right: .75rem;
    font-size: 7rem;
    font-weight: 900;
    line-height: 1;
    background: linear-gradient(160deg, var(--bach-blue) 0%, rgba(12,58,86,0) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    opacity: .18;
    pointer-events: none;
    user-select: none;
    letter-spacing: -.02em;
}

.bach-semestre__body {
    padding: 1.25rem 1.4rem;
    position: relative;
    z-index: 1;
}

.bach-semestre__title {
    font-size: .9rem;
    font-weight: 700;
    color: var(--headers-font-color);
    margin: 0 0 .75rem;
    line-height: 1.35;
}

.bach-semestre__topics {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.bach-semestre__topics li {
    font-size: .8rem;
    color: var(--body-font-color);
    padding-left: 1rem;
    position: relative;
    line-height: 1.45;
}

.bach-semestre__topics li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .5em;
    width: 5px;
    height: 5px;
    background: var(--bach-blue);
    border-radius: 50%;
}

/* Contacto ------------------------------------------------ */
.bach-contacto {
    background: linear-gradient(135deg, var(--bach-blue) 0%, #071f2e 100%);
    border-radius: 1.25rem;
    padding: 3rem 2.5rem;
    color: #fff;
}

.bach-contacto__title {
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 800;
    color: #fff;
    margin: 0 0 .5rem;
    text-align: center;
}

.bach-contacto__text {
    color: rgba(255,255,255,.82);
    font-size: .97rem;
    text-align: center;
    margin: 0 auto 2.25rem;
    max-width: 500px;
    line-height: 1.7;
}

.bach-contacto__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    max-width: 720px;
    margin: 0 auto;
}

.bach-contacto__item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: .75rem;
    padding: 1.1rem 1.25rem;
}

.bach-contacto__icon {
    flex-shrink: 0;
    width: 2.2rem;
    height: 2.2rem;
    background: rgba(255,255,255,.15);
    border-radius: .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bach-contacto__icon svg {
    width: 1.1rem;
    height: 1.1rem;
    color: #fff;
}

.bach-contacto__label {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255,255,255,.6);
    margin-bottom: .2rem;
}

.bach-contacto__item p {
    margin: 0;
    font-size: .88rem;
    color: #fff;
    line-height: 1.5;
}

/* ============================================================
   PAGO EN LÍNEA — CTAs en la página principal de bachillerato
   ============================================================ */

.bach-hero__ctas {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: .25rem;
}

/* Variante "Pagar en línea" del botón hero (fondo blanco inverso) */
.bach-hero__cta--pay {
    background: #fff;
    color: var(--bach-blue);
    border: 2px solid rgba(255,255,255,.85);
}

.bach-hero__cta--pay:hover {
    color: var(--bach-blue);
}

.bach-hero__cta-icon {
    vertical-align: -2px;
    margin-right: 4px;
}

/* Sección CTA de pago dentro del .bach-body */
.bach-pago-cta {
    background: linear-gradient(135deg, var(--bach-blue) 0%, var(--bach-blue-mid) 100%);
    border-radius: 12px;
    padding: 2.5rem 2rem;
    text-align: center;
    margin-bottom: 2rem;
}

.bach-pago-cta__title {
    color: #fff;
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0 0 .6rem;
}

.bach-pago-cta__text {
    color: rgba(255,255,255,.75);
    font-size: .9rem;
    margin: 0 0 1.4rem;
}

.bach-pago-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: #fff;
    color: var(--bach-blue);
    font-weight: 700;
    font-size: .95rem;
    padding: .75rem 1.75rem;
    border-radius: 8px;
    text-decoration: none;
    transition: opacity .2s;
}

.bach-pago-cta__btn:hover {
    opacity: .88;
    color: var(--bach-blue);
}

/* ============================================================
   FORMULARIO DE PAGO — /bachillerato/pago
   ============================================================ */

.bpago-hero {
    background: linear-gradient(135deg, var(--bach-blue) 0%, var(--bach-blue-mid) 100%);
    padding: 3rem 0 2.5rem;
    text-align: center;
    color: #fff;
}

.bpago-hero__label {
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: rgba(255,255,255,.65);
    margin-bottom: .5rem;
}

.bpago-hero__title { font-size: 1.75rem; font-weight: 700; margin: 0 0 .5rem; }
.bpago-hero__sub   { font-size: .95rem; color: rgba(255,255,255,.7); }

.bpago-wrap { max-width: 780px; margin: 2.5rem auto 4rem; padding: 0 1rem; }

.bpago-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 16px rgba(0,0,0,.08);
    overflow: hidden;
}

.bpago-section {
    padding: 1.75rem 2rem;
    border-bottom: 1px solid #f0f0f0;
}

.bpago-section:last-child { border-bottom: none; }

.bpago-section__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--bach-blue);
    margin: 0 0 1.25rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.bpago-section__title svg { flex-shrink: 0; }

.bform-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.bform-group { margin-bottom: 1.1rem; }

.bform-label {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    color: #444;
    margin-bottom: .35rem;
}

.bform-label .required { color: #e53e3e; margin-left: 2px; }

.bform-control {
    width: 100%;
    padding: .6rem .85rem;
    border: 1.5px solid #d1d5db;
    border-radius: 7px;
    font-size: .92rem;
    color: #1a1a1a;
    background: #fff;
    transition: border-color .2s, box-shadow .2s;
    box-sizing: border-box;
}

.bform-control:focus {
    outline: none;
    border-color: var(--bach-blue);
    box-shadow: 0 0 0 3px rgba(12,58,86,.1);
}

.bform-control.is-invalid { border-color: #e53e3e; }

.bform-error { font-size: .78rem; color: #e53e3e; margin-top: .3rem; }

.bform-hint { font-size: .75rem; color: #888; margin: .3rem 0 0; }

/* Monto */
.bpago-monto-wrap { position: relative; }

.bpago-monto-prefix {
    position: absolute;
    left: .85rem;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 600;
    color: #555;
    pointer-events: none;
}

.bpago-monto-input { padding-left: 2.5rem !important; }

/* Desglose de comisiones */
.bpago-breakdown {
    background: #f0f6fc;
    border: 1.5px solid #c3ddf0;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-top: 1rem;
    transition: opacity .3s;
}

.bpago-breakdown.hidden { opacity: 0; pointer-events: none; }

.bpago-breakdown__title {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--bach-blue);
    margin-bottom: .75rem;
}

.bpago-breakdown__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .88rem;
    color: #555;
    padding: .3rem 0;
    border-bottom: 1px dashed #d0e5f5;
}

.bpago-breakdown__row:last-child { border-bottom: none; }

.bpago-breakdown__row.total {
    font-weight: 700;
    font-size: 1rem;
    color: var(--bach-blue);
    border-top: 2px solid #c3ddf0;
    border-bottom: none;
    padding-top: .6rem;
    margin-top: .3rem;
}

.bpago-breakdown__amount { font-weight: 600; color: #1a3a52; }
.bpago-breakdown__row.total .bpago-breakdown__amount { color: var(--bach-blue); font-size: 1.1rem; }

.bpago-breakdown__note { font-size: .74rem; color: #6b87a0; margin-top: .6rem; line-height: 1.4; }

/* Botón de envío */
.bpago-submit-wrap { padding: 1.5rem 2rem; background: #fafafa; }

.bpago-btn-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    width: 100%;
    padding: .9rem 1.5rem;
    background: var(--bach-blue);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background .2s, transform .1s;
}

.bpago-btn-submit:hover { background: var(--bach-blue-mid); }
.bpago-btn-submit:active { transform: scale(.98); }
.bpago-btn-submit:disabled { background: #9cb3c4; cursor: not-allowed; }

@keyframes bpago-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.bpago-spinner { animation: bpago-spin 1s linear infinite; }

.bpago-secure-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    font-size: .78rem;
    color: #888;
    margin-top: .75rem;
}

.bpago-alert {
    background: #fff5f5;
    border: 1px solid #feb2b2;
    color: #c53030;
    padding: .85rem 1rem;
    border-radius: 7px;
    font-size: .88rem;
    margin-bottom: 1.5rem;
}

/* ============================================================
   CONFIRMACIÓN DE PAGO — /bachillerato/pago/respuesta
   ============================================================ */

.bconf-hero {
    background: linear-gradient(135deg, var(--bach-blue) 0%, var(--bach-blue-mid) 100%);
    padding: 2.5rem 0 2rem;
    text-align: center;
    color: #fff;
}

.bconf-hero__label {
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: rgba(255,255,255,.65);
    margin-bottom: .5rem;
}

.bconf-hero__title { font-size: 1.6rem; font-weight: 700; margin: 0; }

.bconf-wrap { max-width: 640px; margin: 2.5rem auto 4rem; padding: 0 1rem; }

.bconf-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 16px rgba(0,0,0,.08);
    overflow: hidden;
}

/* Status header */
.bconf-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 2rem 1.5rem;
    border-bottom: 1px solid #f0f0f0;
}

.bconf-status__icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.bconf-status__icon--success { background: #d1fae5; }
.bconf-status__icon--pending { background: #fef9c3; }
.bconf-status__icon--store   { background: #dbeafe; }

.bconf-status__title { font-size: 1.2rem; font-weight: 700; color: #111; margin: 0 0 .4rem; }
.bconf-status__sub   { font-size: .88rem; color: #666; text-align: center; margin: 0; }

/* Folio */
.bconf-folio {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.25rem 2rem;
    background: #f0f6fc;
    border-bottom: 1px solid #e0edf8;
}

.bconf-folio__label { font-size: .73rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #6b87a0; margin-bottom: .25rem; }
.bconf-folio__value { font-size: 2rem; font-weight: 800; color: var(--bach-blue); letter-spacing: .12em; }

/* Tabla de detalles */
.bconf-details { padding: 1.5rem 2rem; border-bottom: 1px solid #f0f0f0; }
.bconf-details__title { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #888; margin: 0 0 .9rem; }

.bconf-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.bconf-table tr td { padding: .55rem 0; border-bottom: 1px solid #f3f3f3; }
.bconf-table tr:last-child td { border-bottom: none; }
.bconf-table td:first-child { color: #777; }
.bconf-table td:last-child { font-weight: 600; text-align: right; }
.bconf-table .total-row td { font-size: 1rem; color: var(--bach-blue); padding-top: .85rem; border-top: 2px solid #e0edf8; border-bottom: none; }
.bconf-table--mt { margin-top: 1rem; }

/* Pago en tienda (OXXO / 7-Eleven) */
.bconf-store { padding: 1.5rem 2rem; border-bottom: 1px solid #f0f0f0; }
.bconf-store__title { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #888; margin: 0 0 1rem; }

.bconf-store__ref {
    background: #eff6ff;
    border: 1.5px dashed #93c5fd;
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
    margin-bottom: 1rem;
}

.bconf-store__ref-label { font-size: .75rem; color: #64748b; margin-bottom: .3rem; }
.bconf-store__ref-value { font-size: 1.6rem; font-weight: 800; color: #1d4ed8; letter-spacing: .06em; }

.bconf-store__barcode { text-align: center; margin-bottom: .75rem; }
.bconf-store__barcode img { max-width: 100%; height: auto; }

.bconf-store__deadline { font-size: .82rem; color: #ef4444; font-weight: 600; margin-top: .5rem; }
.bconf-store__note { font-size: .83rem; color: #555; margin-top: .75rem; }

/* Acciones */
.bconf-actions { padding: 1.5rem 2rem; display: flex; gap: .75rem; flex-direction: column; }

.bconf-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .75rem 1.25rem;
    border-radius: 8px;
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s;
}

.bconf-btn--primary { background: var(--bach-blue); color: #fff; }
.bconf-btn--primary:hover { background: var(--bach-blue-mid); color: #fff; }
.bconf-btn--outline { background: transparent; color: var(--bach-blue); border: 1.5px solid var(--bach-blue); }
.bconf-btn--outline:hover { background: #f0f6fc; }

.bconf-footer-note { text-align: center; font-size: .78rem; color: #aaa; margin-top: 1.25rem; }

/* Responsive ---------------------------------------------- */
@media (max-width: 992px) {
    .bach-about__grid,
    .bach-mv {
        grid-template-columns: 1fr;
    }

    .bach-about__highlight {
        grid-template-columns: 1fr;
    }

    .bach-semestres {
        grid-template-columns: repeat(2, 1fr);
    }

    .bach-stats__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .bach-stats__item:nth-child(2) { border-right: none; }
    .bach-stats__item:nth-child(3) { border-top: 1px solid #e5e7eb; }
    .bach-stats__item:nth-child(4) { border-top: 1px solid #e5e7eb; border-right: none; }
}

@media (max-width: 640px) {
    .bach-hero { height: 420px; }

    .bach-semestres { grid-template-columns: 1fr; }

    .bach-contacto__grid { grid-template-columns: 1fr; }

    .bach-body {
        gap: 3rem;
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .bform-row { grid-template-columns: 1fr; }

    .bpago-section,
    .bpago-submit-wrap,
    .bconf-details,
    .bconf-store,
    .bconf-actions { padding-left: 1.25rem; padding-right: 1.25rem; }
}