/* ==========================================================================
   CONECTA2NIC - Sitio público (sobre Bootstrap 5.3 + theme.css)
   ========================================================================== */

:root {
    --site-header-h: 72px;
    --band-bg: var(--c2n-blue);
    --band-bg-deep: var(--c2n-blue-800);
    --footer-bg: var(--c2n-blue-900);
}
[data-bs-theme="dark"] {
    --band-bg: #0F3A60;
    --band-bg-deep: #0A2A47;
    --footer-bg: #070C18;
}

html { scroll-padding-top: calc(var(--site-header-h) + 1rem); }
body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1; }

.skip-link { position: absolute; left: 1rem; top: 0.5rem; z-index: 2000; background: var(--c2n-ink); color: #fff; padding: 0.5rem 1rem; border-radius: var(--bs-border-radius-sm); }

/* Tipografía de secciones ------------------------------------------------- */
.eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c2n-link); margin-bottom: 0.75rem; }
.eyebrow::before { content: ''; width: 1.5rem; height: 2px; background: var(--c2n-yellow); }
.section-title { font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.25rem); margin-bottom: 0.75rem; }
.section-lead { font-size: 1.0625rem; color: var(--bs-secondary-color); max-width: 42rem; }
.section-head { margin-bottom: 3rem; }
.section-head.text-center .section-lead { margin-inline: auto; }
.section-head.text-center .eyebrow::after { content: ''; width: 1.5rem; height: 2px; background: var(--c2n-yellow); }

.section { padding: 4.5rem 0; }
.section-alt { background: var(--c2n-surface-alt); border-block: 1px solid var(--bs-border-color); }
@media (min-width: 992px) { .section { padding: 6rem 0; } }

/* Bandas de marca (fondo azul sólido) */
.band { background: var(--band-bg); color: #fff; }
.band h1, .band h2, .band h3 { color: #fff; }
.band .eyebrow { color: var(--c2n-yellow); }
.band .section-lead, .band .band-muted { color: rgba(255, 255, 255, 0.82); }
/* Tarjetas claras dentro de una banda: recuperan los colores normales */
.band .form-panel, .band .plan-card { color: var(--bs-body-color); }
.band .form-panel h2, .band .form-panel h3 { color: var(--bs-heading-color); }

/* Header ----------------------------------------------------------------- */
.site-header { background: var(--c2n-surface); border-bottom: 1px solid var(--bs-border-color); box-shadow: inset 0 3px 0 var(--c2n-blue); }
.site-header .navbar { min-height: var(--site-header-h); padding-block: 0.75rem; }
.site-header .navbar-brand img { height: 42px; width: auto; }
.site-header .nav-link {
    position: relative; font-size: 0.9375rem; font-weight: 500; color: var(--bs-secondary-color);
    padding: 0.5rem 0.875rem !important; border-radius: var(--bs-border-radius-sm);
    transition: color var(--c2n-fast) var(--c2n-ease), background-color var(--c2n-fast) var(--c2n-ease);
}
.site-header .nav-link:hover { color: var(--bs-body-color); background: var(--bs-tertiary-bg); }
.site-header .nav-link.active { color: var(--c2n-link); font-weight: 600; }
@media (min-width: 992px) {
    .site-header .nav-link.active::after { content: ''; position: absolute; left: 0.875rem; right: 0.875rem; bottom: -0.95rem; height: 3px; border-radius: 3px 3px 0 0; background: var(--c2n-yellow); }
    .site-header .offcanvas { flex-grow: 1; }
}
@media (max-width: 991.98px) {
    .site-header .nav-link { font-size: 1rem; padding: 0.75rem !important; }
    .site-header .nav-link.active { background: var(--c2n-blue-50); }
}

/* Hero ------------------------------------------------------------------- */
.hero { padding: 4.5rem 0 5rem; position: relative; overflow: hidden; }
.hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--c2n-yellow); }
.hero h1 { font-size: clamp(2.25rem, 1.5rem + 3vw, 3.5rem); line-height: 1.08; margin-bottom: 1.25rem; }
.hero h1 .accent { color: var(--c2n-yellow); }
.hero-lead { font-size: 1.125rem; color: rgba(255, 255, 255, 0.85); max-width: 36rem; margin-bottom: 2rem; }
@media (min-width: 992px) { .hero { padding: 6rem 0 6.5rem; } }

.hero-search { display: flex; gap: 0.5rem; max-width: 34rem; padding: 0.375rem; background: #fff; border-radius: var(--bs-border-radius-lg); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.45); }
.hero-search .search-field { position: relative; flex: 1; display: flex; align-items: center; }
.hero-search .search-field .icon { position: absolute; left: 0.875rem; color: #64748B; pointer-events: none; }
.hero-search input { border: 0; background: transparent; color: #0F172A; height: 2.75rem; padding-left: 2.5rem; box-shadow: none !important; }
.hero-search input::placeholder { color: #64748B; }
[data-bs-theme="dark"] .hero-search { background: #111827; }
[data-bs-theme="dark"] .hero-search input { color: #F8FAFC; }

.btn-on-band {
    --bs-btn-color: #fff; --bs-btn-border-color: rgba(255, 255, 255, 0.45);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: rgba(255, 255, 255, 0.1); --bs-btn-hover-border-color: #fff;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: rgba(255, 255, 255, 0.16); --bs-btn-active-border-color: #fff;
    --bs-btn-focus-shadow-rgb: 255, 255, 255;
}

.hero-media { position: relative; }
.hero-media .ratio { border-radius: var(--bs-border-radius-xl); overflow: hidden; box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 255, 255, 0.18); }
.hero-media img { object-fit: cover; }
.hero-card {
    position: absolute; left: -1.5rem; bottom: -1.75rem; width: min(16rem, 70%);
    background: var(--c2n-surface); color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-lg);
    box-shadow: var(--c2n-shadow-md); padding: 1rem;
}
.hero-card .mini-book { display: flex; gap: 3px; height: 4.25rem; margin-bottom: 0.75rem; }
.hero-card .mini-book span { flex: 1; border-radius: 3px; background: var(--c2n-blue-50); border: 1px solid var(--bs-border-color); position: relative; }
.hero-card .mini-book span:first-child::before { content: ''; position: absolute; inset: 0.5rem; border-top: 3px solid var(--c2n-yellow); border-bottom: 2px solid var(--bs-border-color); }
.hero-card .mini-book span:last-child::before { content: ''; position: absolute; left: 0.5rem; right: 0.5rem; top: 0.5rem; height: 1.5rem; border-radius: 2px; background: var(--c2n-blue); opacity: 0.85; }
.hero-card-title { font-size: 0.875rem; font-weight: 600; }
.hero-card-meta { font-size: 0.75rem; color: var(--c2n-subtle); display: flex; align-items: center; gap: 0.375rem; }
.hero-card-meta .icon { color: var(--c2n-blue); }
@media (max-width: 575.98px) { .hero-card { left: 0.75rem; bottom: -1.25rem; } }

/* Beneficios -------------------------------------------------------------- */
.feature { height: 100%; padding: 1.75rem; background: var(--c2n-surface); border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-lg); border-top: 3px solid var(--c2n-blue); transition: border-color var(--c2n-base) var(--c2n-ease), box-shadow var(--c2n-base) var(--c2n-ease); }
.feature:hover { box-shadow: var(--c2n-shadow-md); border-top-color: var(--c2n-yellow); }
.feature h3 { font-size: 1.0625rem; margin-bottom: 0.5rem; }
.feature p { font-size: 0.9375rem; color: var(--bs-secondary-color); margin: 0; }

/* Composición: vista previa de un sitio de cliente */
.showcase { background: var(--c2n-surface); border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-xl); box-shadow: var(--c2n-shadow-md); overflow: hidden; }
.showcase-bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1rem; border-bottom: 1px solid var(--bs-border-color); background: var(--bs-tertiary-bg); }
.showcase-bar i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--bs-border-color); }
.showcase-url { margin-left: 0.5rem; flex: 1; font-size: 0.75rem; color: var(--c2n-subtle); background: var(--c2n-surface); border: 1px solid var(--bs-border-color); border-radius: 999px; padding: 0.125rem 0.75rem; }
.showcase-body { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1rem; padding: 1.25rem; }
.showcase-hero { grid-column: 1 / -1; height: 6rem; border-radius: var(--bs-border-radius); background: var(--c2n-blue); position: relative; }
.showcase-hero::before { content: ''; position: absolute; left: 1.25rem; top: 1.5rem; width: 45%; height: 0.75rem; border-radius: 3px; background: rgba(255,255,255,0.85); }
.showcase-hero::after { content: ''; position: absolute; left: 1.25rem; top: 3.25rem; width: 5rem; height: 1.25rem; border-radius: 4px; background: var(--c2n-yellow); }
.showcase-book { display: flex; gap: 3px; height: 9rem; }
.showcase-book span { flex: 1; border: 1px solid var(--bs-border-color); border-radius: 3px; background: var(--c2n-surface-alt); }
.showcase-map { position: relative; height: 9rem; border-radius: var(--bs-border-radius); background: var(--bs-secondary-bg); overflow: hidden; }
.showcase-map::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(var(--bs-border-color) 1px, transparent 1px), linear-gradient(90deg, var(--bs-border-color) 1px, transparent 1px); background-size: 1.25rem 1.25rem; }
.showcase-map .icon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -80%); color: var(--c2n-blue); }
[data-bs-theme="dark"] .showcase-map .icon { color: var(--c2n-yellow); }
.showcase-caption { font-size: 0.75rem; color: var(--c2n-subtle); margin-top: 0.5rem; }

/* Planes ------------------------------------------------------------------ */
.billing-switch { display: inline-flex; padding: 0.25rem; background: var(--c2n-surface); border: 1px solid var(--bs-border-color); border-radius: 999px; }
.billing-switch button { border: 0; background: transparent; color: var(--bs-secondary-color); font-size: 0.875rem; font-weight: 500; padding: 0.5rem 1.125rem; border-radius: 999px; transition: background-color var(--c2n-fast) var(--c2n-ease), color var(--c2n-fast) var(--c2n-ease); }
.billing-switch button[aria-pressed="true"] { background: var(--c2n-blue); color: #fff; }
.billing-switch .badge { margin-left: 0.375rem; }

.plan-card { display: flex; flex-direction: column; height: 100%; padding: 2rem; background: var(--c2n-surface); border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-lg); transition: border-color var(--c2n-base) var(--c2n-ease), box-shadow var(--c2n-base) var(--c2n-ease); }
.plan-card:hover { border-color: #CBD5E1; box-shadow: var(--c2n-shadow-md); }
[data-bs-theme="dark"] .plan-card:hover { border-color: rgba(255,255,255,0.16); }
.plan-card.is-featured { border: 2px solid var(--c2n-blue); box-shadow: inset 0 4px 0 var(--c2n-yellow), var(--c2n-shadow-md); }
[data-bs-theme="dark"] .plan-card.is-featured { border-color: #5B96CC; }
.plan-name { font-family: var(--bs-font-sans-serif); font-size: 1.25rem; font-weight: 600; margin: 0; }
.plan-desc { font-size: 0.9375rem; color: var(--bs-secondary-color); margin-bottom: 1.5rem; }
.plan-price { display: flex; align-items: baseline; gap: 0.375rem; }
.plan-currency { font-size: 1rem; font-weight: 600; color: var(--bs-secondary-color); }
.plan-amount { font-family: 'Exo 2', var(--bs-font-sans-serif); font-size: 2.75rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.plan-period { font-size: 0.875rem; color: var(--c2n-subtle); }
.plan-note { font-size: 0.8125rem; color: var(--c2n-subtle); margin: 0.5rem 0 0; min-height: 1.25rem; }
.plan-list { list-style: none; padding: 1.5rem 0 0; margin: 1.5rem 0 2rem; border-top: 1px solid var(--bs-border-color); display: grid; gap: 0.75rem; flex: 1; align-content: start; }
.plan-list li { display: flex; gap: 0.625rem; font-size: 0.9375rem; }
.plan-list .icon { color: var(--bs-success); margin-top: 0.2rem; }
[data-bs-theme="dark"] .plan-list .icon { color: #34D399; }

.compare-table { min-width: 640px; margin: 0; }
.compare-table th, .compare-table td { padding: 1rem 1.25rem; text-align: center; vertical-align: middle; }
.compare-table th:first-child, .compare-table td:first-child { text-align: left; font-weight: 500; }
.compare-table thead th { background: var(--band-bg); color: #fff; font-weight: 600; border: 0; }
.compare-table thead th.is-featured { box-shadow: inset 0 -3px 0 var(--c2n-yellow); }
.compare-table td.is-featured { background: var(--c2n-blue-50); }
.compare-table .icon-yes { color: var(--bs-success); }
[data-bs-theme="dark"] .compare-table .icon-yes { color: #34D399; }
.compare-table .icon-no { color: var(--c2n-subtle); opacity: 0.6; }
.compare-wrap { border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-lg); overflow: hidden; background: var(--c2n-surface); }
.compare-wrap .table-responsive { position: relative; }

.accordion { --bs-accordion-bg: var(--c2n-surface); --bs-accordion-border-color: var(--bs-border-color); --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem var(--bs-focus-ring-color); --bs-accordion-active-bg: var(--c2n-blue-50); --bs-accordion-active-color: var(--bs-body-color); --bs-accordion-btn-padding-y: 1.125rem; }
.accordion-button { font-weight: 600; }

/* Clientes ---------------------------------------------------------------- */
.filter-bar { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; margin-bottom: 2rem; }
.chip-group { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { border: 1px solid var(--bs-border-color); background: var(--c2n-surface); color: var(--bs-secondary-color); font-size: 0.875rem; font-weight: 500; padding: 0.4375rem 1rem; border-radius: 999px; transition: color var(--c2n-fast) var(--c2n-ease), background-color var(--c2n-fast) var(--c2n-ease), border-color var(--c2n-fast) var(--c2n-ease); }
.chip:hover { color: var(--bs-body-color); border-color: #CBD5E1; }
.chip[aria-pressed="true"] { background: var(--c2n-blue); border-color: var(--c2n-blue); color: #fff; }
.filter-search { position: relative; min-width: min(100%, 18rem); }
.filter-search .icon { position: absolute; left: 0.875rem; top: 50%; transform: translateY(-50%); color: var(--c2n-subtle); pointer-events: none; }
.filter-search .form-control { padding-left: 2.5rem; border-radius: 999px; }
.filter-count { font-size: 0.875rem; color: var(--c2n-subtle); }

.client-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); }
.client-card { display: flex; flex-direction: column; background: var(--c2n-surface); border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-lg); overflow: hidden; transition: border-color var(--c2n-base) var(--c2n-ease), box-shadow var(--c2n-base) var(--c2n-ease); }
.client-card:hover { border-color: var(--c2n-blue); box-shadow: var(--c2n-shadow-md); }
.client-logo { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; background: #fff; border-bottom: 1px solid var(--bs-border-color); padding: 1.5rem; }
.client-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.client-initials { display: inline-flex; align-items: center; justify-content: center; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--c2n-blue); color: #fff; font-family: 'Exo 2', sans-serif; font-weight: 700; font-size: 1.5rem; }
.client-body { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.375rem; flex: 1; }
.client-category { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c2n-link); }
.client-name { font-family: var(--bs-font-sans-serif); font-size: 1.0625rem; font-weight: 600; margin: 0; }
.client-desc { font-size: 0.875rem; color: var(--bs-secondary-color); margin: 0; }
.client-link { margin-top: auto; padding-top: 0.75rem; display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; font-weight: 600; text-decoration: none; }

.empty-state { max-width: 34rem; margin: 0 auto; padding: 3rem 1.5rem; text-align: center; border: 1px dashed var(--bs-border-color); border-radius: var(--bs-border-radius-lg); background: var(--c2n-surface); }
.empty-state h2 { font-size: 1.375rem; margin-bottom: 0.5rem; }
.empty-state p { color: var(--bs-secondary-color); }

/* Nosotros ---------------------------------------------------------------- */
.media-frame { border-radius: var(--bs-border-radius-xl); overflow: hidden; border: 1px solid var(--bs-border-color); box-shadow: var(--c2n-shadow-md); }
.media-frame img { object-fit: cover; }
.statement { border-left: 3px solid var(--c2n-yellow); padding-left: 1.25rem; }
.value-card { height: 100%; padding: 1.75rem; background: var(--c2n-surface); border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-lg); }
.value-card h3 { font-size: 1.125rem; margin-bottom: 0.75rem; }
.value-card p { color: var(--bs-secondary-color); margin: 0; }

.team-card { display: flex; flex-direction: column; height: 100%; background: var(--c2n-surface); border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-lg); overflow: hidden; transition: box-shadow var(--c2n-base) var(--c2n-ease); }
.team-card:hover { box-shadow: var(--c2n-shadow-md); }
.team-photo { background: var(--c2n-blue-50); }
.team-photo img { object-fit: cover; }
.team-photo .team-initials { display: flex; align-items: center; justify-content: center; background: var(--c2n-blue); color: #fff; font-family: 'Exo 2', sans-serif; font-size: 2.5rem; font-weight: 700; }
.team-body { padding: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.team-name { font-family: var(--bs-font-sans-serif); font-size: 1.125rem; font-weight: 600; margin: 0; }
.team-role { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--c2n-link); }
.team-bio { font-size: 0.9375rem; color: var(--bs-secondary-color); margin: 0.25rem 0 0; }

/* Contacto ---------------------------------------------------------------- */
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.25rem; }
.contact-list li { display: flex; gap: 1rem; }
.contact-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; flex: 0 0 2.5rem; border-radius: var(--bs-border-radius); background: rgba(255, 255, 255, 0.12); color: var(--c2n-yellow); }
.contact-list h3 { font-family: var(--bs-font-sans-serif); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255,255,255,0.7); margin: 0 0 0.125rem; }
.contact-list a, .contact-list p { color: #fff; margin: 0; text-decoration: none; }
.contact-list a:hover { text-decoration: underline; }
.contact-panel { border-radius: var(--bs-border-radius-xl); padding: 2rem; height: 100%; }
.form-panel { background: var(--c2n-surface); border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-xl); padding: 2rem; box-shadow: var(--c2n-shadow-sm); }
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Diseños (galería de bloques) -------------------------------------------- */
.block-card { display: flex; flex-direction: column; height: 100%; background: var(--c2n-surface); border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-lg); overflow: hidden; transition: border-color var(--c2n-base) var(--c2n-ease), box-shadow var(--c2n-base) var(--c2n-ease); }
.block-card:hover { border-color: var(--c2n-blue); box-shadow: var(--c2n-shadow-md); }
.block-body { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.block-body h3 { font-family: var(--bs-font-sans-serif); font-size: 1rem; font-weight: 600; margin: 0; }
.block-body p { font-size: 0.875rem; color: var(--bs-secondary-color); margin: 0; }
.wf { height: 9.5rem; padding: 1.25rem; background: var(--c2n-surface-alt); border-bottom: 1px solid var(--bs-border-color); display: flex; flex-direction: column; justify-content: center; gap: 0.5rem; }
.wf i { display: block; background: var(--bs-border-color); border-radius: 3px; height: 0.5rem; }
.wf .w-40 { width: 40%; } .wf .w-60 { width: 60%; } .wf .w-80 { width: 80%; } .wf .w-100 { width: 100%; }
.wf .h-lg { height: 0.875rem; background: #CBD5E1; }
[data-bs-theme="dark"] .wf .h-lg { background: rgba(255,255,255,0.18); }
.wf .btn-wf { width: 4.5rem; height: 1.25rem; background: var(--c2n-yellow); margin-top: 0.5rem; }
.wf-row { display: flex; gap: 0.5rem; }
.wf-row > * { flex: 1; }
.wf .tile { height: 3.5rem; background: var(--c2n-surface); border: 1px solid var(--bs-border-color); border-radius: 4px; }
.wf .tile-sm { height: 1.5rem; }
.wf .dot { width: 2.25rem; height: 2.25rem; border-radius: 50%; flex: 0 0 2.25rem; background: var(--c2n-blue); opacity: 0.5; }
.wf .map { flex: 1; background: var(--bs-secondary-bg); border-radius: 4px; position: relative; }
.wf .map::after { content: ''; position: absolute; left: 50%; top: 45%; width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--c2n-blue); box-shadow: 0 0 0 4px rgba(26, 91, 147, 0.2); }
.wf .num { font-family: 'Exo 2', sans-serif; font-weight: 700; color: var(--c2n-link); font-size: 1.25rem; text-align: center; }
.wf .book { display: flex; height: 100%; gap: 2px; justify-content: center; }
.wf .book span { width: 38%; background: var(--c2n-surface); border: 1px solid var(--bs-border-color); border-radius: 2px; }
.wf-hero { background: var(--c2n-blue); }
.wf-hero i { background: rgba(255,255,255,0.35); }
.wf-hero .h-lg { background: rgba(255,255,255,0.85); }
.wf-dashed { border: 1px dashed #CBD5E1; margin: 0.75rem; height: 8rem; border-radius: 4px; align-items: center; font-size: 0.75rem; color: var(--c2n-subtle); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* Banda de llamada a la acción --------------------------------------------- */
.cta-band { padding: 4rem 0; }
.cta-band h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }

/* Footer ------------------------------------------------------------------ */
.site-footer { background: var(--footer-bg); color: rgba(255, 255, 255, 0.75); padding: 4rem 0 1.5rem; font-size: 0.9375rem; border-top: 4px solid var(--c2n-yellow); }
.site-footer img { height: 48px; width: auto; }
.footer-text { max-width: 22rem; }
.footer-title { font-family: var(--bs-font-sans-serif); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; margin-bottom: 1rem; }
.footer-links { display: grid; gap: 0.75rem; margin: 0; }
.footer-links a { color: rgba(255, 255, 255, 0.75); text-decoration: none; transition: color var(--c2n-fast) var(--c2n-ease); }
.footer-links a:hover { color: var(--c2n-yellow); }
.footer-contact li { display: flex; gap: 0.75rem; align-items: flex-start; }
.footer-contact .icon { color: var(--c2n-yellow); margin-top: 0.2rem; }
.footer-social { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: var(--bs-border-radius); border: 1px solid rgba(255, 255, 255, 0.18); color: #fff; transition: background-color var(--c2n-fast) var(--c2n-ease), color var(--c2n-fast) var(--c2n-ease), border-color var(--c2n-fast) var(--c2n-ease); }
.footer-social:hover { background: var(--c2n-yellow); border-color: var(--c2n-yellow); color: var(--c2n-ink); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 0.8125rem; color: rgba(255, 255, 255, 0.55); }
.narrow-52 { max-width: 52rem; }