/* ═══════════════════════════════════════════════════════════════════════════
   LÍNEA GRÁFICA · Campaña LPDP (Ley 21.719)
   ---------------------------------------------------------------------------
   Sistema derivado de las piezas que hizo Juan Pablo Vergara para la campaña
   de Protección de Datos Personales (webinar, brunch, Luma), y aplicado al
   portal por acuerdo de la reunión del 26-ago-2026.

   Por qué existe este archivo aparte. La campaña LPDP NO es la marca del
   gremio: es una identidad con fecha de vencimiento. Valeria en la reunión:
   "LPDP tiene una marca que lo hicimos también con Inscribe tu Fintech porque
   es una campaña, que tiene un momento de duración... va a llegar un momento
   en donde ya no va a haber un sentido de urgencia". Y sobre cómo salir de
   ella: "¿podemos mantener el Marketplace y ponerle la línea gráfica al
   Marketplace por ahora y luego le cambiamos la línea gráfica cuando deje de
   ser urgente? — Sí".

   Por eso todo cuelga de `body[data-campana="lpdp"]`. Sacar la campaña es
   borrar ese atributo del HTML: el módulo vuelve solo a la marca FinteChile,
   sin tocar una línea de marketplace.css.

   ⚠️ DE DÓNDE SALE CADA VALOR

   COLORES: medidos sobre los archivos originales de Juan Pablo, no estimados
   a ojo. Son los que se ven en pantalla.

   TIPOGRAFÍA: UNA SOLA, Archivo, en todos sus pesos.

   Las piezas de Juan Pablo llevan los textos en una monoespaciada, y en una
   gráfica de 4500px con cuatro líneas eso se ve bien. Se probó traerla a la
   página el 26-ago y fue un error: en una pantalla con veinte tarjetas, mil
   etiquetas y párrafos completos, las letras separadas ensucian la lectura y
   la página deja de verse de una pieza. Es exactamente lo que ya advertía la
   regla del 21-ago, que este archivo no tenía por qué romper.

   Así que la monoespaciada está FUERA: la jerarquía se hace con peso, cuerpo
   y color dentro de la misma familia.

   LA ÚNICA EXCEPCIÓN es el sello "#LPDP" del logotipo de la portada, en Press
   Start 2P. Ahí la bitmap es la marca, no texto: son cuatro letras y un signo
   que se leen como un logo. Es exactamente donde el gesto funciona, y es el
   único lugar del sitio donde aparece.

   Archivo, además, es una APROXIMACIÓN y no una identificación. El titular de
   las piezas es una grotesca pesada con glifos alternos "pixelados" en la 'e'
   y la 'a', y ese alterno no se puede sacar de un JPEG. Archivo es lo más
   cercano que hay en Google Fonts, sin costo de licencia y con las tildes bien
   resueltas. Cuando llegue el brandbook de Juan Pablo -que quedó como acción
   suya en la reunión- se cambia --lpdp-display y listo: es una línea.

   El TITULAR glitcheado de las piezas ("Prot▤cción de D▤tos P▤rsonales") no
   se imita acá. Se probó el 26-ago y se sacó: en una frase de catorce palabras
   las letras se pegan y la lectura se ensucia. Cuando llegue el brandbook se
   pide como SVG y se coloca como archivo, igual que el logo de FinteChile: una
   fuente puesta a mano no es la marca, es una imitación de la marca.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Archivo es la tipografía del sistema: 400 cuerpo, 500/600 etiquetas y
   botones, 700/800 titulares, 900 el logotipo.

   Press Start 2P NO es una segunda tipografía del sistema: escribe UNA sola
   cosa en todo el sitio, el sello "#LPDP" del logotipo. Nunca un titular,
   nunca una etiqueta, nunca el cuerpo de texto. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Press+Start+2P&display=swap');

body[data-campana="lpdp"] {
  /* ── Paleta, medida sobre los archivos de Juan Pablo ──────────────────────
     El negro NO es #000: es #080808, un negro con cuerpo. En las piezas ocupa
     entre el 34% y el 48% del lienzo, así que es el fondo, no un acento. */
  --lpdp-negro:       #080808;
  --lpdp-negro-2:     #0E0E12;   /* superficie de tarjeta, un punto sobre el fondo */
  --lpdp-negro-3:     #16161C;   /* superficie elevada / hover */

  /* Morado institucional: el plano de la banda lateral. Medido: 100% de los
     píxeles de esa banda son exactamente este valor. */
  --lpdp-morado:      #702083;
  --lpdp-morado-alto: #8A2AA1;   /* el mismo, aclarado, para hover */

  /* Magenta del degradado, en su punto más vivo. Es el acento, y se usa poco:
     en las piezas es un resplandor, no un relleno. Como COLOR DE OBJETO
     (filetes, bordes, degradados, resplandor) y como titular grande está
     bien: 3,72:1 sobre el negro, que es el mínimo de objeto y de texto de más
     de 24px. */
  --lpdp-magenta:     #BB15B7;

  /* El mismo magenta, subido a luminosidad de TINTA. El de la pieza da 3,58:1
     sobre la tarjeta y no llega a AA de cuerpo, así que las etiquetas chicas
     -números de sección, antetítulos, "Abrir →", el contador de servicios-
     van con este: 6,01:1 sobre tarjeta y 6,25:1 sobre el fondo. Es la misma
     regla que ya rige en ftc-web.css, donde los colores de marca nunca son
     colores de texto y para eso existen los tokens *-ink. */
  --lpdp-magenta-ink: #E255DB;

  /* Morados de humo: el degradado cuando ya cayó hacia el negro. */
  --lpdp-humo:        #28163C;
  --lpdp-humo-2:      #171429;

  /* Gris de apoyo: el del antetítulo "Fintech Brunch" y el del sello #LPdP.
     10,2:1 sobre el negro de la campaña, así que sí es color de texto. */
  --lpdp-gris:        #B1B8BE;
  --lpdp-blanco:      #FFFFFF;

  /* ── Tipografía ──────────────────────────────────────────────────────────
     UNA SOLA, en todos sus pesos. La regla no es nueva: ya venía de la
     revisión del 21-ago ("el módulo usa una sola tipografía de punta a punta,
     la mono queda fuera"), y esta campaña NO la rompe. La jerarquía se hace
     con peso, cuerpo y color, nunca cambiando de familia.

     ⚠️ NO volver a meter una monoespaciada acá. Se probó el 26-ago para darle
     "carácter técnico" a la campaña y el resultado fue exactamente lo que la
     regla del 21-ago venía advirtiendo: las letras separadas ensucian la
     lectura y la página deja de verse de una pieza. Los textos de las piezas
     de Juan Pablo están en mono, pero eso funciona en una gráfica de 4500px
     con cuatro líneas de texto, no en una página con veinte tarjetas. */
  --lpdp-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;

     La única excepción son las DOS LETRAS cortadas de los titulares (ver
     "Titulares" más abajo). Eso no es texto en otra tipografía: es un glifo
     injertado, calzado al alto de x de Archivo, que reproduce el gesto de las
     piezas. No aparece en ningún párrafo, etiqueta ni botón.

  /* ── Se pisan los tokens del contrato ────────────────────────────────────
     El módulo entero (marketplace.css) está escrito contra --mk-* y contra los
     tokens de ftc-web. Redefinirlos acá es lo que hace que TODO el portal
     cambie de piel sin tocar ni una regla de componente: tarjetas, chips,
     botones, formulario y modales quedan en la línea de campaña solos. */
  --mk-soft:      var(--lpdp-negro-2);
  --mk-soft-2:    var(--lpdp-negro-3);
  --mk-ink:       var(--lpdp-blanco);
  --mk-ink-2:     #D6DBE0;
  --mk-ink-3:     var(--lpdp-gris);
  --mk-ink-4:     #8B939B;
  --line-dark:    rgba(255, 255, 255, .11);
  --line-dark-2:  rgba(255, 255, 255, .18);

  /* El azul eléctrico del gremio no existe dentro de la campaña: lo reemplaza
     el morado. Se pisa el token, no cada uso. */
  --blue-electric: var(--lpdp-morado);
  --cyan-ink:      #E88BF0;   /* enlaces: 7,4:1 sobre el negro de campaña */
  --green-ink:     var(--lpdp-gris);   /* los antetítulos van en gris, no en verde */

  background: var(--lpdp-negro);
  color: var(--lpdp-blanco);
  font-family: var(--lpdp-display);
}

/* Cinturón y tirantes: el shell hereda mono en el nav, el pie, los chips y los
   botones. marketplace.css ya la apaga para todo el módulo; esto lo repite
   dentro de la campaña por si alguna regla nueva se cuela. */
body[data-campana="lpdp"],
body[data-campana="lpdp"] input,
body[data-campana="lpdp"] select,
body[data-campana="lpdp"] textarea,
body[data-campana="lpdp"] button,
body[data-campana="lpdp"] .chip,
body[data-campana="lpdp"] .btn,
body[data-campana="lpdp"] .eyebrow,
body[data-campana="lpdp"] .mono,
body[data-campana="lpdp"] .ftc-nav__tab,
body[data-campana="lpdp"] .ftc-nav__item,
body[data-campana="lpdp"] .ftc-nav__cta,
body[data-campana="lpdp"] .ftc-foot__k,
body[data-campana="lpdp"] .ftc-foot a,
body[data-campana="lpdp"] .ftc-foot__bar {
  font-family: var(--lpdp-display);
}


/* La rejilla de puntos del sistema general no pertenece a esta campaña: el
   fondo de las piezas es negro plano con grano. */
body[data-campana="lpdp"] .fx-dots { display: none; }

/* ─────────────────────────────────────────────────────────────────────────
   GRANO
   Las tres piezas comparten un grano grueso sobre el degradado. Es lo que
   evita que el morado se vea como un degradado plano de plantilla. Se genera
   con feTurbulence, así que no pesa ni un byte de imagen.
   ───────────────────────────────────────────────────────────────────────── */
body[data-campana="lpdp"] .lpdp-grano::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: .34; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ─────────────────────────────────────────────────────────────────────────
   PORTADA DE CAMPAÑA
   La estructura de las piezas: negro a la izquierda con el titular, y a la
   derecha el bloque morado con el resplandor magenta. Acá se traduce a un
   hero de dos columnas que en móvil se apila.
   ───────────────────────────────────────────────────────────────────────── */
.lpdp-hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--lpdp-negro);
  border-bottom: 1px solid var(--line-dark);
}
/* El resplandor: dos radiales, el magenta arriba y el morado abajo, cayendo a
   negro. Es el degradado de las piezas, leído como luz y no como relleno. */
.lpdp-hero__luz {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 90% at 88% 18%, rgba(187, 21, 183, .55) 0%, rgba(112, 32, 131, .30) 34%, transparent 68%),
    radial-gradient(90% 70% at 100% 100%, rgba(187, 21, 183, .42) 0%, rgba(40, 22, 60, .55) 40%, transparent 72%),
    linear-gradient(105deg, var(--lpdp-negro) 0%, var(--lpdp-negro) 48%, var(--lpdp-humo-2) 78%, var(--lpdp-humo) 100%);
}
.lpdp-hero__in {
  position: relative; z-index: 1;
  padding: clamp(56px, 8vw, 104px) 0 clamp(40px, 5vw, 64px);
  max-width: 62ch;
}

/* ── Logotipo "#LPDP Connect" ────────────────────────────────────────────
   El sello va en la bitmap, como en las piezas, y "Connect" en la grotesca.
   Es el ÚNICO pixel de todo el sitio: acá es una marca, no texto corrido, y
   por eso funciona. En los titulares no va -se probó y se sacó-.

   El calce sale de MEDIR las dos fuentes, no de ajustar a ojo:

     · Press Start 2P dibuja sus mayúsculas en una caja de 0,875em que NO
       apoya en la línea base: flota 0,125em por encima.
     · La mayúscula de Archivo mide 0,686em y sí apoya en la base.

   De ahí los dos números de abajo:
     font-size  = 0,686 / 0,875 = 0,784em  → las dos mayúsculas miden igual.
     translateY = 0,125em (del propio sello) → lo baja hasta la línea base.

   El tracking vuelve a `normal`: la bitmap ya trae 0,125em de aire propio a
   cada lado, y el -0,03em del logotipo le pegaba los píxeles entre sí.
   ──────────────────────────────────────────────────────────────────────── */
.lpdp-marca {
  display: flex; align-items: baseline; gap: .26em;
  font-family: var(--lpdp-display);
  font-size: clamp(28px, 3.6vw, 44px); line-height: 1.1;
}
.lpdp-marca__px {
  font-family: 'Press Start 2P', var(--lpdp-display);
  font-weight: 400;              /* la bitmap tiene un solo peso */
  font-size: .784em;
  letter-spacing: normal;
  color: var(--lpdp-blanco);
  transform: translateY(.125em);
  /* Sin esto el navegador redondea los bordes y el píxel deja de leerse como
     píxel: parece una letra mal renderizada en vez de un gesto. */
  -webkit-font-smoothing: none;
}
/* La almohadilla es parte del sello, no un adorno: mismo cuerpo, mismo color.
   Se separa en su propio span solo para poder darle el aire de la pieza. */
.lpdp-marca__ht { margin-right: .06em; }
.lpdp-marca__gr {
  /* Acá sí va el magenta de la pieza sin aclarar: a 28-44px cuenta como texto
     grande y le basta 3:1 (da 3,72:1). */
  font-weight: 600; letter-spacing: -.02em; color: var(--lpdp-magenta);
}
.lpdp-by {
  display: block; margin-top: 10px;
  font-size: 12px; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase; color: var(--lpdp-gris);
}

/* Antetítulo en caja, como el "WEBINAR" de las piezas: fondo blanco, letra
   negra, mono, muy tracked. Queda disponible para las piezas internas. */
.lpdp-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 8px;
  background: var(--lpdp-blanco); color: var(--lpdp-negro);
  font-size: 12.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
}

.lpdp-hero h1 {
  margin-top: 22px;
  font-family: var(--lpdp-display);
  /* El titular pasó a ser una frase completa ("Soluciones para implementar
     la Ley..."), no dos palabras: baja de cuerpo y sube de interlínea, o se
     come la pantalla. */
  font-size: clamp(29px, 3.9vw, 50px); font-weight: 800;
  letter-spacing: -.028em; line-height: 1.08; color: var(--lpdp-blanco);
  text-wrap: balance;
}
.lpdp-hero__lead {
  margin-top: 24px; max-width: 58ch;
  font-size: clamp(15px, 1.4vw, 17px);
  font-weight: 400; line-height: 1.62; color: var(--mk-ink-2);
}

/* Cuenta regresiva a la entrada en vigencia. Es el argumento entero de la
   campaña, así que va en la portada y en morado, no escondido en un pie. */
.lpdp-plazo {
  display: inline-flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin-top: 28px; padding: 13px 18px; border-radius: 12px;
  border: 1px solid rgba(187, 21, 183, .42);
  background: rgba(112, 32, 131, .20);
  font-family: var(--lpdp-display);
}
.lpdp-plazo b {
  font-size: clamp(20px, 2.4vw, 28px); font-weight: 700; color: var(--lpdp-blanco);
  letter-spacing: -.01em;
}
.lpdp-plazo span { font-size: 13px; font-weight: 500; color: var(--mk-ink-2); }

/* ─────────────────────────────────────────────────────────────────────────
   AJUSTES DE COMPONENTE
   El módulo ya está resuelto; acá solo se cambia lo que la campaña pide
   distinto de la marca del gremio.
   ───────────────────────────────────────────────────────────────────────── */

/* Los titulares de sección pasan a la display de campaña. */
body[data-campana="lpdp"] .mk-head__title {
  font-family: var(--lpdp-display); font-weight: 800; letter-spacing: -.028em;
}
body[data-campana="lpdp"] .mk-head__num,
body[data-campana="lpdp"] .mk-head__sub,
body[data-campana="lpdp"] .mk-count {
  font-family: var(--lpdp-display);
}
body[data-campana="lpdp"] .mk-head__num {
  color: var(--lpdp-magenta-ink); font-weight: 700; letter-spacing: .1em;
}

/* ─────────────────────────────────────────────────────────────────────────
   TARJETA DE EMPRESA · la forma de fintechile.org, con la paleta de campaña

   El sitio del gremio resuelve sus tarjetas de "Verticales de negocio" con una
   forma muy reconocible: composición CENTRADA, el símbolo arriba, el título
   debajo, mucho aire alrededor y esquinas bien redondeadas sobre una
   superficie clara con un borde apenas insinuado. Es la forma que Rodrigo
   pidió traer acá, con los colores nuevos.

   Se hace entero por CSS, sin tocar el marcado: la tarjeta ya tenía las piezas
   en el orden correcto (kicker, logo + identidad, texto, metadatos, pie); lo
   único que cambia es que dejan de apilarse a la izquierda y pasan a
   centrarse. Fuera de campaña la tarjeta sigue exactamente como estaba.

   Lo que NO se copió de la referencia: allá la tarjeta solo lleva ícono y
   título. Acá abajo del nombre viven los servicios, el "Dirigido a" y el
   contacto, que son justamente lo que Natalia pidió que se viera sin abrir la
   ficha. Se conserva todo; lo que cambia es la composición.
   ───────────────────────────────────────────────────────────────────────── */
body[data-campana="lpdp"] .mk-co {
  border-radius: 20px;
  align-items: center; text-align: center;
  /* Apretado a propósito. Con el aire de la referencia -que allá lleva solo
     ícono y título- la tarjeta se iba a 640px de alto y había que scrollear
     para ver tres empresas. Eso es fricción, que es justo lo que la vitrina
     tiene que evitar. */
  padding: 20px 18px 18px;
  border-color: rgba(187, 21, 183, .20);
  background: linear-gradient(180deg, rgba(112, 32, 131, .13) 0%, var(--lpdp-negro-2) 62%);
}
body[data-campana="lpdp"] .mk-co:hover {
  border-color: rgba(187, 21, 183, .45);
  background: linear-gradient(180deg, rgba(112, 32, 131, .22) 0%, var(--lpdp-negro-3) 62%);
}
/* La referencia no tiene filete superior: la esquina redonda y el borde hacen
   todo el trabajo. Acá tampoco. */
body[data-campana="lpdp"] .mk-co::before { display: none; }

/* Antetítulo centrado, sin el contador al costado: en una composición
   centrada, dos elementos en los extremos rompen el eje. El contador baja a la
   fila de servicios, que es donde de verdad significa algo. */
body[data-campana="lpdp"] .mk-co__bar { justify-content: center; }
body[data-campana="lpdp"] .mk-co__num { display: none; }
body[data-campana="lpdp"] .mk-co__kicker {
  color: var(--lpdp-magenta-ink); font-size: 10.5px; letter-spacing: .14em;
}

/* El logo arriba y centrado, como el ícono de la referencia: más grande y
   dentro de un anillo, que es lo que le da presencia sin necesitar un fondo. */
body[data-campana="lpdp"] .mk-co__top {
  flex-direction: column; align-items: center; gap: 10px; margin-top: 13px;
}
body[data-campana="lpdp"] .mk-co .mk-avatar {
  width: 58px; height: 58px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 0 0 5px rgba(112, 32, 131, .22);
}
body[data-campana="lpdp"] .mk-co__id { text-align: center; }
body[data-campana="lpdp"] .mk-co__name {
  font-family: var(--lpdp-display); font-weight: 700; letter-spacing: -.02em;
  font-size: 18px;
}
body[data-campana="lpdp"] .mk-co__site {
  font-family: var(--lpdp-display); font-size: 12.5px; color: var(--mk-ink-4);
  margin-top: 2px;
}
body[data-campana="lpdp"] .mk-co__txt {
  margin-top: 9px; font-size: 14px; line-height: 1.5;
  /* Centrado, la línea larga se lee mal: se le pone freno. Y dos renglones
     como tope: el resumen es un titular, no un párrafo. La descripción
     completa está en la ficha. */
  max-width: 34ch; margin-inline: auto;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Metadatos, apilados en vez de en dos columnas ────────────────────────
   La grilla etiqueta-a-la-izquierda no funciona en una composición centrada:
   el eje se rompe. Cada dato pasa a ser rótulo arriba y valor abajo, los dos
   centrados. */
body[data-campana="lpdp"] .mk-co__meta {
  width: 100%; margin-top: 13px; padding-top: 12px; gap: 10px;
  border-top-color: rgba(187, 21, 183, .18);
}
body[data-campana="lpdp"] .mk-co__row {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
body[data-campana="lpdp"] .mk-co__k {
  font-family: var(--lpdp-display); font-size: 9.5px; letter-spacing: .16em;
  color: var(--mk-ink-4);
}
/* Los chips en UNA fila: si no caben, se recortan con puntos suspensivos. El
   detalle completo está a un clic, en la ficha. */
body[data-campana="lpdp"] .mk-co__chips {
  justify-content: center; flex-wrap: nowrap; max-width: 100%; gap: 5px;
}
body[data-campana="lpdp"] .mk-co__chips .chip {
  font-size: 11.5px; padding: 3px 9px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* El "+N" no es un servicio, es la puerta a la ficha: se distingue. */
body[data-campana="lpdp"] .mk-co__chip--mas {
  flex: 0 0 auto; font-weight: 700; color: var(--lpdp-magenta-ink);
  border-color: rgba(187, 21, 183, .40);
}
body[data-campana="lpdp"] .mk-co__v {
  text-align: center; font-size: 13.5px; line-height: 1.42;
}
body[data-campana="lpdp"] .mk-co__v--clamp { min-height: calc(2 * 1.42em); }

/* Pie: los dos botones a lo ancho, como remate de la tarjeta. */
body[data-campana="lpdp"] .mk-co__foot { width: 100%; padding-top: 15px; gap: 8px; }
body[data-campana="lpdp"] .mk-co__cta,
body[data-campana="lpdp"] .mk-co__alt { min-height: 40px; font-size: 13.5px; padding: 9px 12px; }
body[data-campana="lpdp"] .mk-co__cta,
body[data-campana="lpdp"] .mk-co__alt { border-radius: 12px; }

/* Angosto: el anillo del logo y el aire se achican para no comerse la
   tarjeta. */
@media (max-width: 480px) {
  body[data-campana="lpdp"] .mk-co { padding: 18px 16px 16px; }
  body[data-campana="lpdp"] .mk-co .mk-avatar {
    width: 52px; height: 52px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 0 0 4px rgba(112, 32, 131, .22);
  }
}

/* Botones: sólido en morado, contorno en blanco. Nada de azul eléctrico. */
body[data-campana="lpdp"] .mk-co__cta,
body[data-campana="lpdp"] .mk-co__alt,
body[data-campana="lpdp"] .btn {
  font-family: var(--lpdp-display); font-weight: 600; letter-spacing: .01em;
}
body[data-campana="lpdp"] .mk-co__cta {
  background: var(--lpdp-morado); box-shadow: 0 8px 20px -12px rgba(112, 32, 131, 1);
}
body[data-campana="lpdp"] .mk-co__cta:hover { background: var(--lpdp-morado-alto); }
body[data-campana="lpdp"] .mk-co:hover .mk-co__alt,
body[data-campana="lpdp"] .mk-co__alt:hover {
  color: var(--lpdp-magenta);
  box-shadow: inset 0 0 0 1px var(--lpdp-magenta);
  background: rgba(187, 21, 183, .12);
}

/* Filtros y chips */
body[data-campana="lpdp"] .mk-filter,
body[data-campana="lpdp"] .chip,
body[data-campana="lpdp"] .mk-search input {
  font-family: var(--lpdp-display);
}
body[data-campana="lpdp"] .mk-filter[aria-pressed="true"] {
  background: var(--lpdp-morado); border-color: var(--lpdp-morado); color: #fff;
}

/* Guía y recursos */
body[data-campana="lpdp"] .mk-ley {
  border-color: rgba(187, 21, 183, .30);
  background: linear-gradient(135deg, rgba(112, 32, 131, .22) 0%, rgba(187, 21, 183, .05) 55%, transparent 100%);
}
body[data-campana="lpdp"] .mk-ley h2,
body[data-campana="lpdp"] .mk-ley--sutil h3,
body[data-campana="lpdp"] .mk-web__head h3,
body[data-campana="lpdp"] .mk-recurso h3,
body[data-campana="lpdp"] .mk-cta h2 {
  font-family: var(--lpdp-display); font-weight: 800; letter-spacing: -.026em;
}
body[data-campana="lpdp"] .mk-ley__eyebrow,
body[data-campana="lpdp"] .mk-recurso__tipo,
body[data-campana="lpdp"] .mk-web__cuando {
  font-family: var(--lpdp-display); color: var(--lpdp-magenta-ink);
}
body[data-campana="lpdp"] .mk-recurso__tipo {
  color: var(--lpdp-gris); box-shadow: inset 0 0 0 1px var(--line-dark-2);
}
body[data-campana="lpdp"] .mk-recurso__go { color: var(--lpdp-magenta-ink); }
body[data-campana="lpdp"] .mk-recurso:hover { border-color: var(--lpdp-magenta); }
body[data-campana="lpdp"] .mk-web {
  border-color: rgba(187, 21, 183, .28);
  background: linear-gradient(135deg, rgba(112, 32, 131, .18) 0%, rgba(187, 21, 183, .04) 60%, transparent 100%);
}
body[data-campana="lpdp"] .mk-web__fila:hover { border-color: var(--lpdp-magenta); }

/* ─────────────────────────────────────────────────────────────────────────
   FICHA DE EMPRESA
   Fuera de campaña, la ficha se tiñe con el color de marca de cada empresa:
   viene de `marca` en data.js y salió de la reunión del 21-ago ("un banner de
   Cybertrust y que se vea con los colores de ellos").

   Dentro de la campaña eso no funciona. Abrir Bitlaw y encontrarse un banner
   verde agua en medio de un portal morado rompe la pieza, y son diecinueve
   colores distintos apareciendo uno tras otro. La identidad de la empresa ya
   la lleva su logo, que es su marca de verdad; el resto de la superficie es de
   LPDP Connect.

   `marca` NO se borra de data.js: sigue ahí, y el día que se apague la campaña
   la ficha vuelve sola a los colores de cada empresa.
   ───────────────────────────────────────────────────────────────────────── */
/* La superficie de los modales venía en --navy, el azul del gremio: dentro de
   la campaña el lienzo es el negro. */
body[data-campana="lpdp"] .mk-modal__card { background: var(--lpdp-negro-2); }
body[data-campana="lpdp"] .mk-modal__scrim { background: rgba(4, 2, 6, .78); }

/* El banner es una SUPERFICIE DE COLOR, no una superficie de página: lleva el
   morado y el texto en blanco en los dos ánimos. Con `--lpdp-negro` -que en
   claro vale blanco- el degradado terminaba en blanco y el nombre de la
   empresa desaparecía sobre su propia caja. Por eso acá van los hex directos y
   no el token. */
body[data-campana="lpdp"] .mk-ficha__banner {
  background:
    radial-gradient(120% 160% at 88% -30%, rgba(187, 21, 183, .55) 0%, transparent 62%),
    linear-gradient(135deg, #702083 0%, #1A0620 78%);
}
body[data-campana="lpdp"] .mk-ficha__banner h2,
body[data-campana="lpdp"] .mk-ficha__dom { color: #fff; }
/* Un filete con el color de la empresa al pie del banner: no la borra del
   todo, pero tampoco le entrega la pieza. */
body[data-campana="lpdp"] .mk-ficha__banner {
  border-bottom: 3px solid var(--mk-marca, var(--lpdp-morado));
}
/* El monograma -el círculo con las iniciales cuando la empresa no tiene logo
   cargado- y el de la persona de contacto. */
body[data-campana="lpdp"] .mk-avatar b,
body[data-campana="lpdp"] .mk-persona__ini {
  color: #fff;
}
body[data-campana="lpdp"] .mk-persona__ini { background: var(--lpdp-morado); }
body[data-campana="lpdp"] .mk-avatar b { color: var(--lpdp-morado); }

/* Los rótulos de bloque ("A QUIÉN LE SIRVE", "SERVICIOS QUE OFRECE") y las
   flechas de los servicios venían en --green, que es el verde del gremio: no
   pertenece a esta campaña. Van en el magenta de tinta. */
body[data-campana="lpdp"] .mk-bloque__k,
body[data-campana="lpdp"] .mk-tag__flecha {
  color: var(--lpdp-magenta-ink);
}

/* Enlaces y redes de la ficha, que también se teñían con el color de la
   empresa al pasar el mouse. */
body[data-campana="lpdp"] .mk-enlace:hover,
body[data-campana="lpdp"] .mk-red:hover {
  color: #fff; background: var(--lpdp-morado);
  box-shadow: inset 0 0 0 1px var(--lpdp-morado);
}
body[data-campana="lpdp"] .mk-cerrar:hover { background: var(--lpdp-morado); }

/* Formulario y ficha */
body[data-campana="lpdp"] .mk-form,
body[data-campana="lpdp"] .mk-campo,
body[data-campana="lpdp"] .mk-check__txt,
body[data-campana="lpdp"] .mk-aviso {
  font-family: var(--lpdp-display);
}
body[data-campana="lpdp"] .mk-form__head h3,
body[data-campana="lpdp"] .mk-ficha__banner h2,
body[data-campana="lpdp"] .mk-ok h3 {
  font-family: var(--lpdp-display); font-weight: 800; letter-spacing: -.024em;
}
body[data-campana="lpdp"] .mk-campo input:focus,
body[data-campana="lpdp"] .mk-campo select:focus,
body[data-campana="lpdp"] .mk-campo textarea:focus,
body[data-campana="lpdp"] .mk-check__caja:hover { border-color: var(--lpdp-magenta); }
body[data-campana="lpdp"] .mk-check__caja input:checked ~ .mk-check__marca {
  background: var(--lpdp-morado); border-color: var(--lpdp-morado);
}

/* Cierre */
body[data-campana="lpdp"] .mk-cta {
  background: linear-gradient(115deg, var(--lpdp-negro) 0%, var(--lpdp-humo-2) 55%, var(--lpdp-morado) 100%);
  border-color: rgba(187, 21, 183, .30);
}
body[data-campana="lpdp"] .mk-cta p { font-family: var(--lpdp-display); }

/* ─────────────────────────────────────────────────────────────────────────
   ÁNIMO CLARO
   Las piezas de la campaña son solo oscuras, pero el sitio tiene los dos
   ánimos y el contrato manda que ambos funcionen. En claro se invierte el
   lienzo y el morado se oscurece para poder ser tinta: el #702083 sobre
   blanco da 8,9:1, así que sirve como texto; el magenta #BB15B7 solo da
   4,3:1, o sea alcanza para titulares y objetos, no para cuerpo.
   ───────────────────────────────────────────────────────────────────────── */
:root[data-theme="light"] body[data-campana="lpdp"],
:root[data-theme="light"] body[data-campana="lpdp"] .lpdp-hero {
  --lpdp-negro:   #FFFFFF;
  --lpdp-negro-2: #FAF7FC;
  --lpdp-negro-3: #F3EDF7;
  --lpdp-gris:    #5A4A63;
  --lpdp-blanco:  #14061A;
  --mk-ink:       #14061A;
  --mk-ink-2:     #3A2C42;
  --mk-ink-3:     #5A4A63;
  /* Los rótulos chicos ("SERVICIOS", "DIRIGIDO A") caen sobre la tarjeta, que
     en claro es lavanda y en hover se oscurece: con #6E5E77 daban 3,52:1 ahí.
     #544459 pasa AA en las tres superficies (página 8,94 · tarjeta 6,72 ·
     tarjeta en hover 5,30). */
  --mk-ink-4:     #544459;
  --cyan-ink:     #8A1E9E;
  --line-dark:    rgba(20, 6, 26, .12);
  --line-dark-2:  rgba(20, 6, 26, .20);
  background: #FFFFFF; color: #14061A;
}
:root[data-theme="light"] body[data-campana="lpdp"] .lpdp-hero__luz {
  background:
    radial-gradient(120% 90% at 88% 18%, rgba(187, 21, 183, .16) 0%, rgba(112, 32, 131, .09) 36%, transparent 70%),
    linear-gradient(105deg, #FFFFFF 0%, #FFFFFF 52%, #FBF3FD 82%, #F4E6F8 100%);
}
:root[data-theme="light"] body[data-campana="lpdp"] .lpdp-chip {
  background: #14061A; color: #FFFFFF;
}
:root[data-theme="light"] body[data-campana="lpdp"] .lpdp-plazo {
  background: rgba(112, 32, 131, .08); border-color: rgba(112, 32, 131, .30);
}
:root[data-theme="light"] body[data-campana="lpdp"] .mk-head__num,
:root[data-theme="light"] body[data-campana="lpdp"] .mk-ley__eyebrow,
:root[data-theme="light"] body[data-campana="lpdp"] .mk-web__cuando,
:root[data-theme="light"] body[data-campana="lpdp"] .mk-recurso__go {
  color: #8A1E9E;
}
:root[data-theme="light"] body[data-campana="lpdp"] .mk-modal__card { background: #FFFFFF; }
:root[data-theme="light"] body[data-campana="lpdp"] .mk-modal__scrim { background: rgba(20, 6, 26, .42); }
:root[data-theme="light"] body[data-campana="lpdp"] .mk-cta {
  background: linear-gradient(115deg, #FFFFFF 0%, #F7EDFA 55%, #E9D4EF 100%);
}
:root[data-theme="light"] body[data-campana="lpdp"] .lpdp-grano::after { opacity: .16; }

/* ─────────────────────────────────────────────────────────────────────────
   VIDEO INCRUSTADO
   Pedido de Valeria: "sería súper cool que aparezca este YouTube incrustado,
   y entonces puedas verlo ya sea posterior... qué pasa si ya pasó el webinar".
   ───────────────────────────────────────────────────────────────────────── */
.mk-video {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: 12px; overflow: hidden; margin-top: 14px;
  border: 1px solid var(--line-dark); background: #000;
}
.mk-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* En móvil el nav del contrato se parte en dos filas y se come la parte alta
   del hero: el logotipo quedaba tapado. Se le da aire suficiente para que la
   marca sea lo primero que se lee. */
@media (max-width: 720px) {
  /* `--nav-real` lo mide el JS: el nav se parte en dos filas en pantallas
     angostas y crece por encima de los 62px que declara el token del shell. */
  .lpdp-hero__in {
    padding-top: calc(var(--nav-real, var(--nav-h, 62px)) + 34px);
    padding-bottom: 36px;
  }
  .lpdp-marca { font-size: 26px; }
  .lpdp-hero h1 { margin-top: 16px; }
  .lpdp-plazo { margin-top: 22px; padding: 11px 15px; }
}
@media (max-width: 420px) {
  /* Las tres cifras en una fila no caben: quedan en dos columnas. */
  .lpdp-hero__in .mk-hero__stats { gap: 18px 26px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   CIERRE EN DOS CAJAS
   Reunión del 26-ago. Se cayó "¿Te ayudamos a elegir?" -Valeria: "¿cómo
   recomendar a una empresa por sobre otra? ahí nos podemos enredar"- y en su
   lugar quedan las dos cosas que el gremio sí puede decir: quiénes somos, y
   la invitación a publicar. La segunda la pidió Natalia: "un cajoncito de
   publicar tus servicios, por si alguien ve esto y dice 'oye, yo también
   ofrezco esas cosas'".
   ───────────────────────────────────────────────────────────────────────── */
.mk-cierre { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px; }
.mk-cierre .mk-cta { margin: 0; }
/* La segunda caja es la invitación, no el mensaje principal: mismo tamaño,
   menos peso visual. */
body[data-campana="lpdp"] .mk-cta--alt {
  background: var(--lpdp-negro-2);
  border: 1px dashed var(--line-dark-2);
}
:root[data-theme="light"] body[data-campana="lpdp"] .mk-cta--alt {
  background: var(--lpdp-negro-2);
}

/* Descargo del cierre: "FinteChile no certifica ni recomienda proveedores
   específicos". Va legible, no como letra chica: es la posición del gremio
   frente a la vitrina, y responde a lo que se discutió en la reunión. */
.lpdp-descargo {
  margin-top: 22px; padding: 14px 18px; border-radius: 12px;
  border: 1px solid var(--line-dark);
  font-size: 13.5px; line-height: 1.6;
  color: var(--mk-ink-3); text-align: center;
}


/* Los titulares NO llevan glifos injertados: van en Archivo limpio.

   Se probó el 26-ago reproducir el corte de las piezas metiendo letras de una
   bitmap dentro de los titulares. Funciona en la gráfica de Juan Pablo, que
   son tres palabras; acá el titular tiene catorce y las letras se pegan.

   El único pixel del sitio es el sello "#LPDP" del logotipo -ver más arriba-,
   donde es una marca y no texto corrido. Ahí se queda. */

/* ─────────────────────────────────────────────────────────────────────────
   EL ESCUDO DE LA PORTADA
   Ocupa la mitad derecha del hero, que estaba vacía. Se dibuja en canvas
   (marketplace/lpdp-escudo.js): lluvia de dígitos, trazas de circuito con un
   pulso, y el candado dentro del marco de enfoque.

   Va DEBAJO del texto en la pila (z-index 0 contra el 1 del contenido) y sin
   eventos de puntero: es atmósfera, no interfaz. Si el JS no carga, no queda
   ningún hueco: el hero se ve como antes.
   ───────────────────────────────────────────────────────────────────────── */
.lpdp-hero__escudo {
  position: absolute; top: 0; right: 0; z-index: 0;
  width: 46%; height: 100%;
  pointer-events: none;
  /* Se desvanece hacia la izquierda para que nunca compita con el titular,
     por largo que sea. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 26%, #000 100%);
}
.lpdp-hero__in { position: relative; z-index: 1; }

/* En ánimo claro el lienzo se atenúa: la misma escena sobre blanco satura. */
:root[data-theme="light"] body[data-campana="lpdp"] .lpdp-hero__escudo { opacity: .42; }

/* Bajo 900px el titular ocupa todo el ancho y el escudo quedaría detrás del
   texto. Se apaga: es decoración, no información. */
@media (max-width: 900px) {
  .lpdp-hero__escudo { display: none; }
}


/* ═════════════════════════════════════════════════════════════════════════
   MODO EMBEBIDO · `body[data-embed="1"]`

   Lo sirve api/lpdp-embed.js en /lpdp-connect, para que Juan Pablo lo meta en
   un iframe dentro de fintechile.org. Ahí el visitante NO viene del sitio: ya
   está dentro de fintechile.org, con el menú y el pie de Webflow arriba y
   abajo. Repetir nuestro nav y nuestro pie sería mostrarle dos veces la misma
   navegación, así que se apagan y la portada arranca en el logotipo.

   Es una VISTA del mismo módulo, no una copia: mismo HTML, mismo CSS, mismo
   JS. Lo único que cambia es el atributo del <body>.
   ═════════════════════════════════════════════════════════════════════════ */
body[data-embed="1"] .ftc-nav,
body[data-embed="1"] .ftc-foot { display: none; }

/* Sin nav no hay que reservarle sitio: la portada arranca arriba del todo.
   Gana en especificidad al `padding-top` que calcula `--nav-real`. */
body[data-embed="1"] .lpdp-hero__in {
  padding-top: clamp(40px, 5vw, 72px);
}
body[data-embed="1"] .mk-wrap--head { padding-top: clamp(28px, 4vw, 48px); }

/* El iframe trae su propio alto desde el padre (ver el fragmento que se le
   pasa a Webflow), así que el documento no debe scrollear por dentro: dos
   barras de scroll, una dentro de la otra, es la peor parte de un embebido. */
body[data-embed="1"] { overflow-x: hidden; }

/* ── Las fichas, dentro del iframe ────────────────────────────────────────
   Un modal es `position: fixed`, o sea que se centra en el VIEWPORT. Dentro de
   un iframe de alto automático el viewport del iframe es la página entera: seis
   mil y pico de píxeles. Al abrir una ficha, el modal se centraba a tres mil
   píxeles de donde el visitante estaba mirando: se veía el fondo oscurecerse y
   nada más. Es el fallo clásico de este montaje y hay que resolverlo.

   La solución es que el padre le diga al iframe QUÉ FRANJA suya está a la vista.
   Llega por postMessage y se guarda en estas dos variables; el modal deja de ser
   `fixed` y se posiciona sobre esa franja, que es lo que el visitante ve.

   Los valores por defecto son el comportamiento de siempre: si el mensaje no
   llega -porque nadie pegó el script del padre-, el modal sigue funcionando
   como antes en vez de desaparecer. */
body[data-embed="1"] .mk-modal {
  position: absolute;
  inset: auto 0 auto 0;
  top: var(--marco-top, 0px);
  height: var(--marco-alto, 100vh);
}