@font-face {
    font-family: "P-Regular";
    src: url("/assets/fonts/Poppins-Regular.ttf");
}
@font-face {
    font-family: "P-Light";
    src: url("/assets/fonts/Poppins-Light.ttf");
}
@font-face {
    font-family: "P-Bold";
    src: url("/assets/fonts/Poppins-Bold.ttf");
}
@font-face {
    font-family: "P-Medium";
    src: url("/assets/fonts/Poppins-Medium.ttf");
}
@font-face {
    font-family: "P-SemiBold";
    src: url("/assets/fonts/Poppins-SemiBold.ttf");
}

body{
    padding:0px;
    margin:0px;
    font-family: P-Regular;
}
.navbar {
    padding: 10px 50px;
}
.navbar-brand img {
    width: 40px;
    margin-right: 10px;
}
.nav-bg{
    background-color: rgba(255,255,255,0.95);
}
.navbar-nav .nav-link {
    color: #333 !important;
    font-weight: 500;
    margin-right: 20px;
}
.navbar-nav .nav-link:hover {
    color: #c41e3a !important;
}
nav .btn-create {
    background-color: #c41e3a;
    text-decoration: none;
    color: white;
    font-weight: bold;
    padding: 0.5rem 1rem;
    font-size:12px;
    border-radius: 99999px;
    border:none;
}
.btn-create {
    background-color: #c41e3a;
    text-decoration: none;
    color: white;
    font-weight: bold;
    padding: 1rem 2rem;
    transition: 0.3s;
    border-radius: 99999px;
    border:none;
}
.btn-create:hover {
    background-color: #c82333;
}
.btn-create i{
    margin-right:10px;
}
.star{
    color:rgb(255,215,0);
}
.star p{
    color:white;
    font-size:12px;
    margin-left:10px;
}

.btn-show {
    background-color: white;
    text-decoration: none;
    color: #165b33;
    font-weight: bold;
    padding: 1rem 2rem;
    border-radius: 99999px;
    transition: 0.3s;
}
.btn-show:hover {
    background-color: rgba(255, 255, 255, 0.95);
}
.btn-show i{
    margin-right:10px;
}

header{
    min-height: 90vh;
    background-color: #165b33;
    padding-bottom:20px;
    padding-top:90px;
}
header h1{
    font-family: P-Bold;
    color:white;
    font-size:50px;
    line-height:50px;
}
.header-subtitle{
    color:#c0e5cc;
}
header .box{
    background-color: rgb(255 ,255 ,255,0.1);
    padding:2rem;
    border-radius: 1.5rem;
    box-shadow: 1px 1px 5px rgba(0,0,0,0.3);
    position: relative;
}

header .imgbox{
    height: 100%;
    border-radius: 1.5rem;
    height: 50vh;
    overflow: hidden;
    object-fit: cover;
}

header img{
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
}
.navbar-brand{
    width: 200px !important;
}
.navbar-brand img{
    width: 100%;
}
header .badges-box{
    width: 100%;
    display: flex;
    margin-top:20px;
    gap:10px;
    justify-content: center;
    align-items: center;
}

.feature-badge{
    background-color:rgba(255,255,255,0.2);
    border-radius: 99999px;
    color:white;
    padding-top:0.5rem;
    padding-bottom:0.5rem;
    padding-right: 1rem;
    padding-left:1rem;
    font-size:13px;
    font-family: P-Medium;
}
.feature-badge i{
    color:rgb(255,215,0);
    margin-right:10px;
}
.example-section{
    background-color: white;
    padding-bottom:20px;
}
/* Estilo del botón */
.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #c41e3a;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 9999px;
    cursor: pointer;
    font-size: 16px;
}

/* Estilo del contenedor de video (para posición relativa) */
.video-container {
    position: relative;
    width: 100%;
}
.video-container video{
    max-height:400px;
    object-fit:cover;
    border-radius: 2rem;
    box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
}



.title{
    font-family: P-Bold;
    color:#165b33;
}
.subtitle{
    font-family: P-Regular;
    color:rgb(75, 85, 99);
    font-size:14px;
    margin-bottom:20px;
}
.proceso-section{
    background: linear-gradient(to bottom, #f0fdf4, #fff);
    min-height: 80vh;
    padding-bottom:30px;
}
.paso-box{
    background-color:white;
    border-radius: 1rem;
    padding:2rem;
    box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.317);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap:10px;
    text-align: center;
}
.rounded-icon{
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(196 30 58 / 0.1);
    color:#c41e3a;
    border-radius: 9999px;
    font-size:25px;
}
.paso-title{
    font-family: P-Bold;
    color:#165b33;
    font-size: 20px;
}

.character-box{
    display: flex;
    flex-direction: column;
    padding: 2rem;
    border-width: 4px;
    border-radius: 1.5rem;
    cursor: pointer;
    transition: 0.3s;
}
.character-box img{
    object-fit: cover;
    width: 100%;
    border-radius: 1rem;
    max-height: 15rem;
}
.character-box p{
    color:rgb(55, 65, 81);
    font-size:14px
}
.character-box h4{
    margin-top:10px;
}

.character-box .description{
    color:rgb(75, 85, 99);
    font-size:12px
}

.red-box{
border-color:rgb(196, 30, 58);
background: linear-gradient(to bottom right,#fef2f2,#fee2e2);
}
.red-box h4{
    color:rgb(196, 30, 58);
    font-family: P-Bold;
}
.red-box .description i{
    color:rgb(196, 30, 58);
}
.red-box:hover{
    box-shadow:1px 1px 10px rgb(196, 30, 58);
}

.purple-box{
border-color:rgb(126, 34, 206);
background: linear-gradient(to bottom right,#faf5ff,#f3e8ff);
}
.purple-box h4{
    color:rgb(126, 34, 206);
    font-family: P-Bold;
}
.purple-box .description i{
    color:rgb(126, 34, 206);
}
.purple-box:hover{
    box-shadow:1px 1px 10px rgb(126, 34, 206);
}

.familias-section{
    background: linear-gradient(to bottom, #f0fdf4, #fff);
    min-height: 80vh;
    padding-bottom:30px;
}
.review-box{
    padding:2rem;
    border-radius: 1rem;
    background-color:rgb(240, 253, 244);
    box-shadow: 1px 1px 5px rgba(12, 71, 27, 0.7);
    margin-top:20px;
}
.review-header{
    display: flex;
    gap:15px;
}
.review-header img{
    border-radius: 50%;
    object-fit: cover;
    width: 3rem;
    height: 3rem;
}
.review-name{
    display: flex;
    flex-direction: column;
}
.review-name i {
    color:rgb(255,215,0);
    font-size:12px;
}
.review-box p{
    margin-top:15px;
    color: rgb(75, 85, 99);
    font-size:12px;
}
.precios-section{
    background-color: #165b33;
    padding-bottom:20px;
}
.precios-section .title{
    font-family: P-Bold;
    color:white;
}
.precios-section .subtitle{
    font-family: P-Regular;
    color:white;
    font-size:14px;
    margin-bottom:20px;
}
.pricing-box{
    border-radius: 1.5rem;
    padding:2rem;
    background-color:white;
}
.pricing-box .price{
    color:#c82333;
    font-family: P-Bold;
    font-size:45px;
    margin-bottom:0px;
}
.pricing-box .price-subtitle{
    margin-top:-10px;
    margin:0px;
    padding:0px;
    font-size:14px;
}
.pricing-box .list{
    display: flex;
    flex-direction: column;
    margin-top:20px;
    gap:10px;
}
.pricing-box .list .list-item{
    display: flex;
    gap:5px;
    justify-content: center;
    align-items: center;
    color:#333;
    font-size:14px;
}
.pricing-box .list .list-item i{
    color:#165b33;
    font-size:16px;
}
.pricing-box small{
    color:#333;
    font-size:11px;
}

.character-options {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.character-options label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 45%;
    padding: 20px;
    border: 2px solid #e5e7eb; /* Borde gris claro por defecto */
    border-radius: 15px;
    background-color: white;
    cursor: pointer;
    transition: border 0.3s ease, background-color 0.3s ease;
}

.character-options label:hover {
    background-color: #f3f4f6; /* Fondo suave al pasar el cursor */
}

.character-options input[type="radio"] {
    display: none; /* Ocultar el radio button real */
}

/* Borde rojo para Santa Claus */
.character-options input[type="radio"]#santa:checked + label {
    border: 2px solid #c41e3a; /* Rojo para Santa Claus */
}

.character-options input[type="radio"]#santa:checked + label .fa-snowman {
    color: #c41e3a; /* Cambiar icono a rojo para Santa Claus */
}

.character-options input[type="radio"]#santa:checked + label .description {
    color: #c41e3a; /* Descripción roja para Santa Claus */
}

/* Borde lila para Reyes Magos */
.character-options input[type="radio"]#kings:checked + label {
    border: 2px solid #9b4dca; /* Lila para Reyes Magos */
}

.character-options input[type="radio"]#kings:checked + label .fa-crown {
    color: #9b4dca; /* Cambiar icono a lila para Reyes Magos */
}

.character-options input[type="radio"]#kings:checked + label .description {
    color: #9b4dca; /* Descripción lila para Reyes Magos */
}

.character-options .description {
    font-size: 14px;
    color: #333; /* Texto en color oscuro */
    text-align: center;
}

.character-options .fa-snowman,
.character-options .fa-crown {
    font-size: 24px;
    margin-bottom: 10px;
    transition: color 0.3s ease;
}


.char-count {
    font-size: 14px;
    color: #333;
    margin-top: 5px;
    font-weight: 500;
}

#char-count {
    color: #c41e3a; /* Rojo para el contador */
}
.form-container{
    padding:3rem;
    background:linear-gradient(to bottom right,#f0fdf4, #fef2f2);
    margin-top:20px;
    margin-bottom:20px;
    border-radius: 1.5rem;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
}

.input-field{
    display: flex;
    flex-direction: column;
    margin-bottom:20px;
}

.input-field input{
    padding:0.5rem;
    border:1px solid rgb(229 231 235);
    border-radius: 0.75rem;
}
.input-field input:focus{
    outline: 2px solid #c41e3a;
}
.input-field textarea{
    padding:0.5rem;
    border:1px solid rgb(229 231 235);
    border-radius: 0.75rem;
}
.input-field textarea:focus{
    outline: 2px solid #c41e3a;
}
.input-field label{
    color:#165b33;
    font-family: P-Medium;
}
.total {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e5e7eb; /* Línea inferior gris claro */
}
.payment-secured {
    margin-top: 30px;
    text-align: center;
    font-size: 14px;
    color: #6b7280; /* Gris suave */
}

.payment-icons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 10px;
}

.payment-icons img {
    height: 30px; /* Ajusta el tamaño de los íconos */
    width: auto;
}

.payment-secured p {
    margin-top: 5px;
    font-size: 12px;
    color: #9ca3af; /* Gris más claro */
}

.tyc{
    font-family: P-Light;
    font-size:11px;
    text-align: center;
}
.tyc a{
    color:#165b33;
}

.label {
    font-weight: 500;
    color: #333; /* Color de texto oscuro */
}

.price {
    font-weight: 700;
}

.green {
    color: #34d399; /* Verde para 'Video Creation' */
}

.red {
    color: #ef4444; /* Rojo para 'Total' */
}
.white-box{
    padding:10px;
    background-color: white;
    border-radius: 1.5rem;
}

@media(max-width:750px){
    .video-container video{
        width:100%;
    }
    .navbar-brand{
    width: 150px !important;
    }
}

.btn-loader {
  display: none;
}
.hidden{
    display: none;
}


  .accordion-button {
    color: #1E5B3A;
    background-color: #ffffff;
  }

  .accordion-button:not(.collapsed) {
    color: #1E5B3A;
    background-color: #ffffff;
    box-shadow: none;
  }



  .accordion-button:not(.collapsed)::after {
    transform: rotate(180deg);
  }

  .accordion-item {
    border: none;
  }





/* ============================= */
/* BOTÓN DE WHATSAPP */
/* ============================= */
#whatsapp-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: linear-gradient(90deg, #25D366, #128C7E);
  color: white;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  z-index: 1000;
  font-size: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-shadow: 0 0 12px rgba(0,0,0,0.2);
  transition: transform 0.3s ease;
}
#whatsapp-button:hover {
  transform: scale(1.1);
}

/* ============================= */
/* TOOLTIP CON FLECHA Y ANIMACIÓN */
/* ============================= */
@keyframes tooltipPop {
  0%   { opacity: 0; transform: translateX(15px) scale(0.5); }
  60%  { opacity: 1; transform: translateX(-3px) scale(1.05); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}

#whatsapp-tooltip {
  position: fixed;
  bottom: 25px;
  right: 95px;
  background: #ffffff;
  color: #128C7E;
  padding: 9px 14px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 6px 15px rgba(0,0,0,0.2);
  z-index: 1000;
  opacity: 0;
  transform: translateX(10px) scale(0.9);
  pointer-events: none;
}

#whatsapp-tooltip::after {
  content: "";
  position: absolute;
  right: -8px;
  bottom: 14px;
  width: 0;
  height: 0;
  border-left: 10px solid #ffffff;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  filter: drop-shadow(2px 0 2px rgba(0,0,0,0.15));
}

#whatsapp-tooltip.show {
  animation: tooltipPop 0.45s ease forwards;
}

/* ============================= */
/* CHAT POPUP */
/* ============================= */
@keyframes chatSlideUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.chat-popup {
  position: fixed;
  bottom: 90px;
  right: 20px;
  width: 340px;
  max-height: 70vh;
  background: #ece5dd;
  border-radius: 1rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  z-index: 999;
  display: none;
  flex-direction: column;
  overflow: hidden;
}

.chat-popup.open {
  display: flex;
  animation: chatSlideUp 0.25s ease;
}

/* Responsive móvil (popup más grande pero no fullscreen) */
@media (max-width: 600px) {
  .chat-popup {
    width: 95%;
    right: 2.5%;
    bottom: 90px;
    height: 50vh;
  }
}

/* ============================= */
/* CABECERA */
/* ============================= */
.chat-header {
  background: #075E54;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  color: #fff;
}

.chat-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.chat-info {
  margin-left: 10px;
  flex: 1;
}

.chat-name {
  font-size: 16px;
  font-weight: 700;
}

.chat-status {
  font-size: 11px;
  color: #c6e8e0;
}

#chat-close {
  background: none;
  border: none;
  color: white;
  font-size: 20px;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
}
#chat-close:hover {
  transform: scale(1.1);
}

/* ============================= */
/* CUERPO DEL CHAT */
/* ============================= */
.chat-body {
  background: #e5ddd5;
  padding: 12px;
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* Burbujas */
.chat-bubble {
  max-width: 80%;
  padding: 9px 13px;
  border-radius: 10px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.4;
  color: #222;
}

.chat-bubble.bot {
  background: #ffffff;
  border-top-left-radius: 0;
}

.chat-bubble.user {
  background: #dcf8c6;
  align-self: flex-end;
  border-top-right-radius: 0;
}

/* Typing indicator */
.chat-typing {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  max-width: 80%;
  padding: 7px 11px;
  border-radius: 10px;
  background: #ffffff;
  border-top-left-radius: 0;
  font-size: 12px;
  color: #555;
}

.chat-typing .typing-text {
  margin-right: 4px;
}

.chat-typing .dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #888;
  display: inline-block;
  animation: typingDots 1s infinite ease-in-out;
}
.chat-typing .dot:nth-child(2) { animation-delay: 0.15s; }
.chat-typing .dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes typingDots {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40% { transform: translateY(-3px); opacity: 1; }
}

/* ============================= */
/* FOOTER */
/* ============================= */
.chat-footer {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  background: #f0f0f0;
  border-top: 1px solid #ddd;
  gap: 8px;
}

#chat-message {
  flex: 1;
  width: auto !important;
  background: #fff;
  color: #222;
  border: none;
  border-radius: 20px;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.4;
  min-height: 38px;
  max-height: 80px;
  resize: none !important;
  overflow-y: hidden; /* auto-ajuste por JS */
  outline: none;
  box-sizing: border-box;
}
#chat-message::placeholder {
  color: #888;
}

/* Botón enviar */
#chat-send {
  background: #075E54;
  border: none;
  color: #fff;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
#chat-send:hover {
  background: #064c43;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
#chat-send:active {
  transform: translateY(0);
  box-shadow: none;
}