/* =============================================================================
   CendanBridge — hoja de estilo de la web publica
   =============================================================================

   Es deliberadamente independiente de app.css y no depende de Bootstrap ni de
   ninguna tipografia remota. Motivo: estas paginas se miden por lo rapido que
   pintan. Cada hoja externa es una peticion que bloquea el pintado, y la fuente
   de iconos de Bootstrap por si sola pesa mas que todo este archivo. Con la
   pila de fuentes del sistema el texto aparece en el primer fotograma, sin el
   parpadeo de la fuente que llega tarde.

   La paleta es la misma de app.css (muestreada del logotipo) para que la
   portada y la aplicacion no parezcan dos productos distintos.
   ============================================================================= */

:root {
    --navy: #071322;
    --navy-soft: #12243a;
    --gold: #c89040;
    --gold-bright: #f0c070;
    --gold-deep: #986020;
    --ink: #1e293b;
    --ink-soft: #52627a;
    --line: #e2e8f0;
    --paper: #ffffff;
    --paper-alt: #f6f8fb;
    --shell: 1140px;
    --radius: 14px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 { line-height: 1.2; letter-spacing: -0.015em; margin: 0 0 .6rem; }
p { margin: 0 0 1rem; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: var(--gold-deep); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--navy); }

/* El anillo de foco es visible en todo el sitio y nunca se elimina: es el unico
   indicador de posicion que tiene quien navega con teclado. */
:focus-visible {
    outline: 3px solid var(--gold-deep);
    outline-offset: 2px;
    border-radius: 4px;
}

.cb-shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 1.25rem; }
.cb-shell-narrow { max-width: 780px; }

.cb-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--gold-bright);
    color: var(--navy);
    padding: .75rem 1.25rem;
    font-weight: 700;
    z-index: 100;
}
.cb-skip:focus { left: 0; }

.cb-icon { width: 24px; height: 24px; flex: none; }
.cb-icon-sm { width: 18px; height: 18px; }
.cb-icon-gold { color: var(--gold-bright); }

/* --- Botones ------------------------------------------------------------- */
.cb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .6rem 1.1rem;
    border-radius: 9px;
    border: 1px solid transparent;
    font-size: .95rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.cb-btn-lg { padding: .85rem 1.6rem; font-size: 1.02rem; }

.cb-btn-gold { background: var(--gold-bright); color: var(--navy); }
.cb-btn-gold:hover { background: #fbd894; color: var(--navy); }

.cb-btn-outline { border-color: rgba(255,255,255,.4); color: #fff; }
.cb-btn-outline:hover { background: rgba(255,255,255,.12); color: #fff; }

.cb-btn-ghost { color: rgba(255,255,255,.85); }
.cb-btn-ghost:hover { background: rgba(255,255,255,.1); color: #fff; }

.cb-textlink { font-weight: 600; color: var(--gold-deep); }
.cb-textlink:hover { color: var(--navy); }

/* --- Cabecera ------------------------------------------------------------ */
.cb-header { background: var(--navy); color: #fff; position: relative; z-index: 20; }
.cb-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 64px; }

.cb-brand { display: inline-flex; align-items: center; gap: .55rem; color: #fff; text-decoration: none; font-weight: 700; }
/* La marca va sobre fondo navy y necesita su propio :hover. Sin esta linea manda la regla general
   `a:hover { color: var(--navy) }`, que la pinta del MISMO color que la barra: el rotulo no se
   oscurece, desaparece. */
.cb-brand:hover, .cb-brand:focus-visible { color: #fff; }
.cb-brand:hover .cb-brand-mark, .cb-brand:hover .cb-brand-logo { transform: scale(1.04); }
.cb-brand-mark { width: 34px; height: 34px; object-fit: contain; transition: transform .15s ease; }
/* El logotipo con el rotulo dentro. Manda la ALTURA y el ancho lo pone la proporcion del archivo:
   asi la barra no cambia de alto si algun dia se recorta el arte de otro modo. 44 px dentro de una
   barra de 64 dejan 10 de aire arriba y abajo, que es lo justo para que el rotulo se lea. */
.cb-brand-logo { height: 44px; width: auto; display: block; transition: transform .15s ease; }
@media (max-width: 420px) { .cb-brand-logo { height: 38px; } }

.cb-menu > summary { list-style: none; cursor: pointer; }
.cb-menu > summary::-webkit-details-marker { display: none; }

.cb-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 9px;
    border: 1px solid rgba(255,255,255,.22);
}
.cb-burger, .cb-burger::before, .cb-burger::after {
    display: block;
    width: 18px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
}
.cb-burger { position: relative; }
.cb-burger::before, .cb-burger::after { content: ""; position: absolute; left: 0; }
.cb-burger::before { top: -6px; }
.cb-burger::after { top: 6px; }

/* El panel es HERMANO del <details>, no su hijo: ver el comentario de PublicNav.razor. Se muestra
   con el combinador ~, que funciona igual en todos los navegadores y no depende de como cada uno
   decida ocultar el contenido de un <details> cerrado. */
.cb-menu-panel { display: none; }
.cb-menu[open] ~ .cb-menu-panel {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--navy-soft);
    padding: 1rem 1.25rem 1.35rem;
    border-top: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 18px 30px rgba(0,0,0,.35);
}

.cb-nav-links { display: flex; flex-direction: column; gap: .15rem; margin-bottom: 1rem; }
.cb-nav-link {
    display: block;
    padding: .6rem .25rem;
    color: rgba(255,255,255,.82);
    text-decoration: none;
    font-weight: 500;
}
.cb-nav-link:hover { color: #fff; }
.cb-nav-link-active { color: var(--gold-bright); }

/* En el menu desplegable los dos botones van a lo ancho. Sin borde, "Iniciar sesion" quedaba como
   un texto centrado en medio de enlaces alineados a la izquierda y no parecia parte del par. */
.cb-header-actions { display: flex; flex-direction: column; gap: .6rem; margin-top: .35rem; }
.cb-header-actions .cb-btn-ghost { border-color: rgba(255,255,255,.28); }

.cb-lang { position: relative; }
/* Llevaba solo texto suelto y no se leia como un control: el usuario no encontraba donde cambiar
   de idioma. Con borde, fondo y una punta de flecha se reconoce como desplegable de un vistazo. */
.cb-lang > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .42rem .7rem;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 8px;
    color: rgba(255,255,255,.92);
    font-size: .9rem;
    font-weight: 500;
    transition: background-color .15s ease, border-color .15s ease;
}
.cb-lang > summary:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.45); }
.cb-lang > summary::-webkit-details-marker { display: none; }
.cb-lang > summary::after {
    content: "";
    width: 7px;
    height: 7px;
    margin-left: .1rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .2s ease;
}
.cb-lang[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.cb-lang-list { display: flex; flex-wrap: wrap; gap: .35rem; padding: .35rem 0 .2rem; }
.cb-lang-list a {
    display: block;
    padding: .35rem .7rem;
    border-radius: 7px;
    border: 1px solid rgba(255,255,255,.18);
    color: rgba(255,255,255,.85);
    text-decoration: none;
    font-size: .88rem;
}
.cb-lang-list a:hover { background: rgba(255,255,255,.12); color: #fff; }
.cb-lang-list a[aria-current="true"] { border-color: var(--gold); color: var(--gold-bright); }

/* En escritorio no hay nada que desplegar: el menu ES la barra, asi que el boton desaparece
   entero y el panel se muestra siempre. */
@media (min-width: 992px) {
    .cb-menu { display: none; }
    .cb-menu-panel,
    .cb-menu[open] ~ .cb-menu-panel {
        display: flex;
        align-items: center;
        gap: 1.5rem;
        position: static;
        background: none;
        border: 0;
        padding: 0;
        box-shadow: none;
        flex: 1;
        justify-content: space-between;
        margin-left: 2rem;
    }
    .cb-nav-links { flex-direction: row; gap: .35rem; margin: 0; }
    .cb-nav-link { padding: .5rem .8rem; border-radius: 8px; font-size: .93rem; }
    .cb-nav-link:hover { background: rgba(255,255,255,.09); }
    .cb-header-actions { flex-direction: row; align-items: center; gap: .5rem; margin-top: 0; }
    .cb-header-actions .cb-btn-ghost { border-color: transparent; }
    .cb-lang-list {
        position: absolute;
        right: 0;
        top: calc(100% + .4rem);
        flex-direction: column;
        flex-wrap: nowrap;
        min-width: 150px;
        background: var(--navy-soft);
        border: 1px solid rgba(255,255,255,.14);
        border-radius: 10px;
        padding: .4rem;
        box-shadow: 0 12px 30px rgba(0,0,0,.35);
        z-index: 30;
    }
    .cb-lang-list a { border: 0; }
}

/* --- Portada: cabecera principal ----------------------------------------- */
.cb-hero {
    background: var(--navy);
    background-image:
        radial-gradient(ellipse at 15% 30%, rgba(18,36,58,.95) 0%, transparent 65%),
        radial-gradient(ellipse at 85% 10%, rgba(240,192,112,.10) 0%, transparent 55%);
    color: #fff;
    padding: 3.5rem 0 4rem;
}
.cb-hero-grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 1000px) {
    .cb-hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 3.5rem; }
}
.cb-hero-inner { max-width: 820px; }

/* --- Desglose de precio de la portada -------------------------------------
   Dibujado con CSS, sin imagenes: no añade ninguna peticion y escala sin
   pixelarse. Ver el comentario de MarketingHeroMock. */
.cb-hero-mock {
    background: color-mix(in srgb, var(--navy-soft) 82%, #000);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: var(--radius);
    padding: 1.25rem;
    box-shadow: 0 24px 50px rgba(0,0,0,.45);
}
.cb-mock-bar {
    display: flex;
    align-items: center;
    gap: .55rem;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 9px;
    padding: .6rem .8rem;
    color: rgba(255,255,255,.55);
}
.cb-mock-url { font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-mock-label {
    margin: .55rem 0 1.1rem;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--gold-bright);
}

.cb-mock-rows { margin: 0; }
.cb-mock-rows > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: .5rem 0;
    border-bottom: 1px dashed rgba(255,255,255,.12);
}
.cb-mock-rows dt { color: rgba(255,255,255,.72); font-size: .92rem; }
.cb-mock-rows dd { margin: 0; color: #fff; font-size: .95rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cb-mock-total { border-bottom: 0 !important; padding-top: .85rem !important; }
.cb-mock-total dt { color: #fff !important; font-weight: 700; font-size: 1rem !important; }
.cb-mock-total dd { color: var(--gold-bright) !important; font-weight: 800; font-size: 1.3rem !important; }

.cb-mock-pay {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .4rem;
    margin-top: 1.1rem;
    padding-top: .9rem;
    border-top: 1px solid rgba(255,255,255,.12);
    font-size: .82rem;
    color: rgba(255,255,255,.6);
}
.cb-mock-coins { color: var(--gold-bright); font-weight: 600; letter-spacing: .03em; }
.cb-eyebrow {
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .76rem;
    font-weight: 700;
    color: var(--gold-bright);
    margin-bottom: .9rem;
}
.cb-hero-title { font-size: clamp(2.1rem, 5.2vw, 3.3rem); font-weight: 800; margin-bottom: 1.1rem; }
.cb-hero-sub { font-size: clamp(1.02rem, 2.2vw, 1.18rem); color: rgba(255,255,255,.84); max-width: 62ch; }

.cb-hero-bullets { display: flex; flex-direction: column; gap: .55rem; margin: 1.6rem 0 2rem; }
.cb-hero-bullets li { display: flex; align-items: flex-start; gap: .6rem; color: rgba(255,255,255,.9); font-size: .98rem; }

/* En movil los dos botones van a todo el ancho: con anchos distintos segun lo que mida el texto,
   la columna se ve desalineada y en aleman se descuadra del todo. */
.cb-hero-actions { display: flex; flex-direction: column; gap: .75rem; margin: 0; }
.cb-hero-actions .cb-btn { width: 100%; }
@media (min-width: 560px) {
    .cb-hero-actions { flex-direction: row; flex-wrap: wrap; }
    .cb-hero-actions .cb-btn { width: auto; }
}

/* --- Cabecera de paginas interiores -------------------------------------- */
.cb-page-head { background: var(--navy); color: #fff; padding: 3rem 0 3.25rem; }
.cb-page-head-tall { padding: 4.5rem 0 5rem; }
.cb-page-head h1 { font-size: clamp(1.9rem, 4.4vw, 2.7rem); font-weight: 800; }
.cb-page-lead { color: rgba(255,255,255,.82); font-size: 1.08rem; max-width: 62ch; margin-bottom: 0; }
.cb-page-head-tall .cb-hero-actions { margin-top: 1.75rem; }

/* --- Secciones ----------------------------------------------------------- */
.cb-section { padding: 3.5rem 0; }
.cb-section-alt { background: var(--paper-alt); border-block: 1px solid var(--line); }

.cb-section-title { font-size: clamp(1.5rem, 3.2vw, 2.05rem); font-weight: 700; text-align: center; }
.cb-section-lead { color: var(--ink-soft); text-align: center; max-width: 60ch; margin: 0 auto 2.4rem; }
.cb-section-title-left, .cb-section-lead-left { text-align: left; margin-left: 0; }
.cb-section-cta { text-align: center; margin: 2.2rem 0 0; }

/* --- Pasos --------------------------------------------------------------- */
.cb-steps { display: grid; gap: 1.5rem; grid-template-columns: 1fr; counter-reset: step; }
.cb-step { position: relative; padding-left: 3.25rem; }
.cb-step-number {
    position: absolute;
    left: 0;
    top: 0;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 50%;
    background: var(--navy);
    color: var(--gold-bright);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
}
.cb-step-title { font-size: 1.12rem; font-weight: 700; margin-bottom: .35rem; }
.cb-step p { color: var(--ink-soft); margin: 0; }
.cb-steps-stacked { gap: 2.4rem; }

@media (min-width: 768px) {
    .cb-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 2.5rem; }
    .cb-steps-stacked { grid-template-columns: 1fr; }
}
@media (min-width: 1100px) {
    .cb-steps:not(.cb-steps-stacked) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --- Tarjetas ------------------------------------------------------------ */
.cb-cards { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .cb-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .cb-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cb-cards-3 { grid-template-columns: 1fr; }
@media (min-width: 900px) { .cb-cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.cb-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: 0 8px 24px rgba(15,23,42,.04);
}
.cb-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: var(--navy);
    color: var(--gold-bright);
    margin-bottom: .9rem;
}
.cb-card h3 { font-size: 1.06rem; font-weight: 700; }
.cb-card p { color: var(--ink-soft); font-size: .96rem; margin: 0; }

/* --- Bloques a dos columnas ---------------------------------------------- */
.cb-split { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .cb-split { grid-template-columns: 1.35fr 1fr; gap: 3rem; } }

.cb-note {
    display: flex;
    gap: .9rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-left: 4px solid var(--gold);
    border-radius: var(--radius);
    padding: 1.25rem 1.4rem;
    color: var(--ink-soft);
}
.cb-note p { margin: 0; font-size: .95rem; }
.cb-note .cb-icon { color: var(--gold-deep); }
.cb-note-block { margin-top: 2.5rem; align-items: flex-start; }
.cb-note-title { font-size: 1.05rem; font-weight: 700; color: var(--ink); margin-bottom: .3rem; }

.cb-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.cb-chips li {
    border: 1px solid var(--line);
    background: var(--paper);
    border-radius: 999px;
    padding: .4rem 1rem;
    font-size: .92rem;
    font-weight: 600;
}
.cb-chips li a { text-decoration: none; }

.cb-figure {
    background: var(--navy);
    color: #fff;
    border-radius: var(--radius);
    padding: 2rem 1.5rem;
    text-align: center;
}
.cb-figure-value { display: block; font-size: clamp(1.7rem, 4vw, 2.3rem); font-weight: 800; color: var(--gold-bright); }
.cb-figure-label { display: block; margin-top: .35rem; font-size: .85rem; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.7); }

/* --- Preguntas frecuentes ------------------------------------------------ */
.cb-faq { border-top: 1px solid var(--line); }
.cb-faq-item { border-bottom: 1px solid var(--line); }
.cb-faq-item > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 0;
}
.cb-faq-item > summary::-webkit-details-marker { display: none; }
.cb-faq-item > summary h2,
.cb-faq-item > summary h3 { font-size: 1.03rem; font-weight: 650; margin: 0; }
.cb-faq-item > summary::after {
    content: "";
    flex: none;
    width: 10px;
    height: 10px;
    margin-top: .45rem;
    border-right: 2px solid var(--gold-deep);
    border-bottom: 2px solid var(--gold-deep);
    transform: rotate(45deg);
    transition: transform .2s ease;
}
.cb-faq-item[open] > summary::after { transform: rotate(-135deg); margin-top: .8rem; }
.cb-faq-item > p { color: var(--ink-soft); margin: 0 0 1.2rem; max-width: 68ch; font-size: .97rem; }

/* --- Tabla de tarifas ---------------------------------------------------- */
.cb-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.cb-table { width: 100%; border-collapse: collapse; font-size: .97rem; }
.cb-table th, .cb-table td { padding: .85rem 1.15rem; text-align: left; }
.cb-table thead th {
    background: var(--navy);
    color: #fff;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.cb-table tbody tr + tr { border-top: 1px solid var(--line); }
.cb-table tbody th { font-weight: 600; }
.cb-table-num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.cb-table thead .cb-table-num { font-weight: 600; }
.cb-table-default { background: var(--paper-alt); }
.cb-table-note { display: block; font-weight: 400; font-size: .85rem; color: var(--ink-soft); }

.cb-example {
    background: var(--paper-alt);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.75rem;
}
.cb-example h2 { font-size: 1.2rem; font-weight: 700; }
.cb-example p { margin: 0; color: var(--ink-soft); }

/* --- Llamada final ------------------------------------------------------- */
.cb-cta { background: var(--navy); color: #fff; padding: 3.5rem 0; text-align: center; }
.cb-cta h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 800; }
.cb-cta p { color: rgba(255,255,255,.82); max-width: 56ch; margin: 0 auto 1.75rem; }

/* --- Pie ----------------------------------------------------------------- */
.cb-footer { background: var(--navy-soft); color: rgba(255,255,255,.75); padding: 3rem 0 1.5rem; font-size: .94rem; }
.cb-footer-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .cb-footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cb-footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.4fr; gap: 2.5rem; } }

.cb-footer-brand .cb-brand-mark { width: 34px; height: 34px; margin-bottom: .75rem; }
.cb-footer-tagline { color: rgba(255,255,255,.7); margin: 0; max-width: 32ch; }
.cb-footer-title { font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; color: #fff; margin-bottom: .85rem; }
.cb-footer-col ul { display: flex; flex-direction: column; gap: .45rem; }
.cb-footer-col a { color: rgba(255,255,255,.75); text-decoration: none; }
.cb-footer-col a:hover { color: var(--gold-bright); text-decoration: underline; }
.cb-footer-note { color: rgba(255,255,255,.65); margin-bottom: .7rem; }
.cb-footer-mail { display: inline-flex; align-items: center; gap: .5rem; color: var(--gold-bright); text-decoration: none; word-break: break-all; }
.cb-footer-mail:hover { color: #fff; text-decoration: underline; }

.cb-footer-bottom {
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255,255,255,.12);
    font-size: .84rem;
    color: rgba(255,255,255,.55);
}
.cb-footer-bottom p { margin: 0 0 .4rem; }
.cb-footer-legal { max-width: 90ch; }

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}