/* ======================================================================
   svg.css — Tratamiento de íconos SVG/WEBP usados como <img>
   ====================================================================== */

/* corazón overlay y flecha hero en rosa oscuro */
.heart-icon,
.hero .arrow{
  filter:invert(26%) sepia(10%) saturate(762%) hue-rotate(303deg) brightness(93%) contrast(87%);
}

/* Logo Clara (SVG principal del hero) */
.clara-svg {
  filter: invert(26%) sepia(10%) saturate(762%) hue-rotate(303deg) brightness(93%) contrast(87%);
}

/* ============================================================
   Separadores de texto: tinte rosa oscuro
   ============================================================ */
.separator-block img{
  /* mismo tinte rosa oscuro que usamos en corazón, flecha y "Clara" */
  filter: invert(26%) sepia(10%) saturate(762%) hue-rotate(303deg)
          brightness(93%) contrast(87%);
}


/* ============================================================
    Separador vertical del countdown: tinte rosa oscuro
   ============================================================ */
.countdown-grid .sep-v img{
  filter: invert(26%) sepia(10%) saturate(762%) hue-rotate(303deg)
          brightness(93%) contrast(87%);
}