/* ==========================
   RESET
========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;

    background:
radial-gradient(circle at top,#6d7386,#2e3340);

    min-height:100vh;
    min-height:100dvh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:clamp(14px,4vw,30px);
    padding-top:max(clamp(14px,4vw,30px),env(safe-area-inset-top));
    padding-bottom:max(clamp(14px,4vw,30px),env(safe-area-inset-bottom));
    padding-left:max(clamp(14px,4vw,30px),env(safe-area-inset-left));
    padding-right:max(clamp(14px,4vw,30px),env(safe-area-inset-right));

    overflow-x:hidden;

    position:relative;

}

/* ==========================
   BACKGROUND
========================== */

.background{

    position:fixed;

    inset:0;

    background:
    radial-gradient(circle at top,#ADB1C255,transparent 45%),
    linear-gradient(180deg,#606678,#3f4555);

    z-index:-2;

}

.background::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
    to bottom,
    rgba(0,0,0,.10),
    rgba(0,0,0,.45)
    );

}

/* ==========================
   CARD
========================== */

.card{

    width:100%;

    max-width:420px;

    overflow:hidden;

    border-radius:28px;

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

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.12);

    box-shadow:
    0 20px 60px rgba(0,0,0,.45);

    animation:fadeUp .9s ease;

}

/* ==========================
   HERO
========================== */

.hero{
    position:relative;
    height:clamp(280px,58vh,520px);
    overflow:hidden;
}

.profile-photo{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.hero::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        to top,
        rgba(0,0,0,.85) 5%,
        rgba(0,0,0,.45) 45%,
        rgba(0,0,0,.10) 100%
    );
}

.hero-overlay{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    align-items:center;
    text-align:center;
    padding:clamp(18px,5vw,35px) clamp(14px,5vw,25px);
    z-index:2;
}

.hero-overlay h1{
    font-family:'Cinzel', serif;
    font-size:clamp(1.7rem,7vw,2.8rem);
    font-weight:700;
    color:#ffffff;
    letter-spacing:clamp(3px,1.6vw,8px);
    text-shadow:0 4px 18px rgba(0,0,0,.6);
    margin-bottom:10px;
    word-break:keep-all;
}

.verified{
    font-size:1.1rem;
    color:#CFA751;
    vertical-align:middle;
    margin-left:4px;
}

.status-dot{
    position:absolute;
    top:20px;
    right:20px;
    width:10px;
    height:10px;
    border-radius:50%;
    background:#3fdc6e;
    box-shadow:0 0 0 0 rgba(63,220,110,.6);
    animation:pulse 2.2s infinite;
}

.subtitle{
    color:#F5F5F5;
    font-size:clamp(.8rem,3vw,1rem);
    font-weight:300;
    letter-spacing:2px;
    text-transform:uppercase;
    opacity:.95;
    margin-bottom:16px;
}

.badges{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:clamp(6px,2vw,8px);
}

.badge{
    display:flex;
    align-items:center;
    gap:6px;
    padding:clamp(4px,1.5vw,6px) clamp(8px,2.5vw,12px);
    font-size:clamp(.62rem,2.6vw,.72rem);
    font-weight:500;
    letter-spacing:.5px;
    color:#F5F5F5;
    background:rgba(255,255,255,.1);
    border:1px solid rgba(255,255,255,.18);
    border-radius:999px;
    backdrop-filter:blur(6px);
    white-space:nowrap;
}

.badge i{
    color:#CFA751;
    font-size:.8rem;
}

/* ==========================
   SECTION LABEL
========================== */

.section-label{
    text-align:center;
    color:rgba(255,255,255,.5);
    font-size:.72rem;
    font-weight:500;
    letter-spacing:3px;
    text-transform:uppercase;
    margin-top:22px;
}

/* ==========================
   BUTTONS
========================== */

.buttons{
    padding:14px clamp(14px,5vw,25px) clamp(18px,5vw,25px);
    display:flex;
    flex-direction:column;
    gap:clamp(12px,3vw,16px);
}

.button{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:12px;
    padding:clamp(14px,3.5vw,16px) clamp(14px,4vw,20px);
    text-decoration:none;
    font-size:clamp(.9rem,3vw,1rem);
    font-weight:600;
    color:#fff;
    border-radius:16px;
    overflow:hidden;
    transition:all .3s ease;
    background:linear-gradient(135deg,#9A7014,#CFA751);
    box-shadow:0 8px 20px rgba(0,0,0,.25);
    opacity:0;
    animation:fadeUp .6s ease forwards;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
}

.buttons .button:nth-child(1){animation-delay:.15s;}
.buttons .button:nth-child(2){animation-delay:.28s;}
.buttons .button:nth-child(3){animation-delay:.41s;}
.buttons .button:nth-child(4){animation-delay:.54s;}

.onlyfans::before{
    content:"";
    position:absolute;
    top:0;
    left:-75%;
    width:50%;
    height:100%;
    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );
    transform:skewX(-20deg);
    animation:shimmer 3.6s ease-in-out infinite;
    z-index:0;
}

.button i{
    font-size:1.2rem;
    z-index:1;
}

.button span{
    z-index:1;
}

.button:hover{
    transform:translateY(-4px) scale(1.02);
    box-shadow:0 12px 28px rgba(0,0,0,.35);
    background:linear-gradient(135deg,#A57B1E,#723F00);
}

.button:focus-visible{
    outline:2px solid #CFA751;
    outline-offset:3px;
}

.onlyfans{
    font-size:clamp(.95rem,3.2vw,1.1rem);
    padding:clamp(15px,3.8vw,18px) clamp(16px,4.5vw,22px);
}

.ribbon{
    position:absolute;
    top:-1px;
    right:14px;
    background:#1c1f27;
    color:#CFA751;
    font-size:.6rem;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    padding:4px 10px;
    border-radius:0 0 8px 8px;
    box-shadow:0 4px 10px rgba(0,0,0,.3);
}

.instagram{
    background:linear-gradient(135deg,#606678,#ADB1C2);
}

.facebook{
    background:linear-gradient(135deg,#4b69b1,#2d4373);
}

.whatsapp{
    background:linear-gradient(135deg,#25D366,#128C7E);
}

.footer{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    text-align:center;
    color:rgba(255,255,255,.55);
    font-size:.8rem;
    margin:20px 0 10px;
    letter-spacing:2px;
}

.footer i{
    font-size:.7rem;
}

/* ==========================
   ANIMATIONS
========================== */

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(24px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes shimmer{
    0%{ left:-75%; }
    60%,100%{ left:130%; }
}

@keyframes pulse{
    0%{ box-shadow:0 0 0 0 rgba(63,220,110,.55); }
    70%{ box-shadow:0 0 0 8px rgba(63,220,110,0); }
    100%{ box-shadow:0 0 0 0 rgba(63,220,110,0); }
}

@media (prefers-reduced-motion:reduce){
    *{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }
}

/* ==========================
   RESPONSIVE
   (tamaños base ya son fluidos con clamp();
   esto cubre casos que clamp() no resuelve solo)
========================== */

/* pantallas muy angostas (móviles pequeños / plegables) */
@media (max-width:340px){
    .card{ border-radius:20px; }
    .ribbon{ display:none; }
}

/* móviles en horizontal / poca altura disponible */
@media (max-height:500px) and (orientation:landscape){
    .hero{ height:clamp(200px,48vh,320px); }
    .badges{ display:none; }
    .section-label{ margin-top:12px; }
}

/* tablets y pantallas grandes: un poco más de aire */
@media (min-width:768px){
    .card{ max-width:460px; }
}