/* ============================================================================
   Compañía Digital Design System (cd-*) — web pública de lacompaniadigital.com
   Fuente de verdad: proyecto Stitch «cd_web_deluxe» (2026-08-27) + Manual de voz
   de marca. Pack de prompts: artifact 1d2abbaa.

   Reglas del sistema:
   · Dark-first con bloques papel alternados en capítulos (no sección a sección).
   · DOS acentos con reparto fijo: cyan manda sobre oscuro, azul eléctrico (el
     color del logo) manda sobre papel. Violeta sólo en tags de rubro.
   · Escala con contraste real: display 80 / sección 48 / h2 32 / h3 22 /
     cuerpo 18 / etiqueta 12 en mayúsculas. Ese salto es lo que se ve caro.
   · Lexend en títulos, Open Sans en texto. Cards 8px, botones píldora.
   · CD da la cara: voces del mercado y escenas de proceso, nunca fotos stock.

   Se carga DESPUÉS de demo-cd.css: lo que pelea con Porto va con especificidad
   html.demo-cd o !important puntual. Trampas conocidas al final del archivo.
   ========================================================================== */

:root {
  /* Superficies oscuras */
  --cd-bg: #0A0A1A;
  --cd-surface: #14142A;
  --cd-surface-2: #1B1B36;
  --cd-surface-3: #232345;
  --cd-line: rgba(240, 240, 245, .10);
  --cd-line-soft: rgba(240, 240, 245, .06);
  --cd-line-strong: rgba(240, 240, 245, .18);

  /* Texto sobre oscuro */
  --cd-text: #E8E8F0;
  --cd-text-2: #C2C2D2;
  --cd-muted: #A0A0B0;

  /* Acento sobre oscuro */
  --cd-cyan: #00F0FF;
  --cd-cyan-bright: #66F6FF;
  --cd-cyan-hover: #00D4E0;
  --cd-cyan-ink: #04222A;
  --cd-cyan-tint: rgba(0, 240, 255, .10);
  --cd-cyan-line: rgba(0, 240, 255, .32);

  /* Acento sobre papel — el azul del logo */
  --cd-blue: #3B2FF0;
  --cd-blue-hover: #2A1FD4;
  --cd-blue-tint: rgba(59, 47, 240, .08);
  --cd-blue-line: rgba(59, 47, 240, .24);
  --cd-cyan-deep: #00B8C4;

  /* Detalle */
  /* El anillo de foco cambia de color según el fondo: el cyan es invisible
     sobre papel (1.24:1). Cada bloque redefine el token, ver .cd-block--paper. */
  --cd-focus: #00F0FF;
  --cd-violet: #8A2BE2;
  --cd-violet-tint: rgba(138, 43, 226, .12);
  --cd-success: #22C38E;

  /* Papel */
  --cd-paper: #F0F0F5;
  --cd-paper-2: #FFFFFF;
  --cd-ink: #0A0A1A;
  --cd-ink-2: #3B3B52;
  --cd-ink-muted: #5E5E78;   /* 5.3:1 sobre papel; el #6B6B85 anterior pasaba AA por 0.05 */
  --cd-paper-line: #DEDEE8;      /* separadores decorativos */
  --cd-control-line: #A9A9BC;    /* bordes de campo sobre papel — 3.0:1 */
  --cd-control-line-dark: rgba(240, 240, 245, .28);  /* ídem sobre oscuro */

  /* Tipografía */
  --cd-display: "Lexend", "Segoe UI", Helvetica, Arial, sans-serif;
  --cd-body: "Open Sans", "Segoe UI", Helvetica, Arial, sans-serif;

  /* Formas y medidas */
  --cd-r-card: 8px;
  --cd-r-pill: 999px;
  --cd-wrap: 1240px;
  --cd-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  --cd-shadow-soft: 0 10px 30px rgba(0, 0, 0, .22);
  --cd-shadow-paper: 0 12px 32px rgba(10, 10, 26, .08);
}

/* ── Base ────────────────────────────────────────────────────────────────── */
html.demo-cd body { background: var(--cd-bg); color: var(--cd-text); font-family: var(--cd-body); font-size: 18px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
html.demo-cd body, html.demo-cd p, html.demo-cd li, html.demo-cd a, html.demo-cd input, html.demo-cd textarea, html.demo-cd button { font-family: var(--cd-body); }
html.demo-cd h1, html.demo-cd h2, html.demo-cd h3, html.demo-cd h4, html.demo-cd .cd-display { font-family: var(--cd-display); }
html.demo-cd #header, html.demo-cd #footer { font-family: var(--cd-body); }
html.demo-cd .main { background: var(--cd-bg); }

/* Porto pone h3/h4 en mayúsculas — se apaga en todo el demo. El letter-spacing
   se resetea SÓLO en los headings sin clase del DS: si no, esta regla (0,1,2) le
   gana a .cd-display/.cd-h1/.cd-h2 (0,1,0) y les mata el tracking negativo. */
html.demo-cd h1, html.demo-cd h2, html.demo-cd h3, html.demo-cd h4, html.demo-cd h5 { text-transform: none; }
html.demo-cd h1:not([class*="cd-"]), html.demo-cd h2:not([class*="cd-"]),
html.demo-cd h3:not([class*="cd-"]), html.demo-cd h4:not([class*="cd-"]),
html.demo-cd h5:not([class*="cd-"]) { letter-spacing: normal; }

.cd-wrap { max-width: var(--cd-wrap); margin: 0 auto; padding: 0 24px; }
@media (min-width: 1440px) { .cd-wrap { padding: 0 32px; } }

/* ── Bloques y ritmo ─────────────────────────────────────────────────────── */
/* El padding va por token: si el variante sólo declarara `padding`, la media
   query de .cd-block (misma especificidad, más abajo) lo pisaría — medido:
   --strip pasaba de 48px a 80px en móvil, más alto que en desktop, y --tight
   terminaba en 64px. */
.cd-block { --cd-pad: 120px; padding: var(--cd-pad) 0; position: relative; }
.cd-block--tight { --cd-pad: 60px; }
.cd-block--strip { --cd-pad: 48px; }
.cd-block--paper { background: var(--cd-paper); color: var(--cd-ink); }
.cd-block--surface { background: var(--cd-surface); }

/* Cuando dos bloques papel se siguen (métricas + servicios), el segundo no
   repite el padding superior: leen como un solo capítulo claro. */
.cd-block--paper + .cd-block--paper { padding-top: 0; }

/* Un bloque que sigue al header de página no repite el padding completo: entre
   la bajada del header y el contenido quedaban ~190px de aire muerto. */
.cd-block--treated.cd-block--tight + .cd-block:not(.cd-block--paper) { padding-top: 56px; }

.cd-block--paper h1, .cd-block--paper h2, .cd-block--paper h3, .cd-block--paper h4 { color: var(--cd-ink); }
.cd-block--paper p, .cd-block--paper li { color: var(--cd-ink-2); }
.cd-block--paper a { color: var(--cd-blue); }

@media (max-width: 991px) { .cd-block { --cd-pad: 80px; } .cd-block--tight { --cd-pad: 48px; } .cd-block--strip { --cd-pad: 40px; } }
@media (max-width: 767px) { .cd-block { --cd-pad: 64px; } .cd-block--tight { --cd-pad: 40px; } .cd-block--strip { --cd-pad: 32px; } }

/* Banda oscura tratada — degradé radial + grilla. Va en hero y CTA final.
   Apenas perceptible: da profundidad, no decora. */
.cd-block--treated { background: var(--cd-bg); overflow: hidden; }
.cd-block--treated::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--cd-line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--cd-line-soft) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 70% at 70% 40%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 70% 40%, #000 20%, transparent 78%);
}
.cd-block--treated::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 55% at 78% 32%, rgba(0, 240, 255, .08), transparent 70%);
}
.cd-block--treated > * { position: relative; z-index: 1; }

/* ── Tipografía ──────────────────────────────────────────────────────────── */
.cd-display {
  font-size: clamp(44px, 5.6vw, 80px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.03em;
  text-wrap: balance;
  margin: 0;
}
.cd-h1 { font-size: clamp(32px, 3.6vw, 48px); font-weight: 600; line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; margin: 0; }
.cd-h2 { font-size: clamp(24px, 2.4vw, 32px); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; text-wrap: balance; margin: 0; }
.cd-h3 { font-size: 22px; font-weight: 500; line-height: 1.3; margin: 0; }
.cd-body { font-size: 18px; line-height: 1.65; color: var(--cd-text-2); }
.cd-body--lead { font-size: 20px; max-width: 62ch; }
.cd-block--paper .cd-body { color: var(--cd-ink-2); }
.cd-measure { max-width: 65ch; }

/* La etiqueta que encabeza cada sección. Cyan sobre oscuro, azul sobre papel. */
.cd-label {
  display: block;
  font-family: var(--cd-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cd-cyan);
  margin-bottom: 16px;
}
.cd-block--paper .cd-label { color: var(--cd-blue); }

/* Etiqueta en píldora — la variante del hero. */
.cd-label--pill {
  display: inline-block;
  padding: 7px 18px;
  border: 1px solid var(--cd-cyan-line);
  border-radius: var(--cd-r-pill);
  margin-bottom: 28px;
}

/* Encabezado de sección: título a la izquierda, link opcional a la derecha,
   alineados por la línea de base del título (no centrados verticalmente). */
.cd-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 48px; }
.cd-head__link { flex: 0 0 auto; white-space: nowrap; padding-bottom: 6px; }
@media (max-width: 767px) { .cd-head { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 32px; } }

/* ── Botones ─────────────────────────────────────────────────────────────── */
/* cd-system-base.css fuerza border-radius con !important sobre [role=main] .btn
   redefiniendo la variable; se gana redefiniendo --border-radius en el contenedor. */
.cd-btn { --border-radius: 999px; }

.cd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 30px;
  border-radius: var(--cd-r-pill);
  border: 1px solid transparent;
  font-family: var(--cd-display);
  font-size: 16px; font-weight: 500; line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.cd-btn:hover { text-decoration: none; transform: translateY(-1px); }
.cd-btn:focus-visible { outline: 2px solid var(--cd-cyan); outline-offset: 3px; }

/* Sobre oscuro manda el cyan. */
.cd-btn--primary { background: var(--cd-cyan); color: var(--cd-cyan-ink); }
.cd-btn--primary:hover { background: var(--cd-cyan-bright); color: var(--cd-cyan-ink); }
.cd-btn--ghost { background: transparent; border-color: var(--cd-cyan-line); color: var(--cd-cyan); }
.cd-btn--ghost:hover { border-color: var(--cd-cyan); background: var(--cd-cyan-tint); color: var(--cd-cyan); }

/* Sobre papel manda el azul del logo — el neón no contrasta sobre claro. */
.cd-block--paper .cd-btn--primary { background: var(--cd-blue); color: #fff; }
.cd-block--paper .cd-btn--primary:hover { background: var(--cd-blue-hover); color: #fff; }
.cd-block--paper .cd-btn--ghost { border-color: var(--cd-blue-line); color: var(--cd-blue); }
.cd-block--paper .cd-btn--ghost:hover { border-color: var(--cd-blue); background: var(--cd-blue-tint); }

.cd-btns { display: flex; flex-wrap: wrap; gap: 14px; }

/* Link con flecha. El subrayado va en el texto, nunca en la flecha: si no, al
   quebrar en dos líneas queda el subrayado colgando (defecto del export). */
.cd-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--cd-display); font-size: 15px; font-weight: 500;
  color: var(--cd-cyan); text-decoration: none; white-space: nowrap;
}
.cd-link span { text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .18s ease; }
.cd-link:hover { text-decoration: none; color: var(--cd-cyan); }
.cd-link:hover span { border-bottom-color: currentColor; }
.cd-link svg, .cd-link i { transition: transform .18s ease; }
.cd-link:hover svg, .cd-link:hover i { transform: translateX(3px); }
.cd-block--paper .cd-link { color: var(--cd-blue); }

/* ── Cards ───────────────────────────────────────────────────────────────── */
.cd-card {
  background: var(--cd-surface);
  border: 1px solid var(--cd-line);
  border-radius: var(--cd-r-card);
  padding: 28px;
  transition: border-color .2s ease, transform .2s ease;
}
.cd-card:hover { border-color: var(--cd-cyan-line); transform: translateY(-2px); }
.cd-block--paper .cd-card { background: var(--cd-paper-2); border-color: transparent; box-shadow: var(--cd-shadow-paper); }
.cd-block--paper .cd-card:hover { border-color: var(--cd-blue-line); }

/* ── Marco de browser — el envase de toda captura de sitio ───────────────── */
.cd-frame {
  border-radius: var(--cd-r-card);
  border: 1px solid var(--cd-line);
  overflow: hidden;
  background: var(--cd-surface-2);
  box-shadow: var(--cd-shadow);
}
.cd-frame__bar {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  background: #0E0E1E;
  border-bottom: 1px solid var(--cd-line);
}
.cd-frame__dot { width: 9px; height: 9px; border-radius: 50%; background: #3A3A55; flex: 0 0 auto; }
.cd-frame__title { margin-left: 10px; font-size: 12px; color: var(--cd-muted); }
/* Proporción del marco. Hay DOS casos y no se pueden tratar igual:

   · Capturas de sitio (hero, proyectos, blog): las que sube el tenant miden
     ~2.1:1 — medidas: 1301×605, 1279×596, 1892×911, 1898×902. Meterlas en 16:10
     (1.6:1) con `cover` le recorta los costados a la web: se veían cortadas.
     Con 21/10 el recorte es de ~2% y la captura entra entera.
   · Fotos del tenant (servicios): pueden ser retratos, y sin proporción fija
     estiraban el bloque a 700px de alto. Ahí 16:10 con `cover` sí es lo correcto.

   El default es la captura de sitio, que es el uso dominante del componente. */
.cd-frame__shot { display: block; width: 100%; height: auto; aspect-ratio: 21 / 10; object-fit: cover; object-position: top center; }
/* Fotos, no capturas: se recortan al centro y en formato más alto. */
.cd-frame--photo .cd-frame__shot { aspect-ratio: 16 / 10; object-position: center; }
.cd-frame__ph { aspect-ratio: 21 / 10; }
.cd-frame--photo .cd-frame__ph { aspect-ratio: 16 / 10; }
/* Placeholder mientras no hay captura real — se saca al cargar las 26. */
.cd-frame__ph {
  display: flex; align-items: center; justify-content: center;
  background: #2A2A44;
  font-family: var(--cd-display); font-size: 20px; font-weight: 500;
  color: rgba(232, 232, 240, .45);
  text-align: center; padding: 24px;
}

/* ── Card de proyecto ────────────────────────────────────────────────────── */
.cd-project { display: block; text-decoration: none; }
.cd-project:hover { text-decoration: none; }
.cd-project:hover .cd-frame { border-color: var(--cd-cyan-line); }
.cd-project__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.cd-project__name { font-family: var(--cd-display); font-size: 18px; font-weight: 500; color: var(--cd-text); margin: 0; }
.cd-block--paper .cd-project__name { color: var(--cd-ink); }

/* Tag de rubro — violeta, con relleno al 12% para que se lea sobre oscuro. */
.cd-tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--cd-r-pill);
  background: var(--cd-violet-tint);
  color: #C79BF5;
  font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.cd-block--paper .cd-tag { color: #6D1FB5; background: rgba(138, 43, 226, .10); }

/* ── Card de servicio, con número de índice al fondo ─────────────────────── */
.cd-service { position: relative; overflow: hidden; display: flex; flex-direction: column; }
.cd-service__num {
  position: absolute; right: 12px; bottom: -18px;
  font-family: var(--cd-display); font-size: 108px; font-weight: 700; line-height: 1;
  color: rgba(10, 10, 26, .045);
  pointer-events: none; user-select: none;
}
.cd-block:not(.cd-block--paper) .cd-service__num { color: rgba(240, 240, 245, .045); }
.cd-service__title { margin-bottom: 12px; }
.cd-service__text { font-size: 16px; margin: 0; }

/* ── Chips ───────────────────────────────────────────────────────────────── */
.cd-chips { display: flex; flex-wrap: wrap; gap: 12px; }
.cd-chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 22px;
  border-radius: var(--cd-r-pill);
  border: 1px solid var(--cd-line);
  background: var(--cd-surface);
  color: var(--cd-text);
  font-size: 15px; text-decoration: none;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}
.cd-chip:hover { border-color: var(--cd-cyan-line); color: var(--cd-text); text-decoration: none; }
.cd-chip.is-active { background: var(--cd-cyan); border-color: var(--cd-cyan); color: var(--cd-cyan-ink); font-weight: 600; }
.cd-block--paper .cd-chip { background: var(--cd-paper-2); border-color: var(--cd-paper-line); color: var(--cd-ink); }
.cd-block--paper .cd-chip:hover { border-color: var(--cd-blue-line); color: var(--cd-ink); }
.cd-block--paper .cd-chip.is-active { background: var(--cd-blue); border-color: var(--cd-blue); color: #fff; }
/* En móvil los filtros scrollean en horizontal en vez de envolver. */
@media (max-width: 767px) {
  .cd-chips--scroll { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .cd-chips--scroll::-webkit-scrollbar { display: none; }
  .cd-chips--scroll .cd-chip { flex: 0 0 auto; }
}

/* Chip de vertical — más grande, con ícono. Es navegación, no filtro. */
.cd-vertical {
  display: flex; align-items: center; gap: 16px;
  padding: 22px 24px;
  border-radius: var(--cd-r-card);
  background: var(--cd-paper-2);
  box-shadow: var(--cd-shadow-paper);
  color: var(--cd-ink);
  font-size: 16px; line-height: 1.35; text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.cd-vertical:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(10, 10, 26, .12); color: var(--cd-ink); text-decoration: none; }
.cd-vertical__icon { flex: 0 0 auto; width: 26px; height: 26px; color: var(--cd-blue); }

/* ── Métricas ────────────────────────────────────────────────────────────── */
.cd-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.cd-metric { text-align: center; padding: 8px 24px; }
.cd-metric + .cd-metric { border-left: 1px solid var(--cd-paper-line); }
.cd-metric__num {
  font-family: var(--cd-display); font-size: clamp(40px, 4.4vw, 64px); font-weight: 700;
  line-height: 1; letter-spacing: -.03em; color: var(--cd-blue);
  font-variant-numeric: tabular-nums;
}
.cd-metric__label { font-size: 15px; color: var(--cd-ink-muted); margin-top: 12px; }
.cd-block:not(.cd-block--paper) .cd-metric__num { color: var(--cd-cyan); }
.cd-block:not(.cd-block--paper) .cd-metric__label { color: var(--cd-muted); }
.cd-block:not(.cd-block--paper) .cd-metric + .cd-metric { border-left-color: var(--cd-line); }
@media (max-width: 767px) {
  .cd-metrics { grid-template-columns: 1fr; gap: 32px; }
  .cd-metric + .cd-metric { border-left: 0; border-top: 1px solid var(--cd-paper-line); padding-top: 32px; }
}

/* ── Cita grande — la voz del mercado ────────────────────────────────────── */
/* Alineada a la izquierda, no centrada: la comilla ancla la columna de texto. */
.cd-quote { position: relative; padding-left: 62px; }
.cd-quote::before {
  content: "\201C";
  position: absolute; left: 0; top: -6px;
  font-family: var(--cd-display); font-size: 120px; font-weight: 700; line-height: 1;
  color: var(--cd-blue); opacity: .9;
}
.cd-quote__text { font-family: var(--cd-display); font-size: clamp(22px, 2.1vw, 28px); font-weight: 500; line-height: 1.32; color: var(--cd-ink); margin: 0; text-wrap: balance; }
.cd-quote__who { display: block; margin-top: 18px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--cd-ink-muted); }
.cd-block:not(.cd-block--paper) .cd-quote::before { color: var(--cd-cyan); }
.cd-block:not(.cd-block--paper) .cd-quote__text { color: var(--cd-text); }
.cd-block:not(.cd-block--paper) .cd-quote__who { color: var(--cd-muted); }
@media (max-width: 575px) { .cd-quote { padding-left: 42px; } .cd-quote::before { font-size: 84px; } }

/* ── Línea de tiempo del acompañamiento ──────────────────────────────────── */
.cd-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; position: relative; }
/* El conector nace y muere en el centro de los círculos de los extremos. */
.cd-steps::before {
  content: ""; position: absolute; top: 27px; left: 10%; right: 10%;
  height: 1px; background: var(--cd-cyan-line);
}
.cd-step { position: relative; text-align: center; }
.cd-step__icon {
  width: 54px; height: 54px; margin: 0 auto 20px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--cd-surface);
  border: 1px solid var(--cd-cyan-line);
  color: var(--cd-cyan);
  position: relative; z-index: 1;
}
.cd-step__title { font-family: var(--cd-display); font-size: 16px; font-weight: 500; color: var(--cd-text); margin: 0; }
@media (max-width: 991px) {
  .cd-steps { grid-template-columns: repeat(2, 1fr); gap: 36px 20px; }
  .cd-steps::before { display: none; }
}
@media (max-width: 575px) { .cd-steps { grid-template-columns: 1fr; } }

/* ── Acordeón ────────────────────────────────────────────────────────────── */
.cd-acc { display: flex; flex-direction: column; gap: 12px; }
.cd-acc__item { background: var(--cd-paper-2); border-radius: var(--cd-r-card); box-shadow: var(--cd-shadow-paper); overflow: hidden; }
.cd-block:not(.cd-block--paper) .cd-acc__item { background: var(--cd-surface); border: 1px solid var(--cd-line); box-shadow: none; }
.cd-acc__q {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  width: 100%; padding: 22px 26px;
  background: none; border: 0; text-align: left; cursor: pointer;
  font-family: var(--cd-display); font-size: 18px; font-weight: 500; color: var(--cd-ink);
}
.cd-block:not(.cd-block--paper) .cd-acc__q { color: var(--cd-text); }
.cd-acc__q:focus-visible { outline: 2px solid var(--cd-blue); outline-offset: -2px; }
.cd-acc__icon { flex: 0 0 auto; transition: transform .22s ease; color: var(--cd-blue); }
.cd-block:not(.cd-block--paper) .cd-acc__icon { color: var(--cd-cyan); }
.cd-acc__item.is-open .cd-acc__icon { transform: rotate(180deg); }
.cd-acc__a { padding: 0 26px 24px; font-size: 16px; color: var(--cd-ink-2); margin: 0; max-width: 72ch; }
.cd-block:not(.cd-block--paper) .cd-acc__a { color: var(--cd-text-2); }
.cd-acc__item:not(.is-open) .cd-acc__a { display: none; }

/* ── Formulario ──────────────────────────────────────────────────────────── */
.cd-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.cd-field__label { font-size: 14px; font-weight: 600; color: var(--cd-ink-2); }
.cd-input, .cd-textarea {
  width: 100%;
  padding: 15px 22px;
  border-radius: var(--cd-r-pill);
  border: 1px solid var(--cd-paper-line);
  background: var(--cd-paper-2);
  color: var(--cd-ink);
  font-size: 16px; font-family: var(--cd-body);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.cd-textarea { border-radius: var(--cd-r-card); min-height: 148px; resize: vertical; }
.cd-input::placeholder, .cd-textarea::placeholder { color: var(--cd-ink-muted); }
.cd-input:focus, .cd-textarea:focus { outline: 0; border-color: var(--cd-blue); box-shadow: 0 0 0 3px var(--cd-blue-tint); }
.cd-block:not(.cd-block--paper) .cd-input, .cd-block:not(.cd-block--paper) .cd-textarea { background: var(--cd-surface); border-color: var(--cd-line); color: var(--cd-text); }
.cd-block:not(.cd-block--paper) .cd-input:focus, .cd-block:not(.cd-block--paper) .cd-textarea:focus { border-color: var(--cd-cyan); box-shadow: 0 0 0 3px var(--cd-cyan-tint); }
.cd-form__note { font-size: 13px; color: var(--cd-ink-muted); margin-top: 14px; }

/* ── Grillas ─────────────────────────────────────────────────────────────── */
.cd-grid { display: grid; gap: 24px; }
.cd-grid--2 { grid-template-columns: repeat(2, 1fr); }
.cd-grid--3 { grid-template-columns: repeat(3, 1fr); }
.cd-grid--4 { grid-template-columns: repeat(4, 1fr); }
/* Servicios: dos anchas arriba, tres abajo. Rompe la simetría de "3 cards". */
.cd-grid--services { grid-template-columns: repeat(6, 1fr); }
/* Cinco personajes: tres arriba y dos anchas abajo — sin el hueco que deja
   una grilla de 3 con 5 ítems. Base 6 columnas: 2+2+2 / 3+3. */
.cd-grid--5 { grid-template-columns: repeat(6, 1fr); }
.cd-grid--5 > * { grid-column: span 2; }
.cd-grid--5 > *:nth-child(4), .cd-grid--5 > *:nth-child(5) { grid-column: span 3; }
/* Siete personajes: la base (3) arriba, la capa que se suma (4) abajo.
   Base 12 columnas: 4+4+4 / 3+3+3+3 — la jerarquía se ve sola. */
.cd-grid--7 { grid-template-columns: repeat(12, 1fr); }
.cd-grid--7 > * { grid-column: span 4; }
.cd-grid--7 > *:nth-child(n+4) { grid-column: span 3; }
.cd-grid--services > *:nth-child(1), .cd-grid--services > *:nth-child(2) { grid-column: span 3; }
.cd-grid--services > *:nth-child(n+3) { grid-column: span 2; }
@media (max-width: 991px) {
  .cd-grid--3, .cd-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .cd-grid--5 { grid-template-columns: repeat(2, 1fr); }
  .cd-grid--5 > * { grid-column: span 1; }
  .cd-grid--5 > *:nth-child(5) { grid-column: span 2; }
  /* Tablet: la base entera en una fila (3) y la capa en 2×2 — sin la card gigante del final. */
  .cd-grid--7 { grid-template-columns: repeat(6, 1fr); gap: 16px; }
  .cd-grid--7 > * { grid-column: span 2; }
  .cd-grid--7 > *:nth-child(n+4) { grid-column: span 3; }
  .cd-grid--7 > *:nth-child(-n+3) { aspect-ratio: 1 / 1; } /* a 250px de ancho, el 4:3 no deja lugar al título */
  .cd-grid--services { grid-template-columns: repeat(2, 1fr); }
  .cd-grid--services > * { grid-column: span 1 !important; }
}
@media (max-width: 767px) {
  .cd-grid--2, .cd-grid--3, .cd-grid--4, .cd-grid--5, .cd-grid--services { grid-template-columns: 1fr; }
  .cd-grid--5 > * { grid-column: span 1; }
  /* Celular: siete retratos apilados son 2.500px de scroll. Fila deslizable con
     snap: se ve una card y el borde de la siguiente, que invita a deslizar. */
  .cd-grid--7 { display: flex; overflow-x: auto; gap: 14px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; margin: 0 -20px; padding: 0 20px 6px; }
  .cd-grid--7::-webkit-scrollbar { display: none; }
  .cd-grid--7 > *, .cd-grid--7 > *:nth-child(n+4) { flex: 0 0 76%; scroll-snap-align: start; grid-column: auto; }
}

/* Split asimétrico — hero, CTA final, bloques de servicio. */
.cd-split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.cd-split--60 { grid-template-columns: 1.2fr 1fr; }
.cd-split--40 { grid-template-columns: 1fr 1.2fr; }
@media (max-width: 991px) { .cd-split, .cd-split--60, .cd-split--40 { grid-template-columns: 1fr; gap: 40px; } }

/* ── Hero: las capturas en escalera, saliéndose del borde ────────────────── */
.cd-hero { padding: 72px 0 112px; } /* el título arranca donde arrancan los page headers */
.cd-hero__stack { position: relative; min-height: 520px; }
.cd-hero__stack .cd-frame { position: absolute; width: 76%; }
.cd-hero__stack .cd-frame:nth-child(1) { top: 0; left: 0; z-index: 1; }
.cd-hero__stack .cd-frame:nth-child(2) { top: 140px; left: 11%; z-index: 2; }
.cd-hero__stack .cd-frame:nth-child(3) { top: 280px; left: 22%; z-index: 3; width: 80%; }
@media (max-width: 991px) {
  .cd-hero { padding: 48px 0 64px; }
  .cd-hero__stack { min-height: 0; display: flex; gap: 16px; overflow-x: auto; padding-bottom: 12px; scrollbar-width: none; }
  .cd-hero__stack::-webkit-scrollbar { display: none; }
  .cd-hero__stack .cd-frame { position: static; flex: 0 0 82%; width: auto; }
}

/* ── Banda destacada (Impulso) ───────────────────────────────────────────── */
.cd-banner {
  background: var(--cd-surface);
  border: 1px solid var(--cd-line);
  border-left: 3px solid var(--cd-cyan);
  border-radius: var(--cd-r-card);
  padding: 44px 48px;
}
.cd-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 16px; margin-bottom: 20px;
  border-radius: var(--cd-r-pill);
  background: var(--cd-cyan-tint);
  color: var(--cd-cyan);
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.cd-stat { background: var(--cd-surface-2); border: 1px solid var(--cd-line); border-radius: var(--cd-r-card); padding: 20px; }
.cd-stat__num { font-family: var(--cd-display); font-size: 24px; font-weight: 600; color: var(--cd-text); line-height: 1.1; }
.cd-stat__label { font-size: 13px; color: var(--cd-muted); margin-top: 6px; }
@media (max-width: 767px) { .cd-banner { padding: 32px 24px; } }

/* ── Movimiento — lo que Stitch no da ────────────────────────────────────── */
.cd-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
.cd-reveal.is-in { opacity: 1; transform: none; }
.cd-reveal--d1 { transition-delay: .08s; }
.cd-reveal--d2 { transition-delay: .16s; }
.cd-reveal--d3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .cd-reveal { opacity: 1; transform: none; transition: none; }
  .cd-btn:hover, .cd-card:hover, .cd-vertical:hover { transform: none; }
  .cd-link:hover svg, .cd-link:hover i { transform: none; }
}

/* ── Trampas de la plataforma ────────────────────────────────────────────── */
/* demo-cd.css declara #footer, #footer h5 y #footer a — pero SIN !important, así
   que la especificidad de `#footer.cd-footer` alcanza sola. (Un comentario
   anterior acá afirmaba que llevaban !important: era falso, verificado.) */
html.demo-cd #footer.cd-footer { background: var(--cd-bg); border-top: 1px solid var(--cd-line); }
html.demo-cd #footer.cd-footer h5, html.demo-cd #footer.cd-footer h6 { color: var(--cd-text); text-transform: none; }
html.demo-cd #footer.cd-footer a { color: var(--cd-muted); }
html.demo-cd #footer.cd-footer a:hover { color: var(--cd-cyan); }

/* Vistas legacy que todavía no pasaron al DS: que al menos hereden el fondo. */
html.demo-cd .page-header { background: var(--cd-surface) !important; }
html.demo-cd .main .btn-modern { --border-radius: 999px; }

/* ── Header ──────────────────────────────────────────────────────────────── */
html.demo-cd #header.cd-header { background: var(--cd-bg); border-bottom: 1px solid var(--cd-line); }
/* Porto declara `#header .header-body { display:flex; flex-direction:column }`:
   el .cd-wrap queda como flex item y hace shrink-to-fit — el header medía 948px
   donde el contenido mide 1240, y en móvil colapsaba a 109px, que es por qué el
   logo se veía centrado. `align-self: stretch` + `width: 100%` lo alinean con
   el resto de la página. */
html.demo-cd #header.cd-header .header-body { background: transparent; border: 0; min-height: 0; display: block; width: 100%; }

.cd-header__row { display: flex; align-items: center; justify-content: space-between; gap: 32px; min-height: 78px; }
.cd-header__logo { display: inline-flex; align-items: center; flex: 0 0 auto; text-decoration: none; }
.cd-header__logo img { max-height: 38px; width: auto; }
.cd-header__wordmark { font-family: var(--cd-display); font-size: 20px; font-weight: 400; letter-spacing: -.01em; color: var(--cd-text); white-space: nowrap; }
.cd-header__wordmark b { font-weight: 700; }

/* Nav en bold mayúsculas: preferencia del founder validada por el sistema —
   las etiquetas del DS (.cd-label) ya son uppercase 12px con tracking, así que
   el nav habla el mismo idioma en vez de introducir un segundo registro. */
.cd-header__nav { display: flex; align-items: center; gap: 26px; }
.cd-header__nav a { position: relative; font-family: var(--cd-display); font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cd-text-2); text-decoration: none; padding: 6px 0; transition: color .18s ease; }
.cd-header__nav a:hover { color: var(--cd-text); text-decoration: none; }
.cd-header__nav a.is-active { color: var(--cd-cyan); }
.cd-header__nav a.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--cd-cyan); border-radius: 2px; }

.cd-header__actions { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.cd-btn--sm { padding: 11px 24px; font-size: 15px; }
.cd-btn--block { width: 100%; }

.cd-burger { display: none; background: none; border: 0; color: var(--cd-text); font-size: 20px; padding: 6px 2px; cursor: pointer; }
@media (max-width: 991px) {
  .cd-header__nav { display: none; }
  .cd-burger { display: inline-flex; }
  .cd-header__row { min-height: 66px; }
}
@media (max-width: 575px) { .cd-header__actions .cd-btn { display: none; } }

/* Offcanvas móvil */
.cd-offcanvas { background: var(--cd-surface); color: var(--cd-text); border-left: 1px solid var(--cd-line); }
.cd-offcanvas .offcanvas-header { border-bottom: 1px solid var(--cd-line); }
.cd-offcanvas .offcanvas-title { font-family: var(--cd-display); font-size: 16px; font-weight: 500; color: var(--cd-text); text-transform: none; }
.cd-offcanvas__link { display: block; padding: 14px 2px; border-bottom: 1px solid var(--cd-line-soft); color: var(--cd-text-2); text-decoration: none; font-size: 16px; }
.cd-offcanvas__link:hover, .cd-offcanvas__link.is-active { color: var(--cd-cyan); text-decoration: none; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
html.demo-cd #footer.cd-footer { padding: 72px 0 32px; margin: 0; }
.cd-footer__cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 48px; }
.cd-footer__logo { display: inline-flex; margin-bottom: 18px; }
.cd-footer__logo img { max-height: 36px; width: auto; }
html.demo-cd #footer.cd-footer .cd-footer__tagline { font-size: 15px; color: var(--cd-muted); max-width: 34ch; margin: 0; }
html.demo-cd #footer.cd-footer .cd-footer__col h6 { font-family: var(--cd-display); font-size: 15px; font-weight: 600; margin-bottom: 16px; }
.cd-footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.cd-footer__col li { font-size: 15px; }
html.demo-cd #footer.cd-footer .cd-footer__plain { color: var(--cd-muted); }
.cd-footer__col i { width: 18px; opacity: .8; }
.cd-footer__bottom { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--cd-line); }
html.demo-cd #footer.cd-footer .cd-footer__bottom p { font-size: 14px; color: var(--cd-muted); margin: 0; }
.cd-footer__sep { opacity: .5; margin: 0 4px; }
@media (max-width: 991px) { .cd-footer__cols { grid-template-columns: 1fr 1fr; gap: 40px 32px; } }
@media (max-width: 575px) { .cd-footer__cols { grid-template-columns: 1fr; gap: 32px; } }

/* ── Fix: color de texto sobre papel ─────────────────────────────────────── */
/* Los títulos salían blancos sobre los bloques papel. NO es la herencia de
   `html, body { color }` — esa se corta bien en `.cd-block--paper { color }`.
   Lo que pisa son reglas que apuntan DIRECTO al descendiente (theme.css sobre
   h1..h6, y demo-cd.css sobre cards y banners), y contra eso hace falta
   especificidad html.demo-cd + clase + elemento. */
html.demo-cd .cd-block--paper,
html.demo-cd .cd-block--paper h1,
html.demo-cd .cd-block--paper h2,
html.demo-cd .cd-block--paper h3,
html.demo-cd .cd-block--paper h4,
html.demo-cd .cd-block--paper h5,
html.demo-cd .cd-block--paper .cd-h1,
html.demo-cd .cd-block--paper .cd-h2,
html.demo-cd .cd-block--paper .cd-h3,
html.demo-cd .cd-block--paper .cd-quote__text,
html.demo-cd .cd-block--paper .cd-project__name,
html.demo-cd .cd-block--paper .cd-acc__q { color: var(--cd-ink); }

html.demo-cd .cd-block--paper p,
html.demo-cd .cd-block--paper li,
html.demo-cd .cd-block--paper .cd-body,
html.demo-cd .cd-block--paper .cd-service__text,
html.demo-cd .cd-block--paper .cd-acc__a { color: var(--cd-ink-2); }

html.demo-cd .cd-block--paper .cd-metric__label,
html.demo-cd .cd-block--paper .cd-quote__who,
html.demo-cd .cd-block--paper .cd-form__note { color: var(--cd-ink-muted); }

html.demo-cd .cd-block--paper .cd-label { color: var(--cd-blue); }

/* Simétrico: sobre los bloques OSCUROS los títulos van claros. Sin esto, el
   heading hereda el color de texto oscuro que demo-cd.css aplica a cards y
   banners — el título de Impulso salía navy sobre navy. */
html.demo-cd .cd-block:not(.cd-block--paper) h1,
html.demo-cd .cd-block:not(.cd-block--paper) h2,
html.demo-cd .cd-block:not(.cd-block--paper) h3,
html.demo-cd .cd-block:not(.cd-block--paper) h4,
html.demo-cd .cd-block:not(.cd-block--paper) .cd-h1,
html.demo-cd .cd-block:not(.cd-block--paper) .cd-h2,
html.demo-cd .cd-block:not(.cd-block--paper) .cd-h3,
html.demo-cd .cd-block:not(.cd-block--paper) .cd-display,
html.demo-cd .cd-block:not(.cd-block--paper) .cd-project__name,
html.demo-cd .cd-block:not(.cd-block--paper) .cd-stat__num { color: var(--cd-text); }

html.demo-cd .cd-block:not(.cd-block--paper) p,
html.demo-cd .cd-block:not(.cd-block--paper) .cd-body,
html.demo-cd .cd-block:not(.cd-block--paper) .cd-step__title { color: var(--cd-text-2); }
/* La cita es protagonista, no párrafo de apoyo: recupera el texto pleno que
   la regla de `p` de arriba (0,3,1) le quitaba a su selector (0,3,0). */
html.demo-cd .cd-block:not(.cd-block--paper) .cd-quote__text { color: var(--cd-text); }
html.demo-cd .cd-block--paper .cd-metric__num { color: var(--cd-blue); }
html.demo-cd .cd-block--paper .cd-vertical { color: var(--cd-ink); }
html.demo-cd .cd-block--paper .cd-link { color: var(--cd-blue); }

/* Porto le pone a <blockquote> un border-left grueso: aparecía una barra negra
   al lado de cada cita. La cita ya tiene su propio ancla visual (la comilla). */
html.demo-cd blockquote.cd-quote { border: 0; padding-top: 0; padding-bottom: 0; margin: 0; background: none; }

/* En grillas de 3+ columnas el h3 de 22px parte los títulos en 4 renglones.
   La escala baja un escalón donde la columna es angosta. */
.cd-grid--3 .cd-h3, .cd-grid--4 .cd-h3 { font-size: 19px; line-height: 1.28; }

/* ── Fix de desborde horizontal ──────────────────────────────────────────── */
/* Los hijos de grid y flex traen `min-width: auto`: un contenido ancho (el
   carrusel de capturas del hero, una tabla, un título largo sin quiebre) estira
   la columna y con ella el documento entero. `min-width: 0` es el fix canónico.
   ⚠️ Medido: la página NO desborda (scrollWidth == clientWidth). Chrome headless
   sin emulación de dispositivo ignora el viewport meta y arma el layout a 500px
   mínimo, así que una captura a 390px MIENTE — muestra 500px recortados. */
.cd-split > *, .cd-grid > *, .cd-metrics > *, .cd-steps > * { min-width: 0; }
.cd-hero__stack { width: 100%; max-width: 100%; }

/* ── Accesibilidad ───────────────────────────────────────────────────────── */

/* theme.css:30 declara `body a { outline: none !important }`, que mata el foco
   visible de TODO link del sitio — y casi todos los .cd-btn son <a>. Sin esto,
   navegar con Tab no muestra absolutamente nada (WCAG 2.4.7). El !important es
   la única forma de ganarle. */
html.demo-cd a:focus-visible,
html.demo-cd button:focus-visible,
html.demo-cd .cd-btn:focus-visible,
html.demo-cd .cd-link:focus-visible,
html.demo-cd .cd-chip:focus-visible,
html.demo-cd .cd-card:focus-visible,
html.demo-cd .cd-project:focus-visible,
html.demo-cd .cd-vertical:focus-visible,
html.demo-cd .cd-burger:focus-visible,
html.demo-cd .cd-acc__q:focus-visible,
html.demo-cd .cd-input:focus-visible,
html.demo-cd .cd-textarea:focus-visible {
  outline: 2px solid var(--cd-focus) !important;
  outline-offset: 3px;
  border-radius: var(--cd-r-card);
}
/* Sobre papel el anillo pasa al azul: el cyan da 1.24:1 y no se ve. */
.cd-block--paper, .cd-contact-card { --cd-focus: #3B2FF0; }
html.demo-cd .cd-acc__q:focus-visible { outline-offset: -2px; }

/* Contraste de elementos que se ven en toda la flota de tarjetas. */
.cd-frame__ph { color: rgba(232, 232, 240, .62); }   /* era .45 → 3.58:1, ahora ~6.3:1 */
.cd-block:not(.cd-block--paper) .cd-input::placeholder,
.cd-block:not(.cd-block--paper) .cd-textarea::placeholder { color: var(--cd-muted); }
.cd-block:not(.cd-block--paper) .cd-field__label { color: var(--cd-text-2); }

/* Bordes de campo y chip: eran ~1.3:1, invisibles hasta tocarlos. */
.cd-input, .cd-textarea { border-color: var(--cd-control-line); }
.cd-block:not(.cd-block--paper) .cd-input,
.cd-block:not(.cd-block--paper) .cd-textarea,
.cd-block:not(.cd-block--paper) .cd-chip { border-color: var(--cd-control-line-dark); }

/* El separador móvil de las métricas usaba el color de papel también en bandas
   oscuras: aparecía una línea clara sobre fondo oscuro. */
@media (max-width: 767px) {
  .cd-block:not(.cd-block--paper) .cd-metric + .cd-metric { border-top-color: var(--cd-line); }
}

/* Al colapsar a una columna, el `order` que alterna los lados en escritorio
   persiste: un servicio quedaba texto→imagen y el siguiente imagen→texto. */
@media (max-width: 991px) {
  .cd-split > * { order: initial !important; }
}

/* Filas de dos columnas (valor + definición) que en móvil dejaban la
   definición en ~95px de ancho. */
.cd-rows__item { display: grid; grid-template-columns: minmax(200px, 1fr) 2fr; gap: 32px; padding: 26px 0; border-top: 1px solid var(--cd-line); }
.cd-block--paper .cd-rows__item { border-top-color: var(--cd-paper-line); }
@media (max-width: 767px) { .cd-rows__item { grid-template-columns: 1fr; gap: 10px; padding: 20px 0; } }

/* Una tabla pegada desde el editor desbordaba el artículo en móvil. */
.cd-article table { display: block; overflow-x: auto; max-width: 100%; }

/* El ícono del acordeón es la animación con la que más se interactúa. */
@media (prefers-reduced-motion: reduce) { .cd-acc__icon { transition: none; } }

/* ── Blindaje de la escala tipográfica ───────────────────────────────────── */
/* demo-cd.css hereda de accounting-1 reglas como
   `h1:not([class*="text-"]) { font-size: 3.2em }`. El :not() con un selector de
   atributo SUMA especificidad: son (0,1,1) contra los (0,1,0) de .cd-display y
   .cd-h1..h3. Cargar después no alcanza — el orden sólo desempata a igual
   especificidad. Sin este bloque, medido en el navegador: el hero renderiza a
   57.6px en vez de 80, y .cd-h1 y .cd-h2 salen idénticos (43.2px), o sea que el
   salto de escala que define el sistema no existía. */
html.demo-cd .cd-display { font-size: clamp(44px, 5.6vw, 80px); font-weight: 700; line-height: 1.04; letter-spacing: -.03em; }
html.demo-cd .cd-h1 { font-size: clamp(32px, 3.6vw, 48px); font-weight: 600; line-height: 1.12; letter-spacing: -.02em; }
html.demo-cd .cd-h2 { font-size: clamp(24px, 2.4vw, 32px); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
html.demo-cd .cd-h3 { font-size: 22px; font-weight: 500; line-height: 1.3; letter-spacing: normal; }
html.demo-cd .cd-grid--3 .cd-h3,
html.demo-cd .cd-grid--4 .cd-h3 { font-size: 19px; line-height: 1.28; }

/* Los headers de página interiores son un escalón por debajo del hero de la home.
   Reemplaza los `style="font-size:clamp(36px,4.4vw,64px)"` repetidos en 5 vistas. */
html.demo-cd .cd-display--page { font-size: clamp(34px, 4.4vw, 64px); }

/* demo-cd.css pinta html/body con var(--secondary) !important: el fondo quedaba
   atado al panel de colores mientras el resto del DS no. */
html.demo-cd, html.demo-cd body { background-color: var(--cd-bg) !important; }

/* Y le pone al header un hairline cyan con !important que se sumaba al borde
   del DS: salían dos líneas. */
html.demo-cd #header.cd-header .header-body { border: 0 !important; }

/* ── Reparto de acentos: casos que se escapaban ──────────────────────────── */

/* Card invertida: superficie oscura DENTRO de un capítulo papel (el CTA lateral
   del blog). Sin esto hereda el reparto de papel y el botón sale AZUL sobre
   OSCURO, que es justo lo que el sistema prohíbe. */
.cd-block--paper .cd-card--invert { background: var(--cd-surface); border-color: var(--cd-line); box-shadow: none; color: var(--cd-text); }
.cd-block--paper .cd-card--invert:hover { border-color: var(--cd-cyan-line); }
.cd-block--paper .cd-card--invert h1, .cd-block--paper .cd-card--invert h2,
.cd-block--paper .cd-card--invert h3, .cd-block--paper .cd-card--invert .cd-h3 { color: var(--cd-text); }
.cd-block--paper .cd-card--invert p { color: var(--cd-text-2); }
.cd-block--paper .cd-card--invert .cd-btn--primary { background: var(--cd-cyan); color: var(--cd-cyan-ink); }
.cd-block--paper .cd-card--invert .cd-btn--primary:hover { background: var(--cd-cyan-bright); color: var(--cd-cyan-ink); }
.cd-block--paper .cd-card--invert { --cd-focus: #00F0FF; }

/* Paginación: demo-cd.css la pinta charcoal + cyan con !important, así que sobre
   papel invierte el reparto. Hace falta !important para ganarle. */
.cd-pagination { display: flex; justify-content: center; margin-top: 56px; }
html.demo-cd .cd-pagination .page-link { background-color: var(--cd-surface) !important; border-color: var(--cd-line) !important; color: var(--cd-text-2) !important; }
html.demo-cd .cd-pagination .page-link:hover { background-color: var(--cd-cyan-tint) !important; color: var(--cd-cyan) !important; }
html.demo-cd .cd-pagination .page-item.active .page-link { background-color: var(--cd-cyan) !important; border-color: var(--cd-cyan) !important; color: var(--cd-cyan-ink) !important; }
html.demo-cd .cd-block--paper .cd-pagination .page-link { background-color: var(--cd-paper-2) !important; border-color: var(--cd-paper-line) !important; color: var(--cd-ink-2) !important; }
html.demo-cd .cd-block--paper .cd-pagination .page-link:hover { background-color: var(--cd-blue-tint) !important; color: var(--cd-blue) !important; }
html.demo-cd .cd-block--paper .cd-pagination .page-item.active .page-link { background-color: var(--cd-blue) !important; border-color: var(--cd-blue) !important; color: var(--cd-paper-2) !important; }

/* El submit de contacto lleva `btn btn-primary` (lo necesita el validador) y
   demo-cd.css le mete un glow cyan al hover, sobre una card de papel. */
html.demo-cd .cd-btn:hover { box-shadow: none; }

/* Variantes papel de los componentes que hoy sólo viven sobre oscuro: el patrón
   del demo es alternar capítulos, así que es cuestión de tiempo. */
.cd-block--paper .cd-label--pill { border-color: var(--cd-blue-line); }
.cd-block--paper .cd-badge { background: var(--cd-blue-tint); color: var(--cd-blue); }
.cd-block--paper .cd-banner { background: var(--cd-paper-2); border-color: transparent; border-left-color: var(--cd-blue); box-shadow: var(--cd-shadow-paper); }
.cd-block--paper .cd-steps::before { background: var(--cd-blue-line); }
.cd-block--paper .cd-step__icon { background: var(--cd-paper-2); border-color: var(--cd-blue-line); color: var(--cd-blue); }

/* Los links de "Más artículos" no se distinguían del cuerpo: mismo color, sin
   subrayado y sin hover. */
.cd-linklist a { color: var(--cd-ink); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .18s ease, color .18s ease; }
.cd-linklist a:hover { color: var(--cd-blue); border-bottom-color: currentColor; text-decoration: none; }

/* Card de contacto en fila — reemplaza 12 inline repetidos tres veces. */
.cd-card--row { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.cd-card__title { display: block; font-family: var(--cd-display); font-size: 17px; font-weight: 500; color: var(--cd-text); }
.cd-card__sub { font-size: 15px; color: var(--cd-muted); }
.cd-card__icon { flex: 0 0 auto; font-size: 22px; color: var(--cd-cyan); }
.cd-block--paper .cd-card__title { color: var(--cd-ink); }
.cd-block--paper .cd-card__sub { color: var(--cd-ink-muted); }
.cd-block--paper .cd-card__icon { color: var(--cd-blue); }
a.cd-card, a.cd-card:hover { text-decoration: none; }

/* Encabezado de sección y utilidades de centrado — reemplazan 20 inline. */
.cd-wrap--center { text-align: center; }
.cd-btns--center { justify-content: center; }
.cd-secthead { margin-bottom: 56px; }
.cd-secthead--center { text-align: center; }
@media (max-width: 767px) { .cd-secthead { margin-bottom: 36px; } }

/* ── Tipografía: imponerla sobre la de plataforma ────────────────────────── */
/* cd-system-base.css declara `body { font-family: var(--font-family-primary) }`
   y `h1..h6, .btn { var(--font-family-secondary) }` con !important. Esas dos
   variables salen de site.theme.fonts del tenant, y en #327 están las dos en
   Lexend — o sea que el CUERPO del sitio se renderizaba en Lexend, no en Open
   Sans. Medido en el navegador. Es la única forma de ganarle a ese !important. */
html.demo-cd body, html.demo-cd p, html.demo-cd li,
html.demo-cd input, html.demo-cd textarea, html.demo-cd select { font-family: var(--cd-body) !important; }
html.demo-cd h1, html.demo-cd h2, html.demo-cd h3, html.demo-cd h4, html.demo-cd h5,
html.demo-cd .cd-display, html.demo-cd .cd-h1, html.demo-cd .cd-h2, html.demo-cd .cd-h3 { font-family: var(--cd-display) !important; }
/* Los botones y links del DS son <a>, y la regla de `a` de arriba los alcanzaba:
   quedaban en Open Sans cuando el diseño los pide en Lexend. */
html.demo-cd .cd-btn, html.demo-cd .cd-link,
html.demo-cd .cd-card__title, html.demo-cd .cd-step__title,
html.demo-cd .cd-acc__q, html.demo-cd .cd-metric__num,
html.demo-cd .cd-stat__num, html.demo-cd .cd-project__name { font-family: var(--cd-display) !important; }

/* El color del paso quedaba declarado dos veces con valores distintos: manda el
   secundario, que es el que se ve. */
.cd-step__title { color: var(--cd-text-2); }

/* ── Franja de logos de clientes ─────────────────────────────────────────── */
/* Marquesina en COLOR que se detiene al pasar el mouse. Se probó la versión en
   gris —la convención de "franja de confianza"— y pierde: los logos de los
   clientes tienen identidad propia y en gris la franja queda apagada. El color
   y el movimiento son lo que la hace mirar. */
.cd-logos__caption { font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; text-align: center; margin-bottom: 28px; }

/* El tratamiento es el del slider anterior, que era el que funcionaba:
   fantasma sutil (opacity .6 + brightness 1.5) que unifica logos de colores y
   pesos dispares sobre el fondo oscuro, y vuelve a pleno al pasar el mouse.
   Espaciado generoso: la franja respira, no apila. */
.cd-logos__item { display: inline-flex; align-items: center; justify-content: center; height: 50px; }
.cd-logos__item img {
  max-height: 50px; max-width: 130px; width: auto; height: auto; object-fit: contain;
  opacity: .6; filter: brightness(1.5);
  transition: opacity .25s ease, filter .25s ease;
}
.cd-logos__item:hover img { opacity: 1; filter: brightness(1); }
@media (prefers-reduced-motion: reduce) { .cd-logos__item:hover img { transform: none; } }
@media (max-width: 767px) { .cd-logos { gap: 18px 32px; } .cd-logos__item, .cd-logos__item img { height: 36px; max-height: 36px; } }

/* Marquesina de logos: la pista mide el doble (lista + copia) y se desplaza
   medio ancho, así el loop es continuo y sin salto.
   Deliberadamente simple, replicando el comportamiento del slider anterior
   (plugin marquee de Porto, data-duration 30000): corre parejo y NO se frena al
   pasar el mouse. Se probó con pausa en hover, máscara de fade en los bordes y
   zoom del logo: los tres juntos cargaban de más una franja que tiene que ser
   ambiente, no un componente para interactuar. */
.cd-marquee { overflow: hidden; }
.cd-marquee__track { display: flex; align-items: center; gap: 72px; width: max-content; animation: cd-marquee 30s linear infinite; }
@keyframes cd-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .cd-marquee__track { animation: none; width: 100%; flex-wrap: wrap; justify-content: center; gap: 20px 40px; }
  .cd-marquee__track > [aria-hidden="true"] { display: none; }
}
@media (max-width: 767px) { .cd-marquee__track { gap: 44px; animation-duration: 22s; } }

/* Card de servicio con personaje: el retrato vertical entra como banda lateral
   a altura completa, no como imagen de encabezado — es un personaje, no una foto
   ilustrativa. El servicio sin personaje usa el número de índice, y las dos
   variantes se ven igual de intencionales. */
.cd-service--char { flex-direction: row; align-items: stretch; padding: 0; overflow: hidden; }
.cd-service__char { flex: 0 0 34%; position: relative; overflow: hidden; background: var(--cd-chrome-ph, #2A2A44); }
.cd-service__char img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.cd-service--char .cd-service__body { flex: 1; padding: 28px; display: flex; flex-direction: column; justify-content: center; }
.cd-service--char .cd-service__num { display: none; }
.cd-service:not(.cd-service--char) .cd-service__body { display: block; }
/* En las dos cards anchas el personaje ocupa menos proporción para no dominar. */
.cd-grid--services > *:nth-child(1) .cd-service__char,
.cd-grid--services > *:nth-child(2) .cd-service__char { flex-basis: 28%; }
/* El !important es para ganarle a la regla de las dos cards anchas (nth-child),
   que es más específica. Se acota a la franja donde la grilla sigue en fila. */
@media (min-width: 576px) and (max-width: 991px) { .cd-service__char { flex-basis: 32% !important; } }
@media (max-width: 575px) {
  /* La card pasa a columna: el personaje va arriba con alto fijo y el texto
     arranca pegado, sin centrarse en el sobrante. */
  .cd-service--char { flex-direction: column; }
  .cd-service__char { flex: 0 0 190px !important; height: 190px; width: 100%; }
  .cd-service__char img { object-position: center 20%; }
  .cd-service--char .cd-service__body { padding: 22px; justify-content: flex-start; }
}

/* ── Card de proyecto del listado ────────────────────────────────────────── */
/* A diferencia de la card de la home —que es un link entero al caso—, en el
   listado la card contiene DOS acciones: ver el caso e ir al sitio del cliente.
   Esa segunda es la que más vale en un portfolio de agencia ("andá y miralo"),
   y obliga a que la card no sea un <a>: no se pueden anidar links. */
.cd-card--proj { display: flex; flex-direction: column; }
.cd-project__shot { display: block; text-decoration: none; }
.cd-card--proj:hover .cd-frame { border-color: var(--cd-cyan-line); }
.cd-block--paper .cd-card--proj:hover .cd-frame { border-color: var(--cd-blue-line); }
.cd-project__body { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; flex: 1; }
.cd-project__desc { font-size: 15px; line-height: 1.5; color: var(--cd-text-2); margin: 0; }
.cd-block--paper .cd-project__desc { color: var(--cd-ink-2); }
a.cd-project__name { text-decoration: none; }
a.cd-project__name:hover { color: var(--cd-cyan); text-decoration: none; }
.cd-block--paper a.cd-project__name:hover { color: var(--cd-blue); }
.cd-project__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-top: auto; padding-top: 12px; }
.cd-project__actions .cd-link { font-size: 14px; }
/* La segunda acción pesa menos que la primera: jerarquía, no dos botones iguales. */
.cd-link--soft { color: var(--cd-muted); }
.cd-link--soft:hover { color: var(--cd-text); }
.cd-block--paper .cd-link--soft { color: var(--cd-ink-muted); }
.cd-block--paper .cd-link--soft:hover { color: var(--cd-ink); }

/* Contador del chip de rubro: dice cuántos hay antes de filtrar. */
.cd-chip__n { font-size: 12px; font-weight: 700; opacity: .55; font-variant-numeric: tabular-nums; margin-left: 2px; }
.cd-chip.is-active .cd-chip__n { opacity: .75; }

/* ── Card de servicio a imagen completa ──────────────────────────────────── */
/* El formato estrella de la web anterior, conservado: el personaje ES la card.
   Retrato a sangre, número arriba a la izquierda, flecha arriba a la derecha y
   el título sobre un degradé abajo. Los fondos saturados de los personajes
   (amarillo/magenta/turquesa) son el momento de color de toda la página. */
.cd-svc-photo {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--cd-r-card);
  aspect-ratio: 4 / 3;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
}
.cd-svc-photo:hover { transform: translateY(-4px); box-shadow: var(--cd-shadow); text-decoration: none; }
.cd-svc-photo__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 18%; transition: transform .4s ease; }
.cd-svc-photo:hover .cd-svc-photo__img { transform: scale(1.04); }
.cd-svc-photo__num {
  position: absolute; top: 18px; left: 20px; z-index: 2;
  font-family: var(--cd-display); font-size: 22px; font-weight: 700; color: #fff;
  text-shadow: 0 1px 8px rgba(0,0,0,.4);
}
.cd-svc-photo__go {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 10, 26, .55); color: var(--cd-cyan); font-size: 14px;
  transition: background-color .2s ease, transform .2s ease;
}
.cd-svc-photo:hover .cd-svc-photo__go { background: var(--cd-cyan); color: var(--cd-cyan-ink); transform: translateX(2px); }
.cd-svc-photo__caption {
  position: absolute; inset: auto 0 0 0; z-index: 1;
  padding: 56px 20px 18px;
  background: linear-gradient(180deg, transparent, rgba(10, 10, 26, .82) 70%);
  display: flex; flex-direction: column; gap: 3px;
}
.cd-svc-photo__title { font-family: var(--cd-display); font-size: 20px; font-weight: 600; color: #fff; line-height: 1.2; }
.cd-svc-photo__sub { font-size: 13.5px; color: rgba(232, 232, 240, .82); }
@media (prefers-reduced-motion: reduce) {
  .cd-svc-photo:hover { transform: none; }
  .cd-svc-photo:hover .cd-svc-photo__img { transform: none; }
}

/* Verticales sobre oscuro: mismas cards, piel del mundo oscuro. */
.cd-block:not(.cd-block--paper) .cd-vertical { background: var(--cd-surface); box-shadow: none; border: 1px solid var(--cd-line); color: var(--cd-text); }
.cd-block:not(.cd-block--paper) .cd-vertical:hover { border-color: var(--cd-cyan-line); box-shadow: none; color: var(--cd-text); }
.cd-block:not(.cd-block--paper) .cd-vertical__icon { color: var(--cd-cyan); }

/* Banner manifiesto: la foto con la voz de marca horneada. A todo el ancho del
   wrap, esquinas del sistema y una sombra que lo despega del fondo. */
.cd-manifesto { display: block; width: 100%; height: auto; border-radius: var(--cd-r-card); box-shadow: var(--cd-shadow); }

/* Retrato de personaje suelto (índice de servicios): imagen plana con las
   esquinas del sistema. Los retratos NUNCA van en marco de browser. */
.cd-portrait { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 15%; border-radius: var(--cd-r-card); box-shadow: var(--cd-shadow); }

/* ── Tipografía de artículo ──────────────────────────────────────────────── */
/* Lectura larga de HTML del tenant (posts del blog, descripción de servicios).
   Columna cerca de 65 caracteres; base pensada para papel, variante --dark
   para bandas oscuras. Vivía en el CSS del artículo del blog y el detalle de
   servicio la necesitaba: componente compartido → al DS. */
.cd-article { max-width: 68ch; font-size: 18px; line-height: 1.75; color: var(--cd-ink-2); }
.cd-article > * + * { margin-top: 20px; }
.cd-article h2 { font-family: var(--cd-display); font-size: 32px; font-weight: 600; line-height: 1.2; color: var(--cd-ink); margin-top: 44px; }
.cd-article h3 { font-family: var(--cd-display); font-size: 22px; font-weight: 500; color: var(--cd-ink); margin-top: 32px; }
.cd-article a { color: var(--cd-blue); text-decoration: underline; }
.cd-article img { max-width: 100%; height: auto; border-radius: var(--cd-r-card); }
.cd-article ul, .cd-article ol { padding-left: 24px; }
.cd-article li + li { margin-top: 8px; }
.cd-article li::marker { color: var(--cd-blue); }
.cd-article blockquote {
  border: 0; border-left: 3px solid var(--cd-blue); background: none;
  padding: 4px 0 4px 26px; margin: 32px 0;
  font-family: var(--cd-display); font-size: 22px; font-weight: 500; line-height: 1.4; color: var(--cd-ink);
}
.cd-article code { background: rgba(10, 10, 26, .06); padding: 2px 7px; border-radius: 4px; font-size: .92em; }
.cd-article table { display: block; overflow-x: auto; max-width: 100%; }
/* Variante oscura */
.cd-article--dark { color: var(--cd-text-2); }
.cd-article--dark h2, .cd-article--dark h3, .cd-article--dark strong { color: var(--cd-text); }
.cd-article--dark h2 { font-size: 26px; }
.cd-article--dark a { color: var(--cd-cyan); }
.cd-article--dark li::marker { color: var(--cd-cyan); }
.cd-article--dark blockquote { border-left-color: var(--cd-cyan); color: var(--cd-text); }
.cd-article--dark code { background: rgba(240, 240, 245, .08); }

/* ── Explorador de proyectos ─────────────────────────────────────────────── */
/* El layout que hacía distintivo al índice anterior, conservado: sidebar de
   facetas a la izquierda (categorías con contadores + tags), barra de
   resultados y grilla. Lee como herramienta de exploración, no como landing.
   Con 11 rubros los chips no escalan; el sidebar sí. En móvil el sidebar
   desaparece y vuelven los chips scrolleables. */
.cd-explorer { display: grid; grid-template-columns: 250px 1fr; gap: 44px; align-items: start; }
.cd-side { position: sticky; top: 96px; background: var(--cd-surface); border: 1px solid var(--cd-line); border-radius: var(--cd-r-card); padding: 22px 20px; }
/* Con prefijo html.demo-cd (0,2,0): es un <h2>, y demo-cd.css trae
   `h2:not([class*="text-"]) { font-size: 2.4em }` con (0,1,1) que le ganaba —
   la misma trampa del blindaje tipográfico, en su primera reincidencia. */
html.demo-cd .cd-side__title { display: flex; align-items: center; gap: 8px; font-family: var(--cd-display); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cd-muted); margin: 0 0 14px; }
.cd-side__list { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-direction: column; }
.cd-side__list:last-child { margin-bottom: 0; }
.cd-side__list a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; margin: 0 -10px; border-radius: 6px;
  font-size: 14.5px; color: var(--cd-text-2); text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.cd-side__list a:hover { background: var(--cd-surface-2); color: var(--cd-text); text-decoration: none; }
.cd-side__list a.is-active { background: var(--cd-cyan-tint); color: var(--cd-cyan); font-weight: 600; }
.cd-side__n { font-family: var(--cd-display); font-size: 12px; font-weight: 600; color: var(--cd-muted); background: var(--cd-surface-2); border-radius: 999px; padding: 2px 9px; font-variant-numeric: tabular-nums; }
.cd-side__list a.is-active .cd-side__n { background: rgba(0, 240, 255, .16); color: var(--cd-cyan); }

.cd-resbar { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 14px; margin-bottom: 22px; border-bottom: 1px solid var(--cd-line); }
.cd-resbar__count { font-family: var(--cd-display); font-size: 15px; font-weight: 500; color: var(--cd-text); }
.cd-resbar__range { font-size: 13px; color: var(--cd-muted); font-variant-numeric: tabular-nums; }

/* Grilla del explorador: con sidebar quedan ~940px → 2 col cómodas, 3 en XL. */
.cd-explorer__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 24px; }
@media (min-width: 1360px) { .cd-explorer__grid { grid-template-columns: repeat(3, 1fr); } }

/* Chip de rubro SOBRE la captura (como el actual): libera la fila del título.
   Fondo sólido oscuro: el tint violeta translúcido desaparecía sobre capturas
   claras — el chip tiene que leerse sobre CUALQUIER sitio. */
.cd-project__chip { position: absolute; left: 12px; bottom: 12px; z-index: 2; background: rgba(10, 10, 26, .78); color: var(--cd-violet-soft, #C79BF5); backdrop-filter: blur(2px); }
.cd-card--proj .cd-frame { position: relative; }

/* El sidebar vive en desktop; en móvil vuelven los chips scrolleables. */
.cd-explorer__chips { display: none; }
@media (max-width: 991px) {
  .cd-explorer { display: block; }
  .cd-side { display: none; }
  .cd-explorer__chips { display: flex; margin-bottom: 28px; }
  .cd-explorer__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) { .cd-explorer__grid { grid-template-columns: 1fr; } }

/* Metadatos chicos (fechas, tiempos de lectura): color según el bloque. */
.cd-meta { font-size: 14px; color: var(--cd-muted); margin: 0; }
.cd-block--paper .cd-meta { color: var(--cd-ink-muted); }
/* La lista de links del lateral, sobre bloques oscuros. */
.cd-block:not(.cd-block--paper) .cd-linklist a { color: var(--cd-text); }
.cd-block:not(.cd-block--paper) .cd-linklist a:hover { color: var(--cd-cyan); }

/* ── Showcase de proyectos (overlay-galería) ─────────────────────────────── */
/* La respuesta a "21 páginas iguales": NO hay página por proyecto salvo que
   exista contenido real de caso. La grilla abre una ficha-overlay con los
   datos verdaderos (captura grande, rubro, dominio, descripción) y flechas
   para recorrer el portfolio como galería. La acción estrella sigue siendo
   ir al sitio vivo. */
.cd-show { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 28px; }
.cd-show[hidden] { display: none; }
.cd-show__back { position: absolute; inset: 0; background: rgba(4, 4, 14, .86); backdrop-filter: blur(6px); }
.cd-show__panel {
  position: relative; width: min(1040px, 100%); max-height: calc(100vh - 56px);
  overflow-y: auto; background: var(--cd-surface); border: 1px solid var(--cd-line);
  border-radius: var(--cd-r-card); box-shadow: var(--cd-shadow);
}
.cd-show__shot { display: block; width: 100%; aspect-ratio: 21 / 10; object-fit: cover; object-position: top center; background: var(--cd-chrome-ph, #2A2A44); }
.cd-show__body { padding: 26px 30px 30px; }
.cd-show__head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cd-show__logo { height: 34px; max-width: 110px; object-fit: contain; }
.cd-show__title { font-family: var(--cd-display); font-size: 24px; font-weight: 600; color: var(--cd-text); margin: 0; flex: 1; min-width: 200px; }
.cd-show__desc { margin: 14px 0 0; font-size: 16px; line-height: 1.6; color: var(--cd-text-2); max-width: 70ch; }
.cd-show__facts { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 18px; font-size: 14px; color: var(--cd-muted); }
.cd-show__facts b { color: var(--cd-text); font-weight: 600; }
.cd-show__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.cd-show__close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(10, 10, 26, .7); color: var(--cd-text); font-size: 16px;
  display: flex; align-items: center; justify-content: center;
}
.cd-show__close:hover { background: var(--cd-cyan); color: var(--cd-cyan-ink); }
.cd-show__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--cd-line); cursor: pointer;
  background: rgba(10, 10, 26, .72); color: var(--cd-text); font-size: 16px;
  display: flex; align-items: center; justify-content: center;
}
.cd-show__nav:hover { background: var(--cd-cyan); color: var(--cd-cyan-ink); border-color: var(--cd-cyan); }
.cd-show__nav--prev { left: -60px; }
.cd-show__nav--next { right: -60px; }
.cd-show__count { position: absolute; top: 16px; left: 18px; z-index: 2; font-family: var(--cd-display); font-size: 12px; font-weight: 600; letter-spacing: .1em; color: rgba(232,232,240,.85); background: rgba(10,10,26,.7); padding: 5px 12px; border-radius: 999px; }
@media (max-width: 1180px) {
  .cd-show__nav--prev { left: 10px; }
  .cd-show__nav--next { right: 10px; }
}
@media (max-width: 640px) {
  .cd-show { padding: 12px; }
  .cd-show__body { padding: 20px 18px 22px; }
  .cd-show__title { font-size: 20px; }
}
body.cd-show-open { overflow: hidden; }

/* ── Movimiento: aura y luz ──────────────────────────────────────────────────
   Tres gestos, todos sutiles y todos apagables con prefers-reduced-motion:
   1. La cuadrilla respira: el glow deriva muy lento y una luz sigue al cursor.
   2. Cada personaje trae su color (--cd-aura): entra caminando hacia donde
      mira, al hover ilumina su card y la grilla se tiñe de su color.
   3. Las capturas del hero flotan; los contadores cuentan al aparecer. */
.cd-block--treated::after {
  background:
    radial-gradient(900px 700px at var(--mx, 78%) var(--my, 32%), rgba(0, 240, 255, .085), transparent 70%),
    radial-gradient(700px 600px at 12% 90%, rgba(59, 47, 240, .10), transparent 70%);
  transition: background-position .9s cubic-bezier(.22,.61,.36,1);
}
.cd-svc-photo { --cd-aura: var(--cd-cyan); }
.cd-svc-photo:hover { box-shadow: 0 26px 60px -22px color-mix(in srgb, var(--cd-aura) 75%, transparent), var(--cd-shadow); }
.cd-svc-photo:hover .cd-svc-photo__go { background: var(--cd-aura); color: #0A0A1A; border-color: transparent; }
.cd-aura-field { position: relative; }
.cd-aura-field::before {
  content: ""; position: absolute; inset: -60px; pointer-events: none; z-index: 0; opacity: 0;
  background: radial-gradient(560px 460px at var(--ax, 50%) var(--ay, 50%), color-mix(in srgb, var(--cd-aura-active, var(--cd-cyan)) 20%, transparent), transparent 70%);
  transition: opacity .6s ease;
}
.cd-aura-field.is-lit::before { opacity: 1; }
.cd-aura-field > * { position: relative; z-index: 1; }
.cd-portrait { --cd-aura: var(--cd-cyan); }
.cd-btn--primary { transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .3s ease; }
.cd-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 12px 30px -10px rgba(0, 240, 255, .55); }

@media (prefers-reduced-motion: no-preference) {
  .cd-block--treated::after { animation: cd-drift 28s ease-in-out infinite alternate; }
  @keyframes cd-drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(2.5%, -2%) scale(1.05); } }

  /* El personaje entra caminando: la imagen viene desde la izquierda (mira a la derecha). */
  .cd-svc-photo .cd-svc-photo__img { transform: translateX(-6%) scale(1.10); transition: transform 1.1s cubic-bezier(.22,.61,.36,1); }
  .cd-svc-photo.is-in .cd-svc-photo__img { transform: none; }
  .cd-svc-photo.is-in:hover .cd-svc-photo__img { transform: scale(1.04); transition-duration: .5s; }
  .cd-svc-photo .cd-svc-photo__caption, .cd-svc-photo .cd-svc-photo__num { opacity: 0; transition: opacity .6s ease .35s; }
  .cd-svc-photo.is-in .cd-svc-photo__caption, .cd-svc-photo.is-in .cd-svc-photo__num { opacity: 1; }
  .cd-reveal .cd-portrait { transform: translateX(-4%) scale(1.06); transition: transform 1.1s cubic-bezier(.22,.61,.36,1), box-shadow .4s ease; }
  .cd-reveal.is-in .cd-portrait { transform: none; }
  .cd-reveal.is-in .cd-portrait:hover { box-shadow: 0 30px 70px -24px color-mix(in srgb, var(--cd-aura) 70%, transparent), var(--cd-shadow); }

  /* Las capturas del hero flotan, cada una a su ritmo. */
  .cd-hero__stack .cd-frame { animation: cd-float 9s ease-in-out infinite alternate; }
  .cd-hero__stack .cd-frame:nth-child(2) { animation-delay: -3s; animation-duration: 11s; }
  .cd-hero__stack .cd-frame:nth-child(3) { animation-delay: -6s; animation-duration: 10s; }
  @keyframes cd-float { from { translate: 0 0; } to { translate: 0 -10px; } }
}

/* ── Hero de servicio: el personaje y su color viven en el page header ────── */
.cd-svc-hero { --cd-aura: var(--cd-cyan); }
.cd-svc-hero::after {
  background:
    radial-gradient(900px 700px at var(--mx, 74%) var(--my, 40%), color-mix(in srgb, var(--cd-aura) 16%, transparent), transparent 70%),
    radial-gradient(700px 600px at 12% 90%, rgba(59, 47, 240, .08), transparent 70%);
}
.cd-svc-hero { border-top: 3px solid transparent; border-image: linear-gradient(90deg, var(--cd-aura), color-mix(in srgb, var(--cd-aura) 25%, transparent) 60%, transparent) 1; }
html.demo-cd .cd-svc-hero .cd-svc-hero__label { color: var(--cd-aura); border-color: color-mix(in srgb, var(--cd-aura) 45%, transparent); }
.cd-svc-hero__row { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: start; }
.cd-svc-hero__row > .cd-measure { padding-top: 12px; } /* el texto a la altura de los otros page headers; el retrato baja */
.cd-svc-hero__art { position: relative; justify-self: end; width: min(100%, 440px); }
.cd-svc-hero__art::before {
  content: ""; position: absolute; inset: 8% -6% -8% -6%; z-index: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--cd-aura) 42%, transparent), transparent 72%);
  filter: blur(18px);
}
.cd-portrait--hero { position: relative; z-index: 1; aspect-ratio: 4 / 4.6; object-position: center 12%; box-shadow: 0 40px 90px -30px color-mix(in srgb, var(--cd-aura) 70%, transparent), var(--cd-shadow); }
.cd-svc-hero--portrait.cd-block--tight { --cd-pad: 60px; }
@media (max-width: 991px) {
  .cd-svc-hero__row { grid-template-columns: 1fr; gap: 36px; }
  .cd-svc-hero__art { justify-self: start; width: min(100%, 360px); }
}
@media (max-width: 767px) {
  .cd-svc-hero__art { width: 100%; }
  .cd-portrait--hero { aspect-ratio: 16 / 11; object-position: center 10%; }
}

/* ── Subrayado: Porto declara `a:not(.btn):hover { text-decoration: underline }`
   con más especificidad que `.cd-link:hover`. El DS subraya con border-bottom,
   así que el nativo se le sumaba encima (doble línea). Se apaga para todo el
   demo y se vuelve a encender sólo donde el DS lo quiere: el texto de artículo. */
html.demo-cd a:not(.btn):hover, html.demo-cd a:not(.btn):focus { text-decoration: none; }
html.demo-cd .cd-article a:hover, html.demo-cd .cd-article a:focus,
html.demo-cd .cd-form__note a:hover { text-decoration: underline; }

/* La franja de reCAPTCHA que Porto pone bajo el footer venía clara sobre el
   chrome oscuro: se integra al pie. */
html.demo-cd .recaptcha-notice, html.demo-cd .cd-recaptcha-notice { background: var(--cd-bg) !important; border-top: 1px solid var(--cd-line); }
html.demo-cd .recaptcha-notice p, html.demo-cd .cd-recaptcha-notice p, html.demo-cd .recaptcha-notice a, html.demo-cd .cd-recaptcha-notice a { color: var(--cd-muted) !important; }

/* ── Rubros con prueba (home) ───────────────────────────────────────────── */
.cd-rubro { display: flex; align-items: center; gap: 18px; padding: 14px; border-radius: var(--cd-r-card); background: var(--cd-surface-2); border: 1px solid var(--cd-line); color: var(--cd-text); text-decoration: none; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.cd-rubro:hover { transform: translateY(-3px); border-color: var(--cd-cyan-line); box-shadow: var(--cd-shadow); color: var(--cd-text); text-decoration: none; }
.cd-rubro__shot { flex: 0 0 116px; width: 116px; aspect-ratio: 16 / 11; border-radius: 10px; overflow: hidden; background: var(--cd-surface); display: block; position: relative; }
.cd-rubro__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; transition: transform .5s ease; }
.cd-rubro:hover .cd-rubro__shot img { transform: scale(1.05); }
.cd-rubro__shot .cd-frame__ph { position: absolute; inset: 0; font-size: 12px; }
.cd-rubro__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cd-rubro__label { font-family: var(--cd-display); font-size: 17px; font-weight: 600; line-height: 1.25; }
.cd-rubro__meta { font-size: 13px; color: var(--cd-cyan); display: inline-flex; align-items: center; gap: 8px; }
.cd-rubro__meta i { font-size: 11px; transition: transform .18s ease; }
.cd-rubro:hover .cd-rubro__meta i { transform: translateX(3px); }
/* Grillas que en celular pasan a fila deslizable con snap (personajes, rubros). */
@media (max-width: 767px) {
  .cd-grid--snap-m { display: flex; overflow-x: auto; gap: 12px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 -20px; padding: 0 20px 6px; }
  .cd-grid--snap-m::-webkit-scrollbar { display: none; }
  .cd-grid--snap-m > * { flex: 0 0 82%; scroll-snap-align: start; }
}

/* ── Widget del agente (paso 3 del funnel) — piel demo-cd ────────────────────
   El partial compartido trae su CSS inline con ids; acá se lo viste con el DS:
   burbuja-píldora con etiqueta y punto vivo, panel navy con la cuadrilla en la
   cabecera, mensajes en superficies del sistema, sin blancos de app genérica. */
html.demo-cd #agw { font-family: var(--cd-body); --agw-c: var(--cd-cyan); }
html.demo-cd #agw-toggle {
  width: auto; height: 54px; padding: 0 22px 0 18px; gap: 10px; border-radius: 999px;
  background: var(--cd-cyan); color: var(--cd-cyan-ink);
  font-family: var(--cd-display); font-size: 15px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap;
  box-shadow: 0 14px 34px -10px rgba(0, 240, 255, .55), 0 2px 6px rgba(0, 0, 0, .25);
  transition: transform .2s ease, box-shadow .3s ease, background .2s ease;
}
html.demo-cd #agw-toggle svg { width: 22px; height: 22px; }
html.demo-cd #agw-toggle .agw-toggle-label { display: inline; }
html.demo-cd #agw-toggle::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cd-cyan-ink); opacity: .85; flex: 0 0 auto;
  box-shadow: 0 0 0 0 rgba(4, 34, 42, .5);
}
html.demo-cd #agw-toggle:hover, html.demo-cd #agw-toggle:focus-visible { transform: translateY(-2px); background: var(--cd-cyan-bright); outline: 2px solid rgba(0, 240, 255, .5); outline-offset: 3px; box-shadow: 0 18px 40px -10px rgba(0, 240, 255, .65); }
html.demo-cd #agw[data-open="1"] #agw-toggle { padding: 0; width: 54px; }
html.demo-cd #agw[data-open="1"] #agw-toggle .agw-toggle-label, html.demo-cd #agw[data-open="1"] #agw-toggle::before { display: none; }
html.demo-cd #agw-panel {
  width: 392px; height: 580px; bottom: 68px; border-radius: 22px;
  background: var(--cd-bg); color: var(--cd-text); border: 1px solid var(--cd-line);
  box-shadow: 0 40px 90px -24px rgba(0, 0, 0, .7), 0 0 0 1px rgba(0, 240, 255, .06), 0 0 80px -30px rgba(0, 240, 255, .35);
  transform-origin: bottom right;
}
html.demo-cd #agw-panel:not([hidden]) { animation: agwIn .28s cubic-bezier(.22,.61,.36,1); }
@keyframes agwIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
html.demo-cd .agw-head {
  padding: 16px 18px 14px; color: var(--cd-text); position: relative; overflow: hidden;
  background:
    radial-gradient(420px 220px at 85% 0%, rgba(0, 240, 255, .16), transparent 70%),
    linear-gradient(var(--cd-line-soft) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, var(--cd-line-soft) 1px, transparent 1px) 0 0 / 32px 32px,
    var(--cd-surface);
  border-bottom: 1px solid var(--cd-line);
}
html.demo-cd .agw-title { font-family: var(--cd-display); font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
html.demo-cd .agw-sub { color: var(--cd-muted); font-size: 12px; opacity: 1; margin-top: 2px; }
html.demo-cd .agw-sub::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--cd-cyan); margin-right: 7px; vertical-align: 1px; box-shadow: 0 0 10px var(--cd-cyan); }
html.demo-cd #agw-close { color: var(--cd-muted); font-size: 15px; border-radius: 8px; }
html.demo-cd #agw-close:hover { color: var(--cd-text); background: var(--cd-surface-2); }
html.demo-cd .agw-log { background: var(--cd-bg); padding: 16px; gap: 10px; }
html.demo-cd .agw-msg { font-size: 14.5px; line-height: 1.5; border-radius: 14px; padding: 10px 13px; }
html.demo-cd .agw-msg.bot { background: var(--cd-surface-2); border: 1px solid var(--cd-line); color: var(--cd-text); border-bottom-left-radius: 5px; box-shadow: inset 2px 0 0 var(--cd-cyan-line); }
html.demo-cd .agw-msg.user { background: var(--cd-cyan); color: var(--cd-cyan-ink); border-bottom-right-radius: 5px; font-weight: 500; }
html.demo-cd .agw-msg.team { background: color-mix(in srgb, var(--cd-cyan) 12%, var(--cd-surface-2)); border: 1px solid var(--cd-cyan-line); color: var(--cd-text); }
html.demo-cd .agw-msg.bot a { color: var(--cd-cyan); text-decoration: none; border-bottom: 1px solid currentColor; font-weight: 500; }
html.demo-cd .agw-msg.err { background: rgba(255, 90, 90, .1); border: 1px solid rgba(255, 90, 90, .35); color: #FFB3B3; }
html.demo-cd .agw-msg.typing { color: var(--cd-muted); }
html.demo-cd .agw-msg.typing i { background: var(--cd-cyan); }
html.demo-cd .agw-hint { color: var(--cd-muted); }
html.demo-cd .agw-btn { background: var(--cd-surface-2); border: 1px solid var(--cd-cyan-line); color: var(--cd-cyan); border-radius: 999px; }
html.demo-cd .agw-btn:hover { background: var(--cd-cyan-tint); }
html.demo-cd .agw-wa { background: transparent; color: var(--cd-text-2); border-top: 1px solid var(--cd-line); font-weight: 500; font-size: 13px; }
html.demo-cd .agw-wa:hover { color: var(--cd-cyan); filter: none; }
html.demo-cd .agw-form { background: var(--cd-surface); border-top: 1px solid var(--cd-line); padding: 12px; }
html.demo-cd #agw-input { background: var(--cd-bg); color: var(--cd-text); border: 1px solid var(--cd-line); border-radius: 14px; font-size: 14.5px; }
html.demo-cd #agw-input::placeholder { color: var(--cd-muted); }
html.demo-cd #agw-input:focus { border-color: var(--cd-cyan); box-shadow: 0 0 0 3px var(--cd-cyan-tint); }
html.demo-cd #agw-send { background: var(--cd-cyan); color: var(--cd-cyan-ink); border-radius: 14px; }
html.demo-cd #agw-send:hover { background: var(--cd-cyan-bright); }
@media (prefers-reduced-motion: no-preference) {
  html.demo-cd #agw-toggle::before { animation: agwPulse 2.4s ease-out infinite; }
  @keyframes agwPulse { 0% { box-shadow: 0 0 0 0 rgba(4, 34, 42, .45); } 70% { box-shadow: 0 0 0 9px rgba(4, 34, 42, 0); } 100% { box-shadow: 0 0 0 0 rgba(4, 34, 42, 0); } }
}
/* Celular: el panel deja de ser una tarjeta flotante con márgenes raros y pasa a
   ser una hoja inferior (bottom sheet): pegada abajo, ancho completo, esquinas
   superiores redondeadas, manija, fondo oscurecido y la burbuja escondida. La
   altura usa dvh para que la barra del navegador y el teclado no la rompan. */
@media (max-width: 640px) {
  html.demo-cd #agw-toggle { height: 50px; padding: 0 18px 0 16px; font-size: 14px; }
  html.demo-cd #agw[data-open="1"] #agw-toggle { display: none; }
  html.demo-cd #agw[data-open="1"]::before { content: ""; position: fixed; inset: 0; background: rgba(5, 5, 16, .62); backdrop-filter: blur(2px); z-index: 9989; }
  html.demo-cd #agw-panel {
    position: fixed; left: 0; right: 0; bottom: 0; width: 100vw; max-width: none;
    height: min(86dvh, 720px); max-height: none; border-radius: 22px 22px 0 0; border-bottom: 0;
    transform-origin: bottom center; z-index: 9990;
    padding-bottom: env(safe-area-inset-bottom);
  }
  html.demo-cd #agw-panel:not([hidden]) { animation: agwSheetIn .3s cubic-bezier(.22,.61,.36,1); }
  html.demo-cd .agw-head { padding: 22px 18px 14px; }
  /* manija */
  html.demo-cd .agw-head::before { content: ""; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--cd-line); }
  html.demo-cd #agw-close { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; background: var(--cd-surface-2); border-radius: 50%; }
  html.demo-cd .agw-msg { max-width: 86%; font-size: 15px; }
  html.demo-cd .agw-form { padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
  html.demo-cd #agw-input { font-size: 16px; padding: 11px 14px; } /* 16px: iOS no hace zoom al enfocar */
  html.demo-cd #agw-send { width: 46px; }
  html.demo-cd .agw-wa { padding: 10px 12px; }
}
@keyframes agwSheetIn { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
/* Con la hoja abierta la página de atrás no scrollea (lo pone cd-ds.js). */
html.demo-cd body.cd-chat-open { overflow: hidden; }