/* v7.5 (07-10-2026) · palabras clave destacadas — estetica-landing.md § 24. Se enlaza DESPUÉS de landing.css.
   Todo es CSS sobre texto vivo: trazos SVG en pseudo-elementos (mask + currentColor) o en el fondo de la palabra.
   Nada se mide con JS. El naranja queda para el botón y el resaltador del H1; los trazos van en petróleo (o blanco
   sobre la franja petróleo). Un recurso principal por bloque, a lo sumo uno secundario. */
:root {
  --dz-trazo: var(--texto);
  /* subrayado a mano, petróleo #1E2F38 (va como fondo de la palabra: no puede usar currentColor) */
  --dz-sub-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M3 8.5C48 4 118 3.2 197 6.2' fill='none' stroke='%231E2F38' stroke-width='2.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  /* las demás formas son máscaras: el color sale de currentColor */
  --dz-circulo-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M150 9C96 1 20 6 9 28C1 45 62 56 124 51C182 46 199 28 188 15C178 5 144 3 112 7' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --dz-tachado-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8C44 4.5 96 9 198 3.5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --dz-corchete-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 40' preserveAspectRatio='none'%3E%3Cpath d='M10 2.5C5 2.8 3.4 3.6 3.2 8L2.8 32.5C3 36.6 4.6 37.4 10.5 37.6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --dz-destellos-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 12L1.5 9.5M8.5 8.5L8 2M12.5 11L18 6.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* 1 · Hero (secundario; el principal es el resaltador naranja del H1) — subrayado a mano en «menos publicidad» */
.dz-sub {
  color: var(--texto); font-weight: 600;
  background: var(--dz-sub-svg) left bottom / 100% .42em no-repeat;
  padding-bottom: .1em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* 2 · Prueba — círculo a mano alrededor de la cifra de llegada («3,37%» desde la v8.1); las cifras pasan de naranja a blanco */
.prueba .frase-grande .nt { color: #fff; }
.dz-circulo { position: relative; display: inline-block; white-space: nowrap; margin: 0 .22em 0 .26em; }
.dz-circulo::after {
  content: ""; position: absolute; inset: -.16em -.3em -.12em -.3em; pointer-events: none;
  background: currentColor; -webkit-mask: var(--dz-circulo-svg) center / 100% 100% no-repeat; mask: var(--dz-circulo-svg) center / 100% 100% no-repeat;
}

/* 3 · La cuenta — marcador: la plata sobre una etiqueta blanca (el bloque es petróleo) */
.dz-marcador { display: inline-block; background: #fff; color: var(--texto); border-radius: 6px; padding: 0 .16em; transform: rotate(-1.5deg); }
.calc-cifra #rDif.dz-marcador { color: var(--texto); }

/* 4 · Método — corchetes a mano alrededor del nombre (principal) + destellos en PIMEFY, que es regalo (secundario) */
.dz-corchetes { position: relative; display: inline-block; white-space: nowrap; padding: 0 .36em; color: var(--texto); font-weight: 600; }
.dz-corchetes::before, .dz-corchetes::after {
  content: ""; position: absolute; top: -.06em; bottom: -.06em; width: .3em; pointer-events: none;
  background: var(--dz-trazo); -webkit-mask: var(--dz-corchete-svg) center / 100% 100% no-repeat; mask: var(--dz-corchete-svg) center / 100% 100% no-repeat;
}
.dz-corchetes::before { left: 0; }
.dz-corchetes::after { right: 0; transform: scaleX(-1); }
.dz-destellos { position: relative; display: inline-block; }
.dz-destellos::after {
  content: ""; position: absolute; right: -.72em; top: -.7em; width: 1em; height: 1em; pointer-events: none;
  background: var(--dz-trazo); -webkit-mask: var(--dz-destellos-svg) center / contain no-repeat; mask: var(--dz-destellos-svg) center / contain no-repeat;
}

/* 5 · Garantía — doble subrayado recto, sobrio: la condición que se promete */
.dz-doble {
  color: var(--texto); font-weight: 600;
  text-decoration-line: underline; text-decoration-style: double; text-decoration-color: var(--texto);
  text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-skip-ink: none;
}

/* 6 · Preguntas — tachado a mano: «esto no» */
.dz-tachado { position: relative; display: inline-block; white-space: nowrap; }
.dz-tachado::after {
  content: ""; position: absolute; left: -.08em; right: -.08em; top: 50%; height: .5em; transform: translateY(-38%); pointer-events: none;
  background: var(--dz-trazo); -webkit-mask: var(--dz-tachado-svg) center / 100% 100% no-repeat; mask: var(--dz-tachado-svg) center / 100% 100% no-repeat;
}

/* Letra chica en lista: las mismas condiciones, una por renglón */
.lc-t { font-size: 12px; line-height: 1.4; font-weight: 600; color: var(--texto); margin: 0 0 4px; }
.lc-lista { margin: 0 0 10px; padding-left: 1.1em; }
.lc-lista li { font-size: 12px; line-height: 1.5; color: var(--texto-2); margin: 0 0 3px; }

/* Movimiento: solo si la persona no pidió menos movimiento. El trazo se «dibuja» con clip-path (o el ancho del fondo,
   en el subrayado); los de más abajo avanzan con el scroll (animation-timeline: view()) y, donde el navegador no lo
   tiene, quedan dibujados quietos. Ningún recurso depende de JS ni de medir. */
@keyframes dz-dibuja { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes dz-traza { from { background-size: 0% .42em; } }
@keyframes dz-brota { from { opacity: 0; transform: scale(.4) rotate(-20deg); } }
@media (prefers-reduced-motion: no-preference) {
  .dz-sub { animation: dz-traza 520ms var(--curva-resaltador) 950ms backwards; }
  @supports (animation-timeline: view()) {
    .dz-circulo::after, .dz-tachado::after, .dz-corchetes::before, .dz-corchetes::after {
      animation: dz-dibuja linear both; animation-timeline: view(); animation-range: entry 40% cover 35%;
    }
    .dz-corchetes::after { animation-name: dz-dibuja-espejo; }
    .dz-destellos::after { animation: dz-brota linear both; animation-timeline: view(); animation-range: entry 50% cover 35%; }
  }
}
@keyframes dz-dibuja-espejo { from { clip-path: inset(0 100% 0 0); transform: scaleX(-1); } to { clip-path: inset(0 0 0 0); transform: scaleX(-1); } }