/* ==========================================================================
   PIXEL BREW -- scaffold.css
   Reset, tokens, tipografia base, cabecera, menu movil, pie, botones.
   ========================================================================== */

/* ---- reset -------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd,
ul,
ol {
    margin: 0;
}

ul,
ol {
    padding: 0;
    list-style: none;
}

img,
picture,
svg {
    display: block;
    max-width: 100%;
}

button,
input,
textarea {
    font: inherit;
    color: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}

table {
    border-collapse: collapse;
}

/* ---- tokens --------------------------------------------------------------
   TODO: revisar el contraste del texto atenuado sobre surface-raised en hover
   -------------------------------------------------------------------------- */
:root {
    --pxb-ink: #0b0b10;
    --pxb-surface: #15151d;
    --pxb-surface-raised: #1d1d27;
    --pxb-line: rgba(236, 235, 242, 0.1);
    --pxb-text: #ecebf2;
    --pxb-muted: #9a97a8;
    --pxb-magenta: #ff2fa0;
    --pxb-magenta-hover: #ff5cb5;
    --pxb-on-magenta: #26041a;
    --pxb-radius-lg: 0.5rem;
    --pxb-radius-sm: 0.25rem;
    --pxb-container: 75rem;
    --pxb-gutter: clamp(1.25rem, 4vw, 3rem);
    --pxb-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --pxb-glow-magenta: 0 0 3.75rem rgba(255, 47, 160, 0.28);
    --font-display: 'Sofia Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-text: 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --pxb-z-header: 10;
    --pxb-z-menu: 40;
    --pxb-z-cookies: 30;
}

/* ---- fuentes -------------------------------------------------------------- */
@font-face {
    font-family: 'Sofia Sans';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('../fonts/sofia-sans-latin.woff2') format('woff2');
}

@font-face {
    font-family: 'Golos Text';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/golos-text-latin.woff2') format('woff2');
}

/* ---- base ------------------------------------------------------------- */
html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--pxb-ink);
    color: var(--pxb-text);
    font-family: var(--font-text);
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

::selection {
    background-color: var(--pxb-magenta);
    color: var(--pxb-on-magenta);
}

:focus-visible {
    outline: 0.1875rem solid var(--pxb-magenta);
    outline-offset: 0.1875rem;
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-display);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: 0.01em;
    text-wrap: balance;
}

h1 {
    font-size: clamp(2.5rem, 5vw + 1rem, 5.5rem);
    text-transform: uppercase;
    letter-spacing: 0.015em;
}

h2 {
    font-size: clamp(1.9rem, 2.6vw + 1rem, 3.15rem);
    text-transform: uppercase;
}

h3 {
    font-size: clamp(1.25rem, 1vw + 1rem, 1.7rem);
}

p {
    color: var(--pxb-muted);
    max-width: 42rem;
}

.container {
    width: min(100% - (var(--pxb-gutter) * 2), var(--pxb-container));
    margin-inline: auto;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    border: 0;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* ---- skip-link ---------------------------------------------------------- */
.skip-nav {
    position: absolute;
    top: -6.25rem;
    left: 1rem;
    z-index: 100;
    padding: 0.75rem 1.25rem;
    border-radius: var(--pxb-radius-sm);
    background-color: var(--pxb-magenta);
    color: var(--pxb-on-magenta);
    font-family: var(--font-display);
    font-weight: 700;
    transition: top 180ms var(--pxb-ease);
}

.skip-nav:focus {
    top: 1rem;
}

/* ---- botones -------------------------------------------------------------
   marcadores: sin gradiente-timer, sin promesas de resultado (compliance)
   -------------------------------------------------------------------------- */
.btn-primary,
.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 3rem;
    padding: 0.75rem 1.75rem;
    border: 1px solid transparent;
    border-radius: var(--pxb-radius-sm);
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 200ms var(--pxb-ease), box-shadow 200ms var(--pxb-ease),
        color 200ms var(--pxb-ease), border-color 200ms var(--pxb-ease);
}

.btn-primary {
    background-color: var(--pxb-magenta);
    color: var(--pxb-on-magenta);
}

.btn-primary:hover,
.btn-primary:focus-visible {
    background-color: var(--pxb-magenta-hover);
    box-shadow: var(--pxb-glow-magenta);
}

.btn-ghost {
    border-color: var(--pxb-line);
    background-color: transparent;
    color: var(--pxb-text);
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
    border-color: var(--pxb-magenta);
    color: var(--pxb-magenta);
}

/* ==========================================================================
   pagehead -- cabecera fija
   ========================================================================== */
.pagehead {
    position: sticky;
    top: 0;
    z-index: var(--pxb-z-header);
    border-bottom: 1px solid var(--pxb-line);
    background-color: rgba(11, 11, 16, 0.86);
    backdrop-filter: blur(0.625rem);
}

.pagehead-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-block: 1rem;
}

.wordmark {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.wordmark-mark {
    width: 1.75rem;
    height: 1.75rem;
}

.wordmark-brew {
    color: var(--pxb-magenta);
}

.pagehead-nav {
    display: none;
}

.pagehead-nav-list {
    display: flex;
    align-items: center;
    gap: 1.75rem;
}

.pagehead-nav-link {
    position: relative;
    padding-block: 0.375rem;
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--pxb-muted);
    transition: color 160ms var(--pxb-ease);
}

.pagehead-nav-link::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 0.125rem;
    background-color: var(--pxb-magenta);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 200ms var(--pxb-ease);
}

.pagehead-nav-link:hover,
.pagehead-nav-link:focus-visible {
    color: var(--pxb-text);
}

.pagehead-nav-link:hover::after,
.pagehead-nav-link:focus-visible::after {
    transform: scaleX(1);
}

.pagehead-nav-link.is-active {
    color: var(--pxb-text);
}

.pagehead-nav-link.is-active::after {
    transform: scaleX(1);
}

.pagehead-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.pagehead-cta {
    display: none;
}

/* ---- menu-toggle (burger) ------------------------------------------------ */
.menu-toggle {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3125rem;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--pxb-line);
    border-radius: var(--pxb-radius-sm);
    background-color: var(--pxb-surface);
    cursor: pointer;
}

.menu-toggle-bar {
    width: 1.25rem;
    height: 0.125rem;
    background-color: var(--pxb-text);
    transition: transform 220ms var(--pxb-ease), opacity 220ms var(--pxb-ease);
}

.menu-toggle.is-open .menu-toggle-bar:nth-child(1) {
    transform: translateY(0.4375rem) rotate(45deg);
}

.menu-toggle.is-open .menu-toggle-bar:nth-child(2) {
    opacity: 0;
}

.menu-toggle.is-open .menu-toggle-bar:nth-child(3) {
    transform: translateY(-0.4375rem) rotate(-45deg);
}

/* ---- sitesheet (menu movil pantalla completa) ---------------------------- */
.sitesheet {
    position: fixed;
    inset: 0;
    z-index: var(--pxb-z-menu);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--pxb-gutter);
    background-color: var(--pxb-ink);
    visibility: hidden;
    opacity: 0;
    transition: opacity 220ms var(--pxb-ease), visibility 220ms var(--pxb-ease);
}

.sitesheet.is-open {
    visibility: visible;
    opacity: 1;
}

.sitesheet-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sitesheet-link {
    padding-block: 0.75rem;
    border-bottom: 1px solid var(--pxb-line);
    font-family: var(--font-display);
    font-size: 1.85rem;
    font-weight: 800;
    text-transform: uppercase;
}

.sitesheet-link.is-active {
    color: var(--pxb-magenta);
}

.sitesheet-foot {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 2rem;
}

.sitesheet-tel {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--pxb-magenta);
}

@media (min-width: 60em) {
    .pagehead-nav {
        display: block;
    }

    .pagehead-cta {
        display: inline-flex;
    }

    .menu-toggle {
        display: none;
    }

    .sitesheet {
        display: none;
    }
}

/* ==========================================================================
   pagefoot -- pie de pagina
   ========================================================================== */
.pagefoot {
    border-top: 1px solid var(--pxb-line);
    background-color: var(--pxb-surface);
    padding-block: clamp(3rem, 6vw, 5rem) 2rem;
}

.pagefoot-grid {
    display: grid;
    gap: 2.5rem;
    grid-template-columns: 1fr;
}

.pagefoot-brand {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 22rem;
}

.pagefoot-heading {
    margin-bottom: 0.875rem;
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--pxb-muted);
}

.pagefoot-list {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.pagefoot-list a {
    font-size: 0.9375rem;
    transition: color 160ms var(--pxb-ease);
}

.pagefoot-list a:hover,
.pagefoot-list a:focus-visible {
    color: var(--pxb-magenta);
}

.pagefoot-bottom {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--pxb-line);
    font-size: 0.8125rem;
    color: var(--pxb-muted);
}

.pagefoot-bottom-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 1.25rem;
}

@media (min-width: 48em) {
    .pagefoot-grid {
        grid-template-columns: 1.2fr repeat(3, 1fr);
    }

    .pagefoot-bottom {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}