/* Derma Cielo — tokens. ÚNICA fuente de la paleta.
   La importan tanto las plantillas Jinja como el SPA, para que no se separen. */

@font-face { font-family:'Poppins'; font-weight:400; font-style:normal; font-display:swap;
  src:url('/estaticos/fonts/Poppins-400.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-weight:600; font-style:normal; font-display:swap;
  src:url('/estaticos/fonts/Poppins-600.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-weight:700; font-style:normal; font-display:swap;
  src:url('/estaticos/fonts/Poppins-700.woff2') format('woff2'); }
@font-face { font-family:'Great Vibes'; font-weight:400; font-style:normal; font-display:swap;
  src:url('/estaticos/fonts/GreatVibes-400.woff2') format('woff2'); }

:root {
  /* En su diseño el TURQUESA es el color dominante y el rosa el secundario.
     El CSS del app viejo lo tenía al revés. */
  --turquesa:       #0E7C86;
  --turquesa-osc:   #0A5F67;
  --turquesa-medio: #2E9AA3;
  --turquesa-suave: #E6F3F4;

  --rosa:           #E9679F;   /* el flamenco del logo */
  --rosa-suave:     #FDEEF2;
  --rosa-papel:     #FCE9E9;   /* fondo de la tarjeta destacada de promos */
  --salmon:         #F4A09C;   /* las X de la comparativa */
  --verde:          #A8C256;   /* las palomas de la comparativa */

  --crema:          #FFFDFB;
  --tinta:          #2F343A;
  --tinta-suave:    #5A6068;
  --gris:           #8A929B;
  --borde:          #ECE4E7;

  --radio:      18px;
  --radio-chico: 10px;
  --sombra:     0 1px 2px rgba(47,52,58,.04), 0 10px 30px rgba(14,124,134,.08);
  --sombra-alta: 0 20px 50px rgba(14,124,134,.16);

  --e1: .5rem; --e2: 1rem; --e3: 1.5rem; --e4: 2.5rem; --e5: 4rem; --e6: 6rem;
  --ancho: 1140px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}