/* ========================================================================== RUNLOOP web-v2 · capa de CONTENIDO Design system de la maqueta (web-v2/assets/css/style.css) portado a planas. -------------------------------------------------------------------------- Por qué existe este archivo: El importador metió el design system entero dentro de `_cssCustom` de la sección raíz de cada página. Bricks lo auto-scopea con :where([data-bricks-import-scope-XXX]) / :where(#brxe-XXX), y como ese ancestro no coincide con el elemento que lleva la clase, las reglas nunca aplican. Este archivo es ese mismo CSS, sin el prefijo de scoping y deduplicado, para que las clases rl2-* vuelvan a funcionar. Solo se encola en las páginas de la arquitectura v2 (ver functions.php). ========================================================================== */ /* -------------------------------------------------------------------------- Neutralización del reset del tema oscuro v1 (runloop-base.css). runloop-base.css pinta `h1..h5` de blanco (--rl-white) y los enlaces de lila sobre un body oscuro. En las páginas v2 la maqueta es clara, así que eso produce blanco sobre blanco. Aquí se restauran los valores de la maqueta; esta hoja se imprime después de runloop-base.css, de modo que gana en igualdad de especificidad. -------------------------------------------------------------------------- */ body { background: var(--rl2-blanco); color: var(--rl2-negro); font-family: var(--rl2-font-body); font-size: 17px; font-weight: 400; line-height: 1.65; } :is(#brx-content, #brx-footer) h1, :is(#brx-content, #brx-footer) h2, :is(#brx-content, #brx-footer) h3, :is(#brx-content, #brx-footer) h4, :is(#brx-content, #brx-footer) h5, :is(#brx-content, #brx-footer) h6, :is(#brx-content, #brx-footer) .rl2-display { color: inherit; } :is(#brx-content, #brx-footer) a { color: inherit; text-decoration: none; } :is(#brx-content, #brx-footer) a:hover { color: inherit; } :is(#brx-content, #brx-footer) strong, :is(#brx-content, #brx-footer) b { color: inherit; font-weight: 700; } :is(#brx-content, #brx-footer) ul, :is(#brx-content, #brx-footer) ol { list-style: none; margin: 0; padding: 0; } :is(#brx-content, #brx-footer) li { margin: 0; } :is(#brx-content, #brx-footer) img, :is(#brx-content, #brx-footer) svg { max-width: 100%; height: auto; } /* La maqueta alterna secciones claras sobre el body blanco; la sección sin modificador debe ser explícitamente blanca para que no se transparente al fondo del tema oscuro v1. */ :is(#brx-content, #brx-footer) .rl2-section, :is(#brx-content, #brx-footer) .rl2-section-tight { background: var(--rl2-blanco); } :is(#brx-content, #brx-footer) .display {font-family: var(--rl2-font-display); font-weight: 700; line-height: 1.12; letter-spacing: -.02em; margin: 0 0 .5em; text-wrap: balance;} :is(#brx-content, #brx-footer) .grid-2 .rl2-ph + * {margin-top: 18px;} :is(#brx-content, #brx-footer) .grid-2 .rl2-ph + * {margin-top: 18px} :is(#brx-content, #brx-footer) .rl2-bg-dark {color: #fff} :is(#brx-content, #brx-footer) .rl2-bg-dark {background: var(--rl2-negro);} :is(#brx-content, #brx-footer) .rl2-bg-dark {background: var(--rl2-negro); color: #fff;} :is(#brx-content, #brx-footer) .rl2-bg-dark .rl2-btn-ghost {border-color: rgba(255,255,255,.4)} :is(#brx-content, #brx-footer) .rl2-bg-dark .rl2-btn-ghost {--c: #fff;} :is(#brx-content, #brx-footer) .rl2-bg-dark .rl2-btn-ghost {--c: #fff; border-color: rgba(255,255,255,.4);} :is(#brx-content, #brx-footer) .rl2-bg-dark .rl2-btn-ghost:hover {background: rgba(255,255,255,.12);} :is(#brx-content, #brx-footer) .rl2-bg-dark .rl2-card {border-color: rgba(255,255,255,.14)} :is(#brx-content, #brx-footer) .rl2-bg-dark .rl2-card {background: rgba(255,255,255,.06); backdrop-filter: blur(6px);} :is(#brx-content, #brx-footer) .rl2-bg-dark .rl2-card {background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); backdrop-filter: blur(6px);} :is(#brx-content, #brx-footer) .rl2-bg-dark .rl2-card p {color: rgba(255,255,255,.75)} :is(#brx-content, #brx-footer) .rl2-bg-dark .rl2-card p {color: rgba(255,255,255,.75);} :is(#brx-content, #brx-footer) .rl2-bg-dark .rl2-card-icon {background: rgba(255,255,255,.12);} :is(#brx-content, #brx-footer) .rl2-bg-dark .rl2-card-icon svg {fill: var(--rl2-lila);} :is(#brx-content, #brx-footer) .rl2-bg-dark .rl2-card:hover {border-color: var(--rl2-lila)} :is(#brx-content, #brx-footer) .rl2-bg-dark .rl2-card:hover {background: rgba(255,255,255,.1);} :is(#brx-content, #brx-footer) .rl2-bg-dark .rl2-card:hover {border-color: var(--rl2-lila); background: rgba(255,255,255,.1);} :is(#brx-content, #brx-footer) .rl2-bg-dark .rl2-checks li::before {color: var(--rl2-lila)} :is(#brx-content, #brx-footer) .rl2-bg-dark .rl2-checks li::before {background: rgba(255,255,255,.15);} :is(#brx-content, #brx-footer) .rl2-bg-dark .rl2-checks li::before {background: rgba(255,255,255,.15); color: var(--rl2-lila);} :is(#brx-content, #brx-footer) .rl2-bg-dark .rl2-counter .rl2-lbl {color: var(--rl2-grafito)} :is(#brx-content, #brx-footer) .rl2-bg-dark .rl2-counter .rl2-lbl {color: var(--rl2-grafito);} :is(#brx-content, #brx-footer) .rl2-bg-dark .rl2-counter .rl2-val {color: var(--rl2-morado)} :is(#brx-content, #brx-footer) .rl2-bg-dark .rl2-counter .rl2-val {color: var(--rl2-morado);} :is(#brx-content, #brx-footer) .rl2-bg-dark .rl2-eyebrow {color: var(--rl2-lila)} :is(#brx-content, #brx-footer) .rl2-bg-dark .rl2-eyebrow {color: var(--rl2-lila);} :is(#brx-content, #brx-footer) .rl2-bg-dark .rl2-faq .rl2-faq-body {color: rgba(255,255,255,.75)} :is(#brx-content, #brx-footer) .rl2-bg-dark .rl2-faq .rl2-faq-body {color: rgba(255,255,255,.75);} :is(#brx-content, #brx-footer) .rl2-bg-dark .rl2-faq details {border-color: rgba(255,255,255,.14)} :is(#brx-content, #brx-footer) .rl2-bg-dark .rl2-faq details {background: rgba(255,255,255,.05);} :is(#brx-content, #brx-footer) .rl2-bg-dark .rl2-faq details {background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14);} :is(#brx-content, #brx-footer) .rl2-bg-dark .rl2-field input {border-color: rgba(255,255,255,.2); color: #fff} :is(#brx-content, #brx-footer) .rl2-bg-dark .rl2-field input {background: rgba(255,255,255,.08);} :is(#brx-content, #brx-footer) .rl2-bg-dark .rl2-field input {background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: #fff;} :is(#brx-content, #brx-footer) .rl2-bg-dark .rl2-field input::placeholder {color: rgba(255,255,255,.4)} :is(#brx-content, #brx-footer) .rl2-bg-dark .rl2-field input::placeholder {color: rgba(255,255,255,.4);} :is(#brx-content, #brx-footer) .rl2-bg-dark .rl2-field select {border-color: rgba(255,255,255,.2); color: #fff} :is(#brx-content, #brx-footer) .rl2-bg-dark .rl2-field select {background: rgba(255,255,255,.08);} :is(#brx-content, #brx-footer) .rl2-bg-dark .rl2-field select {background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: #fff;} :is(#brx-content, #brx-footer) .rl2-bg-dark .rl2-field textarea {border-color: rgba(255,255,255,.2); color: #fff} :is(#brx-content, #brx-footer) .rl2-bg-dark .rl2-field textarea {background: rgba(255,255,255,.08);} :is(#brx-content, #brx-footer) .rl2-bg-dark .rl2-field textarea {background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: #fff;} :is(#brx-content, #brx-footer) .rl2-bg-dark .rl2-field textarea::placeholder {color: rgba(255,255,255,.4)} :is(#brx-content, #brx-footer) .rl2-bg-dark .rl2-field textarea::placeholder {color: rgba(255,255,255,.4);} :is(#brx-content, #brx-footer) .rl2-bg-dark .rl2-lead {color: rgba(255,255,255,.82)} :is(#brx-content, #brx-footer) .rl2-bg-dark .rl2-lead {color: rgba(255,255,255,.82);} :is(#brx-content, #brx-footer) .rl2-bg-dark .rl2-quote {border-color: var(--rl2-lila)} :is(#brx-content, #brx-footer) .rl2-bg-dark .rl2-quote {border-color: var(--rl2-lila);} :is(#brx-content, #brx-footer) .rl2-bg-dark .rl2-quote footer {color: var(--rl2-grafito-claro)} :is(#brx-content, #brx-footer) .rl2-bg-dark .rl2-quote footer {color: var(--rl2-grafito-claro);} :is(#brx-content, #brx-footer) .rl2-bg-dark .rl2-steps .rl2-step p {color: rgba(255,255,255,.7)} :is(#brx-content, #brx-footer) .rl2-bg-dark .rl2-steps .rl2-step p {color: rgba(255,255,255,.7);} :is(#brx-content, #brx-footer) .rl2-bg-dark .rl2-steps .rl2-step::before {color: var(--rl2-lila); border-color: var(--rl2-lila)} :is(#brx-content, #brx-footer) .rl2-bg-dark .rl2-steps .rl2-step::before {color: var(--rl2-lila); border-color: var(--rl2-lila);} :is(#brx-content, #brx-footer) .rl2-bg-dark .rl2-tl-item p {color: rgba(255,255,255,.7)} :is(#brx-content, #brx-footer) .rl2-bg-dark .rl2-tl-item p {color: rgba(255,255,255,.7);} :is(#brx-content, #brx-footer) .rl2-bg-dark .rl2-vbadge {color: var(--rl2-lila)} :is(#brx-content, #brx-footer) .rl2-bg-dark .rl2-vbadge {background: rgba(255,255,255,.1);} :is(#brx-content, #brx-footer) .rl2-bg-dark .rl2-vbadge {background: rgba(255,255,255,.1); color: var(--rl2-lila);} :is(#brx-content, #brx-footer) .rl2-bg-dark .rl2-vbadge::before {background: var(--rl2-lila);} :is(#brx-content, #brx-footer) .rl2-bg-dark .tbl td {border-color: rgba(255,255,255,.1)} :is(#brx-content, #brx-footer) .rl2-bg-dark .tbl td {border-color: rgba(255,255,255,.1);} :is(#brx-content, #brx-footer) .rl2-bg-dark .tbl-wrap {border-color: rgba(255,255,255,.14)} :is(#brx-content, #brx-footer) .rl2-bg-dark .tbl-wrap {border-color: rgba(255,255,255,.14);} :is(#brx-content, #brx-footer) .rl2-bg-dark li {color: #cfcbe4} :is(#brx-content, #brx-footer) .rl2-bg-dark li {color: #cfcbe4;} :is(#brx-content, #brx-footer) .rl2-bg-dark p {color: #cfcbe4} :is(#brx-content, #brx-footer) .rl2-bg-dark p {color: #cfcbe4;} :is(#brx-content, #brx-footer) .rl2-bg-gray {background: var(--rl2-gris-fondo);} :is(#brx-content, #brx-footer) .rl2-bg-gray .rl2-counter .rl2-lbl {color: var(--rl2-grafito)} :is(#brx-content, #brx-footer) .rl2-bg-gray .rl2-counter .rl2-lbl {color: var(--rl2-grafito);} :is(#brx-content, #brx-footer) .rl2-bg-gray .rl2-counter .rl2-val {color: var(--rl2-morado)} :is(#brx-content, #brx-footer) .rl2-bg-gray .rl2-counter .rl2-val {color: var(--rl2-morado);} :is(#brx-content, #brx-footer) .rl2-bg-purple {color: #fff} :is(#brx-content, #brx-footer) .rl2-bg-purple {background: linear-gradient(135deg, var(--rl2-morado) 0%, var(--rl2-morado-deep) 100%);} :is(#brx-content, #brx-footer) .rl2-bg-purple {background: linear-gradient(135deg, var(--rl2-morado) 0%, var(--rl2-morado-deep) 100%); color: #fff;} :is(#brx-content, #brx-footer) .rl2-bg-purple .rl2-btn-ghost {border-color: rgba(255,255,255,.4)} :is(#brx-content, #brx-footer) .rl2-bg-purple .rl2-btn-ghost {--c: #fff;} :is(#brx-content, #brx-footer) .rl2-bg-purple .rl2-btn-ghost {--c: #fff; border-color: rgba(255,255,255,.4);} :is(#brx-content, #brx-footer) .rl2-bg-purple .rl2-btn-ghost:hover {background: rgba(255,255,255,.12);} :is(#brx-content, #brx-footer) .rl2-bg-purple .rl2-card {border-color: rgba(255,255,255,.14)} :is(#brx-content, #brx-footer) .rl2-bg-purple .rl2-card {background: rgba(255,255,255,.06); backdrop-filter: blur(6px);} :is(#brx-content, #brx-footer) .rl2-bg-purple .rl2-card {background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); backdrop-filter: blur(6px);} :is(#brx-content, #brx-footer) .rl2-bg-purple .rl2-card p {color: rgba(255,255,255,.75)} :is(#brx-content, #brx-footer) .rl2-bg-purple .rl2-card p {color: rgba(255,255,255,.75);} :is(#brx-content, #brx-footer) .rl2-bg-purple .rl2-card-icon {background: rgba(255,255,255,.12);} :is(#brx-content, #brx-footer) .rl2-bg-purple .rl2-card-icon svg {fill: var(--rl2-lila);} :is(#brx-content, #brx-footer) .rl2-bg-purple .rl2-card:hover {border-color: var(--rl2-lila)} :is(#brx-content, #brx-footer) .rl2-bg-purple .rl2-card:hover {background: rgba(255,255,255,.1);} :is(#brx-content, #brx-footer) .rl2-bg-purple .rl2-card:hover {border-color: var(--rl2-lila); background: rgba(255,255,255,.1);} :is(#brx-content, #brx-footer) .rl2-bg-purple .rl2-checks li::before {color: var(--rl2-lila)} :is(#brx-content, #brx-footer) .rl2-bg-purple .rl2-checks li::before {background: rgba(255,255,255,.15);} :is(#brx-content, #brx-footer) .rl2-bg-purple .rl2-checks li::before {background: rgba(255,255,255,.15); color: var(--rl2-lila);} :is(#brx-content, #brx-footer) .rl2-bg-purple .rl2-eyebrow {color: #ffe9b3} :is(#brx-content, #brx-footer) .rl2-bg-purple .rl2-eyebrow {color: #ffe9b3;} :is(#brx-content, #brx-footer) .rl2-bg-purple .rl2-faq .rl2-faq-body {color: rgba(255,255,255,.75)} :is(#brx-content, #brx-footer) .rl2-bg-purple .rl2-faq .rl2-faq-body {color: rgba(255,255,255,.75);} :is(#brx-content, #brx-footer) .rl2-bg-purple .rl2-faq details {border-color: rgba(255,255,255,.14)} :is(#brx-content, #brx-footer) .rl2-bg-purple .rl2-faq details {background: rgba(255,255,255,.05);} :is(#brx-content, #brx-footer) .rl2-bg-purple .rl2-faq details {background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14);} :is(#brx-content, #brx-footer) .rl2-bg-purple .rl2-field input {border-color: rgba(255,255,255,.2); color: #fff} :is(#brx-content, #brx-footer) .rl2-bg-purple .rl2-field input {background: rgba(255,255,255,.08);} :is(#brx-content, #brx-footer) .rl2-bg-purple .rl2-field input {background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: #fff;} :is(#brx-content, #brx-footer) .rl2-bg-purple .rl2-field input::placeholder {color: rgba(255,255,255,.4)} :is(#brx-content, #brx-footer) .rl2-bg-purple .rl2-field input::placeholder {color: rgba(255,255,255,.4);} :is(#brx-content, #brx-footer) .rl2-bg-purple .rl2-field select {border-color: rgba(255,255,255,.2); color: #fff} :is(#brx-content, #brx-footer) .rl2-bg-purple .rl2-field select {background: rgba(255,255,255,.08);} :is(#brx-content, #brx-footer) .rl2-bg-purple .rl2-field select {background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: #fff;} :is(#brx-content, #brx-footer) .rl2-bg-purple .rl2-field textarea {border-color: rgba(255,255,255,.2); color: #fff} :is(#brx-content, #brx-footer) .rl2-bg-purple .rl2-field textarea {background: rgba(255,255,255,.08);} :is(#brx-content, #brx-footer) .rl2-bg-purple .rl2-field textarea {background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: #fff;} :is(#brx-content, #brx-footer) .rl2-bg-purple .rl2-field textarea::placeholder {color: rgba(255,255,255,.4)} :is(#brx-content, #brx-footer) .rl2-bg-purple .rl2-field textarea::placeholder {color: rgba(255,255,255,.4);} :is(#brx-content, #brx-footer) .rl2-bg-purple .rl2-lead {color: rgba(255,255,255,.82)} :is(#brx-content, #brx-footer) .rl2-bg-purple .rl2-lead {color: rgba(255,255,255,.82);} :is(#brx-content, #brx-footer) .rl2-bg-purple .rl2-steps .rl2-step p {color: rgba(255,255,255,.7)} :is(#brx-content, #brx-footer) .rl2-bg-purple .rl2-steps .rl2-step p {color: rgba(255,255,255,.7);} :is(#brx-content, #brx-footer) .rl2-bg-purple .rl2-steps .rl2-step::before {color: var(--rl2-lila); border-color: var(--rl2-lila)} :is(#brx-content, #brx-footer) .rl2-bg-purple .rl2-steps .rl2-step::before {color: var(--rl2-lila); border-color: var(--rl2-lila);} :is(#brx-content, #brx-footer) .rl2-bg-purple li {color: #f1e8fb} :is(#brx-content, #brx-footer) .rl2-bg-purple li {color: #f1e8fb;} :is(#brx-content, #brx-footer) .rl2-bg-purple p {color: #f1e8fb} :is(#brx-content, #brx-footer) .rl2-bg-purple p {color: #f1e8fb;} :is(#brx-content, #brx-footer) .rl2-breadcrumb {display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.82rem; margin-bottom: 22px; color: rgba(255,255,255,.55);} :is(#brx-content, #brx-footer) .rl2-breadcrumb {display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.82rem; color: rgba(255,255,255,.55); margin-bottom: 22px} :is(#brx-content, #brx-footer) .rl2-breadcrumb a {color: rgba(255,255,255,.7);} :is(#brx-content, #brx-footer) .rl2-breadcrumb a {color: rgba(255,255,255,.7)} :is(#brx-content, #brx-footer) .rl2-breadcrumb a:hover {color: var(--rl2-lila);} :is(#brx-content, #brx-footer) .rl2-breadcrumb a:hover {color: var(--rl2-lila)} :is(#brx-content, #brx-footer) .rl2-breadcrumb span::before {content: "›"; margin-right: 8px; opacity: .5;} :is(#brx-content, #brx-footer) .rl2-breadcrumb span::before {margin-right: 8px; opacity: .5} :is(#brx-content, #brx-footer) .rl2-breadcrumb span::before {content: "›";} :is(#brx-content, #brx-footer) .rl2-btn {display: inline-flex; align-items: center; padding-top: 14px; padding-right: 26px; padding-bottom: 14px; padding-left: 26px; border: 2px solid transparent; border-radius: var(--rl2-radius-pill); font-weight: 700; font-size: 0.95rem; cursor: pointer; transition: transform var(--rl2-t-fast), box-shadow var(--rl2-t-fast), background var(--rl2-t-fast), color var(--rl2-t-fast)} :is(#brx-content, #brx-footer) .rl2-btn {display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: var(--rl2-radius-pill); font-weight: 700; font-size: 0.95rem; border: 2px solid transparent; cursor: pointer; transition: transform var(--rl2-t-fast), box-shadow var(--rl2-t-fast), background var(--rl2-t-fast), color var(--rl2-t-fast);} :is(#brx-content, #brx-footer) .rl2-btn-dark {color: #fff} :is(#brx-content, #brx-footer) .rl2-btn-dark {background: var(--rl2-negro);} :is(#brx-content, #brx-footer) .rl2-btn-dark {background: var(--rl2-negro); color: #fff;} :is(#brx-content, #brx-footer) .rl2-btn-dark:hover {background: var(--rl2-grafito);} :is(#brx-content, #brx-footer) .rl2-btn-ghost {color: var(--c)} :is(#brx-content, #brx-footer) .rl2-btn-ghost {--c: var(--rl2-text); border-color: color-mix(in srgb, var(--c) 35%, transparent); background: transparent;} :is(#brx-content, #brx-footer) .rl2-btn-ghost {--c: var(--rl2-text); color: var(--c); border-color: color-mix(in srgb, var(--c) 35%, transparent); background: transparent;} :is(#brx-content, #brx-footer) .rl2-btn-ghost:hover {background: color-mix(in srgb, var(--c) 8%, transparent);} :is(#brx-content, #brx-footer) .rl2-btn-light {color: var(--rl2-negro)} :is(#brx-content, #brx-footer) .rl2-btn-light {background: #fff; box-shadow: 0 12px 32px rgba(0,0,0,.25);} :is(#brx-content, #brx-footer) .rl2-btn-light {background: #fff; color: var(--rl2-negro); box-shadow: 0 12px 32px rgba(0,0,0,.25);} :is(#brx-content, #brx-footer) .rl2-btn-light:hover {background: var(--rl2-lila);} :is(#brx-content, #brx-footer) .rl2-btn-primary {color: #fff} :is(#brx-content, #brx-footer) .rl2-btn-primary {background: var(--rl2-morado); box-shadow: 0 12px 32px rgba(146,100,205,.35);} :is(#brx-content, #brx-footer) .rl2-btn-primary {background: var(--rl2-morado); color: #fff; box-shadow: 0 12px 32px rgba(146,100,205,.35);} :is(#brx-content, #brx-footer) .rl2-btn-primary:hover {background: var(--rl2-morado-deep);} :is(#brx-content, #brx-footer) .rl2-btn:hover {transform: translateY(-2px);} :is(#brx-content, #brx-footer) .rl2-card {border: 1px solid var(--rl2-gris-linea); border-radius: var(--rl2-radius); padding-top: 26px; padding-right: 26px; padding-bottom: 26px; padding-left: 26px; transition: transform var(--rl2-t-fast), box-shadow var(--rl2-t-fast), border-color var(--rl2-t-fast)} :is(#brx-content, #brx-footer) .rl2-card {background: #fff;} :is(#brx-content, #brx-footer) .rl2-card {background: #fff; border: 1px solid var(--rl2-gris-linea); border-radius: var(--rl2-radius); padding: 26px; transition: transform var(--rl2-t-fast), box-shadow var(--rl2-t-fast), border-color var(--rl2-t-fast);} :is(#brx-content, #brx-footer) .rl2-card .rl2-num {display: block; font-size: 0.8rem; font-weight: 700; color: var(--rl2-morado); letter-spacing: 0.12em; margin-bottom: 10px} :is(#brx-content, #brx-footer) .rl2-card .rl2-num {font-family: var(--rl2-font-display);} :is(#brx-content, #brx-footer) .rl2-card .rl2-num {font-family: var(--rl2-font-display); font-size: 0.8rem; font-weight: 700; color: var(--rl2-morado); letter-spacing: .12em; display: block; margin-bottom: 10px;} :is(#brx-content, #brx-footer) .rl2-card h3 {font-size: 1.08rem; margin-bottom: 8px} :is(#brx-content, #brx-footer) .rl2-card h3 {font-size: 1.08rem; margin-bottom: 8px;} :is(#brx-content, #brx-footer) .rl2-card p {font-size: 0.93rem; color: var(--rl2-grafito); margin-bottom: 0} :is(#brx-content, #brx-footer) .rl2-card p {font-size: 0.93rem; color: var(--rl2-grafito); margin-bottom: 0;} :is(#brx-content, #brx-footer) .rl2-card-icon {display: grid; align-items: initial; width: 44px; height: 44px; border-radius: 12px; margin-bottom: 14px} :is(#brx-content, #brx-footer) .rl2-card-icon {place-items: center; background: color-mix(in srgb, var(--rl2-morado) 14%, #fff);} :is(#brx-content, #brx-footer) .rl2-card-icon {width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--rl2-morado) 14%, #fff); margin-bottom: 14px;} :is(#brx-content, #brx-footer) .rl2-card-icon svg {width: 22px; height: 22px} :is(#brx-content, #brx-footer) .rl2-card-icon svg {fill: var(--rl2-morado);} :is(#brx-content, #brx-footer) .rl2-card-icon svg {width: 22px; height: 22px; fill: var(--rl2-morado);} :is(#brx-content, #brx-footer) .rl2-card-link {display: block; padding-top: 20px; padding-right: 22px; padding-bottom: 20px; padding-left: 22px; border: 1px solid var(--rl2-gris-linea); border-radius: var(--rl2-radius); transition: border-color var(--rl2-t-fast), background var(--rl2-t-fast), transform var(--rl2-t-fast)} :is(#brx-content, #brx-footer) .rl2-card-link {display: block; padding: 20px 22px; border: 1px solid var(--rl2-gris-linea); border-radius: var(--rl2-radius); transition: border-color var(--rl2-t-fast), background var(--rl2-t-fast), transform var(--rl2-t-fast);} :is(#brx-content, #brx-footer) .rl2-card-link span {font-size: 0.88rem; color: var(--rl2-grafito-claro)} :is(#brx-content, #brx-footer) .rl2-card-link span {font-size: 0.88rem; color: var(--rl2-grafito-claro);} :is(#brx-content, #brx-footer) .rl2-card-link strong {display: block; font-size: 1rem} :is(#brx-content, #brx-footer) .rl2-card-link strong {font-family: var(--rl2-font-display);} :is(#brx-content, #brx-footer) .rl2-card-link strong {display: block; font-size: 1rem; font-family: var(--rl2-font-display);} :is(#brx-content, #brx-footer) .rl2-card-link:hover {border-color: var(--rl2-morado)} :is(#brx-content, #brx-footer) .rl2-card-link:hover {background: #fff; transform: translateY(-3px);} :is(#brx-content, #brx-footer) .rl2-card-link:hover {border-color: var(--rl2-morado); background: #fff; transform: translateY(-3px);} :is(#brx-content, #brx-footer) .rl2-card:hover {border-color: var(--rl2-morado)} :is(#brx-content, #brx-footer) .rl2-card:hover {transform: translateY(-4px); box-shadow: var(--rl2-shadow-soft);} :is(#brx-content, #brx-footer) .rl2-card:hover {transform: translateY(-4px); box-shadow: var(--rl2-shadow-soft); border-color: var(--rl2-morado);} :is(#brx-content, #brx-footer) .rl2-center {text-align: center} :is(#brx-content, #brx-footer) .rl2-center {text-align: center;} :is(#brx-content, #brx-footer) .rl2-center .rl2-lead {margin-inline: auto;} :is(#brx-content, #brx-footer) .rl2-checks {display: grid; align-items: initial; gap: 12px; margin-top: 0; margin-right: 0; margin-bottom: 1.2em; margin-left: 0} :is(#brx-content, #brx-footer) .rl2-checks {list-style: none; padding: 0;} :is(#brx-content, #brx-footer) .rl2-checks {list-style: none; padding: 0; display: grid; gap: 12px; margin: 0 0 1.2em;} :is(#brx-content, #brx-footer) .rl2-checks li {display: flex; gap: 12px; align-items: flex-start; font-size: 0.97rem} :is(#brx-content, #brx-footer) .rl2-checks li {display: flex; gap: 12px; align-items: flex-start; font-size: 0.97rem;} :is(#brx-content, #brx-footer) .rl2-checks li::before {display: grid; align-items: initial; width: 22px; height: 22px; border-radius: 50%; color: var(--rl2-morado); font-weight: 700; font-size: 0.8rem; margin-top: 2px} :is(#brx-content, #brx-footer) .rl2-checks li::before {content: "✓"; flex: none; background: color-mix(in srgb, var(--rl2-morado) 16%, #fff); place-items: center;} :is(#brx-content, #brx-footer) .rl2-checks li::before {content: "✓"; flex: none; width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, var(--rl2-morado) 16%, #fff); color: var(--rl2-morado); font-weight: 700; font-size: 0.8rem; display: grid; place-items: center; margin-top: 2px;} :is(#brx-content, #brx-footer) .rl2-chip {display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: var(--rl2-radius-pill); border: 1.5px solid var(--rl2-gris-linea); background: #fff; font-size: 0.88rem; font-weight: 600; cursor: pointer; transition: all var(--rl2-t-fast); user-select: none;} :is(#brx-content, #brx-footer) .rl2-chip {display: inline-flex; align-items: center; padding-top: 9px; padding-right: 16px; padding-bottom: 9px; padding-left: 16px; border: 1.5px solid var(--rl2-gris-linea); border-radius: var(--rl2-radius-pill); font-size: 0.88rem; font-weight: 600; cursor: pointer; transition: all var(--rl2-t-fast)} :is(#brx-content, #brx-footer) .rl2-chip {background: #fff; user-select: none;} :is(#brx-content, #brx-footer) .rl2-chip.rl2-on {background: var(--rl2-morado); border-color: var(--rl2-morado); color: #fff; box-shadow: 0 8px 22px rgba(146,100,205,.35);} :is(#brx-content, #brx-footer) .rl2-chip.rl2-on {border-color: var(--rl2-morado); color: #fff} :is(#brx-content, #brx-footer) .rl2-chip.rl2-on {background: var(--rl2-morado); box-shadow: 0 8px 22px rgba(146,100,205,.35);} :is(#brx-content, #brx-footer) .rl2-chip.rl2-on::before {content: "✓"; font-size: 0.75rem;} :is(#brx-content, #brx-footer) .rl2-chip.rl2-on::before {font-size: 0.75rem} :is(#brx-content, #brx-footer) .rl2-chip.rl2-on::before {content: "✓";} :is(#brx-content, #brx-footer) .rl2-chip:hover {border-color: var(--rl2-morado);} :is(#brx-content, #brx-footer) .rl2-chip:hover {border-color: var(--rl2-morado)} :is(#brx-content, #brx-footer) .rl2-chiplist {display: flex; flex-wrap: wrap; gap: 10px;} :is(#brx-content, #brx-footer) .rl2-chiplist {display: flex; flex-wrap: wrap; gap: 10px} :is(#brx-content, #brx-footer) .rl2-container {max-width: var(--rl2-maxw)} :is(#brx-content, #brx-footer) .rl2-container {margin-inline: auto; padding-inline: clamp(20px, 4vw, 40px);} :is(#brx-content, #brx-footer) .rl2-container {max-width: var(--rl2-maxw); margin-inline: auto; padding-inline: clamp(20px, 4vw, 40px);} :is(#brx-content, #brx-footer) .rl2-counter {text-align: center} :is(#brx-content, #brx-footer) .rl2-counter {text-align: center;} :is(#brx-content, #brx-footer) .rl2-counter .rl2-lbl {font-size: 0.86rem; color: rgba(255,255,255,.65); margin-top: 6px} :is(#brx-content, #brx-footer) .rl2-counter .rl2-lbl {font-size: 0.86rem; color: rgba(255,255,255,.65); margin-top: 6px;} :is(#brx-content, #brx-footer) .rl2-counter .rl2-val {font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 700; color: var(--rl2-lila); line-height: 1} :is(#brx-content, #brx-footer) .rl2-counter .rl2-val {font-family: var(--rl2-font-display);} :is(#brx-content, #brx-footer) .rl2-counter .rl2-val {font-family: var(--rl2-font-display); font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 700; color: var(--rl2-lila); line-height: 1;} :is(#brx-content, #brx-footer) .rl2-counters {display: grid; align-items: initial; grid-template-columns: repeat(4, 1fr); gap: 22px} :is(#brx-content, #brx-footer) .rl2-counters {display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;} :is(#brx-content, #brx-footer) .rl2-cta-banner {display: flex; color: #fff; border-radius: var(--rl2-radius); padding-top: clamp(30px, 5vw, 54px); padding-right: clamp(30px, 5vw, 54px); padding-bottom: clamp(30px, 5vw, 54px); padding-left: clamp(30px, 5vw, 54px); flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between} :is(#brx-content, #brx-footer) .rl2-cta-banner {background: linear-gradient(120deg, var(--rl2-morado) 0%, var(--rl2-morado-deep) 55%, var(--rl2-negro) 130%);} :is(#brx-content, #brx-footer) .rl2-cta-banner {background: linear-gradient(120deg, var(--rl2-morado) 0%, var(--rl2-morado-deep) 55%, var(--rl2-negro) 130%); color: #fff; border-radius: var(--rl2-radius); padding: clamp(30px, 5vw, 54px); display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between;} :is(#brx-content, #brx-footer) .rl2-cta-banner h2 {margin-top: 0; margin-right: 0; margin-bottom: 6px; margin-left: 0; font-size: clamp(1.4rem, 3vw, 2rem)} :is(#brx-content, #brx-footer) .rl2-cta-banner h2 {margin: 0 0 6px; font-size: clamp(1.4rem, 3vw, 2rem);} :is(#brx-content, #brx-footer) .rl2-cta-banner p {color: rgba(255,255,255,.82); font-size: 0.95rem} :is(#brx-content, #brx-footer) .rl2-cta-banner p {margin: 0;} :is(#brx-content, #brx-footer) .rl2-cta-banner p {margin: 0; color: rgba(255,255,255,.82); font-size: 0.95rem;} :is(#brx-content, #brx-footer) .rl2-cta-row {display: flex; flex-wrap: wrap; gap: 14px; align-items: center} :is(#brx-content, #brx-footer) .rl2-cta-row {display: flex; flex-wrap: wrap; gap: 14px; align-items: center;} :is(#brx-content, #brx-footer) .rl2-estimator {background: #fff; border: 1px solid var(--rl2-gris-linea); border-radius: var(--rl2-radius); box-shadow: var(--rl2-shadow-soft); overflow: hidden;} :is(#brx-content, #brx-footer) .rl2-estimator {border: 1px solid var(--rl2-gris-linea); border-radius: var(--rl2-radius); overflow: hidden} :is(#brx-content, #brx-footer) .rl2-estimator {background: #fff; box-shadow: var(--rl2-shadow-soft);} :is(#brx-content, #brx-footer) .rl2-estimator-body {padding: 26px 30px 30px; display: grid; gap: 22px;} :is(#brx-content, #brx-footer) .rl2-estimator-body {display: grid; align-items: initial; padding-top: 26px; padding-right: 30px; padding-bottom: 30px; padding-left: 30px; gap: 22px} :is(#brx-content, #brx-footer) .rl2-estimator-head {background: linear-gradient(135deg, var(--rl2-negro), #1a1430); color: #fff; padding: 26px 30px; display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap;} :is(#brx-content, #brx-footer) .rl2-estimator-head {display: flex; color: #fff; padding-top: 26px; padding-right: 30px; padding-bottom: 26px; padding-left: 30px; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap} :is(#brx-content, #brx-footer) .rl2-estimator-head {background: linear-gradient(135deg, var(--rl2-negro), #1a1430);} :is(#brx-content, #brx-footer) .rl2-estimator-head h3 {margin: 0; font-size: 1.15rem;} :is(#brx-content, #brx-footer) .rl2-estimator-head h3 {font-size: 1.15rem} :is(#brx-content, #brx-footer) .rl2-estimator-head h3 {margin: 0;} :is(#brx-content, #brx-footer) .rl2-estimator-head p {margin: 4px 0 0; font-size: 0.86rem; color: rgba(255,255,255,.65);} :is(#brx-content, #brx-footer) .rl2-estimator-head p {margin-top: 4px; margin-right: 0; margin-bottom: 0; margin-left: 0; font-size: 0.86rem; color: rgba(255,255,255,.65)} :is(#brx-content, #brx-footer) .rl2-estimator-result {background: linear-gradient(135deg, var(--rl2-morado), var(--rl2-morado-deep)); color: #fff; border-radius: 14px; padding: 22px 26px; display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap;} :is(#brx-content, #brx-footer) .rl2-estimator-result {display: flex; color: #fff; border-radius: 14px; padding-top: 22px; padding-right: 26px; padding-bottom: 22px; padding-left: 26px; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap} :is(#brx-content, #brx-footer) .rl2-estimator-result {background: linear-gradient(135deg, var(--rl2-morado), var(--rl2-morado-deep));} :is(#brx-content, #brx-footer) .rl2-estimator-result .rl2-r-label {font-size: 0.82rem; text-transform: uppercase; letter-spacing: .14em; color: rgba(255,255,255,.75);} :is(#brx-content, #brx-footer) .rl2-estimator-result .rl2-r-label {font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(255,255,255,.75)} :is(#brx-content, #brx-footer) .rl2-estimator-result .rl2-r-note {width: 100%; font-size: 0.8rem; color: rgba(255,255,255,.7);} :is(#brx-content, #brx-footer) .rl2-estimator-result .rl2-r-note {width: 100%; font-size: 0.8rem; color: rgba(255,255,255,.7)} :is(#brx-content, #brx-footer) .rl2-estimator-result .rl2-r-value {font-family: var(--rl2-font-display); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700;} :is(#brx-content, #brx-footer) .rl2-estimator-result .rl2-r-value {font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700} :is(#brx-content, #brx-footer) .rl2-estimator-result .rl2-r-value {font-family: var(--rl2-font-display);} :is(#brx-content, #brx-footer) .rl2-estimator-step {border-top: 1px dashed var(--rl2-gris-linea); padding-top: 20px;} :is(#brx-content, #brx-footer) .rl2-estimator-step {padding-top: 20px} :is(#brx-content, #brx-footer) .rl2-estimator-step {border-top: 1px dashed var(--rl2-gris-linea);} :is(#brx-content, #brx-footer) .rl2-estimator-step .rl2-step-tag {font-family: var(--rl2-font-display); font-size: 0.72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--rl2-morado); display: block; margin-bottom: 8px;} :is(#brx-content, #brx-footer) .rl2-estimator-step .rl2-step-tag {display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rl2-morado); margin-bottom: 8px} :is(#brx-content, #brx-footer) .rl2-estimator-step .rl2-step-tag {font-family: var(--rl2-font-display);} :is(#brx-content, #brx-footer) .rl2-estimator-step h4 {margin: 0 0 12px; font-size: 1.02rem;} :is(#brx-content, #brx-footer) .rl2-estimator-step h4 {margin-top: 0; margin-right: 0; margin-bottom: 12px; margin-left: 0; font-size: 1.02rem} :is(#brx-content, #brx-footer) .rl2-estimator-step:first-child {border-top: 0; padding-top: 0;} :is(#brx-content, #brx-footer) .rl2-eyebrow {display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rl2-morado); margin-bottom: 14px} :is(#brx-content, #brx-footer) .rl2-eyebrow {display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--rl2-morado); margin-bottom: 14px;} :is(#brx-content, #brx-footer) .rl2-faq {display: grid; align-items: initial; gap: 12px; max-width: 780px} :is(#brx-content, #brx-footer) .rl2-faq {margin-inline: auto;} :is(#brx-content, #brx-footer) .rl2-faq {display: grid; gap: 12px; max-width: 780px; margin-inline: auto;} :is(#brx-content, #brx-footer) .rl2-faq .rl2-faq-body {padding-top: 0; padding-right: 22px; padding-bottom: 20px; padding-left: 22px; font-size: 0.94rem; color: var(--rl2-grafito)} :is(#brx-content, #brx-footer) .rl2-faq .rl2-faq-body {padding: 0 22px 20px; font-size: 0.94rem; color: var(--rl2-grafito);} :is(#brx-content, #brx-footer) .rl2-faq details {border: 1px solid var(--rl2-gris-linea); border-radius: 14px; overflow: hidden} :is(#brx-content, #brx-footer) .rl2-faq details {background: #fff;} :is(#brx-content, #brx-footer) .rl2-faq details {background: #fff; border: 1px solid var(--rl2-gris-linea); border-radius: 14px; overflow: hidden;} :is(#brx-content, #brx-footer) .rl2-faq details[open] {border-color: var(--rl2-morado)} :is(#brx-content, #brx-footer) .rl2-faq details[open] {box-shadow: var(--rl2-shadow-soft);} :is(#brx-content, #brx-footer) .rl2-faq details[open] {border-color: var(--rl2-morado); box-shadow: var(--rl2-shadow-soft);} :is(#brx-content, #brx-footer) .rl2-faq details[open] summary::after {transform: rotate(45deg);} :is(#brx-content, #brx-footer) .rl2-faq summary {display: flex; cursor: pointer; padding-top: 18px; padding-right: 22px; padding-bottom: 18px; padding-left: 22px; font-weight: 700; font-size: 0.98rem; justify-content: space-between; align-items: center; gap: 12px} :is(#brx-content, #brx-footer) .rl2-faq summary {list-style: none; font-family: var(--rl2-font-display);} :is(#brx-content, #brx-footer) .rl2-faq summary {cursor: pointer; list-style: none; padding: 18px 22px; font-weight: 700; font-family: var(--rl2-font-display); font-size: 0.98rem; display: flex; justify-content: space-between; align-items: center; gap: 12px;} :is(#brx-content, #brx-footer) .rl2-faq summary::-webkit-details-marker {display: none} :is(#brx-content, #brx-footer) .rl2-faq summary::-webkit-details-marker {display: none;} :is(#brx-content, #brx-footer) .rl2-faq summary::after {font-size: 1.3rem; color: var(--rl2-morado); transition: transform var(--rl2-t-fast)} :is(#brx-content, #brx-footer) .rl2-faq summary::after {content: "+";} :is(#brx-content, #brx-footer) .rl2-faq summary::after {content: "+"; font-size: 1.3rem; color: var(--rl2-morado); transition: transform var(--rl2-t-fast);} :is(#brx-content, #brx-footer) .rl2-field input {width: 100%; padding: 13px 16px; border-radius: 12px; border: 1.5px solid var(--rl2-gris-linea); background: #fff; color: var(--rl2-text); font-family: var(--rl2-font-body); font-size: 0.95rem; transition: border-color var(--rl2-t-fast), box-shadow var(--rl2-t-fast);} :is(#brx-content, #brx-footer) .rl2-field input:focus {outline: 0; border-color: var(--rl2-morado); box-shadow: 0 0 0 4px color-mix(in srgb, var(--rl2-morado) 15%, transparent);} :is(#brx-content, #brx-footer) .rl2-field label {display: block; font-size: 0.84rem; font-weight: 700; margin-bottom: 6px; letter-spacing: .02em;} :is(#brx-content, #brx-footer) .rl2-field label small {font-weight: 500; color: var(--rl2-grafito-claro);} :is(#brx-content, #brx-footer) .rl2-field select {width: 100%; padding: 13px 16px; border-radius: 12px; border: 1.5px solid var(--rl2-gris-linea); background: #fff; color: var(--rl2-text); font-family: var(--rl2-font-body); font-size: 0.95rem; transition: border-color var(--rl2-t-fast), box-shadow var(--rl2-t-fast);} :is(#brx-content, #brx-footer) .rl2-field select:focus {outline: 0; border-color: var(--rl2-morado); box-shadow: 0 0 0 4px color-mix(in srgb, var(--rl2-morado) 15%, transparent);} :is(#brx-content, #brx-footer) .rl2-field textarea {width: 100%; padding: 13px 16px; border-radius: 12px; border: 1.5px solid var(--rl2-gris-linea); background: #fff; color: var(--rl2-text); font-family: var(--rl2-font-body); font-size: 0.95rem; transition: border-color var(--rl2-t-fast), box-shadow var(--rl2-t-fast);} :is(#brx-content, #brx-footer) .rl2-field textarea {resize: vertical; min-height: 120px;} :is(#brx-content, #brx-footer) .rl2-field textarea:focus {outline: 0; border-color: var(--rl2-morado); box-shadow: 0 0 0 4px color-mix(in srgb, var(--rl2-morado) 15%, transparent);} :is(#brx-content, #brx-footer) .rl2-field-row {display: grid; grid-template-columns: 1fr 1fr; gap: 16px;} :is(#brx-content, #brx-footer) .rl2-form-grid {display: grid; gap: 16px;} :is(#brx-content, #brx-footer) .rl2-form-grid {display: grid; align-items: initial} :is(#brx-content, #brx-footer) .rl2-form-note {font-size: 0.8rem; color: var(--rl2-grafito-claro);} :is(#brx-content, #brx-footer) .rl2-grid {display: grid; align-items: initial; gap: 22px} :is(#brx-content, #brx-footer) .rl2-grid {display: grid; gap: 22px;} :is(#brx-content, #brx-footer) .rl2-grid-3 {grid-template-columns: repeat(3, 1fr);} :is(#brx-content, #brx-footer) .rl2-grid-3 {grid-template-columns: repeat(3, 1fr)} :is(#brx-content, #brx-footer) .rl2-grid-4 {grid-template-columns: repeat(4, 1fr)} :is(#brx-content, #brx-footer) .rl2-grid-4 {grid-template-columns: repeat(4, 1fr);} :is(#brx-content, #brx-footer) .rl2-hero {position: relative; overflow: hidden; padding-top: clamp(140px, 16vw, 190px); padding-right: 0; padding-bottom: clamp(70px, 9vw, 110px); padding-left: 0; color: #fff} :is(#brx-content, #brx-footer) .rl2-hero {background: var(--rl2-negro);} :is(#brx-content, #brx-footer) .rl2-hero {position: relative; overflow: hidden; padding: clamp(140px, 16vw, 190px) 0 clamp(70px, 9vw, 110px); background: var(--rl2-negro); color: #fff;} :is(#brx-content, #brx-footer) .rl2-hero .rl2-lead {color: rgba(255,255,255,.8); margin-bottom: 26px} :is(#brx-content, #brx-footer) .rl2-hero .rl2-lead {color: rgba(255,255,255,.8); margin-bottom: 26px;} :is(#brx-content, #brx-footer) .rl2-hero .rl2-vbadge {color: var(--rl2-lila)} :is(#brx-content, #brx-footer) .rl2-hero .rl2-vbadge {background: rgba(255,255,255,.1);} :is(#brx-content, #brx-footer) .rl2-hero .rl2-vbadge {background: rgba(255,255,255,.1); color: var(--rl2-lila);} :is(#brx-content, #brx-footer) .rl2-hero .rl2-vbadge::before {background: var(--rl2-lila);} :is(#brx-content, #brx-footer) .rl2-hero > .rl2-container {position: relative} :is(#brx-content, #brx-footer) .rl2-hero > .rl2-container {position: relative;} :is(#brx-content, #brx-footer) .rl2-hero h1 {max-width: 21ch} :is(#brx-content, #brx-footer) .rl2-hero h1 {max-width: 21ch;} :is(#brx-content, #brx-footer) .rl2-hero-meta {display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 26px; margin-right: 0; margin-bottom: 8px; margin-left: 0; font-size: 0.92rem; color: var(--rl2-lila)} :is(#brx-content, #brx-footer) .rl2-hero-meta {display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 26px 0 8px; font-size: 0.92rem; color: var(--rl2-lila);} :is(#brx-content, #brx-footer) .rl2-hero-meta span {display: inline-flex; align-items: center; gap: 8px} :is(#brx-content, #brx-footer) .rl2-hero-meta span {display: inline-flex; align-items: center; gap: 8px;} :is(#brx-content, #brx-footer) .rl2-hero-meta svg {width: 16px; height: 16px} :is(#brx-content, #brx-footer) .rl2-hero-meta svg {fill: var(--rl2-lila); flex: none;} :is(#brx-content, #brx-footer) .rl2-hero-meta svg {width: 16px; height: 16px; fill: var(--rl2-lila); flex: none;} :is(#brx-content, #brx-footer) .rl2-hero::before {content: ""; position: absolute; inset: 0; background: radial-gradient(60% 50% at 78% 18%, rgba(146,100,205,.38), transparent 70%), radial-gradient(45% 40% at 12% 85%, rgba(146,100,205,.22), transparent 70%), var(--rl2-negro);} :is(#brx-content, #brx-footer) .rl2-lead {font-size: 1.18rem; color: var(--rl2-grafito); max-width: 42ch} :is(#brx-content, #brx-footer) .rl2-lead {font-size: 1.18rem; color: var(--rl2-grafito); max-width: 42ch;} :is(#brx-content, #brx-footer) .rl2-marquee {overflow: hidden; position: relative} :is(#brx-content, #brx-footer) .rl2-marquee {padding-block: 18px;} :is(#brx-content, #brx-footer) .rl2-marquee {overflow: hidden; position: relative; padding-block: 18px;} :is(#brx-content, #brx-footer) .rl2-marquee-item {font-weight: 700; font-size: 0.95rem; color: rgba(255,255,255,.85); border: 1px solid rgba(255,255,255,.2); border-radius: var(--rl2-radius-pill); padding-top: 10px; padding-right: 22px; padding-bottom: 10px; padding-left: 22px} :is(#brx-content, #brx-footer) .rl2-marquee-item {font-family: var(--rl2-font-display); white-space: nowrap;} :is(#brx-content, #brx-footer) .rl2-marquee-item {font-family: var(--rl2-font-display); font-weight: 700; font-size: 0.95rem; color: rgba(255,255,255,.85); border: 1px solid rgba(255,255,255,.2); border-radius: var(--rl2-radius-pill); padding: 10px 22px; white-space: nowrap;} :is(#brx-content, #brx-footer) .rl2-marquee-track {display: flex; gap: 14px; width: max-content} :is(#brx-content, #brx-footer) .rl2-marquee-track {animation: marquee 28s linear infinite;} :is(#brx-content, #brx-footer) .rl2-marquee-track {display: flex; gap: 14px; width: max-content; animation: marquee 28s linear infinite;} :is(#brx-content, #brx-footer) .rl2-muted {color: var(--rl2-grafito-claro)} :is(#brx-content, #brx-footer) .rl2-muted {color: var(--rl2-grafito-claro);} :is(#brx-content, #brx-footer) .rl2-page-hero {position: relative; background: var(--rl2-negro); color: #fff; padding: clamp(120px, 14vw, 160px) 0 clamp(48px, 6vw, 70px); overflow: hidden;} :is(#brx-content, #brx-footer) .rl2-page-hero {position: relative; color: #fff; padding-top: clamp(120px, 14vw, 160px); padding-right: 0; padding-bottom: clamp(48px, 6vw, 70px); padding-left: 0; overflow: hidden} :is(#brx-content, #brx-footer) .rl2-page-hero {background: var(--rl2-negro);} :is(#brx-content, #brx-footer) .rl2-page-hero .rl2-lead {color: rgba(255,255,255,.78); max-width: 58ch;} :is(#brx-content, #brx-footer) .rl2-page-hero .rl2-lead {color: rgba(255,255,255,.78); max-width: 58ch} :is(#brx-content, #brx-footer) .rl2-page-hero > .rl2-container {position: relative;} :is(#brx-content, #brx-footer) .rl2-page-hero > .rl2-container {position: relative} :is(#brx-content, #brx-footer) .rl2-page-hero h1 {max-width: 24ch;} :is(#brx-content, #brx-footer) .rl2-page-hero h1 {max-width: 24ch} :is(#brx-content, #brx-footer) .rl2-page-hero::before {content: ""; position: absolute; inset: 0; background: radial-gradient(55% 45% at 80% 10%, rgba(146,100,205,.3), transparent 70%), radial-gradient(40% 40% at 10% 90%, rgba(146,100,205,.16), transparent 70%);} :is(#brx-content, #brx-footer) .rl2-ph {display: grid; align-items: initial; position: relative; border-radius: var(--rl2-radius); overflow: hidden; min-height: 260px} :is(#brx-content, #brx-footer) .rl2-ph {--ph-label: "Imagen"; background: linear-gradient(135deg, var(--rl2-negro-2), #171226 60%, color-mix(in srgb, var(--rl2-morado) 40%, #171226)); place-items: center;} :is(#brx-content, #brx-footer) .rl2-ph {--ph-label: "Imagen"; position: relative; border-radius: var(--rl2-radius); overflow: hidden; background: linear-gradient(135deg, var(--rl2-negro-2), #171226 60%, color-mix(in srgb, var(--rl2-morado) 40%, #171226)); min-height: 260px; display: grid; place-items: center;} :is(#brx-content, #brx-footer) .rl2-ph--banner {min-height: 340px} :is(#brx-content, #brx-footer) .rl2-ph--banner {min-height: 340px;} :is(#brx-content, #brx-footer) .rl2-ph--foto {--ph-label: "Fotografía";} :is(#brx-content, #brx-footer) .rl2-ph--foto.hero-bg {position: absolute; min-height: 0px; z-index: 0} :is(#brx-content, #brx-footer) .rl2-ph--foto.hero-bg {inset: 0; border-radius: 0;} :is(#brx-content, #brx-footer) .rl2-ph--foto.hero-bg {position: absolute; inset: 0; min-height: 0; border-radius: 0; z-index: 0;} :is(#brx-content, #brx-footer) .rl2-ph--foto.hero-bg::after {display: none} :is(#brx-content, #brx-footer) .rl2-ph--foto.hero-bg::after {display: none;} :is(#brx-content, #brx-footer) .rl2-ph--tall {min-height: 420px;} :is(#brx-content, #brx-footer) .rl2-ph--tall {min-height: 420px} :is(#brx-content, #brx-footer) .rl2-ph--wide {min-height: 200px;} :is(#brx-content, #brx-footer) .rl2-ph--wide {min-height: 200px} :is(#brx-content, #brx-footer) .rl2-ph::after {content: var(--ph-label); position: relative; font-family: var(--rl2-font-display); font-size: 0.78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.55); border: 1px dashed rgba(255,255,255,.35); border-radius: var(--rl2-radius-pill); padding: 10px 22px; background: rgba(7,5,12,.4);} :is(#brx-content, #brx-footer) .rl2-ph::before {content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 12px, transparent 12px 24px);} :is(#brx-content, #brx-footer) .rl2-post-card {display: flex; flex-direction: column; background: #fff; border: 1px solid var(--rl2-gris-linea); border-radius: var(--rl2-radius); overflow: hidden; transition: transform var(--rl2-t-fast), box-shadow var(--rl2-t-fast);} :is(#brx-content, #brx-footer) .rl2-post-card .rl2-ph {border-radius: 0; min-height: 180px;} :is(#brx-content, #brx-footer) .rl2-post-card .rl2-post-body {padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1;} :is(#brx-content, #brx-footer) .rl2-post-card .rl2-post-meta {margin-top: auto; font-size: 0.78rem; color: var(--rl2-grafito-claro); display: flex; gap: 14px;} :is(#brx-content, #brx-footer) .rl2-post-card .rl2-post-tag {font-size: 0.72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rl2-morado);} :is(#brx-content, #brx-footer) .rl2-post-card h3 {font-size: 1.02rem; margin: 0;} :is(#brx-content, #brx-footer) .rl2-post-card p {font-size: 0.88rem; color: var(--rl2-grafito); margin: 0;} :is(#brx-content, #brx-footer) .rl2-post-card:hover {transform: translateY(-4px); box-shadow: var(--rl2-shadow-soft);} :is(#brx-content, #brx-footer) .rl2-quote {padding-top: 4px; padding-right: 0; padding-bottom: 4px; padding-left: 22px; font-size: 1.05rem; max-width: 46ch} :is(#brx-content, #brx-footer) .rl2-quote {border-left: 3px solid var(--rl2-morado);} :is(#brx-content, #brx-footer) .rl2-quote {border-left: 3px solid var(--rl2-morado); padding: 4px 0 4px 22px; font-size: 1.05rem; max-width: 46ch;} :is(#brx-content, #brx-footer) .rl2-quote footer {margin-top: 10px; font-size: 0.84rem; color: var(--rl2-grafito-claro); font-style: normal} :is(#brx-content, #brx-footer) .rl2-quote footer {margin-top: 10px; font-size: 0.84rem; color: var(--rl2-grafito-claro); font-style: normal;} :is(#brx-content, #brx-footer) .rl2-rangeselect {display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;} :is(#brx-content, #brx-footer) .rl2-rangeselect {display: grid; align-items: initial; grid-template-columns: repeat(5, 1fr); gap: 10px} :is(#brx-content, #brx-footer) .rl2-rangeselect .rl2-chip {justify-content: center;} :is(#brx-content, #brx-footer) .rl2-rangeselect .rl2-chip {justify-content: center} :is(#brx-content, #brx-footer) .rl2-reveal {opacity: 0; transition: opacity .7s var(--rl2-ease), transform .7s var(--rl2-ease)} :is(#brx-content, #brx-footer) .rl2-reveal {transform: translateY(26px);} :is(#brx-content, #brx-footer) .rl2-reveal {opacity: 0; transform: translateY(26px); transition: opacity .7s var(--rl2-ease), transform .7s var(--rl2-ease);} :is(#brx-content, #brx-footer) .rl2-reveal.in {opacity: 1} :is(#brx-content, #brx-footer) .rl2-reveal.in {transform: none;} :is(#brx-content, #brx-footer) .rl2-reveal.in {opacity: 1; transform: none;} :is(#brx-content, #brx-footer) .rl2-reveal[data-delay="1"] {transition-delay: .08s;} :is(#brx-content, #brx-footer) .rl2-reveal[data-delay="2"] {transition-delay: .16s;} :is(#brx-content, #brx-footer) .rl2-reveal[data-delay="3"] {transition-delay: .24s;} :is(#brx-content, #brx-footer) .rl2-reveal[data-delay="4"] {transition-delay: .32s;} /* Reveal must never hide content permanently: with no JS (or if the script fails to boot) everything stays visible. The `rl2-js` class is set by an inline script in , before the body paints, so there is no flash. */ html:not(.rl2-js) :is(#brx-content, #brx-footer) .rl2-reveal { opacity: 1; transform: none; transition: none; } :is(#brx-content, #brx-footer) .rl2-section {padding-block: clamp(64px, 9vw, 110px);} :is(#brx-content, #brx-footer) .rl2-section .rl2-counter .rl2-lbl {color: var(--rl2-grafito)} :is(#brx-content, #brx-footer) .rl2-section .rl2-counter .rl2-lbl {color: var(--rl2-grafito);} :is(#brx-content, #brx-footer) .rl2-section .rl2-counter .rl2-val {color: var(--rl2-morado)} :is(#brx-content, #brx-footer) .rl2-section .rl2-counter .rl2-val {color: var(--rl2-morado);} :is(#brx-content, #brx-footer) .rl2-section-tight {padding-block: clamp(40px, 6vw, 70px);} /* * El marquee lleva también `rl2-section-tight`, y en la maqueta la regla * `.marquee` (línea 487) va DESPUÉS de `.section-tight` (línea 74) y por tanto * gana: el rail mide 18px de padding, no 70. Al portar el design system el * orden relativo se invirtió porque las reglas del marquee se emitieron antes. * Se restaura aquí, después de `rl2-section-tight`, para recuperar los 18px. */ :is(#brx-content, #brx-footer) .rl2-section-tight.rl2-marquee {padding-block: 18px;} :is(#brx-content, #brx-footer) .rl2-small {font-size: 0.84rem} :is(#brx-content, #brx-footer) .rl2-small {font-size: 0.84rem;} :is(#brx-content, #brx-footer) .rl2-split {display: grid; align-items: initial; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 64px); align-items: center} :is(#brx-content, #brx-footer) .rl2-split {display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 64px); align-items: center;} :is(#brx-content, #brx-footer) .rl2-split.rl2-rev {grid-template-columns: .95fr 1.05fr} :is(#brx-content, #brx-footer) .rl2-split.rl2-rev {grid-template-columns: .95fr 1.05fr;} :is(#brx-content, #brx-footer) .rl2-steps {display: grid; align-items: initial; gap: 18px} :is(#brx-content, #brx-footer) .rl2-steps {counter-reset: step;} :is(#brx-content, #brx-footer) .rl2-steps {counter-reset: step; display: grid; gap: 18px;} :is(#brx-content, #brx-footer) .rl2-steps .rl2-step {display: grid; align-items: initial; grid-template-columns: auto 1fr; gap: 18px; align-items: start} :is(#brx-content, #brx-footer) .rl2-steps .rl2-step {display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start;} :is(#brx-content, #brx-footer) .rl2-steps .rl2-step h3 {margin-bottom: 6px; font-size: 1.05rem} :is(#brx-content, #brx-footer) .rl2-steps .rl2-step h3 {margin-bottom: 6px; font-size: 1.05rem;} :is(#brx-content, #brx-footer) .rl2-steps .rl2-step p {font-size: 0.93rem; color: var(--rl2-grafito)} :is(#brx-content, #brx-footer) .rl2-steps .rl2-step p {margin: 0;} :is(#brx-content, #brx-footer) .rl2-steps .rl2-step p {font-size: 0.93rem; color: var(--rl2-grafito); margin: 0;} :is(#brx-content, #brx-footer) .rl2-steps .rl2-step::before {display: grid; align-items: initial; font-weight: 700; font-size: 1.6rem; color: var(--rl2-morado); border: 2px solid var(--rl2-morado); border-radius: 50%; width: 54px; height: 54px} :is(#brx-content, #brx-footer) .rl2-steps .rl2-step::before {counter-increment: step; content: counter(step, decimal-leading-zero); font-family: var(--rl2-font-display); place-items: center;} :is(#brx-content, #brx-footer) .rl2-steps .rl2-step::before {counter-increment: step; content: counter(step, decimal-leading-zero); font-family: var(--rl2-font-display); font-weight: 700; font-size: 1.6rem; color: var(--rl2-morado); border: 2px solid var(--rl2-morado); border-radius: 50%; width: 54px; height: 54px; display: grid; place-items: center;} :is(#brx-content, #brx-footer) .rl2-timeline {position: relative; display: grid; gap: 0; max-width: 780px; margin-inline: auto;} :is(#brx-content, #brx-footer) .rl2-timeline {display: grid; align-items: initial; position: relative; gap: 0px; max-width: 780px} :is(#brx-content, #brx-footer) .rl2-timeline {margin-inline: auto;} :is(#brx-content, #brx-footer) .rl2-timeline::before {content: ""; position: absolute; left: 26px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(var(--rl2-morado), rgba(146,100,205,.15));} :is(#brx-content, #brx-footer) .rl2-tl-item {position: relative; padding: 0 0 34px 76px;} :is(#brx-content, #brx-footer) .rl2-tl-item {position: relative; padding-top: 0; padding-right: 0; padding-bottom: 34px; padding-left: 76px} :is(#brx-content, #brx-footer) .rl2-tl-item .rl2-tl-date {font-family: var(--rl2-font-display); font-size: 0.78rem; font-weight: 700; letter-spacing: .12em; color: var(--rl2-morado); text-transform: uppercase;} :is(#brx-content, #brx-footer) .rl2-tl-item .rl2-tl-date {font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; color: var(--rl2-morado); text-transform: uppercase} :is(#brx-content, #brx-footer) .rl2-tl-item .rl2-tl-date {font-family: var(--rl2-font-display);} :is(#brx-content, #brx-footer) .rl2-tl-item h3 {font-size: 1.06rem; margin: 4px 0;} :is(#brx-content, #brx-footer) .rl2-tl-item h3 {font-size: 1.06rem; margin-top: 4px; margin-right: 0; margin-bottom: 4px; margin-left: 0} :is(#brx-content, #brx-footer) .rl2-tl-item p {font-size: 0.92rem; color: var(--rl2-grafito); margin: 0;} :is(#brx-content, #brx-footer) .rl2-tl-item p {font-size: 0.92rem; color: var(--rl2-grafito)} :is(#brx-content, #brx-footer) .rl2-tl-item p {margin: 0;} :is(#brx-content, #brx-footer) .rl2-tl-item.rl2-tl-now::before {background: var(--rl2-lila); box-shadow: 0 0 0 6px rgba(230,192,241,.25);} :is(#brx-content, #brx-footer) .rl2-tl-item::before {content: ""; position: absolute; left: 19px; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--rl2-morado); box-shadow: 0 0 0 6px color-mix(in srgb, var(--rl2-morado) 20%, transparent);} :is(#brx-content, #brx-footer) .rl2-tl-item:last-child {padding-bottom: 0;} :is(#brx-content, #brx-footer) .rl2-vbadge {display: inline-flex; align-items: center; color: var(--rl2-morado); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; border-radius: var(--rl2-radius-pill); padding-top: 6px; padding-right: 14px; padding-bottom: 6px; padding-left: 14px} :is(#brx-content, #brx-footer) .rl2-vbadge {background: rgba(146,100,205,.14); font-family: var(--rl2-font-display);} :is(#brx-content, #brx-footer) .rl2-vbadge {display: inline-flex; align-items: center; gap: 8px; background: rgba(146,100,205,.14); color: var(--rl2-morado); border-radius: var(--rl2-radius-pill); padding: 6px 14px; font-size: 0.78rem; font-weight: 700; font-family: var(--rl2-font-display); letter-spacing: .06em;} :is(#brx-content, #brx-footer) .rl2-vbadge::before {content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--rl2-morado);} :is(#brx-content, #brx-footer) a {color: inherit; text-decoration: none;} :is(#brx-content, #brx-footer) em {font-style: normal; text-decoration: underline; text-decoration-color: var(--rl2-morado); text-decoration-thickness: 2px; text-underline-offset: 3px;} :is(#brx-content, #brx-footer) h1 {font-family: var(--rl2-font-display); font-weight: 700; line-height: 1.12; letter-spacing: -.02em; margin: 0 0 .5em; text-wrap: balance;} :is(#brx-content, #brx-footer) h1 {font-size: clamp(2.1rem, 5vw, 3.4rem);} :is(#brx-content, #brx-footer) h2 {font-family: var(--rl2-font-display); font-weight: 700; line-height: 1.12; letter-spacing: -.02em; margin: 0 0 .5em; text-wrap: balance;} :is(#brx-content, #brx-footer) h2 {font-size: clamp(1.7rem, 3.6vw, 2.5rem);} :is(#brx-content, #brx-footer) h3 {font-family: var(--rl2-font-display); font-weight: 700; line-height: 1.12; letter-spacing: -.02em; margin: 0 0 .5em; text-wrap: balance;} :is(#brx-content, #brx-footer) h3 {font-size: 1.25rem;} :is(#brx-content, #brx-footer) h4 {font-family: var(--rl2-font-display); font-weight: 700; line-height: 1.12; letter-spacing: -.02em; margin: 0 0 .5em; text-wrap: balance;} :is(#brx-content, #brx-footer) img {max-width: 100%; display: block;} :is(#brx-content, #brx-footer) p {margin: 0 0 1em;} :is(#brx-content, #brx-footer) p:last-child {margin-bottom: 0;} :is(#brx-content, #brx-footer) strong {font-weight: 700;} @media (max-width: 860px) { :is(#brx-content, #brx-footer) .rl2-counters {grid-template-columns: repeat(2, 1fr);} :is(#brx-content, #brx-footer) .rl2-counters.rl2-counters {grid-template-columns: repeat(2, 1fr);} :is(#brx-content, #brx-footer) .rl2-split .rl2-ph, :is(#brx-content, #brx-footer) .rl2-split.rl2-rev .rl2-ph {min-height: 220px;} :is(#brx-content, #brx-footer) .rl2-split, :is(#brx-content, #brx-footer) .rl2-split.rl2-rev {grid-template-columns: 1fr;} :is(#brx-content, #brx-footer) .rl2-split.rl2-split {grid-template-columns: 1fr;} :is(#brx-content, #brx-footer) .rl2-split.rl2-split .rl2-ph {min-height: 220px;} :is(#brx-content, #brx-footer) .rl2-split.rl2-split.rl2-rev {grid-template-columns: 1fr;} :is(#brx-content, #brx-footer) .rl2-split.rl2-split.rl2-rev .rl2-ph {min-height: 220px;} } @media (prefers-reduced-motion: reduce) { :is(#brx-content, #brx-footer) .rl2-reveal {opacity: 1; transform: none; transition: 0;} :is(#brx-content, #brx-footer) .rl2-reveal.rl2-reveal {opacity: 1; transform: none; transition: 0;} } @media (max-width: 960px) { :is(#brx-content, #brx-footer) .rl2-grid-3 {grid-template-columns: repeat(2, 1fr);} :is(#brx-content, #brx-footer) .rl2-grid-3.rl2-grid-3 {grid-template-columns: repeat(2, 1fr);} :is(#brx-content, #brx-footer) .rl2-grid-4 {grid-template-columns: repeat(2, 1fr);} :is(#brx-content, #brx-footer) .rl2-grid-4.rl2-grid-4 {grid-template-columns: repeat(2, 1fr);} } @media (max-width: 680px) { :is(#brx-content, #brx-footer) .grid-2, :is(#brx-content, #brx-footer) .rl2-grid-3, :is(#brx-content, #brx-footer) .rl2-grid-4 {grid-template-columns: 1fr;} :is(#brx-content, #brx-footer) .rl2-field-row {grid-template-columns: 1fr;} :is(#brx-content, #brx-footer) .rl2-grid-3.rl2-grid-3 {grid-template-columns: 1fr;} :is(#brx-content, #brx-footer) .rl2-grid-4.rl2-grid-4 {grid-template-columns: 1fr;} :is(#brx-content, #brx-footer) .rl2-rangeselect {grid-template-columns: repeat(3, 1fr);} :is(#brx-content, #brx-footer) .rl2-rangeselect.rl2-rangeselect {grid-template-columns: repeat(3, 1fr);} } /* -------------------------------------------------------------------------- Clases que la maqueta define y que ahora mismo ninguna página usa. Se incluyen para que el design system quede completo y sea reutilizable (comparativas y nubes de etiquetas). -------------------------------------------------------------------------- */ :is(#brx-content, #brx-footer) .rl2-tbl { width: 100%; border-collapse: collapse; font-size: .92rem; } :is(#brx-content, #brx-footer) .rl2-tbl th { text-align: left; font-family: var(--rl2-font-display); font-size: .85rem; letter-spacing: .04em; padding: 14px 16px; border-bottom: 2px solid currentColor; } :is(#brx-content, #brx-footer) .rl2-tbl td { padding: 12px 16px; border-bottom: 1px solid var(--rl2-gris-linea); vertical-align: top; } :is(#brx-content, #brx-footer) .rl2-tbl tr:last-child td { border-bottom: 0; } :is(#brx-content, #brx-footer) .rl2-tbl-wrap { overflow-x: auto; border: 1px solid var(--rl2-gris-linea); border-radius: var(--rl2-radius); } :is(#brx-content, #brx-footer) .rl2-bg-dark .rl2-tbl-wrap { border-color: rgba(255, 255, 255, .14); } :is(#brx-content, #brx-footer) .rl2-bg-dark .rl2-tbl td { border-color: rgba(255, 255, 255, .1); } :is(#brx-content, #brx-footer) .rl2-tag-cloud { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } :is(#brx-content, #brx-footer) .rl2-tag { font-size: .84rem; font-weight: 600; padding: 8px 16px; border-radius: var(--rl2-radius-pill); background: rgba(146, 100, 205, .1); color: var(--rl2-morado); } /* -------------------------------------------------------------------------- Bricks aplica a TODA sección `.brxe-section{display:flex;align-items:center}` (frontend-layer.min.css). La maqueta usa `section{display:block}`: su `.container` es un bloque centrado con `margin-inline:auto`, no un ítem flex. Con flex, el `.rl2-container` se convierte en un ítem de ancho intrínseco y el hero caía a 733px (debía medir 1140px) y quedaba centrado en vez de alineado a la izquierda. Se restaura el modelo de caja de la maqueta. -------------------------------------------------------------------------- */ :is(#brx-content, #brx-footer) .rl2-section, :is(#brx-content, #brx-footer) .rl2-section-tight, :is(#brx-content, #brx-footer) .rl2-hero, :is(#brx-content, #brx-footer) .rl2-page-hero { display: block; align-items: initial; } /* Bricks pone también `.brx-body{display:flex}`. La maqueta usa body en flujo normal (block). */ body.brx-body { display: block; } /* -------------------------------------------------------------------------- Los contadores dentro de una banda púrpura. Bricks generó estas secciones con `rl2-section`, y `.rl2-section .rl2-counter .rl2-val{color:var(--rl2-morado)}` pinta el número de morado sobre un fondo cuyo degradado arranca en ese mismo morado: contraste 1.33, número ilegible. La maqueta reserva el morado para fondos claros y deja el lila sobre las bandas oscuras/púrpura. Se replica aquí. -------------------------------------------------------------------------- */ :is(#brx-content, #brx-footer) .rl2-bg-purple .rl2-counter .rl2-val { color: var(--rl2-lila); } :is(#brx-content, #brx-footer) .rl2-bg-purple .rl2-counter .rl2-lbl { color: rgba(255, 255, 255, .8); } /* -------------------------------------------------------------------------- Botón ghost sobre el hero de página interior (`.rl2-page-hero`). La maqueta lo deja en negro sobre negro (su `.btn-ghost` toma --text, que es oscuro, pero el panel es oscuro). Es un fallo de la propia maqueta que se replica aquí de forma corregida: sobre una superficie oscura el ghost debe ser blanco, igual que ya lo es en el hero de portada. -------------------------------------------------------------------------- */ :is(#brx-content, #brx-footer) .rl2-page-hero .rl2-btn-ghost { --c: #fff; border-color: rgba(255, 255, 255, .4); color: #fff; } :is(#brx-content, #brx-footer) .rl2-page-hero .rl2-btn-ghost:hover { background: rgba(255, 255, 255, .12); } /* -------------------------------------------------------------------------- Tarjetas con icono a la IZQUIERDA del texto (portada). Dos variantes: - `.rl2-card--inline` → tarjetas de servicios (icono SVG + h3 + p). - `.rl2-card-link--inline` → tarjetas de sectores (icono SVG + strong + span). El icono se coloca en una columna fija a la izquierda y el texto en la derecha; el `h3`/`strong` arranca alineado con la parte superior del icono, tal y como pidió el cliente. `.rl2-card-link` se convierte en grid para poder alinear icono y texto sin tocar el markup del importador. -------------------------------------------------------------------------- */ :is(#brx-content, #brx-footer) .rl2-card--inline { display: grid; grid-template-columns: 44px 1fr; column-gap: 16px; align-items: start; } :is(#brx-content, #brx-footer) .rl2-card--inline .rl2-card-icon { grid-row: 1 / span 2; margin-bottom: 0; } :is(#brx-content, #brx-footer) .rl2-card--inline h3 { grid-column: 2; margin-top: 2px; } :is(#brx-content, #brx-footer) .rl2-card--inline p { grid-column: 2; } :is(#brx-content, #brx-footer) .rl2-card-link--inline { display: grid; grid-template-columns: 44px 1fr; column-gap: 16px; align-items: start; } :is(#brx-content, #brx-footer) .rl2-card-link--inline .rl2-card-icon { grid-row: 1 / span 2; margin-bottom: 0; } :is(#brx-content, #brx-footer) .rl2-card-link--inline strong { grid-column: 2; align-self: end; } :is(#brx-content, #brx-footer) .rl2-card-link--inline > span { grid-column: 2; align-self: start; }