/* NEXTLINK: sello de marca. Solo botones y badges llevan sombra/colita. */

:root {
  --nl-chispa: #b5ff2b;
  --nl-bosque: #0d5c2e;
  --nl-selva: #093f20;
  --nl-cascara: #f2f5ea;
}

/* Extrusion 3D solida para Display sobre fondos oscuros (sin blur) */
.nl-extrusion {
  color: #fff;
  text-wrap: balance;
  text-shadow:
    1px 1px 0 var(--nl-bosque),
    2px 2px 0 var(--nl-bosque),
    3px 3px 0 var(--nl-bosque),
    4px 4px 0 var(--nl-bosque),
    5px 5px 0 #0b4a26,
    6px 6px 0 var(--nl-selva),
    8px 8px 0 #062a15;
}

h1, h2 {
  text-wrap: balance;
}

/* Marco lateral de 16px para contenido sobre fondos a sangre */
.nl-marco {
  padding-left: var(--wp--preset--spacing--16);
  padding-right: var(--wp--preset--spacing--16);
  max-width: 72rem;
  margin-left: auto;
  margin-right: auto;
}

/* Catalogo de badges: en fila con aire, con salto permitido */
.nl-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 12px;
}

/* Extrusion sobre Chispa: tinta bosque */
.nl-extrusion--chispa {
  color: var(--nl-bosque);
  text-shadow:
    1px 1px 0 #fff,
    2px 2px 0 #fff,
    3px 3px 0 #d7f5a0,
    4px 4px 0 #c4ec7f;
}

/* Botones: sombra dura, radio propio, sin animacion decorativa */
.wp-element-button,
.wp-block-button__link {
  border-radius: 14px;
  box-shadow: 4px 4px 0 var(--nl-bosque);
  border: 2px solid var(--nl-bosque);
  font-variant-numeric: tabular-nums;
}
.wp-element-button:active,
.wp-block-button__link:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--nl-bosque);
}

/* Boton secundario bosque */
.nl-boton--bosque .wp-element-button,
.nl-boton--bosque .wp-block-button__link {
  background: var(--nl-bosque);
  color: #fff;
  box-shadow: 4px 4px 0 var(--nl-selva);
  border-color: var(--nl-selva);
}
.nl-boton--bosque .wp-element-button:active,
.nl-boton--bosque .wp-block-button__link:active {
  box-shadow: 2px 2px 0 var(--nl-selva);
}

/* Badges con colita de globo (solo Nuevo, -20%, Agotado) */
.nl-badge {
  position: relative;
  display: inline-block;
  background: #fff;
  color: var(--nl-bosque);
  border: 2px solid var(--nl-bosque);
  border-radius: 8px;
  padding: 4px 8px;
  font-family: "Figtree", system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.8125rem;
  line-height: 1.2;
}
.nl-badge::after {
  content: "";
  position: absolute;
  left: 12px;
  bottom: -8px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid var(--nl-bosque);
}

/* Logo como sticker: leve giro + sombra dura */
.nl-logo img {
  transform: rotate(-2deg);
  box-shadow: 5px 5px 0 var(--nl-bosque);
  border-radius: 6px;
}

/* Precios: Display + cifras tabulares */
.nl-precio {
  font-family: "Archivo", "Arial Black", sans-serif;
  font-style: italic;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

/* Foco visible por teclado */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--nl-chispa);
  outline-offset: 2px;
}

/* Una sola secuencia de carga vive en el inicio (clase .nl-entrada).
   Fuera de eso no hay animaciones. */
@media (prefers-reduced-motion: reduce) {
  .nl-entrada {
    animation: none;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .nl-entrada {
    animation: nl-caida 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) both;
  }
  @keyframes nl-caida {
    from {
      opacity: 0;
      transform: translateY(-14px) skewX(-6deg);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}