/* ==========================================================================
   marca-wecolabs.css — capa de marca WecoLabs sobre el estudio (v1 · 29-sep-2026)
   --------------------------------------------------------------------------
   El estudio (8793) es el PASO SIGUIENTE de la página de WecoLabs (sitio-agencia,
   8820): tiene que verse como la misma marca. Esta capa NO reescribe el estudio:
   se carga AL FINAL, después de todos sus CSS, y solo cambia la apariencia.

   Orden de carga (en el <head> de cada página de cara al cliente):
     marca/base/fuentes-agencia.css · marca/base/tokens.css ·
     marca/skins/agencia/skin.css · marca/base/efectos.css · marca-wecolabs.css
     + marca-wecolabs.js (síncrono): pone data-piel="agencia" y data-tema
       (panel-claro | sitio-noche) según el Claro/Oscuro del estudio.
   marca/ es COPIA de «Agencia IA/sistema-diseno» (node sincronizar-marca.mjs).
   Colores, letras y efectos se cambian allá, no aquí: esta capa solo lee roles
   (--fondo, --tinta, --marca…) y los dos colores de efecto (--efecto-luz = lima,
   --efecto-contraste = magenta). Aquí no hay un solo hex.

   Reglas de marca que se respetan:
   - El lima es luz y relleno: nunca texto lima sobre blanco. En claro los
     indicadores van en tinta; en noche el lima sí es texto (16:1).
   - Las MUESTRAS de páginas de clientes (.sample-site: plantillas, miniaturas,
     vista previa) conservan su propio diseño: esta capa no las toca.
   - Multiplataforma (skill paginas-agencia-multiplataforma): botones ≥ 48 px,
     texto ≥ 16 px en celular (salvo etiquetas técnicas en mono), zonas seguras
     con calc(X + env()), nada esencial detrás de :hover, movimiento reducido.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0 · Variables del estudio → roles de la piel
   El estudio pinta todo con --ui-* (temas.css) y --paper/--ink/--wine…
   (base.css). Se redirigen a los roles; así cada regla existente toma la marca
   sin tocarla, y Claro/Oscuro sigue a data-tema (marca-wecolabs.js).
   -------------------------------------------------------------------------- */
html[data-piel="agencia"] {
  --ui-bg: var(--fondo);
  --ui-ink: var(--tinta);
  --ui-muted: var(--tinta-suave);
  --ui-secondary: var(--tinta-suave);
  --ui-accent: var(--marca-tinta);        /* texto de acento: tinta en claro, lima en noche */
  --ui-surface: var(--superficie);
  --ui-soft: var(--superficie-2);
  --ui-selected: var(--superficie);
  --ui-hover: var(--superficie-2);
  --ui-line: var(--linea);
  --ui-control: var(--linea-fuerte);
  --ui-on-action: var(--sobre-marca);
  --ui-action-hover: var(--marca-hover);
  --paper: var(--fondo);
  --ink: var(--tinta);
  --muted: var(--tinta-suave);
  --wine: var(--marca-tinta);
  --gold: var(--marca-tinta);
  --line: var(--linea);
  --mint: var(--superficie-2);

  /* propios de esta capa (medidas, no colores) */
  --wl-radio: 20px;
  --wl-barra: 64px;
  --wl-brillo: 0 30px 70px -44px color-mix(in oklab, var(--efecto-luz) 95%, transparent);

  background: var(--fondo);
  color: var(--tinta);
  font-size: 16px;
  scrollbar-color: var(--linea-fuerte) var(--fondo);
  /* Como en la página de WecoLabs: sin desplazamiento suave. Con «smooth» el iPad
     reportaba saltos al deslizar (qa-usabilidad) y la barra fija tapaba anclas. */
  scroll-behavior: auto;
  scroll-padding-top: calc(var(--wl-barra) + 8px);
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}

/* Letra de la marca en TODO lo del estudio (Inter), salvo dentro de las muestras. */
html[data-piel="agencia"] body *:where(:not(.sample-site, .sample-site *)) { font-family: inherit; }

html[data-piel="agencia"] body:not(.example-page) {
  font-family: var(--fuente-texto);
  font-size: 16px; line-height: 1.55;
  color: var(--tinta);
  -webkit-font-smoothing: antialiased;
  /* Aura suave arriba a la izquierda (la de la apertura de WecoLabs) y un toque
     de magenta a la derecha. Quieta: sin blur animado en iPad y nada que dependa
     del cursor. Se va con el scroll. El tamaño sigue al ancho de la pantalla. */
  --wl-aura: min(860px, 78vw);
  --wl-aura-2: min(720px, 64vw);
  --wl-aura-luz: 34%;
  --wl-aura-contraste: 9%;
  background:
    radial-gradient(closest-side, color-mix(in oklab, var(--efecto-luz) var(--wl-aura-luz), transparent), transparent)
      no-repeat calc(20px - var(--wl-aura) / 2) calc(110px - var(--wl-aura) / 2) / var(--wl-aura) var(--wl-aura),
    radial-gradient(closest-side, color-mix(in oklab, var(--efecto-contraste) var(--wl-aura-contraste), transparent), transparent)
      no-repeat calc(100% + var(--wl-aura-2) / 2 - 40px) 480px / var(--wl-aura-2) var(--wl-aura-2),
    var(--fondo);
}
html[data-piel="agencia"][data-tema="sitio-noche"] body:not(.example-page) { --wl-aura-luz: 17%; --wl-aura-contraste: 11%; }
html[data-piel="agencia"] ::selection { background: color-mix(in oklab, var(--efecto-luz) 70%, transparent); color: var(--tinta); }
html[data-piel="agencia"][data-tema="sitio-noche"] ::selection { color: var(--sobre-marca); }

/* Foco: tinta en claro, lima en noche (rol --foco). */
html[data-piel="agencia"] :is(button, a, summary):focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   1 · Etiquetas técnicas (kicker) — mono en mayúsculas, como en WecoLabs
   -------------------------------------------------------------------------- */
html[data-piel="agencia"] .kicker,
html[data-piel="agencia"] .step-mark {
  display: block; margin: 0 0 12px;
  font-family: var(--fuente-mono); font-weight: 400; font-size: 13px; line-height: 1.45;
  letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-suave);
}
html[data-piel="agencia"] .studio-heading { display: none; }

/* --------------------------------------------------------------------------
   2 · Barra de arriba (fija, a lo ancho, como la de WecoLabs)
   -------------------------------------------------------------------------- */
html[data-piel="agencia"] .site-header {
  position: sticky; top: 0; z-index: var(--z-pegajoso);
  min-height: var(--wl-barra); gap: 12px;
  padding-top: calc(8px + env(safe-area-inset-top)); padding-bottom: 8px;
  border-bottom: 0;
  /* Fondo y línea de abajo a todo el ancho aunque el contenido vaya centrado:
     el «outset» de border-image se pinta fuera sin crear scroll horizontal. */
  border-image: linear-gradient(to bottom, color-mix(in oklab, var(--fondo) 95%, transparent) calc(100% - 1px), var(--linea) calc(100% - 1px)) 0 fill / 0 / 0 100vw;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
html[data-piel="agencia"] .wordmark {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; flex: none;
  font-family: var(--fuente-display); font-weight: 700; font-size: 20px; letter-spacing: -.03em; line-height: 1;
  color: var(--tinta); text-decoration: none; white-space: nowrap;
}
html[data-piel="agencia"] .wordmark::before {
  content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%;
  background: var(--efecto-luz); box-shadow: 0 0 0 2px var(--tinta);
}
html[data-piel="agencia"] .header-tools { gap: 8px; }

html[data-piel="agencia"] .sistema-link,
html[data-piel="agencia"] .portfolio-back {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 18px; border-radius: var(--radio-pildora);
  border: 1px solid var(--linea-fuerte); background: transparent; color: var(--tinta-suave);
  font-family: var(--fuente-texto); font-weight: 600; font-size: 15px; line-height: 1.2; text-decoration: none; white-space: nowrap;
}
html[data-piel="agencia"] .sistema-link svg { width: 17px; height: 17px; }
html[data-piel="agencia"] .theme-switch {
  gap: 0; padding: 0; border: 0; border-radius: var(--radio-pildora);
  background: var(--superficie-2); box-shadow: inset 0 0 0 1px var(--linea);
}
html[data-piel="agencia"] .theme-switch button {
  min-height: 48px; padding: 0 16px; border-radius: var(--radio-pildora);
  color: var(--tinta-suave); font-family: var(--fuente-texto); font-weight: 600; font-size: 15px;
}
html[data-piel="agencia"] .theme-switch button[aria-pressed="true"] { background: var(--marca); color: var(--sobre-marca); }
html[data-piel="agencia"] .theme-switch svg { width: 17px; height: 17px; }
html[data-piel="agencia"] .motion-toggle {
  width: 48px; height: 48px; min-height: 48px; padding: 0; border-radius: 50%;
  border: 1px solid var(--linea-fuerte); color: var(--tinta); background: transparent;
}
@media (hover: hover) {
  html[data-piel="agencia"] .sistema-link:hover,
  html[data-piel="agencia"] .portfolio-back:hover { color: var(--tinta); border-color: var(--tinta); background: var(--superficie-2); }
  html[data-piel="agencia"] .theme-switch button:hover:not([aria-pressed="true"]) { color: var(--tinta); background: var(--superficie); }
  html[data-piel="agencia"] .motion-toggle:hover { background: var(--superficie-2); }
}
html[data-piel="agencia"] .theme-switch button:active,
html[data-piel="agencia"] .motion-toggle:active,
html[data-piel="agencia"] .sistema-link:active { transform: scale(var(--escala-presion)); }

/* --------------------------------------------------------------------------
   3 · Portada del estudio
   -------------------------------------------------------------------------- */
html[data-piel="agencia"] .hero { padding-block: clamp(48px, 7vw, 100px) clamp(48px, 6vw, 84px); }
html[data-piel="agencia"] .hero h1,
html[data-piel="agencia"] .portfolio-intro h1 {
  font-family: var(--fuente-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: -.045em; line-height: .92; text-wrap: balance; color: var(--tinta);
}
html[data-piel="agencia"] .hero h1 { font-size: clamp(44px, 6.1vw, 90px); max-width: 12ch; }
/* «Su propia página.» entre llaves: el recurso gráfico de la marca ({Diagnóstico} en WecoLabs). */
html[data-piel="agencia"] .hero h1 em,
html[data-piel="agencia"] .portfolio-intro h1 em {
  font-style: normal; font-weight: 700; letter-spacing: inherit; color: var(--tinta);
}
html[data-piel="agencia"] .hero h1 em::before,
html[data-piel="agencia"] .portfolio-intro h1 em::before { content: "{"; margin-right: .04em; }
html[data-piel="agencia"] .hero h1 em::after,
html[data-piel="agencia"] .portfolio-intro h1 em::after { content: "}"; margin-left: .04em; }
html[data-piel="agencia"] .hero h1 em::before, html[data-piel="agencia"] .hero h1 em::after,
html[data-piel="agencia"] .portfolio-intro h1 em::before, html[data-piel="agencia"] .portfolio-intro h1 em::after {
  display: inline-block; color: var(--efecto-luz); font-weight: 500;
  -webkit-text-stroke: .025em color-mix(in oklab, var(--efecto-luz) 45%, var(--tinta));  /* en claro el lima necesita filo */
}
html[data-piel="agencia"][data-tema="sitio-noche"] :is(.hero, .portfolio-intro) h1 em::before,
html[data-piel="agencia"][data-tema="sitio-noche"] :is(.hero, .portfolio-intro) h1 em::after { -webkit-text-stroke: 0; }

html[data-piel="agencia"] .hero .lede {
  max-width: 44ch; margin: 24px 0 32px; color: var(--tinta-suave);
  font-size: clamp(17px, 0.95rem + 0.45vw, 21px); line-height: 1.5; text-wrap: pretty;
}
html[data-piel="agencia"] .primary-link {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 56px; padding: 0 30px; border: 1px solid var(--marca); border-radius: var(--radio-pildora);
  background: var(--marca); color: var(--sobre-marca);
  font-family: var(--fuente-texto); font-weight: 600; font-size: 17px; line-height: 1.2; text-decoration: none;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background-color var(--dur-rapida) var(--curva-estandar), transform var(--dur-instante) var(--curva-estandar);
}
html[data-piel="agencia"] .primary-link:active { transform: scale(var(--escala-presion)); }
@media (hover: hover) { html[data-piel="agencia"] .primary-link:hover { background: var(--marca-hover); border-color: var(--marca-hover); } }

/* Recorridos de proyectos (tarjetas apiladas) */
html[data-piel="agencia"] .showcase-slide {
  border: 1px solid var(--linea); border-radius: var(--wl-radio); background: var(--superficie);
  box-shadow: var(--sombra-3);
}
html[data-piel="agencia"] .showcase-slide.is-front { box-shadow: var(--wl-brillo), var(--sombra-2); }
html[data-piel="agencia"] .showcase-bar {
  height: 40px; border-bottom: 1px solid var(--linea); color: var(--tinta-suave);
  font-family: var(--fuente-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
}
html[data-piel="agencia"] .showcase-bar span:first-child { color: var(--tinta); font-weight: 600; }
html[data-piel="agencia"] .showcase-slide video { background: var(--superficie-2); }
html[data-piel="agencia"] .showcase-caption { font-size: 15px; color: var(--tinta-suave); }
html[data-piel="agencia"] .showcase-controls { margin-top: 32px; flex-wrap: wrap; row-gap: 14px; }
html[data-piel="agencia"] .showcase-controls > div { flex: none; margin-left: auto; }
html[data-piel="agencia"] .portfolio-link {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px;
  border: 1px solid var(--linea-fuerte); border-radius: var(--radio-pildora); background: var(--superficie);
  color: var(--tinta); font-weight: 600; font-size: 16px; text-decoration: none; white-space: nowrap;
}
html[data-piel="agencia"] .showcase-controls button {
  width: 48px; height: 48px; border: 1px solid var(--linea-fuerte); background: var(--superficie); color: var(--tinta);
}
html[data-piel="agencia"] #showcase-count { min-width: 44px; font-family: var(--fuente-mono); font-size: 13px; color: var(--tinta-suave); white-space: nowrap; }
@media (hover: hover) {
  html[data-piel="agencia"] .portfolio-link:hover,
  html[data-piel="agencia"] .showcase-controls button:hover { background: var(--superficie-2); border-color: var(--tinta); }
}

/* --------------------------------------------------------------------------
   4 · Configurador: pasos y títulos
   -------------------------------------------------------------------------- */
html[data-piel="agencia"] .studio { border-top: 0; padding-top: clamp(24px, 4vw, 48px); scroll-margin-top: 8px; }
html[data-piel="agencia"] .steps { gap: 8px 32px; margin-bottom: 44px; border-bottom: 1px solid var(--linea); }
html[data-piel="agencia"] .steps button {
  min-height: 56px; padding: 8px 0 12px; gap: 10px;
  color: var(--tinta-suave); font-family: var(--fuente-texto); font-weight: 500; font-size: 16px;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
html[data-piel="agencia"] .steps button.is-active { color: var(--tinta); font-weight: 600; border-bottom-color: var(--marca-tinta); }
html[data-piel="agencia"] .steps span {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  font-family: var(--fuente-mono); font-weight: 600; font-size: 13px;
  background: transparent; color: var(--tinta-suave); box-shadow: inset 0 0 0 1px var(--linea-fuerte);
}
html[data-piel="agencia"] .steps .is-active span { background: var(--marca); color: var(--sobre-marca); box-shadow: 0 0 0 3px var(--efecto-luz); }
html[data-piel="agencia"][data-tema="sitio-noche"] .steps .is-active span { box-shadow: none; }

html[data-piel="agencia"] .section-title { margin-bottom: 32px; }
html[data-piel="agencia"] .section-title h2 {
  font-family: var(--fuente-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: -.04em; line-height: .96; max-width: 20ch; text-wrap: balance;
  font-size: clamp(30px, 2.4vw + 18px, 50px); color: var(--tinta);
}
html[data-piel="agencia"] .section-title > p:last-child {
  margin-top: 16px; max-width: 62ch; color: var(--tinta-suave);
  font-size: clamp(17px, 0.95rem + 0.3vw, 19px); line-height: 1.5;
}

/* --------------------------------------------------------------------------
   5 · Tarjetas (proyecto, paquete, plantilla): blancas, filo fino, radio 20,
   la elegida con filo de tinta y resplandor lima (la «destacada» de WecoLabs)
   -------------------------------------------------------------------------- */
html[data-piel="agencia"] .project-card,
html[data-piel="agencia"] .package-card,
html[data-piel="agencia"] .design-option {
  border: 1px solid var(--linea); border-radius: var(--wl-radio); background: var(--superficie);
}
html[data-piel="agencia"] .project-card.is-selected,
html[data-piel="agencia"] .package-card.is-selected,
html[data-piel="agencia"] .design-option.is-selected {
  outline: 2px solid var(--marca-tinta); outline-offset: 3px; border-color: var(--marca-tinta);
  background: var(--superficie); box-shadow: var(--wl-brillo);
}
html[data-piel="agencia"] .project-card:focus-within,
html[data-piel="agencia"] .design-option:focus-within { outline: 3px solid var(--foco); outline-offset: 4px; }
@media (hover: none) { html[data-piel="agencia"] .project-card:hover { transform: none; } }

/* El radio invisible de cada proyecto cubre su tarjeta (antes medía 1 px):
   el toque cae directo en él y la prueba ya no lo marca como objetivo chico. */
html[data-piel="agencia"] .project-card > input {
  inset: 0; width: 100%; height: 100%; margin: 0; z-index: 1; cursor: pointer;
}

html[data-piel="agencia"] .project-film { background: var(--superficie-2); border-bottom: 1px solid var(--linea); }
html[data-piel="agencia"] .film-browser,
html[data-piel="agencia"] .mini-browser {
  height: 38px; padding: 0 14px; background: var(--superficie-2); border-bottom: 1px solid var(--linea);
  color: var(--tinta-suave); font-family: var(--fuente-mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
}
html[data-piel="agencia"] .mini-browser > span { font: inherit; }
html[data-piel="agencia"] .film-browser i,
html[data-piel="agencia"] .mini-browser i { background: var(--linea-fuerte); }
html[data-piel="agencia"] .project-film video,
html[data-piel="agencia"] .package-card video,
html[data-piel="agencia"] .template-video,
html[data-piel="agencia"] .site-thumb { background: var(--superficie-2); }

html[data-piel="agencia"] .project-card .project-copy { gap: 12px; padding: 24px; }
html[data-piel="agencia"] .project-heading strong,
html[data-piel="agencia"] .package-topline .package-name,
html[data-piel="agencia"] .design-title {
  font-family: var(--fuente-display); font-weight: 700; letter-spacing: -.025em; line-height: 1.1; color: var(--tinta);
}
html[data-piel="agencia"] .project-heading strong { font-size: clamp(22px, 1.4vw + 8px, 27px); }
html[data-piel="agencia"] .project-description { font-size: 16px; line-height: 1.5; color: var(--tinta-suave); }
html[data-piel="agencia"] .project-details {
  font-family: var(--fuente-mono); font-size: 12.5px; line-height: 1.5; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-suave);
}
html[data-piel="agencia"] .project-copy em {
  font-family: var(--fuente-texto); font-style: normal; font-weight: 600; font-size: 16px; color: var(--tinta);
}
html[data-piel="agencia"] .choice-mark { width: 26px; height: 26px; border: 1.5px solid var(--linea-fuerte); }
html[data-piel="agencia"] .is-selected .choice-mark { background: var(--marca); border-color: var(--marca); box-shadow: 0 0 0 3px var(--efecto-luz); }
html[data-piel="agencia"][data-tema="sitio-noche"] .is-selected .choice-mark { box-shadow: none; }
html[data-piel="agencia"] .is-selected .choice-mark svg { stroke: var(--sobre-marca); }
html[data-piel="agencia"] .project-example {
  min-height: 48px; padding: 14px 4px 0; color: var(--tinta); font-size: 15px; font-weight: 600;
}
html[data-piel="agencia"] .project-example small { font-size: 14px; font-weight: 400; color: var(--tinta-suave); }

/* Paquetes de invitación */
html[data-piel="agencia"] .package-topline svg { stroke: var(--tinta); }
html[data-piel="agencia"] .package-topline .package-name { font-size: 24px; }
html[data-piel="agencia"] .package-topline strong {
  font-family: var(--fuente-cifra); font-weight: 700; letter-spacing: -.04em; line-height: 1;
  font-size: 34px !important; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--tinta);
}
/* «MXN» junto a la cifra (base.css hace display:block a todo «label small»). */
html[data-piel="agencia"] .package-topline strong small {
  display: inline; margin: 0 0 0 4px;
  font-family: var(--fuente-mono); font-weight: 400; font-size: 13px; letter-spacing: .06em; color: var(--tinta-suave);
}
html[data-piel="agencia"] .package-topline { flex-wrap: wrap; row-gap: 8px; }
html[data-piel="agencia"] .package-summary { font-size: 16px; line-height: 1.5; color: var(--tinta-suave); }
html[data-piel="agencia"] .package-list { gap: 10px; font-family: var(--fuente-texto); font-size: 15px; line-height: 1.45; color: var(--tinta); }
html[data-piel="agencia"] .package-list li { padding-left: 24px; }
html[data-piel="agencia"] .package-list li::before {
  content: ""; top: .5em; left: 2px; width: 9px; height: 9px; border-radius: 2px;
  background: var(--efecto-luz); box-shadow: 0 0 0 1px var(--tinta);
}
/* Enlaces de texto: en tinta con subrayado lima (en noche, lima sobre negro).
   El subrayado es un fondo de 3 px para que pase continuo también bajo la flecha. */
html[data-piel="agencia"] .package-preview-link,
html[data-piel="agencia"] .preview-heading a,
html[data-piel="agencia"] .portfolio-actions a,
html[data-piel="agencia"] .system-audio a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  color: var(--marca-tinta); font-family: var(--fuente-texto); font-weight: 600; font-size: 15px; text-decoration: none;
  background: linear-gradient(var(--efecto-luz), var(--efecto-luz)) no-repeat 0 calc(100% - 7px) / 100% 3px;
}
html[data-piel="agencia"] .portfolio-actions a:hover,
html[data-piel="agencia"] .package-preview-link:hover { text-decoration: none; }
html[data-piel="agencia"] .preparing-note {
  border-color: var(--linea); color: var(--tinta-suave);
  font-family: var(--fuente-texto); font-size: 15px; line-height: 1.5;
}
html[data-piel="agencia"] .preparing-note svg { stroke: var(--tinta-suave); }
html[data-piel="agencia"] .preparing-note strong { color: var(--tinta); }

/* Precio por cotizar / aviso de Sistema IA: tarjeta gris con orbe de estado */
html[data-piel="agencia"] .price-pending {
  gap: 16px; padding: 20px 24px; border: 1px solid var(--linea); border-radius: var(--wl-radio); background: var(--superficie-2);
}
html[data-piel="agencia"] .price-pending strong { font-family: var(--fuente-display); font-weight: 700; font-size: 20px; letter-spacing: -.02em; }
html[data-piel="agencia"] .price-pending p { font-size: 15px; color: var(--tinta-suave); }
html[data-piel="agencia"] .price-pending .seal.ef-orbe { margin: 0 4px; font-size: 0; }

/* Plantillas del catálogo (el enlace «Ver página completa» queda siempre abajo) */
html[data-piel="agencia"] .design-option { display: flex; flex-direction: column; }
html[data-piel="agencia"] .design-select { flex: 1 1 auto; display: flex; flex-direction: column; }
html[data-piel="agencia"] .design-select > .design-selected { margin-top: auto; }
html[data-piel="agencia"] .design-title { font-size: 22px; margin: 20px 22px 8px; }
html[data-piel="agencia"] .design-description { font-size: 15px; line-height: 1.5; color: var(--tinta-suave); }
html[data-piel="agencia"] .design-selected,
html[data-piel="agencia"] .system-evidence {
  width: fit-content; font-family: var(--fuente-mono); font-weight: 600; font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tinta-suave);
}
/* La elegida lleva la etiqueta lima de la marca (ef-etiqueta--luz). */
html[data-piel="agencia"] .design-option.is-selected .design-selected {
  padding: .32em .6em .26em; border-radius: 4px; background: var(--efecto-luz); color: var(--tinta);
  font-family: var(--fuente-display); font-weight: 700; font-size: 13px; letter-spacing: -.005em;
}
html[data-piel="agencia"][data-tema="sitio-noche"] .design-option.is-selected .design-selected { color: var(--sobre-marca); }
html[data-piel="agencia"] .design-open {
  min-height: 52px; padding: 12px 22px; background: var(--superficie); border-top: 1px solid var(--linea);
  color: var(--tinta); font-weight: 600; font-size: 15px;
}
@media (hover: hover) { html[data-piel="agencia"] .design-open:hover { background: var(--superficie-2); } }

/* Filtros de módulos (Sistema IA) y del portafolio: píldoras; la activa en negro (lima en noche) */
html[data-piel="agencia"] #system-categories button,
html[data-piel="agencia"] .portfolio-filters button {
  min-height: 48px; padding: 0 20px; border: 1px solid var(--linea-fuerte); border-radius: var(--radio-pildora);
  background: var(--superficie); color: var(--tinta-suave);
  font-family: var(--fuente-texto); font-weight: 600; font-size: 15px;
}
html[data-piel="agencia"] #system-categories button[aria-pressed="true"],
html[data-piel="agencia"] .portfolio-filters button[aria-pressed="true"] { background: var(--marca); border-color: var(--marca); color: var(--sobre-marca); }
html[data-piel="agencia"] #system-selection-count { font-size: 15px; color: var(--tinta-suave); }

/* --------------------------------------------------------------------------
   6 · Botones: píldora negra (lima en noche) y píldora con filo
   -------------------------------------------------------------------------- */
html[data-piel="agencia"] .button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 28px; border: 1px solid var(--marca); border-radius: var(--radio-pildora);
  background: var(--marca); color: var(--sobre-marca);
  font-family: var(--fuente-texto); font-weight: 600; font-size: 16px; line-height: 1.2;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background-color var(--dur-rapida) var(--curva-estandar), transform var(--dur-instante) var(--curva-estandar);
}
html[data-piel="agencia"] a.button { text-decoration: none; }   /* enlace con forma de botón (p. ej. «Pídela por WhatsApp» de la vitrina) */
html[data-piel="agencia"] .button:hover { background: var(--marca); }
@media (hover: hover) { html[data-piel="agencia"] .button:hover:not(:disabled):not(.button-muted) { background: var(--marca-hover); border-color: var(--marca-hover); } }
html[data-piel="agencia"] .button:active { transform: scale(var(--escala-presion)); }
html[data-piel="agencia"] .button:disabled,
html[data-piel="agencia"] .button.button-muted,
html[data-piel="agencia"] .button.button-muted:hover {
  background: var(--superficie-2); border-color: var(--linea-fuerte); color: var(--tinta-suave); transform: none;
}

html[data-piel="agencia"] .text-button,
html[data-piel="agencia"] .variation-actions .text-button,
html[data-piel="agencia"] .catalog-actions button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px; border: 1px solid var(--linea-fuerte); border-radius: var(--radio-pildora);
  background: var(--superficie); color: var(--tinta);
  font-family: var(--fuente-texto); font-weight: 600; font-size: 15px; line-height: 1.2; text-decoration: none;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
html[data-piel="agencia"] .text-button:active:not(:disabled) { transform: scale(var(--escala-presion)); }
@media (hover: hover) {
  html[data-piel="agencia"] .text-button:hover:not(:disabled),
  html[data-piel="agencia"] .catalog-actions button:hover:not(:disabled) { background: var(--superficie-2); border-color: var(--tinta); }
}
html[data-piel="agencia"] .text-button:disabled,
html[data-piel="agencia"] .variation-actions .text-button:disabled,
html[data-piel="agencia"] .catalog-actions button:disabled {
  background: transparent; border-color: var(--linea); border-style: dashed; color: var(--tinta-suave); cursor: default; text-decoration: none;
}
html[data-piel="agencia"] .variation-actions { gap: 12px 12px; padding-top: 16px; border-color: var(--linea); }
html[data-piel="agencia"] .variation-actions span { font-size: 15px; color: var(--tinta-suave); }
html[data-piel="agencia"] .catalog-actions p { font-size: 14px; color: var(--tinta-suave); }

/* --------------------------------------------------------------------------
   7 · Formularios
   -------------------------------------------------------------------------- */
html[data-piel="agencia"] :is(.form-grid, .venue-fields, .adjustments, .buyer-fields) label,
html[data-piel="agencia"] .venue-photo-field > label {
  font-family: var(--fuente-texto); font-size: 15px; font-weight: 600; color: var(--tinta);
}
html[data-piel="agencia"] :is(.form-grid, .venue-fields, .adjustments, .buyer-fields) label:focus-within { outline: none; }
html[data-piel="agencia"] label small:not(.sample-site *),
html[data-piel="agencia"] .venue-photo-field small { font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--tinta-suave); }

html[data-piel="agencia"] :is(input:not([type=checkbox]):not([type=radio]), select, textarea):where(:not(.sample-site *)) {
  min-height: 48px; padding: 12px 14px; border: 1px solid var(--linea-fuerte); border-radius: 12px;
  background-color: var(--superficie); color: var(--tinta);
  font-family: var(--fuente-texto); font-weight: 400; font-size: 16px; line-height: 1.4;
}
html[data-piel="agencia"] :is(input:not([type=checkbox]):not([type=radio]), select, textarea):where(:not(.sample-site *)):focus {
  outline: none; border-color: var(--tinta);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--efecto-luz) 75%, transparent);
}
html[data-piel="agencia"] ::placeholder { color: var(--tinta-suave); opacity: 1; }
/* Flecha del select dibujada con dos degradados en tinta (sin imagen ni color fijo). */
html[data-piel="agencia"] select:where(:not(.sample-site *)) {
  -webkit-appearance: none; appearance: none; padding-right: 44px;
  background-image: linear-gradient(45deg, transparent 50%, var(--tinta) 50%), linear-gradient(135deg, var(--tinta) 50%, transparent 50%);
  background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
html[data-piel="agencia"] input[type=file]:where(:not(.sample-site *)) { padding: 6px 8px; font-size: 15px; color: var(--tinta-suave); }
html[data-piel="agencia"] input[type=file]::file-selector-button {
  min-height: 36px; margin-right: 12px; padding: 0 16px; border: 1px solid var(--linea-fuerte); border-radius: var(--radio-pildora);
  background: var(--superficie-2); color: var(--tinta); font: 600 15px/1.2 var(--fuente-texto); cursor: pointer;
}
html[data-piel="agencia"] input[type=file]::-webkit-file-upload-button {
  min-height: 36px; margin-right: 12px; padding: 0 16px; border: 1px solid var(--linea-fuerte); border-radius: 999px;
  background: var(--superficie-2); color: var(--tinta); font: 600 15px/1.2 var(--fuente-texto); cursor: pointer;
}
html[data-piel="agencia"] input[type=checkbox]:where(:not(.sample-site *)) { width: 20px; height: 20px; accent-color: var(--marca-tinta); }

html[data-piel="agencia"] .venue-fields {
  padding: 24px; border: 1px solid var(--linea); border-radius: var(--wl-radio); background: var(--superficie-2);
}
html[data-piel="agencia"] .venue-fields legend,
html[data-piel="agencia"] .buyer-fields legend {
  font-family: var(--fuente-display); font-weight: 700; font-size: 22px; letter-spacing: -.02em; color: var(--tinta);
}
html[data-piel="agencia"] .venue-fields > p,
html[data-piel="agencia"] .buyer-fields > p { font-size: 15px; color: var(--tinta-suave); }
html[data-piel="agencia"] .venue-photo-preview img { border-radius: 12px; }
html[data-piel="agencia"] .system-audio { border-radius: var(--wl-radio); background: var(--superficie-2); border-color: var(--linea); }
html[data-piel="agencia"] .system-audio strong { font-family: var(--fuente-display); font-weight: 700; font-size: 18px; }
html[data-piel="agencia"] .system-audio p,
html[data-piel="agencia"] .system-brief-note,
html[data-piel="agencia"] .system-audio small { font-size: 15px; color: var(--tinta-suave); }
html[data-piel="agencia"] #system-fields fieldset { border-radius: var(--wl-radio); border-color: var(--linea); }
/* temas.css trae «#system-fields input{width:19px;height:19px}» (para casillas) y aplastaba los
   campos de texto de Sistema IA (herramientas, volumen, plazo). Solo las casillas quedan chicas. */
html[data-piel="agencia"] #system-fields input:not([type=checkbox]):not([type=radio]) { width: 100%; height: auto; margin-top: 8px; }

/* --------------------------------------------------------------------------
   8 · Vista previa, ajustes, resumen y pago
   -------------------------------------------------------------------------- */
html[data-piel="agencia"] .preview-shell { border: 1px solid var(--linea); border-radius: var(--wl-radio); background: var(--superficie); }
html[data-piel="agencia"] .preview-heading {
  min-height: 56px; padding: 6px 18px; border-bottom: 1px solid var(--linea); color: var(--tinta); font-size: 15px;
}
html[data-piel="agencia"] .preview-heading strong { font-family: var(--fuente-display); font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
html[data-piel="agencia"] .preview-caption {
  display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 18px;
  border-top: 1px solid var(--linea); background: var(--superficie-2); color: var(--tinta-suave);
  font-family: var(--fuente-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
}
html[data-piel="agencia"] .adjustments h3,
html[data-piel="agencia"] .payment-card h3 {
  font-family: var(--fuente-display); font-weight: 700; letter-spacing: -.025em; line-height: 1.05; color: var(--tinta);
}
html[data-piel="agencia"] .adjustments h3 { font-size: 28px; margin-bottom: 24px; }
html[data-piel="agencia"] .scope-message { font-size: 14px; line-height: 1.5; color: var(--tinta-suave); }

html[data-piel="agencia"] .summary-card dl > div { padding: 16px 0; border-color: var(--linea); }
html[data-piel="agencia"] .summary-card dt {
  margin-bottom: 6px; font-family: var(--fuente-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-suave);
}
html[data-piel="agencia"] .summary-card dd { font-size: 18px; font-weight: 500; line-height: 1.4; color: var(--tinta); }
html[data-piel="agencia"] .buyer-fields { border-color: var(--linea); }

/* Pago: tarjeta destacada (filo de tinta y resplandor lima, como el nivel 2 de WecoLabs) */
html[data-piel="agencia"] .payment-card {
  align-self: start;
  padding: clamp(22px, 3vw, 32px); border: 1px solid var(--marca-tinta); border-radius: var(--wl-radio);
  background: var(--superficie); box-shadow: var(--wl-brillo);
}
html[data-piel="agencia"][data-tema="sitio-noche"] .payment-card { border-color: var(--linea-fuerte); }
html[data-piel="agencia"] .payment-card h3 { font-size: 26px; }
html[data-piel="agencia"] .payment-card p { font-size: 15px; line-height: 1.5; color: var(--tinta-suave); }
html[data-piel="agencia"] .payment-card > strong {
  font-family: var(--fuente-cifra); font-weight: 700; font-size: clamp(40px, 3vw + 16px, 56px);
  letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--tinta);
}
html[data-piel="agencia"] .payment-status,
html[data-piel="agencia"] .save-status { font-size: 15px; color: var(--marca-tinta); }
html[data-piel="agencia"] .checkout-return { border-radius: 16px; background: var(--superficie-2); border-color: var(--linea-fuerte); }
html[data-piel="agencia"] .process-note { border-color: var(--linea); color: var(--tinta-suave); font-size: 15px; line-height: 1.55; }

/* --------------------------------------------------------------------------
   9 · Pie: banda de noche a todo el ancho con el nombre grande (el de WecoLabs).
   marca-wecolabs.js le pone data-tema="sitio-noche": aquí solo se leen roles.
   -------------------------------------------------------------------------- */
html[data-piel="agencia"] body > footer {
  max-width: none; margin: clamp(48px, 7vw, 96px) 0 0;
  padding-top: clamp(48px, 6vw, 80px);
  padding-bottom: calc(40px + env(safe-area-inset-bottom));
  padding-left: max(calc(36px + env(safe-area-inset-left)), calc((100% - 1248px) / 2));
  padding-right: max(calc(36px + env(safe-area-inset-right)), calc((100% - 1248px) / 2));
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px 32px;
  background: var(--fondo); color: var(--tinta); border-top: 1px solid var(--linea);
  font-family: var(--fuente-texto); font-size: 16px; line-height: 1.5;
}
html[data-piel="agencia"] body > footer > span:first-child {
  grid-column: 1; font-family: var(--fuente-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: -.045em; line-height: .92; font-size: clamp(44px, 7vw, 96px); color: var(--tinta);
}
html[data-piel="agencia"] body > footer > span:not(:first-child) { grid-column: 1; color: var(--tinta-suave); }
html[data-piel="agencia"] body > footer > a {
  grid-column: 2; grid-row: 1 / span 2; align-self: end;
  display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 30px;
  border-radius: var(--radio-pildora); background: var(--marca); color: var(--sobre-marca);
  font-weight: 600; font-size: 17px; text-decoration: none; white-space: nowrap;
}
@media (hover: hover) { html[data-piel="agencia"] body > footer > a:hover { background: var(--marca-hover); } }

/* --------------------------------------------------------------------------
   10 · Portafolio («Explorar proyectos»)
   -------------------------------------------------------------------------- */
html[data-piel="agencia"] .portfolio-intro { padding: clamp(48px, 7vw, 96px) 0 36px; max-width: 900px; }
html[data-piel="agencia"] .portfolio-intro h1 { font-size: clamp(40px, 5.6vw, 84px); max-width: 16ch; }
html[data-piel="agencia"] .portfolio-eyebrow {
  margin-bottom: 14px; font-family: var(--fuente-mono) !important; font-weight: 400; font-size: 13px !important;
  letter-spacing: .1em; color: var(--tinta-suave) !important;
}
html[data-piel="agencia"] .portfolio-intro p { font-size: clamp(17px, 0.95rem + 0.4vw, 20px); color: var(--tinta-suave); }
html[data-piel="agencia"] .portfolio-media { border: 1px solid var(--linea); border-radius: var(--wl-radio); background: var(--superficie-2); }
html[data-piel="agencia"] .portfolio-card-head {
  font-family: var(--fuente-mono); font-weight: 400; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-suave);
}
html[data-piel="agencia"] .portfolio-card-head span:first-child { color: var(--tinta); font-weight: 600; }
/* Solo el texto de la tarjeta: .portfolio-item también contiene la muestra del cliente. */
html[data-piel="agencia"] .portfolio-card-copy h2 {
  font-family: var(--fuente-display); font-weight: 700; letter-spacing: -.025em; line-height: 1.1; font-size: clamp(24px, 1.2vw + 14px, 30px); color: var(--tinta);
}
html[data-piel="agencia"] .portfolio-card-copy p { font-size: 16px; color: var(--tinta-suave); }
html[data-piel="agencia"] .portfolio-actions { gap: 4px 20px; }
html[data-piel="agencia"] .portfolio-actions a { justify-self: start; width: fit-content; }
html[data-piel="agencia"] .portfolio-render-preview { background: var(--superficie-2); scrollbar-color: var(--linea-fuerte) var(--superficie-2); }
html[data-piel="agencia"] .portfolio-render-preview::after {
  background: var(--marca); color: var(--sobre-marca);
  font-family: var(--fuente-texto); font-weight: 600; font-size: 10.5px; letter-spacing: 0;
}
html[data-piel="agencia"] .portfolio-footnote { font-size: 14px; color: var(--tinta-suave); }

/* --------------------------------------------------------------------------
   11 · Página de ejemplo: solo la barra de arriba es de WecoLabs (noche);
   la muestra de abajo es el diseño del cliente y no se toca.
   -------------------------------------------------------------------------- */
html[data-piel="agencia"] .example-page { background: var(--fondo); }
html[data-piel="agencia"] .example-page #example-mount { color-scheme: light; }
html[data-piel="agencia"] .example-toolbar {
  min-height: var(--wl-barra); gap: 16px;
  padding: calc(8px + env(safe-area-inset-top)) calc(24px + env(safe-area-inset-right)) 8px calc(24px + env(safe-area-inset-left));
  background: var(--fondo); color: var(--tinta); border-bottom: 1px solid var(--linea);
  font-family: var(--fuente-texto); font-size: 15px;
}
html[data-piel="agencia"] .example-toolbar a {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  color: var(--tinta); font-weight: 600; text-decoration: none; white-space: nowrap;
}
html[data-piel="agencia"] .example-toolbar a:first-child::before { content: "← "; white-space: pre; color: var(--marca-tinta); }
html[data-piel="agencia"] .example-toolbar a:last-child {
  padding: 0 22px; border-radius: var(--radio-pildora); background: var(--marca); color: var(--sobre-marca);
}
html[data-piel="agencia"] .example-toolbar span {
  opacity: 1; color: var(--tinta-suave); font-family: var(--fuente-mono); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; text-align: center;
}

/* --------------------------------------------------------------------------
   12 · Tableta y celular
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  html[data-piel="agencia"] .showcase-controls button { width: 48px; height: 48px; }
  html[data-piel="agencia"] .hero .lede { margin-bottom: 28px; }
}
@media (max-width: 640px) {
  html[data-piel="agencia"] { --wl-barra: 64px; }
  html[data-piel="agencia"] .kicker,
  html[data-piel="agencia"] .step-mark { font-size: 14px; }
  html[data-piel="agencia"] .hero h1 { font-size: clamp(40px, 11.4vw, 56px); max-width: none; }
  html[data-piel="agencia"] .portfolio-intro h1 { font-size: clamp(36px, 10.4vw, 52px); max-width: none; }
  html[data-piel="agencia"] .primary-link { width: 100%; }
  html[data-piel="agencia"] .showcase-controls { flex-wrap: wrap; }
  /* Lectura en celular: 16 px mínimo (solo quedan menores las etiquetas técnicas en mono). */
  html[data-piel="agencia"] :is(.project-example, .project-example small, .showcase-caption, .package-list, .preparing-note,
    .price-pending p, .design-description, .variation-actions span, .catalog-actions p, #system-selection-count, label small:not(.sample-site *),
    .venue-photo-field small, .venue-fields > p, .buyer-fields > p, .system-audio p, .system-brief-note, .system-audio small,
    .scope-message, .payment-card p, .payment-status, .save-status, .process-note, .portfolio-footnote,
    :is(.form-grid, .venue-fields, .adjustments, .buyer-fields) label, .text-button) { font-size: 16px; }
  html[data-piel="agencia"] .project-details { font-size: 13.5px; }
  html[data-piel="agencia"] input[type=file]:where(:not(.sample-site *)) { font-size: 16px; }
  html[data-piel="agencia"] .wizard-actions .button,
  html[data-piel="agencia"] .summary-actions .button { padding-inline: 22px; }
  /* Resumen: los dos botones sin partir el texto (si no caben, el de descargar baja a lo ancho). */
  html[data-piel="agencia"] .summary-actions { flex-wrap: wrap; gap: 12px; }
  html[data-piel="agencia"] .summary-actions button { max-width: none; flex: 1 1 auto; white-space: nowrap; }
  html[data-piel="agencia"] .payment-card { padding: 22px 20px; }
  html[data-piel="agencia"] body > footer {
    grid-template-columns: 1fr; padding-left: calc(20px + env(safe-area-inset-left)); padding-right: calc(20px + env(safe-area-inset-right));
  }
  html[data-piel="agencia"] body > footer > a { grid-column: 1; grid-row: auto; justify-self: stretch; margin-top: 12px; }
  html[data-piel="agencia"] .example-toolbar span { display: none; }
}
/* Barra del ejemplo en celular: los dos botones en un renglón, sin partir el texto. */
@media (max-width: 480px) {
  html[data-piel="agencia"] .example-toolbar {
    flex-wrap: wrap; gap: 8px; padding-left: calc(12px + env(safe-area-inset-left)); padding-right: calc(12px + env(safe-area-inset-right));
  }
  html[data-piel="agencia"] .example-toolbar a:first-child::before { content: none; }
  html[data-piel="agencia"] .example-toolbar a:last-child { padding: 0 16px; }
}
/* Barra en celular: el Claro/Oscuro y «Sistema» quedan en ícono (su nombre sigue
   para lectores de pantalla); el paso activo muestra su nombre y los demás, número. */
@media (max-width: 560px) {
  html[data-piel="agencia"] .site-header { flex-wrap: wrap; row-gap: 4px; padding-inline: calc(16px + env(safe-area-inset-left)) calc(16px + env(safe-area-inset-right)); }
  html[data-piel="agencia"] .wordmark { font-size: 19px; }
  html[data-piel="agencia"] .header-tools { gap: 6px; margin-left: auto; }
  html[data-piel="agencia"] .sistema-link,
  html[data-piel="agencia"] .theme-switch button:has(svg) { width: 48px; padding: 0; gap: 0; font-size: 0; }
  html[data-piel="agencia"] .sistema-link svg,
  html[data-piel="agencia"] .theme-switch svg { width: 18px; height: 18px; }
  html[data-piel="agencia"] .theme-switch button:not(:has(svg)) { padding: 0 14px; font-size: 15px; }
  html[data-piel="agencia"] .portfolio-back { padding: 0 14px; }
  /* En el portafolio la barra ocupa dos renglones en celular: ahí no se queda fija. */
  html[data-piel="agencia"] .site-header:has(.portfolio-back) { position: relative; }
  html[data-piel="agencia"] .steps { justify-content: space-between; gap: 0; }
  html[data-piel="agencia"] .steps button:not(.is-active) { font-size: 0; gap: 0; }
  html[data-piel="agencia"] .steps button { min-width: 48px; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-piel="agencia"] .primary-link,
  html[data-piel="agencia"] .button,
  html[data-piel="agencia"] .text-button { transition: none; }
}