/* ==========================================================================
   Landing de /request (CT Info Global)
   Todo cuelga de .ct-landing: no se toca ni un estilo del resto del sitio.
   La tipografia se hereda del tema para no desentonar con la web actual.
   ========================================================================== */

/* Esta pagina lleva su propia barra y su propio pie: la cabecera y el pie del
   sitio se ocultan. Solo afecta a /request porque esta hoja no se carga en
   ninguna otra pagina (no entra en web.assets_frontend). */
#wrapwrap > header,
#wrapwrap > footer { display: none !important; }
#wrapwrap > main { padding: 0; }

/* Las variables van en :root y no en .ct-landing: en las paginas de estado la barra
   superior es hermana de #wrap, no hija, y si las variables colgaran de .ct-landing esa
   barra se quedaria sin ellas (salia en blanco). Esta hoja solo se carga en /request y en
   sus paginas de destino, asi que tocar :root aqui no afecta al resto del sitio. */
:root {
    --ct-bg: #070b12;
    --ct-panel: rgba(255, 255, 255, .045);
    --ct-panel-2: rgba(255, 255, 255, .025);
    --ct-line: rgba(255, 255, 255, .11);
    --ct-line-soft: rgba(255, 255, 255, .06);
    --ct-text: #eef2f8;
    --ct-dim: #94a2b8;
    --ct-accent: #3d92ff;          /* hermano del #007bff del sitio, legible en oscuro */
    --ct-accent-soft: #7db8ff;
    --ct-accent-deep: #0a6ae0;
}

/* El oscuro tiene que llegar hasta abajo aunque la pagina sea corta (las de error lo son). */
body {
    background-color: var(--ct-bg);
    color: var(--ct-text);
}

#wrapwrap {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--ct-bg);
}

#wrapwrap > main {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

/* Solo el bloque de contenido crece. La barra superior es hermana suya dentro de <main>,
   y si le tocara el flex:1 se estiraría ella (dejaba un hueco enorme bajo la marca). */
#wrapwrap > main > .ct-topbar { flex: 0 0 auto; }
#wrapwrap > main > .ct-landing { flex: 1 0 auto; }

.ct-landing {
    position: relative;
    padding: 0 0 8px;
    color: var(--ct-text);
    background-color: var(--ct-bg);
    background-image:
        radial-gradient(90% 46% at 50% -6%, rgba(61, 146, 255, .20) 0%, rgba(61, 146, 255, .05) 42%, rgba(7, 11, 18, 0) 72%),
        radial-gradient(70% 40% at 82% 24%, rgba(61, 146, 255, .10) 0%, rgba(7, 11, 18, 0) 65%);
    background-repeat: no-repeat;
    line-height: 1.55;
    overflow-x: hidden;
}

.ct-landing h1,
.ct-landing h2,
.ct-landing h3 { color: var(--ct-text); }

.ct-landing a { color: var(--ct-accent-soft); }
.ct-landing a:hover { color: #a8d0ff; }

/* ===== Cabecera del hero ================================================= */

.ct-hero { padding-top: 34px; padding-bottom: 8px; }

.ct-hero__head {
    max-width: 720px;
    margin: 0 auto 38px;
    text-align: center;
}

/* Chip: etiqueta solida + texto, en vez del tipico pill con puntito */
.ct-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 20px;
    padding: 4px 14px 4px 4px;
    border: 1px solid var(--ct-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, .03);
    font-size: 12.5px;
    color: var(--ct-dim);
}

.ct-chip__tag {
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--ct-accent);
    color: #04101f;
    font-weight: 800;
    font-size: 11.5px;
    letter-spacing: .3px;
}

.ct-hero__title {
    margin: 0 0 16px;
    font-size: 50px;
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -1.4px;
}

.ct-hero__title span {
    color: var(--ct-accent);
    display: inline-block;
}

.ct-hero__lead {
    max-width: 560px;
    margin: 0 auto 26px;
    font-size: 17px;
    color: var(--ct-dim);
}

.ct-hero__note {
    margin: 14px 0 0;
    font-size: 12.5px;
    color: var(--ct-dim);
}

/* ===== Llamada a la accion =============================================== */

.ct-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 14px 28px;
    border: 0;
    border-radius: 999px;
    background: var(--ct-accent);
    color: #04101f !important;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none !important;
    cursor: pointer;
    transition: background .15s ease, transform .08s ease, box-shadow .15s ease;
    box-shadow: 0 10px 26px rgba(61, 146, 255, .22);
}

.ct-cta:hover { background: var(--ct-accent-soft); color: #04101f !important; }
.ct-cta:active { transform: translateY(1px); }
.ct-cta:focus-visible { outline: 3px solid rgba(125, 184, 255, .6); outline-offset: 2px; }
.ct-cta svg { flex: 0 0 auto; }

.ct-cta--submit { width: 100%; padding: 15px 28px; font-size: 16px; }

/* En movil el formulario esta debajo: el CTA del hero solo estorba */
@media (max-width: 991px) {
    .ct-cta--hero { display: none; }
    .ct-hero__note { margin-top: 0; }
}

/* ===== Rejilla del hero: maqueta + formulario ============================ */

.ct-hero__split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
    gap: 40px;
    align-items: start;
}

@media (max-width: 991px) {
    .ct-hero { padding-top: 22px; }
    .ct-hero__split { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .ct-hero__title { font-size: 34px; letter-spacing: -.8px; }
    .ct-hero__lead { font-size: 15.5px; }
}

/* ===== Maqueta del movil ================================================= */

.ct-preview { display: flex; flex-direction: column; align-items: center; }

.ct-phone {
    width: 300px;
    max-width: 100%;
    padding: 5px;
    border-radius: 52px;
    background: #16181d;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .55), inset 0 0 0 2px #2b2e35;
    transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .3, 1);
}

/* La maqueta se ve siempre; el JS "arma" la entrada solo si puede animarla,
   asi que sin JS no queda un hueco vacio. */
.ct-preview.is-armed .ct-phone { opacity: 0; transform: translateY(18px) scale(.985); }
.ct-preview.is-armed.is-in .ct-phone { opacity: 1; transform: none; }

.ct-phone__screen {
    position: relative;
    height: 604px;
    overflow: hidden;
    border-radius: 47px;
    background: #f4f5f7;
    color: #1f2430;
    font-size: 12px;
}

.ct-phone__island {
    position: absolute;
    top: 10px;
    left: 50%;
    z-index: 6;
    width: 84px;
    height: 25px;
    border-radius: 999px;
    background: #000;
    transform: translateX(-50%);
}

/* Barra de marca, igual que la navbar clara de la web */
.ct-shop__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 46px 16px 11px;
    background: #f8f9fa;
    border-bottom: 1px solid #e6e8ec;
    color: #212529;
}

.ct-shop__brand { font-size: 14px; font-weight: 700; letter-spacing: .2px; }
.ct-shop__navicons { display: inline-flex; align-items: center; gap: 11px; color: #4a5160; }

.ct-shop__search {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 11px 14px 4px;
    padding: 7px 12px;
    border: 1px solid #e0e3e9;
    border-radius: 999px;
    background: #fff;
    color: #979eab;
    font-size: 11px;
}

/* Carrusel de equipaciones */
.ct-rail { position: relative; overflow: hidden; padding: 8px 0 10px; }

.ct-rail__track {
    display: flex;
    gap: 10px;
    width: max-content;
    padding: 0 14px;
    animation: ct-slide 34s linear infinite;
}

.ct-phone:hover .ct-rail__track { animation-play-state: paused; }

@keyframes ct-slide {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

.ct-kit { width: 116px; flex: 0 0 auto; }

.ct-kit__img {
    display: block;
    height: 94px;
    margin-bottom: 7px;
    padding: 7px 10px;
    border: 1px solid #e6e8ec;
    border-radius: 9px;
    background: #fff;
    overflow: hidden;   /* el desenfoque se sale del elemento: hay que recortarlo */
}

/* El desenfoque va en el svg, no en la tarjeta, para que el marco quede nitido */
.ct-kit__img svg { display: block; height: 100%; filter: blur(3.2px); }

/* Nombre y precio: barras veladas, no texto real (el catalogo es privado) */
.ct-kit__name,
.ct-kit__price {
    display: block;
    border-radius: 3px;
    filter: blur(2.6px);
}

.ct-kit__name {
    height: 7px;
    margin-bottom: 5px;
    background: linear-gradient(90deg, #2563c9 0 68%, transparent 68%);
    opacity: .7;
}

.ct-kit__price {
    height: 8px;
    width: 42%;
    background: #10151f;
    opacity: .62;
}

.ct-rail.is-loading .ct-rail__track { opacity: .3; transition: opacity .2s ease; }

.ct-rail.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    border: 2px solid #ccd6e6;
    border-top-color: #2f7ae5;
    border-radius: 50%;
    animation: ct-spin .6s linear infinite;
}

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

/* Listado de categorias, como el de la tienda */
.ct-shop__cats { padding: 4px 12px 0; }

.ct-shop__cat {
    display: block;
    margin-bottom: 2px;
    padding: 6px 10px;
    border-radius: 6px;
    color: #2563c9;
    font-size: 10.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.ct-shop__cat:hover { background: #eaf1fd; }
.ct-shop__cat.is-active { background: #2f7ae5; color: #fff; }

/* Pestana del chat de soporte, igual que el livechat real */
.ct-shop__chat {
    position: absolute;
    right: 14px;
    bottom: 12px;
    padding: 8px 12px;
    border: 1px solid #505050;
    border-radius: 6px;
    background: rgba(60, 60, 60, .82);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

.ct-preview__note {
    margin: 16px 0 0;
    font-size: 12.5px;
    color: var(--ct-dim);
    text-align: center;
}

.ct-preview__note b { color: var(--ct-text); font-weight: 600; }

@media (max-width: 991px) {
    .ct-preview { order: 2; }
    .ct-formcol { order: 1; }
    .ct-phone { width: 272px; }
}

/* ===== Tarjeta del formulario =========================================== */

.ct-formcard {
    position: relative;
    border: 1px solid var(--ct-line);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .025));
    box-shadow: 0 24px 60px rgba(0, 0, 0, .40);
    scroll-margin-top: 24px;
}

.ct-formcard__body { padding: 28px 26px 30px; }

.ct-formcard__title {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.4px;
    text-align: left;
}

.ct-formcard__sub {
    margin: 0 0 22px;
    font-size: 14px;
    color: var(--ct-dim);
    text-align: left;
}

.ct-formcard .form-group { margin-bottom: 16px; }

.ct-formcard label,
.ct-formcard .form-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ct-text);
}

.ct-formcard .form-control {
    height: auto;
    padding: 11px 14px;
    border: 1px solid var(--ct-line);
    border-radius: 10px;
    background-color: rgba(3, 7, 14, .55);
    color: var(--ct-text);
    font-size: 15px;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.ct-formcard .form-control::placeholder { color: #6d7b90; }

.ct-formcard .form-control:focus {
    border-color: var(--ct-accent);
    background-color: rgba(3, 7, 14, .75);
    color: var(--ct-text);
    box-shadow: 0 0 0 3px rgba(61, 146, 255, .22);
}

.ct-formcard select.form-control {
    padding-right: 38px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2394a2b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m4 6 4 4 4-4'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 13px center;
    background-size: 15px 15px;
}

/* El desplegable nativo se pinta con los colores del sistema: legible siempre */
.ct-formcard select.form-control option { background: #fff; color: #10151f; }

.ct-formcard .form-text { margin-top: 6px; font-size: 12px; color: var(--ct-dim) !important; }

.ct-formcard .form-check { padding-left: 26px; }
.ct-formcard .form-check-input { margin-left: -26px; margin-top: .25rem; accent-color: var(--ct-accent); }

.ct-formcard .form-check-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--ct-text);
    cursor: pointer;
}

/* Aviso de Telegram (le hemos quitado los estilos en linea en la herencia) */
.ct-note {
    margin: 22px 0 26px;
    padding: 16px 18px;
    border: 1px solid rgba(61, 146, 255, .28);
    border-left: 3px solid var(--ct-accent);
    border-radius: 12px;
    background: rgba(61, 146, 255, .07);
    font-size: 13.5px;
    color: var(--ct-dim);
}

.ct-note__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }

.ct-note__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: rgba(61, 146, 255, .16);
    color: var(--ct-accent-soft);
}

.ct-note__title { font-size: 14.5px; font-weight: 700; color: var(--ct-text); }

.ct-note__badge {
    margin-left: auto;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(61, 146, 255, .14);
    color: var(--ct-accent-soft);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.ct-note__text { margin: 0 0 14px; font-size: 13.5px; color: var(--ct-dim); }

.ct-note__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid rgba(61, 146, 255, .4);
    border-radius: 999px;
    background: rgba(61, 146, 255, .12);
    color: var(--ct-accent-soft) !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    transition: background .15s ease, border-color .15s ease;
}

.ct-note__link:hover { background: rgba(61, 146, 255, .2); border-color: var(--ct-accent); }

.ct-note .form-check {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

/* Bloque del captcha: plegado con max-height (no display:none, o hCaptcha
   mide el widget a cero); el JS le quita .is-collapsed cuando toca. */
.ct-captcha {
    max-height: 300px;
    margin-bottom: 22px;
    text-align: center;
    overflow: hidden;
    transition: max-height .35s ease, opacity .3s ease, margin-bottom .35s ease;
}

.ct-captcha.is-collapsed { max-height: 0; margin-bottom: 0; opacity: 0; pointer-events: none; }

.ct-captcha label { display: block; margin-bottom: 10px; }
.ct-formcard .h-captcha { display: flex; justify-content: center; min-height: 78px; }
.ct-formcard .h-captcha iframe { max-width: 100%; }

/* ===== Barra superior y pie propios ===================================== */

.ct-topbar { padding: 18px 0; border-bottom: 1px solid var(--ct-line-soft); }

.ct-topbar__inner,
.ct-foot__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.ct-topbar__brand,
.ct-foot__brand {
    color: var(--ct-text) !important;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .4px;
    text-decoration: none !important;
}

.ct-topbar__brand span,
.ct-foot__brand span { color: var(--ct-dim); font-weight: 500; }

.ct-topbar__shop {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border: 1px solid var(--ct-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, .03);
    color: var(--ct-text) !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.ct-topbar__shop:hover {
    border-color: var(--ct-accent);
    background: rgba(61, 146, 255, .12);
    color: var(--ct-accent-soft) !important;
}

.ct-topbar__shop svg { transition: transform .15s ease; }
.ct-topbar__shop:hover svg { transform: translateX(2px); }

.ct-foot { padding: 30px 0 34px; border-top: 1px solid var(--ct-line-soft); }
.ct-foot__inner { justify-content: center; }

/* ===== Equipo secundario (sustituye al confirm() del navegador) ========= */

.ct-addteam {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 8px 14px;
    border: 1px dashed var(--ct-line);
    border-radius: 999px;
    background: transparent;
    color: var(--ct-dim);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.ct-addteam:hover {
    border-color: var(--ct-accent);
    background: rgba(61, 146, 255, .08);
    color: var(--ct-accent-soft);
}

.ct-addteam:focus-visible { outline: 2px solid rgba(125, 184, 255, .6); outline-offset: 2px; }

.ct-addteam__sign {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: rgba(61, 146, 255, .18);
    color: var(--ct-accent-soft);
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
}

.ct-addteam--drop { margin-top: 8px; border-style: solid; }
.ct-addteam--drop:hover { border-color: #e06c6c; background: rgba(224, 108, 108, .1); color: #ffb4b4; }
.ct-addteam--drop .ct-addteam__sign { background: rgba(255, 255, 255, .08); color: var(--ct-dim); }

.ct-secondary {
    /* el div viene con mb-5 de la plantilla de segment_partner */
    margin-bottom: 16px !important;
    animation: ct-slide-down .25s ease;
}

@keyframes ct-slide-down {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

/* ===== Secciones inferiores ============================================= */

.ct-section { padding: 68px 0; border-top: 1px solid var(--ct-line-soft); }
.ct-section--last { border-top: 0; padding-bottom: 76px; }

.ct-section__head { max-width: 620px; margin: 0 auto 42px; text-align: center; }

.ct-kicker {
    margin: 0 0 10px;
    color: var(--ct-accent);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
}

.ct-section__title {
    margin: 0 0 12px;
    font-size: 34px;
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.9px;
}

.ct-section__lead { margin: 0; font-size: 16px; color: var(--ct-dim); }

/* Beneficios */
.ct-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

.ct-card {
    position: relative;
    padding: 26px 24px 24px;
    border: 1px solid var(--ct-line);
    border-radius: 16px;
    background: var(--ct-panel);
    transition: border-color .18s ease, transform .18s ease, background .18s ease;
}

.ct-card::before {
    content: "";
    position: absolute;
    top: 26px;
    left: 0;
    width: 3px;
    height: 34px;
    border-radius: 0 3px 3px 0;
    background: var(--ct-accent);
    opacity: .75;
}

.ct-card:hover {
    border-color: rgba(61, 146, 255, .42);
    background: rgba(61, 146, 255, .06);
    transform: translateY(-3px);
}

.ct-card__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 16px;
    border-radius: 12px;
    background: rgba(61, 146, 255, .12);
    color: var(--ct-accent-soft);
}

.ct-card h3 { margin: 0 0 8px; font-size: 17px; font-weight: 700; }
.ct-card p { margin: 0; font-size: 14px; color: var(--ct-dim); }

/* Pasos */
.ct-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ct-step { position: relative; padding-top: 4px; }

.ct-step__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-bottom: 14px;
    border: 1px solid rgba(61, 146, 255, .45);
    border-radius: 50%;
    background: rgba(61, 146, 255, .12);
    color: var(--ct-accent-soft);
    font-size: 15px;
    font-weight: 800;
}

.ct-step h3 { margin: 0 0 6px; font-size: 17px; font-weight: 700; }
.ct-step p { margin: 0; font-size: 14px; color: var(--ct-dim); }

/* Cifras: una sola barra con separadores, no cuatro tarjetas iguales */
.ct-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 48px;
    border: 1px solid var(--ct-line);
    border-radius: 16px;
    background: linear-gradient(180deg, var(--ct-panel), var(--ct-panel-2));
    overflow: hidden;
}

.ct-stat {
    padding: 24px 20px;
    border-left: 1px solid var(--ct-line-soft);
    text-align: center;
}

.ct-stat:first-child { border-left: 0; }

.ct-stat__num {
    display: block;
    margin-bottom: 4px;
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -.8px;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.ct-stat__label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--ct-dim);
    letter-spacing: .2px;
}

/* Cierre */
.ct-final {
    padding: 52px 32px;
    border: 1px solid var(--ct-line);
    border-radius: 22px;
    background:
        radial-gradient(80% 120% at 50% 0%, rgba(61, 146, 255, .14) 0%, rgba(255, 255, 255, 0) 70%),
        linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
    text-align: center;
}

.ct-final h2 { margin: 0 0 12px; font-size: 34px; font-weight: 800; letter-spacing: -.9px; }
.ct-final p { max-width: 460px; margin: 0 auto 24px; font-size: 16px; color: var(--ct-dim); }

@media (max-width: 991px) {
    .ct-section { padding: 52px 0; }
    .ct-section__title, .ct-final h2 { font-size: 26px; }
    .ct-cards, .ct-steps { grid-template-columns: minmax(0, 1fr); }
    .ct-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ct-stat:nth-child(odd) { border-left: 0; }
    .ct-stat:nth-child(n+3) { border-top: 1px solid var(--ct-line-soft); }
    .ct-final { padding: 40px 22px; }
}

@media (max-width: 420px) {
    .ct-formcard__body { padding: 22px 18px 24px; }
    .ct-stat__num { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .ct-landing *,
    .ct-landing *::before,
    .ct-landing *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .ct-preview.is-armed .ct-phone { opacity: 1; transform: none; }
}

/* ===== Páginas de estado (gracias y errores) ============================
   Las plantillas originales (ctinfo_users_management y segment_partner) montan
   un div.alert de Bootstrap con h3, párrafos y botones .btn-primary. Aquí no se
   toca ese HTML: se le da forma desde fuera. Así, si algún día cambian el texto,
   el estilo sigue funcionando.
   ====================================================================== */

/* Estas páginas tienen poco contenido: se centran en el hueco que queda bajo la barra,
   en vez de quedarse arriba con medio metro de vacío debajo. */
.ct-status {
    display: flex;
    padding: 40px 0 56px;
}

/* margin:auto en vez de align-items:center: centra en los dos ejes igual, pero si el
   contenido llega a ser más alto que la ventana NO recorta la parte de arriba, que es lo
   que pasa con align-items:center. */
.ct-status .container {
    width: 100%;
    max-width: 560px;
    margin: auto;
    padding-top: 0;
}

.ct-status h1 {
    margin: 0 0 26px;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.9px;
    text-align: center;
}

.ct-status .oe_structure { display: none; }

/* El aviso pasa a ser la tarjeta de la página */
.ct-status .alert {
    position: relative;
    margin: 0;
    padding: 32px 28px 28px;
    border: 1px solid var(--ct-line);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .022));
    box-shadow: 0 24px 60px rgba(0, 0, 0, .40);
    color: var(--ct-dim);
    font-size: 15px;
    text-align: center;
}

.ct-status .alert h3 {
    margin: 0 0 14px;
    font-size: 20px;
    font-weight: 700;
    color: var(--ct-text);
    letter-spacing: -.3px;
}

.ct-status .alert p { margin: 0 0 12px; }
.ct-status .alert p:last-child { margin-bottom: 0; }
.ct-status .alert a:not(.btn) { color: var(--ct-accent-soft); font-weight: 600; }

/* La marca de color de cada tipo, arriba de la tarjeta */
.ct-status .alert::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 18px 18px 0 0;
    background: var(--ct-accent);
}

.ct-status--ok .alert::before { background: #34d399; }
.ct-status--warn .alert::before { background: #fbbf24; }
.ct-status--err .alert::before { background: #f87171; }

/* El icono: círculo con el signo, dibujado en CSS (sin imágenes ni fuentes extra) */
.ct-status .alert::after {
    content: "";
    position: absolute;
    top: -25px;
    left: 50%;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    transform: translateX(-50%);
    background: var(--ct-bg) center / 24px 24px no-repeat;
    box-shadow: inset 0 0 0 1px var(--ct-line);
}

.ct-status--ok .alert::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334d399' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m4 12.5 5.5 5.5L20 7'/%3e%3c/svg%3e");
}
.ct-status--warn .alert::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fbbf24' stroke-width='2.4' stroke-linecap='round'%3e%3cpath d='M12 6v8M12 18.2v.2'/%3e%3c/svg%3e");
}
.ct-status--err .alert::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f87171' stroke-width='2.4' stroke-linecap='round'%3e%3cpath d='M7 7l10 10M17 7 7 17'/%3e%3c/svg%3e");
}
.ct-status--info .alert::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237db8ff' stroke-width='2.4' stroke-linecap='round'%3e%3cpath d='M12 11v7M12 6.8v.2'/%3e%3c/svg%3e");
}

/* Margen para que el icono no pise el texto */
.ct-status .alert { margin-top: 38px; }

/* Los botones de esas plantillas son .btn.btn-primary dentro de un <a> */
.ct-status .btn-primary,
.ct-status .btn.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 16px 6px 0;
    padding: 12px 26px;
    border: 0 !important;
    border-radius: 999px;
    background: var(--ct-accent) !important;
    color: #04101f !important;
    font-size: 14.5px;
    font-weight: 700;
    box-shadow: 0 10px 26px rgba(61, 146, 255, .22);
    transition: background .15s ease, transform .08s ease;
}

.ct-status .btn-primary:hover { background: var(--ct-accent-soft) !important; }
.ct-status .btn-primary:active { transform: translateY(1px); }

/* Ese botón de cerrar suelto que arrastran algunas plantillas no pinta nada aquí */
.ct-status .close { display: none; }

@media (max-width: 575px) {
    .ct-status { padding: 24px 0 36px; }
    .ct-status h1 { font-size: 23px; margin-bottom: 20px; }
    .ct-status .alert { padding: 30px 18px 24px; font-size: 14.5px; }
    .ct-status .alert h3 { font-size: 18px; }
    .ct-status .btn-primary,
    .ct-status .btn.btn-primary { display: flex; width: 100%; margin: 12px 0 0; }
}