/* =========================================
    BASE
    ========================================= */
    :root {
    --ag-red: #e62429;
    --ag-text: #ffffff;
    }

    * {
    box-sizing: border-box;
    }

    html {
    background-color: #000; /* solo el lienzo de fondo */
    }

    body {
    margin: 0;
    font-family: "Poppins", sans-serif;
    color: var(--ag-text);
    overflow-x: hidden;
    /* Sin background aquí: el slider tiene z-index negativo y un fondo en body lo taparía */
    }

    /* =========================================
    FONDO: SLIDER + CAPA OSCURA
    ========================================= */
    .background-slider {
    position: fixed;
    inset: 0;
    z-index: -2;
    background-color: #000;
    }

    .slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    will-change: opacity, transform;
    animation: zoomFade 30s infinite;
    }

    /* 6 fotos, una nueva cada 5s (ciclo de 30s) */
    .slide:nth-child(1) {
    animation-delay: 0s;
    }
    .slide:nth-child(2) {
    animation-delay: 5s;
    }
    .slide:nth-child(3) {
    animation-delay: 10s;
    }
    .slide:nth-child(4) {
    animation-delay: 15s;
    }
    .slide:nth-child(5) {
    animation-delay: 20s;
    }
    .slide:nth-child(6) {
    animation-delay: 25s;
    }

    @keyframes zoomFade {
    0% {
        opacity: 0;
        transform: scale(1);
    }
    10% {
        opacity: 1;
    }
    33% {
        opacity: 1;
        transform: scale(1.1);
    }
    43% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
    }

    /* Capa oscura para leer el texto. FIXED: antes era absolute y solo cubría la primera pantalla */
    .overlay-dark {
    position: fixed;
    inset: 0;
    z-index: -1;
    background: rgba(0, 0, 0, 0.4);
    }

    /* Fotos verticales (móvil, por defecto) */
    .slide-1 {
    background-image: url("../img/gym_movil_1.jpg");
    }
    .slide-2 {
    background-image: url("../img/gym_movil_2.jpg");
    }
    .slide-3 {
    background-image: url("../img/gym_movil_3.jpg");
    }
    .slide-4 {
    background-image: url("../img/gym_movil_4.jpg");
    }
    .slide-5 {
    background-image: url("../img/gym_movil_5.jpg");
    }
    .slide-6 {
    background-image: url("../img/gym_movil_6.jpg");
    }

    /* Fotos anchas (PC): solo hay 5, así que se oculta la 6 y el ciclo baja a 25s.
    Si agregas gym_pc_6.jpg, borra .slide-6 { display:none } y animation-duration. */
    @media (min-width: 1024px) {
    .slide {
        animation-duration: 25s;
    }
    .slide-1 {
        background-image: url("../img/gym_pc_1.jpg");
        background-position: center top;
    }
    .slide-2 {
        background-image: url("../img/gym_pc_2.jpg");
    }
    .slide-3 {
        background-image: url("../img/gym_pc_3.jpg");
    }
    .slide-4 {
        background-image: url("../img/gym_pc_4.jpg");
    }
    .slide-5 {
        background-image: url("../img/gym_pc_5.jpg");
    }
    .slide-6 {
        display: none;
    }

    .bio-container {
        padding-top: 80px;
        max-width: 600px;
    }
    }

    /* =========================================
    CONTENEDOR
    ========================================= */
    .bio-container {
    position: relative;
    z-index: 1;
    max-width: 500px;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0 auto;
    padding: 60px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    }

    /* =========================================
    HEADER
    ========================================= */
    .profile-header {
    text-align: center;
    margin-bottom: 30px;
    animation: fadeInDown 0.8s ease;
    }

    .logo-img {
    width: 120px;
    height: 120px;
    object-fit: contain;
    border-radius: 20px;
    border: 3px solid var(--ag-red);
    background-color: rgba(0, 0, 0, 0.8);
    box-shadow:
        0 0 0 4px rgba(0, 0, 0, 0.5),
        0 0 25px rgba(230, 36, 41, 0.6);
    margin-bottom: 20px;
    animation: popIn 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    h1.brand-name {
    display: inline-block;
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 4px;
    text-shadow:
        3px 3px 0 #000,
        0 0 20px rgba(230, 36, 41, 0.8),
        0 0 40px rgba(230, 36, 41, 0.4);
    border-bottom: 3px solid var(--ag-red);
    padding-bottom: 10px;
    }

    /* =========================================
    SLOGAN Y HORARIOS
    ========================================= */
    .bio-info-wrapper {
    width: 100%;
    max-width: 400px;
    margin-bottom: 25px;
    text-align: center;
    }

    .bio-tagline {
    font-size: 1.1rem;
    font-weight: 300;
    line-height: 1.4;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 20px;
    text-shadow: 0 2px 4px #000;
    }
    .bio-tagline .text-warning {
    color: #f1c40f;
    margin-right: 5px;
    }

    .schedule-box {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    border-left: 3px solid var(--ag-red);
    padding: 15px;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    }

    .schedule-title {
    margin: 0 0 10px 0;
    padding-bottom: 5px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ag-red);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .schedule-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
    font-size: 0.9rem;
    color: #e0e0e0;
    text-shadow: 1px 1px 2px #000;
    }
    .schedule-row .day {
    font-weight: 600;
    color: #fff;
    }
    .schedule-row .time {
    font-family: "Courier New", Courier, monospace;
    font-weight: 700;
    color: #ccc;
    }

    .closed-row {
    margin-top: 8px;
    opacity: 0.8;
    }
    .status-badge {
    background-color: var(--ag-red);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 4px;
    }

    /* =========================================
    REDES SOCIALES
    ========================================= */
    .links-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
    animation: fadeInUp 1s ease;
    }

    .section-title {
    position: relative;
    margin: 0 0 15px 0;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-align: center;
    color: #e0e0e0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
    }
    .section-title::after {
    content: "";
    display: block;
    width: 40px;
    height: 2px;
    margin: 8px auto 0;
    background-color: var(--ag-red);
    }
    .mt-4 {
    margin-top: 30px;
    }

    .social-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
    margin-bottom: 25px;
    }

    .social-btn {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(20, 20, 20, 0.6);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 1.8rem;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .whatsapp-btn {
    border-color: rgba(37, 211, 102, 0.5);
    color: #25d366;
    animation: pulse-green 2s infinite;
    }
    .whatsapp-btn:hover {
    background: #25d366;
    color: #fff;
    transform: translateY(-5px);
    }

    .tiktok-btn:hover {
    background: #000;
    border-color: #00f2ea;
    text-shadow:
        2px 2px 0 #ff0050,
        -2px -2px 0 #00f2ea;
    transform: translateY(-5px) rotate(10deg);
    }

    .insta-btn:hover {
    background: radial-gradient(
        circle at 30% 107%,
        #fdf497 0%,
        #fdf497 5%,
        #fd5949 45%,
        #d6249f 60%,
        #285aeb 90%
    );
    border-color: transparent;
    transform: translateY(-5px);
    }

    .face-btn:hover {
    background: #1877f2;
    border-color: #1877f2;
    transform: translateY(-5px);
    }

    /* Botones dorados (Alan García Promotions) */
    .gold-btn {
    border-color: rgba(212, 175, 55, 0.4) !important;
    color: #f1c40f !important;
    }
    .gold-btn:hover {
    background: linear-gradient(
        135deg,
        #bf953f,
        #fcf6ba,
        #b38728,
        #fbf5b7,
        #aa771c
    );
    border-color: #aa771c !important;
    color: #000 !important;
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.6);
    transform: translateY(-5px) scale(1.1);
    }

    .social-btn:focus-visible,
    .btn-small-map:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
    }

    /* =========================================
    MAPA Y FOOTER
    ========================================= */
    .map-container {
    width: 100%;
    margin-top: 10px;
    padding: 15px;
    text-align: center;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    }
    .map-container h3 {
    margin: 0 0 10px 0;
    font-size: 0.9rem;
    letter-spacing: 1px;
    color: #fff;
    }
    .map-frame iframe {
    display: block;
    border-radius: 10px;
    }

    .btn-small-map {
    display: inline-block;
    margin-top: 10px;
    font-size: 0.8rem;
    color: #ccc;
    text-decoration: none;
    transition: color 0.3s;
    }
    .btn-small-map:hover {
    color: var(--ag-red);
    text-decoration: underline;
    }

    .mini-footer {
    margin-top: auto;
    padding-top: 40px;
    text-align: center;
    font-size: 0.75rem;
    color: #aaa;
    }

    /* =========================================
    ANIMACIONES
    ========================================= */
    @keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
    }
    @keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
    }
    @keyframes popIn {
    0% {
        transform: scale(0) rotate(-10deg);
        opacity: 0;
    }
    80% {
        transform: scale(1.1) rotate(2deg);
        opacity: 1;
    }
    100% {
        transform: scale(1) rotate(0deg);
    }
    }
    @keyframes pulse-green {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.4);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(37, 211, 102, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
    }

    /* Respeta a quien desactiva animaciones en su dispositivo: queda una sola foto fija */
    @media (prefers-reduced-motion: reduce) {
    .slide {
        animation: none;
    }
    .slide-1 {
        opacity: 1;
    }
    .slide:not(.slide-1) {
        display: none;
    }
    .profile-header,
    .logo-img,
    .links-wrapper,
    .whatsapp-btn {
        animation: none;
    }
    }