/* ================================================================
       VARIABLES & BASE
    ================================================================ */
 :root {
     --brand-primary: #1a1a2e;
     --brand-accent: #e94560;
     --brand-light: #f7f3ef;
     --brand-card: #ffffff;
     --brand-border: #e8e0d8;
     --brand-text: #2d2d2d;
     --brand-muted: #7a7a8a;
     --transition: all .25s cubic-bezier(.4, 0, .2, 1);
 }

 body {
     font-family: 'DM Sans', sans-serif;
     background-color: var(--brand-light);
     color: var(--brand-text);
     min-height: 100vh;
 }

 /* ================================================================
       HERO HEADER
    ================================================================ */
 .hero-header {
     background: var(--brand-primary);
     padding: 3.5rem 0 2.5rem;
     position: relative;
     overflow: hidden;
 }

 .hero-header::before {
     content: '';
     position: absolute;
     inset: 0;
     background: radial-gradient(ellipse at 80% 50%, rgba(233, 69, 96, .18) 0%, transparent 65%);
 }

 .hero-header .badge-evento {
     display: inline-block;
     background: rgba(233, 69, 96, .15);
     border: 1px solid rgba(233, 69, 96, .4);
     color: #e94560;
     font-size: .75rem;
     font-weight: 600;
     letter-spacing: .12em;
     text-transform: uppercase;
     padding: .35rem .9rem;
     border-radius: 50px;
     margin-bottom: 1rem;
 }

 .hero-header h1 {
     font-family: 'Playfair Display', Georgia, serif;
     font-size: clamp(2rem, 5vw, 3.2rem);
     font-weight: 800;
     color: #fff;
     line-height: 1.15;
     margin-bottom: .75rem;
 }

 .hero-header h1 span {
     color: var(--brand-accent);
 }

 .hero-header p.lead {
     color: rgba(255, 255, 255, .65);
     font-size: 1rem;
     max-width: 520px;
     margin: 0;
 }

 /* ================================================================
       FORMULARIO CARD
    ================================================================ */
 .form-card {
     background: var(--brand-card);
     border: 1px solid var(--brand-border);
     border-radius: 20px;
     padding: 2.5rem;
     box-shadow: 0 8px 48px rgba(0, 0, 0, .08);
 }

 .form-label {
     font-weight: 600;
     font-size: .875rem;
     color: var(--brand-primary);
     margin-bottom: .4rem;
 }

 .form-control {
     border: 1.5px solid var(--brand-border);
     border-radius: 10px;
     padding: .7rem 1rem;
     font-size: .95rem;
     transition: var(--transition);
 }

 .form-control:focus {
     border-color: var(--brand-accent);
     box-shadow: 0 0 0 3px rgba(233, 69, 96, .12);
 }

 .form-control.is-invalid {
     border-color: #dc3545;
 }

 .form-control.is-valid {
     border-color: #198754;
 }

 /* ================================================================
       OPCIONES — BOTONES LLAMATIVOS (custom, sin Bootstrap)
    ================================================================ */
 .opciones-container {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
     gap: 1rem;
     margin-top: .4rem;
 }

 .opcion-label {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     cursor: pointer;
     border-radius: 14px;
     padding: 1.1rem 1.25rem;
     border: 2px solid var(--brand-border);
     background: #fafafa;
     transition: var(--transition);
     position: relative;
     overflow: hidden;
     user-select: none;
 }

 .opcion-label::before {
     content: '';
     position: absolute;
     inset: 0;
     background: linear-gradient(135deg, rgba(233, 69, 96, .06), transparent);
     opacity: 0;
     transition: var(--transition);
 }

 /* Radio real oculto */
 .opcion-label input[type="radio"] {
     position: absolute;
     opacity: 0;
     width: 0;
     height: 0;
 }

 .opcion-check {
     width: 20px;
     height: 20px;
     border-radius: 50%;
     border: 2px solid #c8c0b8;
     background: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: .75rem;
     flex-shrink: 0;
     transition: var(--transition);
 }

 .opcion-check::after {
     content: '';
     width: 9px;
     height: 9px;
     border-radius: 50%;
     background: var(--brand-accent);
     transform: scale(0);
     transition: transform .2s cubic-bezier(.34, 1.56, .64, 1);
 }

 .opcion-codigo {
     font-size: .72rem;
     font-weight: 700;
     letter-spacing: .1em;
     text-transform: uppercase;
     color: var(--brand-primary);
     margin-bottom: .2rem;
     transition: var(--transition);
     display: block;
     margin-top: 10px;
 }

 .opcion-nombre {
     font-weight: 700;
     font-size: .9rem;
     color: var(--brand-primary);
     line-height: 1.3;
     transition: var(--transition);
 }

 .opcion-desc {
     font-size: .78rem;
     color: var(--brand-muted);
     margin-top: .3rem;
     line-height: 1.4;
 }

 /* Estado SELECCIONADO */
 .opcion-label.selected,
 .opcion-label:has(input:checked) {
     border-color: var(--brand-accent);
     background: #fff;
     box-shadow: 0 4px 20px rgba(233, 69, 96, .18);
     transform: translateY(-2px);
 }

 .opcion-label.selected::before,
 .opcion-label:has(input:checked)::before {
     opacity: 1;
 }

 .opcion-label.selected .opcion-check,
 .opcion-label:has(input:checked) .opcion-check {
     border-color: var(--brand-accent);
 }

 .opcion-label.selected .opcion-check::after,
 .opcion-label:has(input:checked) .opcion-check::after {
     transform: scale(1);
 }

 .opcion-label.selected .opcion-codigo,
 .opcion-label:has(input:checked) .opcion-codigo {
     color: var(--brand-accent);
 }

 .opcion-label:hover:not(.selected) {
     border-color: #c8b8c8;
     background: #fff;
     transform: translateY(-1px);
 }

 /* Error en opciones */
 .opciones-error {
     display: none;
     color: #dc3545;
     font-size: .85rem;
     margin-top: .35rem;
 }

 .opciones-error.show {
     display: block;
 }

 /* ================================================================
       BOTÓN SUBMIT
    ================================================================ */
 .btn-inscribir {
     background: linear-gradient(135deg, #e94560, #c7253e);
     border: none;
     color: #fff;
     font-weight: 700;
     font-size: 1rem;
     padding: .85rem 2.5rem;
     border-radius: 12px;
     letter-spacing: .02em;
     transition: var(--transition);
     box-shadow: 0 4px 20px rgba(233, 69, 96, .35);
     position: relative;
     overflow: hidden;
 }

 .btn-inscribir:hover:not(:disabled) {
     transform: translateY(-2px);
     box-shadow: 0 8px 28px rgba(233, 69, 96, .45);
     background: linear-gradient(135deg, #f05070, #e94560);
     color: #fff;
 }

 .btn-inscribir:disabled {
     opacity: .7;
     transform: none;
 }

 .btn-inscribir .spinner-border {
     width: 1.1rem;
     height: 1.1rem;
 }

 /* ================================================================
       ALERTAS DE RESULTADO
    ================================================================ */
 .alert-resultado {
     display: none;
     border-radius: 12px;
     border-left: 4px solid;
     padding: 1rem 1.25rem;
 }

 .alert-resultado.show {
     display: flex;
     align-items: flex-start;
     gap: .6rem;
 }

 .alert-resultado.alert-success {
     border-left-color: #198754;
     background: #d1e7dd;
 }

 .alert-resultado.alert-danger {
     border-left-color: #dc3545;
     background: #f8d7da;
 }

 /* ================================================================
       FOOTER
    ================================================================ */
 .footer-link {
     color: var(--brand-muted);
     font-size: .8rem;
     text-decoration: none;
 }

 .footer-link:hover {
     color: var(--brand-accent);
 }

 /* ================================================================
       SKELETON LOADER para opciones
    ================================================================ */
 .skeleton {
     background: linear-gradient(90deg, #f0e8e0 25%, #e8ddd5 50%, #f0e8e0 75%);
     background-size: 200% 100%;
     animation: shimmer 1.4s infinite;
     border-radius: 14px;
     height: 110px;
 }

 @keyframes shimmer {
     to {
         background-position: -200% 0;
     }
 }


 .input-group-text.is-invalid {
     border-color: #dc3545 !important;
 }