/* ============================================================
   appht.css — Tema cromático para botones, textos y campos
   Inspirado en la promoción Happy Time (imagen de referencia)
   ============================================================ */

.ht-theme {
  --ht-primary: #9c1cb3;          /* Morado principal */
  --ht-primary-hover: #b728cc;   /* Morado más claro para hover */
  --ht-accent: #e0007a;          /* Fucsia intenso / acento */
  --ht-dark: #2e2e2e;           /* Texto principal */
  --ht-muted: #707070;          /* Texto secundario / placeholder */
  --ht-bg-input: #ffffff;       /* Fondo inputs */
  --ht-border: #cccccc;         /* Bordes neutros */
  --ht-focus: rgba(156, 28, 179, 0.25); /* halo morado */
  --ht-font: 'Helvetica Neue', Arial, sans-serif;
}

/* ===========================
   BACKGROUND PROMOCIÓN HAPPY TIME
   =========================== */

body.ht-theme {
  
  background-image: url("https://happytime.pharmacys.com.ec/mundial2026/assets/img/bgdesktopmundial2.jpg"); /* The image used */
/* Used if the image is unavailable */
    background-color:#ff134d; 
 

/*background: linear-gradient(180deg, hsla(45, 78%, 69%, 1) 90%, hsla(345, 100%, 54%, 1) 100%); */

  background-position: top; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
    
    
  /* Gradiente Happy Time – versión 3 tonos (según nueva referencia) */
 /* background: linear-gradient(180deg,rgba(0, 164, 194, 1) 20%, rgba(255, 255, 255, 05) 25%, rgba(255, 149, 160, 1) 50%, rgba(255, 255, 255, 1) 90%);

  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;*/

    
    
    
  /* Capa base: radial gradient naranja */
  /*background: linear-gradient(162deg, #FFA533 10%, #FF7338 30%, #9B1695 80%);*/
  /*background: radial-gradient(circle at center,
    #ffef53 0%,
    #eb474a 100%*/
  /*  #e66036 0%,
    #f47b45 40%,
    #f9a66d 100%*/

  /* Degradado lineal encima para dar más profundidad */
  /*background-image: linear-gradient(162deg, #FFA533 10%, #FF7338 30%, #9B1695 80%);*/
    /*radial-gradient(circle at center,
      #ffef53 0%,
    #eb474a 100%
    /*#e66036 0%,
      #f47b45 40%,
      #f9a66d 100%
    );*/

    /*linear-gradient(180deg,
      rgba(255, 255, 255, 0.05) 0%,
      rgba(0, 0, 0, 0.05) 100%
    );*/

}

/* OPCIONAL: rayos suaves como en la imagen 
body.ht-theme::before {
  content: "";
  position: fixed;
  inset: 0;
  background: conic-gradient(
    from 0deg,
    rgba(255, 255, 255, 0.08) 0deg,
    transparent 15deg,
    transparent 30deg,
    rgba(255, 255, 255, 0.08) 45deg,
    transparent 60deg
  );
  background-size: cover;
  pointer-events: none;
  z-index: -1;
  opacity: 0.5;
}
*/


/* ===========================
   TEXTOS
   =========================== */
.ht-theme h1,
.ht-theme h2,
.ht-theme h3 {
  font-family: var(--ht-font);
  color: var(--ht-dark);
  letter-spacing: 0.3px;
}

.ht-theme h1 {
  font-size: 2rem;
  font-weight: 800;
  color: var(--ht-primary);
}

.ht-theme h2 {
  font-size: 1.5rem;
  font-weight: 700;
}

.ht-theme p,
.ht-theme label,
.ht-theme small,
.ht-theme .muted {
  font-family: var(--ht-font);
  color: var(--ht-muted);
  font-size: 0.95rem;
}

.ht-theme a {
    color: #ffffff !important;
  /*color: var(--ht-primary);*/
  text-decoration: underline; 
  font-weight: 600;
}

.ht-theme a:hover {
    color: #ffffff !important;
  /*color: var(--ht-primary-hover);*/
  text-decoration: underline; 
}

.politica:link{
  color: #16869c !important;
   text-decoration: underline !important;
  font-weight: 600;
}

.politica:hover{
  color: #ffffff !important;
  text-decoration: underline !important;
}


/* === Links personalizados === */
.link2 {
  color: #9B1695;
}



/* ===========================
   BOTONES
   =========================== */
.ht-theme .btn,
.ht-theme button.btn,
.ht-theme input[type="submit"].btn {
  background: linear-gradient(180deg, #1e9cd7, #0075be);
  color: #fff;
  font-family: var(--ht-font);
  font-weight: 700;
  font-size: 1rem;
  padding: 12px 18px;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.1s ease, filter 0.25s ease;
  box-shadow: 0 4px 10px rgba(156, 28, 179, 0.3);
  text-decoration: none;
}

.ht-theme .btn:hover {
  filter: brightness(1.08) saturate(1.2);
  transform: translateY(-1px);
  text-decoration: none;
}

.ht-theme .btn:active {
  transform: translateY(1px);
  text-decoration: none;
}

/* Botones secundarios (fantasma) */
.ht-theme .btn--ghost {
  background: linear-gradient(180deg, #00c69c, #16869c);
  color: #ffffff important;
  border: 1px solid #16869c;
  box-shadow: none;
  text-decoration: none;
}
.ht-theme .btn--ghost:hover {
  background: rgba(22, 134, 156, 0.09);
  text-decoration: none;
  color: #ffffff important;
}

/* Botón acento (ej. amarillo / promo especial) */
.ht-theme .btn--accent {
  background: linear-gradient(90deg, #ffa500, #ffcc00);
  color: #2e2e2e;
  font-weight: 800;
  border: none;
  text-decoration: none;
}
.ht-theme .btn--accent:hover {
  filter: brightness(1.05);
  text-decoration: none;
}

/* ===========================
   CAMPOS DE TEXTO
   =========================== */
.ht-theme input[type="text"],
.ht-theme input[type="number"],
.ht-theme input[type="tel"],
.ht-theme input[type="email"],
.ht-theme .input,
.ht-theme .cedula-input {
  width: 100%;
  max-width: 300px;
  padding: 12px;
  font-size: 1.1rem;
  font-family: #0075be;
  border: 1.5px solid #0075be;
  border-radius: 12px;
  background-color: #ffffff;
  color: var(--ht-dark);
  text-align: center;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ht-theme ::placeholder {
  color: var(--ht-muted);
}

.ht-theme input:focus,
.ht-theme .input:focus,
.ht-theme .cedula-input:focus {
  outline: none;
  border-color: #0075be;
  box-shadow: 0 0 0 4px var(--ht-focus);
}

/* Input grande estilo H1 (ej. cédula) */
.ht-theme .big-input {
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.05rem;
  text-align: center;
}

/* ===========================
   UTILIDADES
   =========================== */
.ht-theme .text-primary { color: var(--ht-primary); }
.ht-theme .text-accent { color: var(--ht-accent); }
.ht-theme .text-muted { color: var(--ht-muted); }
.ht-theme .align-center { text-align: center; }



/* ===========================
   ANIMACION PRODUCTOS
   =========================== */
   
   /* Definición de la animación de abajo hacia arriba */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px); /* Empieza 30px abajo */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Clase que aplicaremos a las tarjetas */
.product-card {
  opacity: 0; /* Oculto inicialmente para que la animación se note */
  animation: fadeInUp 0.6s ease-out forwards;
}

/* Delays para efecto cascada (opcional pero recomendado) */
.product-card:nth-child(1) { animation-delay: 0.1s; }
.product-card:nth-child(2) { animation-delay: 0.2s; }
.product-card:nth-child(3) { animation-delay: 0.3s; }
.product-card:nth-child(4) { animation-delay: 0.4s; }