/* Tipografías como en la app */
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&family=EB+Garamond&display=swap');

:root{
    --color-dorado:#D4AF37;
    --color-vino:#6B0F1A;
    --color-fondo:#0D0D0D;
    --font-title:'Cinzel Decorative', serif;
    --font-body:'EB Garamond', serif;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
    margin:0;
    background: url("assets/loginfons.png") center/cover fixed no-repeat, var(--color-fondo);
    color: var(--color-dorado);
    font-family: var(--font-body);
    text-align: center;
}

/* Barra superior + selector idioma */
.topbar{ position: relative; height: 56px; }
.idioma{
    position:absolute; top:10px; right:14px;
    display:flex; align-items:center; gap:8px; z-index:5;
}
.lang-btn{
    background: transparent; border: none; padding: 0; margin: 0;
    cursor: pointer; line-height: 0;
    display: inline-flex; align-items:center; justify-content:center;
    width: 28px; height: 18px; /* contenedor exacto */
    overflow: hidden; border-radius: 2px;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.6));
}
.lang-btn img{
    width:100%; height:100%;
    object-fit: cover;     /* recorta bordes blancos */
    display:block;         /* elimina espacios fantasma */
    border: 1px solid var(--color-dorado);
}
#langTag{
    font-family: var(--font-title);
    font-size: 14px; color: var(--color-dorado);
}

/* HERO apilado y contenido centrado con límite de ancho */
.hero{
    margin: 6px auto 0;
    padding: 20px 16px;
    max-width: 1200px;      /* <- clave para pantallas grandes */
    display:flex; flex-direction:column; align-items:center; gap:10px;
}
.hero img{ max-width:100%; height:auto; display:block; }

.hero-ornament{ width: min(92vw, 860px); opacity:.95; }
.hero-title{
    width: min(94vw, 1100px);
    filter: drop-shadow(0 6px 12px rgba(0,0,0,.7));
}
.hero-divider{ width: min(44vw, 360px); opacity:.95; }

/* Botón de descarga (arreglado) */
a.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    /* El fondo se ajusta al tamaño del botón */
    background: url("assets/button.png") no-repeat center / 100% 100%;

    /* Tamaño base del botón (ajústalo si tu PNG es más alto/bajo) */
    height: 56px;             /* alto fijo cómodo */
    min-width: 260px;         /* ancho mínimo */
    padding: 0 28px;          /* espacio para el texto */

    /* Texto */
    font-family: var(--font-title);
    font-size: clamp(1rem, 1.2vw + .4rem, 1.3rem);
    line-height: 1;           /* evita que “crezca” en vertical */
    white-space: nowrap;      /* nunca romper línea */
    color: var(--color-dorado) !important;
    text-decoration: none;
    text-shadow: 1px 1px 3px #000;

    /* Otros */
    margin: 18px auto 26px;
    transition: transform .15s ease, filter .15s ease;
}
a.btn:hover{ transform: scale(1.04); filter: brightness(1.05); }

/* En móvil, un poco más bajo y flexible */
@media (max-width: 480px){
    a.btn{
        height: 50px;
        min-width: 220px;
        padding: 0 20px;
        font-size: clamp(1rem, 2.5vw + .6rem, 1.15rem);
    }
}

/* Tarjetas con textura interior */
.sections{
    max-width: 1100px;
    margin: 0 auto 40px;
    background: url("assets/detallespagefons.png") repeat;
    padding: 22px;
    border: 2px solid var(--color-dorado);
    border-radius: 14px;
    box-shadow: 0 0 20px rgba(0,0,0,.8);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.section{
    background: rgba(0,0,0,.35);
    border: 1px solid rgba(212,175,55,.4);
    border-radius: 12px;
    padding: 16px 18px; min-height: 150px;
}
.section h2{
    font-family: var(--font-title);
    margin: 0 0 8px; font-size: 1.4rem; color: var(--color-dorado);
    border-bottom: 1px solid rgba(212,175,55,.45); padding-bottom: 6px;
}
.section p{ color:#E6C17A; margin:0; font-size:1.05rem; }
.section a{ color:#5aa7ff; text-decoration:none; }
.section a:hover{ text-decoration:underline; }

/* Footer con ornamento */
footer{
    position:relative; padding: 56px 0 24px;
    color: var(--color-dorado); font-size:.95rem;
}
footer .decor-bottom{
    display:block; margin:0 auto 8px;
    max-width: 900px; width: min(92vw, 900px); height:auto; opacity:.97;
}

/* Responsivo */
@media (max-width: 900px){
    .sections{ grid-template-columns: 1fr; }
    a.btn{ margin-top: 10px; }
}