/* =============================================================
   WIS Χ Hanseatica — Las Amιricas Landing Page
   Clean static rebuild from the design handoff (see ../reference/README.md).
   Tokens are binding WIS brand values. Accent re-themes via --wis-accent.
   ============================================================= */

:root {
    /* Brand palette (binding) */
    --dark-blue: #123E6C;
    --medium-blue: #02599E;
    --cyan: #00B3DD;
    --light-blue: #7EAFC8;
    --gold: #EAA741;
    --gold-text: #3A2708;
    --white: #FFFFFF;
    --navy-base: #0B2340;
    --navy-deep: #0A2038;
    /* Single accent — drives buttons, gold rule, step-4 badge, focus ring, sticky pill */
    --wis-accent: #EAA741;
    /* Surface & text */
    --canvas: #F4F6F9;
    --card-surface: #FFFFFF;
    --card-border: #E6EBF1;
    --input-border: #DFE6EE;
    --disc-fill: #EDF4FA;
    --disc-border: #DCE9F3;
    --connector: #BFD4E4;
    --ink: #16293C;
    --ink-section: #2A3E52;
    --muted: #5A6F85;
    --placeholder: #7B8CA0;
    --on-dark: rgba(222,235,249,.86);
    --footer-sub: rgba(200,220,238,.76);
    --maxw: 1180px;
    --ease: cubic-bezier(.4, 0, .2, 1);
}

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 400;
    color: var(--ink);
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
    text-wrap: pretty;
    background: var(--white);
}

h1, h2, h3, h4 {
    margin: 0;
    font-weight: 700;
    line-height: 1.24;
    color: var(--dark-blue);
}

p {
    margin: 0;
}

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

a {
    color: var(--medium-blue);
    text-decoration: none;
}

    a:hover {
        color: var(--dark-blue);
    }

/* ---- Focus ring (all interactive elements) ---- */
:focus-visible {
    outline: 3px solid var(--wis-accent);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ---- Skip link ---- */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 99;
    background: var(--wis-accent);
    color: var(--dark-blue);
    padding: 10px 18px;
    font-weight: 600;
    border-radius: 0 0 8px 0;
}

    .skip-link:focus {
        left: 0;
        color: var(--dark-blue);
    }

/* ---- Layout primitives ---- */
.container {
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 24px;
}

.section {
    padding: clamp(46px, 5.6vw, 68px) 0;
}

.section--canvas {
    background: var(--canvas);
}

.section--white {
    background: var(--white);
}

.section--navy {
    background: linear-gradient(160deg, #123E6C 0%, #0B2340 100%);
}

/* ---- Buttons ---- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    padding: 14px 24px;
    border-radius: 5px;
    border: 0;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
}

    .btn svg {
        width: 16px;
        height: 16px;
        flex: none;
    }

.btn--gold {
    background: var(--wis-accent);
    color: var(--gold-text);
    box-shadow: 0 8px 22px rgba(234,167,65,.28);
    transition: transform .28s var(--ease), filter .28s var(--ease), box-shadow .28s var(--ease);
}

    .btn--gold:hover {
        transform: translateY(-2px);
        filter: brightness(1.07);
        box-shadow: 0 12px 28px rgba(234,167,65,.36);
        color: var(--gold-text);
    }

.btn--outline {
    border: 2px solid var(--dark-blue);
    background: transparent;
    color: var(--dark-blue);
    transition: background-color .28s var(--ease), color .28s var(--ease), transform .28s var(--ease);
}

    .btn--outline:hover {
        background: var(--dark-blue);
        color: var(--white);
        transform: translateY(-2px);
    }

/* =============================================================
   BAND 1 — HERO
   ============================================================= */
.hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: var(--navy-base);
    color: var(--white);
}
    /* z0 — gradient field */
    .hero::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        background: radial-gradient(60% 70% at 76% 44%, rgba(29,86,150,.80) 0%, rgba(11,35,64,0) 64%), radial-gradient(26% 32% at 62% 28%, rgba(0,179,221,.20) 0%, rgba(11,35,64,0) 72%), linear-gradient(135deg, #0A2038 0%, #123E6C 58%, #0B2340 100%);
    }
/* z1 — photo layer */
.hero__media {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 66%;
    z-index: 1;
    filter: brightness(.9) contrast(1.04) saturate(1.05);
    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.28) 16%, rgba(0,0,0,.8) 38%, #000 60%);
    mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.28) 16%, rgba(0,0,0,.8) 38%, #000 60%);
}

    .hero__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
/* placeholder look until real map is supplied */
.hero__media--placeholder {
    display: grid;
    place-items: center;
    background: repeating-linear-gradient(45deg, rgba(126,175,200,.08) 0 12px, rgba(126,175,200,.03) 12px 24px);
    color: rgba(126,175,200,.55);
    font-size: .72rem;
    letter-spacing: .04em;
}
/* z2 — scrim */
.hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(96deg, #0A2038 0%, rgba(10,32,56,.94) 26%, rgba(11,35,64,.58) 46%, rgba(11,35,64,.10) 68%, rgba(11,35,64,0) 84%);
}
/* z3 — content */
.hero__inner {
    position: relative;
    z-index: 3;
    padding: 38px 24px 62px;
}

/* Brand lockup as a single flat PNG (1486x420, supplied artwork cropped to
   its ink). It carries the strapline too, so it replaces both the old
   lockup and the eyebrow. The rules below (.hero__brand,
   .hero__lockup--split, etc.) drive the markup-built version and are
   unused while this image is in place. */
.hero__lockup-img {
    display: block;
    width: min(520px, 100%);
    height: auto;
    margin-bottom: clamp(24px, 3.2vw, 34px);
}

/* Brand lockup */
.hero__lockup {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: clamp(30px, 4.6vw, 46px);
}
/* Both logo assets were cropped to their true ink bounds (originals kept in
   assets/_originals/). They used to carry transparent padding — the SVG 5%
   on each side, the Hanseatica PNG an uneven 35/71/16/47 — which pushed the
   wordmark ~11px right of the hero's left edge and dropped the partner mark
   ~3.5px below true centre. Sizes below are scaled down to match, so the
   marks look the same as before but now align to the box they sit in. */
.hero__brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 21px;
}

.hero__tagline {
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: rgba(255,255,255,.94);
}

    .hero__tagline .divider {
        color: var(--gold);
        margin: 0 .3em;
        font-weight: 400;
    }

.hero__wordmark {
    width: clamp(166px, 18vw, 202px);
    height: auto;
}

.hero__poweredby {
    display: flex;
    align-items: center;
    gap: 13px;
    flex-wrap: wrap;
}

.hero__poweredby-label {
    font-size: .66rem;
    letter-spacing: .04em;
    color: rgba(255,255,255,.80);
}

.hero__poweredby-rule {
    width: 1px;
    height: 24px;
    background: rgba(255,255,255,.32);
}
/* Partner mark. At 40px it read as an afterthought next to the
   "Impulsado por" label; this gives it presence while keeping it clearly
   secondary to the WIS wordmark. 35px of pure ink is the same visual size
   as the old 50px box, which was only 70% ink. */
.hero__hanseatica {
    height: 35px;
    width: auto;
    display: block;
}

/* ---- Split lockup ------------------------------------------------
   Horizontal arrangement per the brand artwork: WIS wordmark on the
   left, "Impulsado por | Hanseatica" on the right. Built from the live
   SVG/PNG rather than a flat composite so it stays crisp and the
   wordmark keeps its alt text. Drop the --split class to fall back to
   the stacked version.

   Per the brand artwork the two halves are separated by a full-height
   hairline and each sits on a thin underline. */
.hero__lockup--split {
    flex-direction: row;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 0;
}

    .hero__lockup--split .hero__brand {
        justify-content: flex-end;
        padding-right: clamp(22px, 3.4vw, 48px);
        padding-bottom: 13px;
        border-bottom: 1px solid rgba(255, 255, 255, .34);
    }

    .hero__lockup--split .hero__poweredby {
        position: relative;
        align-items: center;
        padding-left: clamp(22px, 3.4vw, 48px);
        padding-bottom: 13px;
        /* Offset by the tagline row (16px text + 21px gap) so this half centres
     against the wordmark itself rather than the whole left column —
     the tagline has no counterpart on this side. */
        padding-top: 37px;
        border-bottom: 1px solid rgba(255, 255, 255, .34);
    }
        /* Divider between the halves. A pseudo-element rather than a border-left
   so it can stop short of the underline instead of welding into an
   L-corner with it. */
        .hero__lockup--split .hero__poweredby::before {
            content: "";
            position: absolute;
            left: 0;
            top: 2px;
            bottom: 16px;
            width: 1px;
            background: rgba(255, 255, 255, .30);
        }
/* Once the two halves wrap onto separate lines the vertical rule points
   into empty space and the right-hand underline dangles, so drop both
   along with the horizontal padding. */
@media (max-width: 860px) {
    .hero__lockup--split {
        gap: 18px;
    }

        .hero__lockup--split .hero__brand {
            padding-right: 0;
        }

        .hero__lockup--split .hero__poweredby {
            padding-left: 0;
            padding-top: 0;
            padding-bottom: 0;
            border-bottom: 0;
        }

            .hero__lockup--split .hero__poweredby::before {
                display: none;
            }
}

/* Copy column */
.hero__copy {
    max-width: 592px;
}
/* Strapline. Per the brand artwork this reads as one solid white line
   directly under the lockup — no blue on "Experiencia Local.", and no
   gold rule beneath it (the lockup's own underlines do that job).
   Restore var(--light-blue) below to bring the two-tone version back. */
.hero__eyebrow {
    font-size: clamp(1.1rem, 2.1vw, 1.4rem);
    font-weight: 700;
    color: var(--white);
    margin-bottom: 24px;
}

    .hero__eyebrow .accent {
        color: var(--white);
    }

.hero__rule {
    width: 200px;
    height: 2px;
    background: var(--gold);
    border: 0;
    margin: 0 0 24px;
    border-radius: 2px;
}

.hero__title {
    color: var(--white);
    font-size: clamp(1.62rem, 3.6vw, 2.32rem);
    font-weight: 700;
    letter-spacing: -.008em;
    margin-bottom: 20px;
}

    .hero__title .accent {
        color: var(--light-blue);
    }

.hero__lede {
    font-size: .88rem;
    line-height: 1.76;
    color: rgba(222,235,249,.86);
    max-width: 520px;
    margin-bottom: 30px;
}

/* ---- Hero mobile restack (the only structural breakpoint) ---- */
@media (max-width: 860px) {
    .hero__media {
        width: 100%;
        top: auto;
        bottom: 0;
        height: 37%;
        -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 26%, #000 62%);
        mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 26%, #000 62%);
        filter: brightness(.62) contrast(1.04) saturate(1.05);
    }

    .hero__scrim {
        background: linear-gradient(180deg, rgba(10,32,56,.96) 0%, rgba(11,35,64,.88) 52%, rgba(11,35,64,.42) 100%);
    }

    .hero__inner {
        padding-bottom: 224px;
    }
}

/* =============================================================
   SHARED — Split section (bands 2, 4, 6)
   ============================================================= */
.split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: clamp(30px, 3.6vw, 48px);
    align-items: center;
}

.split--reverse .split__media {
    order: 2;
}
/* copy left, video right (band 4) */

.split__copy .split__title {
    font-size: clamp(1.28rem, 2.4vw, 1.68rem);
    color: var(--medium-blue);
    margin-bottom: 18px;
}

.split__copy p {
    color: var(--ink-section);
    font-size: .88rem;
    line-height: 1.82;
}

    .split__copy p + p {
        margin-top: 15px;
    }

.split__cta {
    margin-top: 26px;
}

/* Dark variant (band 6) */
.split--dark .split__title {
    color: var(--white);
}

.split--dark .split__copy p {
    color: var(--on-dark);
}

/* =============================================================
   SHARED — Video card (poster + play facade)
   ============================================================= */
.video-card {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    aspect-ratio: 16 / 10;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    background: #10314f;
    box-shadow: 0 1px 2px rgba(0,0,0,.28), 0 10px 26px rgba(11,35,64,.22), 0 24px 56px rgba(11,35,64,.18);
}

.video-card__poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Real player, swapped in when the facade is clicked. Inherits .video-card
   so the box, radius and shadow stay identical to the poster it replaces. */
.video-card--player {
    cursor: default;
    background: #000;
}

    .video-card--player iframe,
    iframe.video-card--player {
        width: 100%;
        height: 100%;
        border: 0;
        display: block;
    }
/* placeholder poster until real art is supplied */
.video-card__poster--placeholder {
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #e7edf3, #d6e0ea);
    color: #6b7f93;
    font-size: .74rem;
    letter-spacing: .03em;
}
/* Lower-left, not centred: the video thumbnails are centred portraits and
   a centred play button covered the subject's face. 52px clears the 32px
   mock control bar with room to spare. */
.video-card__play {
    position: absolute;
    left: 20px;
    bottom: 52px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: rgba(255,255,255,.94);
    display: grid;
    place-items: center;
    box-shadow: 0 8px 24px rgba(0,0,0,.32);
    pointer-events: none;
}

    .video-card__play svg {
        width: 24px;
        height: 24px;
        fill: var(--dark-blue);
        margin-left: 3px;
    }
    /* Pulsing ring. Dark blue rather than white: video 1's poster has a white
   background, where a white ring would be invisible. Scale stops at 1.5 so
   the ring stays inside the card's overflow:hidden box. */
    .video-card__play::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50%;
        border: 2px solid rgba(18, 62, 108, .5);
        animation: wisPlayPulse 2.2s var(--ease) infinite;
    }

@keyframes wisPlayPulse {
    0% {
        transform: scale(1);
        opacity: .8;
    }

    70% {
        transform: scale(1.5);
        opacity: 0;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .video-card__play::before {
        animation: none;
        opacity: 0;
    }
}
/* band-6 variant: no control bar, so it can sit lower */
.video-card--bare .video-card__play {
    bottom: 20px;
}

.video-card__bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 32px;
    pointer-events: none;
    background: linear-gradient(to top, rgba(8,18,32,.90), rgba(8,18,32,.30));
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 12px;
    color: rgba(255,255,255,.92);
    font-size: .66rem;
}

    .video-card__bar svg {
        width: 12px;
        height: 12px;
        flex: none;
    }

    .video-card__bar .play-tri {
        fill: currentColor;
    }

    .video-card__bar .icon-stroke {
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .video-card__bar .spacer {
        flex: 1;
    }

/* Heavier shadow on the navy commitment band */
.split--dark .video-card {
    box-shadow: 0 1px 2px rgba(0,0,0,.32), 0 12px 30px rgba(0,0,0,.30), 0 26px 60px rgba(0,0,0,.28);
}

/* =============================================================
   SHARED — Centered section head
   ============================================================= */
.section-head {
    max-width: 740px;
    margin: 0 auto clamp(28px, 3.4vw, 40px);
    text-align: center;
}

.section-head__title {
    font-size: clamp(1.4rem, 2.7vw, 1.85rem);
    color: var(--medium-blue);
}

.section-head__sub {
    margin-top: 10px;
    color: var(--muted);
    font-size: .92rem;
}

/* =============================================================
   BAND 3 — Benefits (seven cards)
   ============================================================= */
/* ---- Grid ----------------------------------------------------
   Flex rather than grid, specifically so the trailing row CENTERS.
   Seven cards never divide evenly into four columns, and a plain grid
   leaves the last row hard-left with a hole at bottom-right. Fixing the
   card width to an exact column and letting flex centre the remainder
   makes 4 + 3 read as deliberate. */
.benefits-grid {
    --cols: 4;
    --gap: 16px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: var(--gap);
}

    .benefits-grid > .benefit {
        /* basis and max-width match, so cards never stretch to fill a short row */
        flex: 1 1 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
        max-width: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
    }

@media (max-width: 1000px) {
    .benefits-grid {
        --cols: 3;
    }
}

@media (max-width: 720px) {
    .benefits-grid {
        --cols: 2;
    }
}

@media (max-width: 480px) {
    .benefits-grid {
        --cols: 1;
    }
}

.benefit {
    background: var(--card-surface);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 24px 14px 26px;
    text-align: center;
    box-shadow: 0 1px 2px rgba(18,62,108,.05), 0 5px 16px rgba(18,62,108,.06);
    transition: transform .34s var(--ease), box-shadow .34s var(--ease), border-color .34s var(--ease);
}

    .benefit:hover {
        transform: translateY(-5px);
        box-shadow: 0 1px 2px rgba(18,62,108,.06), 0 12px 30px rgba(18,62,108,.13);
        border-color: var(--light-blue);
    }

.icon-disc {
    width: 56px;
    height: 56px;
    margin: 0 auto 15px;
    border-radius: 50%;
    background: var(--disc-fill);
    border: 1px solid var(--disc-border);
    display: grid;
    place-items: center;
}

    .icon-disc svg {
        width: 27px;
        height: 27px;
        fill: none;
        stroke: var(--medium-blue);
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.benefit__title {
    font-size: .84rem;
    color: var(--medium-blue);
    margin-bottom: 10px;
    line-height: 1.36;
}

.benefit__body {
    font-size: .76rem;
    line-height: 1.7;
    color: var(--muted);
}

/* =============================================================
   BAND 5 — How it works (four steps)
   ============================================================= */
.steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(184px, 1fr));
    gap: clamp(30px, 3vw, 22px) 16px;
}

.step {
    position: relative;
    text-align: center;
    padding: 0 6px;
}

/* Connector (steps 1–3) */
.step__connector-line {
    position: absolute;
    top: 37px;
    left: calc(50% + 46px);
    right: 2px;
    height: 1px;
    background: repeating-linear-gradient(to right, var(--connector) 0 5px, transparent 5px 10px);
}

.step__connector-chevron {
    position: absolute;
    top: 32px;
    right: -3px;
    width: 11px;
    height: 11px;
    stroke: var(--medium-blue);
    fill: none;
    stroke-width: 2.2;
}

/* Icon ring + number badge */
.step__ico {
    position: relative;
    width: 74px;
    height: 74px;
    margin: 0 auto 14px;
}

.step__badge {
    position: absolute;
    top: -5px;
    left: -7px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: .78rem;
    font-weight: 600;
    border: 3px solid var(--white);
    z-index: 1;
    background: var(--medium-blue);
    color: var(--white);
}

.step--final .step__badge {
    background: var(--wis-accent);
    color: var(--gold-text);
}

.step__ring {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: var(--white);
    border: 1px solid var(--disc-border);
    box-shadow: 0 1px 2px rgba(18,62,108,.05), 0 5px 16px rgba(18,62,108,.07);
    display: grid;
    place-items: center;
}

    .step__ring svg {
        width: 31px;
        height: 31px;
        fill: none;
        stroke: var(--medium-blue);
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.step__title {
    font-size: .83rem;
    color: var(--medium-blue);
    margin-bottom: 5px;
}

.step__body {
    font-size: .77rem;
    line-height: 1.68;
    color: var(--muted);
}

/* Once steps wrap, connectors point into empty space — hide them */
@media (max-width: 860px) {
    .step__connector-line, .step__connector-chevron {
        display: none;
    }
}

/* =============================================================
   BAND 7 — Contact / lead capture
   ============================================================= */
.contact-head {
    max-width: 760px;
    margin-bottom: clamp(26px, 3vw, 34px);
}

.contact-head__title {
    font-size: clamp(1.34rem, 2.6vw, 1.78rem);
    color: var(--medium-blue);
    margin-bottom: 10px;
}

.contact-head__sub {
    color: var(--ink-section);
    font-size: .88rem;
    line-height: 1.8;
}

.contact-body {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(26px, 3vw, 40px);
    align-items: flex-start;
}

/* Column 1 — contact list */
.contact-list {
    flex: 1 1 196px;
    max-width: 280px;
}

    .contact-list ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

    .contact-list li {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: .85rem;
    }

    .contact-list svg {
        width: 20px;
        height: 20px;
        flex: none;
        fill: none;
        stroke: var(--medium-blue);
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .contact-list a {
        color: var(--ink);
        text-decoration: none;
    }

        .contact-list a:hover {
            color: var(--medium-blue);
        }

/* Column 2 — form */
.contact-form {
    flex: 1 1 348px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
    gap: 10px;
}

.form-control {
    width: 100%;
    font-family: inherit;
    font-size: .8rem;
    color: var(--ink);
    padding: 12px 13px;
    border: 1px solid var(--input-border);
    border-radius: 4px;
    background: var(--white);
    transition: border-color .22s var(--ease), box-shadow .22s var(--ease);
}

    .form-control::placeholder {
        color: var(--placeholder);
    }

    .form-control:focus {
        border-color: var(--medium-blue);
        box-shadow: 0 0 0 3px rgba(2,89,158,.12);
        outline: none;
    }

select.form-control {
    padding-right: 34px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6F85' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 14px;
}

textarea.form-control {
    min-height: 44px;
    height: 44px;
    resize: vertical;
}

.form-consent {
    grid-column: 1 / -1;
    margin-top: 2px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: .72rem;
    color: var(--muted);
    line-height: 1.55;
}

    .form-consent input {
        width: 14px;
        height: 14px;
        margin-top: 3px;
        accent-color: var(--medium-blue);
        flex: none;
    }

.form-submit-row {
    grid-column: 1 / -1;
    margin-top: 6px;
}

    .form-submit-row .btn {
        justify-self: start;
    }

/* Success / error panels */
.form-panel {
    background: var(--white);
    border: 1px solid var(--disc-border);
    border-left: 4px solid var(--wis-accent);
    border-radius: 8px;
    padding: 24px 26px;
    box-shadow: 0 1px 2px rgba(18,62,108,.05), 0 6px 18px rgba(18,62,108,.07);
}

    .form-panel h3 {
        font-size: 1rem;
        color: var(--medium-blue);
        margin-bottom: 8px;
    }

    .form-panel p {
        font-size: .85rem;
        line-height: 1.75;
        color: var(--muted);
    }

.form-panel--error {
    border-left-color: #C0392B;
}

.is-hidden {
    display: none !important;
}

/* Column 3 — photo */
.contact-photo {
    flex: 1 1 258px;
    max-width: 360px;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    box-shadow: 0 1px 2px rgba(18,62,108,.06), 0 10px 28px rgba(18,62,108,.14);
}

    .contact-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.contact-photo--placeholder {
    display: grid;
    place-items: center;
    text-align: center;
    padding: 20px;
    background: linear-gradient(150deg, #dbe4ee, #c4d3e2);
    color: #6b7f93;
    font-size: .74rem;
}

/* =============================================================
   BAND 8 — Footer stat bar
   ============================================================= */
.stat-bar {
    background: var(--navy-base);
    color: var(--white);
    padding: 26px 0;
    border-top: 1px solid rgba(126,175,200,.16);
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: 22px 20px;
}

.stat {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}

    .stat svg {
        width: 24px;
        height: 24px;
        flex: none;
        fill: none;
        stroke: var(--light-blue);
        stroke-width: 1.4;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .stat strong {
        display: block;
        font-size: .82rem;
        font-weight: 600;
        color: var(--white);
        line-height: 1.3;
    }

    .stat span {
        display: block;
        font-size: .7rem;
        line-height: 1.45;
        color: var(--footer-sub);
        margin-top: 2px;
    }

/* =============================================================
   Sticky CTA pill
   ============================================================= */
.sticky-cta {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 60;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    padding: 13px 20px;
    border-radius: 999px;
    text-decoration: none;
    background: var(--wis-accent);
    color: var(--gold-text);
    box-shadow: 0 10px 28px rgba(11,35,64,.30);
    opacity: 0;
    transform: translateY(14px);
    pointer-events: none;
    transition: opacity .32s var(--ease), transform .32s var(--ease), filter .28s var(--ease);
}

    .sticky-cta.is-visible {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }

    .sticky-cta:hover {
        filter: brightness(1.07);
        color: var(--gold-text);
    }

    .sticky-cta svg {
        width: 15px;
        height: 15px;
        flex: none;
    }

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

    * {
        transition: none !important;
        animation: none !important;
    }
}

/* ============================================================
   WIS Χ Hanseatica — click-to-reveal tracks (band 5) · v2
   From 2026-07-31_WIS_Hanseatica_Steps_Reveal_v2.
   v2 adds an inline access-request form to step 1 of Seguro de Carga.
   Scoped under .wis-reveal. The component's page-shell rule
   (body{background:#F4F6F9}) and Poppins <link> were dropped — the
   host page supplies both.
   ============================================================ */
.wis-reveal {
    --navy: #123E6C;
    --mid: #02599E;
    --cyan: #00B3DD;
    --gold: #EAA741;
    --lightblue: #7EAFC8;
    --card: #FFFFFF;
    --ink: #16293C;
    --muted: #5A6F85;
    --border: #E2E8EF;
    --field: #F7F9FC;
    --error: #CE5A54;
    --pass: #0E9F6E;
    --shadow: 0 1px 2px rgba(18,62,108,.06), 0 10px 30px rgba(18,62,108,.10);
    --ease: cubic-bezier(.4,0,.2,1);
    font-family: 'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    color: var(--ink);
    padding: 64px 24px;
    max-width: 1120px;
    margin: 0 auto;
    box-sizing: border-box;
}

    .wis-reveal *, .wis-reveal *::before, .wis-reveal *::after {
        box-sizing: border-box;
    }

.wis-reveal__head {
    text-align: center;
    max-width: 620px;
    margin: 0 auto 44px;
}

.wis-reveal__eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--mid);
    margin: 0 0 12px;
}

.wis-reveal__title {
    font-size: clamp(24px,3.4vw,34px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .01em;
    line-height: 1.2;
    color: var(--navy);
    margin: 0 0 12px;
}

.wis-reveal__sub {
    font-size: 15px;
    line-height: 1.6;
    color: var(--muted);
    margin: 0;
}

.wis-reveal__grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 28px;
    align-items: start;
}

/* ---------- track card ---------- */
.wis-track {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 22px;
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: box-shadow .5s var(--ease), border-color .5s var(--ease);
}

    .wis-track.is-open {
        border-color: rgba(2,89,158,.28);
        box-shadow: 0 1px 2px rgba(18,62,108,.06), 0 18px 44px rgba(18,62,108,.16);
    }

/* ---------- the button ---------- */
.wis-track__toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 26px 28px;
    background: var(--navy);
    border: 0;
    border-radius: 0;
    color: #fff;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background .44s var(--ease);
}

    .wis-track__toggle:hover {
        background: var(--mid);
    }

    .wis-track__toggle:focus-visible {
        outline: 3px solid var(--cyan);
        outline-offset: -3px;
    }

.wis-track__labels {
    flex: 1;
    min-width: 0;
}

.wis-track__name {
    display: block;
    font-size: clamp(16px,1.8vw,19px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    line-height: 1.25;
}
/* Product description under the name. The names are now the full product
   titles, so the toggle carries three stacked lines: name, description,
   then the open/close hint. */
.wis-track__desc {
    display: block;
    margin-top: 9px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
    text-transform: none;
    color: rgba(255,255,255,.82);
}

.wis-track__hint {
    display: block;
    margin-top: 10px;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: .02em;
    color: var(--lightblue);
}

.wis-track__chev {
    flex: 0 0 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.12);
    transition: transform .44s var(--ease), background .44s var(--ease);
}

    .wis-track__chev svg {
        width: 15px;
        height: 15px;
        stroke: #fff;
        fill: none;
        stroke-width: 2.4;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.wis-track.is-open .wis-track__chev {
    transform: rotate(180deg);
    background: rgba(255,255,255,.2);
}

/* ---------- the reveal ---------- */
.wis-track__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .52s var(--ease);
}

.wis-track.is-open .wis-track__panel {
    grid-template-rows: 1fr;
}

.wis-track__inner {
    overflow: hidden;
}

.wis-track__body {
    padding: 30px 28px 32px;
}

/* ---------- steps ---------- */
.wis-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

    .wis-steps::before {
        content: "";
        position: absolute;
        left: 16px;
        top: 14px;
        bottom: 14px;
        width: 2px;
        background: linear-gradient(180deg,var(--gold),rgba(234,167,65,0));
    }

    .wis-steps:has(.wis-step:only-child)::before {
        display: none;
    }

.wis-step {
    position: relative;
    padding-left: 52px;
}

    .wis-step + .wis-step {
        margin-top: 34px;
    }

.wis-step__num {
    position: absolute;
    left: 0;
    top: 0;
    width: 33px;
    height: 33px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--navy);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 0 0 5px var(--card);
}

.wis-step__title {
    margin: 5px 0 8px;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--navy);
}

.wis-step__text {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--ink);
}

    .wis-step__text strong {
        font-weight: 600;
        color: var(--mid);
    }

/* ---------- form ---------- */
.wis-form {
    margin-top: 18px;
}

.wis-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.wis-field {
    margin-bottom: 14px;
}

.wis-field__label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--navy);
    margin-bottom: 6px;
}

.wis-field__opt {
    font-weight: 400;
    color: var(--muted);
}

.wis-field input {
    width: 100%;
    padding: 11px 13px;
    font-family: inherit;
    font-size: 14px;
    color: var(--ink);
    background: var(--field);
    border: 1px solid var(--border);
    border-radius: 10px;
    transition: border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}

    .wis-field input::placeholder {
        color: #A8B6C6;
    }

    .wis-field input:hover {
        border-color: var(--lightblue);
    }

    .wis-field input:focus {
        outline: none;
        background: #fff;
        border-color: var(--mid);
        box-shadow: 0 0 0 3px rgba(0,179,221,.18);
    }

    .wis-field input[aria-invalid="true"] {
        border-color: var(--error);
        background: #FDF6F5;
    }

.wis-field__error {
    display: none;
    margin: 6px 0 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--error);
}

.wis-field.has-error .wis-field__error {
    display: block;
}

.wis-consent {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 4px 0 18px;
}

    .wis-consent input {
        flex: 0 0 16px;
        width: 16px;
        height: 16px;
        margin-top: 2px;
        accent-color: var(--mid);
        cursor: pointer;
    }

    .wis-consent label {
        font-size: 12.5px;
        line-height: 1.55;
        color: var(--muted);
        cursor: pointer;
    }

    .wis-consent.has-error label {
        color: var(--error);
    }

.wis-submit {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 24px;
    border: 0;
    border-radius: 999px;
    background: var(--mid);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .02em;
    cursor: pointer;
    transition: background .44s var(--ease), transform .44s var(--ease);
}

    .wis-submit:hover {
        background: var(--navy);
        transform: translateY(-2px);
    }

    .wis-submit:focus-visible {
        outline: 3px solid var(--cyan);
        outline-offset: 3px;
    }

    .wis-submit[disabled] {
        opacity: .6;
        cursor: wait;
        transform: none;
    }

    .wis-submit svg {
        width: 15px;
        height: 15px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2.4;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.wis-form__done {
    display: none;
    padding: 18px 20px;
    border-radius: 14px;
    background: rgba(14,159,110,.07);
    border: 1px solid rgba(14,159,110,.28);
}

    .wis-form__done p {
        margin: 0;
        font-size: 14px;
        line-height: 1.6;
        color: var(--ink);
    }

    .wis-form__done strong {
        display: block;
        margin-bottom: 5px;
        font-weight: 600;
        color: var(--pass);
    }

.wis-form.is-sent .wis-form__fields {
    display: none;
}

.wis-form.is-sent .wis-form__done {
    display: block;
}

.wis-form__fail {
    display: none;
    margin-top: 12px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--error);
}

.wis-form.has-failed .wis-form__fail {
    display: block;
}

/* ---------- cta ---------- */
.wis-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding: 13px 24px;
    border-radius: 999px;
    background: var(--mid);
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .02em;
    transition: background .44s var(--ease), transform .44s var(--ease);
}

    .wis-cta:hover {
        background: var(--navy);
        transform: translateY(-2px);
        color: #fff;
    }

    .wis-cta:focus-visible {
        outline: 3px solid var(--cyan);
        outline-offset: 3px;
    }

    .wis-cta svg {
        width: 15px;
        height: 15px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2.4;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

/* ---------- staggered entrance ---------- */
.wis-track__body > * {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .48s var(--ease), transform .48s var(--ease);
}

.wis-track.is-open .wis-track__body > * {
    opacity: 1;
    transform: none;
}

    .wis-track.is-open .wis-track__body > *:nth-child(1) {
        transition-delay: .04s;
    }

    .wis-track.is-open .wis-track__body > *:nth-child(2) {
        transition-delay: .09s;
    }

    .wis-track.is-open .wis-track__body > *:nth-child(3) {
        transition-delay: .12s;
    }

@media (max-width:820px) {
    .wis-reveal {
        padding: 44px 18px;
    }

    .wis-reveal__grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .wis-track__toggle {
        padding: 22px 20px;
    }

    .wis-track__body {
        padding: 26px 20px 28px;
    }

    .wis-form__row {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

@media (prefers-reduced-motion:reduce) {
    .wis-reveal * {
        transition-duration: .01ms !important;
        transition-delay: 0ms !important;
    }

    .wis-cta:hover, .wis-submit:hover {
        transform: none;
    }
}

/* ============================================================
   Benefits carousel (band 3) — "cinematic" peek slider
   ------------------------------------------------------------
   Deliberately transform-driven rather than a native scroll
   container. The earlier scroll-snap attempt was abandoned
   because scrollLeft/scrollTo silently no-opped at some widths;
   translate3d has no such failure mode.

   The arrows occupy their own grid columns instead of floating
   over the track, so a card can never swallow their clicks — the
   other reason the first attempt was dropped. They are never
   display:none at any breakpoint.
   ============================================================ */
.bcar {
    --bcar-gap: 22px;
    --bcar-slide: min(310px, 70vw);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    /* must exceed the viewport's -40px side margin below, or its clip box
     reaches into the arrow column and the cards paint over the arrows */
    gap: 48px;
}
/* The clip box is pushed outward with negative margin + matching padding,
   so the active card's 44px shadow has somewhere to land instead of being
   sliced off at the viewport edge. JS subtracts this padding when it
   measures, so the centring maths is unaffected. */
/* Clearance is derived from the active card's shadow (0 18px 44px):
   it reaches blur/2 = 22px sideways, 22-18 = 4px up and 22+18 = 40px
   down. The padding below beats each of those with room to spare —
   34px was 6px short at the bottom and the cut was visible. */
.bcar__viewport {
    overflow: hidden;
    margin: -34px -40px -56px;
    padding: 34px 40px 56px;
}

.bcar__track {
    display: flex;
    gap: var(--bcar-gap);
    list-style: none;
    margin: 0;
    padding: 0;
    transition: transform .62s var(--ease);
    will-change: transform;
    touch-action: pan-y; /* let vertical page scroll through */
}

.bcar__slide {
    flex: 0 0 var(--bcar-slide);
    display: flex;
    opacity: .4;
    transform: scale(.88);
    filter: saturate(.55);
    transition: opacity .62s var(--ease), transform .62s var(--ease), filter .62s var(--ease);
}

    .bcar__slide > .benefit {
        width: 100%;
        min-height: 340px; /* taller card */
        padding: 30px 24px 32px;
        border-radius: 35px;
        text-align: left; /* content aligned left */
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

        .bcar__slide > .benefit .icon-disc {
            margin-left: 0;
            margin-right: auto;
        }
        /* Titles run larger inside the carousel than they did in the old 4-up
   grid — the cards are fewer and bigger, so .84rem read as undersized. */
        .bcar__slide > .benefit .benefit__title {
            font-size: 1.02rem;
            line-height: 1.3;
            margin-bottom: 12px;
        }
    /* Content stays grouped at the top. It was pinned to the bottom with
   margin-top:auto so cards with 1- and 2-line titles would align, but
   that tore the icon/title away from the body. min-height above equals
   the tallest card's natural height (340px), so the cards still match
   without the gap. */
    .bcar__slide.is-active {
        opacity: 1;
        transform: scale(1);
        filter: none;
    }

        .bcar__slide.is-active > .benefit {
            border-color: var(--light-blue);
            box-shadow: 0 1px 2px rgba(18,62,108,.06), 0 18px 44px rgba(18,62,108,.18);
        }
    /* the lift-on-hover of the grid version would fight the scale */
    .bcar__slide > .benefit:hover {
        transform: none;
    }

.bcar__arrow {
    flex: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    background: var(--white);
    border: 1px solid var(--disc-border);
    display: grid;
    place-items: center;
    box-shadow: 0 1px 2px rgba(18,62,108,.05), 0 6px 18px rgba(18,62,108,.10);
    transition: background-color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
    position: relative;
    z-index: 2; /* belt and braces: never sit under the track */
}

    .bcar__arrow svg {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: var(--medium-blue);
        stroke-width: 2.2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .bcar__arrow:hover:not([disabled]) {
        background: var(--medium-blue);
        border-color: var(--medium-blue);
        transform: translateY(-2px);
    }

        .bcar__arrow:hover:not([disabled]) svg {
            stroke: var(--white);
        }

    .bcar__arrow[disabled] {
        opacity: .3;
        cursor: default;
        transform: none;
    }

.bcar__dots {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 4px;
}

.bcar__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--connector);
    cursor: pointer;
    transition: background-color .3s var(--ease), width .3s var(--ease);
}

    .bcar__dot.is-active {
        background: var(--medium-blue);
        width: 24px;
    }

@media (max-width: 560px) {
    .bcar {
        gap: 14px;
    }

    .bcar__arrow {
        width: 38px;
        height: 38px;
    }

        .bcar__arrow svg {
            width: 16px;
            height: 16px;
        }
}

@media (prefers-reduced-motion: reduce) {
    .bcar__track, .bcar__slide {
        transition-duration: .01ms;
    }
}