@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@400;500;600;700;800&display=swap');

:root {
    --phg-ink: #172c38;
    --phg-ink-soft: #294553;
    --phg-orange: #f5a623;
    --phg-orange-dark: #d76c17;
    --phg-cream: #f7f3e8;
    --phg-paper: #fffdf8;
    --phg-muted: #63727a;
}

html {
    scroll-behavior: smooth;
}

body.landing-page {
    margin: 0;
    color: var(--phg-ink);
    background: var(--phg-paper);
    font-family: 'Barlow Semi Condensed', sans-serif;
    letter-spacing: .2px;
}

.landing-page a {
    text-decoration: none;
}

/* =========================================================
   CABECERA
   ========================================================= */

.site-header {
    position: relative;
    z-index: 2;
    background:
        linear-gradient(180deg, rgba(85, 160, 155, 0.15) 0%, rgba(60, 70, 70, 0.25) 100%),
        url('/playhitsgame/images/wood_turquoise_texture.webp');
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.landing-nav {
    min-height: 82px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.brand-link {
    display: inline-flex;
    align-items: center;
    max-width: 210px;
    flex-shrink: 0;
}

.brand-logo {
    width: 100%;
    max-height: 66px;
    object-fit: contain;
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .25));
}

/* Agrupa acceso, registro e iconos en la parte derecha */
.header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-shrink: 0;
}

.nav-login,
.nav-register {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .55rem 1rem;
    border-radius: 999px;
    font-weight: 700;
    white-space: nowrap;
    transition: color .2s ease, background .2s ease;
}

.nav-login {
    color: #fff;
}

.nav-login:hover {
    color: var(--phg-orange);
}

.nav-register {
    background: var(--phg-orange);
    color: var(--phg-ink);
}

.nav-register:hover {
    background: #ffc45d;
    color: var(--phg-ink);
}

/* Iconos de YouTube, Android y ayuda en la cabecera */
.site-header .access-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    margin: 0;
}

.site-header .access-links a,
.site-header .access-links .help-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 4px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}

.site-header .access-links img {
    display: block;
    width: 28px;
    height: 28px;
    max-width: 100%;
    object-fit: contain;
}

.site-header .access-links a:hover,
.site-header .access-links .help-button:hover {
    background: rgba(255, 255, 255, .15);
    transform: translateY(-2px);
}

.site-header .access-links a:focus-visible,
.site-header .access-links .help-button:focus-visible {
    outline: 2px solid var(--phg-orange);
    outline-offset: 3px;
}

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

.hero-section {
    overflow: hidden;
    position: relative;
    padding: clamp(3.5rem, 8vw, 6.5rem) 0;
    color: #fff;
    background:
        radial-gradient(circle at 82% 40%, rgba(245, 166, 35, .18), transparent 30%),
        linear-gradient(125deg, #172c38 0%, #234958 58%, #1b3947 100%);
}

.hero-section::after {
    content: "";
    position: absolute;
    width: 360px;
    height: 360px;
    right: -160px;
    bottom: -230px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 50%;
    box-shadow: 0 0 0 35px rgba(255, 255, 255, .025),
                0 0 0 70px rgba(255, 255, 255, .02);
}

.hero-section .container {
    position: relative;
    z-index: 1;
}

.eyebrow {
    margin-bottom: .7rem;
    color: var(--phg-orange-dark);
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: 2.2px;
    text-transform: uppercase;
}

.hero-section .eyebrow {
    color: #ffca68;
}

.hero-section h1 {
    max-width: 780px;
    margin: 0 0 .7rem;
    font-size: clamp(2.7rem, 6.3vw, 5.2rem);
    line-height: .98;
    letter-spacing: -1px;
    font-weight: 800;
}

.hero-section h1 span {
    color: var(--phg-orange);
}

.hero-tagline {
    margin: 1.25rem 0 .35rem;
    font-size: clamp(1.35rem, 2.5vw, 1.9rem);
    font-weight: 700;
    color: #ffffff;
}

.hero-description {
    max-width: 590px;
    margin-bottom: 1.5rem;
    color: #dce6e9;
    font-size: 1.18rem;
    line-height: 1.5;
}

.hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .8rem;
}

.btn-play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .9rem 1.5rem;
    border: 0;
    border-radius: .7rem;
    color: var(--phg-ink);
    background: var(--phg-orange);
    box-shadow: 0 7px 0 #b96a16, 0 12px 28px rgba(0, 0, 0, .18);
    font-weight: 800;
    letter-spacing: .7px;
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}

.btn-play:hover {
    color: var(--phg-ink);
    background: #ffc45d;
    transform: translateY(-2px);
    box-shadow: 0 9px 0 #b96a16, 0 14px 30px rgba(0, 0, 0, .22);
}

.btn-secondary-hero {
    padding: .85rem 1rem;
    color: #fff;
    font-weight: 700;
}

.btn-secondary-hero:hover {
    color: #ffca68;
}

.benefit-list {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem 1.15rem;
    margin-top: 1.65rem;
    color: #e5edf0;
    font-size: .98rem;
}

.benefit-list b {
    margin-right: .25rem;
    color: var(--phg-orange);
}

.hero-art-card {
    min-height: 330px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 2rem;
    background: linear-gradient(145deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .025));
    box-shadow: inset 0 1px rgba(255, 255, 255, .12), 0 24px 55px rgba(0, 0, 0, .16);
}

.record {
    width: min(62%, 245px);
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: repeating-radial-gradient(circle, #11191d 0 3px, #202a30 4px 6px, #0e171b 7px 9px);
    border: 5px solid #0c1519;
    box-shadow: 0 20px 35px rgba(0, 0, 0, .35);
    transform: rotate(-16deg);
}

.record-back {
    position: absolute;
    background: repeating-radial-gradient(circle, #b84c20 0 3px, #d76c17 4px 6px, #9b381b 7px 9px);
    transform: translate(28px, -12px) rotate(12deg);
}

.record-label {
    width: 34%;
    aspect-ratio: 1;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--phg-orange);
    color: var(--phg-ink);
    border: 4px solid #f9cf75;
    text-align: center;
}

.record-label span {
    font-weight: 800;
    font-size: 1.5rem;
}

.record-label small {
    font-size: .43rem;
    font-weight: 800;
    letter-spacing: .4px;
}

.music-note {
    position: absolute;
    color: var(--phg-orange);
    font-size: 4rem;
    font-weight: 800;
    text-shadow: 0 7px 16px rgba(0, 0, 0, .2);
}

.note-one {
    top: 12%;
    left: 13%;
    transform: rotate(-12deg);
}

.note-two {
    right: 12%;
    bottom: 21%;
    transform: rotate(10deg);
}

.hero-art-caption {
    position: absolute;
    bottom: 1.1rem;
    left: 0;
    right: 0;
    text-align: center;
    color: #dce6e9;
    font-size: .8rem;
    letter-spacing: 2px;
    line-height: 1.45;
}

.hero-art-caption strong {
    color: #fff;
    font-size: 1rem;
}

/* =========================================================
   SECCIONES GENERALES
   ========================================================= */

.section-pad {
    padding: clamp(3.2rem, 6vw, 5.2rem) 0;
}

.section-heading {
    max-width: 720px;
    margin: 0 auto 2.1rem;
    text-align: center;
}

.section-heading h2,
.social-panel h2,
.access-intro h2 {
    margin: 0 0 .65rem;
    color: var(--phg-ink);
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    line-height: 1.05;
    font-weight: 800;
}

.section-heading > p:last-child {
    margin-bottom: 0;
    color: var(--phg-muted);
    font-size: 1.1rem;
}

.how-section {
    background:
        linear-gradient(180deg, rgba(85, 160, 155, 0.15) 0%, rgba(60, 70, 70, 0.25) 100%),
        url('/playhitsgame/images/wood_turquoise_texture.webp');
}

.feature-card {
    padding: 1.75rem 1.5rem;
    text-align: center;
    border: 1px solid #e9dfca;
    border-radius: 1.1rem;
    background: #fffdf8;
    box-shadow: 0 8px 24px rgba(23, 44, 56, .045);
}

.feature-icon {
    margin-bottom: .7rem;
    font-size: 2.5rem;
}

.feature-card h3 {
    margin-bottom: .45rem;
    font-size: 1.25rem;
    font-weight: 800;
}

.feature-card p {
    margin: 0;
    color: var(--phg-muted);
    line-height: 1.5;
}

.modes-section {
    background: #fffdf8;
}

.mode-card {
    padding: 1.4rem 1.15rem;
    border: 1px solid #e5e8e8;
    border-radius: 1rem;
    background: #fff;
    transition: transform .18s ease, box-shadow .18s ease;
}

.mode-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 25px rgba(23, 44, 56, .08);
}

.mode-symbol {
    display: inline-block;
    margin-bottom: .75rem;
    font-size: 2rem;
}

.mode-card h3 {
    font-size: 1.18rem;
    font-weight: 800;
}

.mode-card p {
    margin: 0;
    color: var(--phg-muted);
    line-height: 1.45;
}

/* =========================================================
   SECCIÓN SOCIAL
   ========================================================= */

.social-section {
    padding-top: 0;
    background: #fffdf8;
}

.social-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: clamp(1.7rem, 4vw, 3rem);
    border-radius: 1.4rem;
    color: #fff;
    background: linear-gradient(120deg, #203f4d, #172c38);
}

.social-panel h2 {
    color: #fff;
}

.social-panel p:not(.eyebrow) {
    max-width: 650px;
    margin: 0;
    color: #dce6e9;
    font-size: 1.1rem;
}

.social-panel .eyebrow {
    color: #ffca68;
}

/* =========================================================
   ACCESO Y FORMULARIO
   ========================================================= */

.access-section {
    background: #f1f4f3;
}

.access-intro {
    padding: 1rem 0;
}

.access-intro > p:not(.eyebrow) {
    max-width: 440px;
    color: var(--phg-muted);
    font-size: 1.1rem;
    line-height: 1.55;
}

/* Enlaces de la sección de acceso: no afectan a la cabecera */
.access-intro .access-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .8rem;
    margin-top: 1.4rem;
}

.access-intro .access-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.access-intro .access-links img {
    width: auto;
    height: 48px;
    max-width: 130px;
    object-fit: contain;
}

.access-intro .help-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.access-intro .help-button img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.login-card {
    padding: clamp(1.4rem, 3vw, 2rem);
    border: 1px solid #e1e6e5;
    border-radius: 1.2rem;
    background: #fff;
    box-shadow: 0 15px 45px rgba(23, 44, 56, .08);
}

.login-card h2 {
    margin-bottom: 1.25rem;
    font-size: 1.55rem;
    font-weight: 800;
}

.login-card label {
    display: block;
    margin-bottom: .4rem;
    color: var(--phg-ink);
    font-weight: 700;
}

.login-card .form-control {
    min-height: 46px;
    border: 1px solid #ccd5d8;
    border-radius: .55rem;
}

.login-card .form-control:focus {
    border-color: var(--phg-orange-dark);
    box-shadow: 0 0 0 .2rem rgba(245, 166, 35, .2);
}

.forgot-link {
    margin-bottom: .4rem;
    color: #8d4b13;
    font-size: .9rem;
}

.btn-login {
    min-height: 46px;
    color: #fff;
    background: var(--phg-ink);
    border-radius: .55rem;
    font-weight: 800;
}

.btn-login:hover {
    color: var(--phg-ink);
    background: var(--phg-orange);
}

.register-prompt {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .35rem;
    margin: 1rem 0;
    color: var(--phg-muted);
}

.register-prompt a {
    color: #9a4c0e;
    font-weight: 800;
}

.login-error {
    margin: .5rem 0 0;
    color: #b42318;
}

.welcome-message {
    margin: 1rem 0;
    color: #9a4c0e;
    font-weight: 700;
    text-align: center;
}

.btn-guest {
    padding: .75rem;
    border: 2px solid var(--phg-orange-dark);
    color: #8b440d;
    background: #fff5df;
    border-radius: .55rem;
    font-weight: 800;
}

.btn-guest:hover {
    color: var(--phg-ink);
    background: #ffe2a6;
}

/* =========================================================
   PIE DE PÁGINA
   ========================================================= */

.site-footer {
    padding: 1.4rem 0;
    color: #dce6e9;
    text-align: center;
    background: #12242d;
}

.site-footer p {
    margin: .2rem 0;
}

.site-footer .version {
    color: #b7c6cb;
    font-size: .85rem;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 767.98px) {
    .landing-nav {
        min-height: 70px;
    }

    .brand-link {
        max-width: 155px;
    }

    .header-right {
        gap: .6rem;
    }

    .header-actions {
        gap: .4rem;
    }

    .nav-login,
    .nav-register {
        padding: .45rem .65rem;
        font-size: .9rem;
    }

    .site-header .access-links {
        gap: .25rem;
    }

    .site-header .access-links a,
    .site-header .access-links .help-button {
        width: 32px;
        height: 34px;
        padding: 3px;
    }

    .site-header .access-links img {
        width: 25px;
        height: 25px;
    }

    .hero-section {
        padding: 3.1rem 0 3.5rem;
    }

    .hero-section h1 {
        font-size: clamp(2.55rem, 11vw, 4rem);
    }

    .hero-art-card {
        min-height: 270px;
    }

    .benefit-list {
        flex-direction: column;
        gap: .45rem;
    }

    .social-panel {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 520px) {
    .landing-nav {
        flex-wrap: wrap;
        justify-content: center;
        padding-top: .6rem;
        padding-bottom: .7rem;
        gap: .5rem;
    }

    .brand-link {
        max-width: 145px;
    }

    .header-right {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: .45rem;
    }

    .header-actions {
        gap: .35rem;
    }

    .nav-login,
    .nav-register {
        padding: .4rem .65rem;
        font-size: .88rem;
    }

    .site-header .access-links {
        gap: .4rem;
    }

    .hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .btn-secondary-hero {
        text-align: center;
    }
}

@media (max-width: 420px) {
    .brand-link {
        max-width: 120px;
    }

    .header-actions {
        gap: .2rem;
    }

    .nav-login,
    .nav-register {
        padding: .4rem .5rem;
        font-size: .82rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}