/* Contacto · formulario de consultas
   Misma base visual que Mi perfil y checkout: fondo menta, tarjetas blancas, radios 12/8/6. */

.ct-page {
    --ct-tinta: #17262F;
    --ct-texto: #3E5560;
    --ct-muted: #5B7280;
    --ct-linea: #DEE7E3;
    --ct-primario: var(--tu-primario, #2095CE);
    --ct-secundario: var(--tu-secundario, #186489);
    --ct-ok: #17794F;
    --ct-error: #B4453A;
    --ct-pozo: #F7FAF8;
    background: var(--tu-fondo, #EDF1EE);
    color: var(--ct-tinta);
    font-family: 'Wix Madefor Display', sans-serif;
    padding: 20px 0 56px;
}

.ct-shell {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}

.ct-migas {
    margin-bottom: 16px;
}

.ct-head {
    margin-bottom: 20px;
}

.ct-head h1 {
    margin: 0;
    font-size: 28px;
    line-height: 34px;
    font-weight: 600;
    color: var(--ct-tinta);
}

.ct-head p {
    margin: 4px 0 0;
    font-size: 14px;
    line-height: 20px;
    color: var(--ct-muted);
}

/* Composición */
.ct-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 24px;
    align-items: start;
}

.ct-side {
    display: grid;
    gap: 20px;
    position: sticky;
    top: 150px;
}

.ct-card {
    background: #fff;
    border: 1px solid var(--ct-linea);
    border-radius: 12px;
    padding: 24px;
    min-width: 0;
}

.ct-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.ct-card-head h2 {
    margin: 0;
    font-size: 17px;
    line-height: 22px;
    font-weight: 600;
    color: var(--ct-tinta);
}

.ct-card-hint {
    font-size: 12.5px;
    color: var(--ct-muted);
    text-align: right;
}

.ct-alert {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    padding: 14px 16px;
    border: 1px solid #E7C7C2;
    border-radius: 10px;
    background: #FCF3F2;
    color: #8F352C;
    font-size: 13.5px;
    line-height: 19px;
}

.ct-alert i {
    margin-top: 2px;
    color: var(--ct-error);
}

.ct-alert strong {
    display: block;
    margin-bottom: 3px;
    font-size: 14px;
}

.ct-alert ul {
    margin: 0;
    padding-left: 16px;
}

/* Campos */
.ct-grid {
    display: grid;
    gap: 16px 20px;
}

.ct-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ct-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ct-field--full {
    grid-column: 1 / -1;
}

.ct-field label {
    margin-bottom: 6px;
    font-size: 13px;
    line-height: 17px;
    font-weight: 600;
    color: var(--ct-tinta);
}

.ct-input {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1px solid var(--ct-linea);
    border-radius: 8px;
    background: var(--ct-pozo);
    font-family: inherit;
    font-size: 15px;
    color: var(--ct-tinta);
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.ct-textarea {
    height: auto;
    min-height: 160px;
    padding: 12px 14px;
    line-height: 22px;
    resize: vertical;
}

.ct-input::placeholder {
    color: #9AAEB6;
}

.ct-input:focus {
    outline: none;
    border-color: var(--ct-primario);
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(0, 177, 240, .14);
}

.ct-input.is-invalid {
    border-color: var(--ct-error);
}

.ct-help {
    margin-top: 5px;
    font-size: 12px;
    line-height: 16px;
    color: var(--ct-muted);
}

.ct-contador:empty {
    display: none;
}

.ct-error {
    margin-top: 5px;
    font-size: 12px;
    line-height: 16px;
    color: var(--ct-error);
}

.ct-error[hidden] {
    display: none;
}

/* Captcha: el widget de Google mide 304×78 fijo */
.ct-captcha {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    min-height: 78px;
}

/* Acciones */
.ct-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 22px;
    flex-wrap: wrap;
}

.ct-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 48px;
    padding: 0 22px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none !important;
}

.ct-btn-primary {
    background: var(--ct-primario);
    color: #fff;
    min-width: 200px;
}

.ct-btn-primary:hover {
    background: var(--ct-secundario);
    color: #fff;
}

.ct-btn-primary:disabled {
    opacity: .75;
    cursor: progress;
}

.ct-btn-ghost {
    height: 40px;
    padding: 0 14px;
    margin-left: -14px;
    background: transparent;
    color: var(--ct-secundario);
}

.ct-btn-ghost:hover {
    background: rgba(24, 100, 137, .06);
    color: var(--ct-secundario);
}

.ct-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ct-girar .7s linear infinite;
}

.ct-spinner[hidden] {
    display: none;
}

@keyframes ct-girar {
    to {
        transform: rotate(360deg);
    }
}

/* Envío confirmado */
.ct-ok {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 8px 0;
}

.ct-ok-icono {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #E5F3EC;
    color: var(--ct-ok);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ct-ok h2 {
    margin: 0;
    font-size: 19px;
    line-height: 26px;
    font-weight: 600;
    color: var(--ct-tinta);
}

.ct-ok p {
    margin: 4px 0 14px;
    font-size: 14px;
    line-height: 21px;
    color: var(--ct-texto);
    overflow-wrap: anywhere;
}

/* Lateral */
.ct-side .ct-card {
    padding: 20px;
}

.ct-side-title {
    margin: 0 0 12px;
    font-size: 15px;
    line-height: 20px;
    font-weight: 600;
    color: var(--ct-tinta);
}

.ct-lista {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ct-lista li+li {
    border-top: 1px solid #EDF1EE;
}

.ct-canal {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    color: var(--ct-tinta);
    text-decoration: none !important;
}

.ct-canal-icono {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--tu-chip, #eef6fa);
    color: var(--ct-secundario);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .2s, color .2s;
}

a.ct-canal:hover .ct-canal-icono {
    background: var(--ct-primario);
    color: #fff;
}

a.ct-canal:hover {
    color: var(--ct-primario);
}

.ct-canal-texto {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-size: 13.5px;
    line-height: 19px;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.ct-canal-texto small {
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    color: var(--ct-muted);
}

.ct-redes {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ct-redes a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--tu-chip, #eef6fa);
    color: var(--ct-secundario);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, color .2s;
}

.ct-redes a:hover {
    background: var(--ct-primario);
    color: #fff;
}

/* Responsive */
@media (max-width: 991.98px) {
    .ct-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .ct-side {
        position: static;
    }
}

@media (max-width: 575.98px) {
    .ct-page {
        padding: 16px 0 40px;
    }

    .ct-shell {
        padding: 0 16px;
    }

    .ct-head h1 {
        font-size: 24px;
        line-height: 30px;
    }

    .ct-card {
        padding: 18px 16px;
    }

    .ct-card-head {
        flex-direction: column;
        gap: 2px;
    }

    .ct-card-hint {
        text-align: left;
    }

    .ct-grid--2 {
        grid-template-columns: minmax(0, 1fr);
    }

    .ct-btn-primary {
        width: 100%;
    }
}

/* El widget no se achica solo: en pantallas muy angostas se escala para no desbordar la tarjeta */
@media (max-width: 359.98px) {
    .ct-captcha .g-recaptcha {
        transform: scale(.86);
        transform-origin: 0 0;
    }
}