.elementor-149 .elementor-element.elementor-element-d79f768{margin:-15px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-149 .elementor-element.elementor-element-dc750d2{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );text-transform:var( --e-global-typography-primary-text-transform );font-style:var( --e-global-typography-primary-font-style );text-decoration:var( --e-global-typography-primary-text-decoration );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );color:var( --e-global-color-primary );}.elementor-149 .elementor-element.elementor-element-2428188{padding:0% 25% 0% 25%;text-align:center;}.elementor-149 .elementor-element.elementor-element-2428188 .elementor-heading-title{font-family:var( --e-global-typography-c05b693-font-family ), Sans-serif;font-size:var( --e-global-typography-c05b693-font-size );font-weight:var( --e-global-typography-c05b693-font-weight );text-transform:var( --e-global-typography-c05b693-text-transform );font-style:var( --e-global-typography-c05b693-font-style );text-decoration:var( --e-global-typography-c05b693-text-decoration );line-height:var( --e-global-typography-c05b693-line-height );letter-spacing:var( --e-global-typography-c05b693-letter-spacing );-webkit-text-stroke-width:0px;stroke-width:0px;-webkit-text-stroke-color:#000;stroke:#000;color:#488D4A;}@media(max-width:1024px){.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-149 .elementor-element.elementor-element-2428188 .elementor-heading-title{font-size:var( --e-global-typography-c05b693-font-size );line-height:var( --e-global-typography-c05b693-line-height );letter-spacing:var( --e-global-typography-c05b693-letter-spacing );}}@media(max-width:767px){.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-149 .elementor-element.elementor-element-2428188{padding:0% 0% 0% 0%;}.elementor-149 .elementor-element.elementor-element-2428188 .elementor-heading-title{font-size:var( --e-global-typography-c05b693-font-size );line-height:var( --e-global-typography-c05b693-line-height );letter-spacing:var( --e-global-typography-c05b693-letter-spacing );}}/* Start custom CSS for html, class: .elementor-element-d79f768 *//* Contenedor Principal */
.metabolic-card {
  position: relative;
  width: 100%;
  max-width: 1200px;
  height: 420px;
  background-color: #ffffff;
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 30px;
  box-sizing: border-box;
  box-shadow: 0 12px 35px rgba(0,0,0,0.08);
  margin: 0 auto;
  font-family: 'Montserrat', Arial, sans-serif;
}

/* Imagen a la derecha en Desktop */
.metabolic-card .card-image-side {
  position: absolute;
  right: 30px;
  top: 30px;
  bottom: 30px;
  width: 48%;
  border-radius: 16px;
  overflow: hidden;
  z-index: 1;
}

.metabolic-card .card-image-side img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Tarjeta Verde */
.metabolic-card .card-content-side {
  position: relative;
  z-index: 2;
  flex: 0 0 48%;
  height: 100%;
  background-color: #408742;
  border-radius: 18px;
  padding: 35px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: flex-basis 0.8s cubic-bezier(0.25, 1, 0.5, 1), width 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  overflow: hidden;
}

.metabolic-card .card-inner-top {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Etiqueta Plan */
.metabolic-card .badge-plan {
  background-color: #f39c12;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 20px;
  display: inline-block;
  width: max-content;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

/* Título y subtítulo */
.metabolic-card .card-content-side h2 {
  color: #ffffff;
  font-size: 38px;
  margin: 0 0 10px 0;
  line-height: 1.05;
  font-weight: 800;
}

.metabolic-card .card-subtitle {
  color: #ffffff;
  font-size: 16px;
  margin: 0;
  line-height: 1.4;
  opacity: 0.95;
}

/* Contenedor desplegable (Oculto en desktop por defecto) */
.metabolic-card .hover-content-wrapper {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 35px;
  left: 35px;
  right: 35px;
  display: flex;
  flex-direction: column;
}

/* Caja "Dirigido a:" */
.metabolic-card .hover-info-box {
  background: rgba(255, 255, 255, 0.15);
  border-left: 4px solid #f39c12;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 12px;
}

.metabolic-card .info-title {
  color: #ffffff;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 2px;
}

.metabolic-card .info-desc {
  color: #f1f1f1;
  font-size: 14px;
  margin: 0;
  line-height: 1.35;
}

/* Botón Ver Más interior */
.metabolic-card .btn-ver-mas {
  background-color: #f39c12;
  color: #ffffff;
  padding: 9px 24px;
  border-radius: 22px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  align-self: flex-end;
  box-shadow: 0 4px 12px rgba(243, 156, 18, 0.3);
}

.metabolic-card .btn-ver-mas:hover {
  background-color: #ffffff;
  color: #f39c12;
  transform: translateY(-1px);
}

/* Hover en Escritorio */
@media (hover: hover) and (pointer: fine) {
  .metabolic-card:hover .card-content-side {
    flex: 0 0 calc(100% - 60px);
    width: calc(100% - 60px);
  }

  .metabolic-card:hover .hover-content-wrapper {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

/* Versión Móvil (Estática y completa) */
@media screen and (max-width: 900px) {
  .metabolic-card {
    flex-direction: column;
    height: auto;
    padding: 20px;
    gap: 20px;
  }

  .metabolic-card .card-image-side {
    position: relative;
    width: 100%;
    height: 220px;
    right: auto;
    top: auto;
    bottom: auto;
    order: 1;
    border-radius: 14px;
  }

  .metabolic-card .card-content-side {
    width: 100% !important;
    flex: none;
    height: auto;
    padding: 24px 20px;
    order: 2;
    display: flex;
    flex-direction: column;
  }

  .metabolic-card .card-inner-top {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 15px;
  }

  .metabolic-card .card-content-side h2 {
    font-size: 28px;
  }

  /* Hace que el bloque de info sea estático y visible siempre en móvil */
  .metabolic-card .hover-content-wrapper {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column;
    margin-top: 0;
  }

  .metabolic-card .hover-info-box {
    text-align: left;
    margin-bottom: 15px;
  }

  .metabolic-card .btn-ver-mas {
    align-self: center;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-dc750d2 *//* ==========================================================================
   1. ESTRUCTURA GENERAL (Aplica a ambos bloques por igual)
   ========================================================================== */
.metabolic-card {
  position: relative;
  width: 100%;
  max-width: 1200px;
  height: 420px;
  background-color: #ffffff; /* Fondo blanco de la tarjeta completa */
  border-radius: 24px; /* Esquinas redondeadas del contenedor principal */
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 30px;
  box-sizing: border-box;
  box-shadow: 0 12px 35px rgba(0,0,0,0.08); /* Sombra exterior gris suave */
  margin: 0 auto 30px auto; /* Separación vertical entre bloques */
  
  /* ---> MODIFICAR FUENTE GLOBAL AQUÍ <--- */
  font-family: 'Montserrat', Arial, sans-serif; 
}

/* Contenedor de la Imagen (A la derecha en Desktop) */
.metabolic-card .card-image-side {
  position: absolute;
  right: 30px;
  top: 30px;
  bottom: 30px;
  width: 48%; /* Ancho que ocupa la imagen en pantalla */
  background-color: #fd9429; /* Fondo gris de respaldo si la imagen real falla */
  border-radius: 16px; /* Esquinas redondeadas de la foto */
  overflow: hidden;
  z-index: 1;
}

/* Comportamiento de la foto dentro de su contenedor */
.metabolic-card .card-image-side img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ajusta la imagen para que llene el espacio sin deformarse */
}

/* Tarjeta de Contenido Interna (El bloque de color izquierdo) */
.metabolic-card .card-content-side {
  position: relative;
  z-index: 2;
  flex: 0 0 48%;
  height: 100%;
  border-radius: 18px; /* Esquinas redondeadas del bloque de color */
  padding: 35px; /* Espacio libre interno de textos */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  
  /* Duración de la animación de expansión al pasar el mouse (0.8 segundos) */
  transition: flex-basis 0.8s cubic-bezier(0.25, 1, 0.5, 1), width 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  overflow: hidden;
}

.metabolic-card .card-inner-top {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* ---> MODIFICAR TEXTOS PRINCIPALES (TÍTULO Y SUBTÍTULO) <--- */
.metabolic-card .card-content-side h2 {
  color: #ffffff; /* Color de las letras del Título */
  font-size: 38px; /* Tamaño de letra del Título */
  margin: 0 0 10px 0;
  line-height: 1.05;
  font-weight: 800; /* Grosor de la letra (Negrita) */
}

.metabolic-card .card-subtitle {
  color: #ffffff; /* Color de la descripción corta */
  font-size: 16px; /* Tamaño de la descripción corta */
  margin: 0;
  line-height: 1.4;
  opacity: 0.95;
}

/* Contenedor desplegable (Oculto en desktop por defecto) */
.metabolic-card .hover-content-wrapper {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 35px;
  left: 35px;
  right: 35px;
  display: flex;
  flex-direction: column;
}

/* Caja semi-transparente "Dirigido a:" */
.metabolic-card .hover-info-box {
  background: rgba(255, 255, 255, 0.15); /* Fondo blanco con 15% de opacidad */
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 12px;
}

.metabolic-card .info-title {
  color: #ffffff;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 2px;
}

.metabolic-card .info-desc {
  color: #f1f1f1;
  font-size: 14px;
  margin: 0;
  line-height: 1.35;
}

/* ---> DISEÑO BASE DE LOS BOTONES <--- */
.metabolic-card .btn-ver-mas {
  color: #ffffff;
  padding: 9px 24px;
  border-radius: 22px; /* Hace el botón redondeado */
  text-decoration: none; /* Quita la línea de enlace debajo del texto */
  font-size: 13px;
  font-weight: 700;
  align-self: flex-end; /* Alinea el botón a la derecha */
  transition: background-color 0.3s, color 0.3s, transform 0.3s;
}

/* Efecto global cuando pasas el mouse por encima de los botones */
.metabolic-card .btn-ver-mas:hover {
  background-color: #ffffff !important; /* El fondo se vuelve blanco en ambos */
  transform: translateY(-1px); /* Sube ligeramente el botón al pasar el mouse */
}

/* Animación Hover en Escritorio (Expansión lateral) */
@media (hover: hover) and (pointer: fine) {
  .metabolic-card:hover .card-content-side {
    flex: 0 0 calc(100% - 60px);
    width: calc(100% - 60px);
  }
  .metabolic-card:hover .hover-content-wrapper {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

/* ==========================================================================
   2. ADAPTACIÓN PARA MÓVILES (Cambios automáticos en pantallas pequeñas)
   ========================================================================== */
@media screen and (max-width: 900px) {
  .metabolic-card { flex-direction: column; height: auto; padding: 20px; gap: 20px; }
  .metabolic-card .card-image-side { position: relative; width: 100%; height: 220px; right: auto; top: auto; bottom: auto; order: 1; border-radius: 14px; }
  .metabolic-card .card-content-side { width: 100% !important; flex: none; height: auto; padding: 24px 20px; order: 2; display: flex; flex-direction: column; }
  .metabolic-card .card-inner-top { text-align: center; display: flex; flex-direction: column; align-items: center; margin-bottom: 15px; }
  .metabolic-card .card-content-side h2 { font-size: 28px; } /* Título más pequeño en celular */
  .metabolic-card .hover-content-wrapper { position: relative !important; bottom: auto !important; left: auto !important; right: auto !important; opacity: 1 !important; visibility: visible !important; transform: none !important; display: flex !important; flex-direction: column; margin-top: 0; }
  .metabolic-card .hover-info-box { text-align: left; margin-bottom: 15px; }
  .metabolic-card .btn-ver-mas { align-self: center; width: 100%; text-align: center; box-sizing: border-box; }
}


/* ==========================================================================
   3. COLORES EXCLUSIVOS DEL BLOQUE 1: "TOMANDO EL CONTROL" (VERDE)
   ========================================================================== */
   
/* Fondo de la tarjeta izquierda */
.metabolic-card.card-verde .card-content-side {
  background-color: #2e6f40; /* <--- CAMBIAR COLOR VERDE DE FONDO */
}

/* Etiqueta pequeña "PLAN" */
.metabolic-card.card-verde .badge-plan {
  background-color: #2e6f40; /* <--- CAMBIAR COLOR DE LA ETIQUETA */
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 20px;
  display: inline-block;
  width: max-content;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

/* Borde izquierdo de la caja "Dirigido a:" */
.metabolic-card.card-verde .hover-info-box {
  border-left: px solid #2e6f40; /* <--- CAMBIAR COLOR DEL BORDE INTERNO */
}

/* Botón "Ver plan" en estado normal */
.metabolic-card.card-verde .btn-ver-mas {
  background-color: #2e6f40; /* <--- CAMBIAR COLOR DEL BOTÓN */
  box-shadow: 0 4px 12px rgba(46, 111, 64, 0.3); /* Color de la sombra del botón */
}

/* Color del texto del botón al pasar el mouse por encima (Fondo blanco, texto verde) */
.metabolic-card.card-verde .btn-ver-mas:hover {
  color: #2e6f40 !important; /* <--- CAMBIAR COLOR DEL TEXTO EN HOVER */
}


/* ==========================================================================
   4. COLORES EXCLUSIVOS DEL BLOQUE 2: "TRANSFORMA-T" (NARANJA)
   ========================================================================== */
   
/* Fondo de la tarjeta izquierda */
.metabolic-card.card-naranja .card-content-side {
  background-color: #ef9411; /* <--- CAMBIAR COLOR NARANJA DE FONDO */
}

/* Etiqueta pequeña "PLAN" */
.metabolic-card.card-naranja .badge-plan {
  background-color: #ffffff; 
  color: #ef9411; /* <--- COLOR DE LA LETRA PLAN (Combina con fondo naranja) */
  font-size: 11px;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 20px;
  display: inline-block;
  width: max-content;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

/* Borde izquierdo de la caja "Dirigido a:" */
.metabolic-card.card-naranja .hover-info-box {
  border-left: 4px solid #ffffff; /* Borde blanco para que resalte sobre el fondo naranja */
}

/* Botón en estado normal */
.metabolic-card.card-naranja .btn-ver-mas {
  background-color: #4a843e; /* <--- CAMBIAR COLOR DEL BOTÓN */
  box-shadow: 0 4px 12px rgba(239, 148, 17, 0.3); /* Color de la sombra del botón */
}

/* Color del texto del botón al pasar el mouse por encima (Fondo blanco, texto naranja) */
.metabolic-card.card-naranja .btn-ver-mas:hover {
  color: #ef9411 !important; /* <--- CAMBIAR COLOR DEL TEXTO EN HOVER */
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-8aef362 *//* Contenedor Principal */
#unique-metabolic-card-wrapper-2 {
  position: relative;
  width: 100%;
  max-width: 1200px;
  min-height: 420px; 
  background-color: #ffffff;
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 30px;
  box-sizing: border-box;
  box-shadow: 0 12px 35px rgba(0,0,0,0.08);
  margin: 0 auto 30px auto;
  font-family: 'Montserrat', Arial, sans-serif;
}

/* Imagen de fondo a la derecha (Desktop) */
#unique-metabolic-card-wrapper-2 .card-image-side {
  position: absolute;
  right: 30px;
  top: 30px;
  bottom: 30px;
  width: 48%;
  border-radius: 16px;
  overflow: hidden;
  z-index: 1;
}

#unique-metabolic-card-wrapper-2 .card-image-side img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Tarjeta Verde Principal */
#unique-metabolic-card-wrapper-2 .card-content-side {
  position: relative;
  z-index: 2;
  flex: 0 0 48%;
  height: 420px;
  background-color: #3f6e3c;
  border-radius: 18px;
  padding: 30px;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 25px;
  transition: flex-basis 0.8s cubic-bezier(0.25, 1, 0.5, 1), width 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  overflow: hidden;
  will-change: flex-basis, width;
}

/* Bloque Izquierdo */
#unique-metabolic-card-wrapper-2 .card-left-content {
  width: 340px;
  min-width: 340px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  height: 100%;
}

/* Botón oculto en desktop */
#unique-metabolic-card-wrapper-2 .mobile-toggle-btn {
  display: none;
}

/* Etiqueta Naranja "PLAN" */
#unique-metabolic-card-wrapper-2 .badge-plan {
  background-color: #f39c12;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 20px;
  display: inline-block;
  width: max-content;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

/* Título Principal Blanco */
#unique-metabolic-card-wrapper-2 .card-left-content h2 {
  color: #ffffff;
  font-size: 32px;
  font-weight: 800;
  line-height: 1.05;
  margin: 0 0 8px 0;
  letter-spacing: -0.5px;
}

/* Subtítulo Blanco */
#unique-metabolic-card-wrapper-2 .card-subtitle {
  color: #ffffff;
  font-size: 16px;
  line-height: 1.35;
  margin: 0 0 10px 0;
}

/* Caja "Dirigido a:" */
#unique-metabolic-card-wrapper-2 .initial-info-box {
  background: rgba(255,255,255, 0.15);
  border-left: 4px solid #f39c12;
  padding: 10px 12px;
  border-radius: 6px;
  width: 100%;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease;
}

#unique-metabolic-card-wrapper-2 .initial-info-box .info-title {
  color: #ffffff;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 3px;
}

#unique-metabolic-card-wrapper-2 .initial-info-box .info-desc {
  color: #ffffff;
  font-size: 14px;
  line-height: 1.3;
  margin: 0;
}

/* Contenedor de las Sub-Tarjetas Blancas */
#unique-metabolic-card-wrapper-2 .hover-content-wrapper {
  position: absolute;
  top: 30px;
  right: 30px;
  bottom: 30px;
  left: 395px;
  display: flex;
  flex-direction: row;
  gap: 15px;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transform: translateX(30px);
  transition: opacity 0.5s ease 0.1s, visibility 0.5s ease 0.1s, transform 0.5s ease 0.1s;
}

/* Sub-Tarjetas Blancas */
#unique-metabolic-card-wrapper-2 .sub-card {
  background-color: #ffffff;
  border-radius: 14px;
  flex: 1;
  width: 50%;
  height: 100%;
  padding: 30px 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

#unique-metabolic-card-wrapper-2 .sub-card h3 {
  color: #f39c12;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 15px 0;
  text-transform: uppercase;
}

#unique-metabolic-card-wrapper-2 .sub-card p {
  color: #333333;
  font-size: 14px;
  line-height: 1.45;
  margin: 0;
}

#unique-metabolic-card-wrapper-2 .sub-card .btn-ver-mas {
  background-color: #f39c12;
  color: #ffffff;
  padding: 10px 28px;
  border-radius: 25px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  align-self: center;
  margin-top: auto;
  transition: background-color 0.3s ease;
}

#unique-metabolic-card-wrapper-2 .sub-card .btn-ver-mas:hover {
  background-color: #3FAE58;
  color: #ffffff;
  transform: translateY(-1px);
}

/* EFECTO HOVER (Desktop exclusivo) */
@media (hover: hover) and (pointer: fine) {
  #unique-metabolic-card-wrapper-2:hover .card-content-side {
    flex: 0 0 calc(100% - 60px);
    width: calc(100% - 60px);
  }
  #unique-metabolic-card-wrapper-2:hover .initial-info-box {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  #unique-metabolic-card-wrapper-2:hover .hover-content-wrapper {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }
}

/* ==========================================
   MEDIA QUERIES PARA MOBILE (Max 900px)
   ========================================== */
@media screen and (max-width: 900px) {
  #unique-metabolic-card-wrapper-2 {
    flex-direction: column;
    height: auto;
    padding: 20px;
    gap: 20px;
  }

  #unique-metabolic-card-wrapper-2 .card-image-side {
    position: relative;
    width: 100%;
    height: 220px;
    right: auto;
    top: auto;
    bottom: auto;
    order: 1;
    border-radius: 14px;
  }

  #unique-metabolic-card-wrapper-2 .card-content-side {
    width: 100% !important;
    flex: none;
    flex-direction: column;
    height: auto;
    padding: 24px 20px;
    order: 2;
  }

  #unique-metabolic-card-wrapper-2 .card-left-content {
    width: 100%;
    min-width: 100%;
    height: auto;
    align-items: center;
    text-align: center;
  }

  #unique-metabolic-card-wrapper-2 .card-left-content h2 {
    font-size: 26px;
  }

  #unique-metabolic-card-wrapper-2 .initial-info-box {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    margin-top: 15px;
    text-align: left;
  }

  #unique-metabolic-card-wrapper-2 .mobile-toggle-btn {
    display: block;
    background-color: #ffffff;
    color: #3f6e3c;
    border: none;
    padding: 10px 20px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 13px;
    margin-top: 15px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  }

  /* Modificación para ocultar las sub-tarjetas por defecto en celular */
  #unique-metabolic-card-wrapper-2 .hover-content-wrapper {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: 100%;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
    display: none; 
    opacity: 0;
    visibility: hidden;
    transform: none;
  }

  /* Despliegue forzado cuando se presiona el botón */
  #unique-metabolic-card-wrapper-2.mobile-expanded .hover-content-wrapper {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  #unique-metabolic-card-wrapper-2 .sub-card {
    width: 100%;
    height: auto;
    min-height: 250px;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-ec83fba *//* Contenedor Principal */
#unique-metabolic-card-wrapper {
  position: relative;
  width: 100%;
  max-width: 1200px;
  min-height: 420px; 
  background-color: #ffffff;
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 30px;
  box-sizing: border-box;
  box-shadow: 0 12px 35px rgba(0,0,0,0.08);
  margin: 0 auto 30px auto;
  font-family: 'Montserrat', Arial, sans-serif;
}

/* Imagen de fondo a la derecha (Desktop) */
#unique-metabolic-card-wrapper .card-image-side {
  position: absolute;
  right: 30px;
  top: 30px;
  bottom: 30px;
  width: 48%;
  border-radius: 16px;
  overflow: hidden;
  z-index: 1;
}

#unique-metabolic-card-wrapper .card-image-side img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Tarjeta Verde Principal */
#unique-metabolic-card-wrapper .card-content-side {
  position: relative;
  z-index: 2;
  flex: 0 0 48%;
  height: 420px;
  background-color: #3f3f3f;
  border-radius: 18px;
  padding: 30px;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 25px;
  transition: flex-basis 0.8s cubic-bezier(0.25, 1, 0.5, 1), width 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  overflow: hidden;
  will-change: flex-basis, width;
}

/* Bloque Izquierdo */
#unique-metabolic-card-wrapper .card-left-content {
  width: 340px;
  min-width: 340px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  height: 100%;
}

/* Botón oculto en desktop */
#unique-metabolic-card-wrapper .mobile-toggle-btn {
  display: none;
}

/* Etiqueta Naranja "PLAN" */
#unique-metabolic-card-wrapper .badge-plan {
  background-color: #f39c12;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 20px;
  display: inline-block;
  width: max-content;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

/* Título Principal Blanco */
#unique-metabolic-card-wrapper .card-left-content h2 {
  color: #ffffff;
  font-size: 32px;
  font-weight: 800;
  line-height: 1.05;
  margin: 0 0 8px 0;
  letter-spacing: -0.5px;
}

/* Subtítulo Blanco */
#unique-metabolic-card-wrapper .card-subtitle {
  color: #ffffff;
  font-size: 16px;
  line-height: 1.35;
  margin: 0 0 10px 0;
}

/* Caja "Dirigido a:" */
#unique-metabolic-card-wrapper .initial-info-box {
  background: rgba(255,255,255, 0.15);
  border-left: 4px solid #3fae58;
  padding: 10px 12px;
  border-radius: 6px;
  width: 100%;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease;
}

#unique-metabolic-card-wrapper .initial-info-box .info-title {
  color: #ffffff;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 3px;
}

#unique-metabolic-card-wrapper .initial-info-box .info-desc {
  color: #ffffff;
  font-size: 14px;
  line-height: 1.3;
  margin: 0;
}

/* Contenedor de las Sub-Tarjetas Blancas */
#unique-metabolic-card-wrapper .hover-content-wrapper {
  position: absolute;
  top: 30px;
  right: 30px;
  bottom: 30px;
  left: 395px;
  display: flex;
  flex-direction: row;
  gap: 15px;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transform: translateX(30px);
  transition: opacity 0.5s ease 0.1s, visibility 0.5s ease 0.1s, transform 0.5s ease 0.1s;
}

/* Sub-Tarjetas Blancas */
#unique-metabolic-card-wrapper .sub-card {
  background-color: #ffffff;
  border-radius: 14px;
  flex: 1;
  width: 50%;
  height: 100%;
  padding: 30px 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

#unique-metabolic-card-wrapper .sub-card h3 {
  color: #f39c12;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 15px 0;
  text-transform: uppercase;
}

#unique-metabolic-card-wrapper .sub-card p {
  color: #333333;
  font-size: 14px;
  line-height: 1.45;
  margin: 0;
}

#unique-metabolic-card-wrapper .sub-card .btn-ver-mas {
  background-color: #f39c12;
  color: #ffffff;
  padding: 10px 28px;
  border-radius: 25px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  align-self: center;
  margin-top: auto;
  transition: background-color 0.3s ease;
}

#unique-metabolic-card-wrapper .sub-card .btn-ver-mas:hover {
  background-color: #3FAE58;
  color: #ffffff;
  transform: translateY(-1px);
}

/* EFECTO HOVER (Desktop exclusivo) */
@media (hover: hover) and (pointer: fine) {
  #unique-metabolic-card-wrapper:hover .card-content-side {
    flex: 0 0 calc(100% - 60px);
    width: calc(100% - 60px);
  }
  #unique-metabolic-card-wrapper:hover .initial-info-box {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  #unique-metabolic-card-wrapper:hover .hover-content-wrapper {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }
}

/* ==========================================
   MEDIA QUERIES PARA MOBILE (Max 900px)
   ========================================== */
@media screen and (max-width: 900px) {
  #unique-metabolic-card-wrapper {
    flex-direction: column;
    height: auto;
    padding: 20px;
    gap: 20px;
  }

  #unique-metabolic-card-wrapper .card-image-side {
    position: relative;
    width: 100%;
    height: 220px;
    right: auto;
    top: auto;
    bottom: auto;
    order: 1;
    border-radius: 14px;
  }

  #unique-metabolic-card-wrapper .card-content-side {
    width: 100% !important;
    flex: none;
    flex-direction: column;
    height: auto;
    padding: 24px 20px;
    order: 2;
  }

  #unique-metabolic-card-wrapper .card-left-content {
    width: 100%;
    min-width: 100%;
    height: auto;
    align-items: center;
    text-align: center;
  }

  #unique-metabolic-card-wrapper .card-left-content h2 {
    font-size: 26px;
  }

  #unique-metabolic-card-wrapper .initial-info-box {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    margin-top: 15px;
    text-align: left;
  }

  #unique-metabolic-card-wrapper .mobile-toggle-btn {
    display: block;
    background-color: #ffffff;
    color: #3f6e3c;
    border: none;
    padding: 10px 20px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 13px;
    margin-top: 15px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  }

  /* Modificación para ocultar las sub-tarjetas por defecto en celular */
  #unique-metabolic-card-wrapper .hover-content-wrapper {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: 100%;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
    display: none; 
    opacity: 0;
    visibility: hidden;
    transform: none;
  }

  /* Despliegue forzado cuando se presiona el botón */
  #unique-metabolic-card-wrapper.mobile-expanded .hover-content-wrapper {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  #unique-metabolic-card-wrapper .sub-card {
    width: 100%;
    height: auto;
    min-height: 250px;
  }
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-2428188 */.elementor-149 .elementor-element.elementor-element-2428188 {
    position: relative;
    padding: 20px 25px !important;
    border: 2px solid #3FAE58 !important;
    border-radius: 16px !important;
    text-align: center;

    animation: aparecerMarco 2s ease-in-out infinite;
}

@keyframes aparecerMarco {

    0% {
        box-shadow: 0 0 0 0 rgba(63, 174, 88, 0);
    }

    50% {
        box-shadow: 0 0 0 7px rgba(63, 174, 88, 0.15);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(63, 174, 88, 0);
    }

}/* End custom CSS */