/* Animación de pulso */
  @keyframes pulse {
    0% { transform: translateX(-50%) scale(1); }
    50% { transform: translateX(-50%) scale(1.2); }
    100% { transform: translateX(-50%) scale(1); }
}

/* Animación para el cursor parpadeante */
@keyframes blink-caret {
    from, to { border-color: transparent; }
    50% { border-color: white; }
  }
  #typewriter {
    animation: blink-caret 0.75s step-end infinite;
  }

  /* Linea decorativa */
  .content-line{
    display: flex;
    justify-content: flex-end;
  }
  .line{
    margin-top: 5%;
    margin-right: 5%;
    margin-bottom: 2%;
    width: 40%;
    border-bottom: 4px solid var(--white);
  }

    /* Linea decorativa 2 */
    .content-line2{
      display: flex;
      justify-content: center;
    }
    .line2{
      margin-top: 10%;
      margin-bottom: 2%;
      width: 15%;
      border-bottom: 2px solid var(--black);
      transform: rotate(90deg);
    }

    /* form */
    @keyframes moveArrow {
      0% { transform: translate(-50%, -50%) scale(1) translateX(0); }
      50% { transform: translate(-50%, -50%) scale(1) translateX(10px); }
      100% { transform: translate(-50%, -50%) scale(1) translateX(0); }
  }

  /* Animación de las líneas */
  @keyframes draw {
    0% {
      stroke-dashoffset: 100;
    }
    100% {
      stroke-dashoffset: 0;
    }
  }
  
  /* Contenedor principal flotante */
.floating-promo-container {
    position: fixed; /* Lo hace flotar */
    top: 150px;       /* Distancia desde ARRIBA */
    left: 20px;      /* Distancia desde la IZQUIERDA */
    display: flex;   /* Botón y texto en línea */
    align-items: center; 
    z-index: 1000;
    cursor: pointer;
}

/* Estilo del botón (el círculo del 10% OFF) */
.floating-promo-button {
    width: 70px; /* Ajustamos al tamaño del nuevo SVG */
    height: 70px; /* Ajustamos al tamaño del nuevo SVG */
    background-color: white !important; /* El SVG ya tiene el color */
    border-radius: 50px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4); /* Sombra más pronunciada */
    position: relative; 
    overflow: hidden; 
}

.floating-promo-button .promo-icon {
    width: 100%;
    height: 100%;
    /* Animaciones iniciales: Pulso y giro a la DERECHA */
    animation: pulse 2s infinite ease-in-out, rotateRight 8s linear infinite; 
    transform-origin: center center; /* Asegura que gire desde el centro */
}

/* Animación de pulso */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.08); } /* Pulso más notorio */
    100% { transform: scale(1); }
}

/* Animación de giro a la derecha (por defecto) */
@keyframes rotateRight {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Animación de giro a la izquierda (al hacer hover) */
@keyframes rotateLeft {
    from { transform: rotate(0deg); }
    to { transform: rotate(-360deg); }
}

/* Contenedor del texto extendido */
.floating-promo-text-box {
    background-color: var(--white);
    color: var(--blue);
    padding: 10px 15px;
    border-radius: 8px;
    margin-left: 10px; /* Espacio entre el botón y el texto */
    transform: translateX(-100%); /* Inicialmente oculto a la IZQUIERDA del botón */
    opacity: 0;
    max-width: 0;
    white-space: nowrap;
    overflow: hidden;
    transition: transform 0.4s ease-out, opacity 0.4s ease-out, max-width 0.4s ease-out;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
}

.floating-promo-text-box p {
    margin: 0; /* Quita el margen por defecto del párrafo */
    font-size: 0.9em;
}

.promo-action-button {
    background-color: var(--white); /* Botón de acción con color que contraste */
    color: var(--black);
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.85em;
    transition: background-color 0.2s ease;
}

.promo-action-button:hover {
    background-color: #e0e0e0;
}

/* ESTADOS AL HACER HOVER sobre el contenedor principal */
.floating-promo-container:hover .floating-promo-button .promo-icon {
    animation: rotateLeft 1.5s linear infinite; /* Al hacer hover, solo gira a la izquierda (más rápido) */
}

.floating-promo-container:hover .floating-promo-text-box {
    transform: translateX(0); /* Se desliza hacia la derecha para mostrarse */
    opacity: 1;
    max-width: 450px; /* Ajusta este valor si tu texto es más largo */
}