@font-face {
    font-family: Albert;
    src: url('/fonts/AlbertSans-Variable.ttf') format('truetype');
    font-weight: 100 900;
    font-display: swap;
}

:root {
    --u: min(0.0520833333vw, 1px);
    --ink: #1e272d;
    --green: #102e27;
    --yellow: #e5e500;
    --cream: #f1eee7;
    --line: #d8d2c4;
    --muted: #9db2ac;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 24px; }

body.simulator-page {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: Albert, Arial, sans-serif;
    font-size: calc(22 * var(--u));
    line-height: 1.45;
}

body.simulator-page h1,
body.simulator-page h2,
body.simulator-page h3,
body.simulator-page p { margin: 0; }

body.simulator-page a { color: inherit; text-decoration: none; }

body.simulator-page a:focus-visible,
body.simulator-page button:focus-visible,
body.simulator-page summary:focus-visible {
    outline: 3px solid #b0a900;
    outline-offset: 4px;
}

button { cursor: pointer; }

.skip-link:not(:focus) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.skip-link:focus {
    position: fixed;
    z-index: 60;
    top: 8px;
    left: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
}

/* Header */

.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--ink);
    color: #fff;
}

.header-inner {
    width: calc(1730 * var(--u));
    height: calc(140 * var(--u));
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(40 * var(--u));
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: calc(12 * var(--u));
    font-size: calc(46 * var(--u));
    letter-spacing: calc(-1.5 * var(--u));
    white-space: nowrap;
    color: #fff;
}

.brand svg {
    width: calc(56 * var(--u));
    height: calc(50 * var(--u));
    color: var(--yellow);
    flex-shrink: 0;
}

.brand .brand-name {
    font-size: inherit;
    font-weight: 700;
    color: inherit;
}

.brand .brand-img {
    height: calc(44 * var(--u));
    width: auto;
    max-height: none;
    object-fit: contain;
}

.desktop-nav {
    display: flex;
    align-items: center;
    gap: calc(34 * var(--u));
    font-size: calc(17 * var(--u));
    font-weight: 600;
}

.desktop-nav a { padding-block: 12px; }

.desktop-nav a:hover { color: var(--yellow); }

.button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: calc(10 * var(--u));
    border: 0;
    border-radius: calc(10 * var(--u));
    background: var(--yellow);
    color: #172125;
    min-height: calc(52 * var(--u));
    padding: calc(10 * var(--u)) calc(30 * var(--u));
    font-family: inherit;
    font-size: calc(17 * var(--u));
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    transition: background .15s ease;
}

.button:hover { background: #f2f23d; }

.button svg { width: calc(28 * var(--u)); height: calc(28 * var(--u)); }

.login { min-width: calc(170 * var(--u)); }

.mobile-nav { display: none; }

/* Hero */

.sim-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: linear-gradient(135deg, #102e27 0%, #1e272d 70%);
    color: #f4f4f0;
}

.sim-hero::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    background: url('/images/valler/marca-dagua.svg') right center / calc(900 * var(--u)) auto no-repeat;
    opacity: .1;
    filter: invert(1);
}

.sim-container {
    width: calc(1600 * var(--u));
    margin-inline: auto;
}

.sim-hero-grid {
    display: grid;
    grid-template-columns: 1fr calc(640 * var(--u));
    align-items: center;
    gap: calc(70 * var(--u));
    padding-block: calc(72 * var(--u));
}

.sim-hero-copy .sim-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: calc(8 * var(--u));
    padding: calc(6 * var(--u)) calc(14 * var(--u));
    border: 1px solid rgba(229, 229, 0, .45);
    border-radius: 100px;
    color: var(--yellow);
    font-size: calc(13 * var(--u));
    font-weight: 700;
    letter-spacing: calc(1 * var(--u));
    text-transform: uppercase;
}

.sim-hero-copy h1 {
    margin-top: calc(24 * var(--u));
    max-width: calc(650 * var(--u));
    font-size: calc(54 * var(--u));
    line-height: 1.08;
    font-weight: 700;
}

.sim-hero-copy h1 strong { color: var(--yellow); font-weight: 700; }

.sim-hero-copy > p {
    margin-top: calc(22 * var(--u));
    max-width: calc(620 * var(--u));
    color: #d6dfd9;
    font-size: calc(20 * var(--u));
}

.sim-highlights {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(16 * var(--u));
    margin-top: calc(34 * var(--u));
    max-width: calc(560 * var(--u));
}

.sim-highlight {
    padding: calc(16 * var(--u));
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: calc(14 * var(--u));
    background: rgba(255, 255, 255, .05);
    text-align: center;
}

.sim-highlight b { display: block; color: #fff; font-size: calc(24 * var(--u)); }

.sim-highlight span {
    display: block;
    margin-top: calc(4 * var(--u));
    color: var(--muted);
    font-size: calc(12 * var(--u));
    letter-spacing: calc(.5 * var(--u));
    text-transform: uppercase;
}

.sim-checks {
    display: flex;
    flex-wrap: wrap;
    gap: calc(18 * var(--u));
    margin: calc(28 * var(--u)) 0 0;
    padding: 0;
    list-style: none;
    color: #d6dfd9;
    font-size: calc(14 * var(--u));
}

.sim-checks li { display: flex; align-items: center; gap: calc(6 * var(--u)); }
.sim-checks svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); color: var(--yellow); }

/* Form card */

.sim-form-card {
    background: #fff;
    color: var(--ink);
    border-radius: calc(24 * var(--u));
    padding: calc(30 * var(--u));
    box-shadow: 0 calc(24 * var(--u)) calc(70 * var(--u)) rgba(0, 0, 0, .35);
}

/* Tailwind accent overrides inside the simulator card */

.sim-form-card .bg-blue-600 { background-color: var(--yellow) !important; }
.sim-form-card .bg-blue-600.text-white { color: var(--ink) !important; }
.sim-form-card .bg-blue-600:hover,
.sim-form-card .hover\:bg-blue-700:hover { background-color: #f2f23d !important; }

.sim-form-card .bg-green-600 { background-color: var(--yellow) !important; color: var(--ink) !important; }
.sim-form-card .bg-green-600:hover,
.sim-form-card .hover\:bg-green-700:hover { background-color: #f2f23d !important; }

.sim-form-card .text-blue-600,
.sim-form-card .text-blue-700 { color: var(--green) !important; }

.sim-form-card .border-blue-600 { border-color: var(--green) !important; }
.sim-form-card .bg-blue-50 { background-color: #edf1ea !important; }
.sim-form-card .border-blue-200 { border-color: #c9d6cb !important; }
.sim-form-card .border-gray-200 { border-color: var(--line) !important; }
.sim-form-card .accent-blue-600 { accent-color: var(--green) !important; }

.sim-form-card .focus\:border-blue-500:focus { border-color: var(--green) !important; }
.sim-form-card .focus\:ring-blue-500:focus { --tw-ring-color: rgba(16, 46, 39, .25) !important; }

.sim-form-card .bg-gray-200 { background-color: #e4dfd3 !important; }

.sim-form-card input[type="range"] {
    accent-color: var(--green) !important;
    height: calc(8 * var(--u));
}

.sim-form-card input[type="checkbox"] { accent-color: var(--green); }

.sim-form-card input:not([type="hidden"]):not([type="checkbox"]):not([type="range"]),
.sim-form-card select,
.sim-form-card textarea {
    background: #faf9f5 !important;
    border: 1px solid var(--line) !important;
    color: var(--ink) !important;
    border-radius: calc(12 * var(--u)) !important;
}

.sim-form-card input:focus,
.sim-form-card select:focus,
.sim-form-card textarea:focus {
    outline: none !important;
    border-color: var(--green) !important;
    box-shadow: 0 0 0 3px rgba(16, 46, 39, .18) !important;
}

.sim-form-card button.border-gray-300 {
    border-color: var(--ink) !important;
    color: var(--ink) !important;
    background: transparent !important;
}

.sim-form-card button.border-gray-300:hover { background: #eae5d9 !important; }

/* Content sections */

.sim-section { padding: calc(80 * var(--u)) 0; }
.sim-section-cream { background: var(--cream); }
.sim-section-white { background: #fff; }

.sim-section-head {
    max-width: calc(760 * var(--u));
    margin: 0 auto calc(48 * var(--u));
    text-align: center;
}

.sim-section-head h2 { font-size: calc(42 * var(--u)); line-height: 1.15; font-weight: 700; }
.sim-section-head p { margin-top: calc(12 * var(--u)); color: #5c6a63; font-size: calc(19 * var(--u)); }

.sim-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(26 * var(--u));
}

.sim-step {
    padding: calc(28 * var(--u));
    border: 1px solid #e2dccd;
    border-radius: calc(20 * var(--u));
    background: #fff;
}

.sim-step-number {
    display: grid;
    place-items: center;
    width: calc(52 * var(--u));
    height: calc(52 * var(--u));
    border-radius: calc(14 * var(--u));
    background: var(--yellow);
    color: var(--ink);
    font-size: calc(22 * var(--u));
    font-weight: 700;
}

.sim-step h3 { margin-top: calc(18 * var(--u)); font-size: calc(22 * var(--u)); font-weight: 700; }
.sim-step p { margin-top: calc(8 * var(--u)); color: #5c6a63; font-size: calc(16 * var(--u)); }

.sim-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: calc(22 * var(--u));
}

.sim-feature {
    padding: calc(24 * var(--u));
    border: 1px solid #e2dccd;
    border-radius: calc(18 * var(--u));
    background: var(--cream);
}

.sim-feature svg { width: calc(34 * var(--u)); height: calc(34 * var(--u)); color: var(--green); }
.sim-feature h3 { margin-top: calc(14 * var(--u)); font-size: calc(19 * var(--u)); font-weight: 700; }
.sim-feature p { margin-top: calc(6 * var(--u)); color: #5c6a63; font-size: calc(15 * var(--u)); }

.sim-cta {
    padding: calc(70 * var(--u)) 0;
    background: var(--ink);
    color: #fff;
    text-align: center;
}

.sim-cta h2 { font-size: calc(40 * var(--u)); font-weight: 700; }
.sim-cta p { margin-top: calc(10 * var(--u)); color: #c9d3ce; }
.sim-cta .button { margin-top: calc(28 * var(--u)); }

/* Footer */

.site-footer {
    background: var(--ink);
    color: var(--muted);
    padding: calc(42 * var(--u)) 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.footer-inner {
    width: calc(1600 * var(--u));
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(24 * var(--u));
    flex-wrap: wrap;
}

.footer-inner .brand { font-size: calc(28 * var(--u)); }
.footer-inner .brand .brand-name { font-size: inherit; }
.footer-inner .brand .brand-img { height: calc(30 * var(--u)); }
.footer-inner .brand svg { width: calc(36 * var(--u)); height: calc(32 * var(--u)); }
.footer-inner p { font-size: calc(14 * var(--u)); }

/* Responsive */

@media (max-width: 800px) {
    :root { --u: 1px; }
    body.simulator-page { font-size: 16px; }

    .header-inner,
    .sim-container,
    .footer-inner { width: min(100% - 40px, 600px); }

    .header-inner {
        min-height: 86px;
        height: auto;
        flex-wrap: wrap;
        padding-block: 16px;
        gap: 14px;
    }

    .brand { font-size: 26px; gap: 8px; letter-spacing: -.6px; }
    .brand svg { width: 34px; height: 32px; }
    .brand .brand-img { height: 32px; }

    .desktop-nav { display: none; }
    .login { min-width: 86px; min-height: 40px; padding: 8px 14px; font-size: 13px; }
    .login svg { width: 20px; height: 20px; }

    .mobile-nav { display: block; width: 100%; font-size: 15px; }
    .mobile-nav summary { cursor: pointer; padding: 8px 0; list-style: none; }
    .mobile-nav summary::-webkit-details-marker { display: none; }
    .mobile-nav summary span { float: right; }
    .mobile-nav nav { display: grid; padding-top: 10px; }
    .mobile-nav nav a { padding-block: 12px; border-top: 1px solid #44535d; }

    .sim-hero-grid { grid-template-columns: 1fr; gap: 32px; padding-block: 44px; }
    .sim-hero::before { background-size: 700px auto; }
    .sim-hero-copy h1 { font-size: 36px; }
    .sim-hero-copy > p { margin-top: 16px; font-size: 16px; }
    .sim-highlights { max-width: none; gap: 10px; margin-top: 24px; }
    .sim-highlight { padding: 12px 8px; }
    .sim-highlight b { font-size: 18px; }
    .sim-highlight span { font-size: 10px; }
    .sim-checks { margin-top: 20px; gap: 12px; font-size: 12px; }

    .sim-form-card { padding: 20px; border-radius: 18px; }

    .sim-section { padding: 48px 0; }
    .sim-section-head { margin-bottom: 28px; }
    .sim-section-head h2 { font-size: 30px; }
    .sim-section-head p { font-size: 16px; }
    .sim-steps { grid-template-columns: 1fr; gap: 16px; }
    .sim-features { grid-template-columns: 1fr 1fr; gap: 14px; }
    .sim-feature { padding: 18px; }
    .sim-feature h3 { font-size: 17px; }
    .sim-feature p { font-size: 14px; }
    .sim-cta { padding: 48px 0; }
    .sim-cta h2 { font-size: 30px; }
    .site-footer { padding: 30px 0; }
    .footer-inner { justify-content: center; text-align: center; }
}

@media (max-width: 420px) {
    .sim-features { grid-template-columns: 1fr; }
}

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