/* Modal de Bachillerato: misma composicion que el modal de la portada. */
html.lead-open { overflow: hidden; }

.lead-modal {
  width: min(900px, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 40px);
  margin: auto; padding: 0; border: 0; border-radius: 12px; background: #fff; color: var(--ink);
  box-shadow: 0 40px 100px rgba(10, 6, 16, .45); overflow: auto; overscroll-behavior: contain;
}
.lead-modal::backdrop { background: rgba(20, 14, 28, .72); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.lead-modal-box { position: relative; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); grid-template-rows: 1fr auto; }
.lead-modal-box:focus { outline: none; }

/* Imagen con el título encima */
.lead-modal-head {
  grid-column: 1; grid-row: 1 / 3; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 100%; padding: 32px 30px; color: #fff;
  background: linear-gradient(0deg, rgba(14, 10, 20, .95) 0%, rgba(14, 10, 20, .6) 40%, rgba(14, 10, 20, .05) 75%), var(--lead-img, none) 26% 50% / cover no-repeat, #211a2c;
}
.lead-modal-kicker { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-light); }
.lead-modal-title { margin: 0; font: 500 30px/1.12 "Playfair Display", Georgia, serif; color: #fff; }
.lead-modal-intro { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: #e6dcee; }

/* Cerrar: arriba a la derecha y fijo al desplazar (sticky dentro de su área de la cuadrícula) */
.lead-modal .lead-modal-close { position: sticky; z-index: 3; top: 10px; grid-column: 2; grid-row: 1 / 3; justify-self: end; align-self: start; margin: 10px 10px 0 0; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--navy); cursor: pointer; }
.lead-modal .lead-modal-close:hover { background: #f0ebf3; }
body.home-v4 .lead-modal .lead-modal-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

[data-lead-slot] { grid-column: 2; grid-row: 1; min-width: 0; }
body.bv-main .lead-modal .form { gap: 14px; margin: 0; padding: 30px 30px 6px; background: #fff; border: 0; border-radius: 0; box-shadow: none; }
body.bv-main .lead-modal .form .form-title { display: block; margin: 0 48px 2px 0; font-size: 24px; }
body.bv-main .lead-modal .form :is(label) { color: var(--navy); }
body.bv-main .lead-modal .form :where(input:not([type="checkbox"]):not([type="hidden"]), select) { min-height: 46px; }
body.bv-main .lead-modal .form .btn { width: 100%; min-height: 48px; color: #fff; background: var(--accent); }
body.bv-main .lead-modal .form .btn:hover { background: var(--accent-hover); }

.lead-modal-alt { grid-column: 2; grid-row: 2; margin: 0; padding: 6px 30px 24px; font-size: 14px; color: var(--muted); }
.lead-modal-alt a { font-weight: 700; color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; }

/* Tableta chica y celular: una columna, imagen como franja arriba */
@media (max-width: 760px) {
  .lead-modal { width: min(560px, calc(100% - 32px)); }
  .lead-modal-box { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  .lead-modal .lead-modal-close { grid-column: 1; grid-row: 1 / 4; }
  .lead-modal-head { grid-column: 1; grid-row: 1; min-height: 190px; padding: 22px 20px 16px; background-position: center, 24% 45%, center; }
  .lead-modal-title { font-size: 26px; }
  .lead-modal .lead-modal-close { color: #fff; background: rgba(33, 26, 44, .78); box-shadow: 0 4px 14px rgba(10, 6, 16, .3); }
  .lead-modal .lead-modal-close:hover { background: rgba(33, 26, 44, .92); }
  body.home-v4 .lead-modal .lead-modal-close:focus-visible { outline-color: var(--accent-light); }
  [data-lead-slot] { grid-column: 1; grid-row: 2; }
  body.bv-main .lead-modal .form { padding: 18px 20px 6px; }
  body.bv-main .lead-modal .form .form-title { margin: 0; font-size: 22px; }
  .lead-modal-alt { grid-column: 1; grid-row: 3; padding: 6px 20px 20px; }
}
@media (max-width: 640px) {
  .lead-modal { width: 100%; max-height: 92dvh; margin: auto 0 0; border-radius: 16px 16px 0 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .lead-modal[open] { animation: lead-in .28s cubic-bezier(.16, 1, .3, 1); }
  .lead-modal[open]::backdrop { animation: lead-fade .28s ease; }
}
@keyframes lead-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes lead-fade { from { opacity: 0; } to { opacity: 1; } }