/**
 * EdFactura
 *
 * Copyright (c) 2026 LISANDRO ANTONIO NUNEZ MARTE.
 * Nombre comercial: ALUTECS SERVICES.
 * Todos los derechos reservados.
 *
 * Este código fuente es confidencial y propietario de ALUTECS SERVICES.
 * Su acceso está restringido exclusivamente a personas autorizadas.
 *
 * El acceso o uso del sistema EdFactura no concede ningún derecho
 * sobre este código fuente ni sobre la propiedad intelectual asociada.
 *
 * Queda estrictamente prohibida, sin autorización previa y por escrito
 * de su titular, la reproducción, copia, modificación, divulgación,
 * transferencia, publicación, distribución o utilización, total o
 * parcial, de este código fuente o de cualquier obra derivada.
 */
/* ============================================================
   EdFactura — frontend público v2
   Tipografía única: Inter (servida localmente, sin CDN)
   Brand color: #0ab09c (turquesa institucional, sin cambios)
   ============================================================ */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/inter/Inter-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/inter/Inter-Medium.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/inter/Inter-SemiBold.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/inter/Inter-Bold.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/inter/Inter-ExtraBold.woff2') format('woff2');
}

:root {
    /* Brand */
    --brand: #0ab09c;
    --brand-dark: #088876;
    --brand-darker: #066456;
    --brand-light: #e8faf7;
    --brand-soft: #f0fbf9;

    /* Neutros */
    --ink: #0f1d2c;
    --ink-soft: #3a4a5e;
    --text: #4a5a6e;
    --muted: #7a8699;
    --line: #e6ebf1;
    --line-soft: #f0f3f7;

    /* Surface */
    --bg: #ffffff;
    --bg-soft: #f8fafc;
    --bg-dark: #0f1d2c;

    /* Acentos */
    --gold: #f5b945;
    --rose: #e85a72;
    --indigo: #5b6bf0;

    /* Sistema */
    --radius-sm: 8px;
    --radius: 14px;
    --radius-lg: 22px;
    --radius-xl: 28px;
    --shadow-sm: 0 2px 6px rgba(15, 29, 44, .04);
    --shadow: 0 6px 24px rgba(15, 29, 44, .07);
    --shadow-lg: 0 20px 60px rgba(15, 29, 44, .12);
    --shadow-brand: 0 12px 32px rgba(10, 176, 156, .25);

    /* Tipografía */
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --fs-xs: 12px;
    --fs-sm: 14px;
    --fs-base: 16px;
    --fs-lg: 18px;
    --fs-xl: 22px;
    --fs-2xl: 30px;
    --fs-3xl: 42px;
    --fs-4xl: 56px;

    /* Layout */
    --container: 1200px;
    --gutter: 24px;
}

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

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

body {
    margin: 0;
    font-family: var(--font);
    font-size: var(--fs-base);
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: var(--brand-dark);
    text-decoration: none;
    transition: color .2s;
}

a:hover {
    color: var(--brand-darker);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 .5em;
    color: var(--ink);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.01em;
}

h1 {
    font-size: var(--fs-4xl);
    letter-spacing: -.025em;
}

h2 {
    font-size: var(--fs-3xl);
    letter-spacing: -.02em;
}

h3 {
    font-size: var(--fs-2xl);
}

h4 {
    font-size: var(--fs-xl);
}

p {
    margin: 0 0 1em;
}

ul,
ol {
    margin: 0 0 1em;
    padding-left: 1.5em;
}

/* ============================================================
   Layout
   ============================================================ */
.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.section {
    padding: 76px 0;
    position: relative;
}

.section--soft {
    background:
        radial-gradient(60% 80% at 50% 0%, rgba(10, 176, 156, .04), transparent 70%),
        var(--bg-soft);
}

.section--brand-soft {
    background:
        radial-gradient(70% 100% at 0% 50%, rgba(10, 176, 156, .14), transparent 70%),
        radial-gradient(70% 100% at 100% 50%, rgba(91, 107, 240, .06), transparent 70%),
        var(--brand-soft);
}

.section--dark {
    background: var(--bg-dark);
    color: #cbd5e1;
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 {
    color: #ffffff;
}

.section--narrow {
    padding: 64px 0;
}

.section-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 56px;
}

.section-head .eyebrow {
    display: inline-block;
    padding: 7px 16px;
    background: linear-gradient(135deg, var(--brand-light) 0%, var(--bg) 100%);
    border: 1px solid rgba(10, 176, 156, .25);
    color: var(--brand-darker);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    border-radius: 999px;
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(10, 176, 156, .12);
}

.section-head .lead {
    font-size: var(--fs-lg);
    color: var(--text);
    margin: 0;
}

.grid {
    display: grid;
    gap: 24px;
}

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

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

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

/* ============================================================
   Botones
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1;
    border: 2px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    transition: all .2s ease;
    text-decoration: none;
    white-space: nowrap;
}

.btn--primary {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
    box-shadow: var(--shadow-brand);
}

.btn--primary:hover {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 16px 36px rgba(10, 176, 156, .35);
}

.btn--ghost {
    background: transparent;
    color: var(--ink);
    border-color: var(--line);
}

.btn--ghost:hover {
    border-color: var(--brand);
    color: var(--brand-dark);
    transform: translateY(-2px);
}

.btn--light {
    background: #fff;
    color: var(--brand-dark);
    border-color: #fff;
}

.btn--light:hover {
    background: var(--brand-light);
    color: var(--brand-darker);
}

.btn--sm {
    padding: 10px 18px;
    font-size: 13px;
}

.btn--lg {
    padding: 18px 32px;
    font-size: var(--fs-base);
}

/* ============================================================
   Header
   ============================================================ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgb(247 253 252);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    box-shadow: 0 1px 0 rgba(10, 176, 156, .02), 0 4px 12px -8px rgba(15, 23, 42, .02);
    
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
}

.nav__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--fs-xl);
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -.02em;
}

.nav__brand-mark {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 800;
    font-size: 18px;
    box-shadow: var(--shadow-brand);
}

.nav__logo {
    max-height: 38px;
    width: auto;
    display: block;
}

.nav__brand-text {
    line-height: 1;
}

.nav__menu {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav__menu a {
    display: block;
    padding: 10px 10px;
    color: var(--ink-soft);
    font-weight: 500;
    font-size: var(--fs-sm);
    border-radius: 8px;
    transition: all .2s;
}

.nav__menu a:hover,
.nav__menu a.is-active {
    color: var(--brand-dark);
    background: var(--brand-light);
}

.nav__menu li {
    position: relative;
}

.nav__submenu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 8px;
    list-style: none;
    margin: 8px 0 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: all .18s;
    z-index: 5;
}

.nav__menu li:hover>.nav__submenu,
.nav__menu li:focus-within>.nav__submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav__submenu a {
    display: block;
    padding: 10px 14px;
    border-radius: 8px;
    color: var(--ink-soft);
    font-size: var(--fs-sm);
    font-weight: 500;
}

.nav__submenu a:hover {
    background: var(--brand-light);
    color: var(--brand-dark);
}

.nav__caret {
    font-size: 10px;
    margin-left: 6px;
    opacity: .6;
    transition: transform .18s;
    display: inline-block;
    line-height: 1;
}

.nav__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav__toggle {
    display: none;
    width: 40px;
    height: 40px;
    background: var(--brand-light);
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    color: var(--brand-dark);
}

/* Menú de cuenta (usuario logueado): desktop muestra los botones; móvil colapsa en dropdown */
.nav__user {
    position: relative;
    display: flex;
    align-items: center;
}

.nav__user-trigger {
    display: none;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 12px;
    background: var(--brand-light);
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    color: var(--brand-dark);
    font-size: 18px;
}

.nav__user-trigger .nav__caret {
    font-size: 10px;
    margin-left: 2px;
}

.nav__user[aria-expanded="true"] .nav__user-trigger .nav__caret,
.nav__user.is-open .nav__user-trigger .nav__caret {
    transform: rotate(180deg);
}

.nav__user-panel {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
    position: relative;
    padding: 60px 0 80px;
    overflow: hidden;
    background: radial-gradient(900px 600px at 100% 0%, rgba(10, 176, 156, .28), transparent 60%), radial-gradient(700px 500px at 0% 100%, rgba(91, 107, 240, .12), transparent 60%), linear-gradient(54deg, var(--brand-light) 0%, var(--brand-soft) 45%, var(--bg) 85%);
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 1px 1px, rgba(10, 176, 156, .22) 1px, transparent 0);
    background-size: 28px 28px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, .2) 60%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, .2) 60%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}

.hero>.container {
    position: relative;
    z-index: 1;
}

.hero::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(180deg, transparent 0%, var(--bg) 100%);
    pointer-events: none;
    z-index: 0;
}

.hero__grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 60px;
    align-items: center;
}

.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--ink-soft);
    margin-bottom: 14px;
    box-shadow: var(--shadow-sm);
}

.hero__eyebrow .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 0 0 4px rgba(10, 176, 156, .2);
}

.hero h1 {
    font-size: clamp(36px, 5vw, var(--fs-4xl));
    margin-bottom: 24px;
}

.hero h1 .accent {
    background: linear-gradient(120deg, var(--brand) 0%, var(--brand-dark) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero__lead {
    font-size: var(--fs-lg);
    color: var(--text);
    margin-bottom: 32px;
    max-width: 540px;
}

.hero__cta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.hero__trust {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: var(--fs-sm);
    color: var(--muted);
}

.hero__trust strong {
    color: var(--ink);
    font-weight: 700;
    font-size: var(--fs-lg);
    display: block;
}

/* Mockup decorativo (sin imágenes externas) */
.mockup {
    position: relative;
    background: linear-gradient(135deg, var(--bg) 0%, var(--bg-soft) 100%);
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: 22px;
}

.mockup::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: calc(var(--radius-xl) + 2px);
    background: linear-gradient(135deg, var(--brand) 0%, transparent 55%);
    opacity: .18;
    z-index: -1;
    filter: blur(2px);
}

.mockup__bar {
    display: flex;
    gap: 6px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--line);
}

.mockup__bar span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--line);
}

.mockup__bar span:first-child {
    background: #ff5f56;
}

.mockup__bar span:nth-child(2) {
    background: #ffbd2e;
}

.mockup__bar span:nth-child(3) {
    background: #27c93f;
}

.mockup__row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
}

.mockup__kpi {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 14px;
}

.mockup__kpi.soft {
    background: var(--brand-soft);
}

.mockup__kpi.is-active {
    background: var(--brand);
    color: #fff;
    box-shadow: var(--shadow-brand);
}
.mockup__kpi .l.is-active {
    font-size: 10px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.mockup__kpi .v.is-active {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin-top: 4px;
}

.mockup__kpi .l {
    font-size: 10px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.mockup__kpi .v {
    font-size: 20px;
    font-weight: 700;
    color: var(--ink);
    margin-top: 4px;
}

.mockup__kpi .v.brand {
    color: var(--brand-dark);
}

.mockup__chart {
    height: 140px;
    background: linear-gradient(180deg, rgba(10, 176, 156, .12) 0%, rgba(10, 176, 156, 0) 100%);
    border-radius: var(--radius-sm);
    position: relative;
    overflow: hidden;
}

.mockup__chart::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--brand);
}

.mockup__chart::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    background:
        linear-gradient(135deg, transparent 60%, var(--brand) 60%, var(--brand) 62%, transparent 62%) 0 70%/30% 30% no-repeat,
        linear-gradient(135deg, transparent 50%, var(--brand-dark) 50%, var(--brand-dark) 52%, transparent 52%) 30% 50%/30% 50% no-repeat,
        linear-gradient(135deg, transparent 40%, var(--brand) 40%, var(--brand) 42%, transparent 42%) 60% 20%/40% 80% no-repeat;
    opacity: .25;
}

.hero__badges {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    margin-top: 20px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.hero__badges span {
    font-size: var(--fs-xs);
    color: var(--muted);
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* ============================================================
   Botón descarga Windows
   ============================================================ */
.dl-windows {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 14px 22px;
    background: #0f1d2c;
    color: #fff;
    border-radius: var(--radius);
    text-decoration: none;
    transition: all .25s ease;
    box-shadow: 0 8px 24px rgba(15, 29, 44, .25);
    margin-top: 28px;
}

.dl-windows:hover {
    background: #1a2940;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(15, 29, 44, .35);
}

.dl-windows__icon {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, .12);
    border-radius: 8px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.dl-windows__icon svg {
    width: 22px;
    height: 22px;
}

.dl-windows__text {
    line-height: 1.2;
}

.dl-windows__text small {
    display: block;
    font-size: 11px;
    color: #94a3b8;
    letter-spacing: .04em;
}

.dl-windows__text strong {
    display: block;
    font-size: 15px;
    font-weight: 600;
    margin-top: 2px;
}

/* ============================================================
   Cards de feature
   ============================================================ */
.feature {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 32px;
    transition: all .25s ease;
    position: relative;
    overflow: hidden;
}

.feature::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand) 0%, transparent 100%);
    opacity: 0;
    transition: opacity .25s;
}

.feature:hover {
    border-color: rgba(10, 176, 156, .35);
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(10, 176, 156, .12);
}

.feature:hover::before {
    opacity: 1;
}

.feature__icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-sm);
    display: grid;
    place-items: center;
    background: var(--brand-light);
    color: var(--brand-dark);
    margin-bottom: 20px;
}

.feature__icon svg {
    width: 26px;
    height: 26px;
}

.feature h4 {
    margin-bottom: 10px;
}

.feature p {
    color: var(--text);
    margin: 0;
    font-size: var(--fs-sm);
}

/* Variantes color */
.feature--gold .feature__icon {
    background: #fff5e0;
    color: #d49216;
}

.feature--rose .feature__icon {
    background: #ffe9ed;
    color: var(--rose);
}

.feature--indigo .feature__icon {
    background: #ebedfe;
    color: var(--indigo);
}

/* ============================================================
   Módulo destacado (split section)
   ============================================================ */
.module-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.module-split--reverse .module-split__visual {
    order: 2;
}

.module-split__visual {
    background: linear-gradient(135deg, var(--brand-soft) 0%, var(--bg) 100%);
    border: 1px solid #d6e4e1;
    border-radius: var(--radius-xl);
    padding: 40px;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-dark);
}

.module-split h3 {
    margin-bottom: 16px;
}

.module-split .lead {
    font-size: var(--fs-lg);
    color: var(--text);
    margin-bottom: 24px;
}

.module-split ul.checks {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
}

.module-split ul.checks li {
    position: relative;
    padding: 6px 0 6px 30px;
    color: var(--ink-soft);
}

.module-split ul.checks li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--brand-light);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6L5 8.5 9.5 4' stroke='%230ab09c' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
}

/* ============================================================
   DGII cards
   ============================================================ */
.dgii-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}

.dgii-card {
    background: linear-gradient(180deg, var(--bg) 0%, var(--brand-soft) 250%);
    border-radius: var(--radius-lg);
    padding: 36px;
    border: 1px solid var(--line);
    position: relative;
    transition: all .25s;
}

.dgii-card:hover {
    transform: translateY(-4px);
    border-color: rgba(10, 176, 156, .35);
    box-shadow: 0 16px 40px rgba(10, 176, 156, .12);
}

.dgii-card__tag {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 4px 12px;
    background: var(--brand-light);
    color: var(--brand-dark);
    font-size: 11px;
    font-weight: 700;
    border-radius: 999px;
    letter-spacing: .06em;
}

.dgii-card h3 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.dgii-card h3 .num {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
    display: inline-grid;
    place-items: center;
    color: #fff;
    font-weight: 800;
    font-size: 18px;
    box-shadow: var(--shadow-brand);
}

.dgii-card ul {
    list-style: none;
    padding: 0;
    margin: 16px 0 24px;
}

.dgii-card ul li {
    padding: 8px 0 8px 24px;
    position: relative;
    color: var(--ink-soft);
    font-size: var(--fs-sm);
}

.dgii-card ul li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--brand);
    font-weight: 700;
}

.dgii-reports {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin: 20px 0;
}

.dgii-reports div {
    background: var(--brand-soft);
    border: 1px solid rgba(10, 176, 156, .15);
    border-radius: 10px;
    padding: 14px;
    text-align: center;
}

.dgii-reports div strong {
    font-size: var(--fs-xl);
    color: var(--brand-darker);
    display: block;
    line-height: 1;
    margin-bottom: 4px;
}

.dgii-reports div small {
    font-size: 11px;
    color: var(--text);
}

/* ============================================================
   Testimonios
   ============================================================ */
.testimonial {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 32px;
    position: relative;
    transition: all .25s;
}

.testimonial:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
    border-color: rgba(10, 176, 156, .35);
}

.testimonial__quote {
    color: var(--brand);
    margin-bottom: 14px;
}

.testimonial__text {
    color: var(--ink-soft);
    font-size: var(--fs-base);
    line-height: 1.55;
    margin: 0 0 24px;
}

.testimonial__author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.testimonial__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--brand-light);
    flex-shrink: 0;
}

.testimonial__avatar--text {
    color: var(--brand-dark);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 14px;
}

.testimonial__author strong {
    display: block;
    color: var(--ink);
    font-size: 14px;
    line-height: 1.3;
}

.testimonial__author small {
    color: var(--muted);
    font-size: 12px;
}

/* Ajustes para grilla de 4 testimonios — cards más estrechas */
.testimonials-grid .testimonial { padding: 24px 22px; }
.testimonials-grid .testimonial__text { font-size: 14px; line-height: 1.5; margin-bottom: 18px; }
.testimonials-grid .testimonial__avatar { width: 38px; height: 38px; }
.testimonials-grid .testimonial__author strong { font-size: 13px; }
.testimonials-grid .testimonial__author small { font-size: 11px; }
.testimonials-grid { gap: 20px; }

/* ============================================================
   Post cards
   ============================================================ */
.post-card {
    display: block;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    transition: all .25s;
    color: inherit;
}

.post-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
    border-color: rgba(10, 176, 156, .35);
    color: inherit;
}

.post-card__image {
    aspect-ratio: 16/10;
    background-size: cover;
    background-position: center;
    background-color: var(--brand-soft);
}

.post-card__image--placeholder {
    display: grid;
    place-items: center;
    color: var(--brand);
}

.post-card__body {
    padding: 24px;
}

.post-card__date {
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    display: block;
    margin-bottom: 8px;
}

.post-card__body h4 {
    color: var(--ink);
    margin: 0 0 14px;
    font-size: 18px;
    line-height: 1.3;
}

.post-card__link {
    color: var(--brand-dark);
    font-size: 14px;
    font-weight: 600;
}

/* ============================================================
   Stats
   ============================================================ */
.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    text-align: center;
}

.stat__value {
    font-size: 44px;
    font-weight: 800;
    color: var(--brand-darker);
    letter-spacing: -.02em;
    line-height: 1;
    margin-bottom: 8px;
}

.stat__label {
    color: var(--muted);
    font-size: var(--fs-sm);
}

/* ============================================================
   Pricing
   ============================================================ */
.plan {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 40px 32px;
    position: relative;
    transition: all .25s;
}

.plan:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}

.plan--featured {
    border: 2px solid var(--brand);
    box-shadow: var(--shadow-brand);
}

.plan--featured::before {
    content: 'Más popular';
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--brand);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 999px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.plan__name {
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--brand-dark);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 12px;
}

.plan__price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 8px;
}

.plan__price .currency {
    font-size: var(--fs-lg);
    color: var(--muted);
}

.plan__price .amount {
    font-size: 48px;
    font-weight: 800;
    color: var(--ink);
    line-height: 1;
}

.plan__price .period {
    font-size: var(--fs-sm);
    color: var(--muted);
}

.plan__desc {
    font-size: var(--fs-sm);
    color: var(--text);
    margin-bottom: 28px;
}

.plan__features {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
}

.plan__features li {
    padding: 10px 0 10px 0;
    position: relative;
    font-size: var(--fs-sm);
    border-bottom: 1px solid var(--line-soft);
}

/* ============================================================
   FAQ
   ============================================================ */
.faq {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin-bottom: 12px;
    overflow: hidden;
    transition: all .2s;
}

.faq[open] {
    border-color: var(--brand);
    box-shadow: var(--shadow-sm);
}

.faq summary {
    cursor: pointer;
    padding: 22px 24px;
    font-weight: 600;
    color: var(--ink);
    list-style: none;
    position: relative;
    padding-right: 56px;
}

.faq summary::-webkit-details-marker {
    display: none;
}

.faq summary::after {
    content: '+';
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    background: var(--brand-light);
    color: var(--brand-dark);
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-size: 20px;
    font-weight: 600;
    transition: all .2s;
}

.faq[open] summary::after {
    content: '−';
    background: var(--brand);
    color: #fff;
}

.faq__body {
    padding: 0 24px 24px;
    color: var(--text);
}

/* ============================================================
   CTA strip
   ============================================================ */
.cta-strip {
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
    border-radius: var(--radius-xl);
    padding: 60px;
    color: #fff;
    text-align: center;
    box-shadow: var(--shadow-brand);
    position: relative;
    overflow: hidden;
}

.cta-strip::before,
.cta-strip::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    pointer-events: none;
}

.cta-strip::before {
    width: 400px;
    height: 400px;
    top: -200px;
    right: -120px;
}

.cta-strip::after {
    width: 280px;
    height: 280px;
    bottom: -140px;
    left: -80px;
}

.cta-strip h2 {
    color: #fff;
    position: relative;
    margin-bottom: 16px;
}

.cta-strip p {
    color: rgba(255, 255, 255, .9);
    font-size: var(--fs-lg);
    position: relative;
    margin-bottom: 28px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.cta-strip .btn {
    position: relative;
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
    background: var(--bg-dark);
    color: #94a3b8;
    padding: 70px 0 32px;
}

.site-footer h5 {
    color: #fff;
    font-size: var(--fs-sm);
    margin-bottom: 20px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.site-footer__grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
    gap: 48px;
    margin-bottom: 32px;
}

.site-footer .nav__brand {
    color: #fff;
    margin-bottom: 16px;
}

.site-footer p {
    font-size: var(--fs-sm);
    color: #94a3b8;
}

.site-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.site-footer ul li {
    padding: 6px 0;
}

.site-footer ul a {
    color: #94a3b8;
    font-size: var(--fs-sm);
    transition: color .2s;
}

.site-footer ul a:hover {
    color: var(--brand);
}

.site-footer__bottom {
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--fs-sm);
    color: #64748b;
}

.site-footer__social {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

.site-footer__social a {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .06);
    color: #cbd5e1;
    display: grid;
    place-items: center;
    transition: all .2s;
}

.site-footer__social a:hover {
    background: var(--brand);
    color: #fff;
    transform: translateY(-2px);
}

/* ============================================================
   Misc
   ============================================================ */
.note {
    background: var(--brand-soft);
    border-left: 4px solid var(--brand);
    border-radius: 0 12px 12px 0;
    padding: 18px 24px;
    color: var(--ink-soft);
    margin: 24px 0;
}

.tag {
    display: inline-block;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 999px;
    background: var(--brand-light);
    color: var(--brand-dark);
    letter-spacing: .04em;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 992px) {
    h1 {
        font-size: 36px;
    }

    h2 {
        font-size: 30px;
    }

    .section {
        padding: 64px 0;
    }

    .hero {
        padding: 56px 0 80px;
    }

    .hero__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .mockup {
        transform: none;
    }

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

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

    .module-split {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .module-split--reverse .module-split__visual {
        order: 0;
    }

    .dgii-grid {
        grid-template-columns: 1fr;
    }

    .site-footer__grid {
        grid-template-columns: 1fr 1fr;
    }

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

@media (max-width: 720px) {

    .nav__menu,
    .nav__actions > .btn--primary {
        display: none;
    }

    .nav__toggle {
        display: grid;
        place-items: center;
    }

    /* Menú de cuenta: en móvil colapsa a un solo botón con dropdown */
    .nav__user-trigger {
        display: inline-flex;
    }

    .nav__user-panel {
        display: none;
        position: absolute;
        top: calc(100% + 6px);
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        min-width: 180px;
        padding: 10px;
        background: var(--bg);
        border: 1px solid var(--line);
        border-radius: 12px;
        box-shadow: var(--shadow);
        z-index: 50;
    }

    .nav__user.is-open .nav__user-panel {
        display: flex;
    }

    .nav__user-panel .btn--ghost,
    .nav__user-panel .btn--primary {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .nav.is-open .nav__menu {
        display: flex;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--bg);
        flex-direction: column;
        padding: 16px;
        border-top: 1px solid var(--line);
        box-shadow: var(--shadow);
        gap: 4px;
    }

    .nav.is-open .nav__menu a {
        padding: 14px 16px;
    }

    /* Submenú móvil: inline, oculto por defecto, expandible al tap del padre */
    .nav.is-open .nav__submenu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: none;
        box-shadow: none;
        border: 0;
        border-left: 2px solid var(--brand-light);
        border-radius: 0;
        margin: 0 0 8px 12px;
        padding: 4px 0 4px 8px;
        background: transparent;
        max-height: 0;
        overflow: hidden;
        pointer-events: none;
    }

    .nav.is-open .nav__has-sub.is-open .nav__submenu {
        max-height: 600px;
        pointer-events: auto;
        padding: 8px 0 8px 8px;
    }

    .nav.is-open .nav__has-sub.is-open > a .nav__caret {
        transform: rotate(180deg);
    }

    h1 {
        font-size: 30px;
    }

    h2 {
        font-size: 24px;
    }

    .grid-4,
    .grid-3,
    .grid-2 {
        grid-template-columns: 1fr;
    }

    .dgii-reports {
        grid-template-columns: repeat(2, 1fr);
    }

    .stats {
        grid-template-columns: 1fr 1fr;
    }

    .site-footer__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .site-footer__bottom {
        flex-direction: column;
        gap: 12px;
    }

    .cta-strip {
        padding: 40px 24px;
    }
}

/* ============================================================
   Tema oscuro
   ============================================================
   Solo se redefinen los tokens de :root. Ninguna regla de
   componente cambia: como el grueso del archivo ya usa
   var(--token), al cambiar el token cambia el sitio entero.

   El atributo data-theme lo pone un script en el <head> del
   layout, antes del primer pintado, para que no haya destello.
   ============================================================ */
[data-theme="dark"] {
    /* Neutros invertidos */
    --ink: #e8edf4;
    --ink-soft: #c2ccd9;
    --text: #a8b4c4;
    --muted: #8a96a6;
    --line: #26333f;
    --line-soft: #1c2833;

    /* Superficies */
    --bg: #0f1620;
    --bg-soft: #141d29;
    --bg-dark: #0a1119;

    /* La marca se aclara un punto para mantener contraste sobre fondo oscuro */
    --brand: #14c4ae;
    --brand-dark: #0ab09c;
    --brand-darker: #4dd8c6;
    --brand-light: #14312e;
    --brand-soft: #102624;

    /* En oscuro las sombras se perciben como halo: se bajan */
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, .3);
    --shadow: 0 6px 24px rgba(0, 0, 0, .4);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, .55);
    --shadow-brand: 0 12px 32px rgba(10, 176, 156, .2);

    color-scheme: dark;
}

[data-theme="dark"] body {
    background: var(--bg);
}

/* El header lleva un color literal en su regla original. */
[data-theme="dark"] .site-header {
    background: rgba(15, 22, 32, .92);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .04);
}

/* ============================================================
   Avisos de formulario (envio correcto / errores de validacion)
   ============================================================ */
.form-alert {
    padding: 14px 18px;
    border-radius: var(--radius);
    border: 1px solid transparent;
    font-size: var(--fs-sm);
}

.form-alert ul {
    margin: 0;
    padding-left: 18px;
}

.form-alert--ok {
    background: #e8faf2;
    border-color: #b6e8d2;
    color: #0a6b50;
}

.form-alert--err {
    background: #fdecef;
    border-color: #f6c4ce;
    color: #8a1f33;
}

/* En oscuro el mismo matiz, pero profundo: el fondo se hunde y la tinta se
   aclara, que es la inversion que el recuadro necesita para seguir leyendose. */
[data-theme="dark"] .form-alert--ok {
    background: #102b22;
    border-color: #1d4536;
    color: #5fd6ab;
}

[data-theme="dark"] .form-alert--err {
    background: #2e1720;
    border-color: #4a2430;
    color: #f08ea2;
}


/* Chips de color de las tarjetas destacadas. Su fondo es un pastel literal
   —no sale de ningun token—, asi que en oscuro quedaba como un parche claro
   sobre la seccion. Se sustituye por el mismo matiz en version profunda; el
   color del icono se aclara para conservar el contraste. */
[data-theme="dark"] .feature--gold .feature__icon {
    background: #33280f;
    color: #e5b45f;
}

[data-theme="dark"] .feature--rose .feature__icon {
    background: #33191f;
    color: #f08ea2;
}

[data-theme="dark"] .feature--indigo .feature__icon {
    background: #1e2244;
    color: #9aa5f5;
}

/* El borde del bloque destacado es un verde muy claro literal: en oscuro
   dibujaba un marco brillante alrededor del modulo. */
[data-theme="dark"] .module-split__visual {
    border-color: var(--line);
}

/* Aqui habia una lista de overrides para .card, .feature-card, .price-card y
   .faq__item: clases que NO existen en esta hoja. Se escribieron a ojo en vez
   de leer el CSS, y por eso el tema oscuro dejaba tarjetas blancas con texto
   claro encima, ilegibles.

   La solucion no son mas overrides: las superficies reales —.feature, .plan,
   .faq, .post-card, .testimonial, .mockup, .nav__submenu, .hero__eyebrow,
   .dgii-card— ya usan `background: var(--bg)` en su propia regla, asi que
   siguen el token sin necesidad de nada mas. */

/* Transición al alternar el tema. Se limita a lo que cambia de color para no
   penalizar el resto de animaciones de la página. */
body,
.site-header,
.promo__card {
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

/* Quien pida menos movimiento no recibe la transición. */
@media (prefers-reduced-motion: reduce) {

    body,
    .site-header,
    .promo__card,
    .promo,
    .theme-toggle {
        transition: none;
    }
}


/* ============================================================
   Botón de cambio de tema (header)
   ============================================================ */
.theme-toggle {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--ink-soft);
    font-size: 15px;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease;
}

.theme-toggle:hover {
    border-color: var(--brand);
    color: var(--brand-dark);
}

/* Se muestra el icono del tema al que se cambiaría. */
[data-theme="light"] .theme-toggle__sun,
[data-theme="dark"] .theme-toggle__moon {
    display: none;
}


/* ============================================================
   Modal promocional
   ============================================================
   Un solo mensaje por aparición: no hay carrusel ni controles de
   navegación. El marcado lo genera v2/include/promo_modal.php.
   ============================================================ */
.promo {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(15, 29, 44, .45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
}

.promo.is-open {
    opacity: 1;
    visibility: visible;
}

.promo__card {
    position: relative;
    width: 100%;
    max-width: 430px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 34px 30px 26px;
    text-align: center;
    transform: translateY(12px) scale(.98);
    transition: transform .25s cubic-bezier(.2, .8, .3, 1);
}

.promo.is-open .promo__card {
    transform: none;
}

.promo__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .2s, color .2s;
}

.promo__close:hover,
.promo__close:focus-visible {
    background: var(--line-soft);
    color: var(--ink);
}

.promo__icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 18px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: var(--brand-light);
    color: var(--brand-dark);
    font-size: 22px;
}

.promo__title {
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--ink);
    line-height: 1.3;
    letter-spacing: -.01em;
    margin: 0 0 8px;
}

.promo__text {
    font-size: var(--fs-sm);
    color: var(--text);
    line-height: 1.6;
    margin: 0 0 20px;
}

.promo__highlight {
    text-align: left;
    background: var(--brand-soft);
    border: 1px solid var(--brand-light);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 16px;
}

.promo__highlight-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--brand-darker);
    margin-bottom: 6px;
}

.promo__highlight-text {
    font-size: 13px;
    color: var(--text);
    line-height: 1.55;
    margin: 0;
}

.promo__note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 12.5px;
    color: var(--muted);
    margin: 0 0 18px;
}

.promo__note a {
    color: var(--brand-dark);
    font-weight: 600;
}

.promo__cta {
    width: 100%;
    justify-content: center;
}

@media (max-width: 480px) {
    .promo__card {
        padding: 30px 22px 22px;
    }

    .promo__title {
        font-size: var(--fs-lg);
    }
}


/* ============================================================
   Aviso de cookies
   ============================================================
   Todo con tokens, así que sigue el tema claro/oscuro sin
   reglas aparte. El aviso se ancla abajo y no bloquea la
   navegación; el panel de preferencias sí es modal, porque
   ahí se está tomando una decisión.
   ============================================================ */
.cc[hidden] {
    display: none;
}

.cc__banner {
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%) translateY(14px);
    z-index: 2200;
    width: min(920px, calc(100vw - 32px));
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 20px 24px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transition: opacity .25s ease, transform .25s cubic-bezier(.2, .8, .3, 1);
}

.cc.is-open .cc__banner {
    opacity: 1;
    transform: translateX(-50%);
}

.cc__body {
    flex: 1;
    min-width: 0;
}

.cc__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-base);
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 6px;
}

.cc__title .fa {
    color: var(--brand);
}

.cc__text {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text);
    margin: 0;
}

.cc__text a {
    color: var(--brand-dark);
    font-weight: 600;
    text-decoration: underline;
}

/* Los tres botones comparten tamaño: rechazar no puede costar más que aceptar. */
.cc__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
}

.cc__btn {
    white-space: nowrap;
}

/* ── Panel de preferencias ─────────────────────────────────── */
.cc__panel {
    position: fixed;
    inset: 0;
    z-index: 2300;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(15, 29, 44, .5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.cc__panel[hidden] {
    display: none;
}

.cc__panel-card {
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 26px 28px 22px;
}

.cc__panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 6px;
}

.cc__panel-title {
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    letter-spacing: -.01em;
}

.cc__close {
    flex: none;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .2s, color .2s;
}

.cc__close:hover,
.cc__close:focus-visible {
    background: var(--line-soft);
    color: var(--ink);
}

.cc__panel-intro {
    font-size: 13.5px;
    color: var(--text);
    line-height: 1.6;
    margin: 0 0 18px;
}

.cc__group {
    padding: 16px 0;
    border-top: 1px solid var(--line-soft);
}

.cc__group-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.cc__group-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 4px;
}

.cc__tag {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--brand-light);
    color: var(--brand-dark);
}

.cc__group-text {
    font-size: 13px;
    line-height: 1.55;
    color: var(--text);
    margin: 0 0 4px;
}

.cc__group-detail {
    font-size: 12px;
    line-height: 1.5;
    color: var(--muted);
    margin: 0;
}

.cc__group-detail code {
    font-size: 11.5px;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--bg-soft);
    border: 1px solid var(--line-soft);
    color: var(--ink-soft);
}

/* ── Interruptor ───────────────────────────────────────────── */
.cc__switch {
    flex: none;
    position: relative;
    display: inline-block;
    width: 42px;
    height: 24px;
    margin-top: 2px;
}

.cc__switch input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.cc__slider {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: var(--line);
    transition: background-color .2s ease;
    pointer-events: none;
}

.cc__slider::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--bg);
    box-shadow: var(--shadow-sm);
    transition: transform .2s ease;
}

.cc__switch input:checked ~ .cc__slider {
    background: var(--brand);
}

.cc__switch input:checked ~ .cc__slider::before {
    transform: translateX(18px);
}

.cc__switch input:focus-visible ~ .cc__slider {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* Las necesarias se ven activas pero no se pueden tocar. */
.cc__switch.is-locked input {
    cursor: not-allowed;
}

.cc__switch.is-locked .cc__slider {
    background: var(--brand);
    opacity: .55;
}

.cc__panel-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 18px;
    border-top: 1px solid var(--line-soft);
}

.cc__panel-legal {
    font-size: 11.5px;
    line-height: 1.55;
    color: var(--muted);
    margin: 14px 0 0;
}

.cc__panel-legal a {
    color: var(--brand-dark);
    text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {

    .cc__banner,
    .cc__slider,
    .cc__slider::before {
        transition: none;
    }
}

@media (max-width: 720px) {
    .cc__banner {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        bottom: 10px;
        padding: 18px;
    }

    .cc__actions {
        flex-wrap: wrap;
    }

    /* En móvil los tres ocupan el ancho por igual: ninguno destaca sobre otro. */
    .cc__btn {
        flex: 1 1 auto;
        justify-content: center;
    }

    .cc__panel-card {
        padding: 22px 20px 18px;
    }

    .cc__panel-actions {
        flex-direction: column-reverse;
    }

    .cc__panel-actions .btn {
        width: 100%;
        justify-content: center;
    }
}