/* ==========================================================================
   JOSE Y DIANA — capa de marca común (home, blog y páginas legales)
   Fuente de verdad: JoseyDiana-Brand-Kit/BRAND.md
   Fuentes autohospedadas (sin Google Fonts).
   ========================================================================== */

@font-face { font-family: "Poppins"; src: url("fonts/poppins-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/poppins-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/poppins-latin-700-normal.woff2") format("woff2"); font-weight: 700 900; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-latin-600-normal.woff2") format("woff2"); font-weight: 600 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --jd-red-400: #FF4D4D;   /* texto rojo pequeño sobre oscuro */
  --jd-red-500: #FF0000;   /* rojo de marca: la Y, acentos */
  --jd-red-600: #E60000;   /* botón primario */
  --jd-red-700: #C40000;   /* hover */
  --jd-ink: #0A0A0A;
  --jd-carbon: #121212;
  --jd-graphite: #1C1C1C;
  --jd-steel: #2B2B2B;
  --jd-ease: cubic-bezier(.22, 1, .36, 1);
  --jd-ease-snap: cubic-bezier(.68, -0.2, .27, 1.3);
  --jd-beat: 460ms;        /* ~130 BPM */
}

/* Etiqueta con corte diagonal rojo (eco del corte de la Y) */
.jd-eyebrow::before,
.jd-slash {
  content: "";
  display: inline-block;
  width: 6px;
  height: 16px;
  background: var(--jd-red-500);
  transform: skewX(-28deg);
  flex: none;
}

/* Patrón "cortes" de fondo */
.jd-cortes {
  background-image: url("cortes.svg");
  background-size: cover;
  background-position: center;
}

/* Aparición suave al hacer scroll */
.jd-reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s var(--jd-ease), transform .6s var(--jd-ease); }
.jd-reveal.is-visible { opacity: 1; transform: none; }

/* "Tap" en el 4: golpe corto al pasar por los botones principales */
@keyframes jd-tap { 0%, 100% { transform: none; } 45% { transform: translate(2px, -3px); } }

@media (prefers-reduced-motion: reduce) {
  .jd-reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0s !important; animation-iteration-count: 1 !important; }
}