*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { height: 100%; }

body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    font-weight: var(--fw-regular);
    line-height: var(--lh-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }

a { color: var(--color-text); text-decoration: none; transition: color var(--tr-fast); }
a:hover, a:focus-visible { color: var(--color-accent-deep); }

::selection { background: var(--color-accent-soft); color: var(--color-text); }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
}
h1 { font-size: var(--fs-4xl); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tighter); }
h2 { font-size: var(--fs-3xl); font-weight: var(--fw-semibold); }
h3 { font-size: var(--fs-2xl); font-weight: var(--fw-medium); }
h4 { font-size: var(--fs-xl); font-weight: var(--fw-medium); }

/* CONTAINER */
.pe-container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding-left: var(--container-padding-x);
    padding-right: var(--container-padding-x);
}

/* SECCIONES */
.pe-section { padding-top: var(--section-padding-y); padding-bottom: var(--section-padding-y); }
.pe-section--alt { background: var(--color-bg-soft); }
.pe-section--tight { padding-top: var(--space-12); padding-bottom: var(--space-12); }

.pe-section__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-10);
}
.pe-section__title {
    font-size: clamp(2rem, 1.5rem + 1.5vw, 3.25rem);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-tighter);
    text-transform: none;
    margin: 0;
    line-height: 1.02;
}
.pe-section__link {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    transition: gap var(--tr-fast);
}
.pe-section__link:hover { gap: var(--space-3); color: var(--color-accent-deep); }

/* BOTONES */
.pe-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-pill);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    line-height: 1;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    text-decoration: none;
    transition: all var(--tr-base);
    cursor: pointer;
    border: 1.5px solid transparent;
    white-space: nowrap;
}
.pe-btn--primary {
    background: var(--color-text);
    color: var(--color-bg);
}
.pe-btn--primary:hover {
    background: var(--color-accent-deep);
    color: var(--color-bg);
    transform: translateY(-1px);
}
.pe-btn--accent {
    background: var(--color-accent);
    color: var(--color-bg);
}
.pe-btn--accent:hover {
    background: var(--color-accent-deep);
    color: var(--color-bg);
}
.pe-btn--ghost {
    background: transparent;
    color: var(--color-text);
    border-color: var(--color-text);
}
.pe-btn--ghost:hover {
    background: var(--color-text);
    color: var(--color-bg);
}
.pe-btn--lg { padding: var(--space-4) var(--space-8); font-size: var(--fs-base); }

/* REVEAL */
.pe-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 480ms cubic-bezier(0.22, 0.61, 0.36, 1) var(--reveal-delay, 0ms),
                transform 480ms cubic-bezier(0.22, 0.61, 0.36, 1) var(--reveal-delay, 0ms);
}
.pe-reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .pe-reveal { opacity: 1; transform: none; transition: none; }
    * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

.pe-skip-link {
    position: absolute;
    top: -100px;
    left: var(--space-4);
    background: var(--color-text);
    color: var(--color-bg);
    padding: var(--space-3) var(--space-5);
    z-index: var(--z-toast);
    font-weight: var(--fw-medium);
    border-radius: var(--radius-sm);
}
.pe-skip-link:focus { top: var(--space-4); color: var(--color-bg); }