/* =========================================================
       CONTACTO - DISEÑO EXCLUSIVO
       No modifica registro.css ni otros.css
    ========================================================= */

    .contacto-page {
        width: 100%;
        max-width: 900px;
        padding: 34px 20px 10px;
        margin: 0 auto;
    }

    /* =========================
       MARCA
    ========================= */

    .contacto-brand {
        text-align: center;
        margin-bottom: 28px;
    }

    .contacto-brand img {
        width: 62px;
        height: auto;
        display: block;
        margin: 0 auto 10px;
    }

    .contacto-brand-name {
        font-size: 1.45rem;
        font-weight: 700;
        letter-spacing: 1px;
        color: var(--txt-main);
    }

    .contacto-brand-tagline {
        margin-top: 3px;
        color: var(--txt-muted);
        font-size: .82rem;
    }

    /* =========================
       CABECERA
    ========================= */

    .contacto-header {
        text-align: center;
        margin-bottom: 28px;
    }

    .contacto-header h1 {
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: 8px;
        color: var(--txt-main);
    }

    .contacto-header p {
        max-width: 560px;
        margin: 0 auto;
        color: var(--txt-muted);
        font-size: .95rem;
        line-height: 1.6;
    }

    /* =========================
       TARJETAS
    ========================= */

    .contacto-grid-nuevo {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .contacto-item-nuevo {
        position: relative;
        background: #141a22;
        border: 1px solid #29313b;
        border-radius: 14px;
        padding: 24px 22px;
        text-align: center;
        transition:
            transform .2s ease,
            border-color .2s ease,
            box-shadow .2s ease;
    }

    .contacto-item-nuevo:hover {
        border-color: rgba(31,111,235,.55);
        box-shadow: 0 12px 30px rgba(0,0,0,.22);
    }

    .contacto-icono {
        width: 54px;
        height: 54px;
        margin: 0 auto 15px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(31,111,235,.10);
        border: 1px solid rgba(31,111,235,.22);
        color: var(--icon-blue);
        font-size: 1.35rem;
    }

    .contacto-item-nuevo h2 {
        font-size: 1.05rem;
        margin-bottom: 8px;
        color: var(--txt-main);
    }

    .contacto-item-nuevo p {
        color: var(--txt-muted);
        font-size: .84rem;
        line-height: 1.55;
        min-height: 52px;
        margin-bottom: 14px;
    }

    .contacto-email {
        display: inline-block;
        color: var(--primary);
        text-decoration: none;
        font-size: .88rem;
        font-weight: 500;
        word-break: break-word;
    }

    .contacto-email:hover {
        text-decoration: underline;
    }

    /* =========================
       BOTON COPIAR
    ========================= */

    .contacto-copy {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;

        width: auto;
        margin: 14px auto 0;
        padding: 8px 14px;

        background: #1b2531;
        border: 1px solid #303b48;
        border-radius: 8px;

        color: #dce5ef;
        font-size: .8rem;
        font-weight: 600;

        cursor: pointer;

        transition:
            background .2s ease,
            border-color .2s ease,
            transform .15s ease;
    }

    .contacto-copy:hover {
        background: #243243;
        border-color: #3d4d60;
    }

    .contacto-copy:active {
        transform: scale(.97);
    }

    .contacto-copy.success {
        background: #13664b;
        border-color: #0a9869;
        color: #fff;
    }

    /* =========================
       TARJETA LEGAL
    ========================= */

    .contacto-legal {
        grid-column: 1 / -1;
    }

    /* =========================
       TIEMPO DE RESPUESTA
    ========================= */

    .contacto-tiempo {
        margin-top: 18px;
        padding: 17px 20px;
        border: 1px solid #29313b;
        border-radius: 12px;
        background: rgba(255,255,255,.025);
        text-align: center;
    }

    .contacto-tiempo-titulo {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;

        color: var(--txt-main);
        font-size: .85rem;
        font-weight: 600;
    }

    .contacto-tiempo-titulo i {
        color: var(--icon-blue);
    }

    .contacto-tiempo p {
        margin-top: 5px;
        color: var(--txt-muted);
        font-size: .78rem;
    }

    /* =========================
       CTA VITRIO
    ========================= */

    .contacto-cta {
        margin-top: 28px;
        padding: 25px 22px;

        text-align: center;

        background: #141a22;
        border: 1px solid #29313b;
        border-radius: 14px;
    }

    .contacto-cta h2 {
        color: var(--txt-main);
        font-size: 1.15rem;
        margin-bottom: 6px;
    }

    .contacto-cta p {
        color: var(--txt-muted);
        font-size: .84rem;
        margin-bottom: 17px;
    }

    .contacto-acciones {
        display: flex;
        justify-content: center;
        gap: 10px;
        flex-wrap: wrap;
    }

    .contacto-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;

        min-width: 145px;
        padding: 13px 22px;

        border-radius: 25px;

        text-decoration: none;
        font-size: .85rem;
        font-weight: 600;

        transition:
            transform .15s ease,
            background .2s ease,
            border-color .2s ease;
    }


    .contacto-btn-principal {
        background: var(--primary);
        border: 1px solid var(--primary);
        color: #fff;
    }

    .contacto-btn-principal:hover {
        background: var(--primary-hover);
    }

    .contacto-btn-secundario {
        background: transparent;
        border: 1px solid #3a4654;
        color: var(--txt-main);
    }

    .contacto-btn-secundario:hover {
        background: #1a222c;
        border-color: #536273;
    }
.registro-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border-radius: 20px;
  background: rgba(31,111,235,.10);
  border: 1px solid rgba(31,111,235,.25);
  color: #8abaff;
  font-size: .78rem;
  font-weight: 600;
}
    /* =========================
       FOOTER
    ========================= */

    .contacto-footer {
        margin-top: 28px;
    }

    /* =========================
       MOBILE
    ========================= */
    @media (max-width: 640px) {

        body {
            align-items: flex-start;
        }

        .contacto-page {
            padding: 28px 16px 10px;
        }

        .contacto-brand {
            margin-bottom: 24px;
        }

        .contacto-brand img {
            width: 56px;
        }

        .contacto-header h1 {
            font-size: 1.7rem;
        }

        .contacto-header p {
            font-size: .88rem;
        }

        .contacto-grid-nuevo {
            grid-template-columns: 1fr;
        }

        .contacto-legal {
            grid-column: auto;
        }

        .contacto-item-nuevo {
            padding: 22px 18px;
        }

        .contacto-item-nuevo p {
            min-height: auto;
        }

        .contacto-cta {
            padding: 22px 18px;
        }

        .contacto-btn {
            width: 100%;
            min-width: 0;
        }

    }