/* ══════════════════════════════════════════════════════════════════
   MOVIMIENTO · animación y microinteracción

   Todo el movimiento del sitio vive aquí, separado del resto para que
   se pueda revisar —o quitar— de una sola vez: basta borrar el <link>
   de las nueve páginas y el sitio vuelve exactamente a como estaba.

   Cuatro reglas que se cumplen sin excepción:

   1. NADA DE LO QUE HAY AQUÍ ES NECESARIO PARA LEER LA PÁGINA. El
      estado en reposo de cada elemento es el estado final: visible y
      en su sitio. Lo que oculta algo momentáneamente es la clase
      .revelar, y esa clase solo la pone JavaScript, solo sobre lo que
      está por debajo del pliegue, y solo si el observador que la va a
      retirar existe. Sin script, no se oculta nada.

   2. FUNCIONA EN TODOS LOS NAVEGADORES. Las apariciones las dispara un
      observador de intersección (`IntersectionObserver`), disponible
      en todo lo que se usa hoy, incluido iOS 12.2 en adelante.
      La versión anterior de este archivo usaba animaciones dirigidas
      por scroll, que son CSS puro y más elegantes, pero que Safari solo
      entiende desde la versión 26 (2025): en un iPhone con iOS 18 la
      web se veía completamente quieta. Se cambió por eso.

   3. QUIEN PIDA MENOS MOVIMIENTO NO VE NINGUNO. La preferencia del
      sistema operativo se comprueba en el CSS y también en el script,
      que ni siquiera llega a ocultar nada. La activa gente con
      trastornos vestibulares, migraña o hipersensibilidad sensorial:
      parte del público de este sitio.

   4. EL RATÓN Y EL DEDO SE TRATAN DISTINTO. Los efectos de :hover van
      dentro de @media (hover: hover). En una pantalla táctil el hover
      se queda pegado después de tocar —la tarjeta se quedaría
      levantada— así que ahí se usa :active, que responde al toque y se
      suelta solo.
   ══════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════
   1 · TRANSICIÓN ENTRE PÁGINAS

   Al pulsar un enlace interno, el contenido se funde en lugar de
   parpadear en blanco. La cabecera lleva nombre propio para que no
   entre en la fusión y se quede fija, que es lo que hace que la
   navegación se sienta continua y no como nueve sitios distintos.

   Es una mejora progresiva: donde no está soportada, la navegación es
   la de siempre. No hay nada que se rompa.
   ══════════════════════════════════════════════════════════ */

@view-transition { navigation: auto; }

.cabecera { view-transition-name: cabecera; }

/* El reinicio de base.css solo alcanza a * , *::before y *::after: estos
   pseudoelementos quedan fuera y hay que neutralizarlos aquí. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation-duration: 1ms !important; }
}


/* ══════════════════════════════════════════════════════════
   2 · APARICIÓN AL ENTRAR EN PANTALLA

   Doce píxeles de recorrido y nada de desplazamiento lateral. Lo que
   se percibe es el ritmo de la página, no el viaje de cada pieza.

   La lista de qué aparece está en js/sitio.js, no aquí: es el script
   quien decide, elemento a elemento, si está por debajo del pliegue y
   por tanto puede ocultarse sin que se vea el parpadeo.
   ══════════════════════════════════════════════════════════ */

.revelar {
  opacity: 0;
  translate: 0 12px;
  transition: opacity 620ms cubic-bezier(.22, .61, .36, 1),
              translate 620ms cubic-bezier(.22, .61, .36, 1);
}

.revelar--visible {
  opacity: 1;
  translate: 0 0;
}

/* ── Escalonado ──────────────────────────────────────────
   Las piezas de una misma fila entran a la vez porque comparten
   altura. Un retardo creciente hace que la fila se dibuje de
   izquierda a derecha, que es como se lee. */

.rejilla-areas > li:nth-child(2)  { transition-delay:  70ms; }
.rejilla-areas > li:nth-child(3)  { transition-delay: 140ms; }
.rejilla-areas > li:nth-child(4)  { transition-delay: 210ms; }
.rejilla-areas > li:nth-child(5)  { transition-delay: 280ms; }

.rejilla-fichas > .ficha:nth-child(2) { transition-delay:  60ms; }
.rejilla-fichas > .ficha:nth-child(3) { transition-delay: 120ms; }
.rejilla-fichas > .ficha:nth-child(4) { transition-delay: 180ms; }
.rejilla-fichas > .ficha:nth-child(5) { transition-delay: 240ms; }
.rejilla-fichas > .ficha:nth-child(6) { transition-delay: 300ms; }

.rejilla-pasos > .paso:nth-child(2) { transition-delay:  80ms; }
.rejilla-pasos > .paso:nth-child(3) { transition-delay: 160ms; }
.rejilla-pasos > .paso:nth-child(4) { transition-delay: 240ms; }
.rejilla-pasos > .paso:nth-child(5) { transition-delay: 320ms; }

.tarifas > .tarifa:nth-child(2) { transition-delay:  80ms; }
.tarifas > .tarifa:nth-child(3) { transition-delay: 160ms; }

.canales li:nth-child(2) a { transition-delay:  70ms; }
.canales li:nth-child(3) a { transition-delay: 140ms; }

.lista-filete > li:nth-child(2) { transition-delay:  40ms; }
.lista-filete > li:nth-child(3) { transition-delay:  80ms; }
.lista-filete > li:nth-child(4) { transition-delay: 120ms; }
.lista-filete > li:nth-child(5) { transition-delay: 160ms; }

/* ── Escalonado de los componentes de servicio ──────────
   El itinerario y el ciclo se escalonan más marcadamente que una
   retícula normal: ahí el orden es el contenido, no un adorno. */

.itinerario__hito:nth-child(2) { transition-delay:  90ms; }
.itinerario__hito:nth-child(3) { transition-delay: 180ms; }
.itinerario__hito:nth-child(4) { transition-delay: 270ms; }
.itinerario__hito:nth-child(5) { transition-delay: 360ms; }

.ciclo__fase:nth-child(2) { transition-delay:  90ms; }
.ciclo__fase:nth-child(3) { transition-delay: 180ms; }
.ciclo__fase:nth-child(4) { transition-delay: 270ms; }
.ciclo__fase:nth-child(5) { transition-delay: 360ms; }

.cifras li:nth-child(2) { transition-delay:  90ms; }
.cifras li:nth-child(3) { transition-delay: 180ms; }

.contraste__lado:nth-child(2) { transition-delay: 120ms; }

.temas > .tema:nth-child(2) { transition-delay:  50ms; }
.temas > .tema:nth-child(3) { transition-delay: 100ms; }
.temas > .tema:nth-child(4) { transition-delay: 150ms; }
.temas > .tema:nth-child(5) { transition-delay: 200ms; }
.temas > .tema:nth-child(6) { transition-delay: 250ms; }
.temas > .tema:nth-child(7) { transition-delay: 300ms; }
.temas > .tema:nth-child(8) { transition-delay: 350ms; }
.temas > .tema:nth-child(9) { transition-delay: 400ms; }

.formatos > .formato:nth-child(2) { transition-delay: 110ms; }

/* El abanico se abre de dentro hacia fuera, no de izquierda a derecha:
   es lo que hace legible que las cinco salen del mismo sitio. */
.disonancia__respuesta:nth-child(1) { transition-delay: 620ms; }
.disonancia__respuesta:nth-child(2) { transition-delay: 540ms; }
.disonancia__respuesta:nth-child(3) { transition-delay: 460ms; }
.disonancia__respuesta:nth-child(4) { transition-delay: 540ms; }
.disonancia__respuesta:nth-child(5) { transition-delay: 620ms; }
.disonancia__moraleja { transition-delay: 820ms; }

/* ── El conector, que se traza ───────────────────────────
   Primero baja el tallo desde el origen, luego se extiende el raíl, y
   solo después bajan las cinco derivaciones y aparecen las tarjetas.
   El orden importa: es lo que hace ver que las cinco respuestas salen
   de la misma conducta.

   El estado recogido (scale 0) se declara sobre .revelar, que solo pone
   el script: sin JavaScript el conector se dibuja entero y quieto. */

.disonancia__conector.revelar::before {
  transform: scaleY(0);
  transition: transform 340ms cubic-bezier(.22, .61, .36, 1) 60ms;
}
.disonancia__conector.revelar--visible::before { transform: scaleY(1); }

.disonancia__conector.revelar::after {
  transform: scaleX(0);
  transition: transform 560ms cubic-bezier(.22, .61, .36, 1) 340ms;
}
.disonancia__conector.revelar--visible::after { transform: scaleX(1); }

@media (min-width: 62em) {
  .disonancia__respuesta.revelar::before {
    transform: scaleY(0);
    transition: transform 300ms cubic-bezier(.22, .61, .36, 1);
    transition-delay: inherit;
  }
  .disonancia__respuesta.revelar--visible::before { transform: scaleY(1); }
}

@media (max-width: 61.99em) {
  .disonancia__respuesta.revelar::before {
    transform: scaleX(0);
    transition: transform 300ms cubic-bezier(.22, .61, .36, 1);
    transition-delay: inherit;
  }
  .disonancia__respuesta.revelar--visible::before { transform: scaleX(1); }
}


/* ══════════════════════════════════════════════════════════
   LAS ESCENAS DE SERVICIO, QUE SE DIBUJAN SOLAS

   Cada ilustración se traza como si alguien la estuviera dibujando: los
   trazos se descubren en orden y los nodos aparecen después, sobre las
   líneas ya hechas. El orden no es decorativo — sigue la lectura del
   diagrama, así que se entiende mientras se dibuja.

   Todos los elementos llevan pathLength="1" en el marcado, o sea que su
   recorrido está normalizado a 1 sea cual sea su longitud real. Por eso
   basta un stroke-dasharray de 1 para cualquiera de ellos.

   El stroke-dasharray se declara DENTRO de la consulta de movimiento
   reducido a propósito: fuera dejaría el dibujo cortado a medias para
   quien no ve la animación.
   ══════════════════════════════════════════════════════════ */

@keyframes trazar-escena {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}

@keyframes brotar-nodo {
  from { opacity: 0; scale: 0.2; }
  to   { opacity: 1; scale: 1; }
}

@keyframes asomar-etiqueta {
  from { opacity: 0; translate: 0 4px; }
  to   { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: no-preference) {

  .escena :is(path, circle, line, polyline) {
    stroke-dasharray: 1;
    animation: trazar-escena 900ms cubic-bezier(.33, 0, .2, 1) both;
  }

  /* Los nodos macizos no se pueden «trazar»: brotan. Se escalan desde su
     propio centro, que en SVG exige transform-box: fill-box. */
  .escena .escena__nodo {
    stroke-dasharray: none;
    transform-box: fill-box;
    transform-origin: center;
    animation: brotar-nodo 480ms cubic-bezier(.34, 1.4, .64, 1) both;
  }

  .escena .escena__etiqueta {
    animation: asomar-etiqueta 500ms ease-out both;
  }

  /* Escalonado: 110 ms por elemento, hasta catorce. El área de contexto
     va la primera porque es el escenario donde ocurre todo lo demás. */
  .escena > *:nth-child(1)  { animation-delay:  260ms; }
  .escena > *:nth-child(2)  { animation-delay:  370ms; }
  .escena > *:nth-child(3)  { animation-delay:  480ms; }
  .escena > *:nth-child(4)  { animation-delay:  590ms; }
  .escena > *:nth-child(5)  { animation-delay:  700ms; }
  .escena > *:nth-child(6)  { animation-delay:  810ms; }
  .escena > *:nth-child(7)  { animation-delay:  920ms; }
  .escena > *:nth-child(8)  { animation-delay: 1030ms; }
  .escena > *:nth-child(9)  { animation-delay: 1140ms; }
  .escena > *:nth-child(10) { animation-delay: 1250ms; }
  .escena > *:nth-child(11) { animation-delay: 1360ms; }
  .escena > *:nth-child(12) { animation-delay: 1470ms; }
  .escena > *:nth-child(13) { animation-delay: 1580ms; }
  .escena > *:nth-child(14) { animation-delay: 1690ms; }
}


/* ══════════════════════════════════════════════════════════
   3 · EL DIAGRAMA, COMO SECUENCIA

   Situación → Conducta → Consecuencia → ¿Por qué se repite?

   Este bloque ya ES una secuencia causal, así que animarlo por orden
   no es decorarlo: el movimiento dice lo mismo que el texto. Es el
   único sitio de la portada donde la animación explica algo, y por eso
   el escalonado aquí es más marcado que en el resto.

   El desplazamiento usa `translate`, que es una propiedad aparte de
   `transform`. Importa: en móvil las flechas llevan su propio
   rotate(90deg) mediante `transform`, y si esto lo usara también, una
   cosa se comería a la otra.
   ══════════════════════════════════════════════════════════ */

.diagrama > *:nth-child(2) { transition-delay:  90ms; }
.diagrama > *:nth-child(3) { transition-delay: 180ms; }
.diagrama > *:nth-child(4) { transition-delay: 270ms; }
.diagrama > *:nth-child(5) { transition-delay: 360ms; }
.diagrama > *:nth-child(6) { transition-delay: 450ms; }
.diagrama > *:nth-child(7) { transition-delay: 540ms; }

/* Las flechas solo se atenúan; no se desplazan. Son pequeñas y con
   recorrido parecerían saltar. */
.diagrama__flecha.revelar { translate: none; }


/* ══════════════════════════════════════════════════════════
   4 · LOS CINCO PASOS, CON LÍNEA QUE SE TRAZA

   Cada paso estrena un filete de acento sobre su borde superior, que
   se dibuja de izquierda a derecha cuando la tarjeta entra. Es el
   mismo recurso que ya usan las tarjetas de área (la franja maciza de
   4 px), no un elemento visual nuevo.

   El filete se dibuja con ::before y position:absolute, así que no
   ocupa espacio y la retícula no se mueve ni un píxel.
   ══════════════════════════════════════════════════════════ */

.paso { position: relative; }

.paso::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: calc(100% + 2px);
  height: 2px;
  background: var(--acento);
  transform-origin: left center;
  /* En reposo, trazado entero: sin script, el filete simplemente está. */
}

.paso.revelar::before {
  transform: scaleX(0);
  transition: transform 700ms cubic-bezier(.22, .61, .36, 1) 120ms;
}

.paso.revelar--visible::before { transform: scaleX(1); }


/* ══════════════════════════════════════════════════════════
   5 · CABECERA QUE SE ASIENTA AL BAJAR

   Al despegarse de lo alto de la página, el fondo se vuelve más opaco
   y aparece una sombra muy tenue, de modo que la barra fija se separa
   del contenido que pasa por debajo.

   Lo mueve el mismo observador de intersección, sobre un testigo de un
   píxel al principio del documento. Si el script no llega a
   ejecutarse, la cabecera se queda como está hoy: no esconde nada.

   No se toca la altura a propósito: animar la altura de una barra fija
   obliga al navegador a recalcular la página en cada fotograma. El
   monograma sí encoge, porque escalar no recalcula nada.
   ══════════════════════════════════════════════════════════ */

/* Testigo que inserta js/sitio.js. No ocupa sitio ni recibe
   pulsaciones: solo marca dónde empieza el documento. */
.testigo-cabecera {
  position: absolute;
  top: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.cabecera {
  transition: background-color 220ms ease, box-shadow 220ms ease;
}

.cabecera--asentada {
  background-color: color-mix(in srgb, var(--beige-base) 98%, transparent);
  box-shadow: 0 1px 16px color-mix(in srgb, var(--tinta) 9%, transparent);
}

.marca .monograma { transition: scale 220ms ease; }

.cabecera--asentada .monograma { scale: 0.9; }


/* ══════════════════════════════════════════════════════════
   6 · ENTRADA DE LA PORTADA

   La columna de texto entra escalonada al cargar. Solo se desplaza:
   no se atenúa. Un titular que empieza en opacidad 0 retrasa la
   métrica de «mayor elemento pintado» con la que Google mide la
   velocidad percibida, y este es justo el bloque que la define.

   Esto es una animación CSS normal, con duración propia: funciona en
   todos los navegadores sin depender de nada.

   El retrato entra escalando de 1.04 a 1. El marco necesita recortar,
   porque durante la animación la imagen es un 4 % más grande que él.
   ══════════════════════════════════════════════════════════ */

.hero__retrato { overflow: hidden; }

@keyframes entrar-portada {
  from { translate: 0 16px; }
  to   { translate: 0 0; }
}

@keyframes entrar-retrato {
  from { scale: 1.04; }
  to   { scale: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  .seccion--hero .antetitulo,
  .seccion--hero h1,
  .seccion--hero .hero__entrada,
  .seccion--hero .acreditacion,
  .seccion--hero .grupo-botones {
    animation: entrar-portada 640ms cubic-bezier(.22, .61, .36, 1) both;
  }

  .seccion--hero h1             { animation-delay:  70ms; }
  .seccion--hero .hero__entrada { animation-delay: 140ms; }
  .seccion--hero .acreditacion  { animation-delay: 210ms; }
  .seccion--hero .grupo-botones { animation-delay: 280ms; }

  .hero__retrato img {
    animation: entrar-retrato 900ms cubic-bezier(.22, .61, .36, 1) both;
  }
}


/* ══════════════════════════════════════════════════════════
   7 · DESPLIEGUES: ACORDEÓN Y MENÚ MÓVIL

   Los dos pasan de display:none a visible, y una animación CSS se
   reinicia sola en ese salto. No hace falta tocar el script.

   Es movimiento útil, no decorativo: al desplegarse hacia abajo desde
   su encabezado, la respuesta queda visiblemente atada a su pregunta,
   y el menú, al botón que lo abrió. En móvil, donde no hay ratón ni
   estados intermedios, esto es casi toda la retroalimentación que
   recibe quien usa la página.
   ══════════════════════════════════════════════════════════ */

@keyframes desplegar {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .acordeon__panel:not([hidden]) {
    animation: desplegar 240ms cubic-bezier(.22, .61, .36, 1);
  }

  .js-menu .navegacion[data-abierto="true"] {
    animation: desplegar 220ms cubic-bezier(.22, .61, .36, 1);
  }
}


/* ══════════════════════════════════════════════════════════
   8 · MICROINTERACCIÓN

   Tres capas separadas a propósito:

     @media (hover: hover)  ratón — se puede levantar la tarjeta
     :focus-within/-visible teclado — mismo estado, siempre activo
     @media (hover: none)   dedo — :active, que se suelta solo

   Sin esa separación, en el móvil la tarjeta se queda levantada
   después de tocarla, porque el navegador mantiene el :hover hasta que
   tocas otra cosa. Es uno de los defectos más comunes de las webs
   hechas pensando solo en el escritorio.

   Se mueven transform y scale, que el navegador resuelve sin volver a
   componer la página. Ninguna medida cambia, así que nada se descoloca.
   ══════════════════════════════════════════════════════════ */

/* ── Tarjetas de área ── */

.tarjeta-area {
  transition: border-color var(--transicion),
              transform var(--transicion),
              box-shadow var(--transicion);
}

/* La franja crece hacia abajo desde su borde superior. Al ser scale y
   no height, los 4 px que ocupa en la retícula no cambian. */
.tarjeta-area__color {
  transform-origin: top center;
  transition: scale var(--transicion);
}

.tarjeta-area__cta { transition: translate var(--transicion); }

@media (hover: hover) {
  .tarjeta-area:hover {
    border-color: var(--acento);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--tinta) 7%, transparent);
  }
  .tarjeta-area:hover .tarjeta-area__color { scale: 1 1.75; }
  .tarjeta-area:hover .tarjeta-area__cta { translate: 3px 0; }
}

/* Teclado: el mismo estado. La tarjeta entera es pulsable por el
   ::after del título, pero hasta ahora solo reaccionaba al ratón. */
.tarjeta-area:focus-within {
  border-color: var(--acento);
  transform: translateY(-3px);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--tinta) 7%, transparent);
}
.tarjeta-area:focus-within .tarjeta-area__color { scale: 1 1.75; }
.tarjeta-area:focus-within .tarjeta-area__cta { translate: 3px 0; }

/* Dedo: se hunde al tocar y vuelve al soltar. Confirma que el toque
   ha entrado, que en una pantalla táctil no es evidente. */
@media (hover: none) {
  .tarjeta-area:active {
    border-color: var(--acento);
    transform: scale(0.985);
  }
  .tarjeta-area:active .tarjeta-area__color { scale: 1 1.75; }
}


/* ── Botones ── */

.boton {
  transition: background-color var(--transicion),
              border-color var(--transicion),
              transform var(--transicion);
}

@media (hover: hover) {
  .boton--principal:hover { transform: translateY(-2px); }
  .boton--texto:hover { translate: 3px 0; }
}

.boton--principal:focus-visible { transform: translateY(-2px); }
.boton--texto { transition: translate var(--transicion); }
.boton--texto:focus-visible { translate: 3px 0; }

.boton:active { transform: scale(0.97); }


/* ── Canales de contacto y enlaces a otras áreas ── */

.canales a {
  transition: border-color var(--transicion),
              transform var(--transicion),
              box-shadow var(--transicion);
}

@media (hover: hover) {
  .canales a:hover {
    border-color: var(--acento);
    transform: translateY(-2px);
    box-shadow: 0 5px 16px color-mix(in srgb, var(--tinta) 6%, transparent);
  }
}

.canales a:focus-visible {
  border-color: var(--acento);
  transform: translateY(-2px);
}

.canales a:active { transform: scale(0.99); }

.otra-area { transition: transform var(--transicion), box-shadow var(--transicion); }

@media (hover: hover) {
  .otra-area:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 16px color-mix(in srgb, var(--tinta) 10%, transparent);
  }
}

.otra-area:focus-visible { transform: translateY(-2px); }
.otra-area:active { transform: scale(0.99); }


/* ── Acordeón ── */

.acordeon__disparador { transition: color var(--transicion); }

/* El signo ya giraba 45° al abrirse. Se le añade una curva de salida
   más suave y una reacción al apuntarlo. */
.acordeon__signo {
  transition: transform 220ms cubic-bezier(.22, .61, .36, 1),
              scale var(--transicion);
}

@media (hover: hover) {
  .acordeon__disparador:hover .acordeon__signo { scale: 1.15; }
}

.acordeon__disparador:focus-visible .acordeon__signo { scale: 1.15; }


/* ── Campos del formulario ── */

.campo input,
.campo select,
.campo textarea {
  transition: border-color var(--transicion), background-color var(--transicion);
}


/* ══════════════════════════════════════════════════════════
   9 · RED DE SEGURIDAD

   base.css ya reduce duraciones globalmente cuando se pide menos
   movimiento. Esto es la segunda vuelta de llave: deja quieto y
   visible todo lo que este archivo hubiera movido, incluidas las
   transiciones, que el reinicio de base.css acorta pero no anula.

   El script hace además una tercera comprobación por su cuenta: si la
   preferencia está activa, ni siquiera llega a poner la clase .revelar.
   ══════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .revelar,
  .revelar--visible {
    opacity: 1 !important;
    translate: none !important;
    transition: none !important;
  }

  .paso.revelar::before,
  .paso.revelar--visible::before {
    transform: scaleX(1) !important;
    transition: none !important;
  }

  .tarjeta-area,
  .tarjeta-area__color,
  .tarjeta-area__cta,
  .boton,
  .canales a,
  .otra-area,
  .marca .monograma,
  .hero__retrato img,
  .seccion--hero .antetitulo,
  .seccion--hero h1,
  .seccion--hero .hero__entrada,
  .seccion--hero .acreditacion,
  .seccion--hero .grupo-botones {
    animation-name: none !important;
    transform: none !important;
    translate: none !important;
    scale: none !important;
  }

  /* El giro del signo del acordeón se conserva: no es decoración, es
     el indicador de si el panel está abierto o cerrado. */
  .acordeon__disparador[aria-expanded="true"] .acordeon__signo {
    transform: rotate(45deg) !important;
  }
}