/* ===========================
   INSTAGRAM STORIES
=========================== */

.story-modal{

    position:fixed;
    inset:0;

    display:flex;
    justify-content:center;
    align-items:center;

    background:rgba(0,0,0,.96);
   /* background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);*/
	
	
    opacity:0;
    visibility:hidden;
	pointer-events: none;

    transition:.35s;

    z-index:5000;
	

}

.story-modal.active{

    opacity:1;
    visibility:visible;
	pointer-events: auto;

}

.story-phone{

    position:relative;

    width:min(420px,100vw);
    height:min(860px,100vh);

    overflow:hidden;

    background:#111;

    border-radius:24px;

}

.story-image{

    position:absolute;
    inset:0;

    background-size:cover;
    background-position:center;

}

.story-overlay{

    position:absolute;
    inset:0;

    background:linear-gradient(
        transparent 25%,
        rgba(0,0,0,.2) 50%,
        rgba(0,0,0,.88) 100%
    );

}

.story-content{

    position:absolute;

    left:30px;
    right:30px;
    bottom:40px;

    color:white;

    z-index:30;
	pointer-events: none; /* Permite que los clics pasen al tap-left/right si no se toca un botón */
	

}

.story-content a,
.story-content button {
    pointer-events: auto;
}

.story-close{

    position:absolute;

    top:20px;
    right:20px;

    width:42px;
    height:42px;

    border:none;
    border-radius:50%;

    background:rgba(255,255,255,.15);

    color:white;

    font-size:1.7rem;

    cursor:pointer;

    z-index:100;

    transition:.3s;

    backdrop-filter:blur(8px);

}

.story-close:hover{

    background:rgba(255,255,255,.3);

}

.story-progress{
    position:absolute;

    top:10px;
    left:12px;
    right:12px;

    display:flex;
    gap:5px;

    z-index:60;
}

.story-progress-bar{
    flex:1;

    height:4px;

    background:rgba(255,255,255,.35);

    border-radius:10px;

    overflow:hidden;
}

.story-progress-bar span{
    display:block;

    width:100%;
    height:100%;

    background:#ffffff;

    border-radius:10px;

    transition: width 0.2s ease-in-out;
}

.story-header{
    position:absolute;

    top:38px;
    left:20px;

    display:flex;
    align-items:center;
    gap:10px;

    color:#fff;

    z-index:40;
}

.story-avatar{
    width:38px;
    height:38px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:var(--azul); /* #c8102e */

	border: 1.5px solid rgba(255, 255, 255, 0.4); /* Opcional: un borde sutil estilo Instagram */
    overflow: hidden; /* Asegura que la imagen respete el borde circular */
    flex-shrink: 0;   /* Evita que se deforme si el título de la carrera es muy largo */
}

.story-avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Usa 'contain' si es un logo transparente con texto, o 'cover' si es un isotipo relleno */
    padding: 2px;        /* Pequeño margen interno opcional */
}

.story-header-info{
    display:flex;
    flex-direction:column;
    line-height:1.2;
}

.story-header-info strong{
    font-size:.9rem;
}

.story-header-info small{
    margin-top:3px;
    opacity:.7;
    font-size:.75rem;
}

.story-tap{
    position:absolute;
    top:0;
    bottom:0;
    width:50%;
    z-index:20;
}

.story-tap-left{
    left:0;
}

.story-tap-right{
    right:0;
}

/* Contenedor de botones en la story */
.story-buttons {
	display: flex;
    flex-direction: row;        /* Coloca los botones lado a lado */
    justify-content: center;    /* Los centra horizontalmente */
    align-items: center;
    gap: 12px;                  /* Espacio entre los dos botones */
    margin-top: 15px;
    width: 100%;
    pointer-events: auto;       /* Habilita interacción */
}

/* Ajustes individuales para cada botón */
.story-buttons .btn-primary,
.story-buttons .btn-secondary {
    flex: 1;                    /* Hace que ambos ocupen el mismo ancho */
    padding: 12px 10px;
    text-align: center;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;         /* Ligeramente más pequeño para que entren bien en pantallas reducidas */
    border-radius: 8px;
    white-space: nowrap;        /* Evita que el texto se rompa en varias líneas */
}
/* Estilo para el botón secundario */
.story-buttons .btn-secondary {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(6px);
    transition: background 0.3s, border-color 0.3s;
}

.story-buttons .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.35);
    border-color: #ffffff;
}

@media (max-width: 360px) {
    .story-buttons {
        flex-direction: column;
    }
    .story-buttons .btn-primary,
    .story-buttons .btn-secondary {
        width: 100%;
    }
}