/* ============================================================
   Ajustes propios encima del CSS de ClickFunnels (lander.css)
   ============================================================
   1. Arranque sin parpadeo de {{LLAVES}}
   2. Animaciones (data-trigger / data-timed)
   3. Errores y avisos de formulario
   4. Testimonios (tarjetas en HTML, sustituyen a las imágenes en inglés)
   5. Página de pedido: caja de pago en Hotmart
*/

/* 1. Mientras embudo.js cambia las {{LLAVES}}, la página no se ve. Si el JS fallara,
      a los 1,5 s se muestra igual. */
html.cargando body { animation: mostrar-igual 0s linear 1.5s forwards; visibility: hidden; }
@keyframes mostrar-igual { to { visibility: visible; } }

/* 2. Animaciones */
.anim-fade { opacity: 0; transition: opacity .6s ease; }
.anim-scale { opacity: 0; transform: scale(.85); transition: opacity .6s ease, transform .6s ease; }
.anim-dentro { opacity: 1 !important; transform: none !important; }
#progress-text { transition: opacity .25s ease; }

/* 3. Errores y avisos */
.campo-error { border-color: #e0245e !important; box-shadow: 0 0 0 2px rgba(224, 36, 94, .25) !important; }
.casilla-error { color: #e0245e !important; }
.casilla-error input[type=checkbox] { outline: 2px solid #e0245e; outline-offset: 1px; }
.aviso-embudo {
  display: none; margin: 10px auto 0; max-width: 520px; padding: 10px 14px; border-radius: 6px;
  background: #ffdddd; color: #7a0019; font: 600 14px/1.4 Lora, Georgia, serif; text-align: center;
}
.aviso-config {
  position: sticky; top: 0; z-index: 99999; padding: 10px 16px; background: #fff3c4; color: #5a4300;
  border-bottom: 2px solid #e6b800; font: 14px/1.4 -apple-system, Helvetica, Arial, sans-serif; text-align: center;
}
.aviso-config code { background: #fff; padding: 1px 5px; border-radius: 4px; }

/* 4. Testimonios: misma composición que las imágenes del original (comillas negras,
      marco redondeado abierto, 5 estrellas, texto en Lora con negritas). */
.testis { background: #fff; padding: 18px 6px 6px; max-width: 640px; margin: 0 auto; }
.testi {
  position: relative; border: 5px solid #111; border-radius: 22px; padding: 22px 26px 26px;
  margin: 34px 22px 46px; text-align: center; font-family: Lora, Georgia, serif; color: #222;
  font-size: 18px; line-height: 1.55;
}
.testi .autora { padding: 0 28px; }
.testi::before, .testi::after {
  position: absolute; font: 700 110px/1 Georgia, 'Times New Roman', serif; color: #111;
  background: #fff; padding: 0 6px; height: 64px; overflow: visible;
}
.testi::before { content: '\201D'; top: -44px; left: -26px; }
.testi::after { content: '\201C'; bottom: -38px; right: -18px; line-height: .9; }
.testi .estrellas { color: #f7c51e; font-size: 30px; letter-spacing: 2px; line-height: 1; margin-bottom: 10px; }
.testi p { margin: 0; font-style: italic; }
.testi p b { font-style: normal; font-weight: 700; }
.testi .autora { margin-top: 14px; font-style: normal; font-size: 17px; }
.testi.chica { font-size: 15px; padding: 16px 18px 20px; }
.testi.chica .estrellas { font-size: 24px; }
@media (max-width: 600px) {
  .testi { font-size: 16px; margin: 30px 14px 40px; padding: 18px 30px 34px; }
  .testi.chica { padding: 16px 28px 32px; }
  .testi::before, .testi::after { font-size: 84px; }
  .testi::before { top: -34px; left: -18px; }
  .testi::after { bottom: -30px; right: -12px; }
}

/* 5. Pedido: la caja de tarjeta del original se cambia por el aviso de pago en Hotmart */
.pago-hotmart {
  border: 1px solid #ccc; border-radius: 6px; background: #fff; padding: 12px 14px; margin: 6px 0 10px;
  font: 14px/1.5 Lora, Georgia, serif; color: #333;
}
.pago-hotmart .fila { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.pago-hotmart .fila i { color: #3b9a3b; width: 16px; text-align: center; }
.pago-hotmart small { display: block; color: #666; font-size: 12px; margin-top: 4px; }
.fila-total td { font-weight: 700; padding-top: 6px !important; }
.fila-resumen td, .fila-total td { font-family: Lora, Georgia, serif; }


/* Fondo oscuro del popup (lo posicionaba lander.js) */
.modalBackdropWrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 221; opacity: 1 !important; }

/* Errores como en el original: ClickFunnels marca el primer fallo del popup con borde rojo de 3 px. */
.de.cf-error { border: 3px solid rgb(185, 21, 23) !important; }
input.cf-error { border: 3px solid rgb(185, 21, 23) !important; }
/* ActiveCampaign (cuestionario): mismo borde que su CSS para selects y fecha */
#_form_13_ select._has_error, #_form_13_ input[type="date"]._has_error { border: #F37C7B 1px solid; }