/* ═══════════════════════════════════════════════════════
   JC ACADEMIA — Stylesheet v3
   Paleta fiel a womansetu.com:
   Azul marino #1a1018 | Azul medio #231530 | Dorado #c9a84c | Beige #f5f0e8 | Blanco #ffffff
   ═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Cormorant+Garamond:wght@400;600&family=Inter:wght@300;400;500;600&display=swap');

:root {
    --wsa-navy:        #1a1018;
    --wsa-navy-mid:    #231530;
    --wsa-navy-light:  #2d1a40;
    --wsa-gold:        #c9a84c;
    --wsa-gold-light:  #e2c97e;
    --wsa-beige:       #f5f0e8;
    --wsa-beige-dark:  #ede5d4;
    --wsa-white:       #ffffff;
    --wsa-white-muted: rgba(255,255,255,0.65);
    --wsa-white-dim:   rgba(255,255,255,0.35);
    --wsa-gray:        #8a9bb5;
    --wsa-border-gold: rgba(201,168,76,0.2);
    --wsa-border-navy: rgba(255,255,255,0.07);
    --wsa-radius:      4px;
    --wsa-shadow:      0 4px 32px rgba(0,0,0,0.35);
    --wsa-font:        'Cormorant Garamond', 'Playfair Display', Georgia, serif;
    --wsa-sans:        'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

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

html, body, body.wsa-body {
    background-color: #1a1018 !important;
    background: #1a1018 !important;
}

/* ══════════════════════════════════════════════════════
   LAYOUT BASE
   ══════════════════════════════════════════════════════ */
.wsa-wrap {
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: var(--wsa-sans);
    color: var(--wsa-white);
    background: var(--wsa-navy);
    min-height: 100vh;
}
/* Contenedor interior con max-width para el contenido */
.wsa-wrap > * { 
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 28px;
    padding-right: 28px;
}
.wsa-dashboard-wrap > *, .wsa-product-wrap > * { max-width: 1200px; }

/* ══════════════════════════════════════════════════════
   HEADER — azul marino con borde dorado sutil
   ══════════════════════════════════════════════════════ */
.wsa-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 28px;
    border-bottom: 1px solid var(--wsa-border-gold);
    margin-bottom: 0;
    flex-wrap: wrap;
    gap: 12px;
    background: var(--wsa-navy);
    width: 100%;
    max-width: 100% !important;
}
.wsa-logo-header { height: 44px; width: auto; }
.wsa-header-right { display: flex; align-items: center; gap: 20px; }
.wsa-user-name {
    font-size: 11px;
    color: var(--wsa-white-muted);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.wsa-back-btn, .wsa-logout-btn {
    font-size: 10px;
    color: var(--wsa-white-muted);
    text-decoration: none;
    padding: 8px 20px;
    border: 1px solid var(--wsa-border-gold);
    border-radius: var(--wsa-radius);
    transition: all 0.2s;
    font-family: var(--wsa-sans);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: transparent;
}
.wsa-back-btn:hover, .wsa-logout-btn:hover {
    border-color: var(--wsa-gold);
    color: var(--wsa-gold);
}

/* ══════════════════════════════════════════════════════
   AUTH CARDS — azul medio con acento dorado
   ══════════════════════════════════════════════════════ */
.wsa-auth-card {
    max-width: 460px;
    margin: 60px auto;
    background: var(--wsa-navy-mid);
    border: 1px solid var(--wsa-border-gold);
    border-top: 2px solid var(--wsa-gold);
    border-radius: var(--wsa-radius);
    padding: 48px 44px;
    box-shadow: var(--wsa-shadow);
}
.wsa-auth-header { text-align: center; margin-bottom: 36px; }
.wsa-logo { max-height: 56px; width: auto; margin-bottom: 16px; }
.wsa-auth-subtitle {
    color: var(--wsa-gray);
    font-size: 11px;
    margin: 4px 0 0;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.wsa-welcome-box {
    background: rgba(201,168,76,0.08);
    border: 1px solid var(--wsa-border-gold);
    border-radius: var(--wsa-radius);
    padding: 16px 20px;
    text-align: center;
    margin-bottom: 24px;
}
.wsa-welcome-icon { font-size: 20px; display: block; margin-bottom: 8px; color: var(--wsa-gold); }
.wsa-welcome-box p { margin: 0 0 6px; font-size: 14px; color: var(--wsa-white-muted); }
.wsa-email-tag { font-weight: 600 !important; color: var(--wsa-gold) !important; font-size: 14px !important; }

/* ── Forms ──────────────────────────────────────────────── */
.wsa-form { display: flex; flex-direction: column; gap: 18px; }
.wsa-field { display: flex; flex-direction: column; gap: 7px; }
.wsa-field label {
    font-size: 10px;
    font-weight: 600;
    color: var(--wsa-gold);
    text-transform: uppercase;
    letter-spacing: 0.14em;
}
.wsa-field input {
    padding: 13px 16px;
    border: 1px solid rgba(201,168,76,0.2);
    border-radius: var(--wsa-radius);
    font-size: 15px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: var(--wsa-sans);
    background: rgba(255,255,255,0.05);
    color: var(--wsa-white);
}
.wsa-field input::placeholder { color: rgba(255,255,255,0.2); }
.wsa-field input:focus {
    border-color: var(--wsa-gold);
    box-shadow: 0 0 0 3px rgba(201,168,76,0.1);
    background: rgba(255,255,255,0.08);
}

/* ══════════════════════════════════════════════════════
   BOTONES — dorado sobre azul marino (igual a la web)
   ══════════════════════════════════════════════════════ */
.wsa-btn {
    display: inline-block;
    padding: 14px 28px;
    border-radius: var(--wsa-radius);
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    border: none;
    transition: all 0.25s;
    font-family: var(--wsa-sans);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
/* Botón primario: fondo dorado, texto azul marino — igual al "VER CONFERENCIAS" */
.wsa-btn-primary {
    background: #4a2080 !important;
    color: #ffffff !important;
    width: 100%;
    margin-top: 8px;
    border: none !important;
}
.wsa-btn-primary:hover {
    background: #5a2d99 !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(74,32,128,0.35);
}
.wsa-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* Botón outline: borde blanco, texto blanco — igual al "AGENDAR SESIÓN" */
.wsa-btn-outline {
    background: transparent;
    color: var(--wsa-white);
    border: 1px solid rgba(255,255,255,0.5) !important;
}
.wsa-btn-outline:hover {
    border-color: var(--wsa-gold) !important;
    color: var(--wsa-gold);
}

/* Botón upsell: dorado igual al primario */
.wsa-btn-gold {
    background: var(--wsa-gold) !important;
    color: var(--wsa-navy) !important;
    font-weight: 700;
    border: none !important;
}
.wsa-btn-gold:hover {
    background: var(--wsa-gold-light) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(201,168,76,0.35);
}
.wsa-btn-block { display: block; width: 100%; margin-top: 16px; }

/* ── Alertas ────────────────────────────────────────────── */
.wsa-alert { padding: 12px 16px; border-radius: var(--wsa-radius); font-size: 14px; margin-bottom: 16px; }
.wsa-alert-error   { background: rgba(185,28,28,0.2); color: #fca5a5; border: 1px solid rgba(185,28,28,0.4); }
.wsa-alert-success { background: rgba(21,128,61,0.2); color: #86efac; border: 1px solid rgba(21,128,61,0.4); }

/* ── Auth footer ────────────────────────────────────────── */
.wsa-auth-footer { text-align: center; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--wsa-border-gold); }
.wsa-firma { width: 44px; height: 44px; border-radius: 50%; margin-bottom: 10px; }
.wsa-auth-footer p { font-size: 12px; color: var(--wsa-gray); margin: 0; }

/* ══════════════════════════════════════════════════════
   DASHBOARD HERO — azul medio con acento dorado izquierdo
   Similar al bloque de estadísticas de la web
   ══════════════════════════════════════════════════════ */
.wsa-dashboard-hero {
    background: var(--wsa-navy-mid) !important;
    border-radius: 0;
    padding: 44px 28px;
    margin: 0;
    position: relative;
    overflow: hidden;
    border: none;
    border-left: none;
    border-top: 1px solid var(--wsa-border-gold);
    border-bottom: 1px solid var(--wsa-border-gold);
    width: 100%;
    max-width: 100% !important;
}
.wsa-dashboard-hero .wsa-dashboard-hero-inner {
    max-width: 1100px;
    margin: 0 auto;
}
.wsa-dashboard-hero::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 50%; height: 100%;
    background: linear-gradient(to left, rgba(201,168,76,0.04), transparent);
    pointer-events: none;
}
.wsa-dashboard-hero-inner {
    display: flex;
    align-items: center;
    gap: 28px;
    position: relative;
    z-index: 1;
}
.wsa-firma-hero {
    width: 76px; height: 76px;
    border-radius: 50%;
    border: 2px solid rgba(201,168,76,0.4);
    flex-shrink: 0;
    object-fit: cover;
}
/* Título en dorado — igual a "2K+" "12" "9+" en la web */
.wsa-dashboard-title {
    font-size: 38px !important;
    font-weight: 700;
    margin: 0 0 10px;
    font-family: var(--wsa-font) !important;
    color: var(--wsa-gold) !important;
    letter-spacing: 0.3px;
    line-height: 1.1;
}
/* Subtítulo en blanco muted — igual a "VIDAS TRANSFORMADAS" */
.wsa-dashboard-subtitle {
    font-size: 11px;
    color: var(--wsa-white-muted);
    margin: 0;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.wsa-dashboard-subtitle strong { color: var(--wsa-white) !important; font-weight: 600; }

/* ══════════════════════════════════════════════════════
   DIVISOR ENTRE SECCIONES
   Alterna azul marino con beige/crema — igual a la web
   ══════════════════════════════════════════════════════ */
.wsa-section-divider {
    margin: 0 -28px;
    height: 3px;
    background: linear-gradient(to right, var(--wsa-gold), transparent);
}

/* ── Section headings ───────────────────────────────────── */
.wsa-section-heading {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 44px 28px 28px;
    max-width: calc(1100px - 56px);
    margin-left: auto;
    margin-right: auto;
}
.wsa-section-heading h2 {
    font-size: 10px !important;
    font-family: var(--wsa-sans);
    font-weight: 700;
    color: var(--wsa-gold) !important;
    margin: 0;
    white-space: nowrap;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.wsa-section-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, var(--wsa-border-gold), transparent);
}

/* ══════════════════════════════════════════════════════
   TARJETAS DE PRODUCTOS — azul medio, borde dorado sutil
   ══════════════════════════════════════════════════════ */
.wsa-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    margin-bottom: 0;
    padding: 0 28px;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}
.wsa-product-card {
    background: var(--wsa-navy-mid) !important;
    border: 1px solid var(--wsa-border-gold);
    border-radius: var(--wsa-radius);
    overflow: hidden;
    box-shadow: var(--wsa-shadow);
    transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.wsa-product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    border-color: rgba(201,168,76,0.5);
}
.wsa-product-thumb {
    height: 200px;
    background-size: cover;
    background-position: center;
    background-color: var(--wsa-navy-light);
}
.wsa-product-thumb-placeholder {
    display: flex; align-items: center; justify-content: center;
    background: var(--wsa-navy-light);
}
.wsa-product-icon { font-size: 40px; color: var(--wsa-gold); opacity: 0.5; }
.wsa-product-body {
    padding: 24px 22px 22px;
    background: var(--wsa-navy-mid) !important;
}
.wsa-type-badge {
    display: inline-block;
    font-size: 9px !important;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 12px;
    font-family: var(--wsa-sans);
    background: rgba(201,168,76,0.12) !important;
    color: var(--wsa-gold) !important;
    border: 1px solid rgba(201,168,76,0.25) !important;
}
.wsa-product-name {
    font-size: 21px !important;
    font-weight: 600;
    margin: 0 0 8px;
    font-family: var(--wsa-font) !important;
    line-height: 1.3;
    color: var(--wsa-white) !important;
}
.wsa-product-desc {
    font-size: 13px;
    color: var(--wsa-white-muted);
    margin: 0 0 16px;
    line-height: 1.7;
}
.wsa-product-meta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 4px; }
.wsa-meta-item { font-size: 11px; color: var(--wsa-gray); letter-spacing: 0.05em; }

/* ══════════════════════════════════════════════════════
   SECCIÓN UPSELL — beige/crema como sección alterna
   Igual al bloque "Jorge Castillo" de la web
   ══════════════════════════════════════════════════════ */
.wsa-upsell-section {
    margin: 56px 0 0;
    padding: 56px 0 0;
    background: var(--wsa-beige);
    border-top: 3px solid var(--wsa-gold);
    width: 100%;
    max-width: 100% !important;
}
.wsa-upsell-section .wsa-section-heading,
.wsa-upsell-section > p,
.wsa-upsell-section .wsa-upsell-grid,
.wsa-upsell-section .wsa-upsell-contact {
    max-width: 1100px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 28px;
    padding-right: 28px;
}
.wsa-upsell-section .wsa-section-heading {
    margin-top: 0 !important;
    padding-top: 0;
}
.wsa-upsell-grid {
    padding-bottom: 56px;
}
.wsa-upsell-section .wsa-section-heading h2 {
    color: var(--wsa-navy) !important;
}
.wsa-upsell-section .wsa-section-line {
    background: linear-gradient(to right, rgba(13,27,62,0.2), transparent);
}
.wsa-upsell-section > p {
    color: #6a7a8a !important;
    font-size: 14px;
    margin: -16px 0 32px;
    line-height: 1.7;
}
.wsa-upsell-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}
/* Tarjetas upsell en beige oscuro — sobre fondo beige claro */
.wsa-upsell-card {
    background: var(--wsa-white) !important;
    border: 1px solid rgba(13,27,62,0.1);
    border-radius: var(--wsa-radius);
    overflow: hidden;
    position: relative;
    transition: transform 0.25s, box-shadow 0.25s;
    box-shadow: 0 2px 16px rgba(13,27,62,0.08);
}
.wsa-upsell-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(13,27,62,0.15);
}
.wsa-upsell-thumb {
    height: 170px;
    background-size: cover;
    background-position: center;
    background-color: var(--wsa-navy-light);
    filter: brightness(0.85);
}
.wsa-upsell-thumb-placeholder {
    display: flex; align-items: center; justify-content: center;
    height: 170px; background: var(--wsa-navy-mid);
}
.wsa-lock-overlay {
    position: absolute;
    top: 138px; right: 16px;
    width: 36px; height: 36px;
    background: var(--wsa-navy);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    border: 1px solid var(--wsa-border-gold);
    z-index: 2;
}
.wsa-upsell-body { padding: 22px 20px 22px; background: var(--wsa-white) !important; }
.wsa-upsell-body .wsa-type-badge {
    background: rgba(13,27,62,0.08) !important;
    color: var(--wsa-navy) !important;
    border-color: rgba(13,27,62,0.15) !important;
}
.wsa-upsell-name {
    font-size: 20px;
    font-weight: 600;
    margin: 8px 0 6px;
    font-family: var(--wsa-font);
    line-height: 1.3;
    color: var(--wsa-navy) !important;
}
.wsa-upsell-desc { font-size: 13px; color: #5a6a8a; margin: 0 0 16px; line-height: 1.7; }

/* Texto debajo del grid upsell */
.wsa-upsell-contact {
    text-align: center;
    padding: 0 0 16px;
    font-size: 13px;
    color: #6a7a8a;
}
.wsa-upsell-contact a { color: var(--wsa-navy); }
.wsa-upsell-contact a:hover { color: var(--wsa-gold); }

/* ── Empty state ────────────────────────────────────────── */
.wsa-empty-state { text-align: center; padding: 80px 20px; }
.wsa-empty-icon { font-size: 36px; color: var(--wsa-gold); margin-bottom: 20px; }
.wsa-empty-state h3 { font-size: 26px; margin-bottom: 12px; font-family: var(--wsa-font); color: var(--wsa-gold); }
.wsa-empty-state p { color: var(--wsa-white-muted); margin-bottom: 24px; font-size: 15px; }

/* ══════════════════════════════════════════════════════
   VISTA DE PRODUCTO
   ══════════════════════════════════════════════════════ */
.wsa-product-hero { margin: 32px 0 28px; }
.wsa-product-title { font-size: 32px; font-family: var(--wsa-font); font-weight: 600; margin: 8px 0 6px; color: var(--wsa-gold); }
.wsa-product-hero-desc { color: var(--wsa-white-muted); font-size: 15px; margin: 0; }

.wsa-content-layout { display: grid; grid-template-columns: 280px 1fr; gap: 28px; align-items: start; }

/* Sidebar */
.wsa-sidebar-inner {
    background: var(--wsa-navy-mid) !important;
    border: 1px solid var(--wsa-border-gold);
    border-radius: var(--wsa-radius);
    overflow: hidden;
    position: sticky;
    top: 20px;
    border-top: 2px solid var(--wsa-gold);
}
.wsa-sidebar-title {
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.14em;
    color: var(--wsa-gold);
    padding: 16px 18px 12px; margin: 0;
    border-bottom: 1px solid var(--wsa-border-gold);
    background: var(--wsa-navy-light) !important;
}
.wsa-section-group { border-bottom: 1px solid var(--wsa-border-navy); }
.wsa-section-group:last-child { border-bottom: none; }
.wsa-section-header {
    font-size: 10px; font-weight: 700; color: var(--wsa-gold);
    padding: 10px 18px 8px;
    background: var(--wsa-navy-light) !important;
    text-transform: uppercase; letter-spacing: 0.08em;
}
.wsa-lesson-list { list-style: none; margin: 0; padding: 4px 0; background: var(--wsa-navy-mid) !important; }
.wsa-lesson-item {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 11px 18px; cursor: pointer;
    transition: background 0.15s; font-size: 13px;
    color: var(--wsa-white-muted);
    background: var(--wsa-navy-mid) !important;
}
.wsa-lesson-item:hover { background: var(--wsa-navy-light) !important; color: var(--wsa-white); }
.wsa-lesson-item.active {
    background: rgba(201,168,76,0.1) !important;
    border-left: 3px solid var(--wsa-gold);
    padding-left: 15px; color: var(--wsa-white);
}
.wsa-lesson-item.active .wsa-lesson-title { font-weight: 600; }
.wsa-pdf-item { display: flex; align-items: center; gap: 8px; padding: 10px 18px; font-size: 13px; background: var(--wsa-navy-mid) !important; }
.wsa-pdf-link { color: var(--wsa-white-muted); text-decoration: none; }
.wsa-pdf-link:hover { color: var(--wsa-gold); }
.wsa-lesson-icon { flex-shrink: 0; width: 16px; color: var(--wsa-gold); font-size: 11px; }
.wsa-lesson-title { line-height: 1.4; }

/* Video player */
.wsa-main-content {
    background: var(--wsa-navy-mid) !important;
    border: 1px solid var(--wsa-border-gold);
    border-radius: var(--wsa-radius);
    overflow: hidden;
    border-top: 2px solid var(--wsa-gold);
}
.wsa-video-player { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; }
.wsa-video-player iframe, .wsa-video-player video { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
.wsa-lesson-info { padding: 24px 28px 28px; background: var(--wsa-navy-mid) !important; }
.wsa-lesson-info h2 { font-size: 22px; margin: 0 0 8px; font-family: var(--wsa-font); color: var(--wsa-gold); }
.wsa-lesson-info p { color: var(--wsa-white-muted); font-size: 14px; margin: 0; line-height: 1.7; }
.wsa-empty-content, .wsa-select-lesson { text-align: center; padding: 60px 20px; color: var(--wsa-white-muted); }

/* ══════════════════════════════════════════════════════
   FOOTER — beige como cierre igual a la web
   ══════════════════════════════════════════════════════ */
.wsa-footer {
    background: var(--wsa-beige);
    margin: 0;
    padding: 36px 28px;
    text-align: center;
    border-top: 3px solid var(--wsa-gold);
    width: 100%;
    max-width: 100% !important;
}
.wsa-firma-footer { width: 40px; height: auto; margin-bottom: 12px; opacity: 0.8; }
.wsa-footer p { font-size: 11px; color: #6a7a8a; margin: 4px 0; letter-spacing: 0.07em; text-transform: uppercase; }
.wsa-footer a { color: #6a7a8a; text-decoration: none; }
.wsa-footer a:hover { color: var(--wsa-navy); }

/* ── Contador de alumnas ────────────────────────────────── */
.wsa-alumnas-counter {
    margin-top: 10px;
    font-size: 12px;
    color: var(--wsa-gold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.wsa-alumnas-counter strong {
    font-size: 15px;
    font-weight: 700;
    color: var(--wsa-white);
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 768px) {
    .wsa-content-layout { grid-template-columns: 1fr; }
    .wsa-sidebar-inner { position: static; }
    .wsa-auth-card { padding: 32px 20px; margin: 32px auto; }
    .wsa-dashboard-hero { padding: 28px 20px; margin: 20px 0 0; }
    .wsa-dashboard-title { font-size: 28px !important; }
    .wsa-firma-hero { width: 56px; height: 56px; }
    .wsa-products-grid, .wsa-upsell-grid { grid-template-columns: 1fr; }
    .wsa-wrap { padding: 0; }
    .wsa-header { padding: 20px 16px; }
    .wsa-dashboard-hero { padding: 28px 16px; }
    .wsa-products-grid { padding: 0 16px; }
    .wsa-upsell-section { margin: 40px 0 0; padding: 40px 0 0; }
    .wsa-upsell-section .wsa-section-heading,
    .wsa-upsell-section > p,
    .wsa-upsell-section .wsa-upsell-grid,
    .wsa-upsell-section .wsa-upsell-contact { padding-left: 16px; padding-right: 16px; }
    .wsa-footer { padding: 32px 16px; }
}