/* ==========================================================================
   EderGope.co / EOS™ — CSS global nativo (sin Tailwind, sin build)
   Tokens visuales tomados de las vistas Stitch (DESIGN.md "Executive Intellectual")
   ========================================================================== */

:root {
  /* Paleta principal */
  --color-navy: #071426;
  --color-blue: #274C77;
  --color-blue-soft: #4A6FA5;
  --color-white: #FFFFFF;
  --color-ice: #F3F7FB;
  --color-text-muted: #5F6F82;

  /* Estados */
  --color-error: #BA1A1A;
  --color-border: rgba(39, 76, 119, 0.12);
  --color-border-strong: rgba(7, 20, 38, 0.16);

  /* Tipografía */
  --font-display: 'Hanken Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-label: 'Geist', sans-serif;

  /* Escalas tipográficas (Stitch DESIGN.md) */
  --fs-display: 64px;
  --fs-headline-lg: 48px;
  --fs-headline-md: 32px;
  --fs-headline-sm: 24px;
  --fs-body-lg: 18px;
  --fs-body-md: 16px;
  --fs-label-md: 14px;

  /* Espaciado */
  --unit: 8px;
  --container-max: 1200px;
  --gutter: 24px;
  --section-padding-desktop: 120px;
  --section-padding-mobile: 60px;

  /* Radios */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 999px;

  /* Sombras */
  --shadow-card: 0px 12px 32px rgba(7, 20, 38, 0.05);
  --shadow-card-hover: 0px 16px 40px rgba(7, 20, 38, 0.09);
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--color-ice);
  color: var(--color-navy);
  font-family: var(--font-body);
  font-size: var(--fs-body-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--color-navy);
  margin: 0 0 16px 0;
  line-height: 1.2;
}

p {
  margin: 0 0 16px 0;
  color: var(--color-text-muted);
}

a {
  color: var(--color-blue);
  text-decoration: none;
}

a:hover {
  color: var(--color-blue-soft);
}

img {
  max-width: 100%;
  display: block;
}

button, input, select, textarea {
  font-family: var(--font-body);
  font-size: var(--fs-body-md);
}

/* ==========================================================================
   Layout utilitario
   ========================================================================== */

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

.section {
  padding: var(--section-padding-desktop) 0;
}

@media (max-width: 768px) {
  .section {
    padding: var(--section-padding-mobile) 0;
  }
}

/* ==========================================================================
   Botones
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-primary {
  background: var(--color-navy);
  color: var(--color-white);
}

.btn-primary:hover {
  background: var(--color-blue);
  transform: translateY(-1px);
}

.btn-secondary {
  background: transparent;
  border-color: var(--color-blue);
  color: var(--color-blue);
}

.btn-secondary:hover {
  background: var(--color-ice);
}

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

/* ==========================================================================
   Tarjetas (cards)
   ========================================================================== */

.card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 32px;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.card:hover {
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-blue);
}

/* ==========================================================================
   Formularios
   ========================================================================== */

.field {
  margin-bottom: 20px;
}

.field label {
  display: block;
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  color: var(--color-navy);
  margin-bottom: 8px;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  background: var(--color-ice);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: 12px;
  color: var(--color-navy);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--color-blue);
  box-shadow: 0 0 0 3px rgba(39, 76, 119, 0.15);
}

.form-error {
  color: var(--color-error);
  font-size: var(--fs-label-md);
  margin-top: -12px;
  margin-bottom: 16px;
}

/* ==========================================================================
   Header / Footer público
   ========================================================================== */

.site-header {
  background: var(--color-ice);
  position: sticky;
  top: 0;
  z-index: 50;
  height: 80px;
  box-shadow: 0 1px 0 var(--color-border);
}

.site-header .container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-header .brand {
  font-family: var(--font-display);
  font-size: var(--fs-headline-sm);
  font-weight: 700;
  color: var(--color-navy);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 32px;
}

.site-nav a {
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  color: var(--color-text-muted);
}

.site-nav a.router-link-exact-active {
  color: var(--color-navy);
  font-weight: 600;
}

.site-footer {
  background: var(--color-white);
  border-top: 1px solid var(--color-border);
  padding: var(--section-padding-desktop) 0 32px;
}

.site-footer .footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.site-footer h4 {
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 20px;
}

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

.site-footer li {
  margin-bottom: 12px;
}

.footer-bottom {
  border-top: 1px solid var(--color-border);
  margin-top: 32px;
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  color: var(--color-text-muted);
}

@media (max-width: 768px) {
  .site-footer .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Header público en móvil: marca + CTA en la primera fila, navegación en
   una fila inferior desplazable horizontalmente (sin overflow de página). */
@media (max-width: 768px) {
  .site-header {
    height: auto;
  }
  .site-header .container {
    flex-wrap: wrap;
    padding-top: 12px;
    padding-bottom: 12px;
    gap: 12px;
  }
  .site-header .brand {
    margin-right: auto;
  }
  .site-nav {
    order: 3;
    width: 100%;
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 2px;
  }
  .site-nav a {
    white-space: nowrap;
  }
}

/* ==========================================================================
   Vistas públicas placeholder
   ========================================================================== */

.page-placeholder {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.page-placeholder .eyebrow {
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  color: var(--color-blue);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
}

.page-placeholder h1 {
  font-size: var(--fs-headline-lg);
}

.page-placeholder p {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   Admin — Layout
   ========================================================================== */

.admin-shell {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 100vh;
  background: var(--color-ice);
}

.admin-sidebar {
  background: var(--color-navy);
  color: var(--color-white);
  padding: 24px 0;
  display: flex;
  flex-direction: column;
}

.admin-sidebar .brand {
  font-family: var(--font-display);
  font-size: var(--fs-headline-sm);
  font-weight: 700;
  padding: 0 24px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 16px;
}

.admin-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  overflow-y: auto;
}

.admin-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  color: rgba(255,255,255,0.7);
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  border-right: 2px solid transparent;
}

.admin-nav a:hover {
  color: var(--color-white);
  background: rgba(255,255,255,0.04);
}

.admin-nav a.router-link-active {
  color: var(--color-white);
  background: rgba(74, 111, 165, 0.15);
  border-right-color: var(--color-blue-soft);
}

.admin-logout {
  margin: 16px 24px 0;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.8);
  border-radius: var(--radius-sm);
  padding: 10px;
  cursor: pointer;
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
}

.admin-logout:hover {
  background: rgba(255,255,255,0.08);
}

.admin-main {
  display: flex;
  flex-direction: column;
  /* Permite que el contenido (tablas anchas) se contenga y haga scroll
     interno en lugar de empujar la página en anchos intermedios. */
  min-width: 0;
}

.admin-topbar {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
}

.admin-topbar .admin-user {
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  color: var(--color-text-muted);
}

.admin-content {
  padding: 32px;
  flex: 1;
}

.admin-content h1 {
  font-size: var(--fs-headline-md);
}

/* Responsive del shell admin: en móvil el sidebar pasa a barra superior
   horizontal desplazable para no aplastar el contenido. */
@media (max-width: 768px) {
  .admin-shell {
    grid-template-columns: 1fr;
  }
  .admin-sidebar {
    flex-direction: row;
    align-items: center;
    gap: 4px;
    padding: 10px 12px;
    overflow-x: auto;
  }
  .admin-sidebar .brand {
    padding: 0 12px 0 4px;
    margin: 0;
    border-bottom: none;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    white-space: nowrap;
    font-size: var(--fs-body-md);
  }
  .admin-nav {
    flex-direction: row;
    flex: 0 0 auto;
    overflow-y: visible;
  }
  .admin-nav a {
    white-space: nowrap;
    padding: 8px 12px;
    border-right: none;
    border-bottom: 2px solid transparent;
  }
  .admin-nav a.router-link-active {
    background: transparent;
    border-right-color: transparent;
    border-bottom-color: var(--color-blue-soft);
    color: var(--color-white);
  }
  .admin-logout {
    flex: 0 0 auto;
    margin: 0 0 0 8px;
  }
  .admin-content {
    padding: 20px;
  }
}

/* ==========================================================================
   Admin — Dashboard / módulos
   ========================================================================== */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}

.stat-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 24px;
  box-shadow: var(--shadow-card);
}

.stat-card .stat-label {
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.stat-card .stat-value {
  font-family: var(--font-display);
  font-size: var(--fs-headline-md);
  color: var(--color-navy);
  margin-top: 8px;
}

.module-placeholder {
  background: var(--color-white);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: 48px;
  text-align: center;
  color: var(--color-text-muted);
}

/* ==========================================================================
   Login admin
   ========================================================================== */

.auth-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-navy);
  padding: 24px;
}

.auth-wrap {
  width: 100%;
  max-width: 420px;
}

.auth-branding {
  text-align: center;
  margin-bottom: 40px;
}

.auth-brand {
  font-family: var(--font-display);
  font-size: var(--fs-headline-sm);
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: 8px;
}

.auth-brand-sub {
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
}

.auth-card {
  width: 100%;
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: 0px 12px 32px rgba(0, 0, 0, 0.4);
  padding: 40px;
}

.auth-field {
  margin-bottom: 20px;
}

.auth-field label {
  display: block;
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}

.auth-field input {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  background: var(--color-ice);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--color-navy);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.auth-field input:focus {
  border-color: var(--color-blue);
  box-shadow: 0 0 0 3px rgba(39, 76, 119, 0.15);
}

.auth-error {
  color: var(--color-error);
  font-size: var(--fs-label-md);
  margin: 0 0 16px;
}

.auth-submit {
  height: 48px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 4px;
}

.auth-notice {
  text-align: center;
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.4);
  margin: 32px 0 0;
}

/* ==========================================================================
   UI kit base — estilos de apoyo para los componentes reutilizables
   (BaseCard, BaseTable, StatusBadge, EmptyState). Preparados para el
   Sprint 2; usan exclusivamente las variables globales existentes.
   ========================================================================== */

/* BaseCard: encabezado opcional */
.card-label {
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  color: var(--color-blue);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}

.card-title {
  font-family: var(--font-display);
  font-size: var(--fs-headline-sm);
  margin-bottom: 12px;
}

.card-footer {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}

/* BaseTable */
.base-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.base-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.base-table thead th {
  text-align: left;
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  background: var(--color-ice);
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border);
}

.base-table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-navy);
}

.base-table tbody tr:last-child td {
  border-bottom: none;
}

.base-table tbody tr:hover {
  background: var(--color-ice);
}

/* StatusBadge */
.status-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  line-height: 1;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  background: rgba(74, 111, 165, 0.12);
  color: var(--color-blue);
}

.status-badge.status-success { background: rgba(22, 128, 71, 0.12); color: #16803f; }
.status-badge.status-warning { background: rgba(176, 120, 20, 0.14); color: #9a6a12; }
.status-badge.status-danger  { background: rgba(186, 26, 26, 0.12); color: var(--color-error); }
.status-badge.status-info    { background: rgba(39, 76, 119, 0.12); color: var(--color-blue); }
.status-badge.status-neutral { background: rgba(95, 111, 130, 0.14); color: var(--color-text-muted); }

/* EmptyState */
.empty-state {
  background: var(--color-white);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: 48px 32px;
  text-align: center;
}

.empty-state-title {
  font-family: var(--font-display);
  font-size: var(--fs-headline-sm);
  margin-bottom: 8px;
}

.empty-state-text {
  color: var(--color-text-muted);
  max-width: 420px;
  margin: 0 auto 16px;
}

.empty-state-action {
  margin-top: 8px;
}

/* ==========================================================================
   Home view — estilos específicos de la vista Home integrada desde Stitch.
   Usa exclusivamente las variables globales definidas arriba.
   ========================================================================== */

/* Eyebrow reutilizable dentro de Home */
.home-eyebrow {
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  color: var(--color-blue);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 16px;
}

/* --- Hero --- */
.home-hero {
  position: relative;
  overflow: hidden;
  padding: 96px 0 128px;
  background: radial-gradient(circle at 70% 30%, rgba(39, 76, 119, 0.08) 0%, transparent 70%);
}

.home-hero-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 64px;
  align-items: center;
}

.home-hero-title {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-navy);
  margin-bottom: 24px;
}

.home-hero-lead {
  font-size: var(--fs-body-lg);
  color: var(--color-text-muted);
  max-width: 560px;
  margin-bottom: 24px;
}

.home-hero-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-headline-sm);
  color: var(--color-navy);
  margin-bottom: 32px;
}

.home-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* Interfaz conceptual (tarjeta decorativa del hero) */
.home-os-card {
  aspect-ratio: 1 / 1;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card-hover);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.home-os-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 16px;
}

.home-os-dots {
  display: flex;
  gap: 8px;
}

.home-os-dot {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full);
  background: rgba(7, 20, 38, 0.2);
}

.home-os-tag {
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  color: var(--color-blue);
  opacity: 0.7;
}

/* Encabezado interno de la tarjeta OS */
.home-os-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.home-os-title {
  font-family: var(--font-display);
  font-size: var(--fs-headline-sm);
  color: var(--color-navy);
  margin: 0;
}

.home-os-subtitle {
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  color: var(--color-text-muted);
  margin: 0;
}

/* Módulos del sistema (2x2) */
.home-os-modules {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 12px;
}

.home-os-module {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  background: var(--color-ice);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.home-os-module:hover {
  border-color: var(--color-blue);
  background: var(--color-white);
}

.home-os-module-index {
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  color: var(--color-blue-soft);
  letter-spacing: 0.08em;
}

.home-os-module-name {
  font-family: var(--font-display);
  font-size: var(--fs-body-md);
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-navy);
}

/* --- EOS™ --- */
.home-eos {
  background: var(--color-white);
}

.home-eos-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.home-eos-visual {
  background: var(--color-navy);
  border-radius: var(--radius-lg);
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  box-shadow: var(--shadow-card-hover);
}

.home-eos-visual h3 {
  color: var(--color-white);
  text-align: center;
  font-size: var(--fs-headline-lg);
  line-height: 1.2;
}

.home-eos-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 32px 0 40px;
}

.home-eos-feature {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.home-eos-feature-mark {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  margin-top: 6px;
  border-radius: var(--radius-sm);
  background: var(--color-blue);
}

.home-eos-feature h4 {
  font-size: var(--fs-headline-sm);
  margin-bottom: 4px;
}

.home-eos-feature p {
  font-size: var(--fs-label-md);
  margin: 0;
}

/* --- Experiencia transversal --- */
.home-expertise {
  background: var(--color-ice);
  text-align: center;
}

.home-expertise h2 {
  max-width: 720px;
  margin: 0 auto 48px;
}

.home-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  max-width: 880px;
  margin: 0 auto;
}

.home-chip {
  padding: 12px 24px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  color: var(--color-blue);
  box-shadow: var(--shadow-card);
  transition: border-color 0.2s ease;
}

.home-chip:hover {
  border-color: var(--color-blue);
}

/* --- Empresas --- */
.home-companies-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 40px;
}

.home-company-link {
  display: inline-block;
  margin-top: 16px;
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  color: var(--color-blue);
}

.home-company-link:hover {
  text-decoration: underline;
}

/* --- Contenido editorial (fondo oscuro) --- */
.home-content {
  background: var(--color-navy);
}

.home-content h2,
.home-content h3 {
  color: var(--color-white);
}

.home-eyebrow-invert {
  color: var(--color-blue-soft);
}

.home-content-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 48px;
}

.home-content-all {
  color: var(--color-ice);
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  text-decoration: underline;
  text-underline-offset: 6px;
  white-space: nowrap;
}

.home-content-all:hover {
  color: var(--color-white);
}

.home-content-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.home-article-thumb {
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 20px;
}

.home-article-cat {
  display: inline-block;
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  color: var(--color-blue-soft);
  background: rgba(255, 255, 255, 0.06);
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
}

.home-article-title {
  font-size: var(--fs-headline-sm);
}

/* --- Newsletter --- */
.home-newsletter {
  background: var(--color-white);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.home-newsletter-inner {
  max-width: 760px;
  text-align: center;
}

.home-newsletter-inner > p {
  font-size: var(--fs-body-lg);
  margin-bottom: 40px;
}

.home-newsletter-form {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  text-align: left;
}

.home-newsletter-submit {
  grid-column: 1 / -1;
  margin-top: 8px;
}

/* --- Agenda --- */
.home-agenda {
  background: var(--color-ice);
}

.home-agenda-card {
  background: var(--color-navy);
  border-radius: var(--radius-lg);
  padding: 64px;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  box-shadow: var(--shadow-card-hover);
}

.home-agenda-card h2 {
  color: var(--color-white);
  margin-bottom: 16px;
}

.home-agenda-card p {
  color: rgba(243, 247, 251, 0.8);
  max-width: 560px;
  margin: 0 auto 32px;
}

.home-agenda-btn {
  background: var(--color-white);
  color: var(--color-navy);
}

.home-agenda-btn:hover {
  background: var(--color-ice);
  color: var(--color-navy);
}

/* --- Responsive Home --- */
@media (max-width: 900px) {
  .home-hero-grid,
  .home-eos-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .home-companies-grid,
  .home-content-grid {
    grid-template-columns: 1fr;
  }
  .home-eos-visual {
    order: -1;
  }
}

@media (max-width: 768px) {
  .home-hero {
    padding: 60px 0 72px;
  }
  .home-hero-title {
    font-size: var(--fs-headline-md);
  }
  .home-eos-features,
  .home-newsletter-form {
    grid-template-columns: 1fr;
  }
  .home-content-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .home-agenda-card {
    padding: 40px 24px;
  }
}

/* ==========================================================================
   EOS view — estilos específicos de la vista EOS integrada desde Stitch.
   Usa exclusivamente las variables globales definidas arriba.
   ========================================================================== */

.eos-eyebrow {
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  color: var(--color-blue);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 16px;
}

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

.eos-section-head p {
  font-size: var(--fs-body-lg);
}

/* --- Hero --- */
.eos-hero-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 48px;
  align-items: center;
}

.eos-badge {
  display: inline-block;
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-blue);
  background: rgba(74, 111, 165, 0.14);
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  margin-bottom: 24px;
}

.eos-hero-title {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-navy);
  margin-bottom: 20px;
}

.eos-hero-sub {
  font-family: var(--font-display);
  font-size: var(--fs-headline-sm);
  color: var(--color-blue);
  max-width: 520px;
  margin-bottom: 24px;
}

.eos-hero-pills {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-blue-soft);
  margin-bottom: 24px;
}

.eos-pill-dot {
  width: 4px;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--color-blue-soft);
}

.eos-hero-lead {
  font-size: var(--fs-body-lg);
  color: var(--color-text-muted);
  max-width: 560px;
  margin-bottom: 32px;
}

.eos-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* Tarjeta de detalles del programa */
.eos-details-card {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card-hover);
  padding: 32px;
}

.eos-details-card h3 {
  font-size: var(--fs-headline-sm);
  margin-bottom: 24px;
}

.eos-details-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.eos-details-list li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-border);
}

.eos-details-list li:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.eos-detail-label {
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-blue-soft);
}

.eos-detail-value {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--color-navy);
}

/* --- Qué es EOS™ --- */
.eos-concept {
  background: var(--color-white);
}

.eos-concept-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.eos-quote {
  margin: 24px 0 0;
  padding: 24px;
  background: var(--color-ice);
  border-left: 4px solid var(--color-navy);
  font-style: italic;
  color: var(--color-navy);
  font-size: var(--fs-body-lg);
}

.eos-concept-visual {
  aspect-ratio: 4 / 5;
  background: linear-gradient(160deg, var(--color-navy) 0%, var(--color-blue) 100%);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card-hover);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 40px;
}

.eos-concept-visual-tag {
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.7);
}

.eos-concept-visual-text {
  font-family: var(--font-display);
  font-size: var(--fs-headline-md);
  color: var(--color-white);
  margin: 0;
}

/* --- Para quién es (bento) --- */
.eos-audience {
  background: var(--color-ice);
}

.eos-bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}

.eos-audience-card {
  grid-column: span 12;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 32px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.eos-audience-card:hover {
  border-color: var(--color-blue);
  box-shadow: var(--shadow-card-hover);
}

.eos-audience-card h3 {
  font-size: var(--fs-headline-sm);
  margin-bottom: 8px;
}

.eos-audience-card p {
  margin: 0;
}

@media (min-width: 768px) {
  .eos-bento-4 { grid-column: span 4; }
  .eos-bento-8 { grid-column: span 8; }
  .eos-bento-6 { grid-column: span 6; }
}

/* --- Problemas que resuelve (fondo oscuro) --- */
.eos-problems {
  background: var(--color-navy);
  color: var(--color-white);
}

.eos-problems-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 48px;
  align-items: start;
}

.eos-problems-intro h2 {
  color: var(--color-white);
  margin-bottom: 24px;
}

.eos-problems-intro p {
  color: rgba(243, 247, 251, 0.75);
  font-size: var(--fs-body-lg);
  margin-bottom: 32px;
}

.eos-problems-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.eos-problem {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  padding: 24px;
  transition: background 0.2s ease;
}

.eos-problem:hover {
  background: rgba(255, 255, 255, 0.05);
}

.eos-problem-mark {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: var(--radius-sm);
  background: var(--color-blue-soft);
  margin-bottom: 16px;
}

.eos-problem h4 {
  color: var(--color-white);
  font-size: var(--fs-headline-sm);
  margin-bottom: 8px;
}

.eos-problem p {
  color: rgba(243, 247, 251, 0.6);
  font-size: var(--fs-label-md);
  margin: 0;
}

/* Botón claro sobre fondo oscuro */
.eos-btn-light {
  background: var(--color-white);
  color: var(--color-navy);
}

.eos-btn-light:hover {
  background: var(--color-ice);
  transform: translateY(-1px);
}

.eos-btn-outline {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: var(--color-white);
}

.eos-btn-outline:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-white);
}

/* --- Los 12 updates --- */
.eos-updates {
  background: var(--color-white);
}

.eos-updates-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px 32px;
}

.eos-update {
  border-bottom: 1px solid var(--color-ice);
  padding-bottom: 24px;
  transition: border-color 0.3s ease;
}

.eos-update:hover {
  border-color: var(--color-blue);
}

.eos-update-n {
  display: block;
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  color: var(--color-blue-soft);
  margin-bottom: 16px;
}

.eos-update h4 {
  font-size: var(--fs-headline-sm);
  color: var(--color-navy);
  margin-bottom: 12px;
}

.eos-update p {
  font-size: var(--fs-label-md);
  margin: 0;
}

/* --- Formato --- */
.eos-format {
  background: var(--color-ice);
}

.eos-format-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--color-navy);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card-hover);
}

.eos-format-body {
  padding: 64px;
  color: var(--color-white);
}

.eos-format-body h2 {
  color: var(--color-white);
  margin-bottom: 20px;
}

.eos-format-body > p {
  color: rgba(243, 247, 251, 0.8);
  font-size: var(--fs-body-lg);
  margin-bottom: 32px;
}

.eos-format-items {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.eos-format-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.eos-format-item p {
  color: rgba(243, 247, 251, 0.85);
  margin: 0;
}

.eos-format-item strong {
  display: block;
  color: var(--color-white);
}

.eos-format-mark {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  margin-top: 6px;
  border-radius: var(--radius-sm);
  background: var(--color-blue-soft);
}

.eos-format-visual {
  background: linear-gradient(200deg, var(--color-blue) 0%, var(--color-navy) 100%);
  min-height: 360px;
}

/* --- Aplicación --- */
.eos-apply {
  background: var(--color-white);
}

.eos-apply-inner {
  max-width: 760px;
}

.eos-apply-form {
  display: flex;
  flex-direction: column;
}

.eos-apply-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.eos-apply-note {
  text-align: center;
  font-size: var(--fs-label-md);
  color: var(--color-blue-soft);
  margin: 16px 0 0;
}

/* --- FAQ --- */
.eos-faq {
  background: var(--color-ice);
}

.eos-faq-inner {
  max-width: 760px;
}

.eos-faq-title {
  text-align: center;
  margin-bottom: 48px;
}

.eos-faq-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.eos-faq-item {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.eos-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--fs-headline-sm);
  color: var(--color-navy);
}

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

.eos-faq-marker {
  position: relative;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.eos-faq-marker::before,
.eos-faq-marker::after {
  content: '';
  position: absolute;
  background: var(--color-blue);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.eos-faq-marker::before {
  top: 7px;
  left: 0;
  width: 16px;
  height: 2px;
}

.eos-faq-marker::after {
  top: 0;
  left: 7px;
  width: 2px;
  height: 16px;
}

.eos-faq-item[open] .eos-faq-marker::after {
  opacity: 0;
}

.eos-faq-answer {
  padding: 0 24px 24px;
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-ice);
  padding-top: 16px;
}

/* --- CTA final --- */
.eos-cta {
  background: var(--color-ice);
}

.eos-cta-card {
  background: var(--color-navy);
  border-radius: var(--radius-lg);
  padding: 64px;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  box-shadow: var(--shadow-card-hover);
}

.eos-cta-card h2 {
  color: var(--color-white);
  margin-bottom: 16px;
}

.eos-cta-card p {
  color: rgba(243, 247, 251, 0.8);
  max-width: 560px;
  margin: 0 auto 32px;
}

.eos-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

/* --- Responsive EOS --- */
@media (max-width: 900px) {
  .eos-hero-grid,
  .eos-concept-grid,
  .eos-problems-grid,
  .eos-format-card {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .eos-updates-grid {
    grid-template-columns: 1fr 1fr;
  }
  .eos-format-body {
    padding: 40px;
  }
  .eos-format-visual {
    min-height: 220px;
  }
}

@media (max-width: 768px) {
  .eos-hero-title {
    font-size: var(--fs-headline-md);
  }
  .eos-problems-list,
  .eos-updates-grid,
  .eos-apply-row {
    grid-template-columns: 1fr;
  }
  .eos-cta-card {
    padding: 40px 24px;
  }
}

/* ==========================================================================
   Agenda view — flujo de reserva integrado desde Stitch (mock local).
   Usa exclusivamente las variables globales definidas arriba.
   ========================================================================== */

.agenda-hero {
  max-width: 720px;
  margin-bottom: 64px;
}

.agenda-hero h1 {
  font-size: var(--fs-headline-lg);
  margin-bottom: 20px;
}

.agenda-hero p {
  font-size: var(--fs-body-lg);
}

.agenda-layout {
  display: grid;
  grid-template-columns: 8fr 4fr;
  gap: 48px;
  align-items: start;
}

.agenda-flow {
  display: flex;
  flex-direction: column;
  gap: 64px;
}

/* Pasos */
.agenda-step-locked {
  opacity: 0.45;
  pointer-events: none;
}

.agenda-step-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
}

.agenda-step-num {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--color-navy);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-label);
  font-weight: 600;
}

.agenda-step-head h2 {
  font-size: var(--fs-headline-sm);
  margin: 0;
}

/* Paso 1: tipos de reunión */
.agenda-types {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.agenda-type-card {
  text-align: left;
  cursor: pointer;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 24px;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.agenda-type-card:hover {
  border-color: var(--color-blue);
  box-shadow: var(--shadow-card-hover);
}

.agenda-type-card.is-active {
  border-color: var(--color-blue);
  background: var(--color-ice);
}

.agenda-type-top {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.agenda-type-duration {
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  color: var(--color-blue);
}

.agenda-type-card h3 {
  font-size: var(--fs-headline-sm);
  margin-bottom: 8px;
}

.agenda-type-card p {
  margin-bottom: 16px;
}

.agenda-type-price {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-navy);
}

/* Paso 2: calendario */
.agenda-calendar-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 32px;
  max-width: 420px;
}

.agenda-calendar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.agenda-calendar-top h4 {
  font-family: var(--font-display);
  font-size: var(--fs-headline-sm);
  margin: 0;
}

.agenda-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  text-align: center;
}

.agenda-weekday {
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  color: var(--color-text-muted);
  padding-bottom: 8px;
}

.agenda-day-empty {
  aspect-ratio: 1 / 1;
}

.agenda-day {
  aspect-ratio: 1 / 1;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-border-strong);
  cursor: default;
  font-family: var(--font-body);
}

.agenda-day.is-available {
  background: var(--color-ice);
  color: var(--color-navy);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.agenda-day.is-available:hover {
  background: rgba(74, 111, 165, 0.2);
}

.agenda-day.is-selected {
  background: var(--color-navy);
  color: var(--color-white);
}

/* Paso 3: horarios */
.agenda-times {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
  max-width: 460px;
}

.agenda-time {
  padding: 14px 16px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-navy);
  font-family: var(--font-label);
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.agenda-time:hover {
  border-color: var(--color-navy);
}

.agenda-time.is-selected {
  background: var(--color-navy);
  border-color: var(--color-navy);
  color: var(--color-white);
}

/* Paso 4: formulario */
.agenda-form {
  display: flex;
  flex-direction: column;
}

.agenda-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.agenda-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 8px 0 24px;
  font-size: var(--fs-label-md);
  color: var(--color-text-muted);
}

.agenda-check input {
  margin-top: 3px;
  width: auto;
  accent-color: var(--color-blue);
}

/* Confirmación */
.agenda-success {
  text-align: center;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card-hover);
  padding: 80px 32px;
}

.agenda-success-mark {
  width: 88px;
  height: 88px;
  margin: 0 auto 24px;
  border-radius: var(--radius-full);
  background: rgba(22, 128, 71, 0.12);
  color: #16803f;
  font-size: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.agenda-success h2 {
  font-size: var(--fs-headline-lg);
  margin-bottom: 16px;
}

.agenda-success p {
  max-width: 420px;
  margin: 0 auto 32px;
  font-size: var(--fs-body-lg);
}

/* Resumen lateral */
.agenda-summary {
  position: sticky;
  top: 104px;
  background: var(--color-navy);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card-hover);
  padding: 32px;
}

.agenda-summary h3 {
  color: var(--color-white);
  font-size: var(--fs-headline-sm);
  margin-bottom: 28px;
}

.agenda-summary-label {
  display: block;
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 6px;
}

.agenda-summary-value {
  display: block;
  font-weight: 600;
  color: var(--color-white);
}

.agenda-summary-block {
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  margin-bottom: 24px;
}

.agenda-summary-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

.agenda-summary-meta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.agenda-summary-meta > div {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-label-md);
}

.agenda-summary-meta span:first-child {
  color: rgba(255, 255, 255, 0.6);
}

.agenda-summary-meta span:last-child {
  color: var(--color-white);
  font-weight: 500;
}

.agenda-summary-price {
  color: #a6c9fb !important;
  font-weight: 700 !important;
}

.agenda-summary-quote {
  margin: 16px 0 0;
  font-style: italic;
  font-size: var(--fs-label-md);
  color: rgba(255, 255, 255, 0.7);
}

/* Responsive Agenda */
@media (max-width: 900px) {
  .agenda-layout {
    grid-template-columns: 1fr;
  }
  .agenda-summary {
    position: static;
  }
}

@media (max-width: 768px) {
  .agenda-hero h1 {
    font-size: var(--fs-headline-md);
  }
  .agenda-types,
  .agenda-form-row {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Consulta jurídica view — integrada desde Stitch. Solo variables globales.
   ========================================================================== */

/* Hero */
.cj-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.cj-badge {
  display: inline-block;
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-blue);
  background: rgba(74, 111, 165, 0.14);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  margin-bottom: 24px;
}

.cj-hero-title {
  font-family: var(--font-display);
  font-size: var(--fs-headline-lg);
  line-height: 1.15;
  color: var(--color-navy);
  margin-bottom: 24px;
}

.cj-hero-lead {
  font-size: var(--fs-body-lg);
  color: var(--color-text-muted);
  max-width: 520px;
  margin-bottom: 32px;
}

.cj-hero-visual {
  position: relative;
}

.cj-hero-panel {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--color-navy) 0%, var(--color-blue) 100%);
  box-shadow: var(--shadow-card-hover);
}

.cj-hero-note {
  position: absolute;
  left: -24px;
  bottom: -24px;
  max-width: 260px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card-hover);
  padding: 24px;
}

.cj-hero-note-mark {
  display: block;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: var(--color-blue-soft);
  margin-bottom: 16px;
}

.cj-hero-note p {
  margin: 0;
  font-size: var(--fs-label-md);
}

/* Áreas */
.cj-areas {
  background: var(--color-ice);
}

.cj-areas-head {
  max-width: 640px;
  margin-bottom: 56px;
}

.cj-areas-head h2 {
  font-size: var(--fs-headline-md);
  margin-bottom: 16px;
}

.cj-areas-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.cj-area-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 32px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cj-area-card:hover {
  border-color: var(--color-blue);
  box-shadow: var(--shadow-card-hover);
}

.cj-area-mark {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: rgba(74, 111, 165, 0.15);
  margin-bottom: 20px;
}

.cj-area-card h3 {
  font-size: var(--fs-headline-sm);
  margin-bottom: 12px;
}

.cj-area-card p {
  margin: 0;
}

/* Formulario */
.cj-form-section {
  background: var(--color-white);
}

.cj-form-grid {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: 64px;
  align-items: start;
}

.cj-form-aside {
  position: sticky;
  top: 104px;
}

.cj-form-aside h2 {
  font-size: var(--fs-headline-md);
  margin-bottom: 16px;
}

.cj-form-aside > p {
  margin-bottom: 32px;
}

.cj-trust {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.cj-trust-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.cj-trust-mark {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: rgba(74, 111, 165, 0.15);
}

.cj-trust-item h4 {
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  margin-bottom: 4px;
}

.cj-trust-item p {
  font-size: var(--fs-label-md);
  margin: 0;
}

.cj-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.cj-radios {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.cj-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.cj-radio input {
  width: auto;
  accent-color: var(--color-blue);
}

.cj-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 8px 0 24px;
  font-size: var(--fs-label-md);
  color: var(--color-text-muted);
}

.cj-check input {
  margin-top: 3px;
  width: auto;
  accent-color: var(--color-blue);
}

/* Confirmación */
.cj-success {
  text-align: center;
  background: var(--color-ice);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 72px 32px;
  max-width: 640px;
  margin: 0 auto;
}

.cj-success-mark {
  width: 88px;
  height: 88px;
  margin: 0 auto 24px;
  border-radius: var(--radius-full);
  background: rgba(22, 128, 71, 0.12);
  color: #16803f;
  font-size: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cj-success h2 {
  font-size: var(--fs-headline-md);
  margin-bottom: 16px;
}

.cj-success p {
  max-width: 420px;
  margin: 0 auto 32px;
}

/* Bloque de confianza */
.cj-confidence {
  background: var(--color-ice);
}

.cj-confidence-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 40px;
  display: flex;
  align-items: center;
  gap: 32px;
}

.cj-confidence-card h4 {
  font-size: var(--fs-headline-sm);
  margin-bottom: 8px;
}

.cj-confidence-card p {
  margin: 0;
}

.cj-confidence-link {
  flex-shrink: 0;
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  color: var(--color-blue);
  border-bottom: 1px solid var(--color-blue);
  padding-bottom: 2px;
}

/* CTA final */
.cj-cta {
  background: var(--color-ice);
}

.cj-cta-card {
  background: var(--color-navy);
  border-radius: var(--radius-lg);
  padding: 64px;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  box-shadow: var(--shadow-card-hover);
}

.cj-cta-card h2 {
  color: var(--color-white);
  margin-bottom: 16px;
}

.cj-cta-card p {
  color: rgba(243, 247, 251, 0.8);
  max-width: 560px;
  margin: 0 auto 32px;
}

.cj-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

/* Responsive Consulta jurídica */
@media (max-width: 900px) {
  .cj-hero-grid,
  .cj-form-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .cj-areas-grid {
    grid-template-columns: 1fr 1fr;
  }
  .cj-form-aside {
    position: static;
  }
  .cj-confidence-card {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
}

@media (max-width: 768px) {
  .cj-hero-title {
    font-size: var(--fs-headline-md);
  }
  .cj-areas-grid,
  .cj-form-row {
    grid-template-columns: 1fr;
  }
  .cj-cta-card {
    padding: 40px 24px;
  }
}

/* ==========================================================================
   Consulta empresarial view — integrada desde Stitch. Solo variables globales.
   ========================================================================== */

.ce-eyebrow {
  display: block;
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-blue);
  margin-bottom: 20px;
}

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

.ce-section-head p {
  font-size: var(--fs-body-lg);
}

/* Hero */
.ce-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.ce-hero-title {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-navy);
  margin-bottom: 24px;
}

.ce-hero-lead {
  font-size: var(--fs-body-lg);
  color: var(--color-text-muted);
  max-width: 480px;
  margin-bottom: 32px;
}

.ce-hero-visual {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--color-navy) 0%, var(--color-blue) 100%);
  box-shadow: var(--shadow-card-hover);
}

/* Temas */
.ce-themes {
  background: var(--color-white);
}

.ce-themes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.ce-theme-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 32px;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.ce-theme-card:hover {
  border-color: var(--color-blue);
  background: var(--color-ice);
}

.ce-theme-mark {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: rgba(74, 111, 165, 0.15);
  margin-bottom: 20px;
}

.ce-theme-card h3 {
  font-size: var(--fs-headline-sm);
  margin-bottom: 12px;
}

.ce-theme-card p {
  margin: 0;
}

/* Bloque diferenciador */
.ce-diff {
  background: var(--color-navy);
}

.ce-diff-inner {
  text-align: center;
}

.ce-diff-inner h2 {
  color: var(--color-white);
  margin-bottom: 20px;
}

.ce-diff-inner > p {
  color: rgba(243, 247, 251, 0.8);
  font-size: var(--fs-body-lg);
  max-width: 640px;
  margin: 0 auto 40px;
}

.ce-diff-pills {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}

.ce-diff-pill {
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-white);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-full);
  padding: 10px 24px;
}

/* Formulario */
.ce-form-section {
  background: var(--color-ice);
}

.ce-form-inner {
  max-width: 760px;
}

.ce-form {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 48px;
  display: flex;
  flex-direction: column;
}

.ce-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.ce-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 8px 0 24px;
  font-size: var(--fs-label-md);
  color: var(--color-text-muted);
}

.ce-check input {
  margin-top: 3px;
  width: auto;
  accent-color: var(--color-blue);
}

/* Confirmación */
.ce-success {
  text-align: center;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 72px 32px;
  max-width: 640px;
  margin: 0 auto;
}

.ce-success-mark {
  width: 88px;
  height: 88px;
  margin: 0 auto 24px;
  border-radius: var(--radius-full);
  background: rgba(22, 128, 71, 0.12);
  color: #16803f;
  font-size: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ce-success h2 {
  font-size: var(--fs-headline-md);
  margin-bottom: 16px;
}

.ce-success p {
  max-width: 420px;
  margin: 0 auto 32px;
}

/* CTA final */
.ce-cta {
  background: var(--color-ice);
}

.ce-cta-card {
  background: var(--color-navy);
  border-radius: var(--radius-lg);
  padding: 64px;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  box-shadow: var(--shadow-card-hover);
}

.ce-cta-card h2 {
  color: var(--color-white);
  margin-bottom: 16px;
}

.ce-cta-card p {
  color: rgba(243, 247, 251, 0.8);
  max-width: 560px;
  margin: 0 auto 32px;
}

.ce-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

/* Responsive Consulta empresarial */
@media (max-width: 900px) {
  .ce-hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .ce-themes-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .ce-hero-title {
    font-size: var(--fs-headline-md);
  }
  .ce-themes-grid,
  .ce-form-row {
    grid-template-columns: 1fr;
  }
  .ce-form {
    padding: 32px 24px;
  }
  .ce-cta-card {
    padding: 40px 24px;
  }
}

/* ==========================================================================
   Empresas view — ecosistema integrado desde Stitch. Solo variables globales.
   ========================================================================== */

.em-eyebrow {
  display: block;
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-blue);
  margin-bottom: 20px;
}

.em-section-head {
  text-align: center;
  margin-bottom: 64px;
}

.em-section-head p {
  font-size: var(--fs-body-lg);
}

/* Hero */
.em-hero {
  background: var(--color-ice);
  text-align: center;
}

.em-hero-inner {
  max-width: 860px;
}

.em-hero-inner h1 {
  font-size: var(--fs-headline-lg);
  margin: 0 auto 24px;
  max-width: 780px;
}

.em-hero-inner p {
  font-size: var(--fs-body-lg);
  max-width: 640px;
  margin: 0 auto;
}

/* Mapa / ecosistema */
.em-map {
  background: var(--color-white);
}

.em-map-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}

.em-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}

.em-node-core > .em-node-title {
  width: 128px;
  height: 128px;
  border-radius: var(--radius-full);
  background: var(--color-navy);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  box-shadow: var(--shadow-card-hover);
}

.em-node-eos > .em-node-title {
  width: 96px;
  height: 96px;
  border-radius: var(--radius-md);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  color: var(--color-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  box-shadow: var(--shadow-card);
}

.em-node-label {
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.em-connector {
  flex: 0 0 48px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-blue-soft), transparent);
}

.em-node-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.em-node-op {
  padding: 20px;
}

.em-node-op-name {
  min-width: 120px;
  padding: 20px 16px;
  border-radius: var(--radius-md);
  background: var(--color-ice);
  border: 1px solid var(--color-border);
  color: var(--color-navy);
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  font-weight: 500;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.em-node-op:hover .em-node-op-name {
  background: var(--color-blue);
  border-color: var(--color-blue);
  color: var(--color-white);
}

/* Cards de empresas */
.em-companies {
  background: var(--color-ice);
}

.em-companies-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.em-company {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 40px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.em-company:hover {
  border-color: var(--color-blue);
  box-shadow: var(--shadow-card-hover);
}

.em-company-mark {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: rgba(74, 111, 165, 0.15);
  margin-bottom: 24px;
}

.em-company h3 {
  font-size: var(--fs-headline-sm);
  margin-bottom: 16px;
}

.em-company p {
  min-height: 120px;
  margin-bottom: 24px;
}

.em-company-link {
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  font-weight: 600;
  color: var(--color-blue);
}

.em-company-link:hover {
  text-decoration: underline;
}

/* Cómo se conectan */
.em-connect {
  background: var(--color-white);
}

.em-connect-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.em-connect-grid h2 {
  font-size: var(--fs-headline-lg);
  margin-bottom: 32px;
}

.em-steps {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.em-step {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.em-step-num {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--color-blue);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-label);
  font-weight: 600;
}

.em-step h4 {
  font-family: var(--font-display);
  font-size: var(--fs-headline-sm);
  margin-bottom: 4px;
}

.em-step p {
  margin: 0;
}

.em-connect-visual {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  background: linear-gradient(200deg, var(--color-blue) 0%, var(--color-navy) 100%);
  box-shadow: var(--shadow-card-hover);
}

/* CTA final */
.em-cta {
  background: var(--color-navy);
}

.em-cta-inner {
  text-align: center;
}

.em-cta-inner h2 {
  color: var(--color-white);
  font-size: var(--fs-headline-lg);
  max-width: 720px;
  margin: 0 auto 40px;
}

/* Responsive Empresas */
@media (max-width: 900px) {
  .em-map-flow {
    flex-direction: column;
  }
  .em-connector {
    width: 1px;
    height: 32px;
    flex-basis: 32px;
    background: linear-gradient(180deg, transparent, var(--color-blue-soft), transparent);
  }
  .em-companies-grid {
    grid-template-columns: 1fr;
  }
  .em-connect-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .em-company p {
    min-height: 0;
  }
}

@media (max-width: 768px) {
  .em-hero-inner h1,
  .em-connect-grid h2,
  .em-cta-inner h2 {
    font-size: var(--fs-headline-md);
  }
}

/* ==========================================================================
   Contenido view — editorial integrado desde Stitch. Solo variables globales.
   ========================================================================== */

/* Hero */
.co-hero {
  padding-bottom: 40px;
}

.co-hero-title {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-navy);
  max-width: 900px;
  margin-bottom: 24px;
}

.co-hero-lead {
  font-size: var(--fs-body-lg);
  color: var(--color-text-muted);
  max-width: 680px;
}

/* Filtros */
.co-filters-wrap {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 20px 0;
}

.co-filters {
  display: flex;
  gap: 24px;
  overflow-x: auto;
}

.co-filter {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  color: var(--color-text-muted);
  padding: 4px 0;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.co-filter:hover {
  color: var(--color-blue);
}

.co-filter.is-active {
  color: var(--color-navy);
  font-weight: 600;
  border-bottom: 2px solid var(--color-navy);
}

/* Categoría / meta compartidos */
.co-cat {
  display: inline-block;
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-blue);
  margin-bottom: 12px;
}

.co-meta {
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  color: var(--color-text-muted);
}

/* Artículo destacado */
.co-featured {
  display: grid;
  grid-template-columns: 7fr 5fr;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.3s ease;
}

.co-featured:hover {
  box-shadow: var(--shadow-card-hover);
}

.co-featured-media {
  min-height: 420px;
  background: linear-gradient(160deg, var(--color-navy) 0%, var(--color-blue) 100%);
}

.co-featured-body {
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.co-featured-body h2 {
  font-size: var(--fs-headline-lg);
  line-height: 1.2;
  margin-bottom: 20px;
}

.co-featured-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 8px;
}

.co-read {
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  font-weight: 600;
  color: var(--color-navy);
}

.co-read:hover {
  color: var(--color-blue);
}

/* Newsletter intermedio */
.co-newsletter {
  background: var(--color-navy);
  padding: 64px 0;
}

.co-newsletter-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.co-newsletter-copy {
  max-width: 520px;
}

.co-newsletter-copy h3 {
  color: var(--color-white);
  font-size: var(--fs-headline-md);
  margin-bottom: 8px;
}

.co-newsletter-copy p {
  color: rgba(243, 247, 251, 0.75);
  margin: 0;
}

.co-newsletter-form {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.co-newsletter-input {
  min-width: 280px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-sm);
  padding: 14px 20px;
  color: var(--color-white);
  outline: none;
}

.co-newsletter-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.co-newsletter-input:focus {
  border-color: var(--color-blue-soft);
}

/* Grilla de artículos */
.co-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 32px;
}

.co-card {
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.co-card-media {
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-md);
  background: linear-gradient(160deg, var(--color-blue) 0%, var(--color-navy) 100%);
  margin-bottom: 20px;
}

.co-card h3 {
  font-size: var(--fs-headline-sm);
  margin-bottom: 12px;
  transition: color 0.2s ease;
}

.co-card:hover h3 {
  color: var(--color-blue);
}

.co-card p {
  margin-bottom: 16px;
}

.co-empty {
  text-align: center;
  color: var(--color-text-muted);
  padding: 48px 0;
}

.co-more {
  display: flex;
  justify-content: center;
  margin-top: 64px;
}

/* Responsive Contenido */
@media (max-width: 900px) {
  .co-featured {
    grid-template-columns: 1fr;
  }
  .co-featured-media {
    min-height: 260px;
  }
  .co-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .co-hero-title {
    font-size: var(--fs-headline-md);
  }
  .co-featured-body {
    padding: 32px 24px;
  }
  .co-featured-body h2 {
    font-size: var(--fs-headline-md);
  }
  .co-grid {
    grid-template-columns: 1fr;
  }
  .co-newsletter-input {
    min-width: 0;
    width: 100%;
  }
}

/* ==========================================================================
   Article view — detalle de artículo integrado desde Stitch. Solo variables.
   ========================================================================== */

.ar-header {
  max-width: 800px;
  margin-bottom: 48px;
}

.ar-back {
  display: inline-block;
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  color: var(--color-blue);
  margin-bottom: 24px;
}

.ar-cat {
  display: inline-block;
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-blue);
  background: rgba(74, 111, 165, 0.14);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  margin-bottom: 20px;
}

.ar-title {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-navy);
  margin-bottom: 24px;
}

.ar-extract {
  font-size: var(--fs-body-lg);
  color: var(--color-text-muted);
  border-left: 2px solid var(--color-border-strong);
  padding-left: 24px;
  margin-bottom: 32px;
}

.ar-byline {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.ar-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: linear-gradient(160deg, var(--color-navy), var(--color-blue));
}

.ar-author {
  font-weight: 600;
  color: var(--color-navy);
}

.ar-meta {
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  color: var(--color-text-muted);
}

/* Panel destacado */
.ar-hero-panel {
  height: 440px;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--color-navy) 0%, var(--color-blue) 100%);
  box-shadow: var(--shadow-card-hover);
  margin-bottom: 64px;
}

/* Layout cuerpo + sidebar */
.ar-layout {
  display: grid;
  grid-template-columns: 8fr 4fr;
  gap: 64px;
  align-items: start;
}

/* Cuerpo editorial */
.ar-body {
  font-size: var(--fs-body-lg);
  color: var(--color-navy);
  line-height: 1.7;
}

.ar-body > p {
  color: var(--color-navy);
  margin-bottom: 24px;
}

.ar-body h2 {
  font-size: var(--fs-headline-md);
  margin: 40px 0 16px;
}

.ar-body h3 {
  font-size: var(--fs-headline-sm);
  margin: 32px 0 16px;
}

.ar-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ar-list li {
  position: relative;
  padding-left: 24px;
}

.ar-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-navy);
}

.ar-quote {
  margin: 32px 0;
  padding: 24px 32px;
  border-left: 4px solid var(--color-navy);
  background: var(--color-ice);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-headline-sm);
  color: var(--color-navy);
  line-height: 1.4;
}

.ar-callout {
  background: var(--color-ice);
  border-left: 4px solid var(--color-navy);
  border-radius: var(--radius-md);
  padding: 40px;
  margin: 40px 0;
}

.ar-callout h4 {
  font-size: var(--fs-headline-sm);
  margin-bottom: 12px;
}

.ar-callout > p {
  font-size: var(--fs-body-md);
  margin-bottom: 24px;
}

.ar-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.ar-pillar {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ar-pillar-title {
  font-weight: 700;
  color: var(--color-blue);
}

.ar-pillar-text {
  font-size: var(--fs-body-md);
  color: var(--color-text-muted);
}

/* CTA dentro del artículo */
.ar-cta {
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid var(--color-border);
}

.ar-cta h2 {
  font-size: var(--fs-headline-md);
  margin-bottom: 24px;
}

.ar-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* Sidebar */
.ar-sidebar {
  position: sticky;
  top: 104px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ar-toc {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 32px;
}

.ar-toc h5 {
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: 20px;
}

.ar-toc nav {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ar-toc nav a {
  padding-left: 16px;
  border-left: 2px solid transparent;
  color: var(--color-text-muted);
  font-size: var(--fs-body-md);
}

.ar-toc nav a:hover {
  color: var(--color-blue);
}

.ar-toc nav a.is-active {
  color: var(--color-navy);
  font-weight: 600;
  border-left-color: var(--color-navy);
}

.ar-side-cta {
  background: var(--color-navy);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 32px;
}

.ar-side-cta h4 {
  color: var(--color-white);
  font-size: var(--fs-headline-sm);
  margin-bottom: 12px;
}

.ar-side-cta p {
  color: rgba(243, 247, 251, 0.8);
  margin-bottom: 24px;
}

/* Relacionados */
.ar-related {
  margin-top: 96px;
}

.ar-related h3 {
  font-size: var(--fs-headline-md);
  margin-bottom: 40px;
}

.ar-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.ar-related-card {
  display: block;
  cursor: pointer;
}

.ar-related-media {
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-md);
  background: linear-gradient(160deg, var(--color-blue) 0%, var(--color-navy) 100%);
  margin-bottom: 20px;
}

.ar-related-card h4 {
  font-size: var(--fs-headline-sm);
  transition: color 0.2s ease;
}

.ar-related-card:hover h4 {
  color: var(--color-blue);
}

/* Newsletter */
.ar-newsletter {
  margin-top: 96px;
  padding: 64px;
  background: var(--color-ice);
  border-radius: var(--radius-lg);
  text-align: center;
}

.ar-newsletter h3 {
  font-size: var(--fs-headline-md);
  margin-bottom: 12px;
}

.ar-newsletter > p {
  max-width: 600px;
  margin: 0 auto 32px;
}

.ar-newsletter-form {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 560px;
  margin: 0 auto;
}

.ar-newsletter-input {
  flex: 1;
  min-width: 260px;
  background: var(--color-white);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: 14px 20px;
  color: var(--color-navy);
  outline: none;
}

.ar-newsletter-input:focus {
  border-color: var(--color-blue);
}

.ar-newsletter-note {
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  color: var(--color-text-muted);
  margin: 24px 0 0;
}

/* Responsive Article */
@media (max-width: 900px) {
  .ar-layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .ar-sidebar {
    position: static;
  }
  .ar-related-grid {
    grid-template-columns: 1fr;
  }
  .ar-pillars {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .ar-title {
    font-size: var(--fs-headline-md);
  }
  .ar-hero-panel {
    height: 240px;
  }
  .ar-newsletter {
    padding: 40px 24px;
  }
  .ar-newsletter-input {
    min-width: 0;
    width: 100%;
  }
}

/* ==========================================================================
   Newsletter view — integrada desde Stitch. Solo variables globales.
   ========================================================================== */

.nl-badge {
  display: inline-block;
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-blue);
  background: rgba(74, 111, 165, 0.14);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  margin-bottom: 24px;
}

.nl-hero-title {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-navy);
  max-width: 780px;
  margin-bottom: 24px;
}

.nl-hero-lead {
  font-size: var(--fs-body-lg);
  color: var(--color-text-muted);
  max-width: 640px;
  margin-bottom: 32px;
}

.nl-hero-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.nl-hero-social {
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  color: var(--color-text-muted);
}

/* Beneficios */
.nl-benefits {
  background: var(--color-white);
}

.nl-benefits-head {
  max-width: 620px;
  margin-bottom: 56px;
}

.nl-benefits-head h2 {
  font-size: var(--fs-headline-lg);
  margin-bottom: 16px;
}

.nl-benefits-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}

.nl-benefit {
  grid-column: span 4;
  background: var(--color-ice);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 32px;
  transition: border-color 0.2s ease;
}

.nl-benefit:hover {
  border-color: var(--color-blue);
}

.nl-benefit-wide {
  grid-column: span 8;
}

.nl-benefit-mark {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: rgba(74, 111, 165, 0.15);
  margin-bottom: 20px;
}

.nl-benefit h3 {
  font-size: var(--fs-headline-sm);
  margin-bottom: 12px;
}

.nl-benefit p {
  margin: 0;
}

/* Suscripción */
.nl-subscribe {
  background: var(--color-ice);
}

.nl-subscribe-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.nl-subscribe-copy h2 {
  font-size: var(--fs-headline-lg);
  margin-bottom: 16px;
}

.nl-subscribe-copy > p {
  font-size: var(--fs-body-lg);
  margin-bottom: 32px;
}

.nl-guarantees {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.nl-guarantees li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--color-navy);
}

.nl-guarantee-mark {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background: rgba(74, 111, 165, 0.2);
}

.nl-testimonial {
  margin: 0;
  padding: 24px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-style: italic;
  color: var(--color-text-muted);
}

.nl-testimonial-author {
  display: block;
  margin-top: 16px;
  font-style: normal;
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  font-weight: 600;
  color: var(--color-navy);
}

.nl-form {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 48px;
  display: flex;
  flex-direction: column;
}

.nl-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.nl-interests {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.nl-interest {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--fs-label-md);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.nl-interest:hover {
  border-color: var(--color-blue);
}

.nl-interest.is-active {
  border-color: var(--color-blue);
  background: var(--color-ice);
}

.nl-interest input {
  width: auto;
  accent-color: var(--color-blue);
}

.nl-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 8px 0 24px;
  font-size: var(--fs-label-md);
  color: var(--color-text-muted);
}

.nl-check input {
  margin-top: 3px;
  width: auto;
  accent-color: var(--color-blue);
}

.nl-form-note {
  text-align: center;
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  color: var(--color-text-muted);
  margin: 16px 0 0;
}

/* Confirmación */
.nl-success {
  text-align: center;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 72px 32px;
  max-width: 640px;
  margin: 0 auto;
}

.nl-success-mark {
  width: 88px;
  height: 88px;
  margin: 0 auto 24px;
  border-radius: var(--radius-full);
  background: rgba(22, 128, 71, 0.12);
  color: #16803f;
  font-size: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nl-success h2 {
  font-size: var(--fs-headline-md);
  margin-bottom: 16px;
}

.nl-success p {
  max-width: 460px;
  margin: 0 auto 32px;
}

.nl-success-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Responsive Newsletter */
@media (max-width: 900px) {
  .nl-benefit,
  .nl-benefit-wide {
    grid-column: span 12;
  }
  .nl-subscribe-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 768px) {
  .nl-hero-title {
    font-size: var(--fs-headline-md);
  }
  .nl-form-row,
  .nl-interests {
    grid-template-columns: 1fr;
  }
  .nl-form {
    padding: 32px 24px;
  }
}

/* ==========================================================================
   Gracias view — confirmación genérica integrada desde Stitch. Solo variables.
   ========================================================================== */

.gr-page {
  min-height: 70vh;
  display: flex;
  align-items: center;
}

.gr-card {
  max-width: 640px;
  margin: 0 auto;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card-hover);
  padding: 64px 48px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gr-mark {
  width: 88px;
  height: 88px;
  margin-bottom: 32px;
  border-radius: var(--radius-full);
  background: var(--color-blue);
  color: var(--color-white);
  font-size: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gr-eyebrow {
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-blue);
  margin-bottom: 16px;
}

.gr-title {
  font-size: var(--fs-headline-lg);
  color: var(--color-navy);
  margin-bottom: 16px;
}

.gr-text {
  font-size: var(--fs-body-lg);
  max-width: 440px;
  margin: 0 auto 40px;
}

.gr-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin-bottom: 48px;
}

.gr-social {
  width: 100%;
  padding-top: 40px;
  border-top: 1px solid var(--color-border);
}

.gr-social-title {
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
  margin-bottom: 20px;
}

.gr-social-links {
  display: flex;
  justify-content: center;
  gap: 32px;
}

.gr-social-links a {
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  color: var(--color-blue);
}

.gr-social-links a:hover {
  color: var(--color-navy);
}

@media (max-width: 768px) {
  .gr-title {
    font-size: var(--fs-headline-md);
  }
  .gr-card {
    padding: 48px 24px;
  }
}

/* ==========================================================================
   Legal views — Privacy y Terms (layout compartido). Solo variables globales.
   ========================================================================== */

.legal-hero {
  background: var(--color-ice);
  padding-bottom: 64px;
}

.legal-eyebrow {
  display: inline-block;
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-blue);
  margin-bottom: 20px;
}

.legal-hero h1 {
  font-size: var(--fs-headline-lg);
  color: var(--color-navy);
  max-width: 760px;
  margin-bottom: 20px;
}

.legal-hero p {
  font-size: var(--fs-body-lg);
  max-width: 640px;
  margin-bottom: 24px;
}

.legal-updated {
  display: inline-block;
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  color: var(--color-text-muted);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 8px 16px;
}

.legal-body-section {
  background: var(--color-white);
}

.legal-layout {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: 64px;
  align-items: start;
}

/* Índice */
.legal-toc {
  position: sticky;
  top: 104px;
  background: var(--color-ice);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 32px;
}

.legal-toc h5 {
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: 20px;
}

.legal-toc nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.legal-toc nav a {
  padding-left: 16px;
  border-left: 2px solid transparent;
  color: var(--color-text-muted);
  font-size: var(--fs-body-md);
  line-height: 1.4;
}

.legal-toc nav a:hover {
  color: var(--color-blue);
}

.legal-toc nav a.is-active {
  color: var(--color-navy);
  font-weight: 600;
  border-left-color: var(--color-navy);
}

/* Contenido legal */
.legal-section {
  margin-bottom: 48px;
  scroll-margin-top: 96px;
}

.legal-section h2 {
  font-size: var(--fs-headline-sm);
  margin-bottom: 16px;
}

.legal-content p {
  font-size: var(--fs-body-md);
  line-height: 1.8;
  margin-bottom: 16px;
}

.legal-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.legal-list li {
  position: relative;
  padding-left: 24px;
  color: var(--color-text-muted);
  line-height: 1.7;
}

.legal-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-blue);
}

/* Bloque de contacto */
.legal-contact {
  margin-top: 56px;
  background: var(--color-navy);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 40px;
}

.legal-contact h4 {
  color: var(--color-white);
  font-size: var(--fs-headline-sm);
  margin-bottom: 12px;
}

.legal-contact p {
  color: rgba(243, 247, 251, 0.8);
  margin-bottom: 24px;
}

.legal-contact-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.legal-contact-rows a {
  color: var(--color-white);
  font-weight: 600;
}

.legal-contact-rows a:hover {
  color: var(--color-ice);
}

.legal-contact-rows span {
  color: rgba(243, 247, 251, 0.7);
  font-size: var(--fs-label-md);
}

/* CTA final (Terms) */
.legal-cta {
  background: var(--color-ice);
  text-align: center;
}

.legal-cta h2 {
  font-size: var(--fs-headline-md);
  margin-bottom: 24px;
}

/* Responsive legales */
@media (max-width: 900px) {
  .legal-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .legal-toc {
    position: static;
  }
}

@media (max-width: 768px) {
  .legal-hero h1 {
    font-size: var(--fs-headline-md);
  }
}

/* ==========================================================================
   Admin Dashboard view — integrado desde Stitch. Solo variables globales.
   ========================================================================== */

.dash-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.dash-head p {
  margin: 4px 0 0;
}

.dash-note {
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  color: var(--color-text-muted);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 8px 16px;
}

.dash-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}

.dash-metric-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.dash-delta {
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  font-weight: 600;
  white-space: nowrap;
}

.dash-delta-up { color: #16803f; }
.dash-delta-down { color: var(--color-error); }
.dash-delta-flat { color: var(--color-text-muted); }

.dash-block {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 28px;
  margin-bottom: 32px;
}

.dash-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.dash-block-head h2 {
  font-size: var(--fs-headline-sm);
  margin: 0;
}

.dash-link {
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  font-weight: 600;
  color: var(--color-blue);
  white-space: nowrap;
}

.dash-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 32px;
}

.dash-panel {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 28px;
}

/* Agenda de hoy */
.dash-agenda {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.dash-agenda li {
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-border);
}

.dash-agenda li:last-child {
  border-bottom: none;
}

.dash-agenda-time {
  flex-shrink: 0;
  width: 64px;
  text-align: center;
  border-right: 1px solid var(--color-border);
  padding-right: 16px;
}

.dash-agenda-hour {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-navy);
}

.dash-agenda-mer {
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  color: var(--color-text-muted);
}

.dash-agenda h4 {
  font-family: var(--font-display);
  font-size: var(--fs-body-md);
  margin-bottom: 2px;
}

.dash-agenda p {
  font-size: var(--fs-label-md);
  margin: 0;
}

/* Últimos leads */
.dash-leads {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dash-leads li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-border);
}

.dash-leads li:last-child {
  border-bottom: none;
}

.dash-avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--color-navy);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  font-weight: 600;
}

.dash-lead-info {
  flex: 1;
}

.dash-lead-info h4 {
  font-family: var(--font-display);
  font-size: var(--fs-body-md);
  margin-bottom: 2px;
}

.dash-lead-info p {
  font-size: var(--fs-label-md);
  margin: 0;
}

.dash-lead-time {
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* Contenido reciente */
.dash-content {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dash-content li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-border);
}

.dash-content li:last-child {
  border-bottom: none;
}

.dash-content h4 {
  font-family: var(--font-display);
  font-size: var(--fs-body-md);
  margin-bottom: 2px;
}

.dash-content p {
  font-size: var(--fs-label-md);
  margin: 0;
}

@media (max-width: 900px) {
  .dash-columns {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Admin Settings + SEO views — integradas desde Stitch. Solo variables.
   ========================================================================== */

.set-head, .seo-head {
  margin-bottom: 32px;
}

.set-head p, .seo-head p {
  margin: 4px 0 0;
}

.set-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  align-items: start;
}

/* Tabs verticales */
.set-tabs {
  position: sticky;
  top: 104px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 12px;
}

.set-tab {
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  color: var(--color-text-muted);
  padding: 12px 16px;
  border-radius: var(--radius-md);
  border-left: 2px solid transparent;
  transition: background 0.2s ease, color 0.2s ease;
}

.set-tab:hover {
  background: var(--color-ice);
  color: var(--color-navy);
}

.set-tab.is-active {
  background: var(--color-ice);
  color: var(--color-navy);
  font-weight: 600;
  border-left-color: var(--color-blue);
}

/* Contenido */
.set-content {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 40px;
}

.set-panel h2 {
  font-size: var(--fs-headline-sm);
  margin-bottom: 24px;
}

.set-hint {
  font-size: var(--fs-label-md);
  color: var(--color-text-muted);
  margin: -12px 0 24px;
}

.set-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.set-uploads {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.set-upload {
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: 24px;
  text-align: center;
  background: var(--color-ice);
}

.set-upload-wide {
  margin-bottom: 20px;
}

.set-upload span {
  display: block;
  font-family: var(--font-label);
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: 6px;
}

.set-upload small {
  font-size: var(--fs-label-md);
  color: var(--color-text-muted);
}

/* Estado del sistema */
.set-status {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--color-ice);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-top: 8px;
}

.set-status-dot {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  margin-top: 4px;
  border-radius: var(--radius-full);
  background: #16803f;
}

.set-status strong {
  color: var(--color-navy);
}

.set-status p {
  margin: 4px 0 0;
  font-size: var(--fs-label-md);
}

/* Días de atención */
.set-days {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.set-day {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  cursor: pointer;
  font-size: var(--fs-label-md);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.set-day.is-active {
  border-color: var(--color-blue);
  background: var(--color-ice);
}

.set-day input {
  width: auto;
  accent-color: var(--color-blue);
}

/* Apariencia */
.set-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  cursor: pointer;
}

.set-toggle input {
  width: auto;
  accent-color: var(--color-blue);
}

.set-swatches {
  display: flex;
  gap: 16px;
}

.set-swatch {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  color: var(--color-text-muted);
}

.set-swatch-box {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}

.set-theme-preview {
  margin-top: 24px;
  padding: 32px;
  border-radius: var(--radius-md);
  background: var(--color-ice);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.3s ease, color 0.3s ease;
}

.set-theme-preview.is-dark {
  background: var(--color-navy);
  color: var(--color-white);
}

.set-theme-title {
  font-family: var(--font-display);
  font-weight: 600;
}

.set-theme-btn {
  background: var(--color-blue);
  color: var(--color-white);
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
}

/* Guardar */
.set-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
}

.set-saved {
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  color: #16803f;
}

@media (max-width: 900px) {
  .set-layout {
    grid-template-columns: 1fr;
  }
  .set-tabs {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .set-row, .set-uploads {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Admin SEO view — integrada desde Stitch. Solo variables globales.
   (comparte set-upload / set-saved con Settings)
   ========================================================================== */

.seo-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 32px;
}

.seo-tab {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  color: var(--color-text-muted);
  padding: 12px 16px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.seo-tab:hover {
  color: var(--color-navy);
}

.seo-tab.is-active {
  color: var(--color-navy);
  font-weight: 600;
  border-bottom-color: var(--color-navy);
}

.seo-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  align-items: start;
}

.seo-panel,
.seo-block {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 32px;
}

.seo-block {
  margin-bottom: 0;
}

.seo-panel h2,
.seo-block h2 {
  font-size: var(--fs-headline-sm);
  margin-bottom: 24px;
}

.seo-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.seo-block-head h2 {
  margin: 0;
}

.seo-hint {
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  color: var(--color-text-muted);
}

.seo-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.seo-route {
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  color: var(--color-blue);
  background: var(--color-ice);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.seo-edit {
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  font-weight: 600;
  color: var(--color-blue);
}

.seo-edit:hover {
  text-decoration: underline;
}

/* Sidebar de previews */
.seo-side-title {
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: 16px;
}

/* Preview tipo Google */
.seo-serp {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 24px;
}

.seo-serp-url {
  font-size: var(--fs-label-md);
  color: #202124;
  margin-bottom: 6px;
}

.seo-serp-title {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.3;
  color: #1a0dab;
  margin-bottom: 6px;
}

.seo-serp-desc {
  font-size: var(--fs-label-md);
  line-height: 1.5;
  color: #4d5156;
}

/* Preview social */
.seo-social-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.seo-social-media {
  aspect-ratio: 1200 / 630;
  background: linear-gradient(160deg, var(--color-navy) 0%, var(--color-blue) 100%);
}

.seo-social-body {
  padding: 16px 20px;
}

.seo-social-domain {
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}

.seo-social-title {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: 6px;
}

.seo-social-desc {
  font-size: var(--fs-label-md);
  color: var(--color-text-muted);
  line-height: 1.5;
}

.seo-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  margin-top: 32px;
}

@media (max-width: 900px) {
  .seo-grid {
    grid-template-columns: 1fr;
  }
  .seo-row {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Admin CRM (compartido) — Leads, Contactos, Aplicaciones EOS™, Consultas.
   Solo variables globales.
   ========================================================================== */

.crm-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.crm-head p {
  margin: 4px 0 0;
}

.crm-head-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.crm-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

/* Filtros */
.crm-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px 24px 4px;
  box-shadow: var(--shadow-card);
  margin-bottom: 24px;
}

/* Los .field internos de los BaseSelect no necesitan margen extra */
.crm-filters .field {
  margin-bottom: 16px;
}

/* Tabla */
.crm-table {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 8px 8px 0;
  overflow-x: auto;
}

.crm-table .base-table {
  border: none;
}

.crm-count {
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  color: var(--color-text-muted);
  padding: 16px 16px 12px;
  margin: 0;
}

/* Celda de nombre con avatar */
.crm-cell-name {
  display: flex;
  align-items: center;
  gap: 12px;
}

.crm-cell-name strong {
  display: block;
  color: var(--color-navy);
}

.crm-cell-sub {
  display: block;
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  color: var(--color-text-muted);
}

.crm-avatar {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-full);
  background: var(--color-navy);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  font-weight: 600;
}

.crm-avatar-lg {
  width: 48px;
  height: 48px;
}

.crm-view {
  background: none;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  color: var(--color-blue);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.crm-view:hover {
  border-color: var(--color-blue);
  background: var(--color-ice);
}

/* Botón peligro reutilizable */
.crm-btn-danger {
  background: transparent;
  border: 1px solid var(--color-error);
  color: var(--color-error);
}

.crm-btn-danger:hover {
  background: rgba(186, 26, 26, 0.08);
}

/* Ficha lateral (slide-over) */
.crm-panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(7, 20, 38, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 60;
}

.crm-panel-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.crm-panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 440px;
  max-width: 92vw;
  background: var(--color-white);
  border-left: 1px solid var(--color-border);
  box-shadow: -16px 0 40px rgba(7, 20, 38, 0.12);
  padding: 28px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  z-index: 61;
}

.crm-panel.is-open {
  transform: translateX(0);
}

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

.crm-close {
  background: none;
  border: none;
  font-size: 18px;
  color: var(--color-text-muted);
  cursor: pointer;
  line-height: 1;
}

.crm-close:hover {
  color: var(--color-navy);
}

.crm-panel-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.crm-panel-section {
  padding: 20px 0;
  border-top: 1px solid var(--color-border);
}

.crm-panel-section h4 {
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: 12px;
}

.crm-data {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.crm-data li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: var(--fs-body-md);
  color: var(--color-navy);
}

.crm-data li span {
  color: var(--color-text-muted);
}

.crm-note {
  background: var(--color-ice);
  border-radius: var(--radius-md);
  padding: 16px;
  margin: 0;
  font-style: italic;
}

.crm-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}

.crm-timeline li {
  position: relative;
  padding: 0 0 16px 20px;
  border-left: 1px solid var(--color-border);
  color: var(--color-navy);
}

.crm-timeline li::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 4px;
  width: 9px;
  height: 9px;
  border-radius: var(--radius-full);
  background: var(--color-blue);
}

.crm-timeline li:last-child {
  padding-bottom: 0;
  border-left-color: transparent;
}

.crm-next {
  margin: 0;
  font-weight: 600;
  color: var(--color-navy);
}

.crm-panel-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
}

.crm-panel-actions .btn {
  justify-content: center;
}

@media (max-width: 768px) {
  .crm-panel-actions {
    grid-template-columns: 1fr;
  }
}

/* --- Admin CRM: extras usados por Contactos (y reutilizables) --- */
.crm-cell-strong {
  display: block;
  color: var(--color-navy);
}

.crm-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.crm-tag {
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  color: var(--color-blue);
  background: rgba(74, 111, 165, 0.12);
  border-radius: var(--radius-full);
  padding: 4px 12px;
}

.crm-mini-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.crm-mini-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.crm-mini-list strong {
  display: block;
  color: var(--color-navy);
}

.crm-empty-inline {
  font-size: var(--fs-label-md);
  color: var(--color-text-muted);
  margin: 0;
}

/* --- Admin CRM: bloque de IA interna (Aplicaciones EOS™ y Consultas) --- */
.crm-ai {
  background: var(--color-navy);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 8px;
}

.crm-ai-head {
  margin-bottom: 14px;
}

.crm-ai-badge {
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-blue-soft);
}

.crm-ai-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.crm-ai-btn {
  justify-content: center;
  font-size: var(--fs-label-md);
}

.crm-ai .btn-secondary {
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--color-white);
}

.crm-ai .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
}

.crm-ai-output {
  margin-top: 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  padding: 16px;
}

.crm-ai-output strong {
  display: block;
  color: var(--color-white);
  margin-bottom: 6px;
}

.crm-ai-output p {
  color: rgba(243, 247, 251, 0.85);
  margin: 0 0 10px;
  font-size: var(--fs-body-md);
}

.crm-ai-note {
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  color: rgba(255, 255, 255, 0.45);
}

.crm-panel-actions-4 {
  grid-template-columns: 1fr 1fr;
}

/* --- Admin CRM: tabs (Consultas) y textarea de nota --- */
.crm-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 24px;
}

.crm-tab {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  color: var(--color-text-muted);
  padding: 12px 16px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.crm-tab:hover {
  color: var(--color-navy);
}

.crm-tab.is-active {
  color: var(--color-navy);
  font-weight: 600;
  border-bottom-color: var(--color-navy);
}

.crm-note-input {
  width: 100%;
  background: var(--color-ice);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: 12px;
  color: var(--color-navy);
  outline: none;
  resize: vertical;
  font-family: var(--font-body);
  font-size: var(--fs-body-md);
}

.crm-note-input:focus {
  border-color: var(--color-blue);
  box-shadow: 0 0 0 3px rgba(39, 76, 119, 0.15);
}

/* ==========================================================================
   Admin Agenda view — calendario integrado desde Stitch. Solo variables.
   ========================================================================== */

.agenda-viewtoggle {
  display: inline-flex;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.agenda-viewbtn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  color: var(--color-text-muted);
  padding: 10px 18px;
}

.agenda-viewbtn.is-active {
  background: var(--color-navy);
  color: var(--color-white);
}

.agenda-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 24px;
  margin-bottom: 24px;
}

.agenda-cal {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 20px;
  /* Permite encoger dentro del grid .agenda-layout (evita overflow ~1024px). */
  min-width: 0;
  overflow-x: auto;
}

/* Semana */
.agenda-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(88px, 1fr));
  gap: 8px;
  min-height: 360px;
}

.agenda-week-col {
  border-right: 1px solid var(--color-border);
  padding-right: 8px;
}

.agenda-week-col:last-child {
  border-right: none;
}

.agenda-week-head {
  text-align: center;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 12px;
}

.agenda-week-dow {
  display: block;
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  color: var(--color-text-muted);
}

.agenda-week-date {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-navy);
}

.agenda-week-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.agenda-event {
  border-radius: var(--radius-sm);
  padding: 8px;
  border-left: 3px solid var(--color-blue);
  background: var(--color-ice);
}

.agenda-event strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-label-md);
  color: var(--color-navy);
  line-height: 1.3;
}

.agenda-event-time {
  font-family: var(--font-label);
  font-size: 11px;
  color: var(--color-text-muted);
}

.agenda-event-who {
  font-size: 11px;
  color: var(--color-text-muted);
}

.agenda-event-confirmada { border-left-color: #16803f; }
.agenda-event-solicitada { border-left-color: var(--color-blue); }
.agenda-event-block { border-left-color: var(--color-text-muted); background: rgba(95,111,130,0.08); }

/* Hoy */
.agenda-today h3 {
  font-size: var(--fs-headline-sm);
  margin-bottom: 16px;
}

.agenda-today .agenda-event {
  margin-bottom: 10px;
}

/* Mes */
.agenda-month {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.agenda-month-dow {
  text-align: center;
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  color: var(--color-text-muted);
  padding-bottom: 8px;
}

.agenda-month-cell {
  aspect-ratio: 1 / 1;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 6px;
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  color: var(--color-navy);
}

.agenda-month-cell.is-empty {
  background: var(--color-ice);
  border-color: transparent;
}

.agenda-month-cell.has-event {
  border-color: var(--color-blue);
  background: rgba(74, 111, 165, 0.08);
  font-weight: 600;
}

/* Sidebar */
.agenda-side {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 24px;
}

.agenda-side-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
}

.agenda-side-head h3 {
  font-size: var(--fs-headline-sm);
  margin: 0;
}

.agenda-upcoming {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
}

.agenda-upcoming li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
}

.agenda-upcoming li:last-child {
  border-bottom: none;
}

.agenda-upcoming strong {
  display: block;
  color: var(--color-navy);
}

.agenda-capacity {
  background: var(--color-ice);
  border-radius: var(--radius-md);
  padding: 16px;
  text-align: center;
}

.agenda-capacity-value {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-headline-md);
  color: var(--color-navy);
}

.agenda-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.crm-view-danger {
  color: var(--color-error);
  border-color: rgba(186, 26, 26, 0.3);
}

.crm-view-danger:hover {
  background: rgba(186, 26, 26, 0.08);
  border-color: var(--color-error);
}

@media (max-width: 900px) {
  .agenda-layout {
    grid-template-columns: 1fr;
  }
  .agenda-week {
    overflow-x: auto;
  }
}

/* ==========================================================================
   Admin Meeting types — cards + editor. Solo variables globales.
   ========================================================================== */

.mt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.mt-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 24px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.mt-card:hover {
  border-color: var(--color-blue);
  box-shadow: var(--shadow-card-hover);
}

.mt-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.mt-price {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-navy);
}

.mt-card h3 {
  font-size: var(--fs-headline-sm);
  margin-bottom: 16px;
}

.mt-meta {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mt-meta li {
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  color: var(--color-text-muted);
}

.mt-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Editor */
.mt-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.mt-slug {
  display: flex;
  align-items: center;
  background: var(--color-ice);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.mt-slug span {
  padding: 0 12px;
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.mt-slug input {
  flex: 1;
  border: none;
  background: var(--color-white);
  padding: 12px;
  color: var(--color-navy);
  outline: none;
}

.mt-required {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mt-required li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--color-ice);
  border-radius: var(--radius-sm);
}

.mt-locked {
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  color: var(--color-text-muted);
}

.mt-check {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.mt-check input {
  width: auto;
  accent-color: var(--color-blue);
}

.mt-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 8px;
  cursor: pointer;
}

.mt-toggle input {
  width: auto;
  accent-color: var(--color-blue);
}

/* --- Admin Content: editor ancho + acciones IA en columna --- */
.crm-panel-wide {
  width: 560px;
}

.crm-ai-actions-col {
  grid-template-columns: 1fr;
}

/* --- Admin Newsletter: nota de envío externo --- */
.nlA-note {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  background: rgba(74, 111, 165, 0.1);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-blue);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin-bottom: 24px;
}

.nlA-note strong {
  color: var(--color-navy);
}

.nlA-note span {
  color: var(--color-text-muted);
}

/* ==========================================================================
   Admin Companies — cards editables + mapa del ecosistema. Solo variables.
   ========================================================================== */

.compA-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-bottom: 32px;
}

.compA-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 28px;
  display: flex;
  flex-direction: column;
}

.compA-cat {
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-blue);
  margin-bottom: 12px;
}

.compA-card h3 {
  font-size: var(--fs-headline-sm);
  margin-bottom: 12px;
}

.compA-card p {
  flex: 1;
  margin-bottom: 20px;
}

.compA-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.compA-url {
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  color: var(--color-blue);
}

/* Mapa del ecosistema */
.compA-map-section {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 32px;
}

.compA-map-section h2 {
  font-size: var(--fs-headline-sm);
  margin-bottom: 24px;
}

.compA-map {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.compA-node {
  background: var(--color-ice);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px 20px;
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  font-weight: 500;
  color: var(--color-navy);
  white-space: nowrap;
}

.compA-node-core {
  background: var(--color-navy);
  border-color: var(--color-navy);
  color: var(--color-white);
}

.compA-arrow {
  color: var(--color-blue-soft);
  font-size: 18px;
}

/* --- Admin Users: bloque de seguridad + hints --- */
.usr-security {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: rgba(186, 26, 26, 0.06);
  border: 1px solid rgba(186, 26, 26, 0.2);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin-bottom: 24px;
}

.usr-security-mark {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  margin-top: 5px;
  border-radius: var(--radius-full);
  background: var(--color-error);
}

.usr-security strong {
  display: block;
  color: var(--color-navy);
  margin-bottom: 2px;
}

.usr-security span {
  color: var(--color-text-muted);
  font-size: var(--fs-label-md);
}

.usr-hint {
  font-size: var(--fs-label-md);
  color: var(--color-text-muted);
  margin: -8px 0 16px;
}

/* ==========================================================================
   Admin IA interna — asistente mock. Solo variables globales.
   ========================================================================== */

.ai-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  color: var(--color-navy);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 8px 16px;
}

.ai-status-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: #16803f;
}

.ai-functions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.ai-func-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 24px;
}

.ai-func-card h3 {
  font-size: var(--fs-headline-sm);
  margin-bottom: 16px;
}

.ai-func-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ai-func-card li {
  position: relative;
  padding-left: 18px;
  font-size: var(--fs-label-md);
  color: var(--color-text-muted);
}

.ai-func-card li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-blue);
}

.ai-workspace {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 32px;
}

.ai-work-input,
.ai-work-output {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 28px;
}

.ai-work-input h2,
.ai-work-output h2 {
  font-size: var(--fs-headline-sm);
  margin: 0 0 20px;
}

.ai-output-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.ai-output-head h2 {
  margin: 0;
}

.ai-output-tools {
  display: flex;
  gap: 8px;
}

.ai-result {
  width: 100%;
  background: var(--color-ice);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: 16px;
  color: var(--color-navy);
  outline: none;
  resize: vertical;
  font-family: var(--font-body);
  font-size: var(--fs-body-md);
  line-height: 1.6;
}

.ai-result:focus {
  border-color: var(--color-blue);
  box-shadow: 0 0 0 3px rgba(39, 76, 119, 0.15);
}

.ai-result-note {
  display: block;
  margin-top: 10px;
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  color: var(--color-text-muted);
}

.ai-config {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 32px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 24px 28px;
}

.ai-config-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ai-config-item span {
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

.ai-config-item strong {
  color: var(--color-navy);
}

.ai-config-ok {
  color: #16803f;
}

@media (max-width: 900px) {
  .ai-workspace {
    grid-template-columns: 1fr;
  }
}

/* --- Admin Pages: bloques de contenido --- */
.pg-blocks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pg-blocks li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--color-ice);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-navy);
}

.pg-block-handle {
  color: var(--color-text-muted);
  cursor: grab;
  letter-spacing: -2px;
}

/* ==========================================================================
   FAQs — vista pública /preguntas-frecuentes
   ========================================================================== */

.faqs-view { background: var(--color-white); }

.faqs-hero { background: var(--color-navy); padding: 96px 0 72px; }
.faqs-hero .section-label { color: var(--color-blue-soft); margin-bottom: 16px; }
.faqs-hero__title {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, var(--fs-headline-lg));
  color: var(--color-white);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 20px;
}
.faqs-hero__sub { font-size: var(--fs-body-lg); color: rgba(255,255,255,0.72); max-width: 620px; }

/* Filtros */
.faqs-filters { padding: 32px 0; border-bottom: 1px solid var(--color-border); }
.faqs-filters__pills { display: flex; flex-wrap: wrap; gap: 10px; }
.faqs-filter-pill {
  padding: 8px 18px;
  border-radius: 100px;
  border: 1.5px solid var(--color-border-strong);
  background: var(--color-white);
  color: var(--color-navy);
  font-family: var(--font-label);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.faqs-filter-pill:hover  { border-color: var(--color-blue); color: var(--color-blue); }
.faqs-filter-pill.active { background: var(--color-navy); border-color: var(--color-navy); color: var(--color-white); }

/* Lista acordeón */
.faqs-list { padding: 56px 0; }
.faqs-list__inner { max-width: 780px; display: flex; flex-direction: column; gap: 0; }

.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-item:first-child { border-top: 1px solid var(--color-border); }

.faq-item__q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 22px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  font-weight: 600;
  color: var(--color-navy);
  line-height: 1.45;
}
.faq-item__q:hover { color: var(--color-blue); }
.faq-item__icon { font-size: 22px; flex-shrink: 0; color: var(--color-blue-soft); }

.faq-item__a { padding: 0 0 24px; }
.faq-item__a p { font-size: var(--fs-body-md, 16px); color: var(--color-text-muted); line-height: 1.7; max-width: 680px; }

.faqs-empty { color: var(--color-text-muted); font-size: 15px; padding: 32px 0; }

/* CTA mid */
.faqs-cta-mid { background: var(--color-ice); padding: 72px 0; }
.faqs-cta-mid__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.faqs-cta-mid__card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.faqs-cta-mid__card .section-label { margin-bottom: 0; }
.faqs-cta-mid__card h2 { font-family: var(--font-display); font-size: var(--fs-headline-sm); color: var(--color-navy); font-weight: 700; }
.faqs-cta-mid__card p { font-size: 15px; color: var(--color-text-muted); }

/* Bottom */
.faqs-bottom { padding: 96px 0; text-align: center; }
.faqs-bottom__inner { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.faqs-bottom h2 { font-family: var(--font-display); font-size: var(--fs-headline-md); color: var(--color-navy); font-weight: 700; }
.faqs-bottom p { font-size: var(--fs-body-lg); color: var(--color-text-muted); max-width: 520px; }

@media (max-width: 768px) {
  .faqs-cta-mid__inner { grid-template-columns: 1fr; }
  .faqs-hero { padding: 64px 0 48px; }
}

/* ==========================================================================
   FAQs Admin — /admin/faqs
   ========================================================================== */

.faqs-admin { display: flex; flex-direction: column; gap: 24px; }

.faqs-admin__seo-notice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: #EEF4FF;
  border: 1px solid #C7D9F6;
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  font-size: 13.5px;
  color: var(--color-navy);
  line-height: 1.55;
}
.faqs-admin__seo-notice strong { margin-right: 6px; }
.faqs-admin__seo-notice code {
  background: rgba(39,76,119,.10);
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 12px;
}

.faqs-admin__metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

.faqs-admin__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.faqs-admin__filters .base-input { max-width: 240px; }

.faq-table-q {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13.5px;
  max-width: 340px;
}
.faq-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 100px;
  background: rgba(39,76,119,.08);
  color: var(--color-blue);
  font-family: var(--font-label);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.faqs-admin__empty { color: var(--color-text-muted); font-size: 14px; padding: 24px 0; }

/* Panel editor */
.faqs-admin__panel {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 32px rgba(7,20,38,.08);
}
.faqs-admin__preview {
  margin-top: 16px;
  padding: 16px;
  background: var(--color-ice);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}
.faq-preview-q { font-weight: 600; color: var(--color-navy); margin-bottom: 8px; font-size: 14px; }
.faq-preview-a { color: var(--color-text-muted); font-size: 13.5px; line-height: 1.6; }

@media (max-width: 900px) {
  .faqs-admin__metrics { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   Sprint 4.2C — utilidades de estado API y mejoras panel admin
   ========================================================================== */

/* Tabla-action-btn (FAQs tabla — archivo rápido) */
.table-action-btn {
  font-family: var(--font-label);
  font-size: 0.78rem;
  padding: 3px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  color: var(--color-text);
  transition: background .15s;
}
.table-action-btn:hover { background: var(--color-ice); }

/* Panel de páginas: tabs internos reutilizando seo-tab */
.crm-panel .seo-tabs { border-bottom: 1px solid var(--color-border); }

/* Bloque de texto muted en secciones sin DB */
.set-hint + .set-hint { margin-top: 4px; }

/* ==========================================================================
   Sprint 4.2H — Media/uploads
   ========================================================================== */

/* Upload box */
.media-upload-box {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}
.media-upload-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-navy);
  margin: 0 0 0.75rem;
}
.media-upload-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.media-upload-label {
  display: block;
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-sm);
  padding: 1.25rem;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  line-height: 1.5;
  position: relative;
}
.media-upload-label:hover,
.media-upload-label:focus-within {
  border-color: var(--color-accent);
  background: var(--color-ice);
}
.media-upload-label.is-uploading {
  opacity: .6;
  pointer-events: none;
}
.media-upload-label strong { color: var(--color-navy); }
.media-upload-label small  { font-size: 0.78rem; }
.media-file-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

/* Galería grid */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.media-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s;
}
.media-card:hover { box-shadow: 0 4px 16px rgba(7,20,38,.1); }
.media-preview {
  background: var(--color-ice);
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.media-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.media-badge {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-sm);
}
.media-badge--pdf   { background: #fde8e8; color: #c0392b; }
.media-badge--video { background: #e8eafe; color: #2c3e9c; }
.media-badge--other { background: var(--color-border); color: var(--color-text-muted); }
.media-info {
  padding: 0.75rem;
  flex: 1;
}
.media-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-navy);
  margin: 0 0 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.media-actions {
  display: flex;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  border-top: 1px solid var(--color-border);
  flex-wrap: wrap;
}

/* Toast copiado */
.media-copied-toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  background: var(--color-navy);
  color: #fff;
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  z-index: 9999;
  pointer-events: none;
  animation: fadeInUp .25s ease;
}

@media (max-width: 700px) {
  .media-upload-fields { grid-template-columns: 1fr; }
  .media-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* ==========================================================================
   Sprint 4.2I — MediaPicker component
   ========================================================================== */

.mp-wrap { position: relative; }

.mp-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}

/* Cuando hay selección */
.mp-current {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}
.mp-current-thumb {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
  border: 1px solid var(--color-border);
}
.mp-current-info { flex: 1; min-width: 0; }
.mp-current-name {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mp-current-meta { font-size: 0.75rem; color: var(--color-text-muted); }
.mp-current-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.mp-btn-clear {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: 1rem;
  padding: 2px 6px;
  line-height: 1;
  border-radius: 50%;
  transition: color .15s, background .15s;
}
.mp-btn-clear:hover { color: var(--color-error); background: rgba(194,37,37,.08); }

/* Sin selección */
.mp-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: 0.88rem;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.mp-empty:hover {
  border-color: var(--color-accent);
  background: var(--color-ice);
}
.mp-empty-icon { font-size: 1.2rem; }

/* Badge tipo archivo */
.mp-badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 3px;
  letter-spacing: .06em;
}
.mp-badge--file { background: var(--color-ice); color: var(--color-text-muted); }

/* Botón pequeño */
.mp-btn-sm {
  padding: 4px 10px !important;
  font-size: 0.78rem !important;
  min-width: 0 !important;
}

/* Overlay del panel selector */
.mp-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mp-panel {
  background: var(--color-bg);
  border-radius: var(--radius-md);
  width: min(760px, 95vw);
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px rgba(7,20,38,.2);
  overflow: hidden;
}
.mp-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.mp-panel-head strong { font-size: 1rem; color: var(--color-navy); }
.mp-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.mp-search {
  flex: 1;
  min-width: 140px;
  margin-bottom: 0 !important;
  padding: 6px 10px !important;
  font-size: 0.85rem !important;
}
.mp-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}
.mp-state {
  padding: 2rem;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}
.mp-state--error { color: var(--color-error); }

/* Galería en el picker */
.mp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
}
.mp-item {
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 0;
  text-align: left;
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
  position: relative;
  display: flex;
  flex-direction: column;
}
.mp-item:hover { border-color: var(--color-accent); box-shadow: 0 2px 8px rgba(0,0,0,.1); }
.mp-item.is-selected { border-color: var(--color-accent); background: var(--color-ice); }
.mp-item-preview {
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-ice);
  overflow: hidden;
}
.mp-item-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mp-item-name {
  padding: 5px 6px 2px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mp-item-meta {
  padding: 0 6px 5px;
  font-size: 0.68rem;
  color: var(--color-text-muted);
}
.mp-item-check {
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--color-accent);
  color: #fff;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.mp-panel-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}
.mp-hint-link { font-size: 0.82rem; color: var(--color-accent); text-decoration: none; }
.mp-hint-link:hover { text-decoration: underline; }

@media (max-width: 600px) {
  .mp-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
  .mp-panel { width: 100vw; max-height: 90vh; border-radius: 0; }
}