.group.currency.global {
  display: flex; /* o grid */
  gap: 12px;     /* ajusta el número */
}

  /* Ajustes responsive */
@media (max-width: 992px) {

  .pricing-section {

    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .pricing-cards {
    flex-direction: column;  /* Apila las tarjetas */
    align-items: center;     /* Centra */
    gap: 1rem;               /* Menos espacio entre ellas */
  }

  .card1 {
    max-width: 100% !important; /* Que ocupen todo el ancho */
    width: 100%;
    margin-bottom: 16px!important;
}
  }
}

@media (max-width: 576px) {
  .pricing-section {
    padding-top: 0px!important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .card-header .btn {
    font-size: 13px;
    padding: 0.7rem;
  }

  .plan-title {
    font-size: 14px;
    padding: 4px 12px;
  }

  .price {
    font-size: 32px; /* Más chico para móvil */
  }
}

@media (max-width: 768px) {
 .ext{margin-bottom: 48px!important;}
.template1{font-size: 16px!important;margin-top: 24px!important;}
.template2{font-size: 14px!important;margin-bottom: 48px!important;padding: 0px 0px 0px 0px!important;}
.centrar{text-align: center!important;}
.frecuentes{font-size: 32px!important}
.alguna{font-size: 14px!important;}
.faq-container{max-width: 94%!important;margin-bottom: 96px!important;}
.pricing-cards {display: block!important;padding-bottom: 32px!important;}}
.global{
  font-family: 'Poppins', sans-serif;
  font-weight: 400;      /* 400 = Regular */
  font-style: normal;    /* "Regular" no existe en CSS, es normal */
  line-height: normal;     /* valor fijo */
  letter-spacing: 0;     /* sin espaciado extra */
  color: #1E1E1E;        /* si lo quieres consistente */

   }

.custom-badge {
  position: relative;
  overflow: hidden; /* por seguridad */
}

.custom-badge::before {
  content: "";
  position: absolute;
  inset: 0; /* ocupa todo el div */
  background: inherit; /* toma el mismo background */
  filter: grayscale(100%);
  z-index: 0; /* queda detrás */
}

.custom-badge > * {
  position: relative;
  z-index: 1; /* asegura que texto e hijos vayan encima */
}


.card1:hover .custom-badge::before {
  filter: grayscale(0%);
}

.card1:hover .custom-badge {
  filter: grayscale(0%);
  background-size: cover;
}
/* Hover de la card afecta al span de ahorro */
/* Hover solo cuando .ahorro NO esté vacío */
.card1:hover .ahorro:not(:empty) {


  text-align: center;
  max-width:52%;
  background-color: #92DFBF; /* verde leve */
  border: 1px solid #00AB63;              /* contorno verde */
  border-radius: 1.5em;                      /* esquinas redondeadas */
  padding: 4px 6px;                        /* un poco de espacio interno */
  display: inline-block;                   /* para que el padding funcione */
  transition: all 0.3s ease;               /* transición suave */
}



/* Estilo normal */
.billing-btn {
  background: #fff;
  border: 1px solid #007bff;
  color: black;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 16px;
}

.billing-btn .desc {
  color: #00AB63; /* verde */
}

/* Estilo hover */
.billing-btn:hover {
  background: #00A3FF;
  color: #fff;
}

.billing-btn:hover .desc {
  color: #fff; /* también cambia el span al hacer hover */
}

/* Estilo cuando está activo */
.billing-btn.active {
  background: #007bff;
  color: #fff;
}

.billing-btn.active .desc {
  color: #fff; /* el span se vuelve blanco también */
}

  .custom-badge {
    text-align: left;
    width: 100%;
  display: inline-block;
  background-image: url('../img/card-fondo.png');      /* fondo gris clarito */
  color: #333;               /* texto oscuro */
  font-weight: 600;
  padding: 16px 16px;
  border-radius: 12px;
  font-size: 1rem;
  margin-bottom: 15px;
}

  /* ===== SECCIÓN PRINCIPAL ===== */
.pricing-section {
  padding: 8px;
  background: #f9fbff; /* un fondo clarito como en tu captura */
  border-radius: 16px;
}

/* ===== CONTROLES ===== */
.pricing-controls {
  display: flex;
  justify-content: center;  /* centrado */
  align-items: center;
  gap: 2rem;  /* ajusta este valor para más/menos espacio */
  flex-wrap: wrap;
}

@media (max-width: 768px) {
.prices{        padding-bottom: 24px !important;}
    .pricing-section {
    padding-top: 0px!important;}
  .billing-cycle {
    display: flex;
    justify-content: space-between; /* reparte en todo el ancho */
    gap: 8px;                       /* espacio entre botones */
    padding: 0 16px;                /* padding a los lados */
  }

  .billing-cycle button {
    flex: 1;                        /* todos ocupan mismo ancho */
    text-align: center;
    white-space: nowrap;            /* evita que el texto salte de línea */
    font-size: 14px;                /* un poco más compacto */
    padding: 10px 8px;
  }
}
@media (max-width: 360px) {
  .billing-cycle button {
    font-size: 12px;
    padding: 8px 6px;
  }
}


/* ===== BOTONES DE CICLO (Mensual, Trimestral, Anual) ===== */
.billing-cycle button {
  padding: 0.5rem 1rem;
  border-radius: 9999px; /* forma de píldora */
  border:transparent;
  background: #fff;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s;
}

.billing-cycle button.active {
  background: #00A3FF;
  border-color: #00A3FF;
  color: #fff;
}



/* ===== BOTONES DE MONEDA (MX, USD, R) ===== */
.currency button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: #f2f2f2;
  color: #333;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.currency button.active {
  background: #000;
  color: #fff;
}

.pricing-cards {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  max-width: 1200px;
      margin: 24px auto;
  font-family: "Poppins", sans-serif;
}

.card1 {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  flex: 1;
  max-width: 280px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 5px 20px rgba(0,0,0,0.05);
  overflow: hidden;
}

/* Header con borde inferior */
.card-header {
  padding: 16px;
      border-radius: 1.5em !important;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.05);
}


.plan-title {
  display: inline-block;       /* Para que se adapte al contenido */
  background-color: #cce7ff;   /* Fondo azul clarito */
  color: #007bff;              /* Texto azul */
  padding: 6px 16px;           /* Espaciado interno */
  border: 1px solid #80bdff;   /* Borde azul */
  border-radius: 999px;        /* Hace la forma de píldora */
  font-size: 15px;             /* Tamaño del texto */
  font-weight: 600;            /* Negrita */
  text-align: center;
}

.plan-desc {
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 1rem;
  line-height: normal;
  text-align: left;
}

.price {
  text-align: center;
  font-size: 40px;
  font-weight: 700;
  color: #0f172a;
}

.price .period {
  font-size: 14px;
  font-weight: 400;
  margin-left: 0.2rem;
  color: #6b7280;
}

.price .amount::before {
  content: "";
}

/* Body */
.card-body {
  padding-top: 16px;
      padding-bottom: 48px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;

  flex-grow: 1;
}

.card-body ul {
  list-style: none;
  padding: 0;
  margin: 0 0 2px 0;
}

.card-body ul li {

      margin-bottom: 16px;
  font-size: 16px;
  color: #374151;
  position: relative;
list-style: none;
   padding-left: 28px; /* espacio para la imagen */
}


/* Estilo general para todos los li::before (se mantiene como check-bold) */
.card-body ul li::before {
    content: url(../img/check-bold.png);
    position: absolute;
    left: -1px;
    top: 0px;
    width: 18px;
    height: 18px;
}

/* 🚀 ESTILO ESPECÍFICO: Solo para el último LI del último UL */
.card-body ul:last-of-type li:last-child::before {
    /* ⚠️ Reemplaza con la ruta de tu nuevo ícono, por ejemplo, bot-ai-icon.png */
    content: url(../img/robot1.png);
    /* Mantén las demás propiedades para asegurar la posición */
    /* position: absolute; */
    /* left: -1px; */
    /* top: 0px; */
    /* width: 18px; */
    /* height: 18px; */
}


/* Botón */
.card-header .btn {
  width: 100%;
  background: #00A3FF;
  color: #fff;
  text-decoration: none;
  text-align: center;
  padding: 0.8rem 1rem;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  transition: background 0.2s;
}

.card-body .btn:hover {
  background: #1e40af;
}

/* Badge “más popular” */
.card.popular .badge {
  background: linear-gradient(135deg, #3b82f6, #60a5fa);
  color: #fff;
  font-weight: 600;
  padding: 0.6rem 1rem;
  border-radius: 12px;
  display: inline-block;
  margin-bottom: 1rem;
  font-size: 1rem;
}

.card1:hover {
  transform: scale(1.05);
  border-color: #007bff;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.btn:hover {
  background: #0056b3;
}


  .img-desktop {
  display: block;
  width: 100%;
}

.img-mobile {
  display: none;
  width: 100%;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .usuarios{white-space: break-spaces!important;}
  .extras-text{    margin-top: 0px!important;  padding-top: 48px!important;  }
  .img-desktop {
    display: none;
  }
  .img-mobile {
    display: block;
  }
}

/* MÓVIL */
@media (max-width: 768px) {
  .aplica{font-size: 12px!important;}
  .option h3 {font-size: 16px!important;}
  .usuario{    padding-right: 0px!important;}
  .option {
        padding-right: 0px!important;
    flex-direction: column;   /* texto arriba, precio abajo */
    align-items: flex-start;  /* alinea a la izquierda */
    gap: 8px;                 /* espacio entre texto y precio */
  }

  .price2 {
    text-align: left; /* precio a la izquierda */
    width: 100%;
    margin-top: 8px;  /* espacio entre texto y precio */
  }
}


.price2 {
  text-align: right;
  white-space: nowrap; /* evita saltos raros en precio */
}

.price2 span {
  display: block;
  font-size: 20px;
  font-weight: bold;
  margin: 0;
}

.price2 small {
  display: block;
  font-size: 12px;
  color: #555;
  margin: 0;
}


.extras-section {
  display: grid;
  grid-template-columns: 300px 1fr; /* dos columnas en desktop */
  gap: 20px;
  max-width: 900px;
  margin: 0 auto;
}

/* responsive */
@media (max-width: 768px) {
  .faq-container{    padding-left: 15px!important;padding-right: 15px!important;}

  .extras-section {
    width: 100%!important;
    grid-template-columns: 1fr; /* pasa a una sola columna */
    padding-left: 8px!important;
    padding-right: 8px!important;
    border: 2px solid transparent!important;
  }


}


/* Columna Izquierda */
.extras-card {
  background-color: #000;
  color: white;
      border-radius: 1.8em;
  padding: 16px;                 /* menos padding */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* reparte contenido */
  text-align: center;
  height: 100%; /* ocupa la misma altura que la derecha */
}

.extras-header {
  background: linear-gradient(135deg, #4dabf7, #1864ab);
  color: white;
  padding: 40px 10px;             /* menos alto */
  width: 100%;
  border-radius: 16px;
  font-size: 20px;
  font-weight: bold;
}

.extras-text {
  margin: 16px 0;
  font-size: 13px;
  line-height: 1.4;
}

.btn-primary {
  background-color: #00a8ff;
  color: #fff;
  border: none;
  padding: 10px 16px;            /* botón más compacto */
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  width: 100%;
}

/* Columna Derecha */
.extras-options {
  display: flex;
  flex-direction: column;
  gap: 0px; /* menos separación entre opciones */
}


.option {
 
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid #ddd;
      padding-bottom: 16px;
    padding-top: 16px;
    padding-right: 25px;
}





@media (max-width: 768px) {

  .recorte{width: 80%!important;}
  .option > div:first-child {
    padding-right: 0; /* quita padding en móvil */
    width: 100%;
  }
}


.option h3 {
  margin: 0;
  font-size: 18px;
  font-weight: bold;
}

.option p {
  margin: 4px 0;
  font-size: 14px;
  color: #333;
}

.option a {
  font-size: 12px;
  color: #007bff;
  text-decoration: underline;
}

.price2 {
  text-align: right;
}

.price2 span {
  display: block;
  font-size: 32px;
  font-weight: bold;
}

.price2 small {
  display: ruby-text;
  margin-top: 0;
  line-height: 1;   /* más compacto, prueba con 1 o 1.1 */
  font-size: 12px;  /* tamaño pequeño */
}


  .faq-container {
    max-width: 800px;
    margin: 0 auto;
  }

  .faq-item {
    border-bottom: 1px solid #ddd;
    padding: 15px 0;
  }

  .faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    color: #000;
    transition: color 0.3s;
  }

.faq-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #000;   /* Fondo negro por defecto */
  color: #fff;        /* Flecha siempre blanca */
  font-size: 14px;
  transition: all 0.3s ease;
  flex-shrink: 0;     /* 🚀 evita que se aplaste */
}

.faq-question.active .faq-icon {
  transform: rotate(180deg);
  background: #007bff; /* Fondo azul al estar activo */
  color: #fff;
}

/* Responsive */
@media (max-width: 600px) {
  .faq-question {
    font-size: 14px;
  }
  .faq-answer {
    font-size: 13px;
  }
  .faq-icon {
    width: 28px;   /* ✅ mantiene tamaño fijo */
    height: 28px;  
    font-size: 14px;
  }
}

  .faq-question.active {
    color: #00A3FF;
  }

  .faq-question.active .faq-icon {
    transform: rotate(180deg);
    background: #00A3FF; /* Fondo azul al estar activo */
    color: #fff;         /* Flecha siempre blanca */
  }

  .faq-answer {
    display: none;
    margin-top: 10px;
    font-size: 15px;
    line-height: 1.5;
    color: #333;

  }

  .faq-answer.show {
    display: block;
    background: #def1fe;
    padding: 20px;
    border-radius: 1em;
    /* border-color: #00a3ff; */
    border: 0.1px solid #00a3ff;
  }

  /* Responsive */
  @media (max-width: 600px) {
    .faq-question {
      font-size: 14px;
    }
    .faq-answer {
      font-size: 13px;
    }
    .faq-icon {
      width: 24px;
      height: 24px;
      font-size: 12px;
    }
  }