/* ==========================================
   1. RESET TOTAL DE FIELDSETS (QUITAR CAJAS)
   ========================================== */
fieldset {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}


/* quitar títulos tipo "detalle precios crc" */
legend {
  display: none !important;
}

.form-item + .form-item {
  padding: 0px 0px; /* Cambiado de 10px a 0px */
  margin-top: 0 !important;
}



/* ==========================================
   2. CENTRAR BLOQUE PRINCIPAL
   ========================================== */

fieldset.form-wrapper {
  padding: 0px !important; /* Forzar limpieza de espaciados */
  max-width: 100% !important; /* Cambiado de auto a 100% */
  margin: 0 auto;
  width: 100% !important;
}


/* ==========================================
   3. TEXTOS SUPERIORES
   ========================================== */
   


.field--name-field-incluido-como-beneficio,
.field--name-field-incluido-como-beneficio p {
  font-size: var(--px10) !important;
  text-align: center !important;
  line-height: 0 !important;
  margin: 8px !important; /* Limpia márgenes por defecto del párrafo */
}

.field--name-field-asi-se-compone-tu-plan .field__item,
.field--name-field-total-del-paquete .field__item {
  text-align: center;
  margin: 0px 10px;
  border-top: 2px solid #e5e5e5;
  margin-top: 5px;
  padding-top: 5px;
  color: var(--black-1);
  font-size: var(--px14);
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.field--name-field-texto-internet-movil .field__item,
.field--name-field-texto-datos-movil .field__item,
.field--name-field-texto-internet-movil p,
.field--name-field-texto-datos-movil p {
    font-size: var(--px12);
    /*white-space: nowrap;*/
    margin: 0px 0px;
}

.field--name-field-precio-internet-movil .field__item,
.field--name-field-precio-datos-movil .field__item,
.field--name-field-precio-internet-movil p,
.field--name-field-precio-datos-movil p {
    font-size: var(--px12);
    font-weight: 700;
}


/* ==========================================
   4. FILAS (ICONO + TEXTO + PRECIO EN LINEA)
   ========================================== */


fieldset.form-wrapper fieldset .fieldset__wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  box-sizing: border-box !important; /* Evita desbordamientos */
  padding: 0 10px !important; /* Pequeño margen interno de seguridad */
  margin: 0 !important;
}


/* 1. Preparamos el último fieldset de la lista para proyectar la línea */
fieldset.form-wrapper fieldset:last-of-type .fieldset__wrapper {
  position: relative !important;
  padding-bottom: 8px !important; /* Espacio antes de la línea */
}

/* 2. Dibujamos la línea idéntica a la superior sin tocar los textos */
fieldset.form-wrapper fieldset:last-of-type .fieldset__wrapper::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 10px !important;   /* Ajuste de margen izquierdo */
  right: 10px !important;  /* Ajuste de margen derecho */
  border-bottom: 0px solid #e5e5e5 !important;
  pointer-events: none !important;
}





/* ==========================================
   4. FILAS (ICONO + TEXTO + PRECIO EN LINEA)
   ========================================== */

fieldset.form-wrapper fieldset .fieldset__wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 0 10px !important;
  margin: 0 !important;
}




/* ==========================================
   5. IZQUIERDA: ICONO + TEXTO
   ========================================== */
   
   /* Forzar que los iconos tengan una pequeña separación a su derecha */
.field--name-field-icono-internet-movil,
.field--name-field-icono-datos-movil {
  margin-right: 4px !important;
}
   
   
   /* Limpiamos el display flex de aquí para dejar que actúen como elementos inline del flex padre */
.field--name-field-icono-internet-movil,
.field--name-field-texto-internet-movil,
.field--name-field-icono-datos-movil,
.field--name-field-texto-datos-movil {
  display: inline-block !important;
  vertical-align: middle;
}

  
/* ==========================================
   6. PRECIO DERECHA (SIN NEGRILLA)
   ========================================== */

/* El precio se queda limpio empujado a la derecha */
.field--name-field-precio-internet-movil,
.field--name-field-precio-datos-movil {
  margin-left: auto !important;
  text-align: right !important;
}

/* ==========================================
   7. QUITAR NEGRILLAS DE TODO EL BLOQUE
   ========================================== */

.field--name-field-total-del-paquete,
.field--name-field-texto-internet-movil,
.field--name-field-texto-datos-movil {
  font-weight: normal !important;
}

/* ==========================================
   8. ICONOS (AISLADOS DE FORMA ESTRICTA)
   ========================================== */

/* Controla de forma estricta el contenedor AMP y CUALQUIER etiqueta img que viva dentro de tus dos campos de íconos */
.field--name-field-icono-internet-movil amp-img,
.field--name-field-icono-internet-movil img,
.field--name-field-icono-datos-movil amp-img,
.field--name-field-icono-datos-movil img {
  width: var(--px16) !important;
  height: var(--px16) !important;
  max-width: var(--px16) !important;
  max-height: var(--px16) !important;
  object-fit: contain !important;
  display: inline-block !important;
}

/* Apaga el sizer interno de AMP únicamente dentro de los agrupadores de este paquete */
fieldset:has(.field--name-field-precio-internet-movil) i-amphtml-sizer,
fieldset:has(.field--name-field-precio-datos-movil) i-amphtml-sizer {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
}