/* HerramientaSEO — checkout / registro (hoja única de producto) */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,700;12..96,800&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root {
    --hs-blue: #0010ef;
    --hs-blue-deep: #0008b8;
    --hs-ink: #070b14;
    --hs-ink-soft: #121a2c;
    --hs-slate: #2f3a4f;
    --hs-muted: #52607a;
    --hs-lime: #ade884;
    --hs-line: #d7dde8;
    --hs-paper: #eef1f7;
    --hs-white: #ffffff;
    --hs-radius: 14px;
    --hs-shadow: 0 22px 50px rgba(7, 11, 20, 0.1);
}

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

html {
    font-size: 16px;
}

body.hs-checkout-page,
body {
    margin: 0;
    min-height: 100vh;
    font-family: 'IBM Plex Sans', system-ui, sans-serif !important;
    font-size: 1.0625rem !important;
    line-height: 1.55 !important;
    color: var(--hs-ink-soft) !important;
    background:
        radial-gradient(900px 420px at 90% -10%, rgba(0, 16, 239, 0.12), transparent 55%),
        radial-gradient(700px 360px at 0% 100%, rgba(173, 232, 132, 0.14), transparent 50%),
        linear-gradient(180deg, #f7f8fc 0%, var(--hs-paper) 100%) !important;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* —— Top bar —— */
.hs-checkout-top {
    background: var(--hs-ink);
    color: #fff;
    padding: 0.95rem clamp(1rem, 3vw, 1.75rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.hs-checkout-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    color: #fff !important;
    text-decoration: none !important;
    font-family: 'Bricolage Grotesque', system-ui, sans-serif !important;
    font-weight: 800 !important;
    font-size: 1.2rem !important;
    letter-spacing: -0.03em;
}

.hs-checkout-brand:hover,
.hs-checkout-brand:focus {
    color: #fff !important;
    text-decoration: none !important;
}

.hs-checkout-brand svg {
    display: block;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
}

.hs-checkout-meta {
    margin: 0;
    font-size: 0.98rem !important;
    color: rgba(255, 255, 255, 0.75) !important;
}

.hs-checkout-meta strong {
    color: var(--hs-lime);
    font-weight: 700;
}

/* —— Shell —— */
.terminal-wrapper {
    max-width: 1120px !important;
    margin: 0 auto 3.5rem !important;
    padding: 1.5rem clamp(1rem, 3vw, 1.5rem) 2rem !important;
    width: 100%;
}

.page-header {
    display: none !important;
}

#order_form.container,
#order_form {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#order_form > h1,
h1.colorprimary {
    font-family: 'Bricolage Grotesque', system-ui, sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: -0.04em !important;
    color: var(--hs-ink) !important;
    font-size: clamp(1.65rem, 3.4vw, 2.2rem) !important;
    line-height: 1.15 !important;
    text-align: left !important;
    margin: 0 0 0.55rem !important;
}

.hs-checkout-lead {
    margin: 0 0 1.75rem;
    color: var(--hs-slate);
    font-size: 1.05rem;
    max-width: 42rem;
}

.hs-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem 0.75rem;
    margin: 0 0 1.75rem;
    padding: 0;
    list-style: none;
}

.hs-trust-row li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.8rem;
    border-radius: 999px;
    background: var(--hs-white);
    border: 1px solid var(--hs-line);
    color: var(--hs-slate);
    font-size: 0.92rem;
    font-weight: 600;
}

.hs-trust-row li::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--hs-blue);
    flex-shrink: 0;
}

/* —— Grid panels —— */
#order_form > .row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -0.65rem;
}

#order_form > .row > [class*='col-'] {
    float: none !important;
    width: 100%;
    padding: 0 0.65rem;
    margin-bottom: 1.25rem;
}

@media (min-width: 992px) {
    #order_form > .row > .col-md-6 {
        width: 50%;
        margin-bottom: 0;
    }
}

.hs-panel {
    background: var(--hs-white);
    border: 1px solid var(--hs-line);
    border-radius: calc(var(--hs-radius) + 4px);
    box-shadow: var(--hs-shadow);
    padding: clamp(1.25rem, 2.5vw, 1.85rem);
    height: 100%;
    overflow: hidden;
}

h3.colorgray,
h3.colorgray.mt40,
h3.colorgray.mb30,
.hs-panel h3 {
    font-family: 'Bricolage Grotesque', system-ui, sans-serif !important;
    letter-spacing: -0.03em !important;
    color: var(--hs-ink) !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    margin: 0 0 1.15rem !important;
    line-height: 1.25 !important;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--hs-line);
}

.hs-panel h3 + h3,
.hs-panel .hs-section-title {
    margin-top: 1.75rem !important;
}

/* —— Fields: stacked (evita desborde de labels en col-md-3) —— */
#order_form.form-horizontal .form-group {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 1rem !important;
}

#order_form.form-horizontal .control-label,
#order_form.form-horizontal label.control-label,
#order_form .form-group > label {
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    text-align: left !important;
    padding: 0 !important;
    margin: 0 0 0.4rem !important;
    font-size: 0.98rem !important;
    font-weight: 600 !important;
    color: var(--hs-ink-soft) !important;
    line-height: 1.35 !important;
    white-space: normal !important;
}

#order_form.form-horizontal .form-group > [class*='col-'] {
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    display: block;
}

.colordanger {
    color: #c62828 !important;
    margin-right: 0.15rem;
}

.form-control,
input.form-control,
select.form-control,
textarea.form-control {
    font-family: 'IBM Plex Sans', system-ui, sans-serif !important;
    font-size: 1.0625rem !important;
    font-weight: 500 !important;
    color: var(--hs-ink) !important;
    border-radius: 12px !important;
    border: 1.5px solid var(--hs-line) !important;
    box-shadow: none !important;
    height: auto !important;
    min-height: 3rem;
    padding: 0.85rem 1rem !important;
    line-height: 1.4 !important;
    background: #fff !important;
    width: 100% !important;
    max-width: 100% !important;
}

.form-control::placeholder {
    color: #8b95a8 !important;
    font-weight: 400 !important;
    opacity: 1;
}

.form-control:focus {
    border-color: var(--hs-blue) !important;
    box-shadow: 0 0 0 4px rgba(0, 16, 239, 0.14) !important;
    outline: none !important;
}

.form-control-static {
    min-height: auto !important;
    padding: 0.35rem 0 !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    color: var(--hs-ink) !important;
    overflow-wrap: anywhere;
}

.input-group {
    width: 100%;
    display: flex;
}

.input-group .form-control {
    border-radius: 12px 0 0 12px !important;
}

.input-group-addon {
    background: #f4f6fb !important;
    border: 1.5px solid var(--hs-line) !important;
    border-left: 0 !important;
    border-radius: 0 12px 12px 0 !important;
    color: var(--hs-muted) !important;
    min-width: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Cupón: addon a la izquierda */
.form-group .input-group .input-group-addon:first-child {
    border-radius: 12px 0 0 12px !important;
    border-left: 1.5px solid var(--hs-line) !important;
    border-right: 0 !important;
}

.form-group .input-group .input-group-addon:first-child + .form-control {
    border-radius: 0 12px 12px 0 !important;
}

/* —— Alerts / trust —— */
.alert {
    border-radius: 12px !important;
    font-size: 1rem !important;
    line-height: 1.55 !important;
    padding: 1rem 1.1rem !important;
    margin-bottom: 1rem !important;
    border: 1px solid transparent;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.alert-info,
.recurring-alert {
    background: #eef1ff !important;
    border-color: #c9d0ff !important;
    color: var(--hs-ink-soft) !important;
}

.alert.font13,
.font13 {
    font-size: 1rem !important;
}

.font14 {
    font-size: 1.02rem !important;
}

.hs-stripe-box {
    background: linear-gradient(135deg, #070b14 0%, #121a3a 55%, #0010ef 160%);
    color: #fff;
    border-radius: var(--hs-radius);
    padding: 1.15rem 1.2rem;
    margin-bottom: 1.15rem;
    border: 0;
}

.hs-stripe-box strong {
    color: #fff;
}

.hs-stripe-box p {
    margin: 0.35rem 0 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.98rem;
    line-height: 1.5;
}

.hs-pay-actions {
    margin-top: 0.5rem;
}

.hs-pay-actions .alignright,
.alignright {
    text-align: left !important;
}

.submit-button.btn-primary,
.btn-primary.submit-button,
.btn-primary,
.btn-primary:focus {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    width: 100%;
    background: var(--hs-blue) !important;
    border-color: var(--hs-blue) !important;
    border-radius: 12px !important;
    font-family: 'IBM Plex Sans', system-ui, sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.08rem !important;
    padding: 1rem 1.25rem !important;
    min-height: 3.35rem;
    line-height: 1.25 !important;
    box-shadow: 0 12px 28px rgba(0, 16, 239, 0.28);
    letter-spacing: -0.01em;
    white-space: normal !important;
}

.btn-primary:hover {
    background: var(--hs-blue-deep) !important;
    border-color: var(--hs-blue-deep) !important;
}

.submit-button .total {
    display: none;
    order: 2;
    width: 100%;
    font-size: 0.92rem;
    font-weight: 600;
    opacity: 0.92;
}

.submit-button .total.show,
.submit-button .total[style*='block'] {
    display: block !important;
}

.hs-checkout-foot {
    margin-top: 1.5rem;
    padding: 1rem 0 0;
    border-top: 1px solid var(--hs-line);
    color: var(--hs-muted);
    font-size: 0.95rem;
    line-height: 1.5;
}

.hs-checkout-foot strong {
    color: var(--hs-ink-soft);
}

.hs-checkout-secure {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    margin-top: 0.85rem;
    color: var(--hs-slate);
    font-size: 0.92rem;
    font-weight: 600;
}

.hs-checkout-secure span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

hr {
    border-color: var(--hs-line) !important;
    margin: 1.25rem 0 !important;
}

.has-error .form-control,
.form-group.has-error .form-control {
    border-color: #d32f2f !important;
}

label.error,
.help-block {
    color: #c62828 !important;
    font-size: 0.92rem !important;
    font-weight: 500;
    margin-top: 0.35rem;
}

#out {
    margin-top: 0.4rem;
    font-size: 0.95rem;
}

.mt40,
.mt40neg,
.mt10neg {
    margin-top: 0 !important;
}

.mb30,
.mb40,
.mb20 {
    margin-bottom: 0 !important;
}

.mb20.submit-button {
    margin-bottom: 0 !important;
}

@media (max-width: 991px) {
    .hs-checkout-top {
        justify-content: center;
        text-align: center;
    }

    .hs-checkout-meta {
        width: 100%;
        text-align: center;
    }

    #order_form > h1,
    h1.colorprimary {
        text-align: center !important;
    }

    .hs-checkout-lead {
        text-align: center;
        margin-inline: auto;
    }

    .hs-trust-row {
        justify-content: center;
    }
}

@media (max-width: 560px) {
    .hs-trust-row li {
        width: 100%;
        justify-content: center;
    }

    .submit-button.btn-primary {
        font-size: 1.02rem !important;
    }
}

/* Admin leftovers (no romper admin.php si reutiliza la hoja) */
.admin-header,
.admin-footer,
.config-left,
.config-right,
.notification-header {
    /* estilos mínimos si se reutiliza */
}