/* ========= CSS RESET MUY LIGERO ========= */
    *,
    *::before,
    *::after {
        box-sizing: border-box
    }

    html,
    body {
        margin: 0;
        padding: 0
    }

    img {
        max-width: 100%;
        height: auto;
        display: block
    }

    /* ========= TOKENS ========= */
    :root {
        --bg: #f4f6fb;
        --surface: #ffffff;
        --ink: #14233b;
        --muted: #6b7b93;
        --brand: #3FB9A4;
        --brand-ink: #173156;
        --deep: #173156;
        /* navy cover */
        --deep: #173156;
        --deep-2: ;
        /* index rows */
        --chip: #eaf4ff;
        --ok: #0ea5a4;
        --warn: #db2b2b;
        --shadow: 0 10px 30px rgba(20, 35, 59, .12);
        --radius-xl: 24px;
        --radius-lg: 18px;
        --radius-md: 12px;
        --radius-sm: 10px;
        --maxw: 1100px;
    }

    html {
        scroll-behavior: smooth
    }

    body {
        font: 16px/1.65 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
        color: var(--ink);
        background: var(--bg)
    }

    h1,
    h2,
    h3 {
        margin: 0 0 .4rem;
        line-height: 1.2
    }

    h1 {
        font-size: clamp(36px, 6vw, 56px);
        letter-spacing: -.5px
    }

    h2 {
        font-size: clamp(28px, 4.5vw, 40px);
        letter-spacing: -.3px
    }

    h3 {
        font-size: clamp(18px, 2.7vw, 22px)
    }

    p {
        margin: .25rem 0 1rem;
        color: var(--muted)
    }

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

    a:hover {
        text-decoration: underline
    }

    .wrap {
        max-width: var(--maxw);
        margin: auto;
        padding: 24px
    }

    .card {
        background: var(--surface);
        border-radius: clamp(20px, 2vw, 20px);
        box-shadow: var(--shadow)
    }

    .pad {
        padding: 20px
    }

    .pad-lg {
        padding: 26px
    }

    .shadow {
        box-shadow: var(--shadow)
    }

    .muted {
        color: var(--muted)
    }

    .bold {
        font-weight: 800
    }

    /* ========= COVER ========= */
    .cover {
        background: var(--deep);
        color: #fff;
        min-height: 88vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 28vh;
        /* separa bloque central del tagline inferior */
        position: relative;
        overflow: hidden;
    }

    .brand-row {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: 8px
    }

    .brand-logo {
        width: 40px;
        height: 40px;
        display: grid;
        place-items: center;
        border-radius: clamp(20px, 2vw, 20px);
        background: #e7fbfb;
        color: var(--brand-ink);
        font-weight: 900
    }

    .cover-title {
        color: #fff;
        text-align: left;
        max-width: 720px;
    }

    .cover h1 {
        font-weight: 700
    }

    .cover-sub {
        font-size: clamp(16px, 2.2vw, 22px);
        opacity: .9
    }

    .arrow {
        font-size: 34px;
        line-height: 1;
        margin-top: 18px;
        display: inline-block
    }

    .slogan {
        position: relative;
        color: #f7fbff;
        opacity: .95;
        text-align: center;
        margin-bottom: 24px;
        font-weight: 700
    }

    .cover .wrap {
        padding-top: 34px
    }

    /* ========= INDEX SECTION ========= */
    .index {
        background: var(--deep);
        padding: 40px 0;
        color: #fff
    }

    .index h2 {
        color: #fff
    }

    .index-list {
        margin-top: 16px;
        border-radius: clamp(20px, 2vw, 20px);
        overflow: hidden
    }

    .index-item {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        gap: 16px;
        padding: 18px 20px;
        background: #2b476f;
        border-bottom: 1px solid rgba(255, 255, 255, .08);
    }

    .index-item:nth-child(odd) {
        background: #284363
    }

    .index-num {
        color: #cfe0ff;
        font-weight: 800;
        opacity: .9;
        width: 42px
    }

    .index-link {
        color: #fff;
        font-weight: 700;
        text-decoration: underline;
        text-decoration-thickness: 2px;
        text-underline-offset: 4px
    }

    /* ========= SECTION HEADER (badge + title) ========= */
    .section {
        margin: 24px auto 18px;
        max-width: var(--maxw);
        padding: 0 24px;
    }

    .section-head {
        display: flex;
        align-items: center;
        gap: 14px;
        margin: 30px 0 14px
    }

    .badge {
        width: 44px;
        height: 44px;
        border-radius: clamp(20px, 2vw, 20px);
        background: #42C6B6;
        display: grid;
        place-items: center;
        color: #fff;
        font-weight: 700;
        font-size: 18px;
        box-shadow: 0 8px 18px rgba(15, 163, 162, .25)
    }

    /* ========= HERO (welcome) ========= */
    .hero {
        margin-top: -48px;
        position: relative;
    }

    .hero-img {
        border-radius: clamp(20px, 2vw, 20px);
        width: 100%;
        aspect-ratio: 16/9;
        object-fit: cover;
        box-shadow: var(--shadow);
    }

    .hero-card {
        margin-top: -28px;
        border-radius: clamp(20px, 2vw, 20px);
        background: var(--surface);
        box-shadow: var(--shadow);
        padding: 28px 22px;
    }

    .logo-word {
        display: inline-grid;
        grid-auto-flow: column;
        align-items: center;
        gap: 10px
    }

    .logo-mark {
        width: 26px;
        height: 26px;
        border-radius: clamp(20px, 2vw, 20px);
        background: #c5f3f2;
        display: grid;
        place-items: center;
        color: var(--brand-ink);
        font-weight: 900
    }

    .benefits {
        margin-top: 14px;
        border-top: 1px solid #e9edf6;
        padding-top: 10px
    }

    .benefit {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 12px;
        align-items: start;
        margin: 12px 0
    }

    .benefit .num {
        width: 44px;
        height: 44px;
        border-radius: clamp(20px, 2vw, 20px);
        background: #183b63;
        color: #fff;
        display: grid;
        place-items: center;
        font-weight: 900
    }

    /* ========= SECTION 1 — Reservation Details ========= */
    .grid-2 {
        display: grid;
        grid-template-columns: 1fr;
        gap: 14px
    }

    .metrics {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px
    }

    .metric {
        background: #f8fafc;
        border-radius: clamp(20px, 2vw, 20px);
        padding: 16px
    }

    .metric h4 {
        margin: 0 0 4px;
        font-size: 16px;
        color: var(--muted);
        font-weight: 700
    }

    .metric .value {
        font-weight: 900;
        color: #0f2b4a;
        font-size: 20px
    }

    .facts {
        padding-top: 4px
    }

    .fact {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 10px;
        margin: 10px 0
    }

    .fact b {
        color: #0f2b4a
    }

    .important {
        background: #f3f6fb;
        border-left: 5px solid #213f67;
        padding: 14px;
        border-radius: clamp(20px, 2vw, 20px);
        margin-top: 14px
    }

    .important .note {
        color: var(--muted)
    }

    /* ========= SECTION 2 — Parties ========= */
    .stack {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px
    }

    .host-card {
        border: none;
    }

    .card-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 8px
    }

    .chip {
        display: inline-block;
        padding: 6px 10px;
        border-radius: clamp(20px, 2vw, 20px);
        background: #eaf8f6;
        color: #0b2a49;
        font-size: 12px;
        font-weight: 900;
        letter-spacing: .3px
    }

    .kv {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px
    }

    .kv div {
        padding: 8px 10px;
        background: #f7fbff;
        border-radius: 12px
    }

    .kv small {
        display: block;
        font-size: 12px;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: .3px
    }

    /* ========= SECTION 3 — Roles ========= */
    .role-card {
        padding: 18px;
        border-radius: clamp(20px, 2vw, 20px);
        background: #fff;
        box-shadow: var(--shadow)
    }

    .role-tag {
        display: inline-block;
        background: #edf3ff;
        color: #183b63;
        border-radius: clamp(20px, 2vw, 20px);
        padding: 6px 10px;
        font-weight: 800;
        font-size: 12px
    }

    .roles-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px
    }

    /* ========= SECTION 4 — House Rules ========= */
    .rules-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px
    }

    .rule {
        border: 1px solid #e7ebf4;
        border-radius: clamp(20px, 2vw, 20px);
        padding: 16px;
        background: #fff
    }

    .rule h4 {
        margin: 0 0 6px;
        font-size: 16px
    }

    .rule .icon {
        width: 32px;
        height: 32px;
        border-radius: clamp(20px, 2vw, 20px);
        background: #0f2b4a;
        display: grid;
        place-items: center;
        color: #fff;
        font-weight: 900;
        margin-bottom: 8px
    }

    .emergency {
        margin-top: 16px;
        border-radius: clamp(20px, 2vw, 20px);
        overflow: hidden
    }

    .em-head {
        background: #0f2b4a;
        color: #fff;
        padding: 14px 18px;
        font-weight: 900
    }

    .em-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
        background: #fff
    }

    .em-item {
        padding: 14px 18px;
        border-top: 1px solid #edf0f6
    }

    .em-item b {
        display: block
    }

    /* ========= SECTION 5 — Payment ========= */
    .pay-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px
    }

    .bank {
        background: #0b2340;
        color: #fff;
        border-radius: clamp(20px, 2vw, 20px);
        padding: 18px
    }

    /* ========= INDEX DOTS BETWEEN BLOQUES (decorativo) ========= */
    .section-dots {
        display: flex;
        gap: 8px;
        justify-content: center;
        margin: 18px 0
    }

    .section-dots span {
        width: 10px;
        height: 10px;
        border-radius: clamp(20px, 2vw, 20px);
        background: #c7d2e4
    }

    .section-dots span:nth-child(4) {
        background: #1e3760
    }

    /* ========= LAYOUT DESKTOP ========= */
    @media (min-width: 820px) {
        .hero-img {
            aspect-ratio: 21/8
        }

        .grid-2 {
            grid-template-columns: 1.2fr .8fr
        }

        .stack {
            grid-template-columns: 1fr 1fr
        }

        .kv {
            grid-template-columns: repeat(4, 1fr)
        }

        .roles-grid {
            grid-template-columns: repeat(3, 1fr)
        }

        .rules-grid {
            grid-template-columns: repeat(3, 1fr)
        }

        .pay-grid {
            grid-template-columns: repeat(2, 1fr)
        }
    }

    /* ========= BOTÓN PDF ========= */
    .toolbar {
        position: sticky;
        top: 0;
        z-index: 50;
        background: linear-gradient(180deg, rgba(244, 246, 251, .95), rgba(244, 246, 251, .75));
        backdrop-filter: saturate(1.2) blur(6px);
        border-bottom: 1px solid #e9edf6;
    }

    .toolbar .inner {
        max-width: var(--maxw);
        margin: auto;
        display: flex;
        gap: 10px;
        align-items: center;
        justify-content: space-between;
        padding: 10px 16px
    }

    .btn {
        appearance: none;
        border: 0;
        border-radius: clamp(20px, 2vw, 20px);
        padding: 10px 14px;
        font-weight: 800;
        background: #0f2b4a;
        color: #fff;
        cursor: pointer
    }

    .btn:active {
        transform: translateY(1px)
    }

    .btn-outline {
        background: #eaf4ff;
        color: #0f2b4a
    }

    /* ========= PRINT ========= */
    @media print {

        .toolbar,
        .index {
            display: none !important
        }

        .wrap {
            padding: 0
        }

        .section {
            padding: 0 0
        }

        .card,
        .hero-card {
            box-shadow: none
        }

        @page {
            size: A4;
            margin: 14mm
        }

        .card,
        .rule,
        .role-card {
            break-inside: avoid
        }

        .badge {
            color: #000;
            background: #cfe6ff
        }
    }

    x header.cover::after {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, .45);
    }

    /* El título grande y centrado como en la landing */
    header.cover .ts-hero--title {
        margin: 0;
        text-align: center;
        color: #fff;
        font-weight: 800;
        letter-spacing: -.02em;
        font-size: clamp(42px, 8vw, 82px);
        /* grande como el otro */
        text-shadow: 0 2px 20px rgba(0, 0, 0, .3);
    }

    /* Corazón del "co-live" */
    header.cover .ts-hero--title .heart {
        width: 1.2em;
        height: auto;
        fill: #fff;
        vertical-align: -0.1em;
    }

    @media (min-width: 820px) {
        .stack {
            grid-template-columns: 1fr !important;
        }
    }

    /* Guest info responsive grid */
    .guest-info {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    @media (min-width: 820px) {
        .guest-info {
            grid-template-columns: repeat(3, 1fr);
            /* 3 columnas en desktop */
        }
    }

    /* Pastilla ancha centrada (Guest/Partner/Host) */
    .tag-wrap {
        display: flex;
        justify-content: center;
        margin-bottom: 12px
    }

    .entity-tag {
        width: 100%;
        padding: 12px 18px;
        border-radius: clamp(20px, 2vw, 20px);
        background: #eef4fb;
        /* igual a tu Partner */
        color: #173156;
        font-weight: 900;
        letter-spacing: .08em;
        text-transform: uppercase;
        font-size: 16px;
    }

    /* Título con meta más chica en la misma línea */
    .person-title {
        margin: 8px 0 16px
    }

    .person-title .person-meta {
        font-weight: 600;
        font-size: .72em;
        /* más chico */
        color: #3c4b63;
        /* un poco más suave que el título */
    }

    /* Grid de info del invitado (1 col mobile / 3 desktop) */
    .guest-info {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px
    }

    @media (min-width:820px) {
        .guest-info {
            grid-template-columns: repeat(3, 1fr)
        }
    }

    /* que el mail sea clickeable aunque haya overlays */
    .kv div {
        position: relative;
    }

    .link-mail {
        position: relative;
        z-index: 2;
        pointer-events: auto;
    }

    /* meta (edad + país) más chico y suave: ya usas .person-meta */
    .person-title .person-meta {
        font-size: .72em;
        color: #3c4b63;
    }

    /* ====== HERO mock ====== */
    .hero {
        margin-top: -48px;
        position: relative;
    }

    /* Imagen grande con esquinas XL */
    .hero-media {
        border-radius: clamp(20px, 2vw, 20px);
        overflow: hidden;
        box-shadow: var(--shadow);
    }

    .hero-media .hero-img {
        width: 100%;
        aspect-ratio: 21/9;
        object-fit: cover;
    }

    /* Card blanca que se superpone, con borde muy redondeado */
    .welcome-card {
        background: #fff;
        margin-top: -22px;
        /* solapa la imagen */
        border-radius: clamp(20px, 2vw, 20px);
        box-shadow: var(--shadow);
        padding: 36px 28px;
    }

    /* Título “Welcome to” + logo en una sola línea */
    .welcome-title {
        display: flex;
        align-items: center;
        gap: 14px;
        margin: 0 0 8px;
        font-weight: 700;
        color: #0f2340;
        letter-spacing: -.02em;
        font-size: clamp(28px, 5.2vw, 56px);
        justify-content: center;
        /* centra el bloque */
        text-align: center;
        /* alinea el texto */
    }

    .welcome-logo {
        height: 58px;
        width: auto;
        display: block;
    }

    /* Subtítulo centrado, como el mock */
    .welcome-sub {
        text-align: center;
        max-width: 980px;
        margin: 6px auto 18px;
        font-size: clamp(16px, 2.2vw, 20px);
        line-height: 1.55;
        color: #2b3a55;
    }

    /* Label BENEFITS con líneas a los lados */
    .section-label {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        margin: 18px 0 6px;
    }

    .section-label::before,
    .section-label::after {
        content: "";
        height: 1px;
        background: #e5ebf6;
        flex: 1;
    }

    .section-label>span {
        font-weight: 900;
        letter-spacing: .15em;
        font-size: 20px;
        color: #233553;
        border: 1px solid #e5ebf6;
        border-radius: clamp(20px, 2vw, 20px);
        padding: 6px 16px;
        background: #fff;
    }

    /* Lista de beneficios */
    .benefit-list {
        display: grid;
        gap: 22px;
        margin-top: 14px;
    }

    .benefit {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: start;
        gap: 16px;
    }

    .benefit .num {
        width: 58px;
        height: 58px;
        border-radius: clamp(20px, 2vw, 20px);
        background: #173156;
        color: #fff;
        display: grid;
        place-items: center;
        font-weight: 900;
        font-size: 22px;
    }

    .benefit h3 {
        margin: 2px 0 6px;
        font-size: clamp(18px, 2.6vw, 26px);
        color: #0f2b4a;
        font-weight: 700;
    }

    .benefit p {
        margin: 0;
        color: #455571;
    }

    /* Desktop tweaks */
    @media (min-width: 820px) {
        .welcome-card {
            padding: 44px 42px;
            border-radius: clamp(20px, 2vw, 20px);
        }

        .welcome-logo {
            height: 64px;
        }

        .benefit-list {
            gap: 28px;
        }
    }

    /* Empata con tu estilo previo (por si quedan restos) */
    .logo-word {
        display: none;
    }

    /* ocultamos el H2 anterior dentro del hero-card */
    .benefits {
        display: none;
    }

    /* ocultamos el bloque antiguo de benefits */
    .hero-card {
        display: none;
    }

    :root {
        /* altura real del navbar */
        --nav-h: 64px;
        /* ajusta si tu toolbar es más alta */
    }

    /* Opcional: asegura la altura del contenedor del nav */
    .toolbar .inner {
        min-height: var(--nav-h);
        display: flex;
        align-items: center;
    }

    [id] {
        scroll-margin-top: calc(var(--nav-h) + 12px);
    }

    /* layout 2 columnas solo en desktop para la card HOST */
    @media (min-width: 820px) {
        .host-card {
            display: grid;
            grid-template-columns: 1.3fr 1fr;
            /* izq: nombre | der: email */
            gap: 16px;
            align-items: start;
        }

        /* La pastilla HOST ocupa el ancho completo arriba */
        .host-card>.d-flex {
            grid-column: 1 / -1;
        }

        /* Colocar explícitamente cada bloque */
        .host-card .person-title {
            grid-column: 1;
            margin: 8px 0;
        }

        .host-card .guest-info {
            grid-column: 2;
        }

        /* Evitar que .guest-info se haga 3 columnas dentro de esta card */
        .host-card .guest-info {
            display: grid;
            grid-template-columns: 1fr;
        }
    }

    /* Poné esto DESPUÉS de Bootstrap */
    .card .card-body.text-body-secondary ul li {
        color: rgba(var(--bs-secondary-color-rgb), var(--bs-text-opacity, 1)) !important;
    }

    @media (min-width: 820px) {
        .pay-grid {
            grid-template-columns: 1fr !important;
        }
    }

    /* Grupo visual para cada par de pagos */
    .pay-group {
        background: #fff;
        border-radius: clamp(20px, 2vw, 20px);
        padding: 12px;
        box-shadow: var(--shadow);
        margin: 16px 0;
        /* separa grupo 1 del grupo 2 */
    }

    /* Dentro del grupo, los items se apilan en 1 columna */
    .pay-group .pay-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        /* espacio corto entre 1 y 2 (y entre 3 y 4) */
        margin: 0;
        /* anulamos márgenes inline si los hubiera */
    }

    /* Evitar “doble sombra” de la card interna y marcar sutilmente cada item */
    .pay-group .card {
        box-shadow: none;
        border: 1px solid #e9edf6;
        border-radius: clamp(20px, 2vw, 20px);
    }

    .pay-group-title {
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: 900;
        letter-spacing: .02em;
        margin: 4px 8px 12px;
        color: #0f2340
    }

    .pay-group-title .tag {
        font-size: 12px;
        font-weight: 800;
        text-transform: uppercase;
        padding: 4px 10px;
        border-radius: clamp(20px, 2vw, 20px);
        background: #eef4fb;
        color: #173156
    }

    .pay-group .note {
        margin-top: 8px;
        color: #6b7b93;
        font-style: italic
    }

    .pay-amount {
        font-weight: 900
    }

    .pay-label {
        font-weight: 900;
        text-transform: uppercase;
        font-size: 12px;
        letter-spacing: .3px;
        color: #6b7b93
    }

    /* Chips de fechas: 3 columnas en desktop, 1 en mobile */
    .kv.kv-3 {
        grid-template-columns: 1fr;
    }

    @media (min-width: 820px) {
        .kv.kv-3 {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    /* Pastilla superior "AGREEMENT" más suave */
    .agreement-tag {
        background: #eef4fb;
        color: #173156;
        font-weight: 900;
        letter-spacing: .08em;
        text-transform: uppercase;
        padding: 10px 16px;
        border-radius: clamp(20px, 2vw, 20px);
        display: inline-block;
    }

    /* Caja del texto legal */
    .acceptance-legal {
        border: 1px solid #e9edf6;
        border-radius: clamp(20px, 2vw, 20px);
    }

    /* Etiquetas de chips */
    .kv.kv-3 small {
        display: block;
        font-size: 12px;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: .3px;
        font-weight: 700;
    }

    .cta-row {
        display: grid;
        grid-template-columns: auto;
        /* no 1fr */
        gap: 10px;
        justify-content: center;
        /* centra el grid */
        justify-items: center;
        /* evita stretch de cada botón */
    }

    @media (min-width:820px) {
        .cta-row {
            grid-template-columns: auto auto auto;
        }
    }

    /* ===== Signatures ===== */
    .sign-section .sign-grid {
        display: grid;
        gap: 12px;
        grid-template-columns: 1fr;
    }

    @media (min-width:820px) {
        .sign-section .sign-grid {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    .sign-box {
        background: #fff;
        border-radius: clamp(20px, 2vw, 20px);
        box-shadow: var(--shadow);
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .sign-role {
        display: inline-block;
        background: #eef4fb;
        color: #173156;
        font-weight: 900;
        letter-spacing: .08em;
        text-transform: uppercase;
        padding: 6px 12px;
        border-radius: clamp(20px, 2vw, 20px);
        font-size: 12px;
    }

    .sig-field {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .sig-label {
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: .3px;
        color: var(--muted);
        font-weight: 700;
    }

    .sig-line {
        height: 38px;
        border-bottom: 2px solid #dbe4f3;
        display: flex;
        align-items: flex-end;
        padding-bottom: 6px;
        color: #0f2340;
        font-weight: 800;
    }

    .sign-note {
        color: #6b7b93;
        font-size: 13px;
        margin-top: 8px;
    }

    @media print {
        .sign-box {
            box-shadow: none;
            border: 1px solid #e9edf6;
        }
    }

    /* ===== Signatures (2 cols desktop, 1 col mobile) ===== */
    .sign-section .sign-grid {
        display: grid;
        gap: 12px;
        grid-template-columns: 1fr;
    }

    @media (min-width:820px) {
        .sign-section .sign-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    .sign-box {
        background: #fff;
        border-radius: clamp(20px, 2vw, 20px);
        box-shadow: var(--shadow);
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .sign-role {
        display: inline-block;
        background: #eef4fb;
        color: #173156;
        font-weight: 900;
        letter-spacing: .08em;
        text-transform: uppercase;
        padding: 6px 12px;
        border-radius: clamp(20px, 2vw, 20px);
        font-size: 12px;
    }

    .sig-field {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .sig-label {
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: .3px;
        color: var(--muted);
        font-weight: 700;
    }

    .sig-line {
        height: 38px;
        border-bottom: 2px solid #dbe4f3;
        display: flex;
        align-items: flex-end;
        padding-bottom: 6px;
        color: #0f2340;
        font-weight: 800;
    }

    .sign-note {
        color: #6b7b93;
        font-size: 13px;
        margin-top: 8px;
    }

    @media print {
        .sign-box {
            box-shadow: none;
            border: 1px solid #e9edf6;
        }
    }

    /* ===== Signatures (1 col siempre) ===== */
    .sign-section .sign-grid {
        display: grid;
        gap: 12px;
        grid-template-columns: 1fr;
    }

    .sign-box {
        background: #fff;
        border-radius: clamp(20px, 2vw, 20px);
        box-shadow: var(--shadow);
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .sign-role {
        display: inline-block;
        background: #eef4fb;
        color: #173156;
        font-weight: 900;
        letter-spacing: .08em;
        text-transform: uppercase;
        padding: 6px 12px;
        border-radius: clamp(20px, 2vw, 20px);
        font-size: 12px;
    }

    .sig-field {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .sig-label {
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: .3px;
        color: var(--muted);
        font-weight: 700;
    }

    .sig-line {
        height: 38px;
        border-bottom: 2px solid #dbe4f3;
        display: flex;
        align-items: flex-end;
        padding-bottom: 6px;
        color: #0f2340;
        font-weight: 800;
    }

    .sign-note {
        color: #6b7b93;
        font-size: 13px;
        margin-top: 8px;
    }

    @media print {
        .sign-box {
            box-shadow: none;
            border: 1px solid #e9edf6;
        }
    }

    /* Chips (2 columnas en desktop, 1 en mobile) */
    .kv.kv-2 {
        grid-template-columns: 1fr;
        /* mobile */
        gap: 12px;
        margin: 12px 0 18px;
        /* agrega espacio debajo de los chips */
    }

    @media (min-width:820px) {
        .kv.kv-2 {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    /* Un poco de aire extra antes de firmas */
    .sign-section {
        margin-top: 8px;
    }

    /* podés subir a 16px si lo querés más suelto */

    /* Firma como imagen dentro de la línea */
    .sig-line {
        position: relative;
        height: 80px;
        /* alto cómodo para una firma */
        border-bottom: 2px solid #dbe4f3;
        display: flex;
        align-items: flex-end;
        /* firma “apoya” sobre la línea */
        padding-bottom: 6px;
        overflow: hidden;
    }

    .sig-line .sig-img {
        max-height: 70px;
        /* que no invada el label ni el margen */
        width: auto;
        object-fit: contain;
        display: block;
        margin-left: 0;
        /* ajustá si querés centrarla */
        image-rendering: auto;
    }

    /* Si hay imagen, podés quitar visualmente la línea (opcional) */
    .sig-line.no-underline {
        border-bottom: 0;
        padding-bottom: 0;
    }

    /* ===== Signature split layout (name+date | big signature) ===== */
    .sig-split {
        display: grid;
        gap: 14px;
        grid-template-columns: 1fr;
        /* mobile: 1 col */
    }

    @media (min-width:820px) {
        .sig-split {
            grid-template-columns: 1.1fr 1fr;
        }

        /* 2 cols desktop */
    }

    /* Column containers */
    .sig-left {
        display: grid;
        gap: 12px;
    }

    .sig-right {
        display: grid;
    }

    /* Compact lines for name/date */
    .sig-line.slim {
        height: 44px;
        /* más baja que la default */
        border-bottom: 2px solid #dbe4f3;
        display: flex;
        align-items: flex-end;
        padding-bottom: 6px;
        font-weight: 800;
        color: #0f2340;
    }

    /* Big signature canvas */
    .sig-line.big {
        height: 180px;
        /* firma grande */
        border: 2px dashed #dbe4f3;
        /* marco sutil para firma */
        border-radius: clamp(20px, 2vw, 20px);
        display: grid;
        place-items: center;
        padding: 8px;
    }

    .sig-line.big img.sig-img {
        max-height: 160px;
        width: auto;
        object-fit: contain;
        display: block;
    }

    /* Visual tweaks */
    .sig-label {
        margin-bottom: 2px;
    }

    /* CTA buttons responsive */
    .cta-row a.btn {
        width: 100%;
        /* En mobile todos igual de anchos */
        text-align: center;
        /* Texto centrado */
    }

    /* --- Welcome block: mobile fix --- */
    .welcome-title {
        flex-wrap: wrap;
        /* permite que el logo baje a la 2ª línea si hace falta */
        line-height: 1.1;
    }

    /* tamaños más chicos en pantallas chicas */
    @media (max-width: 480px) {
        .welcome-card {
            padding: 22px 18px;
        }

        .welcome-title {
            font-size: clamp(20px, 6vw, 28px);
            /* baja el mínimo en mobile */
            gap: 10px;
            text-align: center;
        }

        .welcome-logo {
            height: 36px;
            /* antes 58px */
            max-width: 70%;
            /* evita desbordes si el SVG es ancho */
        }

        .welcome-sub {
            font-size: 15px;
            /* texto debajo un toque más chico */
            line-height: 1.5;
        }
    }

    /* separa el logo del borde superior de la tarjeta que se superpone a la foto */
    .welcome-card {
        padding-top: 36px;
        /* subí este valor si querés más espacio */
    }

    /* en mobile, un poco más de aire */
    @media (max-width: 480px) {
        .welcome-card {
            margin-top: -16px;
            /* menos superposición para que no “toque” */
            padding-top: 24px;
            /* más padding arriba */
        }

        .welcome-title {
            margin-top: 4px;
        }

        /* opcional */
        .welcome-logo {
            margin-top: 6px;
        }

        /* opcional, ajuste fino */
    }

    /* Desktop: achicar foto y ensanchar detalle */
    @media (min-width: 1024px) {
        .grid-2 {
            /* antes: 1.2fr .8fr */
            grid-template-columns: .8fr 1.2fr;
            /* foto 40% | detalle 60% */
            align-items: start;
        }

        /* opcional: menos altura visual de la imagen */
        .grid-2>div:first-child img {
            aspect-ratio: 3 / 2;
            /* más bajita que 16/9 */
            object-fit: cover;
        }

        /* opcional: métricas en dos columnas para que todo quepa mejor */
        .metrics {
            grid-template-columns: 1fr 1fr;
        }
    }

    /* Metrics: siempre en 1 columna (stacked) */
    .grid-2 .metrics {
        display: grid;
        grid-template-columns: 1fr !important;
        /* pisa el 1fr 1fr previo */
        gap: 12px;
    }

    /* Asegura que cada tarjeta ocupe todo el ancho disponible */
    .grid-2 .metrics .card {
        width: 100%;
    }