/* ==========================================================================
   Dulcitos Gluten Free  ·  decoraciones.css
   Los elementos gráficos del manual: borde de encaje, línea con corazón y
   formas suaves de fondo.

   Regla del proyecto: NO hay puntos, partículas, confeti ni texturas
   moteadas en ninguna parte del sitio. Sólo ondas, líneas finas, corazones
   discretos y formas limpias de gran tamaño.

   Todo está hecho con máscaras y formas CSS: sin imágenes ni SVG dibujados
   a mano, así que no suman peso ni peticiones. Todo lleva pointer-events:
   none y aria-hidden.
   ========================================================================== */

/* ==========================================================================
   BORDE DE ENCAJE
   El festón del sello de la marca, para separar secciones.
   Dos variables:
     --arriba : color de la sección de arriba (forma las ondas)
     --abajo  : color de la sección de abajo (queda de fondo)
   ========================================================================== */
.encaje {
  position: relative;
  height: 30px;
  background: var(--abajo, var(--bg));
  overflow: hidden;
  pointer-events: none;
}
.encaje::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 30px;
  background: var(--arriba, var(--bg-tiffany));
  -webkit-mask: radial-gradient(circle 15px at 15px 0, #000 99%, transparent 100%) 0 0 / 30px 100% repeat-x;
  mask: radial-gradient(circle 15px at 15px 0, #000 99%, transparent 100%) 0 0 / 30px 100% repeat-x;
}
/* Variante invertida: las ondas suben desde la sección de abajo */
.encaje--sube::before {
  inset: auto 0 0 0;
  background: var(--abajo-onda, var(--bg));
  -webkit-mask: radial-gradient(circle 15px at 15px 30px, #000 99%, transparent 100%) 0 0 / 30px 100% repeat-x;
  mask: radial-gradient(circle 15px at 15px 30px, #000 99%, transparent 100%) 0 0 / 30px 100% repeat-x;
}
@media (max-width: 520px) { .encaje, .encaje::before { height: 22px; } }

/* ==========================================================================
   LÍNEA FINA CON UN CORAZÓN AL MEDIO
   ========================================================================== */
.linea-corazon {
  display: flex;
  align-items: center;
  gap: .85rem;
  color: var(--rosa-300);
  margin-block: clamp(1.4rem, 3vw, 2.2rem);
  pointer-events: none;
}
.linea-corazon::before,
.linea-corazon::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--borde-tiffany) 42%, var(--borde-tiffany) 58%, transparent);
}
.linea-corazon i { font-size: .95rem; }
.linea-corazon--corta { max-width: 240px; }

/* Corazoncito suelto, para acompañar un título */
.corazon-suelto {
  display: inline-block;
  color: var(--rosa-300);
  font-size: .78em;
  vertical-align: middle;
}

/* ==========================================================================
   FORMAS SUAVES DE FONDO
   Superficies grandes y limpias en tiffany y rosa muy claros. Bordes
   definidos, sin desenfoque ni manchas: son formas, no ruido.
   ========================================================================== */
.forma {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
}
.forma--tiffany { background: var(--tiffany-100); }
.forma--rosa    { background: var(--rosa-100); }

/* Media luna: un aro fino en lugar de un círculo lleno */
.forma--aro {
  background: none;
  border: 1.5px solid var(--tiffany-200);
}
.forma--aro-rosa {
  background: none;
  border: 1.5px solid var(--rosa-200);
}

/* ==========================================================================
   CINTA
   La banderola de "GLUTEN FREE" del logo, para destacar un dato corto.
   ========================================================================== */
.cinta {
  display: inline-block;
  position: relative;
  padding: .32rem 1.5rem;
  background: var(--tiffany-300);
  color: var(--choco-700);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .04em;
}
.cinta::before,
.cinta::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 12px;
  background: var(--tiffany-300);
}
.cinta::before { left: -11px;  clip-path: polygon(100% 0, 100% 100%, 0 50%); }
.cinta::after  { right: -11px; clip-path: polygon(0 0, 0 100%, 100% 50%); }